@esri/calcite-components 2.12.0 → 2.13.0-next.1

package/hydrate/index.mjs

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.0
+ * v2.13.0-next.1
  */
 import { Readable } from 'stream';
 
@@ -3926,11 +3926,6 @@ class AccordionItem {
     }; }
 }
 
-// ⚠️ browser-sniffing is not a best practice and should be avoided ⚠️
-const isFirefox = /firefox/i.test(getUserAgentString());
-const disabledElementToParent = isFirefox
-    ? new WeakMap()
-    : null;
 function interceptedClick() {
     const { disabled } = this;
     if (!disabled) {
@@ -3939,11 +3934,7 @@ function interceptedClick() {
 }
 function onPointerDown(event) {
     const interactiveElement = event.target;
-    if (isFirefox && !disabledElementToParent.get(interactiveElement)) {
-        return;
-    }
-    const { disabled } = interactiveElement;
-    if (disabled) {
+    if (interactiveElement.disabled) {
         // prevent click from moving focus on host
         event.preventDefault();
     }
@@ -3951,9 +3942,6 @@ function onPointerDown(event) {
 const nonBubblingWhenDisabledMouseEvents = ["mousedown", "mouseup", "click"];
 function onNonBubblingWhenDisabledMouseEvent(event) {
     const interactiveElement = event.target;
-    if (isFirefox && !disabledElementToParent.get(interactiveElement)) {
-        return;
-    }
     // 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 ⚠
     if (interactiveElement.disabled) {
@@ -3988,87 +3976,20 @@ function updateHostInteraction(component) {
 }
 function blockInteraction(component) {
     component.el.click = interceptedClick;
-    if (isFirefox) {
-        const currentParent = getParentElement(component);
-        const trackedParent = disabledElementToParent.get(component.el);
-        if (trackedParent !== currentParent) {
-            removeInteractionListeners(trackedParent);
-            disabledElementToParent.set(component.el, currentParent);
-        }
-        addInteractionListeners(disabledElementToParent.get(component.el));
-        return;
-    }
     addInteractionListeners(component.el);
 }
 function addInteractionListeners(element) {
-    if (!element) {
-        // this early return path is only applicable to Firefox
-        return;
-    }
     element.addEventListener("pointerdown", onPointerDown, captureOnlyOptions);
     nonBubblingWhenDisabledMouseEvents.forEach((event) => element.addEventListener(event, onNonBubblingWhenDisabledMouseEvent, captureOnlyOptions));
 }
-function getParentElement(component) {
-    return (component.el.parentElement || component.el); /* assume element is host if it has no parent when connected */
-}
-function isInteractiveHTMLElement(el) {
-    return "disabled" in el;
-}
 function restoreInteraction(component) {
     delete component.el.click; // fallback on HTMLElement.prototype.click
-    if (isFirefox) {
-        const parent = disabledElementToParent.get(component.el);
-        let hasDisabledSiblingElements = false;
-        if (parent?.children) {
-            for (const child of parent.children) {
-                if (isInteractiveHTMLElement(child) && child.disabled && child !== component.el) {
-                    hasDisabledSiblingElements = true;
-                    break;
-                }
-            }
-        }
-        if (!hasDisabledSiblingElements) {
-            removeInteractionListeners(parent);
-        }
-        disabledElementToParent.delete(component.el);
-        return;
-    }
     removeInteractionListeners(component.el);
 }
 function removeInteractionListeners(element) {
-    if (!element) {
-        // this early return 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;
-    }
-    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;
-    }
-    restoreInteraction(component);
-}
 const CSS$1v = {
     container: "interaction-container",
 };
@@ -4773,7 +4694,6 @@ class Action {
     //
     // --------------------------------------------------------------------------
     connectedCallback() {
-        connectInteractive(this);
         connectLocalized(this);
         connectMessages(this);
         this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
@@ -4785,7 +4705,6 @@ class Action {
         setComponentLoaded(this);
     }
     disconnectedCallback() {
-        disconnectInteractive(this);
         disconnectLocalized(this);
         disconnectMessages(this);
         this.mutationObserver?.disconnect();
@@ -4844,7 +4763,7 @@ class Action {
             [CSS$1u.buttonTextVisible]: textEnabled,
             [CSS$1u.buttonCompact]: compact,
         };
-        return (hAsync(Host, { key: '0e061330c72e61acb61e53d2d94e1478c03c8083' }, hAsync(InteractiveContainer, { key: 'd34028dbfeb72982aa3fe6847663b16672f3e6ea', disabled: disabled }, hAsync("button", { key: 'c05c642ffb09bb466c0c4d1be0b8aac79b2dcdff', "aria-busy": toAriaBoolean(loading), "aria-controls": indicator ? indicatorId : null, "aria-disabled": toAriaBoolean(disabled), "aria-label": ariaLabel, "aria-pressed": toAriaBoolean(active), class: buttonClasses, disabled: disabled, id: buttonId, ref: (buttonEl) => (this.buttonEl = buttonEl) }, this.renderIconContainer(), this.renderTextContainer(), !icon && indicator && hAsync("div", { class: CSS$1u.indicatorWithoutIcon, key: "indicator-no-icon" })), hAsync("slot", { key: '8ab8d03371d7cd7211e5ab1a083b9b7b9017db79', name: SLOTS$A.tooltip, onSlotchange: this.handleTooltipSlotChange }), this.renderIndicatorText())));
+        return (hAsync(Host, { key: 'e34721cc66d60c8542bf3587bfed591577bb4b06' }, hAsync(InteractiveContainer, { key: '397a02c1da63f25b762bc002476d960ba173f4b8', disabled: disabled }, hAsync("button", { key: 'cbb5a29d2606fbcb0e71d1b023d82f3cd00d09be', "aria-busy": toAriaBoolean(loading), "aria-controls": indicator ? indicatorId : null, "aria-disabled": toAriaBoolean(disabled), "aria-label": ariaLabel, "aria-pressed": toAriaBoolean(active), class: buttonClasses, disabled: disabled, id: buttonId, ref: (buttonEl) => (this.buttonEl = buttonEl) }, this.renderIconContainer(), this.renderTextContainer(), !icon && indicator && hAsync("div", { class: CSS$1u.indicatorWithoutIcon, key: "indicator-no-icon" })), hAsync("slot", { key: '6f5286add59b6dbc19ef43f23df9e73ca7b2914c', name: SLOTS$A.tooltip, onSlotchange: this.handleTooltipSlotChange }), this.renderIndicatorText())));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return getElement(this); }
@@ -10129,13 +10048,11 @@ class Block {
     // --------------------------------------------------------------------------
     connectedCallback() {
         connectConditionalSlotComponent(this);
-        connectInteractive(this);
         connectLocalized(this);
         connectMessages(this);
         this.transitionEl = this.el;
     }
     disconnectedCallback() {
-        disconnectInteractive(this);
         disconnectLocalized(this);
         disconnectMessages(this);
         disconnectConditionalSlotComponent(this);
@@ -10199,14 +10116,14 @@ class Block {
     render() {
         const { collapsible, el, loading, open, heading, messages, description } = this;
         const toggleLabel = open ? messages.collapse : messages.expand;
-        const headerContent = (hAsync("header", { key: '91deb640f5a591cd70dbb6328cdc588a40b600d5', class: { [CSS$1m.header]: true, [CSS$1m.headerHasText]: !!(heading || description) }, id: IDS$c.header }, this.renderIcon("start"), this.renderContentStart(), this.renderLoaderStatusIcon(), this.renderTitle()));
+        const headerContent = (hAsync("header", { key: '85a369767af7638d2f3c6771472a8030cc0ce339', class: { [CSS$1m.header]: true, [CSS$1m.headerHasText]: !!(heading || description) }, id: IDS$c.header }, this.renderIcon("start"), this.renderContentStart(), this.renderLoaderStatusIcon(), this.renderTitle()));
         const hasControl = !!getSlotted(el, SLOTS$u.control);
         const hasMenuActions = !!getSlotted(el, SLOTS$u.headerMenuActions);
         const collapseIcon = open ? ICONS$l.opened : ICONS$l.closed;
-        const headerNode = (hAsync("div", { key: 'ebba82b4e065978eaa9ed1e59f05ad80843cc9ab', class: CSS$1m.headerContainer }, this.dragHandle ? hAsync("calcite-handle", { label: heading }) : null, collapsible ? (hAsync("button", { "aria-controls": IDS$c.content, "aria-describedby": IDS$c.header, "aria-expanded": collapsible ? toAriaBoolean(open) : null, class: CSS$1m.toggle, id: IDS$c.toggle, onClick: this.onHeaderClick, title: toggleLabel }, headerContent, hAsync("div", { class: CSS$1m.iconEndContainer }, this.renderIcon("end"), hAsync("calcite-icon", { class: CSS$1m.toggleIcon, icon: collapseIcon, scale: "s" })))) : this.iconEnd ? (hAsync("div", null, headerContent, hAsync("div", { class: CSS$1m.iconEndContainer }, this.renderIcon("end")))) : (headerContent), hasControl ? (hAsync("div", { "aria-labelledby": IDS$c.header, class: CSS$1m.controlContainer }, hAsync("slot", { name: SLOTS$u.control }))) : null, hasMenuActions ? (hAsync("calcite-action-menu", { label: messages.options, overlayPositioning: this.overlayPositioning }, hAsync("slot", { name: SLOTS$u.headerMenuActions }))) : null, this.renderActionsEnd()));
-        return (hAsync(Host, { key: 'b5c12059b36785bf45ce61e7309a35278b928088' }, hAsync(InteractiveContainer, { key: '90a5013ca2e30dadbd76c146700a53391f3aea62', disabled: this.disabled }, hAsync("article", { key: '825f15336afb992c7ea8c718b5ffad7c4bf2507e', "aria-busy": toAriaBoolean(loading), class: {
+        const headerNode = (hAsync("div", { key: '53d635b3073079b2fe2e88760537fd284d2f3d55', class: CSS$1m.headerContainer }, this.dragHandle ? hAsync("calcite-handle", { label: heading }) : null, collapsible ? (hAsync("button", { "aria-controls": IDS$c.content, "aria-describedby": IDS$c.header, "aria-expanded": collapsible ? toAriaBoolean(open) : null, class: CSS$1m.toggle, id: IDS$c.toggle, onClick: this.onHeaderClick, title: toggleLabel }, headerContent, hAsync("div", { class: CSS$1m.iconEndContainer }, this.renderIcon("end"), hAsync("calcite-icon", { class: CSS$1m.toggleIcon, icon: collapseIcon, scale: "s" })))) : this.iconEnd ? (hAsync("div", null, headerContent, hAsync("div", { class: CSS$1m.iconEndContainer }, this.renderIcon("end")))) : (headerContent), hasControl ? (hAsync("div", { "aria-labelledby": IDS$c.header, class: CSS$1m.controlContainer }, hAsync("slot", { name: SLOTS$u.control }))) : null, hasMenuActions ? (hAsync("calcite-action-menu", { label: messages.options, overlayPositioning: this.overlayPositioning }, hAsync("slot", { name: SLOTS$u.headerMenuActions }))) : null, this.renderActionsEnd()));
+        return (hAsync(Host, { key: 'e7488bae0cd129ce5f3e9094b710fab20c453bf1' }, hAsync(InteractiveContainer, { key: 'a5bb56f7b6febdfbf562a691d4577dd3ca255f18', disabled: this.disabled }, hAsync("article", { key: '619214b6ba4dd400aece22715af70d5157f70b60', "aria-busy": toAriaBoolean(loading), class: {
                 [CSS$1m.container]: true,
-            } }, headerNode, hAsync("section", { key: '4f690563d78615b68a225456aaae593af6adb826', "aria-labelledby": IDS$c.toggle, class: CSS$1m.content, hidden: !open, id: IDS$c.content }, this.renderScrim())))));
+            } }, headerNode, hAsync("section", { key: '4cb1b995cfc4888b9d03920e10659ee2eb4e7529', "aria-labelledby": IDS$c.toggle, class: CSS$1m.content, hidden: !open, id: IDS$c.content }, this.renderScrim())))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return getElement(this); }
@@ -11045,7 +10962,6 @@ class Button {
     //
     //--------------------------------------------------------------------------
     async connectedCallback() {
-        connectInteractive(this);
         connectLocalized(this);
         connectMessages(this);
         this.setupTextContentObserver();
@@ -11054,7 +10970,6 @@ class Button {
     }
     disconnectedCallback() {
         this.mutationObserver?.disconnect();
-        disconnectInteractive(this);
         disconnectLabel(this);
         disconnectLocalized(this);
         disconnectMessages(this);
@@ -11076,10 +10991,10 @@ class Button {
         const Tag = childElType;
         const loaderNode = this.loading ? (hAsync("div", { class: CSS$1k.buttonLoader }, hAsync("calcite-loader", { class: this.loading ? CSS$1k.loadingIn : CSS$1k.loadingOut, inline: true, label: this.messages.loading, scale: this.scale === "l" ? "m" : "s" }))) : null;
         const noStartEndIcons = !this.iconStart && !this.iconEnd;
-        const iconStartEl = (hAsync("calcite-icon", { key: '4d22fe0db49aa06f71162b2ef64d4011b1b818d8', class: { [CSS$1k.icon]: true, [CSS$1k.iconStart]: true }, flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: getIconScale(this.scale) }));
-        const iconEndEl = (hAsync("calcite-icon", { key: '95c15bea3179d091058d225e80477956fcb27e63', class: { [CSS$1k.icon]: true, [CSS$1k.iconEnd]: true }, flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: getIconScale(this.scale) }));
-        const contentEl = (hAsync("span", { key: '6399f9291ba542a304a2813cda9ad21de0a19c36', class: CSS$1k.content, ref: (el) => (this.contentEl = el) }, hAsync("slot", { key: '818ff928ab9c8d722763ec6c1fdbf6b0d60ef210' })));
-        return (hAsync(InteractiveContainer, { key: 'a6799ecea681f5e1929237fd26f91cc6895ae291', disabled: this.disabled }, hAsync(Tag, { key: '042f056a472a091f4728127d079089dbb262d572', "aria-disabled": childElType === "a" ? toAriaBoolean(this.disabled || this.loading) : null, "aria-expanded": this.el.getAttribute("aria-expanded"), "aria-label": !this.loading ? getLabelText(this) : this.messages.loading, "aria-live": "polite", class: {
+        const iconStartEl = (hAsync("calcite-icon", { key: '28bcdb04d4f0918cffdc42f9fe99c6aec734923e', class: { [CSS$1k.icon]: true, [CSS$1k.iconStart]: true }, flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: getIconScale(this.scale) }));
+        const iconEndEl = (hAsync("calcite-icon", { key: '8ce8d2a568f30f405ec3bad699a486de65e1601d', class: { [CSS$1k.icon]: true, [CSS$1k.iconEnd]: true }, flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: getIconScale(this.scale) }));
+        const contentEl = (hAsync("span", { key: '7321be35d6f5b8ce6e82ab961796a662aba6336d', class: CSS$1k.content, ref: (el) => (this.contentEl = el) }, hAsync("slot", { key: '01d16270c78bb679d6115b0252a3604a18226d4a' })));
+        return (hAsync(InteractiveContainer, { key: 'bb07ba2e81b944e850100cdd21c09bab89005d92', disabled: this.disabled }, hAsync(Tag, { key: '995cb928fa0570f41559dde091a6bd792f5d3400', "aria-disabled": childElType === "a" ? toAriaBoolean(this.disabled || this.loading) : null, "aria-expanded": this.el.getAttribute("aria-expanded"), "aria-label": !this.loading ? getLabelText(this) : this.messages.loading, "aria-live": "polite", class: {
                 [CSS$1k.buttonPadding]: noStartEndIcons,
                 [CSS$1k.buttonPaddingShrunk]: !noStartEndIcons,
                 [CSS$1k.contentSlotted]: this.hasContent,
@@ -12018,7 +11933,7 @@ const ICONS$i = {
     unselectedSingle: "circle",
 };
 
-const cardCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block;max-inline-size:100%;--calcite-card-corner-radius:var(--calcite-corner-radius-sharp);--calcite-card-background-color:var(--calcite-color-foreground-1);--calcite-card-border-color:var(--calcite-color-border-3);--calcite-card-shadow:var(--calcite-shadow-none);--calcite-card-accent-color-selected:var(--calcite-color-brand);--calcite-card-selection-background-color:transparent;--calcite-card-selection-background-color-hover:var(--calcite-color-transparent-hover);--calcite-card-selection-background-color-active:var(--calcite-color-transparent-press);--calcite-card-selection-background-color-selected:transparent;--calcite-card-selection-icon-color:var(--calcite-color-text-3);--calcite-card-selection-icon-color-hover:var(--calcite-color-text-2);--calcite-card-selection-icon-color-selected:var(--calcite-color-brand)}.content-wrapper{position:relative;display:flex;block-size:100%;flex-direction:column;justify-content:space-between;overflow:hidden;border:var(--calcite-border-width-sm) solid var(--calcite-card-border-color);border-radius:var(--calcite-card-corner-radius);background-color:var(--calcite-card-background-color);box-shadow:var(--calcite-card-shadow);pointer-events:none}::slotted(*){pointer-events:auto}:host(:not([selectable])) .content-wrapper:not(.non-interactive){outline-color:transparent}:host(:not([selectable])) .content-wrapper:not(.non-interactive):focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.container{position:relative;display:flex;flex:1 1 auto;flex-direction:column}:host([loading]) .content-wrapper *:not(calcite-loader):not(.calcite-card-loader-container){pointer-events:none;opacity:0}:host([loading]) .calcite-card-loader-container{position:absolute;inset:0px;display:flex;align-items:center}.header{display:flex;flex-direction:row;align-items:flex-start}.footer{margin-block-start:auto;display:flex;flex-direction:row;align-content:space-between;justify-content:space-between;padding-inline:var(--calcite-spacing-md);padding-block-start:var(--calcite-spacing-xxs);padding-block-end:var(--calcite-spacing-md)}.header-text-container{display:flex;inline-size:100%;flex-direction:column;justify-content:center;padding-inline:0.75rem;padding-block:0.5rem}.header-text-container:not(:only-child){padding-inline-end:0.125rem}.footer{margin-block-start:auto;flex-direction:row;align-content:space-between;justify-content:space-between;padding-inline:0.75rem;padding-block:0.25rem 0.75rem}.card-content{block-size:auto;font-size:var(--calcite-font-size--2);line-height:1.375}.has-slotted-content{padding:0.75rem}:host([selected]) .content-wrapper{box-shadow:inset 0 -4px 0 0 var(--calcite-card-accent-color-selected)}:host([selectable]) .header{padding-inline-end:var(--calcite-spacing-xxxl)}slot[name=title]::slotted(*),*::slotted([slot=title]){margin:0px;font-size:var(--calcite-font-size--1);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}slot[name=subtitle]::slotted(*),*::slotted([slot=subtitle]){margin:0px;margin-block-start:0.125rem;font-size:var(--calcite-font-size--2);line-height:1.375;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-2)}slot[name=heading]::slotted(*),*::slotted([slot=heading]){margin:0px;font-size:var(--calcite-font-size--1);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}slot[name=description]::slotted(*),*::slotted([slot=description]){margin:0px;margin-block-start:0.125rem;font-size:var(--calcite-font-size--2);line-height:1.375;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-2)}slot[name=thumbnail]::slotted(img),img::slotted([slot=thumbnail]){min-inline-size:100%;max-inline-size:100%}slot[name=footer-start]::slotted(*),*::slotted([slot=footer-start]){align-self:center;font-size:var(--calcite-font-size--2);line-height:1.375;margin-inline-end:auto}slot[name=footer-end]::slotted(*),*::slotted([slot=footer-end]){align-self:center;font-size:var(--calcite-font-size--2);line-height:1.375}.checkbox-wrapper-deprecated{pointer-events:auto;position:absolute;inset-block-start:var(--calcite-spacing-sm);inset-inline-end:var(--calcite-spacing-sm);margin:0;padding:0}.checkbox-wrapper{pointer-events:auto;margin:0.5rem;cursor:pointer;padding:0.5rem;outline-color:transparent;background-color:var(--calcite-card-selection-background-color);display:flex;align-items:center;justify-items:center;--calcite-icon-color:var(--calcite-card-selection-icon-color)}.checkbox-wrapper:hover{background-color:var(--calcite-card-selection-background-color-hover);--calcite-icon-color:var(--calcite-card-selection-icon-color-hover)}.checkbox-wrapper:active{background-color:var(--calcite-card-selection-background-color-active)}.checkbox-wrapper calcite-icon{pointer-events:none}:host([selected]) .checkbox-wrapper{--calcite-icon-color:var(--calcite-card-selection-icon-color-selected);background-color:var(--calcite-card-selection-background-color-selected)}:host([selected]) .checkbox-wrapper:hover{background-color:var(--calcite-card-selection-background-color-hover)}:host([selected]) .checkbox-wrapper:active{background-color:var(--calcite-card-selection-background-color-active)}:host(:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper{background-color:var(--calcite-card-selection-background-color-hover);--calcite-icon-color:var(--calcite-card-selection-icon-color-hover)}:host([selected]:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper{background-color:var(--calcite-card-selection-background-color-active);--calcite-icon-color:var(--calcite-card-selection-icon-color-selected)}.thumbnail-wrapper{display:flex}.content-wrapper.inline{flex-direction:row}.content-wrapper.inline>.container{inline-size:60%}.content-wrapper.inline>.thumbnail-wrapper{inline-size:40%;align-items:flex-start}.content-wrapper.inline slot[name=thumbnail]::slotted(img),.content-wrapper.inline img::slotted([slot=thumbnail]){inline-size:100%}slot[name=footer-start]::slotted(*),slot[name=footer-end]::slotted(*){display:flex;gap:0.25rem}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}";
+const cardCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block;max-inline-size:100%}.content-wrapper{position:relative;display:flex;block-size:100%;flex-direction:column;justify-content:space-between;overflow:hidden;border:var(--calcite-border-width-sm) solid var(--calcite-card-border-color, var(--calcite-color-border-3));border-radius:var(--calcite-card-corner-radius, var(--calcite-corner-radius-sharp));background-color:var(--calcite-card-background-color, var(--calcite-color-foreground-1));box-shadow:var(--calcite-card-shadow, var(--calcite-shadow-none));pointer-events:none}::slotted(*){pointer-events:auto}:host(:not([selectable])) .content-wrapper:not(.non-interactive){outline-color:transparent}:host(:not([selectable])) .content-wrapper:not(.non-interactive):focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.container{position:relative;display:flex;flex:1 1 auto;flex-direction:column}:host([loading]) .content-wrapper *:not(calcite-loader):not(.calcite-card-loader-container){pointer-events:none;opacity:0}:host([loading]) .calcite-card-loader-container{position:absolute;inset:0px;display:flex;align-items:center}.header{display:flex;flex-direction:row;align-items:flex-start}.footer{margin-block-start:auto;display:flex;flex-direction:row;align-content:space-between;justify-content:space-between;padding-inline:var(--calcite-spacing-md);padding-block-start:var(--calcite-spacing-xxs);padding-block-end:var(--calcite-spacing-md)}.header-text-container{display:flex;inline-size:100%;flex-direction:column;justify-content:center;padding-inline:0.75rem;padding-block:0.5rem}.header-text-container:not(:only-child){padding-inline-end:0.125rem}.footer{margin-block-start:auto;flex-direction:row;align-content:space-between;justify-content:space-between;padding-inline:0.75rem;padding-block:0.25rem 0.75rem}.card-content{block-size:auto;font-size:var(--calcite-font-size--2);line-height:1.375}.has-slotted-content{padding:0.75rem}:host([selected]) .content-wrapper{box-shadow:inset 0 -4px 0 0 var(--calcite-card-accent-color-selected, var(--calcite-color-brand))}:host([selectable]) .header{padding-inline-end:var(--calcite-spacing-xxxl)}slot[name=title]::slotted(*),*::slotted([slot=title]){margin:0px;font-size:var(--calcite-font-size--1);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}slot[name=subtitle]::slotted(*),*::slotted([slot=subtitle]){margin:0px;margin-block-start:0.125rem;font-size:var(--calcite-font-size--2);line-height:1.375;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-2)}slot[name=heading]::slotted(*),*::slotted([slot=heading]){margin:0px;font-size:var(--calcite-font-size--1);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}slot[name=description]::slotted(*),*::slotted([slot=description]){margin:0px;margin-block-start:0.125rem;font-size:var(--calcite-font-size--2);line-height:1.375;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-2)}slot[name=thumbnail]::slotted(img),img::slotted([slot=thumbnail]){min-inline-size:100%;max-inline-size:100%}slot[name=footer-start]::slotted(*),*::slotted([slot=footer-start]){align-self:center;font-size:var(--calcite-font-size--2);line-height:1.375;margin-inline-end:auto}slot[name=footer-end]::slotted(*),*::slotted([slot=footer-end]){align-self:center;font-size:var(--calcite-font-size--2);line-height:1.375}.checkbox-wrapper-deprecated{pointer-events:auto;position:absolute;inset-block-start:var(--calcite-spacing-sm);inset-inline-end:var(--calcite-spacing-sm);margin:0;padding:0;color:var(--calcite-card-selection-color, var(--calcite-color-text-3))}.checkbox-wrapper-deprecated:hover{background-color:var(--calcite-card-selection-background-color-hover, var(--calcite-color-foreground-2));color:var(--calcite-card-selection-color-hover, var(--calcite-card-selection-icon-color-hover, var(--calcite-color-text-2)))}.checkbox-wrapper-deprecated:active{background-color:var(--calcite-card-selection-background-color-press, var(--calcite-color-transparent-press))}.checkbox-wrapper{pointer-events:auto;margin:0.5rem;cursor:pointer;padding:0.5rem;outline-color:transparent;display:flex;align-items:center;justify-items:center;color:var(--calcite-card-selection-color, var(--calcite-color-text-3))}.checkbox-wrapper:hover{background-color:var(--calcite-card-selection-background-color-hover, var(--calcite-color-foreground-2));color:var(--calcite-card-selection-color-hover, var(--calcite-card-selection-icon-color-hover, var(--calcite-color-text-2)))}.checkbox-wrapper:active{background-color:var(--calcite-card-selection-background-color-press, var(--calcite-color-transparent-press))}.checkbox-wrapper calcite-icon{pointer-events:none}:host([selected]) .checkbox-wrapper-deprecated,:host([selected]) .checkbox-wrapper{color:var(--calcite-card-accent-color-selected, var(--calcite-card-selection-icon-color-selected, var(--calcite-color-brand)))}:host(:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper-deprecated,:host(:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper{background-color:var(--calcite-card-selection-background-color-hover, var(--calcite-color-foreground-2));color:var(--calcite-card-selection-color-hover, var(--calcite-card-selection-icon-color-hover, var(--calcite-color-text-2)))}:host([selected]:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper-deprecated,:host([selected]:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper{background-color:var(--calcite-card-selection-background-color-press, var(--calcite-color-transparent-press));color:var(--calcite-card-accent-color-selected, var(--calcite-card-selection-icon-color-selected, var(--calcite-color-brand)))}.thumbnail-wrapper{display:flex}.content-wrapper.inline{flex-direction:row}.content-wrapper.inline>.container{inline-size:60%}.content-wrapper.inline>.thumbnail-wrapper{inline-size:40%;align-items:flex-start}.content-wrapper.inline slot[name=thumbnail]::slotted(img),.content-wrapper.inline img::slotted([slot=thumbnail]){inline-size:100%}slot[name=footer-start]::slotted(*),slot[name=footer-end]::slotted(*){display:flex;gap:0.25rem}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}";
 var CalciteCardStyle0 = cardCss;
 
 /**
@@ -12123,7 +12038,6 @@ class Card {
     //
     // --------------------------------------------------------------------------
     connectedCallback() {
-        connectInteractive(this);
         connectLocalized(this);
         connectMessages(this);
     }
@@ -12134,7 +12048,6 @@ class Card {
         updateHostInteraction(this);
     }
     disconnectedCallback() {
-        disconnectInteractive(this);
         disconnectLocalized(this);
         disconnectMessages(this);
     }
@@ -12186,10 +12099,10 @@ class Card {
             : this.selectionMode !== "none"
                 ? "radio"
                 : undefined;
-        return (hAsync(Host, { key: 'e33b76130cd91d3caa6662f1f58b79d238c708fb' }, hAsync(InteractiveContainer, { key: '772da2a3a1274eb467d1febb915ffb97953beae7', disabled: this.disabled }, hAsync("div", { key: 'b9fdbb51cfb07964479d0f723add39b8a2384f86', "aria-checked": this.selectionMode !== "none" ? toAriaBoolean(this.selected) : undefined, "aria-disabled": this.disabled, "aria-label": this.label, class: { [CSS$1f.contentWrapper]: true, inline: thumbnailInline }, onClick: this.cardBodyClickHandler, onKeyDown: this.keyDownHandler, ref: (el) => (this.containerEl = el), role: role, tabIndex: !this.selectable || this.disabled ? 0 : -1 }, this.loading ? (hAsync("div", { "aria-live": "polite", class: "calcite-card-loader-container" }, hAsync("calcite-loader", { label: this.messages.loading }))) : null, thumbnailStart && this.renderThumbnail(), hAsync("section", { key: '51cfe132a589ec65b39544b4c1246545b0b864f2', "aria-busy": toAriaBoolean(this.loading), class: { [CSS$1f.container]: true } }, this.renderHeader(), hAsync("div", { key: 'c256998e330a949d47a12b23127c68cba081854e', class: {
+        return (hAsync(Host, { key: 'cc6fb557df0c34c078ff67adb1ae92be52e71293' }, hAsync(InteractiveContainer, { key: '270320cb6e070661fea9bc509ba2c2a2a4f9ab72', disabled: this.disabled }, hAsync("div", { key: 'd16bffb557e6aa57a957dc76e95e64575ea69db1', "aria-checked": this.selectionMode !== "none" ? toAriaBoolean(this.selected) : undefined, "aria-disabled": this.disabled, "aria-label": this.label, class: { [CSS$1f.contentWrapper]: true, inline: thumbnailInline }, onClick: this.cardBodyClickHandler, onKeyDown: this.keyDownHandler, ref: (el) => (this.containerEl = el), role: role, tabIndex: !this.selectable || this.disabled ? 0 : -1 }, this.loading ? (hAsync("div", { "aria-live": "polite", class: "calcite-card-loader-container" }, hAsync("calcite-loader", { label: this.messages.loading }))) : null, thumbnailStart && this.renderThumbnail(), hAsync("section", { key: 'd9c348b0564a7233f07d6f6f149a5d697c0e5d49', "aria-busy": toAriaBoolean(this.loading), class: { [CSS$1f.container]: true } }, this.renderHeader(), hAsync("div", { key: '8b263696e0fd40609fe7dd66b557afaa66ee25ee', class: {
                 [CSS$1f.cardContent]: true,
                 [CSS$1f.hasSlottedContent]: this.hasContent,
-            } }, hAsync("slot", { key: '17fb9b0a9919f09a474d3c54818e770be9a85b77', onSlotchange: this.handleDefaultSlotChange })), this.renderFooter()), !thumbnailStart && this.renderThumbnail()))));
+            } }, hAsync("slot", { key: '49314c12404a66c681b93a8f3e7c56669b995498', onSlotchange: this.handleDefaultSlotChange })), this.renderFooter()), !thumbnailStart && this.renderThumbnail()))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return getElement(this); }
@@ -12222,7 +12135,7 @@ class Card {
     }; }
 }
 
-const cardGroupCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{--calcite-card-group-gap:var(--calcite-size-md);display:block}.container{display:flex;flex-wrap:wrap;gap:var(--calcite-card-group-gap)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}";
+const cardGroupCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block}.container{display:flex;flex-wrap:wrap;gap:var(--calcite-card-group-space, var(--calcite-card-group-gap, var(--calcite-size-md)))}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}";
 var CalciteCardGroupStyle0 = cardGroupCss;
 
 /**
@@ -12299,18 +12212,12 @@ class CardGroup {
     //  Lifecycle
     //
     //--------------------------------------------------------------------------
-    connectedCallback() {
-        connectInteractive(this);
-    }
     componentDidRender() {
         updateHostInteraction(this);
     }
     componentDidLoad() {
         setComponentLoaded(this);
     }
-    disconnectedCallback() {
-        disconnectInteractive(this);
-    }
     async componentWillLoad() {
         setUpLoadableComponent(this);
     }
@@ -12365,7 +12272,7 @@ class CardGroup {
     //--------------------------------------------------------------------------
     render() {
         const role = this.selectionMode === "none" || this.selectionMode === "multiple" ? "group" : "radiogroup";
-        return (hAsync(Host, { key: 'f7d72ac0d0c8b0cec9b1c5c048ed2a8ee304d9e2' }, hAsync(InteractiveContainer, { key: 'b477bbced684168f1e68c1fe0d8511a689653995', disabled: this.disabled }, hAsync("div", { key: 'ce0aa841b96ad23886e109203a14ac2b0e54b948', "aria-disabled": toAriaBoolean(this.disabled), "aria-label": this.label, class: "container", role: role }, hAsync("slot", { key: '338c12be0a5a675daf911aad6049aff6319d3064', onSlotchange: this.updateItemsOnSlotChange, ref: (el) => (this.slotRefEl = el) })))));
+        return (hAsync(Host, { key: 'ba4ffbc827d09b09c6c042519a5f86ce3728d0fe' }, hAsync(InteractiveContainer, { key: '59e07314b287f3703340b99b3ff877a058a59583', disabled: this.disabled }, hAsync("div", { key: 'c203fa3c783553a2c8d32e0f8be607b7421674d9', "aria-disabled": toAriaBoolean(this.disabled), "aria-label": this.label, class: "container", role: role }, hAsync("slot", { key: 'd58a98005e7d4a45f4b657d260f6af0087cefbde', onSlotchange: this.updateItemsOnSlotChange, ref: (el) => (this.slotRefEl = el) })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -12689,7 +12596,6 @@ class Carousel {
     //
     // --------------------------------------------------------------------------
     connectedCallback() {
-        connectInteractive(this);
         connectLocalized(this);
         connectMessages(this);
     }
@@ -12700,7 +12606,6 @@ class Carousel {
         updateHostInteraction(this);
     }
     disconnectedCallback() {
-        disconnectInteractive(this);
         disconnectLocalized(this);
         disconnectMessages(this);
         this.clearIntervals();
@@ -12808,17 +12713,17 @@ class Carousel {
     }
     render() {
         const { direction } = this;
-        return (hAsync(Host, { key: 'bff4155cb4358665eb6530b6637322598604d873' }, hAsync(InteractiveContainer, { key: '7a388be689aca07856f350963c33bce1d4e5e278', disabled: this.disabled }, hAsync("div", { key: 'c53c92b22ace937c0d2a6568ddd729ccb1b91108', "aria-label": this.label, "aria-live": this.playing ? "off" : "polite", "aria-roledescription": this.messages.carousel, class: {
+        return (hAsync(Host, { key: '369aa68cabe196db3bb4d323f01b2759d1592b13' }, hAsync(InteractiveContainer, { key: '6bf6f16c7521c0948ba9fa44a85926dec345916e', disabled: this.disabled }, hAsync("div", { key: 'b1ae8c83f472642889d24a61a2c7f0bf3855f814', "aria-label": this.label, "aria-live": this.playing ? "off" : "polite", "aria-roledescription": this.messages.carousel, class: {
                 [CSS$1e.container]: true,
                 [CSS$1e.containerOverlaid]: this.controlOverlay,
                 [CSS$1e.containerEdged]: this.arrowType === "edge",
-            }, onFocusin: this.handleFocusIn, onFocusout: this.handleFocusOut, onKeyDown: this.containerKeyDownHandler, onMouseEnter: this.handleMouseIn, onMouseLeave: this.handleMouseOut, ref: this.storeContainerRef, role: "group", tabIndex: 0 }, hAsync("section", { key: 'cae379b167a37ef82417ab308c7d623300790122', class: {
+            }, onFocusin: this.handleFocusIn, onFocusout: this.handleFocusOut, onKeyDown: this.containerKeyDownHandler, onMouseEnter: this.handleMouseIn, onMouseLeave: this.handleMouseOut, ref: this.storeContainerRef, role: "group", tabIndex: 0 }, hAsync("section", { key: '8d897cf89cd2d40df5f305b03c380f07570cb5c3', class: {
                 [CSS$1e.itemContainer]: true,
                 [CSS$1e.itemContainerForward]: direction === "forward",
                 [CSS$1e.itemContainerBackward]: direction === "backward",
             }, id: this.containerId,
             // eslint-disable-next-line react/jsx-sort-props -- auto-generated by @esri/calcite-components/enforce-ref-last-prop
-            ref: this.storeItemContainerRef }, hAsync("slot", { key: 'bf14a67b46e8946e9cafc57a8d0625b65513f702', onSlotchange: this.handleSlotChange })), this.items.length > 1 && this.renderPaginationArea(), this.arrowType === "edge" && this.renderArrow("previous"), this.arrowType === "edge" && this.renderArrow("next")))));
+            ref: this.storeItemContainerRef }, hAsync("slot", { key: '8f3b0ac2cbef1e4fae7c93836cca24d790439e02', onSlotchange: this.handleSlotChange })), this.items.length > 1 && this.renderPaginationArea(), this.arrowType === "edge" && this.renderArrow("previous"), this.arrowType === "edge" && this.renderArrow("next")))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return getElement(this); }
@@ -13011,12 +12916,10 @@ class Checkbox {
     //--------------------------------------------------------------------------
     connectedCallback() {
         this.guid = this.el.id || `calcite-checkbox-${guid()}`;
-        connectInteractive(this);
         connectLabel(this);
         connectForm(this);
     }
     disconnectedCallback() {
-        disconnectInteractive(this);
         disconnectLabel(this);
         disconnectForm(this);
     }
@@ -13036,10 +12939,10 @@ class Checkbox {
     // --------------------------------------------------------------------------
     render() {
         const rtl = getElementDir(this.el) === "rtl";
-        return (hAsync(Host, { key: '29feebf02ef9c71ea9e6dafe0f5ed11b0cb89848', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, hAsync(InteractiveContainer, { key: 'e89b0df0f5638181e233bce9c454e48c6963de19', disabled: this.disabled }, hAsync("div", { key: '25a91677124b2b77e6e30bf371afce3153c26761', "aria-checked": toAriaBoolean(this.checked), "aria-label": getLabelText(this), class: {
+        return (hAsync(Host, { key: 'd57a679e4ff45a42e59afd82d11d20bff681690c', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, hAsync(InteractiveContainer, { key: 'ad73ea4fc3ad972c21ca6d2d5344245fa86bf706', disabled: this.disabled }, hAsync("div", { key: 'fa414dc37c81d7c74cdf9773e0872307f6b81990', "aria-checked": toAriaBoolean(this.checked), "aria-label": getLabelText(this), class: {
                 [CSS$1c.toggle]: true,
                 [CSS_UTILITY.rtl]: rtl,
-            }, onBlur: this.onToggleBlur, onFocus: this.onToggleFocus, ref: (toggleEl) => (this.toggleEl = toggleEl), role: "checkbox", tabIndex: this.disabled ? undefined : 0 }, hAsync("svg", { key: '1aae8a62a1f771e2d3e7fb731bae49e608f15617', "aria-hidden": "true", class: CSS$1c.check, viewBox: "0 0 16 16" }, hAsync("path", { key: '27ea5db7e99c8f82f5e7773b684f64e9d9a8101a', d: this.getPath() })), hAsync("slot", { key: 'c6ea3d961bc6b3b7018378b8044691b88d65f2d3' })), hAsync(HiddenFormInputSlot, { key: 'bf3c47ad291541078a94dd46205e912622e85411', component: this }))));
+            }, onBlur: this.onToggleBlur, onFocus: this.onToggleFocus, ref: (toggleEl) => (this.toggleEl = toggleEl), role: "checkbox", tabIndex: this.disabled ? undefined : 0 }, hAsync("svg", { key: 'b0c0e833dcf5ac2c4358d51c8f535bc0cad06c4b', "aria-hidden": "true", class: CSS$1c.check, viewBox: "0 0 16 16" }, hAsync("path", { key: '308a0e743768e3f33e9800201eb74ad0593d3385', d: this.getPath() })), hAsync("slot", { key: '929237332d8afadc7e9cf2b5e5dda82748be2872' })), hAsync(HiddenFormInputSlot, { key: 'f4e8616a300c7ca2faacc1f9b5fa1c2f301d0bae', component: this }))));
     }
     get el() { return getElement(this); }
     static get style() { return CalciteCheckboxStyle0; }
@@ -13177,7 +13080,6 @@ class Chip {
     //
     // --------------------------------------------------------------------------
     connectedCallback() {
-        connectInteractive(this);
         connectLocalized(this);
         connectMessages(this);
     }
@@ -13191,7 +13093,6 @@ class Chip {
         updateHostInteraction(this);
     }
     disconnectedCallback() {
-        disconnectInteractive(this);
         disconnectLocalized(this);
         disconnectMessages(this);
     }
@@ -13293,7 +13194,7 @@ class Chip {
                 : this.interactive
                     ? "button"
                     : undefined;
-        return (hAsync(Host, { key: '6d76da5a2ae7a51ceffa4d1ca67d2f610b900a1c' }, hAsync(InteractiveContainer, { key: 'fd0190d60cffb6d0f564a91f55b0e4f69663fb5b', disabled: disabled }, hAsync("div", { key: '825b342318201ee13735f9b6e830f26b0fb4e137', "aria-checked": this.selectionMode !== "none" && this.interactive
+        return (hAsync(Host, { key: '3a1a1b8f2ee556048db84661b3471e193e8369ab' }, hAsync(InteractiveContainer, { key: '41107303be8be1dc3a591d3a5577c108e3bb5bd8', disabled: disabled }, hAsync("div", { key: '66fc23716742af883dddfe25a030d2052c6050b4', "aria-checked": this.selectionMode !== "none" && this.interactive
                 ? toAriaBoolean(this.selected)
                 : undefined, "aria-disabled": disableInteraction ? toAriaBoolean(disabled) : undefined, "aria-label": this.label, class: {
                 [CSS$1b.container]: true,
@@ -13310,7 +13211,7 @@ class Chip {
                     (!this.icon || !this.hasImage) &&
                     (this.selectionMode === "none" ||
                         (!!this.selectionMode && this.selectionMode !== "multiple" && !this.selected)),
-            }, onClick: this.handleEmittingEvent, ref: (el) => (this.containerEl = el), role: role, tabIndex: disableInteraction ? -1 : 0 }, this.selectionMode !== "none" && this.renderSelectionIcon(), this.renderChipImage(), this.icon && this.renderIcon(), hAsync("span", { key: '0b3d668d66e359ecc3690ad87033e7e49a9250ef', class: CSS$1b.title }, hAsync("slot", { key: 'ff1af06039b94df6108f5e371e23ad9debfd388e', onSlotchange: this.handleDefaultSlotChange })), this.closable && this.renderCloseButton()))));
+            }, onClick: this.handleEmittingEvent, ref: (el) => (this.containerEl = el), role: role, tabIndex: disableInteraction ? -1 : 0 }, this.selectionMode !== "none" && this.renderSelectionIcon(), this.renderChipImage(), this.icon && this.renderIcon(), hAsync("span", { key: '2fae7be4c41cb78f11b3ecc9739f36114069b0c7', class: CSS$1b.title }, hAsync("slot", { key: '7f84235908569b7c805c6b5aed2d0821af51a46e', onSlotchange: this.handleDefaultSlotChange })), this.closable && this.renderCloseButton()))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return getElement(this); }
@@ -13427,11 +13328,7 @@ class ChipGroup {
     //  Lifecycle
     //
     //--------------------------------------------------------------------------
-    connectedCallback() {
-        connectInteractive(this);
-    }
     componentDidRender() {
-        disconnectInteractive(this);
         updateHostInteraction(this);
     }
     componentDidLoad() {
@@ -13524,7 +13421,7 @@ class ChipGroup {
     render() {
         const role = this.selectionMode === "none" || this.selectionMode === "multiple" ? "group" : "radiogroup";
         const { disabled } = this;
-        return (hAsync(InteractiveContainer, { key: '341dd9e8f25d4d358ea6e33740d8b851a5fa0e9d', disabled: disabled }, hAsync("div", { key: '66c9eaa00b7ca0c602f94a017f5b6ef6afc3bd93', "aria-disabled": toAriaBoolean(disabled), "aria-label": this.label, class: "container", role: role }, hAsync("slot", { key: 'd62c336c6cdca0bbd5c6673975ae4a25bc8ef9df', onSlotchange: this.updateItems, ref: (el) => (this.slotRefEl = el) }))));
+        return (hAsync(InteractiveContainer, { key: 'ad47668bd93f81936b9fb451f280048430d6c895', disabled: disabled }, hAsync("div", { key: '3d1db7072ca7b5255ab772c0bf3c14318362c29d', "aria-disabled": toAriaBoolean(disabled), "aria-label": this.label, class: "container", role: role }, hAsync("slot", { key: '423ca467050f423cea1ad001d780ab66fc6a5742', onSlotchange: this.updateItems, ref: (el) => (this.slotRefEl = el) }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -14112,7 +14009,6 @@ class ColorPicker {
         await setUpMessages(this);
     }
     connectedCallback() {
-        connectInteractive(this);
         connectLocalized(this);
         connectMessages(this);
     }
@@ -14122,7 +14018,6 @@ class ColorPicker {
     disconnectedCallback() {
         window.removeEventListener("pointermove", this.globalPointerMoveHandler);
         window.removeEventListener("pointerup", this.globalPointerUpHandler);
-        disconnectInteractive(this);
         disconnectLocalized(this);
         disconnectMessages(this);
     }
@@ -14151,10 +14046,10 @@ class ColorPicker {
         const [adjustedColorFieldScopeLeft, adjustedColorFieldScopeTop] = this.getAdjustedScopePosition(colorFieldScopeLeft, colorFieldScopeTop);
         const [adjustedHueScopeLeft, adjustedHueScopeTop] = this.getAdjustedScopePosition(hueLeft, hueTop);
         const [adjustedOpacityScopeLeft, adjustedOpacityScopeTop] = this.getAdjustedScopePosition(opacityLeft, opacityTop);
-        return (hAsync(InteractiveContainer, { key: 'cd7c2469429382b1adee89c87c4774160795203c', disabled: this.disabled }, hAsync("div", { key: 'dd6809c82d3ffe64b8eaebd0669e7f61c0ea87d1', class: CSS$1o.container }, hAsync("div", { key: '888c08c46fec112861b076c3cf24b9be7b4a66cd', class: CSS$1o.controlAndScope }, hAsync("canvas", { key: '23631c824c61abb2a3ca74e35bffc8be0364a052', class: CSS$1o.colorField, onPointerDown: this.handleColorFieldPointerDown, ref: this.initColorField }), hAsync("div", { key: 'a5271bbe3c4f45e3cf7736dd8f4201f54420bfb7', "aria-label": vertical ? messages.value : messages.saturation, "aria-valuemax": vertical ? HSV_LIMITS.v : HSV_LIMITS.s, "aria-valuemin": "0", "aria-valuenow": (vertical ? color?.saturationv() : color?.value()) || "0", class: { [CSS$1o.scope]: true, [CSS$1o.colorFieldScope]: true }, onKeyDown: this.handleColorFieldScopeKeyDown, ref: this.storeColorFieldScope, role: "slider", style: {
+        return (hAsync(InteractiveContainer, { key: '480abbd358a11eca065770296d5977a39127eb55', disabled: this.disabled }, hAsync("div", { key: '5f846f434da09debc4ec19968f711f8247717d99', class: CSS$1o.container }, hAsync("div", { key: '03a4972a1b73150812a5591a6a3ad40d9f137609', class: CSS$1o.controlAndScope }, hAsync("canvas", { key: '98bf95683c8c77a1374164e25eaa6487966cc61f', class: CSS$1o.colorField, onPointerDown: this.handleColorFieldPointerDown, ref: this.initColorField }), hAsync("div", { key: 'd8a56396ec88948832aab77f1937d79e578c1c26', "aria-label": vertical ? messages.value : messages.saturation, "aria-valuemax": vertical ? HSV_LIMITS.v : HSV_LIMITS.s, "aria-valuemin": "0", "aria-valuenow": (vertical ? color?.saturationv() : color?.value()) || "0", class: { [CSS$1o.scope]: true, [CSS$1o.colorFieldScope]: true }, onKeyDown: this.handleColorFieldScopeKeyDown, ref: this.storeColorFieldScope, role: "slider", style: {
                 top: `${adjustedColorFieldScopeTop || 0}px`,
                 left: `${adjustedColorFieldScopeLeft || 0}px`,
-            }, tabindex: "0" })), hAsync("div", { key: 'eee6c10107513fd46316d2ba7510977b72771cd2', class: CSS$1o.previewAndSliders }, hAsync("calcite-color-picker-swatch", { key: '964481e1c6c6c050df076e8cdc9d7e5b2cbeec79', class: CSS$1o.preview, color: selectedColorInHex, scale: this.alphaChannel ? "l" : this.scale }), hAsync("div", { key: 'f915032fe532e140005b0ff1253b0a971a17b079', class: CSS$1o.sliders }, hAsync("div", { key: '2bcb609ce36df2d0f75abb767ee6dc88c0c9ea3b', class: CSS$1o.controlAndScope }, hAsync("canvas", { key: '99e268a194b785a8ec97fed67a523c602def2a94', class: { [CSS$1o.slider]: true, [CSS$1o.hueSlider]: true }, onPointerDown: this.handleHueSliderPointerDown, ref: this.initHueSlider }), hAsync("div", { key: '4cdc0f98048a48e070430bf4f1f817571534f31b', "aria-label": messages.hue, "aria-valuemax": HSV_LIMITS.h, "aria-valuemin": "0", "aria-valuenow": color?.round().hue() || DEFAULT_COLOR$1.round().hue(), class: { [CSS$1o.scope]: true, [CSS$1o.hueScope]: true }, onKeyDown: this.handleHueScopeKeyDown, ref: this.storeHueScope, role: "slider", style: {
+            }, tabindex: "0" })), hAsync("div", { key: '1543c78201e76f483f803d77415873e11657c03d', class: CSS$1o.previewAndSliders }, hAsync("calcite-color-picker-swatch", { key: '53b303036533c996271cf19a2e20ac69e4ab00ea', class: CSS$1o.preview, color: selectedColorInHex, scale: this.alphaChannel ? "l" : this.scale }), hAsync("div", { key: '005f0300b60ce8d332d0658ea0a257ad9d75f85b', class: CSS$1o.sliders }, hAsync("div", { key: 'f095c425c316a976d23d87efc3059d6e8b4aa9a3', class: CSS$1o.controlAndScope }, hAsync("canvas", { key: 'ce2785cbdc0e78210ec8d345f8d4dfb4bf85a568', class: { [CSS$1o.slider]: true, [CSS$1o.hueSlider]: true }, onPointerDown: this.handleHueSliderPointerDown, ref: this.initHueSlider }), hAsync("div", { key: 'b96a018b9185c57bb581fe767edb13efe6097ab6', "aria-label": messages.hue, "aria-valuemax": HSV_LIMITS.h, "aria-valuemin": "0", "aria-valuenow": color?.round().hue() || DEFAULT_COLOR$1.round().hue(), class: { [CSS$1o.scope]: true, [CSS$1o.hueScope]: true }, onKeyDown: this.handleHueScopeKeyDown, ref: this.storeHueScope, role: "slider", style: {
                 top: `${adjustedHueScopeTop}px`,
                 left: `${adjustedHueScopeLeft}px`,
             }, tabindex: "0" })), alphaChannel ? (hAsync("div", { class: CSS$1o.controlAndScope }, hAsync("canvas", { class: { [CSS$1o.slider]: true, [CSS$1o.opacitySlider]: true }, onPointerDown: this.handleOpacitySliderPointerDown, ref: this.initOpacitySlider }), hAsync("div", { "aria-label": messages.opacity, "aria-valuemax": OPACITY_LIMITS.max, "aria-valuemin": OPACITY_LIMITS.min, "aria-valuenow": (color || DEFAULT_COLOR$1).round().alpha(), class: { [CSS$1o.scope]: true, [CSS$1o.opacityScope]: true }, onKeyDown: this.handleOpacityScopeKeyDown, ref: this.storeOpacityScope, role: "slider", style: {
@@ -14926,7 +14821,7 @@ class ColorPickerSwatch {
 
 /**
  * Do not edit directly
- * Generated on Wed, 28 Aug 2024 03:13:55 GMT
+ * Generated on Fri, 30 Aug 2024 16:45:48 GMT
  */
 const calciteSize24 = "24px";
 const calciteSize32 = "32px";
@@ -17715,7 +17610,6 @@ class Combobox {
     //
     // --------------------------------------------------------------------------
     connectedCallback() {
-        connectInteractive(this);
         connectLocalized(this);
         connectMessages(this);
         connectLabel(this);
@@ -17756,7 +17650,6 @@ class Combobox {
     disconnectedCallback() {
         this.mutationObserver?.disconnect();
         this.resizeObserver?.disconnect();
-        disconnectInteractive(this);
         disconnectLabel(this);
         disconnectForm(this);
         disconnectFloatingUI(this, this.referenceEl, this.floatingEl);
@@ -18214,7 +18107,7 @@ class Combobox {
         const singleSelectionDisplay = selectionDisplay === "single";
         const fitSelectionDisplay = !singleSelectionMode && selectionDisplay === "fit";
         const isClearable = !this.clearDisabled && this.value?.length > 0;
-        return (hAsync(Host, { key: '24749edfdb12a51e6e34c78d3428f83de7ac0457', onClick: this.comboboxFocusHandler }, hAsync(InteractiveContainer, { key: '7300de366d86bcad91501f1124aed5f311820c37', disabled: this.disabled }, hAsync("div", { key: 'fc8981935ffdd46fc5386517fce51170d41179a5', "aria-live": "polite", class: {
+        return (hAsync(Host, { key: 'e3546770ecea2da60e609bae727063ecf0f86c09', onClick: this.comboboxFocusHandler }, hAsync(InteractiveContainer, { key: '08f7aef177f2a8ff574207a053aa6ab50227e6ea', disabled: this.disabled }, hAsync("div", { key: '9ca2ffba2574c68f44d273a4f3100b126ae4e8a7', "aria-live": "polite", class: {
                 wrapper: true,
                 "wrapper--single": singleSelectionMode || !this.selectedItems.length,
                 "wrapper--active": open,
@@ -18228,7 +18121,7 @@ class Combobox {
             this.renderSelectedIndicatorChipCompact(),
             this.renderAllSelectedIndicatorChip(),
             this.renderAllSelectedIndicatorChipCompact(),
-        ], hAsync("label", { key: '60ca38b6b84d8ccd3e11419ca494c8a3b310e631', class: "screen-readers-only", htmlFor: `${inputUidPrefix}${guid}`, id: `${labelUidPrefix}${guid}` }, label), this.renderInput()), !readOnly && isClearable ? (hAsync(XButton, { disabled: this.disabled, key: "close-button", label: this.messages.clear, scale: this.scale })) : null, !readOnly && this.renderChevronIcon()), hAsync("ul", { key: 'bb750b55b33af3a317ac7883d4f8ef88a23bf1c6', "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-multiselectable": "true", class: "screen-readers-only", id: `${listboxUidPrefix}${guid}`, role: "listbox", tabIndex: -1 }, this.renderListBoxOptions()), this.renderFloatingUIContainer(), hAsync(HiddenFormInputSlot, { key: 'bf9a9f0dc62822568377ee1e602e24ca14b9c895', component: this }), this.validationMessage && this.status === "invalid" ? (hAsync(Validation, { icon: this.validationIcon, id: IDS$a.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
+        ], hAsync("label", { key: '8ebab29a4e1e5593c013e09c98b0887baa63fd57', class: "screen-readers-only", htmlFor: `${inputUidPrefix}${guid}`, id: `${labelUidPrefix}${guid}` }, label), this.renderInput()), !readOnly && isClearable ? (hAsync(XButton, { disabled: this.disabled, key: "close-button", label: this.messages.clear, scale: this.scale })) : null, !readOnly && this.renderChevronIcon()), hAsync("ul", { key: '899d41cd36208f95136630ff1542ad7aa35a6cfa', "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-multiselectable": "true", class: "screen-readers-only", id: `${listboxUidPrefix}${guid}`, role: "listbox", tabIndex: -1 }, this.renderListBoxOptions()), this.renderFloatingUIContainer(), hAsync(HiddenFormInputSlot, { key: '3f6bdef3791e21795c0264152a3f6bf083471f6d', component: this }), this.validationMessage && this.status === "invalid" ? (hAsync(Validation, { icon: this.validationIcon, id: IDS$a.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return getElement(this); }
@@ -18369,11 +18262,9 @@ class ComboboxItem {
     connectedCallback() {
         this.ancestors = getAncestors(this.el);
         connectConditionalSlotComponent(this);
-        connectInteractive(this);
     }
     disconnectedCallback() {
         disconnectConditionalSlotComponent(this);
-        disconnectInteractive(this);
     }
     componentDidRender() {
         updateHostInteraction(this);
@@ -18431,10 +18322,10 @@ class ComboboxItem {
             [CSS$15.single]: isSingleSelect,
         };
         const depth = getDepth$1() + 1;
-        return (hAsync(Host, { key: '893a354b69619332b4f45458224aa8b41f90111e', "aria-hidden": "true", "aria-label": itemLabel }, hAsync(InteractiveContainer, { key: 'd476f526f4d55a6b7b2cf498f97eb2a8db67222b', disabled: disabled }, hAsync("div", { key: '327153394df9ebd4e6cd5dbd409d7fdd473beb3e', class: {
+        return (hAsync(Host, { key: '7c51298566212fcd05ef8b8501d04f13d4fcdf9d', "aria-hidden": "true", "aria-label": itemLabel }, hAsync(InteractiveContainer, { key: '22595e750767608a237fd7b71b5d656bd7243666', disabled: disabled }, hAsync("div", { key: '4d185f7be812d73247f9074b984d4c86d5c3b502', class: {
                 [CSS$15.container]: true,
                 [CSS$15.scale(this.scale)]: true,
-            }, style: { "--calcite-combobox-item-spacing-indent-multiplier": `${depth}` } }, hAsync("li", { key: 'f9a623aafce0135cb4e7e9e30579f98e18bf38e6', class: classes, id: this.guid, onClick: this.itemClickHandler }, this.renderSelectIndicator(showDot, iconPath), this.renderIcon(iconPath), hAsync("div", { key: '8d90ab670e01f935a4217e24e175cc9e6cebfecf', class: CSS$15.centerContent }, hAsync("div", { key: '176cc0659c8778c2f77be2f3912963b121e99ee7', class: CSS$15.title }, this.renderTextContent(headingText)), this.description ? (hAsync("div", { class: CSS$15.description }, this.renderTextContent(this.description))) : null), this.shortHeading ? (hAsync("div", { class: CSS$15.shortText }, this.renderTextContent(this.shortHeading))) : null, hAsync("slot", { key: '8646cb9cde757ea2e34ec0c3f8cdc6ac806e1142', name: SLOTS$q.contentEnd })), this.renderChildren()))));
+            }, style: { "--calcite-combobox-item-spacing-indent-multiplier": `${depth}` } }, hAsync("li", { key: '4796854efab8c5e23c392e6ec240f26d098d2e52', class: classes, id: this.guid, onClick: this.itemClickHandler }, this.renderSelectIndicator(showDot, iconPath), this.renderIcon(iconPath), hAsync("div", { key: '9118dee263029bb20a08b96c6773327f81f89bdd', class: CSS$15.centerContent }, hAsync("div", { key: '814f8d2859a4eba9c57ea87b67462a37bffbd6aa', class: CSS$15.title }, this.renderTextContent(headingText)), this.description ? (hAsync("div", { class: CSS$15.description }, this.renderTextContent(this.description))) : null), this.shortHeading ? (hAsync("div", { class: CSS$15.shortText }, this.renderTextContent(this.shortHeading))) : null, hAsync("slot", { key: '20e4826509688f82b630d600ff2fcf6ffe832b22', name: SLOTS$q.contentEnd })), this.renderChildren()))));
     }
     renderTextContent(text) {
         const pattern = this.filterTextMatchPattern;
@@ -19320,17 +19211,11 @@ class DatePickerDay {
         }
         const formattedDay = numberStringFormatter.localize(String(this.day));
         const dayLabel = this.dateTimeFormat.format(this.value);
-        return (hAsync(Host, { key: '21762e1ba60bf298f05cb5c0499eb57bfc5a279d', "aria-disabled": toAriaBoolean(this.disabled), "aria-label": dayLabel, "aria-selected": toAriaBoolean(this.active), id: dayId, onClick: this.onClick, onKeyDown: this.keyDownHandler, role: "button", tabIndex: this.active && !this.disabled ? 0 : -1 }, hAsync(InteractiveContainer, { key: '449226e496db81d7a029172ae69e1bf9da229603', disabled: this.disabled }, hAsync("div", { key: '147f12c8bc782776df768e01ab8e6de0a6a2eb9f', "aria-hidden": "true", class: { "day-v-wrapper": true } }, hAsync("div", { key: 'e38b3d2b999df042c92a609474a35ef2937dd024', class: "day-wrapper" }, hAsync("span", { key: 'f8e97122b32053d78ff43ef85771fbeb8ff7b180', class: "day" }, hAsync("span", { key: 'a10f30dea71f9774bdf10b55b3564f54c62e7970', class: "text" }, formattedDay)))))));
-    }
-    connectedCallback() {
-        connectInteractive(this);
+        return (hAsync(Host, { key: '85824e7b49743c6cc41b8a3ec90a099d67542a4a', "aria-disabled": toAriaBoolean(this.disabled), "aria-label": dayLabel, "aria-selected": toAriaBoolean(this.active), id: dayId, onClick: this.onClick, onKeyDown: this.keyDownHandler, role: "button", tabIndex: this.active && !this.disabled ? 0 : -1 }, hAsync(InteractiveContainer, { key: '5f26af3588b528ee469726b38c00ca16bc7bc201', disabled: this.disabled }, hAsync("div", { key: 'b7342437aa3e4a4d9b49affc1efc72c015b6863a', "aria-hidden": "true", class: { "day-v-wrapper": true } }, hAsync("div", { key: 'b02c02e8f66ba1321c88a8f3d4519fbe8d38c59b', class: "day-wrapper" }, hAsync("span", { key: 'ed4927b82c68b566a9d759d9e2dc437cacb833ee', class: "day" }, hAsync("span", { key: '6ecb2c6d1569c7e4d9dd5020adbffdefa5e37909', class: "text" }, formattedDay)))))));
     }
     componentDidRender() {
         updateHostInteraction(this);
     }
-    disconnectedCallback() {
-        disconnectInteractive(this);
-    }
     get el() { return getElement(this); }
     static get style() { return CalciteDatePickerDayStyle0; }
     static get cmpMeta() { return {
@@ -21784,7 +21669,6 @@ class Dropdown {
             this.openHandler();
             onToggleOpenCloseComponent(this);
         }
-        connectInteractive(this);
         this.updateItems();
         connectFloatingUI(this, this.referenceEl, this.floatingEl);
     }
@@ -21801,16 +21685,15 @@ class Dropdown {
     disconnectedCallback() {
         this.mutationObserver?.disconnect();
         this.resizeObserver?.disconnect();
-        disconnectInteractive(this);
         disconnectFloatingUI(this, this.referenceEl, this.floatingEl);
     }
     render() {
         const { open, guid } = this;
-        return (hAsync(Host, { key: '4b3349c1645b7d39263a20b688f7645d92148f23' }, hAsync(InteractiveContainer, { key: 'db1d56073b9f9db2fbf6eaef824e3f12411dd174', disabled: this.disabled }, hAsync("div", { key: '05de1bb5f3641147441f18eaeae104acb06e47c6', class: "calcite-trigger-container", id: `${guid}-menubutton`, onClick: this.openCalciteDropdown, onKeyDown: this.keyDownHandler, ref: this.setReferenceEl }, hAsync("slot", { key: '39b976c808c4f44983f2d6a056bb128537cf1aae', "aria-controls": `${guid}-menu`, "aria-expanded": toAriaBoolean(open), "aria-haspopup": "menu", name: SLOTS$n.dropdownTrigger, onSlotchange: this.updateTriggers })), hAsync("div", { key: '57ba0f8d3632febcab69b706a73a910f54f09b62', "aria-hidden": toAriaBoolean(!open), class: "calcite-dropdown-wrapper", ref: this.setFloatingEl }, hAsync("div", { key: 'ae7505fa472d323ad6aed6ea0dd2ab7fdf8e7e59', "aria-labelledby": `${guid}-menubutton`, class: {
+        return (hAsync(Host, { key: 'c2cb5f9b1f9d0aede380d1423f05c16475d7352f' }, hAsync(InteractiveContainer, { key: '4b8af900fcafb05de4b4a382e1f068cd5abeadfc', disabled: this.disabled }, hAsync("div", { key: '3a79205ebeb0f9d15863ea7472a32a0d5d8c9c73', class: "calcite-trigger-container", id: `${guid}-menubutton`, onClick: this.openCalciteDropdown, onKeyDown: this.keyDownHandler, ref: this.setReferenceEl }, hAsync("slot", { key: '26c41ccfd2b5ac66f17c7b205a4e0ddf55e751b0', "aria-controls": `${guid}-menu`, "aria-expanded": toAriaBoolean(open), "aria-haspopup": "menu", name: SLOTS$n.dropdownTrigger, onSlotchange: this.updateTriggers })), hAsync("div", { key: '713a71e618bacade9ded9558cbf8d8ce0e3b9c0f', "aria-hidden": toAriaBoolean(!open), class: "calcite-dropdown-wrapper", ref: this.setFloatingEl }, hAsync("div", { key: '1ca20636b6bf5b17a67f8dbadbffa1ca629e7c10', "aria-labelledby": `${guid}-menubutton`, class: {
                 ["calcite-dropdown-content"]: true,
                 [FloatingCSS.animation]: true,
                 [FloatingCSS.animationActive]: open,
-            }, id: `${guid}-menu`, ref: this.setScrollerAndTransitionEl, role: "menu" }, hAsync("slot", { key: 'ae94137311b106fbed88dfde346002d87e4efcbb', onSlotchange: this.updateGroups }))))));
+            }, id: `${guid}-menu`, ref: this.setScrollerAndTransitionEl, role: "menu" }, hAsync("slot", { key: 'e177629eba6b189003fce4cce521dca370e607bc', onSlotchange: this.updateGroups }))))));
     }
     //--------------------------------------------------------------------------
     //
@@ -22301,9 +22184,6 @@ class Fab {
     //  Lifecycle
     //
     //--------------------------------------------------------------------------
-    connectedCallback() {
-        connectInteractive(this);
-    }
     componentWillLoad() {
         setUpLoadableComponent(this);
     }
@@ -22313,9 +22193,6 @@ class Fab {
     componentDidRender() {
         updateHostInteraction(this);
     }
-    disconnectedCallback() {
-        disconnectInteractive(this);
-    }
     // --------------------------------------------------------------------------
     //
     //  Methods
@@ -22334,7 +22211,7 @@ class Fab {
     render() {
         const { appearance, kind, disabled, loading, scale, textEnabled, icon, label, text, iconFlipRtl, } = this;
         const title = !textEnabled ? label || text || null : null;
-        return (hAsync(InteractiveContainer, { key: 'a3f179f9542d93366d6befded12604369f905580', disabled: disabled }, hAsync("calcite-button", { key: '2adc3c8d6408743bfa905995ce75c7ed4d241733', appearance: appearance === "solid" ? "solid" : "outline-fill", class: CSS$$.button, disabled: disabled, iconFlipRtl: iconFlipRtl ? "start" : null, iconStart: icon, kind: kind, label: label, loading: loading, ref: (buttonEl) => {
+        return (hAsync(InteractiveContainer, { key: '413968244ee42ad5982e01c0d918bac28ff90a62', disabled: disabled }, hAsync("calcite-button", { key: 'a078df6bb97ae54ea06bcbeed621b358418a5307', appearance: appearance === "solid" ? "solid" : "outline-fill", class: CSS$$.button, disabled: disabled, iconFlipRtl: iconFlipRtl ? "start" : null, iconStart: icon, kind: kind, label: label, loading: loading, ref: (buttonEl) => {
                 this.buttonEl = buttonEl;
             }, round: true, scale: scale, title: title, type: "button", width: "auto" }, this.textEnabled ? this.text : null)));
     }
@@ -22447,7 +22324,6 @@ class Filter {
         await setUpMessages(this);
     }
     connectedCallback() {
-        connectInteractive(this);
         connectLocalized(this);
         connectMessages(this);
     }
@@ -22455,7 +22331,6 @@ class Filter {
         updateHostInteraction(this);
     }
     disconnectedCallback() {
-        disconnectInteractive(this);
         disconnectLocalized(this);
         disconnectMessages(this);
         this.filterDebounced.cancel();
@@ -22501,7 +22376,7 @@ class Filter {
     // --------------------------------------------------------------------------
     render() {
         const { disabled, scale } = this;
-        return (hAsync(InteractiveContainer, { key: 'da4ff667fdb02ae8b85c56cd717b416f3256145d', disabled: disabled }, hAsync("div", { key: 'f4406a403101afa7c97da11f8408fa464aa8a08c', class: CSS$_.container }, hAsync("label", { key: 'aace74138ebea71058044e05d4fe44cb7ee6beb2' }, hAsync("calcite-input", { key: 'cc7dca3364cc73bf42a78d76155477af98d72552', clearable: true, disabled: disabled, icon: ICONS$d.search, label: this.messages.label, messageOverrides: { clear: this.messages.clear }, onCalciteInputInput: this.inputHandler, onKeyDown: this.keyDownHandler, placeholder: this.placeholder, ref: (el) => {
+        return (hAsync(InteractiveContainer, { key: '912a2cabb69dd50c7789de436477e5245ad3f54e', disabled: disabled }, hAsync("div", { key: '5c5be3f5b9c1f2a9b2cbc29a9dddd97a0eae47f8', class: CSS$_.container }, hAsync("label", { key: 'ef6fa843aaab8ff4a1fc2240fad4e715918040eb' }, hAsync("calcite-input", { key: '817eabaf570c0fa6f2a5b05f9cddf0969e4494c2', clearable: true, disabled: disabled, icon: ICONS$d.search, label: this.messages.label, messageOverrides: { clear: this.messages.clear }, onCalciteInputInput: this.inputHandler, onKeyDown: this.keyDownHandler, placeholder: this.placeholder, ref: (el) => {
                 this.textInput = el;
             }, scale: scale, type: "text", value: this.value })))));
     }
@@ -22807,7 +22682,6 @@ class FlowItem {
     //
     //--------------------------------------------------------------------------
     connectedCallback() {
-        connectInteractive(this);
         connectLocalized(this);
         connectMessages(this);
     }
@@ -22819,7 +22693,6 @@ class FlowItem {
         updateHostInteraction(this);
     }
     disconnectedCallback() {
-        disconnectInteractive(this);
         disconnectLocalized(this);
         disconnectMessages(this);
     }
@@ -22879,7 +22752,7 @@ class FlowItem {
     }
     render() {
         const { collapsed, collapseDirection, collapsible, closable, closed, description, disabled, heading, headingLevel, loading, menuOpen, messages, overlayPositioning, beforeClose, } = this;
-        return (hAsync(Host, { key: '166a2f53829cecc09019a7fa3fe670b5e4e42146' }, hAsync(InteractiveContainer, { key: '53f00fb0e5ec53b8a19efde1592e1bff176302d1', disabled: disabled }, hAsync("calcite-panel", { key: 'a24ff76af240b1403ebfa5810bc8fe0443901040', beforeClose: beforeClose, closable: closable, closed: closed, collapseDirection: collapseDirection, collapsed: collapsed, collapsible: collapsible, description: description, disabled: disabled, heading: heading, headingLevel: headingLevel, loading: loading, menuOpen: menuOpen, messageOverrides: messages, onCalcitePanelClose: this.handleInternalPanelClose, onCalcitePanelScroll: this.handleInternalPanelScroll, onCalcitePanelToggle: this.handleInternalPanelToggle, overlayPositioning: overlayPositioning, ref: this.setContainerRef, scale: this.scale }, this.renderBackButton(), hAsync("slot", { key: '9051287e5b89eaca28b440816cbcddc03cefed73', name: SLOTS$m.actionBar, slot: SLOTS$p.actionBar }), hAsync("slot", { key: '566fb396078d3eac17fbff69e0cd43fb5b8ca13e', name: SLOTS$m.alerts, slot: SLOTS$p.alerts }), hAsync("slot", { key: '88ced257238e369cd99250c9d5a93fa03746fbd5', name: SLOTS$m.headerActionsStart, slot: SLOTS$p.headerActionsStart }), hAsync("slot", { key: 'beab9f93af9deed383adc8250ec943b883e058b8', name: SLOTS$m.headerActionsEnd, slot: SLOTS$p.headerActionsEnd }), hAsync("slot", { key: '1f1c7579d1ac1085004b08d2f57ec8b9e0641e35', name: SLOTS$m.headerContent, slot: SLOTS$p.headerContent }), hAsync("slot", { key: '3696e4a7e80db48581f438336007a1b63a201040', name: SLOTS$m.headerMenuActions, slot: SLOTS$p.headerMenuActions }), hAsync("slot", { key: '370e0817cbc13d7cf4c8adaccff8fe9d7c91c859', name: SLOTS$m.fab, slot: SLOTS$p.fab }), hAsync("slot", { key: 'd55cc859cb1c9c6cc80a63521aad955f6e23d31c', name: SLOTS$m.contentTop, slot: SLOTS$p.contentTop }), hAsync("slot", { key: '7cea1750cd59d1fdda66516c9b4c78884127dde5', name: SLOTS$m.contentBottom, slot: SLOTS$p.contentBottom }), hAsync("slot", { key: 'd07ed2f97623023312cdb0a5a01b909286f34373', name: SLOTS$m.footerStart, slot: SLOTS$p.footerStart }), hAsync("slot", { key: 'fdc209c1e77fd62cadaaad0ee576e71a1f0419d8', name: SLOTS$m.footer, slot: SLOTS$p.footer }), hAsync("slot", { key: '5348d32cc42b7fa3b07e4b5ef711863f6ce812bc', name: SLOTS$m.footerEnd, slot: SLOTS$p.footerEnd }), hAsync("slot", { key: 'bad7644787a3ad19ef40931fb38cfe9c18962b27', name: SLOTS$m.footerActions, slot: SLOTS$p.footerActions }), hAsync("slot", { key: '97675398537cc86f41a219126e17bcf24cf4682b' })))));
+        return (hAsync(Host, { key: '26b80b1ea55bca8c825ce9ff2493fb6d67c6c980' }, hAsync(InteractiveContainer, { key: 'aa7c0180ab3a9484557d7bdbee679e4fdca1728e', disabled: disabled }, hAsync("calcite-panel", { key: '860aaee0f0bd3a726b6d77cb453b0f17b3963780', beforeClose: beforeClose, closable: closable, closed: closed, collapseDirection: collapseDirection, collapsed: collapsed, collapsible: collapsible, description: description, disabled: disabled, heading: heading, headingLevel: headingLevel, loading: loading, menuOpen: menuOpen, messageOverrides: messages, onCalcitePanelClose: this.handleInternalPanelClose, onCalcitePanelScroll: this.handleInternalPanelScroll, onCalcitePanelToggle: this.handleInternalPanelToggle, overlayPositioning: overlayPositioning, ref: this.setContainerRef, scale: this.scale }, this.renderBackButton(), hAsync("slot", { key: '981417920f3949b3fc3bda4d8ece5b50d79b8455', name: SLOTS$m.actionBar, slot: SLOTS$p.actionBar }), hAsync("slot", { key: '95e6e3531e7485043b1c4ec3bcae7947f6c16c40', name: SLOTS$m.alerts, slot: SLOTS$p.alerts }), hAsync("slot", { key: 'e2c9b1c9de97e027b40f458c827f576b6433947d', name: SLOTS$m.headerActionsStart, slot: SLOTS$p.headerActionsStart }), hAsync("slot", { key: '021e4846d93fcb7169e3b67f61489aff6c171877', name: SLOTS$m.headerActionsEnd, slot: SLOTS$p.headerActionsEnd }), hAsync("slot", { key: '29ed57e884ad83761fec7e379cb91fdb7ec5f7ee', name: SLOTS$m.headerContent, slot: SLOTS$p.headerContent }), hAsync("slot", { key: '830088cb7a8bd3581ef7a17c808b839b1e9409fb', name: SLOTS$m.headerMenuActions, slot: SLOTS$p.headerMenuActions }), hAsync("slot", { key: '52396dedbd326eaf64e78ac7f684ccb9d3344bae', name: SLOTS$m.fab, slot: SLOTS$p.fab }), hAsync("slot", { key: '183044fec2c1da2ee5dc934cacf2a5230f688ac4', name: SLOTS$m.contentTop, slot: SLOTS$p.contentTop }), hAsync("slot", { key: 'a8a5636ac30183914a4f2930230c41f514842853', name: SLOTS$m.contentBottom, slot: SLOTS$p.contentBottom }), hAsync("slot", { key: 'c999ad2beee718a4c60636cbe9388702efcc4c89', name: SLOTS$m.footerStart, slot: SLOTS$p.footerStart }), hAsync("slot", { key: '462bacf1edc9ad9a1bcc37fec1a9817b75670ba1', name: SLOTS$m.footer, slot: SLOTS$p.footer }), hAsync("slot", { key: 'bfe148d392482f0f1a9cfff6ab7911ce0f93cc02', name: SLOTS$m.footerEnd, slot: SLOTS$p.footerEnd }), hAsync("slot", { key: '82d2bf5f5b9e21ee976d8e27cca9ae2d426e7d24', name: SLOTS$m.footerActions, slot: SLOTS$p.footerActions }), hAsync("slot", { key: 'bb43187399d556916f1c45dbdbc1feafb704ebe9' })))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return getElement(this); }
@@ -23228,7 +23101,6 @@ class Handle {
     //
     //--------------------------------------------------------------------------
     connectedCallback() {
-        connectInteractive(this);
         connectMessages(this);
         connectLocalized(this);
     }
@@ -23243,7 +23115,6 @@ class Handle {
         updateHostInteraction(this);
     }
     disconnectedCallback() {
-        disconnectInteractive(this);
         disconnectMessages(this);
         disconnectLocalized(this);
     }
@@ -23299,11 +23170,11 @@ class Handle {
     render() {
         return (
         // Needs to be a span because of https://github.com/SortableJS/Sortable/issues/1486
-        hAsync("span", { key: '043550c81bdf21e953f33e7b3ffc04c982ae17e3', "aria-checked": this.disabled ? null : toAriaBoolean(this.selected), "aria-disabled": this.disabled ? toAriaBoolean(this.disabled) : null, "aria-label": this.disabled ? null : this.getAriaText("label"), class: { [CSS$X.handle]: true, [CSS$X.handleSelected]: !this.disabled && this.selected }, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: (el) => {
+        hAsync("span", { key: '70bad3175017506fbe748d930b4945f57d0ed331', "aria-checked": this.disabled ? null : toAriaBoolean(this.selected), "aria-disabled": this.disabled ? toAriaBoolean(this.disabled) : null, "aria-label": this.disabled ? null : this.getAriaText("label"), class: { [CSS$X.handle]: true, [CSS$X.handleSelected]: !this.disabled && this.selected }, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: (el) => {
                 this.handleButton = el;
             },
             // role of radio is being applied to allow space key to select in screen readers
-            role: "radio", tabIndex: this.disabled ? null : 0, title: this.getTooltip() }, hAsync("calcite-icon", { key: '1d432a3f6e17366782fe92b8347f2f301b181b7b', icon: ICONS$b.drag, scale: "s" })));
+            role: "radio", tabIndex: this.disabled ? null : 0, title: this.getTooltip() }, hAsync("calcite-icon", { key: 'c3eab375f0ac588ff37ab16747f7158567dfd0d0', icon: ICONS$b.drag, scale: "s" })));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return getElement(this); }
@@ -23561,7 +23432,6 @@ class InlineEditable {
     //
     //--------------------------------------------------------------------------
     connectedCallback() {
-        connectInteractive(this);
         connectLabel(this);
         connectLocalized(this);
         connectMessages(this);
@@ -23576,7 +23446,6 @@ class InlineEditable {
         setComponentLoaded(this);
     }
     disconnectedCallback() {
-        disconnectInteractive(this);
         disconnectLabel(this);
         disconnectLocalized(this);
         disconnectMessages(this);
@@ -23586,12 +23455,12 @@ class InlineEditable {
         updateHostInteraction(this);
     }
     render() {
-        return (hAsync(InteractiveContainer, { key: '679bc60f370860de292d87bc9557f451f3674a4a', disabled: this.disabled }, hAsync("div", { key: 'fa5d6c787837eeb8174dc45d7bcdc61b7e1c1851', class: CSS$V.wrapper, onClick: this.enableEditingHandler, onKeyDown: this.escapeKeyHandler }, hAsync("div", { key: '2a432c9940c1652490168333d15c19396d149a10', class: CSS$V.inputWrapper }, hAsync("slot", { key: '80a11e4a0c3ace9a4ef5578f797e4a6b4b3f72e9' })), hAsync("div", { key: '540e6cf43d413ebe15345a37902b110094010d57', class: CSS$V.controlsWrapper }, hAsync("calcite-button", { key: '1ee7fa765b9bd7745424bb8f8f524c0a9ba6c44e', appearance: "transparent", class: CSS$V.enableEditingButton, disabled: this.disabled, iconStart: "pencil", kind: "neutral", label: this.messages.enableEditing, onClick: this.enableEditingHandler, ref: (el) => (this.enableEditingButton = el), scale: this.scale, style: {
+        return (hAsync(InteractiveContainer, { key: '4b5a32481616c40dfabde2fc5edddd1f8ce79d67', disabled: this.disabled }, hAsync("div", { key: 'acd2e7e3ee2e4a77853bf7972855556c9d8cde31', class: CSS$V.wrapper, onClick: this.enableEditingHandler, onKeyDown: this.escapeKeyHandler }, hAsync("div", { key: 'aeaeab63c98157e0013c13fc1471f3749fffaea6', class: CSS$V.inputWrapper }, hAsync("slot", { key: 'cbce10ed1e668a158c47f1eaab84dad5a5df82ba' })), hAsync("div", { key: '95d7a0114655a2bbc828e640256851fa7c24eb04', class: CSS$V.controlsWrapper }, hAsync("calcite-button", { key: '1a18107d9bd6e299d346c421d2fde16ea0def94f', appearance: "transparent", class: CSS$V.enableEditingButton, disabled: this.disabled, iconStart: "pencil", kind: "neutral", label: this.messages.enableEditing, onClick: this.enableEditingHandler, ref: (el) => (this.enableEditingButton = el), scale: this.scale, style: {
                 opacity: this.editingEnabled ? "0" : "1",
                 width: this.editingEnabled ? "0" : "inherit",
             }, type: "button" }), this.shouldShowControls && [
-            hAsync("div", { key: 'd9eb2bfc9affd4c7fb6510448476c5b83399a2ca', class: CSS$V.cancelEditingButtonWrapper }, hAsync("calcite-button", { key: '03243abe113f8e441e05f87feef164215082feda', appearance: "transparent", class: CSS$V.cancelEditingButton, disabled: this.disabled, iconStart: "x", kind: "neutral", label: this.messages.cancelEditing, onClick: this.cancelEditingHandler, ref: (el) => (this.cancelEditingButton = el), scale: this.scale, type: "button" })),
-            hAsync("calcite-button", { key: '92bdc973c915fbf4980a1fb01ffd4cf9a9f41557', appearance: "solid", class: CSS$V.confirmChangesButton, disabled: this.disabled, iconStart: "check", kind: "brand", label: this.messages.confirmChanges, loading: this.loading, onClick: this.confirmChangesHandler, ref: (el) => (this.confirmEditingButton = el), scale: this.scale, type: "button" }),
+            hAsync("div", { key: '5c326a7a852fb5d2d62464885ab403d0261a6679', class: CSS$V.cancelEditingButtonWrapper }, hAsync("calcite-button", { key: 'a7c43863a3ed5fea819d970269a1d6bc4b0f3190', appearance: "transparent", class: CSS$V.cancelEditingButton, disabled: this.disabled, iconStart: "x", kind: "neutral", label: this.messages.cancelEditing, onClick: this.cancelEditingHandler, ref: (el) => (this.cancelEditingButton = el), scale: this.scale, type: "button" })),
+            hAsync("calcite-button", { key: '76ddaef4823f876904ff81cd3ea88491d63313d1', appearance: "solid", class: CSS$V.confirmChangesButton, disabled: this.disabled, iconStart: "check", kind: "brand", label: this.messages.confirmChanges, loading: this.loading, onClick: this.confirmChangesHandler, ref: (el) => (this.confirmEditingButton = el), scale: this.scale, type: "button" }),
         ]))));
     }
     //--------------------------------------------------------------------------
@@ -24191,7 +24060,6 @@ class Input {
     //
     //--------------------------------------------------------------------------
     connectedCallback() {
-        connectInteractive(this);
         connectLocalized(this);
         connectMessages(this);
         this.inlineEditableEl = this.el.closest("calcite-inline-editable");
@@ -24205,7 +24073,6 @@ class Input {
         this.el.addEventListener(internalHiddenInputInputEvent, this.onHiddenFormInputInput);
     }
     disconnectedCallback() {
-        disconnectInteractive(this);
         disconnectLabel(this);
         disconnectForm(this);
         disconnectLocalized(this);
@@ -24340,21 +24207,21 @@ class Input {
     // --------------------------------------------------------------------------
     render() {
         const dir = getElementDir(this.el);
-        const loader = (hAsync("div", { key: 'f71fbad6f1d4ac025dd2ebd801883cde41f90bb3', class: CSS$U.loader }, hAsync("calcite-progress", { key: 'f4a7dccfba5c4a39cb7d9d1bc7b215e85bbdfddc', label: this.messages.loading, type: "indeterminate" })));
-        const inputClearButton = (hAsync("button", { key: '1b2b470eedcd68f0af1e026fea1b8ded87949b0f', "aria-label": this.messages.clear, class: CSS$U.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputValue, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { key: 'b34987e78276f18a361856b949ff110770d9e8b8', icon: "x", scale: getIconScale(this.scale) })));
-        const iconEl = (hAsync("calcite-icon", { key: 'e9d94d4380bbe82d693007638a772b3f3e19538e', class: CSS$U.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: getIconScale(this.scale) }));
+        const loader = (hAsync("div", { key: '0b111121adea8b8279d705ea67e8a3811ca8a409', class: CSS$U.loader }, hAsync("calcite-progress", { key: '32f73f9056f4d6ddcb601d49fb614bb83cdc9b95', label: this.messages.loading, type: "indeterminate" })));
+        const inputClearButton = (hAsync("button", { key: '77f976623bec0909dc94b41d1540428310556ea9', "aria-label": this.messages.clear, class: CSS$U.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputValue, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { key: '51236deef0a8f0be3ed49d0e62fcc3e13e9abf54', icon: "x", scale: getIconScale(this.scale) })));
+        const iconEl = (hAsync("calcite-icon", { key: '5b462b30a55e6ca04bd4a8a72f6b3a95d23b590e', class: CSS$U.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: getIconScale(this.scale) }));
         const isHorizontalNumberButton = this.numberButtonType === "horizontal";
-        const numberButtonsHorizontalUp = (hAsync("button", { key: '4b57571f699841ab5c465b29b4d677ffd68ca9ef', "aria-hidden": "true", class: {
+        const numberButtonsHorizontalUp = (hAsync("button", { key: '6464e6e11f532b53845f1e62e87f046350140719', "aria-hidden": "true", class: {
                 [CSS$U.numberButtonItem]: true,
                 [CSS$U.buttonItemHorizontal]: isHorizontalNumberButton,
-            }, "data-adjustment": "up", disabled: this.disabled || this.readOnly, onPointerDown: this.numberButtonPointerDownHandler, onPointerOut: this.numberButtonPointerUpAndOutHandler, onPointerUp: this.numberButtonPointerUpAndOutHandler, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { key: '750d67b79ad8c3dfdb7bec8e38efe0f6b150af23', icon: "chevron-up", scale: getIconScale(this.scale) })));
-        const numberButtonsHorizontalDown = (hAsync("button", { key: '6cff7df4c63e5c0388244dad1d185d6b6661d5a5', "aria-hidden": "true", class: {
+            }, "data-adjustment": "up", disabled: this.disabled || this.readOnly, onPointerDown: this.numberButtonPointerDownHandler, onPointerOut: this.numberButtonPointerUpAndOutHandler, onPointerUp: this.numberButtonPointerUpAndOutHandler, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { key: '304bc8f64a5b81fe0bb289305665af57fc000e0b', icon: "chevron-up", scale: getIconScale(this.scale) })));
+        const numberButtonsHorizontalDown = (hAsync("button", { key: '6a50751248530caa8cda3da997f7e64e86ca41f5', "aria-hidden": "true", class: {
                 [CSS$U.numberButtonItem]: true,
                 [CSS$U.buttonItemHorizontal]: isHorizontalNumberButton,
-            }, "data-adjustment": "down", disabled: this.disabled || this.readOnly, onPointerDown: this.numberButtonPointerDownHandler, onPointerOut: this.numberButtonPointerUpAndOutHandler, onPointerUp: this.numberButtonPointerUpAndOutHandler, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { key: 'd0dd3b76e18a8c61d02da733f115e945ce67d3e4', icon: "chevron-down", scale: getIconScale(this.scale) })));
-        const numberButtonsVertical = (hAsync("div", { key: 'b13c18cd510876510499b305f2fec5fe21b3d5c9', class: CSS$U.numberButtonWrapper }, numberButtonsHorizontalUp, numberButtonsHorizontalDown));
-        const prefixText = hAsync("div", { key: 'c6c1fb7f76df5c032b4f56ccf25589cf7aa6afa5', class: CSS$U.prefix }, this.prefixText);
-        const suffixText = hAsync("div", { key: 'bcfbdaa2e2f0eb409e21ea79661c7fee51284565', class: CSS$U.suffix }, this.suffixText);
+            }, "data-adjustment": "down", disabled: this.disabled || this.readOnly, onPointerDown: this.numberButtonPointerDownHandler, onPointerOut: this.numberButtonPointerUpAndOutHandler, onPointerUp: this.numberButtonPointerUpAndOutHandler, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { key: '3a0aee8a07a25a9b9d2d5be3d7b95cbcc4648be3', icon: "chevron-down", scale: getIconScale(this.scale) })));
+        const numberButtonsVertical = (hAsync("div", { key: 'e1d5b1aa1faae762b0e906cfae0596d862b99e77', class: CSS$U.numberButtonWrapper }, numberButtonsHorizontalUp, numberButtonsHorizontalDown));
+        const prefixText = hAsync("div", { key: 'd9d75467a95282858d8cb342bbd149b525ed0ebe', class: CSS$U.prefix }, this.prefixText);
+        const suffixText = hAsync("div", { key: 'b1185f6537d8f1d2969bfc1ea08fc9f0adbf4de7', class: CSS$U.suffix }, this.suffixText);
         const autofocus = this.el.autofocus || this.el.hasAttribute("autofocus") ? true : null;
         const enterKeyHint = this.el.enterKeyHint || this.el.getAttribute("enterkeyhint");
         const inputMode = this.el.inputMode || this.el.getAttribute("inputmode");
@@ -24368,13 +24235,13 @@ class Input {
                 this.isTextarea ? (hAsync("div", { class: CSS$U.resizeIconWrapper }, hAsync("calcite-icon", { icon: "chevron-down", scale: getIconScale(this.scale) }))) : null,
             ]
             : null;
-        return (hAsync(Host, { key: '198e766a57555d29b9e9d44f5a0f10c567e76580', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, hAsync(InteractiveContainer, { key: '1edb87a044afe283f7d0f05634140c95eedea38d', disabled: this.disabled }, hAsync("div", { key: 'e85d3459d2a562f9e31ae6a30a778eb6d13e7893', class: { [CSS$U.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" }, ref: (el) => (this.inputWrapperEl = el) }, this.type === "number" && this.numberButtonType === "horizontal" && !this.readOnly
+        return (hAsync(Host, { key: 'be3138227a465f2b9a297c0b7b0b799624b9b3bf', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, hAsync(InteractiveContainer, { key: 'df4989329056f280a9d42f8af46755f2b2ac0b76', disabled: this.disabled }, hAsync("div", { key: 'c91e1147401abb18a3c9f4088b620fa5a90fea4c', class: { [CSS$U.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" }, ref: (el) => (this.inputWrapperEl = el) }, this.type === "number" && this.numberButtonType === "horizontal" && !this.readOnly
             ? numberButtonsHorizontalDown
-            : null, this.prefixText ? prefixText : null, hAsync("div", { key: '75535abc2ee1295fa510dd872dadea8074bcc3d5', class: CSS$U.wrapper }, localeNumberInput, childEl, this.isClearable ? inputClearButton : null, this.requestedIcon ? iconEl : null, this.loading ? loader : null), hAsync("div", { key: 'dbdc59f5e4e35e5704e54ddebf67bef0e3a88956', class: CSS$U.actionWrapper, ref: (el) => (this.actionWrapperEl = el) }, hAsync("slot", { key: '33a1ad6b9e45aeeb8586fe615b41eaa2590660c1', name: SLOTS$l.action })), this.type === "number" && this.numberButtonType === "vertical" && !this.readOnly
+            : null, this.prefixText ? prefixText : null, hAsync("div", { key: 'b5b3877a405c33893356224b9fbd4a0066da6bfe', class: CSS$U.wrapper }, localeNumberInput, childEl, this.isClearable ? inputClearButton : null, this.requestedIcon ? iconEl : null, this.loading ? loader : null), hAsync("div", { key: '9d053045237962214c27bde7acf5e01eafb05db5', class: CSS$U.actionWrapper, ref: (el) => (this.actionWrapperEl = el) }, hAsync("slot", { key: '84ab7ceae5cda07bd9fe6905b9b46525a9286ea0', name: SLOTS$l.action })), this.type === "number" && this.numberButtonType === "vertical" && !this.readOnly
             ? numberButtonsVertical
             : null, this.suffixText ? suffixText : null, this.type === "number" && this.numberButtonType === "horizontal" && !this.readOnly
             ? numberButtonsHorizontalUp
-            : null, hAsync(HiddenFormInputSlot, { key: '36b79e21780048c535ad95ac4e2ad7ab9b3c91e2', component: this })), this.validationMessage && this.status === "invalid" ? (hAsync(Validation, { icon: this.validationIcon, id: IDS$8.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
+            : null, hAsync(HiddenFormInputSlot, { key: '59afda68ff6507425da601b5f013b9dda7d10daf', component: this })), this.validationMessage && this.status === "invalid" ? (hAsync(Validation, { icon: this.validationIcon, id: IDS$8.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return getElement(this); }
@@ -24886,7 +24753,6 @@ class InputDatePicker {
     //
     // --------------------------------------------------------------------------
     connectedCallback() {
-        connectInteractive(this);
         connectLocalized(this);
         this.handleDateTimeFormatChange();
         const { open } = this;
@@ -24946,7 +24812,6 @@ class InputDatePicker {
     }
     disconnectedCallback() {
         deactivateFocusTrap(this);
-        disconnectInteractive(this);
         disconnectLabel(this);
         disconnectForm(this);
         disconnectFloatingUI(this, this.referenceEl, this.floatingEl);
@@ -24963,23 +24828,23 @@ class InputDatePicker {
             locale: effectiveLocale,
             useGrouping: false,
         };
-        return (hAsync(Host, { key: '38f3ea7b3206b0b5d404c6691d54811ce9e09753', onBlur: this.blurHandler, onKeyDown: this.keyDownHandler }, hAsync(InteractiveContainer, { key: '64296d7cf55e492e041eee729d969733f0aeeede', disabled: this.disabled }, this.localeData && (hAsync("div", { key: 'bb1244e8a1ac6e32bc71f08a98d8007b17a3332d', class: CSS$T.inputContainer }, hAsync("div", { key: 'fcb3e2430616bae57d9e09ea1f631bdb6c9810f0', class: CSS$T.inputWrapper, "data-position": "start", onClick: this.onInputWrapperClick, onPointerDown: this.onInputWrapperPointerDown, ref: this.setStartWrapper }, hAsync("calcite-input-text", { key: '4c1e9dea4f553f206251bafefd05993b5c897b41', "aria-autocomplete": "none", "aria-controls": this.dialogId, "aria-describedby": this.placeholderTextId, "aria-errormessage": IDS$7.validationMessage, "aria-expanded": toAriaBoolean(this.open), "aria-haspopup": "dialog", "aria-invalid": toAriaBoolean(this.status === "invalid"), class: {
+        return (hAsync(Host, { key: 'b82e3c3f469847253afe9f29747353d602889b40', onBlur: this.blurHandler, onKeyDown: this.keyDownHandler }, hAsync(InteractiveContainer, { key: '2c340fcb931ba3cdf54978cb743bddc139491dfb', disabled: this.disabled }, this.localeData && (hAsync("div", { key: '93eabf6b1cd7f702eb729c27515587a2a31e105c', class: CSS$T.inputContainer }, hAsync("div", { key: 'bb7b170bdf4fe8ea5add6b9f6dd78b4fc523e0ed', class: CSS$T.inputWrapper, "data-position": "start", onClick: this.onInputWrapperClick, onPointerDown: this.onInputWrapperPointerDown, ref: this.setStartWrapper }, hAsync("calcite-input-text", { key: '4e343e429f98963fdad5c6cf51f90c7aa9f4d294', "aria-autocomplete": "none", "aria-controls": this.dialogId, "aria-describedby": this.placeholderTextId, "aria-errormessage": IDS$7.validationMessage, "aria-expanded": toAriaBoolean(this.open), "aria-haspopup": "dialog", "aria-invalid": toAriaBoolean(this.status === "invalid"), class: {
                 [CSS$T.input]: true,
                 [CSS$T.inputNoBottomBorder]: this.layout === "vertical" && this.range,
             }, disabled: disabled, icon: "calendar", onCalciteInputTextInput: this.calciteInternalInputInputHandler, onCalciteInternalInputTextBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputTextFocus: this.startInputFocus, placeholder: this.localeData?.placeholder, readOnly: readOnly, ref: this.setStartInput, role: "combobox", scale: this.scale, status: this.status }), !this.readOnly &&
-            this.renderToggleIcon(this.open && this.focusedInput === "start"), hAsync("span", { key: '705abe452a2f49cc167f1051ca193b397d6cef9f', "aria-hidden": "true", class: CSS$T.assistiveText, id: this.placeholderTextId }, "Date Format: ", this.localeData?.placeholder)), hAsync("div", { key: 'bf71124065fdfefa0a6024e245aee31eee3a5b5e', "aria-hidden": toAriaBoolean(!this.open), "aria-label": messages.chooseDate, "aria-live": "polite", "aria-modal": "true", class: {
+            this.renderToggleIcon(this.open && this.focusedInput === "start"), hAsync("span", { key: '3ed0ae968fd9d311183bc8ecf68f95960e4894a3', "aria-hidden": "true", class: CSS$T.assistiveText, id: this.placeholderTextId }, "Date Format: ", this.localeData?.placeholder)), hAsync("div", { key: 'f0dad37893ed23e8b805d18e84ff390421156109', "aria-hidden": toAriaBoolean(!this.open), "aria-label": messages.chooseDate, "aria-live": "polite", "aria-modal": "true", class: {
                 [CSS$T.menu]: true,
                 [CSS$T.menuActive]: this.open,
-            }, id: this.dialogId, ref: this.setFloatingEl, role: "dialog" }, hAsync("div", { key: '9803f72d5454230914a2604cceb3b1d30fd32083', class: {
+            }, id: this.dialogId, ref: this.setFloatingEl, role: "dialog" }, hAsync("div", { key: '1d09d3279b7800f34f17450d17d9c2fd5b014cd6', class: {
                 [CSS$T.calendarWrapper]: true,
                 [CSS$T.calendarWrapperEnd]: this.focusedInput === "end",
                 [FloatingCSS.animation]: true,
                 [FloatingCSS.animationActive]: this.open,
-            }, ref: this.setTransitionEl }, hAsync("calcite-date-picker", { key: '667c3488db40269e60d79f28f374a6cf9ff610da', activeDate: this.datePickerActiveDate, activeRange: this.focusedInput, headingLevel: this.headingLevel, max: this.max, maxAsDate: this.maxAsDate, messageOverrides: this.messageOverrides, min: this.min, minAsDate: this.minAsDate, numberingSystem: numberingSystem, onCalciteDatePickerChange: this.handleDateChange, onCalciteDatePickerRangeChange: this.handleDateRangeChange, proximitySelectionDisabled: this.proximitySelectionDisabled, range: this.range, ref: this.setDatePickerRef, scale: this.scale, tabIndex: this.open ? undefined : -1, valueAsDate: this.valueAsDate }))), this.range && this.layout === "horizontal" && (hAsync("div", { key: '1c657ea9c4b667035d58a13bffb784489586bbdd', class: CSS$T.horizontalArrowContainer }, hAsync("calcite-icon", { key: '970d61e19c5372d503ef070fcbd30817b2231c86', flipRtl: true, icon: "arrow-right", scale: getIconScale(this.scale) }))), this.range && this.layout === "vertical" && this.scale !== "s" && (hAsync("div", { key: 'b5c83aafbddb396900c44b97d642b0c1c7b2a27b', class: CSS$T.verticalArrowContainer }, hAsync("calcite-icon", { key: 'b00438be61ed6f73b1c0b074ff1a8b26ce32e7e2', icon: "arrow-down", scale: getIconScale(this.scale) }))), this.range && (hAsync("div", { key: '38a7533192d085470cef7e59d091cebe8088980d', class: CSS$T.inputWrapper, "data-position": "end", onClick: this.onInputWrapperClick, onPointerDown: this.onInputWrapperPointerDown, ref: this.setEndWrapper }, hAsync("calcite-input-text", { key: '03fbeddd6785ce5e6abb29d9c40ee34842376e31', "aria-autocomplete": "none", "aria-controls": this.dialogId, "aria-errormessage": IDS$7.validationMessage, "aria-expanded": toAriaBoolean(this.open), "aria-haspopup": "dialog", "aria-invalid": toAriaBoolean(this.status === "invalid"), class: {
+            }, ref: this.setTransitionEl }, hAsync("calcite-date-picker", { key: '6a69e78ba0a9264822e12738bef770ffeef49482', activeDate: this.datePickerActiveDate, activeRange: this.focusedInput, headingLevel: this.headingLevel, max: this.max, maxAsDate: this.maxAsDate, messageOverrides: this.messageOverrides, min: this.min, minAsDate: this.minAsDate, numberingSystem: numberingSystem, onCalciteDatePickerChange: this.handleDateChange, onCalciteDatePickerRangeChange: this.handleDateRangeChange, proximitySelectionDisabled: this.proximitySelectionDisabled, range: this.range, ref: this.setDatePickerRef, scale: this.scale, tabIndex: this.open ? undefined : -1, valueAsDate: this.valueAsDate }))), this.range && this.layout === "horizontal" && (hAsync("div", { key: 'd73534ca42128c34d66eb69d9e7d94d9e03da564', class: CSS$T.horizontalArrowContainer }, hAsync("calcite-icon", { key: 'c39421b9d0ab43d454a53e1254a37012b17f18b6', flipRtl: true, icon: "arrow-right", scale: getIconScale(this.scale) }))), this.range && this.layout === "vertical" && this.scale !== "s" && (hAsync("div", { key: '528e281ada4a780a9b348baf0ac46b79cdcd2cfb', class: CSS$T.verticalArrowContainer }, hAsync("calcite-icon", { key: '48c773f76fa6cd3e57d62c85afb3e511d703ebf4', icon: "arrow-down", scale: getIconScale(this.scale) }))), this.range && (hAsync("div", { key: 'a56ac704fa4402a15d2a32d5bd69c4237c1981b1', class: CSS$T.inputWrapper, "data-position": "end", onClick: this.onInputWrapperClick, onPointerDown: this.onInputWrapperPointerDown, ref: this.setEndWrapper }, hAsync("calcite-input-text", { key: '32b5512961dc9235bcfe1a2414dca887e1f0702b', "aria-autocomplete": "none", "aria-controls": this.dialogId, "aria-errormessage": IDS$7.validationMessage, "aria-expanded": toAriaBoolean(this.open), "aria-haspopup": "dialog", "aria-invalid": toAriaBoolean(this.status === "invalid"), class: {
                 [CSS$T.input]: true,
                 [CSS$T.inputBorderTopColorOne]: this.layout === "vertical" && this.range,
             }, disabled: disabled, icon: "calendar", onCalciteInputTextInput: this.calciteInternalInputInputHandler, onCalciteInternalInputTextBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputTextFocus: this.endInputFocus, placeholder: this.localeData?.placeholder, readOnly: readOnly, ref: this.setEndInput, role: "combobox", scale: this.scale, status: this.status }), !this.readOnly &&
-            this.renderToggleIcon(this.open && this.focusedInput === "end"))))), hAsync(HiddenFormInputSlot, { key: '9086e6f1f425cb7c583bf8f195b877e42c6a6aa6', component: this }), this.validationMessage && this.status === "invalid" ? (hAsync(Validation, { icon: this.validationIcon, id: IDS$7.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
+            this.renderToggleIcon(this.open && this.focusedInput === "end"))))), hAsync(HiddenFormInputSlot, { key: '5ef77e68d11b6df59976ebf1875b731a88998f54', component: this }), this.validationMessage && this.status === "invalid" ? (hAsync(Validation, { icon: this.validationIcon, id: IDS$7.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
     }
     renderToggleIcon(open) {
         return (
@@ -25687,7 +25552,6 @@ class InputNumber {
     //
     //--------------------------------------------------------------------------
     connectedCallback() {
-        connectInteractive(this);
         connectLocalized(this);
         connectMessages(this);
         this.inlineEditableEl = this.el.closest("calcite-inline-editable");
@@ -25704,7 +25568,6 @@ class InputNumber {
         setComponentLoaded(this);
     }
     disconnectedCallback() {
-        disconnectInteractive(this);
         disconnectLabel(this);
         disconnectForm(this);
         disconnectLocalized(this);
@@ -25824,27 +25687,27 @@ class InputNumber {
     // --------------------------------------------------------------------------
     render() {
         const dir = getElementDir(this.el);
-        const loader = (hAsync("div", { key: '4afc447c454d130ac4e983faa2a5a4390e500134', class: CSS$S.loader }, hAsync("calcite-progress", { key: '8f14d3e88b4a3f9d1069b2f10a3b5377353b37cd', label: this.messages.loading, type: "indeterminate" })));
-        const inputClearButton = (hAsync("button", { key: '60622dbfee3b9d3b96f779f37590d02863a5b395', "aria-label": this.messages.clear, class: CSS$S.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputValue, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { key: '98e61619db4e6cd25353bbb4cd3e998b47debdef', icon: "x", scale: getIconScale(this.scale) })));
-        const iconEl = (hAsync("calcite-icon", { key: 'bd8c940cd1a47cc4051d9cbb30e19ce32748f82d', class: CSS$S.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: getIconScale(this.scale) }));
+        const loader = (hAsync("div", { key: '624f851a38ed577e84037e4bff2aef9a71176736', class: CSS$S.loader }, hAsync("calcite-progress", { key: '2f53d03813ac32d35de42a026ec2234534a154ce', label: this.messages.loading, type: "indeterminate" })));
+        const inputClearButton = (hAsync("button", { key: '23a9c4b0be969c128ce8530099b8f69976c59502', "aria-label": this.messages.clear, class: CSS$S.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputValue, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { key: 'a7edf1cbc4bc56413e5ff96f6cb6d6d0e683a918', icon: "x", scale: getIconScale(this.scale) })));
+        const iconEl = (hAsync("calcite-icon", { key: '6e170726283b9ac315793a975e5bd8d672077ee3', class: CSS$S.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: getIconScale(this.scale) }));
         const isHorizontalNumberButton = this.numberButtonType === "horizontal";
-        const numberButtonsHorizontalUp = (hAsync("button", { key: 'a33a45b1576ed55847411d9c0e493a4354188cee', "aria-hidden": "true", class: {
+        const numberButtonsHorizontalUp = (hAsync("button", { key: 'de4180c780fe30c27eec7e0f9466f85eeb08496b', "aria-hidden": "true", class: {
                 [CSS$S.numberButtonItem]: true,
                 [CSS$S.buttonItemHorizontal]: isHorizontalNumberButton,
-            }, "data-adjustment": "up", disabled: this.disabled || this.readOnly, onPointerDown: this.nudgeButtonPointerDownHandler, onPointerOut: this.nudgeButtonPointerOutHandler, onPointerUp: this.nudgeButtonPointerUpHandler, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { key: 'b05ed816a0472df584918e6cdbeefca0f4ebccb6', icon: "chevron-up", scale: getIconScale(this.scale) })));
-        const numberButtonsHorizontalDown = (hAsync("button", { key: '7e8466f04ec12caccd6703701934c8e6864e2ad1', "aria-hidden": "true", class: {
+            }, "data-adjustment": "up", disabled: this.disabled || this.readOnly, onPointerDown: this.nudgeButtonPointerDownHandler, onPointerOut: this.nudgeButtonPointerOutHandler, onPointerUp: this.nudgeButtonPointerUpHandler, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { key: '82f7975740d4f6dc7bcdaeab5eff839e19c15dba', icon: "chevron-up", scale: getIconScale(this.scale) })));
+        const numberButtonsHorizontalDown = (hAsync("button", { key: '2e12375c21c64a18cc1e2565de90734c1e38910a', "aria-hidden": "true", class: {
                 [CSS$S.numberButtonItem]: true,
                 [CSS$S.buttonItemHorizontal]: isHorizontalNumberButton,
-            }, "data-adjustment": "down", disabled: this.disabled || this.readOnly, onPointerDown: this.nudgeButtonPointerDownHandler, onPointerOut: this.nudgeButtonPointerOutHandler, onPointerUp: this.nudgeButtonPointerUpHandler, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { key: 'b796613a0510d88c5a9a88e19f204dd1cfa3ae79', icon: "chevron-down", scale: getIconScale(this.scale) })));
-        const numberButtonsVertical = (hAsync("div", { key: '7c0d61831b7d00d383b08bc69d130c93e4b41708', class: CSS$S.numberButtonWrapper }, numberButtonsHorizontalUp, numberButtonsHorizontalDown));
-        const prefixText = hAsync("div", { key: 'bde995b58c2be304e0f97751864932f4aba8b560', class: CSS$S.prefix }, this.prefixText);
-        const suffixText = hAsync("div", { key: '09ecebb64862cc87c42f6a07eb43f4f492aafff9', class: CSS$S.suffix }, this.suffixText);
+            }, "data-adjustment": "down", disabled: this.disabled || this.readOnly, onPointerDown: this.nudgeButtonPointerDownHandler, onPointerOut: this.nudgeButtonPointerOutHandler, onPointerUp: this.nudgeButtonPointerUpHandler, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { key: 'fbd8d502aff44c1985e516ba4f48fa3e247ffa8f', icon: "chevron-down", scale: getIconScale(this.scale) })));
+        const numberButtonsVertical = (hAsync("div", { key: '01187ebd01cb01752782d929d3eff4a682b5f3de', class: CSS$S.numberButtonWrapper }, numberButtonsHorizontalUp, numberButtonsHorizontalDown));
+        const prefixText = hAsync("div", { key: 'ee41b63a2152793001a0f1f6560b613fd9447b1a', class: CSS$S.prefix }, this.prefixText);
+        const suffixText = hAsync("div", { key: '04c9c776fbc751719d700f5c7a4066aa220513b3', class: CSS$S.suffix }, this.suffixText);
         const childEl = (hAsync("input", { "aria-errormessage": IDS$6.validationMessage, "aria-invalid": toAriaBoolean(this.status === "invalid"), "aria-label": getLabelText(this), autocomplete: this.autocomplete, autofocus: this.el.autofocus ? true : null, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: this.el.enterKeyHint || this.el.getAttribute("enterkeyhint"), inputMode: this.el.inputMode || this.el.getAttribute("inputmode") || "decimal", key: "localized-input", maxLength: this.maxLength, minLength: this.minLength, name: undefined, onBlur: this.inputNumberBlurHandler, onFocus: this.inputNumberFocusHandler, onInput: this.inputNumberInputHandler, onKeyDown: this.inputNumberKeyDownHandler, onKeyUp: this.inputNumberKeyUpHandler, placeholder: this.placeholder || "", readOnly: this.readOnly, ref: this.setChildNumberElRef, type: "text", value: this.displayedValue }));
-        return (hAsync(Host, { key: '8bbe5d61c4d825064c541d69720c3dec29397bb6', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, hAsync(InteractiveContainer, { key: '88981ec407b3ca3dc30e1f4639cc165f125a2e4f', disabled: this.disabled }, hAsync("div", { key: 'b5147afb965eb8950451efd0188de34a126cb42a', class: { [CSS$S.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" }, ref: (el) => (this.inputWrapperEl = el) }, this.numberButtonType === "horizontal" && !this.readOnly
+        return (hAsync(Host, { key: 'd52faa6b5b8066d75d09ede47bf69c6f4c07083c', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, hAsync(InteractiveContainer, { key: '450b33701515176eb435dcfdf9d63196136b91d3', disabled: this.disabled }, hAsync("div", { key: '24f8db03f06d7782f85b6f59fb961de3c1825b8c', class: { [CSS$S.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" }, ref: (el) => (this.inputWrapperEl = el) }, this.numberButtonType === "horizontal" && !this.readOnly
             ? numberButtonsHorizontalDown
-            : null, this.prefixText ? prefixText : null, hAsync("div", { key: 'ae8cfb188f1e67b2b26fd994e075b9d65f193aed', class: CSS$S.wrapper }, childEl, this.isClearable ? inputClearButton : null, this.requestedIcon ? iconEl : null, this.loading ? loader : null), hAsync("div", { key: '68e1e75159411ccc36981c488411741ba4f4863f', class: CSS$S.actionWrapper, ref: (el) => (this.actionWrapperEl = el) }, hAsync("slot", { key: '68ffd29dc928221cf0e4f1b1e79fc71dc1cdbfa2', name: SLOTS$k.action })), this.numberButtonType === "vertical" && !this.readOnly ? numberButtonsVertical : null, this.suffixText ? suffixText : null, this.numberButtonType === "horizontal" && !this.readOnly
+            : null, this.prefixText ? prefixText : null, hAsync("div", { key: 'eb46de7ea0c7768de8c2f73c9d53a555fd82d92c', class: CSS$S.wrapper }, childEl, this.isClearable ? inputClearButton : null, this.requestedIcon ? iconEl : null, this.loading ? loader : null), hAsync("div", { key: '256eb5868113985e7f88e3e8b2d1505bb321da10', class: CSS$S.actionWrapper, ref: (el) => (this.actionWrapperEl = el) }, hAsync("slot", { key: '9389f0814000d0db770c60b294a81df35a9d8a3d', name: SLOTS$k.action })), this.numberButtonType === "vertical" && !this.readOnly ? numberButtonsVertical : null, this.suffixText ? suffixText : null, this.numberButtonType === "horizontal" && !this.readOnly
             ? numberButtonsHorizontalUp
-            : null, hAsync(HiddenFormInputSlot, { key: '5efb494ebcff2e85bd0cb306ca1653dea1a79e36', component: this })), this.validationMessage && this.status === "invalid" ? (hAsync(Validation, { icon: this.validationIcon, id: IDS$6.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
+            : null, hAsync(HiddenFormInputSlot, { key: 'd5d25c9eece3dcc784eb0373410a6702c5f70845', component: this })), this.validationMessage && this.status === "invalid" ? (hAsync(Validation, { icon: this.validationIcon, id: IDS$6.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return getElement(this); }
@@ -26154,7 +26017,6 @@ class InputText {
     //
     //--------------------------------------------------------------------------
     connectedCallback() {
-        connectInteractive(this);
         connectLocalized(this);
         connectMessages(this);
         this.inlineEditableEl = this.el.closest("calcite-inline-editable");
@@ -26168,7 +26030,6 @@ class InputText {
         this.el.addEventListener(internalHiddenInputInputEvent, this.onHiddenFormInputInput);
     }
     disconnectedCallback() {
-        disconnectInteractive(this);
         disconnectLabel(this);
         disconnectForm(this);
         disconnectLocalized(this);
@@ -26232,16 +26093,16 @@ class InputText {
     // --------------------------------------------------------------------------
     render() {
         const dir = getElementDir(this.el);
-        const loader = (hAsync("div", { key: '75e1d143289073aba71c8412dba86e4513ba438a', class: CSS$R.loader }, hAsync("calcite-progress", { key: '17c1a8dfb11db87f62dd7664fb3ef152b14c89bc', label: this.messages.loading, type: "indeterminate" })));
-        const inputClearButton = (hAsync("button", { key: '8c2fd4a9a50bea3e5c1e3061d275b76f84920e02', "aria-label": this.messages.clear, class: CSS$R.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputTextValue, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { key: '359da0464e284f76c85d92888789c6c20e6f6195', icon: "x", scale: getIconScale(this.scale) })));
-        const iconEl = (hAsync("calcite-icon", { key: '643f3c87fb55ffbab119802fa6409263a003d337', class: CSS$R.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: getIconScale(this.scale) }));
-        const prefixText = hAsync("div", { key: 'd5a48b6b2fef41fef60e6094d25af969fc6b95e3', class: CSS$R.prefix }, this.prefixText);
-        const suffixText = hAsync("div", { key: '5b1e442c895c58386790e0fad7de474be4483a1b', class: CSS$R.suffix }, this.suffixText);
-        const childEl = (hAsync("input", { key: '6ca205247c77545cca539d0e9e15ecc8a3bd7aeb', "aria-errormessage": IDS$5.validationMessage, "aria-invalid": toAriaBoolean(this.status === "invalid"), "aria-label": getLabelText(this), autocomplete: this.autocomplete, autofocus: this.el.autofocus ? true : null, class: {
+        const loader = (hAsync("div", { key: 'c86a526dafad491cc4cd5dfd402edf2b7d844af0', class: CSS$R.loader }, hAsync("calcite-progress", { key: '48b6cdec0421bc9ce2831c1a7f6d35421a25809c', label: this.messages.loading, type: "indeterminate" })));
+        const inputClearButton = (hAsync("button", { key: 'f4d3fefcfb943b964e0d8dc73fcdcbf3a4fba708', "aria-label": this.messages.clear, class: CSS$R.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputTextValue, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { key: '252fdb8b5949fae3adb0bfa169ceec62ae7f45cb', icon: "x", scale: getIconScale(this.scale) })));
+        const iconEl = (hAsync("calcite-icon", { key: 'e876b4ebf7f0ff0a81ed0c07238216fbc4e4386d', class: CSS$R.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: getIconScale(this.scale) }));
+        const prefixText = hAsync("div", { key: '4d4bbdb011d2e211c0cc6a9268a2d136766b4cfc', class: CSS$R.prefix }, this.prefixText);
+        const suffixText = hAsync("div", { key: 'dd53842663ef022e9b4f23862ae53fd37f9c4d1d', class: CSS$R.suffix }, this.suffixText);
+        const childEl = (hAsync("input", { key: '62a6fca79d01610c56134b8d6d898c0fc0303293', "aria-errormessage": IDS$5.validationMessage, "aria-invalid": toAriaBoolean(this.status === "invalid"), "aria-label": getLabelText(this), autocomplete: this.autocomplete, autofocus: this.el.autofocus ? true : null, class: {
                 [CSS$R.editingEnabled]: this.editingEnabled,
                 [CSS$R.inlineChild]: !!this.inlineEditableEl,
             }, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: this.el.enterKeyHint || this.el.getAttribute("enterkeyhint"), inputMode: this.el.inputMode || this.el.getAttribute("inputmode"), maxLength: this.maxLength, minLength: this.minLength, name: this.name, onBlur: this.inputTextBlurHandler, onFocus: this.inputTextFocusHandler, onInput: this.inputTextInputHandler, onKeyDown: this.inputTextKeyDownHandler, pattern: this.pattern, placeholder: this.placeholder || "", readOnly: this.readOnly, ref: this.setChildElRef, required: this.required ? true : null, tabIndex: this.disabled || (this.inlineEditableEl && !this.editingEnabled) ? -1 : null, type: "text", value: this.value }));
-        return (hAsync(Host, { key: 'ee459d49c166ac8587e9bcff82e469001bfb341d', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, hAsync(InteractiveContainer, { key: 'b5b5ce9afc9e98b42ad3380057c48d745fe4a69f', disabled: this.disabled }, hAsync("div", { key: '957c3665257e600acc1b0804e00c1d4d1786dd8c', class: { [CSS$R.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" }, ref: (el) => (this.inputWrapperEl = el) }, this.prefixText ? prefixText : null, hAsync("div", { key: '2f572c83b9816be8763d1c995a523f82013b76cd', class: CSS$R.wrapper }, childEl, this.isClearable ? inputClearButton : null, this.requestedIcon ? iconEl : null, this.loading ? loader : null), hAsync("div", { key: 'e02221edf4528d5663d3e48fcea5d6e5c1fe12c6', class: CSS$R.actionWrapper, ref: (el) => (this.actionWrapperEl = el) }, hAsync("slot", { key: 'b49d331ad17da7f17bc2f44ee0d61f5b8c45ce93', name: SLOTS$j.action })), this.suffixText ? suffixText : null, hAsync(HiddenFormInputSlot, { key: 'b93d1dec9fa8f48620f694e90c4e195e0138d1c6', component: this })), this.validationMessage && this.status === "invalid" ? (hAsync(Validation, { icon: this.validationIcon, id: IDS$5.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
+        return (hAsync(Host, { key: 'd3b6529a3db488cb0a88873e036064b97b6cb0d5', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, hAsync(InteractiveContainer, { key: '67174df34ebd0643bd1d0d9f91d6c70b98ff0f19', disabled: this.disabled }, hAsync("div", { key: 'fa38fa8b502134b6b0ad266c397a909e41efc78a', class: { [CSS$R.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" }, ref: (el) => (this.inputWrapperEl = el) }, this.prefixText ? prefixText : null, hAsync("div", { key: 'd403ad80002ec826f214caef846d384e7e11a07b', class: CSS$R.wrapper }, childEl, this.isClearable ? inputClearButton : null, this.requestedIcon ? iconEl : null, this.loading ? loader : null), hAsync("div", { key: '00c23282219893fa3a8bd5fd805824945003fd25', class: CSS$R.actionWrapper, ref: (el) => (this.actionWrapperEl = el) }, hAsync("slot", { key: 'ba628b9d0f214a70102710a541c3b068d884437a', name: SLOTS$j.action })), this.suffixText ? suffixText : null, hAsync(HiddenFormInputSlot, { key: '3e56cc54088b3188827b22f80bbe4dbb78f5bdca', component: this })), this.validationMessage && this.status === "invalid" ? (hAsync(Validation, { icon: this.validationIcon, id: IDS$5.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return getElement(this); }
@@ -28335,7 +28196,6 @@ class InputTimePicker {
     //
     //--------------------------------------------------------------------------
     connectedCallback() {
-        connectInteractive(this);
         connectLocalized(this);
         if (isValidTime(this.value)) {
             this.setValueDirectly(this.value);
@@ -28365,7 +28225,6 @@ class InputTimePicker {
         this.openHandler();
     }
     disconnectedCallback() {
-        disconnectInteractive(this);
         disconnectLabel(this);
         disconnectForm(this);
         disconnectLocalized(this);
@@ -28382,7 +28241,7 @@ class InputTimePicker {
     // --------------------------------------------------------------------------
     render() {
         const { disabled, messages, readOnly, dialogId } = this;
-        return (hAsync(Host, { key: '5bf59228db214a262663f204d9633c77b969dcc2', onBlur: this.hostBlurHandler, onKeyDown: this.keyDownHandler }, hAsync(InteractiveContainer, { key: '0ba712e725695bfae5c3d2bcfe151f5b3abe0baa', disabled: this.disabled }, hAsync("div", { key: 'ac841ee97c7e970353494103f22ad596d7e8d080', class: "input-wrapper", onClick: this.onInputWrapperClick }, hAsync("calcite-input-text", { key: 'd5e3ee19763195c57b75f7001301d9233d011c94', "aria-autocomplete": "none", "aria-errormessage": IDS$4.validationMessage, "aria-haspopup": "dialog", "aria-invalid": toAriaBoolean(this.status === "invalid"), disabled: disabled, icon: "clock", id: this.referenceElementId, label: getLabelText(this), lang: this.effectiveLocale, onCalciteInputTextInput: this.calciteInternalInputInputHandler, onCalciteInternalInputTextFocus: this.calciteInternalInputFocusHandler, readOnly: readOnly, ref: this.setInputEl, role: "combobox", scale: this.scale, status: this.status }), !this.readOnly && this.renderToggleIcon(this.open)), hAsync("calcite-popover", { key: 'c86106dcc1410ec7be8fdf4ced44a00a2bf3aa93', focusTrapDisabled: true, id: dialogId, label: messages.chooseTime, lang: this.effectiveLocale, onCalcitePopoverBeforeClose: this.popoverBeforeCloseHandler, onCalcitePopoverBeforeOpen: this.popoverBeforeOpenHandler, onCalcitePopoverClose: this.popoverCloseHandler, onCalcitePopoverOpen: this.popoverOpenHandler, overlayPositioning: this.overlayPositioning, placement: this.placement, ref: this.setCalcitePopoverEl, referenceElement: this.referenceElementId, triggerDisabled: true }, hAsync("calcite-time-picker", { key: '85d96849fc7e3859a72d2e738a67307d16faadb2', lang: this.effectiveLocale, messageOverrides: this.messageOverrides, numberingSystem: this.numberingSystem, onCalciteInternalTimePickerChange: this.timePickerChangeHandler, ref: this.setCalciteTimePickerEl, scale: this.scale, step: this.step, tabIndex: this.open ? undefined : -1, value: this.value })), hAsync(HiddenFormInputSlot, { key: 'd63640ad5ab2acae003d02c7e22938e1875004cf', component: this }), this.validationMessage && this.status === "invalid" ? (hAsync(Validation, { icon: this.validationIcon, id: IDS$4.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
+        return (hAsync(Host, { key: '37270f1ca56fabb0ed42a985402fb2b13a7d0f36', onBlur: this.hostBlurHandler, onKeyDown: this.keyDownHandler }, hAsync(InteractiveContainer, { key: '5bfd7b1f27463391e4a1b1c5d8f5fec0fbc8a277', disabled: this.disabled }, hAsync("div", { key: 'e66a7b4740abc618f000fac3ffa1ce51432c2855', class: "input-wrapper", onClick: this.onInputWrapperClick }, hAsync("calcite-input-text", { key: 'e7e49e429ea77df8833ec90906c6a7ddaa0a849d', "aria-autocomplete": "none", "aria-errormessage": IDS$4.validationMessage, "aria-haspopup": "dialog", "aria-invalid": toAriaBoolean(this.status === "invalid"), disabled: disabled, icon: "clock", id: this.referenceElementId, label: getLabelText(this), lang: this.effectiveLocale, onCalciteInputTextInput: this.calciteInternalInputInputHandler, onCalciteInternalInputTextFocus: this.calciteInternalInputFocusHandler, readOnly: readOnly, ref: this.setInputEl, role: "combobox", scale: this.scale, status: this.status }), !this.readOnly && this.renderToggleIcon(this.open)), hAsync("calcite-popover", { key: '343846f68976c9648a8f23141885961532cfda6a', focusTrapDisabled: true, id: dialogId, label: messages.chooseTime, lang: this.effectiveLocale, onCalcitePopoverBeforeClose: this.popoverBeforeCloseHandler, onCalcitePopoverBeforeOpen: this.popoverBeforeOpenHandler, onCalcitePopoverClose: this.popoverCloseHandler, onCalcitePopoverOpen: this.popoverOpenHandler, overlayPositioning: this.overlayPositioning, placement: this.placement, ref: this.setCalcitePopoverEl, referenceElement: this.referenceElementId, triggerDisabled: true }, hAsync("calcite-time-picker", { key: '5e79ddb20da06c0066a40f55906ea33bf83910cb', lang: this.effectiveLocale, messageOverrides: this.messageOverrides, numberingSystem: this.numberingSystem, onCalciteInternalTimePickerChange: this.timePickerChangeHandler, ref: this.setCalciteTimePickerEl, scale: this.scale, step: this.step, tabIndex: this.open ? undefined : -1, value: this.value })), hAsync(HiddenFormInputSlot, { key: 'bcad3e283223256bc012a97d16b4f0744413d035', component: this }), this.validationMessage && this.status === "invalid" ? (hAsync(Validation, { icon: this.validationIcon, id: IDS$4.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
     }
     renderToggleIcon(open) {
         return (hAsync("span", { class: CSS$Q.toggleIcon }, hAsync("calcite-icon", { icon: open ? "chevron-up" : "chevron-down", scale: getIconScale(this.scale) })));
@@ -29004,9 +28863,6 @@ class Link {
     //  Lifecycle
     //
     //--------------------------------------------------------------------------
-    connectedCallback() {
-        connectInteractive(this);
-    }
     componentWillLoad() {
         setUpLoadableComponent(this);
     }
@@ -29016,24 +28872,21 @@ class Link {
     componentDidRender() {
         updateHostInteraction(this);
     }
-    disconnectedCallback() {
-        disconnectInteractive(this);
-    }
     render() {
         const { download, el } = this;
         const dir = getElementDir(el);
         const childElType = this.href ? "a" : "span";
-        const iconStartEl = (hAsync("calcite-icon", { key: '98cdfc979033eb5e339557d4d1a2143c9db9481d', class: "calcite-link--icon icon-start", flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: "s" }));
-        const iconEndEl = (hAsync("calcite-icon", { key: 'df0cfff6b187899330ec32a74132ca9d6ccb71f6', class: "calcite-link--icon icon-end", flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: "s" }));
+        const iconStartEl = (hAsync("calcite-icon", { key: '97671ac491bb59c2c24cf33d243efeeecb03f509', class: "calcite-link--icon icon-start", flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: "s" }));
+        const iconEndEl = (hAsync("calcite-icon", { key: '6093c4bde008df245c388c648ce8855270dabb1e', class: "calcite-link--icon icon-end", flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: "s" }));
         const Tag = childElType;
         const role = childElType === "span" ? "link" : null;
         const tabIndex = childElType === "span" ? 0 : null;
-        return (hAsync(Host, { key: 'e0db07bcdf54a1558d2ee5f7d72dc6b3c9b7b4fc', role: "presentation" }, hAsync(InteractiveContainer, { key: '84e1d20ffe03e7776560fa3f3bcc51a0e17c39ca', disabled: this.disabled }, hAsync(Tag, { key: '3d37687afd90675d8aab80bce396e765d81b580e', class: { [CSS_UTILITY.rtl]: dir === "rtl" },
+        return (hAsync(Host, { key: 'ba5308eef4c3c54b61038f36f3d43fdd90f98a9a', role: "presentation" }, hAsync(InteractiveContainer, { key: 'da2a8ec93933d7a16df31607bfaf71bd4170e60d', disabled: this.disabled }, hAsync(Tag, { key: 'acef60a1538c832058594e606f01232dbfa3ba34', class: { [CSS_UTILITY.rtl]: dir === "rtl" },
             /*
           When the 'download' property of type 'boolean | string' is set to true, the value is "".
           This works around that issue for now.
           */
-            download: Tag === "a" && (download === "" || download) ? download : null, href: Tag === "a" && this.href, onClick: this.childElClickHandler, ref: this.storeTagRef, rel: Tag === "a" && this.rel, role: role, tabIndex: tabIndex, target: Tag === "a" && this.target }, this.iconStart ? iconStartEl : null, hAsync("slot", { key: '14a04fe0a03318cfa130744530bff8d68450c317' }), this.iconEnd ? iconEndEl : null))));
+            download: Tag === "a" && (download === "" || download) ? download : null, href: Tag === "a" && this.href, onClick: this.childElClickHandler, ref: this.storeTagRef, rel: Tag === "a" && this.rel, role: role, tabIndex: tabIndex, target: Tag === "a" && this.target }, this.iconStart ? iconStartEl : null, hAsync("slot", { key: '2df738861c674ac77bbe5162da42fd8158878bac' }), this.iconEnd ? iconEndEl : null))));
     }
     //--------------------------------------------------------------------------
     //
@@ -32241,7 +32094,6 @@ class List$1 {
         this.connectObserver();
         this.updateListItems();
         this.setUpSorting();
-        connectInteractive(this);
         this.setParentList();
     }
     async componentWillLoad() {
@@ -32257,7 +32109,6 @@ class List$1 {
     disconnectedCallback() {
         this.disconnectObserver();
         disconnectSortableComponent(this);
-        disconnectInteractive(this);
         disconnectLocalized(this);
         disconnectMessages(this);
     }
@@ -32288,7 +32139,7 @@ class List$1 {
     // --------------------------------------------------------------------------
     render() {
         const { loading, label, disabled, dataForFilter, filterEnabled, filterPlaceholder, filterText, filteredItems, hasFilterActionsStart, hasFilterActionsEnd, hasFilterNoResults, filterProps, } = this;
-        return (hAsync(InteractiveContainer, { key: '84991009060a8b97b9901ca97f32b32fa6e830fa', disabled: this.disabled }, hAsync("div", { key: '27f5a904be599be5768bb1a7693111573e745e0f', class: CSS$K.container }, this.dragEnabled ? (hAsync("span", { "aria-live": "assertive", class: CSS$K.assistiveText }, this.assistiveText)) : null, this.renderItemAriaLive(), loading ? hAsync("calcite-scrim", { class: CSS$K.scrim, loading: loading }) : null, hAsync("table", { key: 'dd343a43f26edcb50f87a064a41471756a94afeb', "aria-busy": toAriaBoolean(loading), "aria-label": label || "", class: CSS$K.table, onKeyDown: this.handleListKeydown, role: "treegrid" }, filterEnabled || hasFilterActionsStart || hasFilterActionsEnd ? (hAsync("thead", { class: CSS$K.sticky }, hAsync("tr", null, hAsync("th", { colSpan: MAX_COLUMNS }, hAsync("calcite-stack", { class: CSS$K.stack }, hAsync("slot", { name: SLOTS$g.filterActionsStart, onSlotchange: this.handleFilterActionsStartSlotChange, slot: SLOTS$h.actionsStart }), hAsync("calcite-filter", { "aria-label": filterPlaceholder, disabled: disabled, filterProps: filterProps, items: dataForFilter, onCalciteFilterChange: this.handleFilterChange, placeholder: filterPlaceholder, ref: this.setFilterEl, value: filterText }), hAsync("slot", { name: SLOTS$g.filterActionsEnd, onSlotchange: this.handleFilterActionsEndSlotChange, slot: SLOTS$h.actionsEnd })))))) : null, hAsync("tbody", { key: '90a288eea3e02d5261e369e14b687852c1ff876b', class: CSS$K.tableContainer }, hAsync("slot", { key: '08992c3c5ad4d5afe86e7e1cd38327c5f4281bd1', onSlotchange: this.handleDefaultSlotChange }))), hAsync("div", { key: '689185b56a2990e00a409ddbc4e4c135115791d3', "aria-live": "polite", "data-test-id": "no-results-container", hidden: !(hasFilterNoResults && filterEnabled && filterText && !filteredItems.length) }, hAsync("slot", { key: '929ef7f843f5c8e7290a3cbcebea8c5c4cf38707', name: SLOTS$g.filterNoResults, onSlotchange: this.handleFilterNoResultsSlotChange })))));
+        return (hAsync(InteractiveContainer, { key: '77a7d2082e48cc50534d5b098fca5f8f2919466a', disabled: this.disabled }, hAsync("div", { key: '6e06c521872be685e7741cb8cf504b4e3f2e633d', class: CSS$K.container }, this.dragEnabled ? (hAsync("span", { "aria-live": "assertive", class: CSS$K.assistiveText }, this.assistiveText)) : null, this.renderItemAriaLive(), loading ? hAsync("calcite-scrim", { class: CSS$K.scrim, loading: loading }) : null, hAsync("table", { key: '8ec10bf4d2bc717bfd1a890f8d1b10ef360082ba', "aria-busy": toAriaBoolean(loading), "aria-label": label || "", class: CSS$K.table, onKeyDown: this.handleListKeydown, role: "treegrid" }, filterEnabled || hasFilterActionsStart || hasFilterActionsEnd ? (hAsync("thead", { class: CSS$K.sticky }, hAsync("tr", null, hAsync("th", { colSpan: MAX_COLUMNS }, hAsync("calcite-stack", { class: CSS$K.stack }, hAsync("slot", { name: SLOTS$g.filterActionsStart, onSlotchange: this.handleFilterActionsStartSlotChange, slot: SLOTS$h.actionsStart }), hAsync("calcite-filter", { "aria-label": filterPlaceholder, disabled: disabled, filterProps: filterProps, items: dataForFilter, onCalciteFilterChange: this.handleFilterChange, placeholder: filterPlaceholder, ref: this.setFilterEl, value: filterText }), hAsync("slot", { name: SLOTS$g.filterActionsEnd, onSlotchange: this.handleFilterActionsEndSlotChange, slot: SLOTS$h.actionsEnd })))))) : null, hAsync("tbody", { key: '041f22d407166644a92708c6b16216d39d7758dd', class: CSS$K.tableContainer }, hAsync("slot", { key: '7d6e2c379e29970871e3c59e357e55d3dcb375b4', onSlotchange: this.handleDefaultSlotChange }))), hAsync("div", { key: 'bc1188434808d29f8d2f3fe0f14748a03c505b48', "aria-live": "polite", "data-test-id": "no-results-container", hidden: !(hasFilterNoResults && filterEnabled && filterText && !filteredItems.length) }, hAsync("slot", { key: '9f68eada3e5fbc40be3d3cb9d05b672879c15512', name: SLOTS$g.filterNoResults, onSlotchange: this.handleFilterNoResultsSlotChange })))));
     }
     // --------------------------------------------------------------------------
     //
@@ -32728,7 +32579,6 @@ class ListItem {
     //
     // --------------------------------------------------------------------------
     connectedCallback() {
-        connectInteractive(this);
         connectLocalized(this);
         connectMessages(this);
         const { el } = this;
@@ -32747,7 +32597,6 @@ class ListItem {
         updateHostInteraction(this);
     }
     disconnectedCallback() {
-        disconnectInteractive(this);
         disconnectLocalized(this);
         disconnectMessages(this);
     }
@@ -32859,7 +32708,7 @@ class ListItem {
         const showBorder = selectionMode !== "none" && selectionAppearance === "border";
         const borderSelected = showBorder && selected;
         const borderUnselected = showBorder && !selected;
-        return (hAsync(Host, { key: 'e5c6ac9b3b611040a89e45804935c9c6e0edce2d' }, hAsync(InteractiveContainer, { key: '352c056d23f70ef0c5596e9bc447c57dad7523c9', disabled: disabled }, hAsync("div", { key: 'c19950786e18433c5197309442118d72806698a9', class: { [CSS$N.wrapper]: true, [CSS$N.wrapperBordered]: bordered } }, hAsync("tr", { key: 'a77a11612d4b15afdfe0146c2808312de96756bc', "aria-expanded": openable ? toAriaBoolean(open) : null, "aria-label": label, "aria-level": level, "aria-posinset": setPosition, "aria-selected": toAriaBoolean(selected), "aria-setsize": setSize, class: {
+        return (hAsync(Host, { key: 'd3d57f0deffcb931be4f582b7040702cea00f7db' }, hAsync(InteractiveContainer, { key: '0a0c99d15211ccbfb1a08483daf132d18935241a', disabled: disabled }, hAsync("div", { key: '34763beb5b2e7bbb6255a402052a78463faa6700', class: { [CSS$N.wrapper]: true, [CSS$N.wrapperBordered]: bordered } }, hAsync("tr", { key: '8d08d0433d7a320e07cb51367a03e8390cf6bfc6', "aria-expanded": openable ? toAriaBoolean(open) : null, "aria-label": label, "aria-level": level, "aria-posinset": setPosition, "aria-selected": toAriaBoolean(selected), "aria-setsize": setSize, class: {
                 [CSS$N.container]: true,
                 [CSS$N.containerHover]: true,
                 [CSS$N.containerBorder]: showBorder,
@@ -32985,15 +32834,9 @@ class ListItemGroup {
     //  Lifecycle
     //
     // --------------------------------------------------------------------------
-    connectedCallback() {
-        connectInteractive(this);
-    }
     componentDidRender() {
         updateHostInteraction(this);
     }
-    disconnectedCallback() {
-        disconnectInteractive(this);
-    }
     // --------------------------------------------------------------------------
     //
     //  Render Methods
@@ -33001,7 +32844,7 @@ class ListItemGroup {
     // --------------------------------------------------------------------------
     render() {
         const { disabled, heading } = this;
-        return (hAsync(Host, { key: '85b83e04247b94aa14924a0f835a1a998dea8a09' }, hAsync(InteractiveContainer, { key: 'd07a3dde8836dad2a905b4621fae3c6c2c3c3966', disabled: disabled }, hAsync("tr", { key: 'e0371d077ffca503468e60ea4906391eed32ae85', class: CSS$J.container }, hAsync("td", { key: '41a9ea1a58f0cd4b6daabee4a4b628184aff0cae', class: CSS$J.heading, colSpan: MAX_COLUMNS }, heading)), hAsync("slot", { key: '74dbc9667e9ac7b420a4584b80add4692b143a14', onSlotchange: this.handleDefaultSlotChange }))));
+        return (hAsync(Host, { key: '8f2d57a82cbd6e7ec0e7592b58af939ed6f87033' }, hAsync(InteractiveContainer, { key: '6d1c4b13105eabb667e0437e6a6f22368c5ec2dd', disabled: disabled }, hAsync("tr", { key: '78439c330e631d145a20fe420bb31d2540aa4892', class: CSS$J.container }, hAsync("td", { key: '13eb09720d9d85ad8fc8bb4890b28a37e73c116e', class: CSS$J.heading, colSpan: MAX_COLUMNS }, heading)), hAsync("slot", { key: 'c10bfe677c7e14acbb5a870e407c3fdc432b4187', onSlotchange: this.handleDefaultSlotChange }))));
     }
     get el() { return getElement(this); }
     static get style() { return CalciteListItemGroupStyle0; }
@@ -34222,7 +34065,7 @@ class OptionGroup {
 
 /**
  * Do not edit directly
- * Generated on Wed, 28 Aug 2024 03:13:58 GMT
+ * Generated on Fri, 30 Aug 2024 16:45:50 GMT
  */
 const calciteContainerSizeWidthXxs = {"min":"0","max":"320px"}; // Small handheld devices and mini-windows
 const calciteContainerSizeWidthXs = {"min":"321px","max":"476px"}; // Handheld devices
@@ -34783,7 +34626,6 @@ class Panel {
     //
     //--------------------------------------------------------------------------
     connectedCallback() {
-        connectInteractive(this);
         connectLocalized(this);
         connectMessages(this);
     }
@@ -34798,7 +34640,6 @@ class Panel {
         updateHostInteraction(this);
     }
     disconnectedCallback() {
-        disconnectInteractive(this);
         disconnectLocalized(this);
         disconnectMessages(this);
         this.resizeObserver?.disconnect();
@@ -34903,8 +34744,8 @@ class Panel {
     }
     render() {
         const { disabled, loading, panelKeyDownHandler, isClosed, closable } = this;
-        const panelNode = (hAsync("article", { key: '50e8c0bd158837c6c6666ceae7c269a16362ff76', "aria-busy": toAriaBoolean(loading), class: CSS$12.container, hidden: isClosed, ref: this.setContainerRef, tabIndex: closable ? 0 : -1 }, this.renderHeaderNode(), this.renderContent(), this.renderContentBottom(), this.renderFooterNode(), hAsync("slot", { key: "alerts", name: SLOTS$p.alerts, onSlotchange: this.handleAlertsSlotChange })));
-        return (hAsync(Host, { key: '171f25f4342aff6c7256cda01025f5191ad4c2c2', onKeyDown: panelKeyDownHandler }, hAsync(InteractiveContainer, { key: 'c26e8bc2d79ea63b7110f879d058024e6198e98e', disabled: disabled }, loading ? hAsync("calcite-scrim", { loading: loading }) : null, panelNode)));
+        const panelNode = (hAsync("article", { key: '75e2f5217d2154740df5c2398b913449efcf44a9', "aria-busy": toAriaBoolean(loading), class: CSS$12.container, hidden: isClosed, ref: this.setContainerRef, tabIndex: closable ? 0 : -1 }, this.renderHeaderNode(), this.renderContent(), this.renderContentBottom(), this.renderFooterNode(), hAsync("slot", { key: "alerts", name: SLOTS$p.alerts, onSlotchange: this.handleAlertsSlotChange })));
+        return (hAsync(Host, { key: '17b1381865b57fd68274d94e9fbf80a6a67c19fc', onKeyDown: panelKeyDownHandler }, hAsync(InteractiveContainer, { key: '9d880ae0e8cf66aba2eaeaa2e5e549d6d78be39a', disabled: disabled }, loading ? hAsync("calcite-scrim", { loading: loading }) : null, panelNode)));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return getElement(this); }
@@ -35357,11 +35198,9 @@ class PickList {
     connectedCallback() {
         initialize.call(this);
         initializeObserver.call(this);
-        connectInteractive(this);
     }
     disconnectedCallback() {
         cleanUpObserver.call(this);
-        disconnectInteractive(this);
     }
     componentWillLoad() {
         setUpLoadableComponent(this);
@@ -35430,7 +35269,7 @@ class PickList {
         return this.multiple ? ICON_TYPES$1.square : ICON_TYPES$1.circle;
     }
     render() {
-        return hAsync(List, { key: '870f354277bb55abb2c867ae250d85a8569505ec', onKeyDown: this.keyDownHandler, props: this });
+        return hAsync(List, { key: 'e4263b355c1ed5e577daaf243a73dabe67341d3c', onKeyDown: this.keyDownHandler, props: this });
     }
     get el() { return getElement(this); }
     static get style() { return CalcitePickListStyle0; }
@@ -35638,7 +35477,6 @@ class PickListItem {
     //
     // --------------------------------------------------------------------------
     connectedCallback() {
-        connectInteractive(this);
         connectLocalized(this);
         connectMessages(this);
         connectConditionalSlotComponent(this);
@@ -35651,7 +35489,6 @@ class PickListItem {
         setComponentLoaded(this);
     }
     disconnectedCallback() {
-        disconnectInteractive(this);
         disconnectLocalized(this);
         disconnectMessages(this);
         disconnectConditionalSlotComponent(this);
@@ -35708,7 +35545,7 @@ class PickListItem {
     }
     render() {
         const { description, label } = this;
-        return (hAsync(InteractiveContainer, { key: '11397cbf6035e4f15e4d180bbd97296af3e1cd29', disabled: this.disabled }, this.renderIcon(), this.renderActionsStart(), hAsync("label", { key: '0c61b5554c54e84fe097c7a52e64206032443d74', "aria-label": label, class: CSS$B.label, onClick: this.pickListClickHandler, onKeyDown: this.pickListKeyDownHandler, ref: (focusEl) => (this.focusEl = focusEl), tabIndex: 0 }, hAsync("div", { key: '8846e2bc50f2e12a57d7cfe885b3798c0d79c03c', "aria-checked": toAriaBoolean(this.selected), class: CSS$B.textContainer, role: "menuitemcheckbox" }, hAsync("span", { key: '79112c39b73b2453cec22e234cea66e4f8bb832d', class: CSS$B.title }, label), description ? hAsync("span", { class: CSS$B.description }, description) : null)), this.renderActionsEnd()));
+        return (hAsync(InteractiveContainer, { key: '57e66c1369a3f1a4caee6c443ee48ebc40648508', disabled: this.disabled }, this.renderIcon(), this.renderActionsStart(), hAsync("label", { key: '3fac517c19e5fb1a1ce90d66b397a6d9377b130e', "aria-label": label, class: CSS$B.label, onClick: this.pickListClickHandler, onKeyDown: this.pickListKeyDownHandler, ref: (focusEl) => (this.focusEl = focusEl), tabIndex: 0 }, hAsync("div", { key: '6453bd48adcf5f61bbab4935824577ef1c541f42', "aria-checked": toAriaBoolean(this.selected), class: CSS$B.textContainer, role: "menuitemcheckbox" }, hAsync("span", { key: '775f7d8ab9f90812960f1146cea0ec8f9eb7889c', class: CSS$B.title }, label), description ? hAsync("span", { class: CSS$B.description }, description) : null)), this.renderActionsEnd()));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return getElement(this); }
@@ -36492,7 +36329,6 @@ class RadioButton {
         if (this.name) {
             this.checkLastRadioButton();
         }
-        connectInteractive(this);
         connectLabel(this);
         connectForm(this);
         this.updateTabIndexOfOtherRadioButtonsInGroup();
@@ -36507,7 +36343,6 @@ class RadioButton {
         }
     }
     disconnectedCallback() {
-        disconnectInteractive(this);
         disconnectLabel(this);
         disconnectForm(this);
         this.updateTabIndexOfOtherRadioButtonsInGroup();
@@ -36522,7 +36357,7 @@ class RadioButton {
     // --------------------------------------------------------------------------
     render() {
         const tabIndex = this.getTabIndex();
-        return (hAsync(Host, { key: 'ba3eb165cc92980ff2dbc1ad92b96e05e67c7738', onClick: this.clickHandler, onKeyDown: this.handleKeyDown }, hAsync(InteractiveContainer, { key: 'cc34b939f2d7461239102e360d862e7b770b4f51', disabled: this.disabled }, hAsync("div", { key: '9fe5d157ecf61a7dfbb68b174c0a072cafa7fb93', "aria-checked": toAriaBoolean(this.checked), "aria-label": getLabelText(this), class: CSS$y.container, onBlur: this.onContainerBlur, onFocus: this.onContainerFocus, ref: this.setContainerEl, role: "radio", tabIndex: tabIndex }, hAsync("div", { key: '82e64cb36cd384a2b05b6768c996cba67490db48', class: "radio" })), hAsync(HiddenFormInputSlot, { key: 'aec9b59e49dbb867432a4fd006cf32db53306d1c', component: this }))));
+        return (hAsync(Host, { key: 'db719872f3b8583e04855147837388b10f5da4fd', onClick: this.clickHandler, onKeyDown: this.handleKeyDown }, hAsync(InteractiveContainer, { key: '8ca0f01b78d0eaae25231efd26bc2ba28f77b15c', disabled: this.disabled }, hAsync("div", { key: '3fe68e5db7f0fe2cfdc3059285e0f8645e798478', "aria-checked": toAriaBoolean(this.checked), "aria-label": getLabelText(this), class: CSS$y.container, onBlur: this.onContainerBlur, onFocus: this.onContainerFocus, ref: this.setContainerEl, role: "radio", tabIndex: tabIndex }, hAsync("div", { key: '35f5438745b7275e2cc501fef1dc53d931e17b00', class: "radio" })), hAsync(HiddenFormInputSlot, { key: 'c00ad1c9ca4d0ccf5ea2688a006dcd87adb36ee7', component: this }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -36830,7 +36665,6 @@ class Rating {
     //
     //--------------------------------------------------------------------------
     connectedCallback() {
-        connectInteractive(this);
         connectLocalized(this);
         connectMessages(this);
         connectLabel(this);
@@ -36868,7 +36702,6 @@ class Rating {
         setComponentLoaded(this);
     }
     disconnectedCallback() {
-        disconnectInteractive(this);
         disconnectLocalized(this);
         disconnectMessages(this);
         disconnectLabel(this);
@@ -36878,7 +36711,7 @@ class Rating {
         updateHostInteraction(this);
     }
     render() {
-        return (hAsync(Host, { key: '9c08ab0a8eee6854a1d88fd2ed538e1a95ce5d62', onKeyDown: this.handleHostKeyDown, onPointerOut: this.handleRatingPointerOut, onPointerOver: this.handleRatingPointerOver }, hAsync(InteractiveContainer, { key: 'fc3a022e1943f0e52eaba60423ac44eb58011326', disabled: this.disabled }, hAsync("span", { key: '89dba59e95b9bdc552d5557df7e7df32b71ac4e4', class: "wrapper" }, hAsync("fieldset", { key: '69a2c7a774dc7a19c15fd2e9b36f4da8f088b1ef', class: "fieldset", disabled: this.disabled }, hAsync("legend", { key: '9266db4c44647a70b367581bff35c67e0a5ba3be', class: "visually-hidden" }, this.messages.rating), this.starsMap.map(({ average, checked, fraction, hovered, id, partial, selected, value, tabIndex, }) => {
+        return (hAsync(Host, { key: '0ff4ea58dddbebd7ceb343f557361417f4a574dd', onKeyDown: this.handleHostKeyDown, onPointerOut: this.handleRatingPointerOut, onPointerOver: this.handleRatingPointerOver }, hAsync(InteractiveContainer, { key: '3416927456c4b6c8ccb8e7cc5d6fcdb8f3e9741d', disabled: this.disabled }, hAsync("span", { key: 'b7544344df9a6212750704106402d0af15836341', class: "wrapper" }, hAsync("fieldset", { key: '80ea0d15da4eefc8c57d01a9074e13beb06dff35', class: "fieldset", disabled: this.disabled }, hAsync("legend", { key: '32c0efc9513fbcf67cea4c3fa98cc32b8d3164a1', class: "visually-hidden" }, this.messages.rating), this.starsMap.map(({ average, checked, fraction, hovered, id, partial, selected, value, tabIndex, }) => {
             return (hAsync("label", { class: {
                     star: true,
                     selected,
@@ -36886,7 +36719,7 @@ class Rating {
                     average,
                     partial,
                 }, "data-value": value, htmlFor: id, onClick: this.handleLabelClick, onFocus: this.handleLabelFocus, onKeyDown: this.handleLabelKeyDown, onPointerDown: this.handleLabelPointerDown, onPointerOver: this.handleLabelPointerOver, ref: this.setLabelEl, tabIndex: tabIndex }, hAsync("input", { checked: checked, class: "visually-hidden", disabled: this.disabled || this.readOnly, id: id, name: this.guid, onChange: this.handleInputChange, tabIndex: -1, type: "radio", value: value }), hAsync(StarIcon, { full: selected || average, scale: this.scale }), partial && (hAsync("div", { class: "fraction", style: { width: `${fraction * 100}%` } }, hAsync(StarIcon, { full: true, partial: true, scale: this.scale }))), hAsync("span", { class: "visually-hidden" }, this.messages.stars.replace("{num}", `${value}`))));
-        }), (this.count || this.average) && this.showChip ? (hAsync("calcite-chip", { scale: this.scale, value: this.count?.toString() }, !!this.average && hAsync("span", { class: "number--average" }, this.average.toString()), !!this.count && hAsync("span", { class: "number--count" }, "(", this.count?.toString(), ")"))) : null), hAsync(HiddenFormInputSlot, { key: '80020e22ccaacc218647bf50d7a3aa6fbfadf5fb', component: this })))));
+        }), (this.count || this.average) && this.showChip ? (hAsync("calcite-chip", { scale: this.scale, value: this.count?.toString() }, !!this.average && hAsync("span", { class: "number--average" }, this.average.toString()), !!this.count && hAsync("span", { class: "number--count" }, "(", this.count?.toString(), ")"))) : null), hAsync(HiddenFormInputSlot, { key: '7d286cc17e662603da251822081c5739ff53f991', component: this })))));
     }
     //--------------------------------------------------------------------------
     //
@@ -37170,14 +37003,12 @@ class SegmentedControl {
         setComponentLoaded(this);
     }
     connectedCallback() {
-        connectInteractive(this);
         connectLabel(this);
         connectForm(this);
         this.mutationObserver?.observe(this.el, { childList: true });
         this.handleItemPropChange();
     }
     disconnectedCallback() {
-        disconnectInteractive(this);
         disconnectLabel(this);
         disconnectForm(this);
         this.mutationObserver?.unobserve(this.el);
@@ -37186,7 +37017,7 @@ class SegmentedControl {
         updateHostInteraction(this);
     }
     render() {
-        return (hAsync(Host, { key: '15d2892515a26a3d97657819a2f7e4ec1bfa132b', onClick: this.handleClick, role: "radiogroup" }, hAsync("div", { key: '5cf92b36bed0d722d548bbda4804fe3e2a8c0c6a', "aria-errormessage": IDS$2.validationMessage, "aria-invalid": toAriaBoolean(this.status === "invalid"), class: CSS$v.itemWrapper }, hAsync(InteractiveContainer, { key: '3cdc812ffe33a9651dd4308b8fe8db582e3055de', disabled: this.disabled }, hAsync("slot", { key: '4e81e1944e237c65f4bf06b8270a5c23f8c49bd3' }), hAsync(HiddenFormInputSlot, { key: 'b0ccbb1b76b295ab87912c43b0cbbb936c7fea6e', component: this }))), this.validationMessage && this.status === "invalid" ? (hAsync(Validation, { icon: this.validationIcon, id: IDS$2.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status })) : null));
+        return (hAsync(Host, { key: '59fae868b23c2cd140be6371e4d656fab36914a5', onClick: this.handleClick, role: "radiogroup" }, hAsync("div", { key: '49d51988eb849c6dcc3010c78b50d6f9e5a8d213', "aria-errormessage": IDS$2.validationMessage, "aria-invalid": toAriaBoolean(this.status === "invalid"), class: CSS$v.itemWrapper }, hAsync(InteractiveContainer, { key: '3456abd6c392419b250bb34a0cceb21b194708cd', disabled: this.disabled }, hAsync("slot", { key: '5cd1588182a4d656d91a5aa7494120f8e71cb425' }), hAsync(HiddenFormInputSlot, { key: '7a4327fafb9a6d9320ae93e07aa384d34347e52b', component: this }))), this.validationMessage && this.status === "invalid" ? (hAsync(Validation, { icon: this.validationIcon, id: IDS$2.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status })) : null));
     }
     handleSelected(event) {
         event.preventDefault();
@@ -37528,13 +37359,11 @@ class Select {
             subtree: true,
             childList: true,
         });
-        connectInteractive(this);
         connectLabel(this);
         connectForm(this);
     }
     disconnectedCallback() {
         this.mutationObserver?.disconnect();
-        disconnectInteractive(this);
         disconnectLabel(this);
         disconnectForm(this);
     }
@@ -37657,7 +37486,7 @@ class Select {
     }
     render() {
         const { disabled } = this;
-        return (hAsync(Host, { key: '70938120b9aaac3ab07b8bd73ca8e7909c2ea11d' }, hAsync(InteractiveContainer, { key: 'bd7b8839b27ff53f51d1a4fc2e3590b9fb8ab913', disabled: disabled }, hAsync("div", { key: '3dbf7d32dc39c929f7f939e1e1cc72ca6d0b386f', class: CSS$t.wrapper }, hAsync("select", { key: 'e6763a83fed5e7162d94d93e82e770dbbd238bd7', "aria-errormessage": IDS$1.validationMessage, "aria-invalid": toAriaBoolean(this.status === "invalid"), "aria-label": getLabelText(this), class: CSS$t.select, disabled: disabled, onChange: this.handleInternalSelectChange, ref: this.storeSelectRef }, hAsync("slot", { key: '68fc9d08be9144e1f874602ecdf46f3cc0eceb05' })), this.renderChevron(), hAsync(HiddenFormInputSlot, { key: '6d5ec3ed6f6d2551679a7e17c9023f32b67b4a2c', component: this })), this.validationMessage && this.status === "invalid" ? (hAsync(Validation, { icon: this.validationIcon, id: IDS$1.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
+        return (hAsync(Host, { key: 'e3005196b76adcf1bab48f99afa862b994067efe' }, hAsync(InteractiveContainer, { key: 'a4ac8fa5a1fb299a4e410adfe0311e04ca19fbe4', disabled: disabled }, hAsync("div", { key: '8291ccb006998e38013ca77edcef6808d5090432', class: CSS$t.wrapper }, hAsync("select", { key: 'f79cd49c07e9ec13e7a773fb6fb0ad2270f38120', "aria-errormessage": IDS$1.validationMessage, "aria-invalid": toAriaBoolean(this.status === "invalid"), "aria-label": getLabelText(this), class: CSS$t.select, disabled: disabled, onChange: this.handleInternalSelectChange, ref: this.storeSelectRef }, hAsync("slot", { key: '55ada23503d409979f444a86d223689d9b926ab2' })), this.renderChevron(), hAsync(HiddenFormInputSlot, { key: '7b714370521e7cdb9db463b3c4b92afb25d1f8fc', component: this })), this.validationMessage && this.status === "invalid" ? (hAsync(Validation, { icon: this.validationIcon, id: IDS$1.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -38213,7 +38042,7 @@ const SLOTS$7 = {
     header: "header",
 };
 
-const shellPanelCss = ":host{pointer-events:none;position:relative;display:flex;flex:0 1 auto;align-items:stretch;z-index:var(--calcite-shell-panel-z-index, var(--calcite-z-index));--calcite-shell-panel-detached-max-height:unset;--calcite-shell-panel-max-height:unset;--calcite-internal-shell-panel-shadow-block-start:0 4px 8px -1px rgba(0, 0, 0, 0.08),\n    0 2px 4px -1px rgba(0, 0, 0, 0.04);--calcite-internal-shell-panel-shadow-block-end:0 -4px 8px -1px rgba(0, 0, 0, 0.08),\n    0 -2px 4px -1px rgba(0, 0, 0, 0.04);--calcite-internal-shell-panel-shadow-inline-start:4px 0 8px -1px rgba(0, 0, 0, 0.08),\n    2px 0 4px -1px rgba(0, 0, 0, 0.04);--calcite-internal-shell-panel-shadow-inline-end:-4px 0 8px -1px rgba(0, 0, 0, 0.08),\n    -2px 0 4px -1px rgba(0, 0, 0, 0.04)}.calcite--rtl.content--overlay{--calcite-internal-shell-panel-shadow-inline-start:-4px 0 8px -1px rgba(0, 0, 0, 0.08),\n    -2px 0 4px -1px rgba(0, 0, 0, 0.04);--calcite-internal-shell-panel-shadow-inline-end:4px 0 8px -1px rgba(0, 0, 0, 0.08),\n    2px 0 4px -1px rgba(0, 0, 0, 0.04)}:host([layout=vertical]){z-index:var(--calcite-shell-panel-z-index, calc(var(--calcite-z-index) + 1))}:host([layout=vertical][display-mode=overlay]){z-index:var(--calcite-shell-panel-z-index, calc(var(--calcite-z-index-header) + 1))}:host([layout=vertical][display-mode=float-all]) .content{flex:2}:host([layout=vertical][width-scale=s]:not([display-mode=float-all])) .content{--calcite-internal-shell-panel-width:var(--calcite-shell-panel-width, 12vw);--calcite-internal-shell-panel-max-width:var(--calcite-shell-panel-max-width, 300px);--calcite-internal-shell-panel-min-width:var(--calcite-shell-panel-min-width, 150px)}:host([layout=vertical][width-scale=s][display-mode=float-all]) .content{--calcite-internal-shell-panel-width:var(--calcite-shell-panel-width, 12vw);--calcite-internal-shell-panel-min-width:var(--calcite-shell-panel-min-width, 150px)}:host([layout=vertical][width-scale=m]:not([display-mode=float-all])) .content{--calcite-internal-shell-panel-width:var(--calcite-shell-panel-width, 20vw);--calcite-internal-shell-panel-max-width:var(--calcite-shell-panel-max-width, 420px);--calcite-internal-shell-panel-min-width:var(--calcite-shell-panel-min-width, 240px)}:host([layout=vertical][width-scale=m][display-mode=float-all]) .content{--calcite-internal-shell-panel-width:var(--calcite-shell-panel-width, 20vw);--calcite-internal-shell-panel-min-width:var(--calcite-shell-panel-min-width, 240px)}:host([layout=vertical][width-scale=l]:not([display-mode=float-all])) .content{--calcite-internal-shell-panel-width:var(--calcite-shell-panel-width, 45vw);--calcite-internal-shell-panel-max-width:var(--calcite-shell-panel-max-width, 680px);--calcite-internal-shell-panel-min-width:var(--calcite-shell-panel-min-width, 340px)}:host([layout=vertical][width-scale=l][display-mode=float-all]) .content{--calcite-internal-shell-panel-width:var(--calcite-shell-panel-width, 45vw);--calcite-internal-shell-panel-min-width:var(--calcite-shell-panel-min-width, 340px)}:host([layout=horizontal][height-scale=s]) .content{--calcite-internal-shell-panel-max-height:var(\n    --calcite-shell-panel-max-height,\n    var(--calcite-shell-panel-detached-max-height, 20vh)\n  )}:host([layout=horizontal]) .content{--calcite-internal-shell-panel-min-height:var(--calcite-shell-panel-min-height, 5vh);--calcite-internal-shell-panel-max-height:var(\n    --calcite-shell-panel-max-height,\n    var(--calcite-shell-panel-detached-max-height, 30vh)\n  )}:host([layout=horizontal][height-scale=l]) .content{--calcite-internal-shell-panel-max-height:var(\n    --calcite-shell-panel-max-height,\n    var(--calcite-shell-panel-detached-max-height, 40vh)\n  )}.container{pointer-events:none;box-sizing:border-box;display:flex;flex:1 1 auto;align-items:stretch;background-color:transparent;font-size:var(--calcite-font-size--1);color:var(--calcite-color-text-2)}.container *{box-sizing:border-box}.container.float-all{margin-block:0.5rem;margin-inline:0.5rem}:host([layout=horizontal]) .container{flex-direction:column}:host(:hover) .separator:not(:hover):not(:focus),:host(:focus-within) .separator:not(:hover):not(:focus){opacity:1;background-color:var(--calcite-color-border-3)}.separator{pointer-events:auto;position:absolute;display:flex;background-color:transparent;opacity:0;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;cursor:col-resize;outline:none}.separator:hover{opacity:1;background-color:var(--calcite-color-border-2)}.separator:focus{background-color:var(--calcite-color-brand);opacity:1}:host([layout=vertical]) .separator{inset-block:0px;block-size:100%;inline-size:0.125rem;cursor:col-resize}:host([layout=horizontal][position=start]) .separator{inset-block-end:0px}:host([layout=horizontal][position=end]) .separator{inset-block-start:0px}:host([layout=horizontal]) .separator{inset-inline-end:0px;block-size:0.125rem;inline-size:100%;cursor:row-resize}:host([layout=vertical][position=start]) .separator{inset-inline-end:-2px}:host([layout=horizontal][position=start]) .separator{inset-block-end:-2px}:host([layout=vertical][position=end]) .separator{inset-inline-start:-2px}:host([layout=horizontal][position=end]) .separator{inset-block-start:-2px}::slotted(calcite-panel),::slotted(calcite-flow){block-size:100%;inline-size:100%;flex:1 1 auto;max-block-size:unset;max-inline-size:unset}::slotted(.calcite-match-height){display:flex;flex:1 1 auto;overflow:hidden}.content{pointer-events:auto;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;align-self:stretch;background-color:var(--calcite-color-background);padding:0px;transition:max-block-size var(--calcite-animation-timing), max-inline-size var(--calcite-animation-timing)}:host([layout=vertical]:not([display-mode=float-all])) .content{inline-size:var(--calcite-internal-shell-panel-width);max-inline-size:var(--calcite-internal-shell-panel-max-width);min-inline-size:var(--calcite-internal-shell-panel-min-width)}:host([layout=vertical][display-mode=float-all]) .content{inline-size:var(--calcite-internal-shell-panel-width);min-inline-size:var(--calcite-internal-shell-panel-min-width)}:host([layout=horizontal]) .content{block-size:var(--calcite-internal-shell-panel-height);max-block-size:var(--calcite-internal-shell-panel-max-height);min-block-size:var(--calcite-internal-shell-panel-min-height)}.content__header{display:flex;flex:0 1 auto;flex-direction:column;flex-wrap:nowrap;align-items:stretch}.content__body{display:flex;flex:1 1 auto;flex-direction:column;overflow:hidden}.content--overlay{position:absolute;--tw-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);--tw-shadow-colored:0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host([layout=vertical]) .content--overlay{inset-block-start:0px;block-size:100%}:host([layout=horizontal]) .content--overlay{inset-inline-start:0px;inline-size:100%}:host([layout=vertical][position=start]) .content--overlay{inset-inline-start:100%;box-shadow:var(--calcite-internal-shell-panel-shadow-inline-start)}:host([layout=vertical][position=end]) .content--overlay{inset-inline-end:100%;box-shadow:var(--calcite-internal-shell-panel-shadow-inline-end)}:host([layout=horizontal][position=start]) .content--overlay{inset-block-start:100%;box-shadow:var(--calcite-internal-shell-panel-shadow-block-start)}:host([layout=horizontal][position=end]) .content--overlay{inset-block-end:100%;box-shadow:var(--calcite-internal-shell-panel-shadow-block-end)}.float--content{margin-inline:0.5rem;margin-block:0.5rem auto;block-size:auto;overflow:hidden;border-radius:0.25rem;--tw-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);--tw-shadow-colored:0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);max-block-size:var(--calcite-internal-shell-panel-max-height, calc(100% - 1rem))}.float--content ::slotted(calcite-panel),.float--content ::slotted(calcite-flow){max-block-size:unset}:host([layout=horizontal]) .float--content{margin-block:0.5rem}:host([position=start]) .float--content ::slotted(calcite-panel),:host([position=start]) .float--content ::slotted(calcite-flow),:host([position=end]) .float--content ::slotted(calcite-panel),:host([position=end]) .float--content ::slotted(calcite-flow){border-style:none}.content[hidden]{display:none}slot[name=action-bar]::slotted(calcite-action-bar),.content ::slotted(calcite-flow),.content ::slotted(calcite-panel:not([closed])){border-width:1px;border-style:solid;border-color:var(--calcite-color-border-3)}:host([position=start]:not([slot=panel-end]):not([display-mode=float-all])) slot[name=action-bar]::slotted(calcite-action-bar),:host([position=start]:not([slot=panel-end]):not([display-mode=float-all])) .content ::slotted(calcite-flow),:host([position=start]:not([slot=panel-end]):not([display-mode=float-all])) .content ::slotted(calcite-panel),:host([position=end][slot=panel-start]) slot[name=action-bar]::slotted(calcite-action-bar),:host([position=end][slot=panel-start]) .content ::slotted(calcite-flow),:host([position=end][slot=panel-start]) .content ::slotted(calcite-panel){border-inline-start:none}:host([position=end]:not([slot=panel-start])) slot[name=action-bar]::slotted(calcite-action-bar),:host([position=end]:not([slot=panel-start])) .content ::slotted(calcite-flow),:host([position=end]:not([slot=panel-start])) .content ::slotted(calcite-panel),:host([position=start][slot=panel-end]) slot[name=action-bar]::slotted(calcite-action-bar),:host([position=start][slot=panel-end]) .content ::slotted(calcite-flow),:host([position=start][slot=panel-end]) .content ::slotted(calcite-panel){border-inline-end:none}:host([layout=horizontal]:not([display-mode=float-all])) slot[name=action-bar]::slotted(calcite-action-bar){border-inline:0}:host([layout=horizontal][position=start]:not([display-mode=float-all])) .content ::slotted(calcite-flow),:host([layout=horizontal][position=start]:not([display-mode=float-all])) .content ::slotted(calcite-panel){border-inline:0;border-block-start:0}:host([layout=horizontal][position=end]) .content ::slotted(calcite-flow),:host([layout=horizontal][position=end]) .content ::slotted(calcite-panel){border-inline:0;border-block-end:0}:host([hidden]){display:none}[hidden]{display:none}";
+const shellPanelCss = ":host{pointer-events:none;position:relative;display:flex;flex:0 1 auto;align-items:stretch;z-index:var(--calcite-shell-panel-z-index, var(--calcite-z-index));--calcite-shell-panel-detached-max-height:unset;--calcite-shell-panel-max-height:unset;--calcite-internal-shell-panel-shadow-block-start:0 4px 8px -1px rgba(0, 0, 0, 0.08),\n    0 2px 4px -1px rgba(0, 0, 0, 0.04);--calcite-internal-shell-panel-shadow-block-end:0 -4px 8px -1px rgba(0, 0, 0, 0.08),\n    0 -2px 4px -1px rgba(0, 0, 0, 0.04);--calcite-internal-shell-panel-shadow-inline-start:4px 0 8px -1px rgba(0, 0, 0, 0.08),\n    2px 0 4px -1px rgba(0, 0, 0, 0.04);--calcite-internal-shell-panel-shadow-inline-end:-4px 0 8px -1px rgba(0, 0, 0, 0.08),\n    -2px 0 4px -1px rgba(0, 0, 0, 0.04)}.calcite--rtl.content--overlay{--calcite-internal-shell-panel-shadow-inline-start:-4px 0 8px -1px rgba(0, 0, 0, 0.08),\n    -2px 0 4px -1px rgba(0, 0, 0, 0.04);--calcite-internal-shell-panel-shadow-inline-end:4px 0 8px -1px rgba(0, 0, 0, 0.08),\n    2px 0 4px -1px rgba(0, 0, 0, 0.04)}:host([layout=vertical]){z-index:var(--calcite-shell-panel-z-index, calc(var(--calcite-z-index) + 1))}:host([layout=vertical][display-mode=overlay]){z-index:var(--calcite-shell-panel-z-index, calc(var(--calcite-z-index-header) + 1))}:host([layout=vertical][display-mode=float-all]) .content{flex:2}:host([layout=vertical][width-scale=s]:not([display-mode=float-all])) .content{--calcite-internal-shell-panel-width:var(--calcite-shell-panel-width, 12vw);--calcite-internal-shell-panel-max-width:var(--calcite-shell-panel-max-width, 300px);--calcite-internal-shell-panel-min-width:var(--calcite-shell-panel-min-width, 150px)}:host([layout=vertical][width-scale=s][display-mode=float-all]) .content{--calcite-internal-shell-panel-width:var(--calcite-shell-panel-width, 12vw);--calcite-internal-shell-panel-min-width:var(--calcite-shell-panel-min-width, 150px)}:host([layout=vertical][width-scale=m]:not([display-mode=float-all])) .content{--calcite-internal-shell-panel-width:var(--calcite-shell-panel-width, 20vw);--calcite-internal-shell-panel-max-width:var(--calcite-shell-panel-max-width, 420px);--calcite-internal-shell-panel-min-width:var(--calcite-shell-panel-min-width, 240px)}:host([layout=vertical][width-scale=m][display-mode=float-all]) .content{--calcite-internal-shell-panel-width:var(--calcite-shell-panel-width, 20vw);--calcite-internal-shell-panel-min-width:var(--calcite-shell-panel-min-width, 240px)}:host([layout=vertical][width-scale=l]:not([display-mode=float-all])) .content{--calcite-internal-shell-panel-width:var(--calcite-shell-panel-width, 45vw);--calcite-internal-shell-panel-max-width:var(--calcite-shell-panel-max-width, 680px);--calcite-internal-shell-panel-min-width:var(--calcite-shell-panel-min-width, 340px)}:host([layout=vertical][width-scale=l][display-mode=float-all]) .content{--calcite-internal-shell-panel-width:var(--calcite-shell-panel-width, 45vw);--calcite-internal-shell-panel-min-width:var(--calcite-shell-panel-min-width, 340px)}:host([layout=horizontal][height-scale=s]) .content{--calcite-internal-shell-panel-max-height:var(\n    --calcite-shell-panel-max-height,\n    var(--calcite-shell-panel-detached-max-height, 20vh)\n  )}:host([layout=horizontal]) .content{--calcite-internal-shell-panel-min-height:var(--calcite-shell-panel-min-height, 5vh);--calcite-internal-shell-panel-max-height:var(\n    --calcite-shell-panel-max-height,\n    var(--calcite-shell-panel-detached-max-height, 30vh)\n  )}:host([layout=horizontal][height-scale=l]) .content{--calcite-internal-shell-panel-max-height:var(\n    --calcite-shell-panel-max-height,\n    var(--calcite-shell-panel-detached-max-height, 40vh)\n  )}.container{pointer-events:none;box-sizing:border-box;display:flex;block-size:100%;flex:1 1 auto;align-items:stretch;background-color:transparent;font-size:var(--calcite-font-size--1);color:var(--calcite-color-text-2)}.container *{box-sizing:border-box}.container.float-all{margin-block:0.5rem;margin-inline:0.5rem}:host([layout=horizontal]) .container{block-size:auto;inline-size:100%;flex-direction:column}:host(:hover) .separator:not(:hover):not(:focus),:host(:focus-within) .separator:not(:hover):not(:focus){opacity:1;background-color:var(--calcite-color-border-3)}.separator{pointer-events:auto;position:absolute;display:flex;background-color:transparent;opacity:0;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;cursor:col-resize;outline:none}.separator:hover{opacity:1;background-color:var(--calcite-color-border-2)}.separator:focus{background-color:var(--calcite-color-brand);opacity:1}:host([layout=vertical]) .separator{inset-block:0px;block-size:100%;inline-size:0.125rem;cursor:col-resize}:host([layout=horizontal][position=start]) .separator{inset-block-end:0px}:host([layout=horizontal][position=end]) .separator{inset-block-start:0px}:host([layout=horizontal]) .separator{inset-inline-end:0px;block-size:0.125rem;inline-size:100%;cursor:row-resize}:host([layout=vertical][position=start]) .separator{inset-inline-end:-2px}:host([layout=horizontal][position=start]) .separator{inset-block-end:-2px}:host([layout=vertical][position=end]) .separator{inset-inline-start:-2px}:host([layout=horizontal][position=end]) .separator{inset-block-start:-2px}::slotted(calcite-panel),::slotted(calcite-flow){block-size:100%;inline-size:100%;flex:1 1 auto;max-block-size:unset;max-inline-size:unset}::slotted(.calcite-match-height){display:flex;flex:1 1 auto;overflow:hidden}.content{pointer-events:auto;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;align-self:stretch;background-color:var(--calcite-color-background);padding:0px;transition:max-block-size var(--calcite-animation-timing), max-inline-size var(--calcite-animation-timing)}:host([layout=vertical]:not([display-mode=float-all])) .content{inline-size:var(--calcite-internal-shell-panel-width);max-inline-size:var(--calcite-internal-shell-panel-max-width);min-inline-size:var(--calcite-internal-shell-panel-min-width)}:host([layout=vertical][display-mode=float-all]) .content{inline-size:var(--calcite-internal-shell-panel-width);min-inline-size:var(--calcite-internal-shell-panel-min-width)}:host([layout=horizontal]) .content{block-size:var(--calcite-internal-shell-panel-height);max-block-size:var(--calcite-internal-shell-panel-max-height);min-block-size:var(--calcite-internal-shell-panel-min-height)}.content__header{display:flex;flex:0 1 auto;flex-direction:column;flex-wrap:nowrap;align-items:stretch}.content__body{display:flex;flex:1 1 auto;flex-direction:column;overflow:hidden}.content--overlay{position:absolute;--tw-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);--tw-shadow-colored:0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host([layout=vertical]) .content--overlay{inset-block-start:0px;block-size:100%}:host([layout=horizontal]) .content--overlay{inset-inline-start:0px;inline-size:100%}:host([layout=vertical][position=start]) .content--overlay{inset-inline-start:100%;box-shadow:var(--calcite-internal-shell-panel-shadow-inline-start)}:host([layout=vertical][position=end]) .content--overlay{inset-inline-end:100%;box-shadow:var(--calcite-internal-shell-panel-shadow-inline-end)}:host([layout=horizontal][position=start]) .content--overlay{inset-block-start:100%;box-shadow:var(--calcite-internal-shell-panel-shadow-block-start)}:host([layout=horizontal][position=end]) .content--overlay{inset-block-end:100%;box-shadow:var(--calcite-internal-shell-panel-shadow-block-end)}.float--content{margin-inline:0.5rem;margin-block:0.5rem auto;block-size:auto;overflow:hidden;border-radius:0.25rem;--tw-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);--tw-shadow-colored:0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);max-block-size:var(--calcite-internal-shell-panel-max-height, calc(100% - 1rem))}.float--content ::slotted(calcite-panel),.float--content ::slotted(calcite-flow){max-block-size:unset}:host([layout=horizontal]) .float--content{margin-block:0.5rem}:host([position=start]) .float--content ::slotted(calcite-panel),:host([position=start]) .float--content ::slotted(calcite-flow),:host([position=end]) .float--content ::slotted(calcite-panel),:host([position=end]) .float--content ::slotted(calcite-flow){border-style:none}.content[hidden]{display:none}slot[name=action-bar]::slotted(calcite-action-bar),.content ::slotted(calcite-flow),.content ::slotted(calcite-panel:not([closed])){border-width:1px;border-style:solid;border-color:var(--calcite-color-border-3)}:host([position=start]:not([slot=panel-end]):not([display-mode=float-all])) slot[name=action-bar]::slotted(calcite-action-bar),:host([position=start]:not([slot=panel-end]):not([display-mode=float-all])) .content ::slotted(calcite-flow),:host([position=start]:not([slot=panel-end]):not([display-mode=float-all])) .content ::slotted(calcite-panel),:host([position=end][slot=panel-start]) slot[name=action-bar]::slotted(calcite-action-bar),:host([position=end][slot=panel-start]) .content ::slotted(calcite-flow),:host([position=end][slot=panel-start]) .content ::slotted(calcite-panel){border-inline-start:none}:host([position=end]:not([slot=panel-start])) slot[name=action-bar]::slotted(calcite-action-bar),:host([position=end]:not([slot=panel-start])) .content ::slotted(calcite-flow),:host([position=end]:not([slot=panel-start])) .content ::slotted(calcite-panel),:host([position=start][slot=panel-end]) slot[name=action-bar]::slotted(calcite-action-bar),:host([position=start][slot=panel-end]) .content ::slotted(calcite-flow),:host([position=start][slot=panel-end]) .content ::slotted(calcite-panel){border-inline-end:none}:host([layout=horizontal]:not([display-mode=float-all])) slot[name=action-bar]::slotted(calcite-action-bar){border-inline:0}:host([layout=horizontal][position=start]:not([display-mode=float-all])) .content ::slotted(calcite-flow),:host([layout=horizontal][position=start]:not([display-mode=float-all])) .content ::slotted(calcite-panel){border-inline:0;border-block-start:0}:host([layout=horizontal][position=end]) .content ::slotted(calcite-flow),:host([layout=horizontal][position=end]) .content ::slotted(calcite-panel){border-inline:0;border-block-end:0}:host([hidden]){display:none}[hidden]{display:none}";
 var CalciteShellPanelStyle0 = shellPanelCss;
 
 /**
@@ -38483,8 +38312,8 @@ class ShellPanel {
                     : null
             : null;
         const separatorNode = !collapsed && allowResizing ? (hAsync("div", { "aria-label": this.messages.resize, "aria-orientation": layout === "horizontal" ? "vertical" : "horizontal", "aria-valuemax": layout == "horizontal" ? contentHeightMax : contentWidthMax, "aria-valuemin": layout == "horizontal" ? contentHeightMin : contentWidthMin, "aria-valuenow": layout == "horizontal"
-                ? contentHeight ?? initialContentHeight
-                : contentWidth ?? initialContentWidth, class: CSS$p.separator, key: "separator", onKeyDown: this.separatorKeyDown, ref: this.connectSeparator, role: "separator", tabIndex: 0, "touch-action": "none" })) : null;
+                ? (contentHeight ?? initialContentHeight)
+                : (contentWidth ?? initialContentWidth), class: CSS$p.separator, key: "separator", onKeyDown: this.separatorKeyDown, ref: this.connectSeparator, role: "separator", tabIndex: 0, "touch-action": "none" })) : null;
         const getAnimationDir = () => {
             if (layout === "horizontal") {
                 return position === "start"
@@ -38840,7 +38669,6 @@ class Slider {
     //
     //--------------------------------------------------------------------------
     connectedCallback() {
-        connectInteractive(this);
         connectLocalized(this);
         this.setMinMaxFromValue();
         this.setValueFromMinMax();
@@ -38848,7 +38676,6 @@ class Slider {
         connectForm(this);
     }
     disconnectedCallback() {
-        disconnectInteractive(this);
         disconnectLabel(this);
         disconnectForm(this);
         disconnectLocalized(this);
@@ -38923,11 +38750,11 @@ class Slider {
                         left: `${mirror ? 100 - maxInterval : minInterval}%`,
                         right: `${mirror ? minInterval : 100 - maxInterval}%`,
                     };
-        return (hAsync(Host, { key: 'c0ebc9073b3609d1d47379b5efccbe31c68915ed', id: id, onKeyDown: this.handleKeyDown, onTouchStart: this.handleTouchStart }, hAsync(InteractiveContainer, { key: '1f6930631e4c83e5b47ae1d5c64c10dbe58ed8e7', disabled: this.disabled }, hAsync("div", { key: '09a30ae372ca5e52fde36a0a85adc76d14ca1461', "aria-label": getLabelText(this), class: {
+        return (hAsync(Host, { key: '1b0feb2288a0ea0667e0f73f87e81505620a53a3', id: id, onKeyDown: this.handleKeyDown, onTouchStart: this.handleTouchStart }, hAsync(InteractiveContainer, { key: '20d5c81ef57cf5ccd3f44e04c286bde85f655945', disabled: this.disabled }, hAsync("div", { key: 'adc3d8f8fb57fc3ff889be65b3a0de9993ac1eea', "aria-label": getLabelText(this), class: {
                 [CSS$o.container]: true,
                 [CSS$o.containerRange]: valueIsRange,
                 [`scale--${this.scale}`]: true,
-            } }, this.renderGraph(), hAsync("div", { key: 'e996119bc9bba42340d24b2dc8b2ad7daaf02e6e', class: CSS$o.track, ref: this.storeTrackRef }, hAsync("div", { key: 'fb768d8462137621d7a891d0767e2e27864307fc', class: CSS$o.trackRange, onPointerDown: this.onTrackPointerDown, style: trackRangePlacementStyles }), hAsync("div", { key: '408a0a05ef7503b1af724cfd95e3fb40f94bcbf8', class: CSS$o.ticks }, this.tickValues.map((tick) => {
+            } }, this.renderGraph(), hAsync("div", { key: 'ed46a311b7a1e80b09ffa52d9bbd384bb8ff84b4', class: CSS$o.track, ref: this.storeTrackRef }, hAsync("div", { key: 'b31df46ed1053b0a678578b1388dd2d00b6c99fb', class: CSS$o.trackRange, onPointerDown: this.onTrackPointerDown, style: trackRangePlacementStyles }), hAsync("div", { key: '91adb2948782334d9cdf4f73c1199e548d63574c', class: CSS$o.ticks }, this.tickValues.map((tick) => {
             const tickOffset = `${this.getUnitInterval(tick) * 100}%`;
             let activeTicks = false;
             if (fillPlacement === "start" || fillPlacement === "end") {
@@ -38947,7 +38774,7 @@ class Slider {
                     left: mirror ? "" : tickOffset,
                     right: mirror ? tickOffset : "",
                 } }, this.renderTickLabel(tick)));
-        }))), hAsync("div", { key: 'c511ee11206dadb2b23199708abf2d2703423559', class: CSS$o.thumbContainer }, minThumb, thumb, hAsync(HiddenFormInputSlot, { key: 'f6684d5f25ade745730db775a5e51298b5eb8048', component: this }))))));
+        }))), hAsync("div", { key: 'e75a58cfe219b65707908d7e2274deb949b6f604', class: CSS$o.thumbContainer }, minThumb, thumb, hAsync(HiddenFormInputSlot, { key: '641aa873c08278b8492163f611b7815cb10d86e7', component: this }))))));
     }
     renderThumb({ type, mirror, thumbPlacement, minInterval, maxInterval, }) {
         const isLabeled = type.includes("labeled");
@@ -39532,10 +39359,8 @@ class SortableList {
     connectedCallback() {
         this.setUpSorting();
         this.beginObserving();
-        connectInteractive(this);
     }
     disconnectedCallback() {
-        disconnectInteractive(this);
         disconnectSortableComponent(this);
         this.endObserving();
     }
@@ -39625,11 +39450,11 @@ class SortableList {
     render() {
         const { disabled, layout } = this;
         const horizontal = layout === "horizontal" || false;
-        return (hAsync(InteractiveContainer, { key: 'd88bb6eff8ac0c12fe058290a15b644f52b15efe', disabled: disabled }, hAsync("div", { key: '0ac98b39280cbe2f61103d5c2120a9822ccee243', class: {
+        return (hAsync(InteractiveContainer, { key: 'ca06679a5125fc9f898b266ec4cf7dd01d93188b', disabled: disabled }, hAsync("div", { key: '6fa3e204aa6dabed072c9fc7c98b636233140435', class: {
                 [CSS$n.container]: true,
                 [CSS$n.containerVertical]: !horizontal,
                 [CSS$n.containerHorizontal]: horizontal,
-            } }, hAsync("slot", { key: '9b2cc37a435d630ed79ad33ad95ff578ed701999' }))));
+            } }, hAsync("slot", { key: '5b7e125fa233a0b8f271bade912c9af3529eb918' }))));
     }
     get el() { return getElement(this); }
     static get style() { return CalciteSortableListStyle0; }
@@ -39717,9 +39542,6 @@ class SplitButton {
     //  Lifecycle
     //
     //--------------------------------------------------------------------------
-    connectedCallback() {
-        connectInteractive(this);
-    }
     componentWillLoad() {
         setUpLoadableComponent(this);
     }
@@ -39729,12 +39551,9 @@ class SplitButton {
     componentDidRender() {
         updateHostInteraction(this);
     }
-    disconnectedCallback() {
-        disconnectInteractive(this);
-    }
     render() {
         const buttonWidth = this.width === "auto" ? "auto" : "full";
-        return (hAsync(InteractiveContainer, { key: 'ee973a15275bc3f95af17c40a4b8badbe3462d79', disabled: this.disabled }, hAsync("div", { key: 'b2c812632a9ae8cd96060fcc6b22d052e957a9a7', class: CSS$m.container }, hAsync("calcite-button", { key: '03a34e04ae9efa7811f1ac9d701fb230de7200a9', appearance: this.appearance, disabled: this.disabled, "icon-end": this.primaryIconEnd ? this.primaryIconEnd : null, "icon-start": this.primaryIconStart ? this.primaryIconStart : null, iconFlipRtl: this.primaryIconFlipRtl ? this.primaryIconFlipRtl : null, kind: this.kind, label: this.primaryLabel, loading: this.loading, onClick: this.calciteSplitButtonPrimaryClickHandler, scale: this.scale, splitChild: "primary", type: "button", width: buttonWidth }, this.primaryText), hAsync("div", { key: '1a1cfc004949b54b56cbc0f3076fb48e678ab314', class: CSS$m.dividerContainer }, hAsync("div", { key: 'f38ecc61ec5712fe86924379347285977c285dc5', class: CSS$m.divider })), hAsync("calcite-dropdown", { key: '719ccb5e274a7ccd04855daa1a39be9781fdcb76', disabled: this.disabled, flipPlacements: this.flipPlacements, onClick: this.calciteSplitButtonSecondaryClickHandler, open: this.active, overlayPositioning: this.overlayPositioning, placement: this.placement, scale: this.scale, "width-scale": this.scale }, hAsync("calcite-button", { key: '098292b17056e7431adaadc843ecee4a9453bb7a', appearance: this.appearance, disabled: this.disabled, "icon-start": this.dropdownIcon, kind: this.kind, label: this.dropdownLabel, scale: this.scale, slot: "trigger", splitChild: "secondary", type: "button" }), hAsync("slot", { key: 'cc73b47cb462df04f3572bb68565513f8abfa8a0' })))));
+        return (hAsync(InteractiveContainer, { key: '14845b4360228ff8aba010ee85ba3d49c921fce3', disabled: this.disabled }, hAsync("div", { key: '628e989b6c3cf109f2d2b7f515cfa4b4f42fa4e3', class: CSS$m.container }, hAsync("calcite-button", { key: '6177782d26aae8b60978b21dfa66a44fde3a6216', appearance: this.appearance, disabled: this.disabled, "icon-end": this.primaryIconEnd ? this.primaryIconEnd : null, "icon-start": this.primaryIconStart ? this.primaryIconStart : null, iconFlipRtl: this.primaryIconFlipRtl ? this.primaryIconFlipRtl : null, kind: this.kind, label: this.primaryLabel, loading: this.loading, onClick: this.calciteSplitButtonPrimaryClickHandler, scale: this.scale, splitChild: "primary", type: "button", width: buttonWidth }, this.primaryText), hAsync("div", { key: 'cc9cbf0e38ca5fb1be1accba84268a3a33d624b2', class: CSS$m.dividerContainer }, hAsync("div", { key: '21170599428198ef40515ec57407aba27758f705', class: CSS$m.divider })), hAsync("calcite-dropdown", { key: 'e51ebf919c6cb283ab689654fd0469884c080739', disabled: this.disabled, flipPlacements: this.flipPlacements, onClick: this.calciteSplitButtonSecondaryClickHandler, open: this.active, overlayPositioning: this.overlayPositioning, placement: this.placement, scale: this.scale, "width-scale": this.scale }, hAsync("calcite-button", { key: '12ff26ed0de03de2414da7884c0e159d9eed5d67', appearance: this.appearance, disabled: this.disabled, "icon-start": this.dropdownIcon, kind: this.kind, label: this.dropdownLabel, scale: this.scale, slot: "trigger", splitChild: "secondary", type: "button" }), hAsync("slot", { key: '9fa4be0ea31a54fc2df37e4277cd4c10a4584d3a' })))));
     }
     get dropdownIcon() {
         return this.dropdownIconType === "chevron"
@@ -40318,7 +40137,6 @@ class StepperItem {
     //
     //--------------------------------------------------------------------------
     connectedCallback() {
-        connectInteractive(this);
         connectLocalized(this);
         connectMessages(this);
     }
@@ -40339,14 +40157,13 @@ class StepperItem {
         updateHostInteraction(this);
     }
     disconnectedCallback() {
-        disconnectInteractive(this);
         disconnectLocalized(this);
         disconnectMessages(this);
     }
     render() {
-        return (hAsync(Host, { key: 'f5ff885f8c94eb0a49e786a798ddfa9a4cadf3c8', "aria-current": this.selected ? "step" : "false", onClick: this.handleItemClick, onKeyDown: this.keyDownHandler, tabIndex: this.disabled ? -1 : 0 }, hAsync(InteractiveContainer, { key: '628ba67b4d9afdd89589803c8370b916ef2a64f4', disabled: this.disabled }, hAsync("div", { key: '0e5a38c093eb3f4d83901cab7528b47af683d0c2', class: CSS$j.container }, this.complete && (hAsync("span", { key: '0b8a733f8d8f5ea684477afaeb3bef9c75204eac', "aria-live": "polite", class: CSS$j.visuallyHidden }, this.messages.complete)), hAsync("div", { key: '33fda93666886ff0a4704a090142061b0710ea2c', class: CSS$j.stepperItemHeader, ref: (el) => (this.headerEl = el), tabIndex: 
+        return (hAsync(Host, { key: '26c49f2466341662f4f88d17e04f5908ec3eaabd', "aria-current": this.selected ? "step" : "false", onClick: this.handleItemClick, onKeyDown: this.keyDownHandler, tabIndex: this.disabled ? -1 : 0 }, hAsync(InteractiveContainer, { key: '0a88428bd7d8f497f7bc3f9e6c4f08be37f16464', disabled: this.disabled }, hAsync("div", { key: '3a0fad81f97bc4d38d064a6dbd1063c8115189df', class: CSS$j.container }, this.complete && (hAsync("span", { key: '3a86fd52637117758c9af8586644af124db17189', "aria-live": "polite", class: CSS$j.visuallyHidden }, this.messages.complete)), hAsync("div", { key: '5c1c1bb373229850960d9608d44216b331957f06', class: CSS$j.stepperItemHeader, ref: (el) => (this.headerEl = el), tabIndex: 
             /* additional tab index logic needed because of display: contents */
-            this.layout === "horizontal" && !this.disabled ? 0 : null }, this.icon ? this.renderIcon() : null, this.numbered ? (hAsync("div", { class: CSS$j.stepperItemNumber }, this.renderNumbers(), ".")) : null, hAsync("div", { key: '728402fe3cc024aa27080d0e5b26cad009dc0989', class: CSS$j.stepperItemHeaderText }, hAsync("span", { key: '1be0b998ddf355de099379c2a55d21e0ffe46610', class: CSS$j.stepperItemHeading }, this.heading), hAsync("span", { key: '20099dd36c9a72c5712b42761ecdf3592ea4a4e8', class: CSS$j.stepperItemDescription }, this.description))), hAsync("div", { key: 'be67567d400cfea65bf9fcc8950daff2eea80c8b', class: CSS$j.stepperItemContent }, hAsync("slot", { key: 'd0ccc7d7b5b7caa325a216c293aecfe6d3e983bb' }))))));
+            this.layout === "horizontal" && !this.disabled ? 0 : null }, this.icon ? this.renderIcon() : null, this.numbered ? (hAsync("div", { class: CSS$j.stepperItemNumber }, this.renderNumbers(), ".")) : null, hAsync("div", { key: '5a4c9f5796ac4bcd2940e48dd798f60e4d669b5a', class: CSS$j.stepperItemHeaderText }, hAsync("span", { key: 'ffd5308d3c71e6bfbb3b9f1e9723442f087b4da2', class: CSS$j.stepperItemHeading }, this.heading), hAsync("span", { key: '6b8f78366ec70b9f407949e3ed92164e2f297bd7', class: CSS$j.stepperItemDescription }, this.description))), hAsync("div", { key: '83c6c57e396761e571e1e53e22c9e8cdadfa8354', class: CSS$j.stepperItemContent }, hAsync("slot", { key: '68457bebc15aab7d2cd0fe3b8b9afbfb3e0141c4' }))))));
     }
     //--------------------------------------------------------------------------
     //
@@ -40445,7 +40262,7 @@ const CSS$i = {
     handle: "handle",
 };
 
-const switchCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host([scale=s]) .container{block-size:0.75rem}:host([scale=s]) .track{block-size:0.75rem;inline-size:1.5rem}:host([scale=s]) .handle{block-size:0.5rem;inline-size:0.5rem}:host([scale=m]) .container{block-size:1rem}:host([scale=m]) .track{block-size:1rem;inline-size:2rem}:host([scale=m]) .handle{block-size:0.75rem;inline-size:0.75rem}:host([scale=l]) .container{block-size:1.5rem}:host([scale=l]) .track{block-size:1.5rem;inline-size:3rem}:host([scale=l]) .handle{block-size:1.25rem;inline-size:1.25rem}:host{position:relative;display:inline-block;inline-size:auto;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:middle;tap-highlight-color:transparent}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{outline-width:0px}.track{pointer-events:none;position:relative;box-sizing:border-box;display:inline-block;border-radius:9999px;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-2);background-color:var(--calcite-color-foreground-2);vertical-align:top;outline-color:transparent}:host(:focus) .track{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.handle{pointer-events:none;position:absolute;display:block;border-radius:9999px;border-width:2px;border-style:solid;border-color:var(--calcite-color-border-input);background-color:var(--calcite-color-foreground-1);transition-property:all;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);inset-block-start:-1px;inset-inline:-1px auto}.container:hover .handle,:host(:focus) .handle{border-color:var(--calcite-color-brand);box-shadow:inset 0 0 0 1px var(--calcite-color-brand)}:host([checked]) .track{border-color:var(--calcite-color-brand-hover);background-color:var(--calcite-color-brand)}:host([checked]) .handle{border-color:var(--calcite-color-brand);inset-inline:auto -1px}:host([checked]) .container:hover .handle{border-color:var(--calcite-color-brand-hover);box-shadow:inset 0 0 0 1px var(--calcite-color-brand-hover)}@media (forced-colors: active){:host([checked]) .track{background-color:canvasText}}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}";
+const switchCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host([scale=s]) .container{block-size:0.75rem}:host([scale=s]) .track{block-size:0.75rem;inline-size:1.5rem}:host([scale=s]) .handle{block-size:0.5rem;inline-size:0.5rem}:host([scale=m]) .container{block-size:1rem}:host([scale=m]) .track{block-size:1rem;inline-size:2rem}:host([scale=m]) .handle{block-size:0.75rem;inline-size:0.75rem}:host([scale=l]) .container{block-size:1.5rem}:host([scale=l]) .track{block-size:1.5rem;inline-size:3rem}:host([scale=l]) .handle{block-size:1.25rem;inline-size:1.25rem}:host{position:relative;display:inline-block;inline-size:auto;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:middle;tap-highlight-color:transparent}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{outline-width:0px}.track{pointer-events:none;position:relative;box-sizing:border-box;display:inline-block;border-radius:9999px;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-2);background-color:var(--calcite-color-foreground-2);vertical-align:top;outline-color:transparent}.container:focus .track{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.handle{pointer-events:none;position:absolute;display:block;border-radius:9999px;border-width:2px;border-style:solid;border-color:var(--calcite-color-border-input);background-color:var(--calcite-color-foreground-1);transition-property:all;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);inset-block-start:-1px;inset-inline:-1px auto}.container:hover .handle,.container:focus .handle{border-color:var(--calcite-color-brand);box-shadow:inset 0 0 0 1px var(--calcite-color-brand)}:host([checked]) .track{border-color:var(--calcite-color-brand-hover);background-color:var(--calcite-color-brand)}:host([checked]) .handle{border-color:var(--calcite-color-brand);inset-inline:auto -1px}:host([checked]) .container:hover .handle{border-color:var(--calcite-color-brand-hover);box-shadow:inset 0 0 0 1px var(--calcite-color-brand-hover)}@media (forced-colors: active){:host([checked]) .track{background-color:canvasText}}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}";
 var CalciteSwitchStyle0 = switchCss;
 
 class Switch {
@@ -40509,7 +40326,6 @@ class Switch {
     //
     //--------------------------------------------------------------------------
     connectedCallback() {
-        connectInteractive(this);
         connectLabel(this);
         connectForm(this);
     }
@@ -40520,7 +40336,6 @@ class Switch {
         setComponentLoaded(this);
     }
     disconnectedCallback() {
-        disconnectInteractive(this);
         disconnectLabel(this);
         disconnectForm(this);
     }
@@ -40533,7 +40348,7 @@ class Switch {
     //
     // --------------------------------------------------------------------------
     render() {
-        return (hAsync(Host, { key: '2e5e3a9e0dcc88431502cd2bbea8323a1898ef9a', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, hAsync(InteractiveContainer, { key: '73c50c102fe522422e08835b653dc8651eca6bae', disabled: this.disabled }, hAsync("div", { key: 'f0020b33ecee02265dcd4d712f729638ccabb14e', "aria-checked": toAriaBoolean(this.checked), "aria-label": getLabelText(this), class: CSS$i.container, ref: this.setSwitchEl, role: "switch", tabIndex: 0 }, hAsync("div", { key: '03b2f583e888ea429025b74ca43b22a4dd957ee5', class: CSS$i.track }, hAsync("div", { key: '3045c61b33731f692ecf201cb6ffea2a164f6297', class: CSS$i.handle })), hAsync(HiddenFormInputSlot, { key: 'f1a1c1bda4e85b357936c962175e0942dc0b0001', component: this })))));
+        return (hAsync(Host, { key: '96dbfb5a84bc4fe9bccd946a10f14a302fdbe53f', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, hAsync(InteractiveContainer, { key: '985e0c7005a276fcac4a680b0a8c01f43729f8cf', disabled: this.disabled }, hAsync("div", { key: 'b207efb218b0e343ca81e5e0ff7340c758c7afad', "aria-checked": toAriaBoolean(this.checked), "aria-label": getLabelText(this), class: CSS$i.container, ref: this.setSwitchEl, role: "switch", tabIndex: 0 }, hAsync("div", { key: '5b9984c73068b5ecc688d0fddadb10b6573abe12', class: CSS$i.track }, hAsync("div", { key: 'ee7e926c7bca9614ee917e930b0321ca9aa04ef2', class: CSS$i.handle })), hAsync(HiddenFormInputSlot, { key: '671754a8379764d741c4fa318d54ee6fbd2308ef', component: this })))));
     }
     get el() { return getElement(this); }
     static get style() { return CalciteSwitchStyle0; }
@@ -41171,7 +40986,6 @@ class TabTitle {
     //
     //--------------------------------------------------------------------------
     connectedCallback() {
-        connectInteractive(this);
         connectLocalized(this);
         connectMessages(this);
         this.setupTextContentObserver();
@@ -41185,7 +40999,6 @@ class TabTitle {
             detail: this.el,
         }));
         this.resizeObserver?.disconnect();
-        disconnectInteractive(this);
         disconnectLocalized(this);
         disconnectMessages(this);
     }
@@ -41204,14 +41017,14 @@ class TabTitle {
     render() {
         const { el, closed } = this;
         const id = el.id || this.guid;
-        const iconStartEl = (hAsync("calcite-icon", { key: '20ea18dabdb4cabe8a032d0799f3c757bc90c91d', class: { [CSS$f.titleIcon]: true, [CSS$f.iconStart]: true }, flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: getIconScale(this.scale) }));
-        const iconEndEl = (hAsync("calcite-icon", { key: 'ebd3913a334a959e8962addd45e5077ee82f2ca8', class: { [CSS$f.titleIcon]: true, [CSS$f.iconEnd]: true }, flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: getIconScale(this.scale) }));
-        return (hAsync(Host, { key: '58a72fa4a6e961c3414dfe224a4e235892784707', "aria-controls": this.controls, "aria-selected": toAriaBoolean(this.selected), id: id, role: "tab", tabIndex: this.selected && !this.disabled ? 0 : -1 }, hAsync(InteractiveContainer, { key: 'fe7662ade3001579b664772b4672d6bebd06a82b', disabled: this.disabled }, hAsync("div", { key: 'ea226b71436922de6bae2e8e542ae0adf08add1b', class: {
+        const iconStartEl = (hAsync("calcite-icon", { key: '64fa92b612e8be997230698bd79e11de161a2e5d', class: { [CSS$f.titleIcon]: true, [CSS$f.iconStart]: true }, flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: getIconScale(this.scale) }));
+        const iconEndEl = (hAsync("calcite-icon", { key: '5c25e211c6614e630d0cea61da30ba99cd18b779', class: { [CSS$f.titleIcon]: true, [CSS$f.iconEnd]: true }, flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: getIconScale(this.scale) }));
+        return (hAsync(Host, { key: 'f35075c2c23e9cde98c50d65b91abccfafdc5d9a', "aria-controls": this.controls, "aria-selected": toAriaBoolean(this.selected), id: id, role: "tab", tabIndex: this.selected && !this.disabled ? 0 : -1 }, hAsync(InteractiveContainer, { key: '0ab2ccb83d503ae827cac3f11c0bdb23f6d1d6e5', disabled: this.disabled }, hAsync("div", { key: 'a34c4b57593abfae9716bfa1ed8f10419d48f2a4', class: {
                 [CSS$f.container]: true,
                 [CSS$f.containerBottom]: this.position === "bottom",
                 [CSS$f.iconPresent]: !!this.iconStart || !!this.iconEnd,
                 [CSS$f.scale(this.scale)]: true,
-            }, hidden: closed, ref: (el) => this.resizeObserver?.observe(el) }, hAsync("div", { key: '737609daa04d9dc18b46872c49b82cf211ba9b5a', class: { [CSS$f.content]: true, [CSS$f.contentHasText]: this.hasText } }, this.iconStart ? iconStartEl : null, hAsync("slot", { key: 'fb500a910e5c6bfcd8571e2d109331dd88f2544d' }), this.iconEnd ? iconEndEl : null), this.renderCloseButton(), hAsync("div", { key: '3fd13c6f459e05cea88c40809b7220369866a2b9', class: CSS$f.selectedIndicator })))));
+            }, hidden: closed, ref: (el) => this.resizeObserver?.observe(el) }, hAsync("div", { key: '3788ba906fffc7666c815e79406906a56f162e23', class: { [CSS$f.content]: true, [CSS$f.contentHasText]: this.hasText } }, this.iconStart ? iconStartEl : null, hAsync("slot", { key: '74a6116ba66f66ec6304797fde099ce893f6ed2c' }), this.iconEnd ? iconEndEl : null), this.renderCloseButton(), hAsync("div", { key: '1a75fd6e657a455aac81ec6bd6a39d10e0b86d7f', class: CSS$f.selectedIndicator })))));
     }
     renderCloseButton() {
         const { closable, messages } = this;
@@ -41784,7 +41597,6 @@ class TableCell {
     connectedCallback() {
         connectLocalized(this);
         connectMessages(this);
-        connectInteractive(this);
     }
     componentDidRender() {
         updateHostInteraction(this);
@@ -41792,7 +41604,6 @@ class TableCell {
     disconnectedCallback() {
         disconnectLocalized(this);
         disconnectMessages(this);
-        disconnectInteractive(this);
     }
     //--------------------------------------------------------------------------
     //
@@ -41824,7 +41635,7 @@ class TableCell {
         const staticCell = this.disabled ||
             (this.interactionMode === "static" &&
                 (!this.selectionCell || (this.selectionCell && this.parentRowType === "foot")));
-        return (hAsync(Host, { key: '4d52967c0b56ad11ae0cd2f2bcda584a4c32d7aa' }, hAsync(InteractiveContainer, { key: '38dc03f0b7b46647d55510c954da818991134923', disabled: this.disabled }, hAsync("td", { key: 'f33e06346894caae2199743b02b3d82d45227a9c', "aria-disabled": this.disabled, class: {
+        return (hAsync(Host, { key: 'dc9cf8fdc1323d4213de2bc9b620a141d21dc631' }, hAsync(InteractiveContainer, { key: '721db27326ddeadd06aa4a995aa6640e32490a01', disabled: this.disabled }, hAsync("td", { key: '8b3e60277f82d2378b906ed6168b5072c8787d00', "aria-disabled": this.disabled, class: {
                 [CSS$d.footerCell]: this.parentRowType === "foot",
                 [CSS$d.contentCell]: !this.numberCell && !this.selectionCell,
                 [CSS$d.numberCell]: this.numberCell,
@@ -41834,7 +41645,7 @@ class TableCell {
                 [CSS_UTILITY.rtl]: dir === "rtl",
                 [CSS$d.staticCell]: staticCell,
                 [this.parentRowAlignment]: this.parentRowAlignment === "start" || this.parentRowAlignment === "end",
-            }, colSpan: this.colSpan, onBlur: this.onContainerBlur, onFocus: this.onContainerFocus, ref: (el) => (this.containerEl = el), role: this.interactionMode === "interactive" ? "gridcell" : "cell", rowSpan: this.rowSpan, tabIndex: staticCell ? -1 : 0 }, (this.selectionCell || this.readCellContentsToAT) && (hAsync("span", { key: '09f8419edf6633fec643980debdab653cfa1aa18', "aria-hidden": true, "aria-live": this.focused ? "polite" : "off", class: CSS$d.assistiveText }, this.selectionCell && this.selectionText, this.readCellContentsToAT && !this.selectionCell && this.contentsText)), hAsync("slot", { key: '05f0410a867cb1cfab5a01b1d4e374002314493d', onSlotchange: this.updateScreenReaderContentsText })))));
+            }, colSpan: this.colSpan, onBlur: this.onContainerBlur, onFocus: this.onContainerFocus, ref: (el) => (this.containerEl = el), role: this.interactionMode === "interactive" ? "gridcell" : "cell", rowSpan: this.rowSpan, tabIndex: staticCell ? -1 : 0 }, (this.selectionCell || this.readCellContentsToAT) && (hAsync("span", { key: '8be446b32c7711f3df8a570d736fdc77cffde29d', "aria-hidden": true, "aria-live": this.focused ? "polite" : "off", class: CSS$d.assistiveText }, this.selectionCell && this.selectionText, this.readCellContentsToAT && !this.selectionCell && this.contentsText)), hAsync("slot", { key: 'eb62177d0d59a2777a050ba9234393070a086fd6', onSlotchange: this.updateScreenReaderContentsText })))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return getElement(this); }
@@ -42243,15 +42054,9 @@ class TableRow {
             this.updateCells();
         }
     }
-    connectedCallback() {
-        connectInteractive(this);
-    }
     componentDidRender() {
         updateHostInteraction(this);
     }
-    disconnectedCallback() {
-        disconnectInteractive(this);
-    }
     //--------------------------------------------------------------------------
     //
     //  Event Listeners
@@ -42300,7 +42105,7 @@ class TableRow {
         return this.rowType === "head" ? (hAsync("calcite-table-header", { alignment: "center", key: "numbered-head", numberCell: true, parentRowAlignment: this.alignment })) : this.rowType === "body" ? (hAsync("calcite-table-cell", { alignment: "center", key: "numbered-body", numberCell: true, parentRowAlignment: this.alignment }, this.positionSectionLocalized)) : (hAsync("calcite-table-cell", { alignment: "center", key: "numbered-foot", numberCell: true, parentRowAlignment: this.alignment }));
     }
     render() {
-        return (hAsync(Host, { key: 'e87804d55ad11b0bb5bce7e82f46c0893c40d623' }, hAsync(InteractiveContainer, { key: '22e502f4cecbf8b484bfd33de618f4be3f146c56', disabled: this.disabled }, hAsync("tr", { key: '6d266472e85be37383e24ebbc38bc0b272a881c1', "aria-disabled": this.disabled, "aria-rowindex": this.positionAll + 1, "aria-selected": this.selected, class: { [CSS$b.lastVisibleRow]: this.lastVisibleRow }, onKeyDown: this.keyDownHandler, ref: (el) => (this.tableRowEl = el) }, this.numbered && this.renderNumberedCell(), this.selectionMode !== "none" && this.renderSelectableCell(), hAsync("slot", { key: 'e481e637b8b2ac107d2eb57ebadf0d09c88da8db', onSlotchange: this.updateCells, ref: (el) => (this.tableRowSlotEl = el) })))));
+        return (hAsync(Host, { key: '24d9c6f09e384d21593949d88dba705a7084adb3' }, hAsync(InteractiveContainer, { key: 'f9ea6ac06b27e3f4e2ff72f7c1ea29508a48676c', disabled: this.disabled }, hAsync("tr", { key: 'e17b786785b6c2ab95d8f20b54d6886e9edba189', "aria-disabled": this.disabled, "aria-rowindex": this.positionAll + 1, "aria-selected": this.selected, class: { [CSS$b.lastVisibleRow]: this.lastVisibleRow }, onKeyDown: this.keyDownHandler, ref: (el) => (this.tableRowEl = el) }, this.numbered && this.renderNumberedCell(), this.selectionMode !== "none" && this.renderSelectableCell(), hAsync("slot", { key: '11e9a9edd5321143761632e8c3cdb7d16abc271c', onSlotchange: this.updateCells, ref: (el) => (this.tableRowSlotEl = el) })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -42629,7 +42434,6 @@ class TextArea {
     //
     //--------------------------------------------------------------------------
     connectedCallback() {
-        connectInteractive(this);
         connectLabel(this);
         connectForm(this);
         connectLocalized(this);
@@ -42647,7 +42451,6 @@ class TextArea {
         this.setTextAreaHeight();
     }
     disconnectedCallback() {
-        disconnectInteractive(this);
         disconnectLabel(this);
         disconnectForm(this);
         disconnectLocalized(this);
@@ -42656,20 +42459,20 @@ class TextArea {
     }
     render() {
         const hasFooter = this.startSlotHasElements || this.endSlotHasElements || !!this.maxLength;
-        return (hAsync(Host, { key: '4bcfac668585f0f53f839dd7040c10c86466f7ea' }, hAsync(InteractiveContainer, { key: '2731deb4f42e1ef61d5d53fbbba5fd267ba6ecc0', disabled: this.disabled }, hAsync("textarea", { key: '8746db6bd65da8641c449e1a3ab90371dd6a3aab', "aria-describedby": this.guid, "aria-errormessage": IDS.validationMessage, "aria-invalid": toAriaBoolean(this.status === "invalid" || this.isCharacterLimitExceeded()), "aria-label": getLabelText(this), autofocus: this.el.autofocus, class: {
+        return (hAsync(Host, { key: '98e9a196f99d52fd5b99f9620c064d9f8d715d25' }, hAsync(InteractiveContainer, { key: '979ec5f889c9706190cf27dab137315f4d178fc8', disabled: this.disabled }, hAsync("textarea", { key: 'bcc1ad37828bcdb71cba16bb7e291961ec3a7252', "aria-describedby": this.guid, "aria-errormessage": IDS.validationMessage, "aria-invalid": toAriaBoolean(this.status === "invalid" || this.isCharacterLimitExceeded()), "aria-label": getLabelText(this), autofocus: this.el.autofocus, class: {
                 [CSS$a.readOnly]: this.readOnly,
                 [CSS$a.textAreaInvalid]: this.isCharacterLimitExceeded(),
                 [CSS$a.footerSlotted]: this.endSlotHasElements && this.startSlotHasElements,
                 [CSS$a.blockSizeFull]: !hasFooter,
                 [CSS$a.borderColor]: !hasFooter,
-            }, cols: this.columns, disabled: this.disabled, name: this.name, onChange: this.handleChange, onInput: this.handleInput, placeholder: this.placeholder, readOnly: this.readOnly, ref: this.setTextAreaEl, required: this.required, rows: this.rows, value: this.value, wrap: this.wrap }), hAsync("span", { key: '18f5b2cc042e0072bf14585f097c59e033e90565', class: { [CSS$a.content]: true } }, hAsync("slot", { key: '5ad6ecb6e80821617067f206a2a96d1921ccd5f1', onSlotchange: this.contentSlotChangeHandler })), hAsync("footer", { key: 'bf75a8624f1d73bebfaf5a4dc9d49c4ffb9bdca0', class: {
+            }, cols: this.columns, disabled: this.disabled, name: this.name, onChange: this.handleChange, onInput: this.handleInput, placeholder: this.placeholder, readOnly: this.readOnly, ref: this.setTextAreaEl, required: this.required, rows: this.rows, value: this.value, wrap: this.wrap }), hAsync("span", { key: 'a7e161a32672211a80f13e9821ce8678ad196f09', class: { [CSS$a.content]: true } }, hAsync("slot", { key: '49d047f7123ad8e61a0857f055065ee1fe8d2cff', onSlotchange: this.contentSlotChangeHandler })), hAsync("footer", { key: 'b15140e1d364af8ee666c974bbf1795a96cedc74', class: {
                 [CSS$a.footer]: true,
                 [CSS$a.readOnly]: this.readOnly,
                 [CSS$a.hide]: !hasFooter,
-            }, ref: (el) => (this.footerEl = el) }, hAsync("div", { key: 'd16b1caa152ce0aeada636c9758b0424461c9123', class: {
+            }, ref: (el) => (this.footerEl = el) }, hAsync("div", { key: 'c25acf070ed86980cbdef3328805995f2bfe5a09', class: {
                 [CSS$a.container]: true,
                 [CSS$a.footerEndSlotOnly]: !this.startSlotHasElements && this.endSlotHasElements,
-            } }, hAsync("slot", { key: 'c488efe95fe4c0e7e83bb74644729f5ca864312b', name: SLOTS$4.footerStart, onSlotchange: (event) => (this.startSlotHasElements = slotChangeHasAssignedElement(event)) }), hAsync("slot", { key: 'c0228767e3af06d68a9a887b9d26e08c95fa8d05', name: SLOTS$4.footerEnd, onSlotchange: (event) => (this.endSlotHasElements = slotChangeHasAssignedElement(event)) })), this.renderCharacterLimit()), hAsync(HiddenFormInputSlot, { key: '4d1b9b4a7c7fb7f0ac12045d85798340a9e127ce', component: this }), this.isCharacterLimitExceeded() && (hAsync("span", { key: 'a89f7f1c087d7c6f6ae4e3a4f33869d169323d1b', "aria-hidden": true, "aria-live": "polite", class: CSS$a.assistiveText, id: this.guid }, this.replacePlaceHoldersInMessages())), this.validationMessage && this.status === "invalid" ? (hAsync(Validation, { icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
+            } }, hAsync("slot", { key: '582a55c98ccdb40dcf7d528bf62875537e8c3046', name: SLOTS$4.footerStart, onSlotchange: (event) => (this.startSlotHasElements = slotChangeHasAssignedElement(event)) }), hAsync("slot", { key: '8ce5d750d2b0625ccbe1da758b97e55efd015e54', name: SLOTS$4.footerEnd, onSlotchange: (event) => (this.endSlotHasElements = slotChangeHasAssignedElement(event)) })), this.renderCharacterLimit()), hAsync(HiddenFormInputSlot, { key: 'cba807ea14d827dfeebb8430f3336da65218d68d', component: this }), this.isCharacterLimitExceeded() && (hAsync("span", { key: 'f7503ad9e52f6902bf0e115ce5469df51f3cf0cb', "aria-hidden": true, "aria-live": "polite", class: CSS$a.assistiveText, id: this.guid }, this.replacePlaceHoldersInMessages())), this.validationMessage && this.status === "invalid" ? (hAsync(Validation, { icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
     }
     //--------------------------------------------------------------------------
     //
@@ -42903,15 +42706,9 @@ class Tile {
     //  Lifecycle
     //
     // --------------------------------------------------------------------------
-    connectedCallback() {
-        connectInteractive(this);
-    }
     componentDidLoad() {
         setComponentLoaded(this);
     }
-    disconnectedCallback() {
-        disconnectInteractive(this);
-    }
     componentDidRender() {
         updateHostInteraction(this);
     }
@@ -42989,7 +42786,7 @@ class Tile {
     }
     render() {
         const { disabled } = this;
-        return (hAsync(InteractiveContainer, { key: 'f865a9a77fa149a492adf4ccb7d620928ad1991e', disabled: disabled }, this.href ? (hAsync("calcite-link", { disabled: disabled, href: this.href }, this.renderTile())) : (this.renderTile())));
+        return (hAsync(InteractiveContainer, { key: '67397231371802b738a559481886905258dc374b', disabled: disabled }, this.href ? (hAsync("calcite-link", { disabled: disabled, href: this.href }, this.renderTile())) : (this.renderTile())));
     }
     get el() { return getElement(this); }
     static get style() { return CalciteTileStyle0; }
@@ -43125,7 +42922,6 @@ class TileGroup {
     //
     //--------------------------------------------------------------------------
     connectedCallback() {
-        connectInteractive(this);
         this.mutationObserver?.observe(this.el, { childList: true });
         this.updateTiles();
     }
@@ -43133,7 +42929,6 @@ class TileGroup {
         updateHostInteraction(this);
     }
     disconnectedCallback() {
-        disconnectInteractive(this);
         this.mutationObserver?.disconnect();
     }
     //--------------------------------------------------------------------------
@@ -43176,7 +42971,7 @@ class TileGroup {
     //--------------------------------------------------------------------------
     render() {
         const role = this.selectionMode === "none" || this.selectionMode === "multiple" ? "group" : "radiogroup";
-        return (hAsync(InteractiveContainer, { key: '85de45a7ce2b724d46e4e7a6456e94da0b34ddb9', disabled: this.disabled }, hAsync("div", { key: '97b55eb827e1bd60b999eb42483119ff32a364a1', "aria-label": this.label, class: CSS$8.container, role: role }, hAsync("slot", { key: 'ae45a8ec397c2a71c8e363eb4a37106b79807d6e', onSlotchange: this.updateTiles, ref: this.setSlotEl }))));
+        return (hAsync(InteractiveContainer, { key: '857312cdc8242d2a7db679075bf8f12b94d88f84', disabled: this.disabled }, hAsync("div", { key: 'a14b54eaa63c41c4ffcb26f8385b2cc18c78a7ee', "aria-label": this.label, class: CSS$8.container, role: role }, hAsync("slot", { key: '115384f75f7c3c103793c7c8fb40805b9949d13a', onSlotchange: this.updateTiles, ref: this.setSlotEl }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -43351,7 +43146,6 @@ class TileSelect {
     //--------------------------------------------------------------------------
     connectedCallback() {
         this.renderInput();
-        connectInteractive(this);
     }
     componentWillLoad() {
         setUpLoadableComponent(this);
@@ -43361,7 +43155,6 @@ class TileSelect {
     }
     disconnectedCallback() {
         this.input.parentNode.removeChild(this.input);
-        disconnectInteractive(this);
     }
     componentDidRender() {
         updateHostInteraction(this);
@@ -43394,7 +43187,7 @@ class TileSelect {
         const { checked, description, disabled, focused, heading, icon, inputAlignment, inputEnabled, width, iconFlipRtl, } = this;
         const isLargeVisual = heading && icon && !description;
         const renderIcon = Boolean(icon);
-        return (hAsync(InteractiveContainer, { key: 'fb4ce458ff761b577b3c588a7b2b17ab9db17927', disabled: disabled }, hAsync("div", { key: '3963753f3f75f8e063287f65819dbcc558e49b03', class: {
+        return (hAsync(InteractiveContainer, { key: 'd34cb1834c773504a630351fc90f265d266872a4', disabled: disabled }, hAsync("div", { key: '64a7e7f4033b965e4bc543a790f00c24515cf00d', class: {
                 checked,
                 container: true,
                 [CSS$7.description]: Boolean(description),
@@ -43411,7 +43204,7 @@ class TileSelect {
                 [CSS$7.largeVisual]: isLargeVisual,
                 [CSS$7.widthAuto]: width === "auto",
                 [CSS$7.widthFull]: width === "full",
-            } }, hAsync("div", { key: 'b4d6877710cb5da729a9e9f8e9ca0e1fbc6bbab0', class: { [CSS$7.tile]: true, [CSS$7.tileLargeVisual]: isLargeVisual } }, icon && (hAsync("div", { key: 'b44c56e0db0efe86143620701bfeed24ded091f4', class: { [CSS$7.icon]: renderIcon } }, hAsync("calcite-icon", { key: '756ffa642f294d7e0d7dbf947739d3d50f73480c', flipRtl: iconFlipRtl, icon: icon, scale: "l" }))), hAsync("div", { key: '9ab6110c94d707582dd9b1e0a2bbf0b852f87b89', class: CSS$7.tileContentContainer }, hAsync("div", { key: 'bf74512102c70a1716afc9ebc27ad7f3f5a18b3f', class: CSS$7.tileContent }, heading && hAsync("div", { key: '1359f1524bfa52f3f4b0620680cf9c62bcdafe6e', class: CSS$7.tileHeading }, heading), description && hAsync("div", { key: '01950e547acfe81b946fac0583df493a6f05ee8d', class: CSS$7.tileDescription }, description)))), hAsync("slot", { key: 'd9bbd06c7808673fad6480de536a7b153574956b' }))));
+            } }, hAsync("div", { key: '19d95921363014e65ed412616b7b11f6f45caabf', class: { [CSS$7.tile]: true, [CSS$7.tileLargeVisual]: isLargeVisual } }, icon && (hAsync("div", { key: '6e1e71f45091b09d66154f15cc9f675bf14c2ed8', class: { [CSS$7.icon]: renderIcon } }, hAsync("calcite-icon", { key: '285cd155c9ce566cf1fb62a8258fd9eea8e859dd', flipRtl: iconFlipRtl, icon: icon, scale: "l" }))), hAsync("div", { key: 'abde8bf3ba6c4a4828173c5c4b75874a09a56a7d', class: CSS$7.tileContentContainer }, hAsync("div", { key: '93d42b9e22a21491e5f1841163ee68b45ec88150', class: CSS$7.tileContent }, heading && hAsync("div", { key: '4e8163cbddc384383cbb2373d02248bad3436f18', class: CSS$7.tileHeading }, heading), description && hAsync("div", { key: '2cf411773c01e32f1a73cfd2bbef10895b50165a', class: CSS$7.tileDescription }, description)))), hAsync("slot", { key: '6a0d5b9e044bb4a6114ff641886340f93b67cc4f' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -43467,17 +43260,11 @@ class TileSelectGroup {
     //  Lifecycle
     //
     //--------------------------------------------------------------------------
-    connectedCallback() {
-        connectInteractive(this);
-    }
     componentDidRender() {
         updateHostInteraction(this);
     }
-    disconnectedCallback() {
-        disconnectInteractive(this);
-    }
     render() {
-        return (hAsync(InteractiveContainer, { key: '9813d93d9b1307cd39ca8e109ef99d876710b328', disabled: this.disabled }, hAsync("slot", { key: '1eec8241863a160777fd47f923996ba940c6de83' })));
+        return (hAsync(InteractiveContainer, { key: 'd5c5a6b13cf03ccf550af70f3654be884c8f8507', disabled: this.disabled }, hAsync("slot", { key: 'f0989f1aa6e91896544a3df2ca4b98387a4ad05d' })));
     }
     get el() { return getElement(this); }
     static get style() { return CalciteTileSelectGroupStyle0; }
@@ -45546,11 +45333,9 @@ class TreeItem {
             this.updateParentIsExpanded(this.parentTreeItem, expanded);
         }
         connectConditionalSlotComponent(this);
-        connectInteractive(this);
     }
     disconnectedCallback() {
         disconnectConditionalSlotComponent(this);
-        disconnectInteractive(this);
     }
     componentWillRender() {
         this.hasChildren = !!this.el.querySelector("calcite-tree");
@@ -45617,8 +45402,8 @@ class TreeItem {
         const isExpanded = this.updateAfterInitialRender && this.expanded;
         const { hasEndActions } = this;
         const slotNode = (hAsync("slot", { key: "actionsEndSlot", name: SLOTS$1.actionsEnd, onSlotchange: this.actionsEndSlotChangeHandler }));
-        const iconStartEl = (hAsync("calcite-icon", { key: '72784b82d479a4aa782b95bd198ded6f5e6e78a9', class: CSS$2.iconStart, flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: getIconScale(this.scale) }));
-        return (hAsync(Host, { key: '6671da841c7970480cc35c492ddcf0e486dc029f', "aria-checked": this.selectionMode === "multiple" ||
+        const iconStartEl = (hAsync("calcite-icon", { key: '2d9432e035b294828e307c1147b878de28c87e04', class: CSS$2.iconStart, flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: getIconScale(this.scale) }));
+        return (hAsync(Host, { key: '48580f43f184741dc98d2f62c0f26cf2cd1bdd34', "aria-checked": this.selectionMode === "multiple" ||
                 this.selectionMode === "multichildren" ||
                 this.selectionMode === "ancestors"
                 ? toAriaBoolean(this.selected)
@@ -45626,13 +45411,13 @@ class TreeItem {
                 this.selectionMode === "children" ||
                 this.selectionMode === "single-persist"
                 ? toAriaBoolean(this.selected)
-                : undefined, "calcite-hydrated-hidden": hidden, role: "treeitem", tabIndex: this.disabled ? -1 : 0 }, hAsync(InteractiveContainer, { key: '152e8d19db10b36fe8727be17f082d773fb4cf09', disabled: this.disabled }, hAsync("div", { key: '8c8733c4b1baac1848ec46a3b8820d1dabf5ac43', class: { [CSS$2.itemExpanded]: isExpanded } }, hAsync("div", { key: '6e3b101ca30ebe415a9733b6972c7dfae39df37f', class: CSS$2.nodeAndActionsContainer }, hAsync("div", { key: '285fbcc2d1539313c63aeff3f1d8c511c0a5b865', class: {
+                : undefined, "calcite-hydrated-hidden": hidden, role: "treeitem", tabIndex: this.disabled ? -1 : 0 }, hAsync(InteractiveContainer, { key: '3ad4488dd568fbf00838fc192e70cdaad3d99fa3', disabled: this.disabled }, hAsync("div", { key: '18bf9cf493ecd4aaa17e7805ab68accf7bc002b8', class: { [CSS$2.itemExpanded]: isExpanded } }, hAsync("div", { key: '4115ad202a87b50665434ecb0245a220aa79606e', class: CSS$2.nodeAndActionsContainer }, hAsync("div", { key: '9fd9600258566a745dc43af3b8342838784d0d7e', class: {
                 [CSS$2.nodeContainer]: true,
                 [CSS_UTILITY.rtl]: rtl,
-            }, "data-selection-mode": this.selectionMode, ref: (el) => (this.defaultSlotWrapper = el) }, chevron, itemIndicator, this.iconStart ? iconStartEl : null, checkbox ? checkbox : defaultSlotNode), hAsync("div", { key: '47ce5bcccc12bb85815706fdea4cf2c230fb9a44', class: CSS$2.actionsEnd, hidden: !hasEndActions, ref: (el) => (this.actionSlotWrapper = el) }, slotNode)), hAsync("div", { key: '3b307110b4ed213c3be5dcd923a05deafba1db5c', class: {
+            }, "data-selection-mode": this.selectionMode, ref: (el) => (this.defaultSlotWrapper = el) }, chevron, itemIndicator, this.iconStart ? iconStartEl : null, checkbox ? checkbox : defaultSlotNode), hAsync("div", { key: '27b2734a615e9932dcb5088f8d2a5621aa741dd0', class: CSS$2.actionsEnd, hidden: !hasEndActions, ref: (el) => (this.actionSlotWrapper = el) }, slotNode)), hAsync("div", { key: 'aba4eb47f3451073a7548e5351efd6e1afdfdac9', class: {
                 [CSS$2.childrenContainer]: true,
                 [CSS_UTILITY.rtl]: rtl,
-            }, "data-test-id": "calcite-tree-children", onClick: this.childrenClickHandler, role: this.hasChildren ? "group" : undefined }, hAsync("slot", { key: 'df26d502672e8ec2b946adcfe11e4115ae514887', name: SLOTS$1.children }))))));
+            }, "data-test-id": "calcite-tree-children", onClick: this.childrenClickHandler, role: this.hasChildren ? "group" : undefined }, hAsync("slot", { key: 'fcb8ae737761145e13e1e23382ccfbfe73ff01b6', name: SLOTS$1.children }))))));
     }
     //--------------------------------------------------------------------------
     //
@@ -45912,7 +45697,6 @@ class ValueList {
     //
     // --------------------------------------------------------------------------
     connectedCallback() {
-        connectInteractive(this);
         connectLocalized(this);
         connectMessages(this);
         initialize.call(this);
@@ -45931,7 +45715,6 @@ class ValueList {
         updateHostInteraction(this);
     }
     disconnectedCallback() {
-        disconnectInteractive(this);
         disconnectSortableComponent(this);
         disconnectLocalized(this);
         disconnectMessages(this);
@@ -46040,7 +45823,7 @@ class ValueList {
         event.stopPropagation();
     }
     render() {
-        return (hAsync(List, { key: '226659128d8b783ff03fabc4ad086291d3ec749c', onBlur: this.handleBlur, onFocusin: this.handleFocusIn, onKeyDown: this.keyDownHandler, props: this }));
+        return (hAsync(List, { key: '51b583eca497f54f5e262d937dad9a26670117e3', onBlur: this.handleBlur, onFocusin: this.handleFocusIn, onKeyDown: this.keyDownHandler, props: this }));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return getElement(this); }
@@ -46148,11 +45931,9 @@ class ValueListItem {
     // --------------------------------------------------------------------------
     connectedCallback() {
         connectConditionalSlotComponent(this);
-        connectInteractive(this);
     }
     disconnectedCallback() {
         disconnectConditionalSlotComponent(this);
-        disconnectInteractive(this);
     }
     componentWillLoad() {
         setUpLoadableComponent(this);
@@ -46211,7 +45992,7 @@ class ValueListItem {
         }
     }
     render() {
-        return (hAsync(Host, { key: '5800bb42bb126d69868f664845be9d912cc16a1e', id: this.el.id || this.guid }, hAsync(InteractiveContainer, { key: '3fd26470647b3ec37edaf80d83d8b74b4a0dbcb0', disabled: this.disabled }, this.renderHandle(), hAsync("calcite-pick-list-item", { key: '772821bab106c95accaa215e05164371760f2ac0', description: this.description, deselectDisabled: this.deselectDisabled, disabled: this.disabled, label: this.label, metadata: this.metadata, nonInteractive: this.nonInteractive, onCalciteListItemChange: this.handleSelectChange, ref: this.getPickListRef, removable: this.removable, selected: this.selected, value: this.value }, this.renderActionsStart(), this.renderActionsEnd()))));
+        return (hAsync(Host, { key: '379d734219cf2821ac3b1e923ac4161cb1efd433', id: this.el.id || this.guid }, hAsync(InteractiveContainer, { key: '1d1360d025fb61625e149635a92bddd4b6a62bff', disabled: this.disabled }, this.renderHandle(), hAsync("calcite-pick-list-item", { key: '7f10f8004a9c4a9d838399311393b099d078dd6b', description: this.description, deselectDisabled: this.deselectDisabled, disabled: this.disabled, label: this.label, metadata: this.metadata, nonInteractive: this.nonInteractive, onCalciteListItemChange: this.handleSelectChange, ref: this.getPickListRef, removable: this.removable, selected: this.selected, value: this.value }, this.renderActionsStart(), this.renderActionsEnd()))));
     }
     get el() { return getElement(this); }
     static get style() { return CalciteValueListItemStyle0; }