diff --git a/packages/calcite-components/src/assets/styles/includes.scss b/packages/calcite-components/src/assets/styles/includes.scss
index 30047710696..4032894b781 100644
--- a/packages/calcite-components/src/assets/styles/includes.scss
+++ b/packages/calcite-components/src/assets/styles/includes.scss
@@ -62,6 +62,10 @@
       @apply opacity-100;
     }
   }
+
+  .interaction-container {
+    display: contents;
+  }
 }
 
 // used for host-specific styling when the `disabled` mixin cannot be applied on the host (e.g., `display: contents`)
diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
index e13a2459e2f..f75b38aa453 100644
--- a/packages/calcite-components/src/components.d.ts
+++ b/packages/calcite-components/src/components.d.ts
@@ -4659,9 +4659,6 @@ export namespace Components {
           * Specifies the number of columns the component should span.
          */
         "colSpan": number;
-        /**
-          * When true, prevents user interaction.  Notes:  This prop should use the
-         */
         "disabled": boolean;
         /**
           * Use this property to override individual strings used by the component.
@@ -12090,9 +12087,6 @@ declare namespace LocalJSX {
           * Specifies the number of columns the component should span.
          */
         "colSpan"?: number;
-        /**
-          * When true, prevents user interaction.  Notes:  This prop should use the
-         */
         "disabled"?: boolean;
         /**
           * Use this property to override individual strings used by the component.
diff --git a/packages/calcite-components/src/components/action/action.tsx b/packages/calcite-components/src/components/action/action.tsx
index f6491fbb0c9..e32b50045fc 100644
--- a/packages/calcite-components/src/components/action/action.tsx
+++ b/packages/calcite-components/src/components/action/action.tsx
@@ -17,6 +17,7 @@ import {
   connectInteractive,
   disconnectInteractive,
   InteractiveComponent,
+  InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
 import {
@@ -308,24 +309,26 @@ export class Action
 
     return (
       <Host>
-        <button
-          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}
-          // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-          ref={(buttonEl): HTMLButtonElement => (this.buttonEl = buttonEl)}
-        >
-          {this.renderIconContainer()}
-          {this.renderTextContainer()}
-          {!icon && indicator && <div class={CSS.indicatorWithoutIcon} key="indicator-no-icon" />}
-        </button>
-        <slot name={SLOTS.tooltip} onSlotchange={this.handleTooltipSlotChange} />
-        {this.renderIndicatorText()}
+        <InteractiveContainer disabled={disabled}>
+          <button
+            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}
+            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+            ref={(buttonEl): HTMLButtonElement => (this.buttonEl = buttonEl)}
+          >
+            {this.renderIconContainer()}
+            {this.renderTextContainer()}
+            {!icon && indicator && <div class={CSS.indicatorWithoutIcon} key="indicator-no-icon" />}
+          </button>
+          <slot name={SLOTS.tooltip} onSlotchange={this.handleTooltipSlotChange} />
+          {this.renderIndicatorText()}
+        </InteractiveContainer>
       </Host>
     );
   }
diff --git a/packages/calcite-components/src/components/block/block.tsx b/packages/calcite-components/src/components/block/block.tsx
index b4c08e66dd4..1ae4072f4d6 100644
--- a/packages/calcite-components/src/components/block/block.tsx
+++ b/packages/calcite-components/src/components/block/block.tsx
@@ -21,6 +21,7 @@ import {
   connectInteractive,
   disconnectInteractive,
   InteractiveComponent,
+  InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
 import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
@@ -372,24 +373,26 @@ export class Block
 
     return (
       <Host>
-        <article
-          aria-busy={toAriaBoolean(loading)}
-          class={{
-            [CSS.container]: true,
-          }}
-        >
-          {headerNode}
-          <section
-            aria-labelledby={IDS.toggle}
-            class={CSS.content}
-            hidden={!open}
-            id={IDS.content}
-            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref={this.setTransitionEl}
+        <InteractiveContainer disabled={this.disabled}>
+          <article
+            aria-busy={toAriaBoolean(loading)}
+            class={{
+              [CSS.container]: true,
+            }}
           >
-            {this.renderScrim()}
-          </section>
-        </article>
+            {headerNode}
+            <section
+              aria-labelledby={IDS.toggle}
+              class={CSS.content}
+              hidden={!open}
+              id={IDS.content}
+              // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+              ref={this.setTransitionEl}
+            >
+              {this.renderScrim()}
+            </section>
+          </article>
+        </InteractiveContainer>
       </Host>
     );
   }
diff --git a/packages/calcite-components/src/components/button/button.tsx b/packages/calcite-components/src/components/button/button.tsx
index f9de70225ec..ec3f889c666 100644
--- a/packages/calcite-components/src/components/button/button.tsx
+++ b/packages/calcite-components/src/components/button/button.tsx
@@ -15,6 +15,7 @@ import {
   connectInteractive,
   disconnectInteractive,
   InteractiveComponent,
+  InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
 import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label";
@@ -272,35 +273,37 @@ export class Button
     );
 
     return (
-      <Tag
-        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.buttonPadding]: noStartEndIcons,
-          [CSS.buttonPaddingShrunk]: !noStartEndIcons,
-          [CSS.contentSlotted]: this.hasContent,
-          [CSS.iconStartEmpty]: !this.iconStart,
-          [CSS.iconEndEmpty]: !this.iconEnd,
-        }}
-        disabled={childElType === "button" ? this.disabled || this.loading : null}
-        href={childElType === "a" && this.href}
-        name={childElType === "button" && this.name}
-        onClick={this.handleClick}
-        rel={childElType === "a" && this.rel}
-        tabIndex={this.disabled ? -1 : null}
-        target={childElType === "a" && this.target}
-        title={this.tooltipText}
-        type={childElType === "button" && this.type}
-        // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-        ref={this.setChildEl}
-      >
-        {loaderNode}
-        {this.iconStart ? iconStartEl : null}
-        {this.hasContent ? contentEl : null}
-        {this.iconEnd ? iconEndEl : null}
-      </Tag>
+      <InteractiveContainer disabled={this.disabled}>
+        <Tag
+          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.buttonPadding]: noStartEndIcons,
+            [CSS.buttonPaddingShrunk]: !noStartEndIcons,
+            [CSS.contentSlotted]: this.hasContent,
+            [CSS.iconStartEmpty]: !this.iconStart,
+            [CSS.iconEndEmpty]: !this.iconEnd,
+          }}
+          disabled={childElType === "button" ? this.disabled || this.loading : null}
+          href={childElType === "a" && this.href}
+          name={childElType === "button" && this.name}
+          onClick={this.handleClick}
+          rel={childElType === "a" && this.rel}
+          tabIndex={this.disabled ? -1 : null}
+          target={childElType === "a" && this.target}
+          title={this.tooltipText}
+          type={childElType === "button" && this.type}
+          // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+          ref={this.setChildEl}
+        >
+          {loaderNode}
+          {this.iconStart ? iconStartEl : null}
+          {this.hasContent ? contentEl : null}
+          {this.iconEnd ? iconEndEl : null}
+        </Tag>
+      </InteractiveContainer>
     );
   }
 
diff --git a/packages/calcite-components/src/components/checkbox/checkbox.tsx b/packages/calcite-components/src/components/checkbox/checkbox.tsx
index 7199fff7cdf..503d8fb8ce8 100644
--- a/packages/calcite-components/src/components/checkbox/checkbox.tsx
+++ b/packages/calcite-components/src/components/checkbox/checkbox.tsx
@@ -21,6 +21,7 @@ import {
   connectInteractive,
   disconnectInteractive,
   InteractiveComponent,
+  InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
 import { isActivationKey } from "../../utils/key";
@@ -256,23 +257,25 @@ export class Checkbox
   render(): VNode {
     return (
       <Host onClick={this.clickHandler} onKeyDown={this.keyDownHandler}>
-        <div
-          aria-checked={toAriaBoolean(this.checked)}
-          aria-label={getLabelText(this)}
-          class="toggle"
-          onBlur={this.onToggleBlur}
-          onFocus={this.onToggleFocus}
-          role="checkbox"
-          tabIndex={this.disabled ? undefined : 0}
-          // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-          ref={(toggleEl) => (this.toggleEl = toggleEl)}
-        >
-          <svg aria-hidden="true" class="check-svg" viewBox="0 0 16 16">
-            <path d={this.getPath()} />
-          </svg>
-          <slot />
-        </div>
-        <HiddenFormInputSlot component={this} />
+        <InteractiveContainer disabled={this.disabled}>
+          <div
+            aria-checked={toAriaBoolean(this.checked)}
+            aria-label={getLabelText(this)}
+            class="toggle"
+            onBlur={this.onToggleBlur}
+            onFocus={this.onToggleFocus}
+            role="checkbox"
+            tabIndex={this.disabled ? undefined : 0}
+            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+            ref={(toggleEl) => (this.toggleEl = toggleEl)}
+          >
+            <svg aria-hidden="true" class="check-svg" viewBox="0 0 16 16">
+              <path d={this.getPath()} />
+            </svg>
+            <slot />
+          </div>
+          <HiddenFormInputSlot component={this} />
+        </InteractiveContainer>
       </Host>
     );
   }
diff --git a/packages/calcite-components/src/components/chip-group/chip-group.tsx b/packages/calcite-components/src/components/chip-group/chip-group.tsx
index 902c594e99e..5f33b1f8506 100644
--- a/packages/calcite-components/src/components/chip-group/chip-group.tsx
+++ b/packages/calcite-components/src/components/chip-group/chip-group.tsx
@@ -15,6 +15,7 @@ import {
   connectInteractive,
   disconnectInteractive,
   InteractiveComponent,
+  InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
 import { createObserver } from "../../utils/observers";
@@ -241,19 +242,22 @@ export class ChipGroup implements InteractiveComponent {
   render(): VNode {
     const role =
       this.selectionMode === "none" || this.selectionMode === "multiple" ? "group" : "radiogroup";
+    const { disabled } = this;
 
     return (
-      <div
-        aria-disabled={toAriaBoolean(this.disabled)}
-        aria-label={this.label}
-        class="container"
-        role={role}
-      >
-        <slot
-          onSlotchange={this.updateItems}
-          ref={(el) => (this.slotRefEl = el as HTMLSlotElement)}
-        />
-      </div>
+      <InteractiveContainer disabled={disabled}>
+        <div
+          aria-disabled={toAriaBoolean(disabled)}
+          aria-label={this.label}
+          class="container"
+          role={role}
+        >
+          <slot
+            onSlotchange={this.updateItems}
+            ref={(el) => (this.slotRefEl = el as HTMLSlotElement)}
+          />
+        </div>
+      </InteractiveContainer>
     );
   }
 }
diff --git a/packages/calcite-components/src/components/chip/chip.tsx b/packages/calcite-components/src/components/chip/chip.tsx
index af8ebdc3cc3..2f753088aba 100644
--- a/packages/calcite-components/src/components/chip/chip.tsx
+++ b/packages/calcite-components/src/components/chip/chip.tsx
@@ -39,6 +39,7 @@ import {
   connectInteractive,
   disconnectInteractive,
   InteractiveComponent,
+  InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
 import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
@@ -372,7 +373,8 @@ export class Chip
   }
 
   render(): VNode {
-    const disableInteraction = this.disabled || (!this.disabled && !this.interactive);
+    const { disabled } = this;
+    const disableInteraction = disabled || (!disabled && !this.interactive);
     const role =
       this.selectionMode === "multiple" && this.interactive
         ? "checkbox"
@@ -383,43 +385,45 @@ export class Chip
         : undefined;
     return (
       <Host>
-        <div
-          aria-checked={
-            this.selectionMode !== "none" && this.interactive
-              ? toAriaBoolean(this.selected)
-              : undefined
-          }
-          aria-disabled={disableInteraction ? toAriaBoolean(this.disabled) : undefined}
-          aria-label={this.label}
-          class={{
-            [CSS.container]: true,
-            [CSS.textSlotted]: this.hasText,
-            [CSS.imageSlotted]: this.hasImage,
-            [CSS.selectable]: this.selectionMode !== "none",
-            [CSS.multiple]: this.selectionMode === "multiple",
-            [CSS.closable]: this.closable,
-            [CSS.nonInteractive]: !this.interactive,
-            [CSS.isCircle]:
-              !this.closable &&
-              !this.hasText &&
-              (!this.icon || !this.hasImage) &&
-              (this.selectionMode === "none" ||
-                (!!this.selectionMode && this.selectionMode !== "multiple" && !this.selected)),
-          }}
-          onClick={this.handleEmittingEvent}
-          role={role}
-          tabIndex={disableInteraction ? -1 : 0}
-          // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-          ref={(el) => (this.containerEl = el)}
-        >
-          {this.selectionMode !== "none" && this.renderSelectionIcon()}
-          {this.renderChipImage()}
-          {this.icon && this.renderIcon()}
-          <span class={CSS.title}>
-            <slot />
-          </span>
-          {this.closable && this.renderCloseButton()}
-        </div>
+        <InteractiveContainer disabled={disabled}>
+          <div
+            aria-checked={
+              this.selectionMode !== "none" && this.interactive
+                ? toAriaBoolean(this.selected)
+                : undefined
+            }
+            aria-disabled={disableInteraction ? toAriaBoolean(disabled) : undefined}
+            aria-label={this.label}
+            class={{
+              [CSS.container]: true,
+              [CSS.textSlotted]: this.hasText,
+              [CSS.imageSlotted]: this.hasImage,
+              [CSS.selectable]: this.selectionMode !== "none",
+              [CSS.multiple]: this.selectionMode === "multiple",
+              [CSS.closable]: this.closable,
+              [CSS.nonInteractive]: !this.interactive,
+              [CSS.isCircle]:
+                !this.closable &&
+                !this.hasText &&
+                (!this.icon || !this.hasImage) &&
+                (this.selectionMode === "none" ||
+                  (!!this.selectionMode && this.selectionMode !== "multiple" && !this.selected)),
+            }}
+            onClick={this.handleEmittingEvent}
+            role={role}
+            tabIndex={disableInteraction ? -1 : 0}
+            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+            ref={(el) => (this.containerEl = el)}
+          >
+            {this.selectionMode !== "none" && this.renderSelectionIcon()}
+            {this.renderChipImage()}
+            {this.icon && this.renderIcon()}
+            <span class={CSS.title}>
+              <slot />
+            </span>
+            {this.closable && this.renderCloseButton()}
+          </div>
+        </InteractiveContainer>
       </Host>
     );
   }
diff --git a/packages/calcite-components/src/components/color-picker/color-picker.tsx b/packages/calcite-components/src/components/color-picker/color-picker.tsx
index 10b9ac3a549..c75030b44cd 100644
--- a/packages/calcite-components/src/components/color-picker/color-picker.tsx
+++ b/packages/calcite-components/src/components/color-picker/color-picker.tsx
@@ -49,6 +49,7 @@ import {
   connectInteractive,
   disconnectInteractive,
   InteractiveComponent,
+  InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
 import { isActivationKey } from "../../utils/key";
@@ -762,176 +763,178 @@ export class ColorPicker
     );
 
     return (
-      <div class={CSS.container}>
-        <div class={CSS.controlAndScope}>
-          <canvas
-            class={CSS.colorField}
-            onPointerDown={this.handleColorFieldPointerDown}
-            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref={this.initColorField}
-          />
-          <div
-            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.scope]: true, [CSS.colorFieldScope]: true }}
-            onKeyDown={this.handleColorFieldScopeKeyDown}
-            role="slider"
-            style={{
-              top: `${adjustedColorFieldScopeTop || 0}px`,
-              left: `${adjustedColorFieldScopeLeft || 0}px`,
-            }}
-            tabindex="0"
-            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref={this.storeColorFieldScope}
-          />
-        </div>
-        <div class={CSS.previewAndSliders}>
-          <calcite-color-picker-swatch class={CSS.preview} color={selectedColorInHex} scale="l" />
-          <div class={CSS.sliders}>
-            <div class={CSS.controlAndScope}>
-              <canvas
-                class={{ [CSS.slider]: true, [CSS.hueSlider]: true }}
-                onPointerDown={this.handleHueSliderPointerDown}
-                // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-                ref={this.initHueSlider}
-              />
-              <div
-                aria-label={messages.hue}
-                aria-valuemax={HSV_LIMITS.h}
-                aria-valuemin="0"
-                aria-valuenow={color?.round().hue() || DEFAULT_COLOR.round().hue()}
-                class={{ [CSS.scope]: true, [CSS.hueScope]: true }}
-                onKeyDown={this.handleHueScopeKeyDown}
-                role="slider"
-                style={{
-                  top: `${adjustedHueScopeTop}px`,
-                  left: `${adjustedHueScopeLeft}px`,
-                }}
-                tabindex="0"
-                // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-                ref={this.storeHueScope}
-              />
-            </div>
-            {alphaChannel ? (
+      <InteractiveContainer disabled={this.disabled}>
+        <div class={CSS.container}>
+          <div class={CSS.controlAndScope}>
+            <canvas
+              class={CSS.colorField}
+              onPointerDown={this.handleColorFieldPointerDown}
+              // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+              ref={this.initColorField}
+            />
+            <div
+              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.scope]: true, [CSS.colorFieldScope]: true }}
+              onKeyDown={this.handleColorFieldScopeKeyDown}
+              role="slider"
+              style={{
+                top: `${adjustedColorFieldScopeTop || 0}px`,
+                left: `${adjustedColorFieldScopeLeft || 0}px`,
+              }}
+              tabindex="0"
+              // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+              ref={this.storeColorFieldScope}
+            />
+          </div>
+          <div class={CSS.previewAndSliders}>
+            <calcite-color-picker-swatch class={CSS.preview} color={selectedColorInHex} scale="l" />
+            <div class={CSS.sliders}>
               <div class={CSS.controlAndScope}>
                 <canvas
-                  class={{ [CSS.slider]: true, [CSS.opacitySlider]: true }}
-                  onPointerDown={this.handleOpacitySliderPointerDown}
+                  class={{ [CSS.slider]: true, [CSS.hueSlider]: true }}
+                  onPointerDown={this.handleHueSliderPointerDown}
                   // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-                  ref={this.initOpacitySlider}
+                  ref={this.initHueSlider}
                 />
                 <div
-                  aria-label={messages.opacity}
-                  aria-valuemax={OPACITY_LIMITS.max}
-                  aria-valuemin={OPACITY_LIMITS.min}
-                  aria-valuenow={(color || DEFAULT_COLOR).round().alpha()}
-                  class={{ [CSS.scope]: true, [CSS.opacityScope]: true }}
-                  onKeyDown={this.handleOpacityScopeKeyDown}
+                  aria-label={messages.hue}
+                  aria-valuemax={HSV_LIMITS.h}
+                  aria-valuemin="0"
+                  aria-valuenow={color?.round().hue() || DEFAULT_COLOR.round().hue()}
+                  class={{ [CSS.scope]: true, [CSS.hueScope]: true }}
+                  onKeyDown={this.handleHueScopeKeyDown}
                   role="slider"
                   style={{
-                    top: `${adjustedOpacityScopeTop}px`,
-                    left: `${adjustedOpacityScopeLeft}px`,
+                    top: `${adjustedHueScopeTop}px`,
+                    left: `${adjustedHueScopeLeft}px`,
                   }}
                   tabindex="0"
                   // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-                  ref={this.storeOpacityScope}
+                  ref={this.storeHueScope}
                 />
               </div>
-            ) : null}
-          </div>
-        </div>
-        {noHex && noChannels ? null : (
-          <div
-            class={{
-              [CSS.controlSection]: true,
-              [CSS.section]: true,
-            }}
-          >
-            <div class={CSS.hexAndChannelsGroup}>
-              {noHex ? null : (
-                <div class={CSS.hexOptions}>
-                  <calcite-color-picker-hex-input
-                    allowEmpty={allowEmpty}
-                    alphaChannel={alphaChannel}
-                    class={CSS.control}
-                    messages={messages}
-                    numberingSystem={this.numberingSystem}
-                    onCalciteColorPickerHexInputChange={this.handleHexInputChange}
-                    scale={scale}
-                    value={selectedColorInHex}
+              {alphaChannel ? (
+                <div class={CSS.controlAndScope}>
+                  <canvas
+                    class={{ [CSS.slider]: true, [CSS.opacitySlider]: true }}
+                    onPointerDown={this.handleOpacitySliderPointerDown}
+                    // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+                    ref={this.initOpacitySlider}
+                  />
+                  <div
+                    aria-label={messages.opacity}
+                    aria-valuemax={OPACITY_LIMITS.max}
+                    aria-valuemin={OPACITY_LIMITS.min}
+                    aria-valuenow={(color || DEFAULT_COLOR).round().alpha()}
+                    class={{ [CSS.scope]: true, [CSS.opacityScope]: true }}
+                    onKeyDown={this.handleOpacityScopeKeyDown}
+                    role="slider"
+                    style={{
+                      top: `${adjustedOpacityScopeTop}px`,
+                      left: `${adjustedOpacityScopeLeft}px`,
+                    }}
+                    tabindex="0"
+                    // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+                    ref={this.storeOpacityScope}
                   />
                 </div>
-              )}
-              {noChannels ? null : (
-                <calcite-tabs
-                  class={{
-                    [CSS.colorModeContainer]: true,
-                    [CSS.splitSection]: true,
-                  }}
-                  scale={scale === "l" ? "m" : "s"}
-                >
-                  <calcite-tab-nav slot="title-group">
-                    {this.renderChannelsTabTitle("rgb")}
-                    {this.renderChannelsTabTitle("hsv")}
-                  </calcite-tab-nav>
-                  {this.renderChannelsTab("rgb")}
-                  {this.renderChannelsTab("hsv")}
-                </calcite-tabs>
-              )}
+              ) : null}
             </div>
           </div>
-        )}
-        {noSaved ? null : (
-          <div class={{ [CSS.savedColorsSection]: true, [CSS.section]: true }}>
-            <div class={CSS.header}>
-              <label>{messages.saved}</label>
-              <div class={CSS.savedColorsButtons}>
-                <calcite-button
-                  appearance="transparent"
-                  class={CSS.deleteColor}
-                  disabled={noColor}
-                  iconStart="minus"
-                  kind="neutral"
-                  label={messages.deleteColor}
-                  onClick={this.deleteColor}
-                  scale={scale}
-                  type="button"
-                />
-                <calcite-button
-                  appearance="transparent"
-                  class={CSS.saveColor}
-                  disabled={noColor}
-                  iconStart="plus"
-                  kind="neutral"
-                  label={messages.saveColor}
-                  onClick={this.saveColor}
-                  scale={scale}
-                  type="button"
-                />
-              </div>
-            </div>
-            {savedColors.length > 0 ? (
-              <div class={CSS.savedColors}>
-                {[
-                  ...savedColors.map((color) => (
-                    <calcite-color-picker-swatch
-                      class={CSS.savedColor}
-                      color={color}
-                      key={color}
-                      onClick={this.handleSavedColorSelect}
-                      onKeyDown={this.handleSavedColorKeyDown}
+          {noHex && noChannels ? null : (
+            <div
+              class={{
+                [CSS.controlSection]: true,
+                [CSS.section]: true,
+              }}
+            >
+              <div class={CSS.hexAndChannelsGroup}>
+                {noHex ? null : (
+                  <div class={CSS.hexOptions}>
+                    <calcite-color-picker-hex-input
+                      allowEmpty={allowEmpty}
+                      alphaChannel={alphaChannel}
+                      class={CSS.control}
+                      messages={messages}
+                      numberingSystem={this.numberingSystem}
+                      onCalciteColorPickerHexInputChange={this.handleHexInputChange}
                       scale={scale}
-                      tabIndex={0}
+                      value={selectedColorInHex}
                     />
-                  )),
-                ]}
+                  </div>
+                )}
+                {noChannels ? null : (
+                  <calcite-tabs
+                    class={{
+                      [CSS.colorModeContainer]: true,
+                      [CSS.splitSection]: true,
+                    }}
+                    scale={scale === "l" ? "m" : "s"}
+                  >
+                    <calcite-tab-nav slot="title-group">
+                      {this.renderChannelsTabTitle("rgb")}
+                      {this.renderChannelsTabTitle("hsv")}
+                    </calcite-tab-nav>
+                    {this.renderChannelsTab("rgb")}
+                    {this.renderChannelsTab("hsv")}
+                  </calcite-tabs>
+                )}
               </div>
-            ) : null}
-          </div>
-        )}
-      </div>
+            </div>
+          )}
+          {noSaved ? null : (
+            <div class={{ [CSS.savedColorsSection]: true, [CSS.section]: true }}>
+              <div class={CSS.header}>
+                <label>{messages.saved}</label>
+                <div class={CSS.savedColorsButtons}>
+                  <calcite-button
+                    appearance="transparent"
+                    class={CSS.deleteColor}
+                    disabled={noColor}
+                    iconStart="minus"
+                    kind="neutral"
+                    label={messages.deleteColor}
+                    onClick={this.deleteColor}
+                    scale={scale}
+                    type="button"
+                  />
+                  <calcite-button
+                    appearance="transparent"
+                    class={CSS.saveColor}
+                    disabled={noColor}
+                    iconStart="plus"
+                    kind="neutral"
+                    label={messages.saveColor}
+                    onClick={this.saveColor}
+                    scale={scale}
+                    type="button"
+                  />
+                </div>
+              </div>
+              {savedColors.length > 0 ? (
+                <div class={CSS.savedColors}>
+                  {[
+                    ...savedColors.map((color) => (
+                      <calcite-color-picker-swatch
+                        class={CSS.savedColor}
+                        color={color}
+                        key={color}
+                        onClick={this.handleSavedColorSelect}
+                        onKeyDown={this.handleSavedColorKeyDown}
+                        scale={scale}
+                        tabIndex={0}
+                      />
+                    )),
+                  ]}
+                </div>
+              ) : null}
+            </div>
+          )}
+        </div>
+      </InteractiveContainer>
     );
   }
 
diff --git a/packages/calcite-components/src/components/combobox-item/combobox-item.tsx b/packages/calcite-components/src/components/combobox-item/combobox-item.tsx
index 521694cd6d1..65bff31bb56 100644
--- a/packages/calcite-components/src/components/combobox-item/combobox-item.tsx
+++ b/packages/calcite-components/src/components/combobox-item/combobox-item.tsx
@@ -20,6 +20,7 @@ import {
   connectInteractive,
   disconnectInteractive,
   InteractiveComponent,
+  InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
 import { ComboboxChildElement } from "../combobox/interfaces";
@@ -223,10 +224,11 @@ export class ComboboxItem implements ConditionalSlotComponent, InteractiveCompon
   }
 
   render(): VNode {
+    const { disabled } = this;
     const isSingleSelect = isSingleLike(this.selectionMode);
-    const showDot = isSingleSelect && !this.disabled;
+    const showDot = isSingleSelect && !disabled;
     const defaultIcon = isSingleSelect ? "dot" : "check";
-    const iconPath = this.disabled ? "" : defaultIcon;
+    const iconPath = disabled ? "" : defaultIcon;
 
     const classes = {
       [CSS.label]: true,
@@ -238,17 +240,19 @@ export class ComboboxItem implements ConditionalSlotComponent, InteractiveCompon
 
     return (
       <Host aria-hidden="true">
-        <div
-          class={`container scale--${this.scale}`}
-          style={{ "--calcite-combobox-item-spacing-indent-multiplier": `${depth}` }}
-        >
-          <li class={classes} id={this.guid} onClick={this.itemClickHandler}>
-            {this.renderSelectIndicator(showDot, iconPath)}
-            {this.renderIcon(iconPath)}
-            <span class="title">{this.textLabel}</span>
-          </li>
-          {this.renderChildren()}
-        </div>
+        <InteractiveContainer disabled={disabled}>
+          <div
+            class={`container scale--${this.scale}`}
+            style={{ "--calcite-combobox-item-spacing-indent-multiplier": `${depth}` }}
+          >
+            <li class={classes} id={this.guid} onClick={this.itemClickHandler}>
+              {this.renderSelectIndicator(showDot, iconPath)}
+              {this.renderIcon(iconPath)}
+              <span class="title">{this.textLabel}</span>
+            </li>
+            {this.renderChildren()}
+          </div>
+        </InteractiveContainer>
       </Host>
     );
   }
diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx
index 187a7e839e9..cb7d81401a9 100644
--- a/packages/calcite-components/src/components/combobox/combobox.tsx
+++ b/packages/calcite-components/src/components/combobox/combobox.tsx
@@ -46,6 +46,7 @@ import {
   connectInteractive,
   disconnectInteractive,
   InteractiveComponent,
+  InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
 import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label";
@@ -1648,81 +1649,83 @@ export class Combobox
     const isClearable = !this.clearDisabled && this.value?.length > 0;
     return (
       <Host onClick={this.comboboxFocusHandler}>
-        <div
-          aria-autocomplete="list"
-          aria-controls={`${listboxUidPrefix}${guid}`}
-          aria-expanded={toAriaBoolean(open)}
-          aria-haspopup="listbox"
-          aria-label={getLabelText(this)}
-          aria-live="polite"
-          aria-owns={`${listboxUidPrefix}${guid}`}
-          class={{
-            wrapper: true,
-            "wrapper--single": singleSelectionMode || !this.selectedItems.length,
-            "wrapper--active": open,
-          }}
-          onClick={this.clickHandler}
-          onKeyDown={this.keyDownHandler}
-          role="combobox"
-          // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-          ref={this.setReferenceEl}
-        >
+        <InteractiveContainer disabled={this.disabled}>
           <div
+            aria-autocomplete="list"
+            aria-controls={`${listboxUidPrefix}${guid}`}
+            aria-expanded={toAriaBoolean(open)}
+            aria-haspopup="listbox"
+            aria-label={getLabelText(this)}
+            aria-live="polite"
+            aria-owns={`${listboxUidPrefix}${guid}`}
             class={{
-              "grid-input": true,
-              [CSS.selectionDisplayFit]: fitSelectionDisplay,
-              [CSS.selectionDisplaySingle]: singleSelectionDisplay,
+              wrapper: true,
+              "wrapper--single": singleSelectionMode || !this.selectedItems.length,
+              "wrapper--active": open,
             }}
-            ref={this.setChipContainerEl}
+            onClick={this.clickHandler}
+            onKeyDown={this.keyDownHandler}
+            role="combobox"
+            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+            ref={this.setReferenceEl}
           >
-            {this.renderIconStart()}
-            {!singleSelectionMode && !singleSelectionDisplay && this.renderChips()}
-            {!singleSelectionMode &&
-              !allSelectionDisplay && [
-                this.renderSelectedIndicatorChip(),
-                this.renderSelectedIndicatorChipCompact(),
-                this.renderAllSelectedIndicatorChip(),
-                this.renderAllSelectedIndicatorChipCompact(),
-              ]}
-            <label
-              class="screen-readers-only"
-              htmlFor={`${inputUidPrefix}${guid}`}
-              id={`${labelUidPrefix}${guid}`}
+            <div
+              class={{
+                "grid-input": true,
+                [CSS.selectionDisplayFit]: fitSelectionDisplay,
+                [CSS.selectionDisplaySingle]: singleSelectionDisplay,
+              }}
+              ref={this.setChipContainerEl}
             >
-              {label}
-            </label>
-            {this.renderInput()}
+              {this.renderIconStart()}
+              {!singleSelectionMode && !singleSelectionDisplay && this.renderChips()}
+              {!singleSelectionMode &&
+                !allSelectionDisplay && [
+                  this.renderSelectedIndicatorChip(),
+                  this.renderSelectedIndicatorChipCompact(),
+                  this.renderAllSelectedIndicatorChip(),
+                  this.renderAllSelectedIndicatorChipCompact(),
+                ]}
+              <label
+                class="screen-readers-only"
+                htmlFor={`${inputUidPrefix}${guid}`}
+                id={`${labelUidPrefix}${guid}`}
+              >
+                {label}
+              </label>
+              {this.renderInput()}
+            </div>
+            {isClearable ? (
+              <XButton
+                disabled={this.disabled}
+                key="close-button"
+                label={this.messages.clear}
+                scale={this.scale}
+              />
+            ) : null}
+            {this.renderIconEnd()}
           </div>
-          {isClearable ? (
-            <XButton
-              disabled={this.disabled}
-              key="close-button"
-              label={this.messages.clear}
+          <ul
+            aria-labelledby={`${labelUidPrefix}${guid}`}
+            aria-multiselectable="true"
+            class="screen-readers-only"
+            id={`${listboxUidPrefix}${guid}`}
+            role="listbox"
+            tabIndex={-1}
+          >
+            {this.renderListBoxOptions()}
+          </ul>
+          {this.renderFloatingUIContainer()}
+          <HiddenFormInputSlot component={this} />
+          {this.validationMessage ? (
+            <Validation
+              icon={this.validationIcon}
+              message={this.validationMessage}
               scale={this.scale}
+              status={this.status}
             />
           ) : null}
-          {this.renderIconEnd()}
-        </div>
-        <ul
-          aria-labelledby={`${labelUidPrefix}${guid}`}
-          aria-multiselectable="true"
-          class="screen-readers-only"
-          id={`${listboxUidPrefix}${guid}`}
-          role="listbox"
-          tabIndex={-1}
-        >
-          {this.renderListBoxOptions()}
-        </ul>
-        {this.renderFloatingUIContainer()}
-        <HiddenFormInputSlot component={this} />
-        {this.validationMessage ? (
-          <Validation
-            icon={this.validationIcon}
-            message={this.validationMessage}
-            scale={this.scale}
-            status={this.status}
-          />
-        ) : null}
+        </InteractiveContainer>
       </Host>
     );
   }
diff --git a/packages/calcite-components/src/components/date-picker-day/date-picker-day.tsx b/packages/calcite-components/src/components/date-picker-day/date-picker-day.tsx
index 6950429d70a..0a87d051fea 100644
--- a/packages/calcite-components/src/components/date-picker-day/date-picker-day.tsx
+++ b/packages/calcite-components/src/components/date-picker-day/date-picker-day.tsx
@@ -16,6 +16,7 @@ import {
   connectInteractive,
   disconnectInteractive,
   InteractiveComponent,
+  InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
 import { isActivationKey } from "../../utils/key";
@@ -168,14 +169,17 @@ export class DatePickerDay implements InteractiveComponent {
         onClick={this.onClick}
         onKeyDown={this.keyDownHandler}
         role="button"
+        tabIndex={this.active && !this.disabled ? 0 : -1}
       >
-        <div aria-hidden="true" class={{ "day-v-wrapper": true }}>
-          <div class="day-wrapper">
-            <span class="day">
-              <span class="text">{formattedDay}</span>
-            </span>
+        <InteractiveContainer disabled={this.disabled}>
+          <div aria-hidden="true" class={{ "day-v-wrapper": true }}>
+            <div class="day-wrapper">
+              <span class="day">
+                <span class="text">{formattedDay}</span>
+              </span>
+            </div>
           </div>
-        </div>
+        </InteractiveContainer>
       </Host>
     );
   }
@@ -185,17 +189,13 @@ export class DatePickerDay implements InteractiveComponent {
   }
 
   componentDidRender(): void {
-    updateHostInteraction(this, this.isTabbable);
+    updateHostInteraction(this);
   }
 
   disconnectedCallback(): void {
     disconnectInteractive(this);
   }
 
-  isTabbable(): boolean {
-    return this.active;
-  }
-
   //--------------------------------------------------------------------------
   //
   //  Private State/Props
diff --git a/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx b/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx
index a28f837fa4d..cf777e8ceb2 100644
--- a/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx
+++ b/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx
@@ -22,7 +22,11 @@ import {
   setUpLoadableComponent,
 } from "../../utils/loadable";
 import { getIconScale } from "../../utils/component";
-import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
+import {
+  InteractiveComponent,
+  InteractiveContainer,
+  updateHostInteraction,
+} from "../../utils/interactive";
 
 /**
  * @slot - A slot for adding text.
@@ -143,7 +147,7 @@ export class DropdownItem implements InteractiveComponent, LoadableComponent {
   }
 
   componentDidRender(): void {
-    updateHostInteraction(this, "managed");
+    updateHostInteraction(this);
   }
 
   render(): VNode {
@@ -206,28 +210,36 @@ export class DropdownItem implements InteractiveComponent, LoadableComponent {
       : "menuitem";
 
     const itemAria = selectionMode !== "none" ? toAriaBoolean(this.selected) : null;
+    const { disabled } = this;
 
     return (
-      <Host aria-checked={itemAria} aria-label={!href ? label : ""} role={itemRole} tabindex="0">
-        <div
-          class={{
-            [CSS.container]: true,
-            [CSS.containerLink]: !!href,
-            [`${CSS.container}--${scale}`]: true,
-            [CSS.containerMulti]: selectionMode === "multiple",
-            [CSS.containerSingle]: selectionMode === "single",
-            [CSS.containerNone]: selectionMode === "none",
-          }}
-        >
-          {selectionMode !== "none" ? (
-            <calcite-icon
-              class={CSS.icon}
-              icon={selectionMode === "multiple" ? "check" : "bullet-point"}
-              scale={getIconScale(this.scale)}
-            />
-          ) : null}
-          {contentEl}
-        </div>
+      <Host
+        aria-checked={itemAria}
+        aria-label={!href ? label : ""}
+        role={itemRole}
+        tabIndex={disabled ? -1 : 0}
+      >
+        <InteractiveContainer disabled={disabled}>
+          <div
+            class={{
+              [CSS.container]: true,
+              [CSS.containerLink]: !!href,
+              [`${CSS.container}--${scale}`]: true,
+              [CSS.containerMulti]: selectionMode === "multiple",
+              [CSS.containerSingle]: selectionMode === "single",
+              [CSS.containerNone]: selectionMode === "none",
+            }}
+          >
+            {selectionMode !== "none" ? (
+              <calcite-icon
+                class={CSS.icon}
+                icon={selectionMode === "multiple" ? "check" : "bullet-point"}
+                scale={getIconScale(this.scale)}
+              />
+            ) : null}
+            {contentEl}
+          </div>
+        </InteractiveContainer>
       </Host>
     );
   }
diff --git a/packages/calcite-components/src/components/dropdown/dropdown.tsx b/packages/calcite-components/src/components/dropdown/dropdown.tsx
index 475b879f9eb..536bf583ce2 100644
--- a/packages/calcite-components/src/components/dropdown/dropdown.tsx
+++ b/packages/calcite-components/src/components/dropdown/dropdown.tsx
@@ -36,6 +36,7 @@ import {
   connectInteractive,
   disconnectInteractive,
   InteractiveComponent,
+  InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
 import { isActivationKey } from "../../utils/key";
@@ -238,43 +239,45 @@ export class Dropdown
     const { open, guid } = this;
     return (
       <Host>
-        <div
-          class="calcite-trigger-container"
-          id={`${guid}-menubutton`}
-          onClick={this.openCalciteDropdown}
-          onKeyDown={this.keyDownHandler}
-          // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-          ref={this.setReferenceEl}
-        >
-          <slot
-            aria-controls={`${guid}-menu`}
-            aria-expanded={toAriaBoolean(open)}
-            aria-haspopup="menu"
-            name={SLOTS.dropdownTrigger}
-            onSlotchange={this.updateTriggers}
-          />
-        </div>
-        <div
-          aria-hidden={toAriaBoolean(!open)}
-          class="calcite-dropdown-wrapper"
-          // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-          ref={this.setFloatingEl}
-        >
+        <InteractiveContainer disabled={this.disabled}>
           <div
-            aria-labelledby={`${guid}-menubutton`}
-            class={{
-              ["calcite-dropdown-content"]: true,
-              [FloatingCSS.animation]: true,
-              [FloatingCSS.animationActive]: open,
-            }}
-            id={`${guid}-menu`}
-            role="menu"
+            class="calcite-trigger-container"
+            id={`${guid}-menubutton`}
+            onClick={this.openCalciteDropdown}
+            onKeyDown={this.keyDownHandler}
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref={this.setScrollerAndTransitionEl}
+            ref={this.setReferenceEl}
           >
-            <slot onSlotchange={this.updateGroups} />
+            <slot
+              aria-controls={`${guid}-menu`}
+              aria-expanded={toAriaBoolean(open)}
+              aria-haspopup="menu"
+              name={SLOTS.dropdownTrigger}
+              onSlotchange={this.updateTriggers}
+            />
           </div>
-        </div>
+          <div
+            aria-hidden={toAriaBoolean(!open)}
+            class="calcite-dropdown-wrapper"
+            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+            ref={this.setFloatingEl}
+          >
+            <div
+              aria-labelledby={`${guid}-menubutton`}
+              class={{
+                ["calcite-dropdown-content"]: true,
+                [FloatingCSS.animation]: true,
+                [FloatingCSS.animationActive]: open,
+              }}
+              id={`${guid}-menu`}
+              role="menu"
+              // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+              ref={this.setScrollerAndTransitionEl}
+            >
+              <slot onSlotchange={this.updateGroups} />
+            </div>
+          </div>
+        </InteractiveContainer>
       </Host>
     );
   }
diff --git a/packages/calcite-components/src/components/fab/fab.tsx b/packages/calcite-components/src/components/fab/fab.tsx
index 1170f5c5087..eef4bbb2bdd 100755
--- a/packages/calcite-components/src/components/fab/fab.tsx
+++ b/packages/calcite-components/src/components/fab/fab.tsx
@@ -4,6 +4,7 @@ import {
   connectInteractive,
   disconnectInteractive,
   InteractiveComponent,
+  InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
 import {
@@ -151,27 +152,29 @@ export class Fab implements InteractiveComponent, LoadableComponent {
     const title = !textEnabled ? label || text || null : null;
 
     return (
-      <calcite-button
-        appearance={appearance === "solid" ? "solid" : "outline-fill"}
-        class={CSS.button}
-        disabled={disabled}
-        iconFlipRtl={iconFlipRtl ? "start" : null}
-        iconStart={icon}
-        kind={kind}
-        label={label}
-        loading={loading}
-        round={true}
-        scale={scale}
-        title={title}
-        type="button"
-        width="auto"
-        // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-        ref={(buttonEl): void => {
-          this.buttonEl = buttonEl;
-        }}
-      >
-        {this.textEnabled ? this.text : null}
-      </calcite-button>
+      <InteractiveContainer disabled={disabled}>
+        <calcite-button
+          appearance={appearance === "solid" ? "solid" : "outline-fill"}
+          class={CSS.button}
+          disabled={disabled}
+          iconFlipRtl={iconFlipRtl ? "start" : null}
+          iconStart={icon}
+          kind={kind}
+          label={label}
+          loading={loading}
+          round={true}
+          scale={scale}
+          title={title}
+          type="button"
+          width="auto"
+          // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+          ref={(buttonEl): void => {
+            this.buttonEl = buttonEl;
+          }}
+        >
+          {this.textEnabled ? this.text : null}
+        </calcite-button>
+      </InteractiveContainer>
     );
   }
 }
diff --git a/packages/calcite-components/src/components/filter/filter.tsx b/packages/calcite-components/src/components/filter/filter.tsx
index f4cb2941de3..b36a4d839bf 100644
--- a/packages/calcite-components/src/components/filter/filter.tsx
+++ b/packages/calcite-components/src/components/filter/filter.tsx
@@ -3,7 +3,6 @@ import {
   Element,
   Event,
   EventEmitter,
-  Fragment,
   h,
   Method,
   Prop,
@@ -17,6 +16,7 @@ import {
   connectInteractive,
   disconnectInteractive,
   InteractiveComponent,
+  InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
 import {
@@ -266,7 +266,7 @@ export class Filter
     const { disabled, scale } = this;
 
     return (
-      <Fragment>
+      <InteractiveContainer disabled={disabled}>
         <div class={CSS.container}>
           <label>
             <calcite-input
@@ -288,7 +288,7 @@ export class Filter
             />
           </label>
         </div>
-      </Fragment>
+      </InteractiveContainer>
     );
   }
 }
diff --git a/packages/calcite-components/src/components/flow-item/flow-item.tsx b/packages/calcite-components/src/components/flow-item/flow-item.tsx
index 1f50037a258..8f7932f6a28 100644
--- a/packages/calcite-components/src/components/flow-item/flow-item.tsx
+++ b/packages/calcite-components/src/components/flow-item/flow-item.tsx
@@ -16,6 +16,7 @@ import {
   connectInteractive,
   disconnectInteractive,
   InteractiveComponent,
+  InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
 import {
@@ -346,36 +347,38 @@ export class FlowItem
     } = this;
     return (
       <Host>
-        <calcite-panel
-          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.handlePanelClose}
-          onCalcitePanelScroll={this.handlePanelScroll}
-          onCalcitePanelToggle={this.handlePanelToggle}
-          // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-          ref={this.setContainerRef}
-        >
-          {this.renderBackButton()}
-          <slot name={SLOTS.actionBar} slot={PANEL_SLOTS.actionBar} />
-          <slot name={SLOTS.headerActionsStart} slot={PANEL_SLOTS.headerActionsStart} />
-          <slot name={SLOTS.headerActionsEnd} slot={PANEL_SLOTS.headerActionsEnd} />
-          <slot name={SLOTS.headerContent} slot={PANEL_SLOTS.headerContent} />
-          <slot name={SLOTS.headerMenuActions} slot={PANEL_SLOTS.headerMenuActions} />
-          <slot name={SLOTS.fab} slot={PANEL_SLOTS.fab} />
-          <slot name={SLOTS.footerActions} slot={PANEL_SLOTS.footerActions} />
-          <slot name={SLOTS.footer} slot={PANEL_SLOTS.footer} />
-          <slot />
-        </calcite-panel>
+        <InteractiveContainer disabled={disabled}>
+          <calcite-panel
+            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.handlePanelClose}
+            onCalcitePanelScroll={this.handlePanelScroll}
+            onCalcitePanelToggle={this.handlePanelToggle}
+            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+            ref={this.setContainerRef}
+          >
+            {this.renderBackButton()}
+            <slot name={SLOTS.actionBar} slot={PANEL_SLOTS.actionBar} />
+            <slot name={SLOTS.headerActionsStart} slot={PANEL_SLOTS.headerActionsStart} />
+            <slot name={SLOTS.headerActionsEnd} slot={PANEL_SLOTS.headerActionsEnd} />
+            <slot name={SLOTS.headerContent} slot={PANEL_SLOTS.headerContent} />
+            <slot name={SLOTS.headerMenuActions} slot={PANEL_SLOTS.headerMenuActions} />
+            <slot name={SLOTS.fab} slot={PANEL_SLOTS.fab} />
+            <slot name={SLOTS.footerActions} slot={PANEL_SLOTS.footerActions} />
+            <slot name={SLOTS.footer} slot={PANEL_SLOTS.footer} />
+            <slot />
+          </calcite-panel>
+        </InteractiveContainer>
       </Host>
     );
   }
diff --git a/packages/calcite-components/src/components/inline-editable/inline-editable.tsx b/packages/calcite-components/src/components/inline-editable/inline-editable.tsx
index 26c2562f3a5..9b6a5bb50ff 100644
--- a/packages/calcite-components/src/components/inline-editable/inline-editable.tsx
+++ b/packages/calcite-components/src/components/inline-editable/inline-editable.tsx
@@ -16,6 +16,7 @@ import {
   connectInteractive,
   disconnectInteractive,
   InteractiveComponent,
+  InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
 import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label";
@@ -159,65 +160,67 @@ export class InlineEditable
 
   render(): VNode {
     return (
-      <div
-        class={CSS.wrapper}
-        onClick={this.enableEditingHandler}
-        onKeyDown={this.escapeKeyHandler}
-      >
-        <div class={CSS.inputWrapper}>
-          <slot />
-        </div>
-        <div class={CSS.controlsWrapper}>
-          <calcite-button
-            appearance="transparent"
-            class={CSS.enableEditingButton}
-            disabled={this.disabled}
-            iconStart="pencil"
-            kind="neutral"
-            label={this.messages.enableEditing}
-            onClick={this.enableEditingHandler}
-            scale={this.scale}
-            style={{
-              opacity: this.editingEnabled ? "0" : "1",
-              width: this.editingEnabled ? "0" : "inherit",
-            }}
-            type="button"
-            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref={(el) => (this.enableEditingButton = el)}
-          />
-          {this.shouldShowControls && [
-            <div class={CSS.cancelEditingButtonWrapper}>
-              <calcite-button
-                appearance="transparent"
-                class={CSS.cancelEditingButton}
-                disabled={this.disabled}
-                iconStart="x"
-                kind="neutral"
-                label={this.messages.cancelEditing}
-                onClick={this.cancelEditingHandler}
-                scale={this.scale}
-                type="button"
-                // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-                ref={(el) => (this.cancelEditingButton = el)}
-              />
-            </div>,
+      <InteractiveContainer disabled={this.disabled}>
+        <div
+          class={CSS.wrapper}
+          onClick={this.enableEditingHandler}
+          onKeyDown={this.escapeKeyHandler}
+        >
+          <div class={CSS.inputWrapper}>
+            <slot />
+          </div>
+          <div class={CSS.controlsWrapper}>
             <calcite-button
-              appearance="solid"
-              class={CSS.confirmChangesButton}
+              appearance="transparent"
+              class={CSS.enableEditingButton}
               disabled={this.disabled}
-              iconStart="check"
-              kind="brand"
-              label={this.messages.confirmChanges}
-              loading={this.loading}
-              onClick={this.confirmChangesHandler}
+              iconStart="pencil"
+              kind="neutral"
+              label={this.messages.enableEditing}
+              onClick={this.enableEditingHandler}
               scale={this.scale}
+              style={{
+                opacity: this.editingEnabled ? "0" : "1",
+                width: this.editingEnabled ? "0" : "inherit",
+              }}
               type="button"
               // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-              ref={(el) => (this.confirmEditingButton = el)}
-            />,
-          ]}
+              ref={(el) => (this.enableEditingButton = el)}
+            />
+            {this.shouldShowControls && [
+              <div class={CSS.cancelEditingButtonWrapper}>
+                <calcite-button
+                  appearance="transparent"
+                  class={CSS.cancelEditingButton}
+                  disabled={this.disabled}
+                  iconStart="x"
+                  kind="neutral"
+                  label={this.messages.cancelEditing}
+                  onClick={this.cancelEditingHandler}
+                  scale={this.scale}
+                  type="button"
+                  // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+                  ref={(el) => (this.cancelEditingButton = el)}
+                />
+              </div>,
+              <calcite-button
+                appearance="solid"
+                class={CSS.confirmChangesButton}
+                disabled={this.disabled}
+                iconStart="check"
+                kind="brand"
+                label={this.messages.confirmChanges}
+                loading={this.loading}
+                onClick={this.confirmChangesHandler}
+                scale={this.scale}
+                type="button"
+                // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+                ref={(el) => (this.confirmEditingButton = el)}
+              />,
+            ]}
+          </div>
         </div>
-      </div>
+      </InteractiveContainer>
     );
   }
 
diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
index c37c2eed7d7..1a4d00fca40 100644
--- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
+++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
@@ -46,6 +46,7 @@ import {
   connectInteractive,
   disconnectInteractive,
   InteractiveComponent,
+  InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
 import { numberKeys } from "../../utils/key";
@@ -527,146 +528,154 @@ export class InputDatePicker
 
     return (
       <Host onBlur={this.blurHandler} onKeyDown={this.keyDownHandler}>
-        {this.localeData && (
-          <div class={CSS.inputContainer}>
-            <div
-              class={CSS.inputWrapper}
-              data-position="start"
-              onClick={this.onInputWrapperClick}
-              onPointerDown={this.onInputWrapperPointerDown}
-              // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-              ref={this.setStartWrapper}
-            >
-              <calcite-input-text
-                aria-autocomplete="none"
-                aria-controls={this.dialogId}
-                aria-describedby={this.placeholderTextId}
-                aria-expanded={toAriaBoolean(this.open)}
-                aria-haspopup="dialog"
-                class={{
-                  [CSS.input]: true,
-                  [CSS.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}
-                role="combobox"
-                scale={this.scale}
-                status={this.status}
-                // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-                ref={this.setStartInput}
-              />
-              {!this.readOnly && this.renderToggleIcon(this.open && this.focusedInput === "start")}
-              <span aria-hidden="true" class={CSS.assistiveText} id={this.placeholderTextId}>
-                Date Format: {this.localeData?.placeholder}
-              </span>
-            </div>
-            <div
-              aria-hidden={toAriaBoolean(!this.open)}
-              aria-label={messages.chooseDate}
-              aria-live="polite"
-              aria-modal="true"
-              class={{
-                [CSS.menu]: true,
-                [CSS.menuActive]: this.open,
-              }}
-              id={this.dialogId}
-              role="dialog"
-              // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-              ref={this.setFloatingEl}
-            >
-              <div
-                class={{
-                  [CSS.calendarWrapper]: true,
-                  [CSS.calendarWrapperEnd]: this.focusedInput === "end",
-                  [FloatingCSS.animation]: true,
-                  [FloatingCSS.animationActive]: this.open,
-                }}
-                // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-                ref={this.setTransitionEl}
-              >
-                <calcite-date-picker
-                  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}
-                  scale={this.scale}
-                  tabIndex={this.open ? undefined : -1}
-                  valueAsDate={this.valueAsDate}
-                  // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-                  ref={this.setDatePickerRef}
-                />
-              </div>
-            </div>
-
-            {this.range && this.layout === "horizontal" && (
-              <div class={CSS.horizontalArrowContainer}>
-                <calcite-icon flipRtl={true} icon="arrow-right" scale={getIconScale(this.scale)} />
-              </div>
-            )}
-            {this.range && this.layout === "vertical" && this.scale !== "s" && (
-              <div class={CSS.verticalArrowContainer}>
-                <calcite-icon icon="arrow-down" scale={getIconScale(this.scale)} />
-              </div>
-            )}
-            {this.range && (
+        <InteractiveContainer disabled={this.disabled}>
+          {this.localeData && (
+            <div class={CSS.inputContainer}>
               <div
                 class={CSS.inputWrapper}
-                data-position="end"
+                data-position="start"
                 onClick={this.onInputWrapperClick}
                 onPointerDown={this.onInputWrapperPointerDown}
                 // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-                ref={this.setEndWrapper}
+                ref={this.setStartWrapper}
               >
                 <calcite-input-text
                   aria-autocomplete="none"
                   aria-controls={this.dialogId}
+                  aria-describedby={this.placeholderTextId}
                   aria-expanded={toAriaBoolean(this.open)}
                   aria-haspopup="dialog"
                   class={{
                     [CSS.input]: true,
-                    [CSS.inputBorderTopColorOne]: this.layout === "vertical" && this.range,
+                    [CSS.inputNoBottomBorder]: this.layout === "vertical" && this.range,
                   }}
                   disabled={disabled}
                   icon="calendar"
                   onCalciteInputTextInput={this.calciteInternalInputInputHandler}
                   onCalciteInternalInputTextBlur={this.calciteInternalInputBlurHandler}
-                  onCalciteInternalInputTextFocus={this.endInputFocus}
+                  onCalciteInternalInputTextFocus={this.startInputFocus}
                   placeholder={this.localeData?.placeholder}
                   readOnly={readOnly}
                   role="combobox"
                   scale={this.scale}
                   status={this.status}
                   // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-                  ref={this.setEndInput}
+                  ref={this.setStartInput}
                 />
-                {!this.readOnly && this.renderToggleIcon(this.open && this.focusedInput === "end")}
+                {!this.readOnly &&
+                  this.renderToggleIcon(this.open && this.focusedInput === "start")}
+                <span aria-hidden="true" class={CSS.assistiveText} id={this.placeholderTextId}>
+                  Date Format: {this.localeData?.placeholder}
+                </span>
+              </div>
+              <div
+                aria-hidden={toAriaBoolean(!this.open)}
+                aria-label={messages.chooseDate}
+                aria-live="polite"
+                aria-modal="true"
+                class={{
+                  [CSS.menu]: true,
+                  [CSS.menuActive]: this.open,
+                }}
+                id={this.dialogId}
+                role="dialog"
+                // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+                ref={this.setFloatingEl}
+              >
+                <div
+                  class={{
+                    [CSS.calendarWrapper]: true,
+                    [CSS.calendarWrapperEnd]: this.focusedInput === "end",
+                    [FloatingCSS.animation]: true,
+                    [FloatingCSS.animationActive]: this.open,
+                  }}
+                  // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+                  ref={this.setTransitionEl}
+                >
+                  <calcite-date-picker
+                    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}
+                    scale={this.scale}
+                    tabIndex={this.open ? undefined : -1}
+                    valueAsDate={this.valueAsDate}
+                    // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+                    ref={this.setDatePickerRef}
+                  />
+                </div>
               </div>
-            )}
-          </div>
-        )}
-        <HiddenFormInputSlot component={this} />
-        {this.validationMessage ? (
-          <Validation
-            icon={this.validationIcon}
-            message={this.validationMessage}
-            scale={this.scale}
-            status={this.status}
-          />
-        ) : null}
+
+              {this.range && this.layout === "horizontal" && (
+                <div class={CSS.horizontalArrowContainer}>
+                  <calcite-icon
+                    flipRtl={true}
+                    icon="arrow-right"
+                    scale={getIconScale(this.scale)}
+                  />
+                </div>
+              )}
+              {this.range && this.layout === "vertical" && this.scale !== "s" && (
+                <div class={CSS.verticalArrowContainer}>
+                  <calcite-icon icon="arrow-down" scale={getIconScale(this.scale)} />
+                </div>
+              )}
+              {this.range && (
+                <div
+                  class={CSS.inputWrapper}
+                  data-position="end"
+                  onClick={this.onInputWrapperClick}
+                  onPointerDown={this.onInputWrapperPointerDown}
+                  // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+                  ref={this.setEndWrapper}
+                >
+                  <calcite-input-text
+                    aria-autocomplete="none"
+                    aria-controls={this.dialogId}
+                    aria-expanded={toAriaBoolean(this.open)}
+                    aria-haspopup="dialog"
+                    class={{
+                      [CSS.input]: true,
+                      [CSS.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}
+                    role="combobox"
+                    scale={this.scale}
+                    status={this.status}
+                    // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+                    ref={this.setEndInput}
+                  />
+                  {!this.readOnly &&
+                    this.renderToggleIcon(this.open && this.focusedInput === "end")}
+                </div>
+              )}
+            </div>
+          )}
+          <HiddenFormInputSlot component={this} />
+          {this.validationMessage ? (
+            <Validation
+              icon={this.validationIcon}
+              message={this.validationMessage}
+              scale={this.scale}
+              status={this.status}
+            />
+          ) : null}
+        </InteractiveContainer>
       </Host>
     );
   }
diff --git a/packages/calcite-components/src/components/input-number/input-number.tsx b/packages/calcite-components/src/components/input-number/input-number.tsx
index e097ebb41a3..b923369825d 100644
--- a/packages/calcite-components/src/components/input-number/input-number.tsx
+++ b/packages/calcite-components/src/components/input-number/input-number.tsx
@@ -30,6 +30,7 @@ import {
   connectInteractive,
   disconnectInteractive,
   InteractiveComponent,
+  InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
 import { numberKeys } from "../../utils/key";
@@ -1038,35 +1039,37 @@ export class InputNumber
 
     return (
       <Host onClick={this.clickHandler} onKeyDown={this.keyDownHandler}>
-        <div class={{ [CSS.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" }}>
-          {this.numberButtonType === "horizontal" && !this.readOnly
-            ? numberButtonsHorizontalDown
-            : null}
-          {this.prefixText ? prefixText : null}
-          <div class={CSS.wrapper}>
-            {childEl}
-            {this.isClearable ? inputClearButton : null}
-            {this.requestedIcon ? iconEl : null}
-            {this.loading ? loader : null}
+        <InteractiveContainer disabled={this.disabled}>
+          <div class={{ [CSS.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" }}>
+            {this.numberButtonType === "horizontal" && !this.readOnly
+              ? numberButtonsHorizontalDown
+              : null}
+            {this.prefixText ? prefixText : null}
+            <div class={CSS.wrapper}>
+              {childEl}
+              {this.isClearable ? inputClearButton : null}
+              {this.requestedIcon ? iconEl : null}
+              {this.loading ? loader : null}
+            </div>
+            <div class={CSS.actionWrapper}>
+              <slot name={SLOTS.action} />
+            </div>
+            {this.numberButtonType === "vertical" && !this.readOnly ? numberButtonsVertical : null}
+            {this.suffixText ? suffixText : null}
+            {this.numberButtonType === "horizontal" && !this.readOnly
+              ? numberButtonsHorizontalUp
+              : null}
+            <HiddenFormInputSlot component={this} />
           </div>
-          <div class={CSS.actionWrapper}>
-            <slot name={SLOTS.action} />
-          </div>
-          {this.numberButtonType === "vertical" && !this.readOnly ? numberButtonsVertical : null}
-          {this.suffixText ? suffixText : null}
-          {this.numberButtonType === "horizontal" && !this.readOnly
-            ? numberButtonsHorizontalUp
-            : null}
-          <HiddenFormInputSlot component={this} />
-        </div>
-        {this.validationMessage ? (
-          <Validation
-            icon={this.validationIcon}
-            message={this.validationMessage}
-            scale={this.scale}
-            status={this.status}
-          />
-        ) : null}
+          {this.validationMessage ? (
+            <Validation
+              icon={this.validationIcon}
+              message={this.validationMessage}
+              scale={this.scale}
+              status={this.status}
+            />
+          ) : null}
+        </InteractiveContainer>
       </Host>
     );
   }
diff --git a/packages/calcite-components/src/components/input-text/input-text.tsx b/packages/calcite-components/src/components/input-text/input-text.tsx
index 89113b6e965..93ae3763285 100644
--- a/packages/calcite-components/src/components/input-text/input-text.tsx
+++ b/packages/calcite-components/src/components/input-text/input-text.tsx
@@ -23,6 +23,7 @@ import {
   connectInteractive,
   disconnectInteractive,
   InteractiveComponent,
+  InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
 import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label";
@@ -668,28 +669,30 @@ export class InputText
 
     return (
       <Host onClick={this.clickHandler} onKeyDown={this.keyDownHandler}>
-        <div class={{ [CSS.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" }}>
-          {this.prefixText ? prefixText : null}
-          <div class={CSS.wrapper}>
-            {childEl}
-            {this.isClearable ? inputClearButton : null}
-            {this.requestedIcon ? iconEl : null}
-            {this.loading ? loader : null}
+        <InteractiveContainer disabled={this.disabled}>
+          <div class={{ [CSS.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" }}>
+            {this.prefixText ? prefixText : null}
+            <div class={CSS.wrapper}>
+              {childEl}
+              {this.isClearable ? inputClearButton : null}
+              {this.requestedIcon ? iconEl : null}
+              {this.loading ? loader : null}
+            </div>
+            <div class={CSS.actionWrapper}>
+              <slot name={SLOTS.action} />
+            </div>
+            {this.suffixText ? suffixText : null}
+            <HiddenFormInputSlot component={this} />
           </div>
-          <div class={CSS.actionWrapper}>
-            <slot name={SLOTS.action} />
-          </div>
-          {this.suffixText ? suffixText : null}
-          <HiddenFormInputSlot component={this} />
-        </div>
-        {this.validationMessage ? (
-          <Validation
-            icon={this.validationIcon}
-            message={this.validationMessage}
-            scale={this.scale}
-            status={this.status}
-          />
-        ) : null}
+          {this.validationMessage ? (
+            <Validation
+              icon={this.validationIcon}
+              message={this.validationMessage}
+              scale={this.scale}
+              status={this.status}
+            />
+          ) : null}
+        </InteractiveContainer>
       </Host>
     );
   }
diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx
index 58a5eefe603..00b52463c79 100644
--- a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx
+++ b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx
@@ -24,6 +24,7 @@ import {
   connectInteractive,
   disconnectInteractive,
   InteractiveComponent,
+  InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
 import { numberKeys } from "../../utils/key";
@@ -976,63 +977,65 @@ export class InputTimePicker
     const { disabled, messages, readOnly, dialogId } = this;
     return (
       <Host onBlur={this.hostBlurHandler} onKeyDown={this.keyDownHandler}>
-        <div class="input-wrapper" onClick={this.onInputWrapperClick}>
-          <calcite-input-text
-            aria-autocomplete="none"
-            aria-haspopup="dialog"
-            disabled={disabled}
-            icon="clock"
-            id={this.referenceElementId}
-            label={getLabelText(this)}
+        <InteractiveContainer disabled={this.disabled}>
+          <div class="input-wrapper" onClick={this.onInputWrapperClick}>
+            <calcite-input-text
+              aria-autocomplete="none"
+              aria-haspopup="dialog"
+              disabled={disabled}
+              icon="clock"
+              id={this.referenceElementId}
+              label={getLabelText(this)}
+              lang={this.effectiveLocale}
+              onCalciteInputTextInput={this.calciteInternalInputInputHandler}
+              onCalciteInternalInputTextFocus={this.calciteInternalInputFocusHandler}
+              readOnly={readOnly}
+              role="combobox"
+              scale={this.scale}
+              status={this.status}
+              // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+              ref={this.setInputAndTransitionEl}
+            />
+            {!this.readOnly && this.renderToggleIcon(this.open)}
+          </div>
+          <calcite-popover
+            focusTrapDisabled={true}
+            id={dialogId}
+            label={messages.chooseTime}
             lang={this.effectiveLocale}
-            onCalciteInputTextInput={this.calciteInternalInputInputHandler}
-            onCalciteInternalInputTextFocus={this.calciteInternalInputFocusHandler}
-            readOnly={readOnly}
-            role="combobox"
-            scale={this.scale}
-            status={this.status}
+            onCalcitePopoverClose={this.popoverCloseHandler}
+            onCalcitePopoverOpen={this.popoverOpenHandler}
+            open={this.open}
+            overlayPositioning={this.overlayPositioning}
+            placement={this.placement}
+            referenceElement={this.referenceElementId}
+            triggerDisabled={true}
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref={this.setInputAndTransitionEl}
-          />
-          {!this.readOnly && this.renderToggleIcon(this.open)}
-        </div>
-        <calcite-popover
-          focusTrapDisabled={true}
-          id={dialogId}
-          label={messages.chooseTime}
-          lang={this.effectiveLocale}
-          onCalcitePopoverClose={this.popoverCloseHandler}
-          onCalcitePopoverOpen={this.popoverOpenHandler}
-          open={this.open}
-          overlayPositioning={this.overlayPositioning}
-          placement={this.placement}
-          referenceElement={this.referenceElementId}
-          triggerDisabled={true}
-          // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-          ref={this.setCalcitePopoverEl}
-        >
-          <calcite-time-picker
-            lang={this.effectiveLocale}
-            messageOverrides={this.messageOverrides}
-            numberingSystem={this.numberingSystem}
-            onCalciteInternalTimePickerChange={this.timePickerChangeHandler}
-            scale={this.scale}
-            step={this.step}
-            tabIndex={this.open ? undefined : -1}
-            value={this.value}
-            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref={this.setCalciteTimePickerEl}
-          />
-        </calcite-popover>
-        <HiddenFormInputSlot component={this} />
-        {this.validationMessage ? (
-          <Validation
-            icon={this.validationIcon}
-            message={this.validationMessage}
-            scale={this.scale}
-            status={this.status}
-          />
-        ) : null}
+            ref={this.setCalcitePopoverEl}
+          >
+            <calcite-time-picker
+              lang={this.effectiveLocale}
+              messageOverrides={this.messageOverrides}
+              numberingSystem={this.numberingSystem}
+              onCalciteInternalTimePickerChange={this.timePickerChangeHandler}
+              scale={this.scale}
+              step={this.step}
+              tabIndex={this.open ? undefined : -1}
+              value={this.value}
+              // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+              ref={this.setCalciteTimePickerEl}
+            />
+          </calcite-popover>
+          <HiddenFormInputSlot component={this} />
+          {this.validationMessage ? (
+            <Validation
+              icon={this.validationIcon}
+              message={this.validationMessage}
+              scale={this.scale}
+              status={this.status}
+            />
+          ) : null}
+        </InteractiveContainer>
       </Host>
     );
   }
diff --git a/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx b/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx
index f07bb140caf..f0208a3a06d 100644
--- a/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx
+++ b/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx
@@ -12,7 +12,11 @@ import {
   Watch,
 } from "@stencil/core";
 import { connectLabel, disconnectLabel, LabelableComponent } from "../../utils/label";
-import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
+import {
+  InteractiveComponent,
+  InteractiveContainer,
+  updateHostInteraction,
+} from "../../utils/interactive";
 import {
   connectLocalized,
   disconnectLocalized,
@@ -375,43 +379,45 @@ export class InputTimeZone
   render(): VNode {
     return (
       <Host>
-        <calcite-combobox
-          clearDisabled={true}
-          disabled={this.disabled}
-          label={this.messages.chooseTimeZone}
-          lang={this.effectiveLocale}
-          maxItems={this.maxItems}
-          onCalciteComboboxBeforeClose={this.onComboboxBeforeClose}
-          onCalciteComboboxBeforeOpen={this.onComboboxBeforeOpen}
-          onCalciteComboboxChange={this.onComboboxChange}
-          onCalciteComboboxClose={this.onComboboxClose}
-          onCalciteComboboxOpen={this.onComboboxOpen}
-          open={this.open}
-          overlayPositioning={this.overlayPositioning}
-          scale={this.scale}
-          selectionMode="single-persist"
-          status={this.status}
-          validation-icon={this.validationIcon}
-          validation-message={this.validationMessage}
-          // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-          ref={this.setComboboxRef}
-        >
-          {this.timeZoneItems.map((group) => {
-            const selected = this.selectedTimeZoneItem === group;
-            const { label, value } = group;
-
-            return (
-              <calcite-combobox-item
-                data-value={value}
-                key={label}
-                selected={selected}
-                textLabel={label}
-                value={`${group.filterValue}`}
-              />
-            );
-          })}
-        </calcite-combobox>
-        <HiddenFormInputSlot component={this} />
+        <InteractiveContainer disabled={this.disabled}>
+          <calcite-combobox
+            clearDisabled={true}
+            disabled={this.disabled}
+            label={this.messages.chooseTimeZone}
+            lang={this.effectiveLocale}
+            maxItems={this.maxItems}
+            onCalciteComboboxBeforeClose={this.onComboboxBeforeClose}
+            onCalciteComboboxBeforeOpen={this.onComboboxBeforeOpen}
+            onCalciteComboboxChange={this.onComboboxChange}
+            onCalciteComboboxClose={this.onComboboxClose}
+            onCalciteComboboxOpen={this.onComboboxOpen}
+            open={this.open}
+            overlayPositioning={this.overlayPositioning}
+            scale={this.scale}
+            selectionMode="single-persist"
+            status={this.status}
+            validation-icon={this.validationIcon}
+            validation-message={this.validationMessage}
+            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+            ref={this.setComboboxRef}
+          >
+            {this.timeZoneItems.map((group) => {
+              const selected = this.selectedTimeZoneItem === group;
+              const { label, value } = group;
+
+              return (
+                <calcite-combobox-item
+                  data-value={value}
+                  key={label}
+                  selected={selected}
+                  textLabel={label}
+                  value={`${group.filterValue}`}
+                />
+              );
+            })}
+          </calcite-combobox>
+          <HiddenFormInputSlot component={this} />
+        </InteractiveContainer>
       </Host>
     );
   }
diff --git a/packages/calcite-components/src/components/input/input.tsx b/packages/calcite-components/src/components/input/input.tsx
index 2d8ff74b838..53d2ee4a8b2 100644
--- a/packages/calcite-components/src/components/input/input.tsx
+++ b/packages/calcite-components/src/components/input/input.tsx
@@ -30,6 +30,7 @@ import {
   connectInteractive,
   disconnectInteractive,
   InteractiveComponent,
+  InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
 import { numberKeys } from "../../utils/key";
@@ -1202,38 +1203,40 @@ export class Input
 
     return (
       <Host onClick={this.clickHandler} onKeyDown={this.keyDownHandler}>
-        <div class={{ [CSS.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" }}>
-          {this.type === "number" && this.numberButtonType === "horizontal" && !this.readOnly
-            ? numberButtonsHorizontalDown
-            : null}
-          {this.prefixText ? prefixText : null}
-          <div class={CSS.wrapper}>
-            {localeNumberInput}
-            {childEl}
-            {this.isClearable ? inputClearButton : null}
-            {this.requestedIcon ? iconEl : null}
-            {this.loading ? loader : null}
+        <InteractiveContainer disabled={this.disabled}>
+          <div class={{ [CSS.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" }}>
+            {this.type === "number" && this.numberButtonType === "horizontal" && !this.readOnly
+              ? numberButtonsHorizontalDown
+              : null}
+            {this.prefixText ? prefixText : null}
+            <div class={CSS.wrapper}>
+              {localeNumberInput}
+              {childEl}
+              {this.isClearable ? inputClearButton : null}
+              {this.requestedIcon ? iconEl : null}
+              {this.loading ? loader : null}
+            </div>
+            <div class={CSS.actionWrapper}>
+              <slot name={SLOTS.action} />
+            </div>
+            {this.type === "number" && this.numberButtonType === "vertical" && !this.readOnly
+              ? numberButtonsVertical
+              : null}
+            {this.suffixText ? suffixText : null}
+            {this.type === "number" && this.numberButtonType === "horizontal" && !this.readOnly
+              ? numberButtonsHorizontalUp
+              : null}
+            <HiddenFormInputSlot component={this} />
           </div>
-          <div class={CSS.actionWrapper}>
-            <slot name={SLOTS.action} />
-          </div>
-          {this.type === "number" && this.numberButtonType === "vertical" && !this.readOnly
-            ? numberButtonsVertical
-            : null}
-          {this.suffixText ? suffixText : null}
-          {this.type === "number" && this.numberButtonType === "horizontal" && !this.readOnly
-            ? numberButtonsHorizontalUp
-            : null}
-          <HiddenFormInputSlot component={this} />
-        </div>
-        {this.validationMessage ? (
-          <Validation
-            icon={this.validationIcon}
-            message={this.validationMessage}
-            scale={this.scale}
-            status={this.status}
-          />
-        ) : null}
+          {this.validationMessage ? (
+            <Validation
+              icon={this.validationIcon}
+              message={this.validationMessage}
+              scale={this.scale}
+              status={this.status}
+            />
+          ) : null}
+        </InteractiveContainer>
       </Host>
     );
   }
diff --git a/packages/calcite-components/src/components/link/link.tsx b/packages/calcite-components/src/components/link/link.tsx
index c72cbb24321..5b568372a99 100644
--- a/packages/calcite-components/src/components/link/link.tsx
+++ b/packages/calcite-components/src/components/link/link.tsx
@@ -4,6 +4,7 @@ import {
   connectInteractive,
   disconnectInteractive,
   InteractiveComponent,
+  InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
 import {
@@ -114,26 +115,28 @@ export class Link implements InteractiveComponent, LoadableComponent {
 
     return (
       <Host role="presentation">
-        <Tag
-          class={{ [CSS_UTILITY.rtl]: dir === "rtl" }}
-          /*
+        <InteractiveContainer disabled={this.disabled}>
+          <Tag
+            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}
-          rel={Tag === "a" && this.rel}
-          role={role}
-          tabIndex={tabIndex}
-          target={Tag === "a" && this.target}
-          // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-          ref={this.storeTagRef}
-        >
-          {this.iconStart ? iconStartEl : null}
-          <slot />
-          {this.iconEnd ? iconEndEl : null}
-        </Tag>
+            download={Tag === "a" && (download === "" || download) ? download : null}
+            href={Tag === "a" && this.href}
+            onClick={this.childElClickHandler}
+            rel={Tag === "a" && this.rel}
+            role={role}
+            tabIndex={tabIndex}
+            target={Tag === "a" && this.target}
+            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+            ref={this.storeTagRef}
+          >
+            {this.iconStart ? iconStartEl : null}
+            <slot />
+            {this.iconEnd ? iconEndEl : null}
+          </Tag>
+        </InteractiveContainer>
       </Host>
     );
   }
diff --git a/packages/calcite-components/src/components/list-item-group/list-item-group.tsx b/packages/calcite-components/src/components/list-item-group/list-item-group.tsx
index 328590d20ae..ed464630cfe 100644
--- a/packages/calcite-components/src/components/list-item-group/list-item-group.tsx
+++ b/packages/calcite-components/src/components/list-item-group/list-item-group.tsx
@@ -13,6 +13,7 @@ import {
   connectInteractive,
   disconnectInteractive,
   InteractiveComponent,
+  InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
 import { MAX_COLUMNS } from "../list-item/resources";
@@ -93,18 +94,20 @@ export class ListItemGroup implements InteractiveComponent {
   // --------------------------------------------------------------------------
 
   render(): VNode {
-    const { heading, visualLevel } = this;
+    const { disabled, heading, visualLevel } = this;
     return (
       <Host>
-        <tr
-          class={CSS.container}
-          style={{ "--calcite-list-item-spacing-indent-multiplier": `${visualLevel}` }}
-        >
-          <td class={CSS.heading} colSpan={MAX_COLUMNS}>
-            {heading}
-          </td>
-        </tr>
-        <slot onSlotchange={this.handleDefaultSlotChange} />
+        <InteractiveContainer disabled={disabled}>
+          <tr
+            class={CSS.container}
+            style={{ "--calcite-list-item-spacing-indent-multiplier": `${visualLevel}` }}
+          >
+            <td class={CSS.heading} colSpan={MAX_COLUMNS}>
+              {heading}
+            </td>
+          </tr>
+          <slot onSlotchange={this.handleDefaultSlotChange} />
+        </InteractiveContainer>
       </Host>
     );
   }
diff --git a/packages/calcite-components/src/components/list-item/list-item.tsx b/packages/calcite-components/src/components/list-item/list-item.tsx
index 60a2455adb2..2f1fdbcd594 100644
--- a/packages/calcite-components/src/components/list-item/list-item.tsx
+++ b/packages/calcite-components/src/components/list-item/list-item.tsx
@@ -22,6 +22,7 @@ import {
   connectInteractive,
   disconnectInteractive,
   InteractiveComponent,
+  InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
 import { SelectionMode } from "../interfaces";
@@ -630,36 +631,38 @@ export class ListItem
 
     return (
       <Host>
-        <tr
-          aria-expanded={openable ? toAriaBoolean(open) : null}
-          aria-label={label}
-          aria-level={level}
-          aria-posinset={setPosition}
-          aria-selected={toAriaBoolean(selected)}
-          aria-setsize={setSize}
-          class={{
-            [CSS.container]: true,
-            [CSS.containerBorderSelected]: borderSelected,
-            [CSS.containerBorderUnselected]: borderUnselected,
-          }}
-          hidden={closed}
-          onFocus={this.focusCellNull}
-          onKeyDown={this.handleItemKeyDown}
-          role="row"
-          style={{ "--calcite-list-item-spacing-indent-multiplier": `${visualLevel}` }}
-          tabIndex={active ? 0 : -1}
-          // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-          ref={(el) => (this.containerEl = el)}
-        >
-          {this.renderDragHandle()}
-          {this.renderSelected()}
-          {this.renderOpen()}
-          {this.renderActionsStart()}
-          {this.renderContentContainer()}
-          {this.renderActionsEnd()}
-        </tr>
-        {this.renderContentBottom()}
-        {this.renderDefaultContainer()}
+        <InteractiveContainer disabled={this.disabled}>
+          <tr
+            aria-expanded={openable ? toAriaBoolean(open) : null}
+            aria-label={label}
+            aria-level={level}
+            aria-posinset={setPosition}
+            aria-selected={toAriaBoolean(selected)}
+            aria-setsize={setSize}
+            class={{
+              [CSS.container]: true,
+              [CSS.containerBorderSelected]: borderSelected,
+              [CSS.containerBorderUnselected]: borderUnselected,
+            }}
+            hidden={closed}
+            onFocus={this.focusCellNull}
+            onKeyDown={this.handleItemKeyDown}
+            role="row"
+            style={{ "--calcite-list-item-spacing-indent-multiplier": `${visualLevel}` }}
+            tabIndex={active ? 0 : -1}
+            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+            ref={(el) => (this.containerEl = el)}
+          >
+            {this.renderDragHandle()}
+            {this.renderSelected()}
+            {this.renderOpen()}
+            {this.renderActionsStart()}
+            {this.renderContentContainer()}
+            {this.renderActionsEnd()}
+          </tr>
+          {this.renderContentBottom()}
+          {this.renderDefaultContainer()}
+        </InteractiveContainer>
       </Host>
     );
   }
diff --git a/packages/calcite-components/src/components/list/list.tsx b/packages/calcite-components/src/components/list/list.tsx
index 5b602769b6c..7c44db7d64c 100755
--- a/packages/calcite-components/src/components/list/list.tsx
+++ b/packages/calcite-components/src/components/list/list.tsx
@@ -18,6 +18,7 @@ import {
   connectInteractive,
   disconnectInteractive,
   InteractiveComponent,
+  InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
 import { createObserver } from "../../utils/observers";
@@ -492,56 +493,58 @@ export class List
       hasFilterActionsEnd,
     } = this;
     return (
-      <div class={CSS.container}>
-        {this.dragEnabled ? (
-          <span aria-live="assertive" class={CSS.assistiveText}>
-            {this.assistiveText}
-          </span>
-        ) : null}
-        {this.renderItemAriaLive()}
-        {loading ? <calcite-scrim class={CSS.scrim} loading={loading} /> : null}
-        <table
-          aria-busy={toAriaBoolean(loading)}
-          aria-label={label || ""}
-          class={CSS.table}
-          onKeyDown={this.handleListKeydown}
-          role="treegrid"
-        >
-          {filterEnabled || hasFilterActionsStart || hasFilterActionsEnd ? (
-            <thead>
-              <tr class={{ [CSS.sticky]: true }}>
-                <th colSpan={MAX_COLUMNS}>
-                  <calcite-stack class={CSS.stack}>
-                    <slot
-                      name={SLOTS.filterActionsStart}
-                      onSlotchange={this.handleFilterActionsStartSlotChange}
-                      slot={STACK_SLOTS.actionsStart}
-                    />
-                    <calcite-filter
-                      aria-label={filterPlaceholder}
-                      disabled={disabled}
-                      items={dataForFilter}
-                      onCalciteFilterChange={this.handleFilterChange}
-                      placeholder={filterPlaceholder}
-                      value={filterText}
-                      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-                      ref={this.setFilterEl}
-                    />
-                    <slot
-                      name={SLOTS.filterActionsEnd}
-                      onSlotchange={this.handleFilterActionsEndSlotChange}
-                      slot={STACK_SLOTS.actionsEnd}
-                    />
-                  </calcite-stack>
-                </th>
-              </tr>
-            </thead>
+      <InteractiveContainer disabled={this.disabled}>
+        <div class={CSS.container}>
+          {this.dragEnabled ? (
+            <span aria-live="assertive" class={CSS.assistiveText}>
+              {this.assistiveText}
+            </span>
           ) : null}
-          <tbody class={CSS.tableContainer}>
-            <slot onSlotchange={this.handleDefaultSlotChange} />
-          </tbody>
-        </table>
-      </div>
+          {this.renderItemAriaLive()}
+          {loading ? <calcite-scrim class={CSS.scrim} loading={loading} /> : null}
+          <table
+            aria-busy={toAriaBoolean(loading)}
+            aria-label={label || ""}
+            class={CSS.table}
+            onKeyDown={this.handleListKeydown}
+            role="treegrid"
+          >
+            {filterEnabled || hasFilterActionsStart || hasFilterActionsEnd ? (
+              <thead>
+                <tr class={{ [CSS.sticky]: true }}>
+                  <th colSpan={MAX_COLUMNS}>
+                    <calcite-stack class={CSS.stack}>
+                      <slot
+                        name={SLOTS.filterActionsStart}
+                        onSlotchange={this.handleFilterActionsStartSlotChange}
+                        slot={STACK_SLOTS.actionsStart}
+                      />
+                      <calcite-filter
+                        aria-label={filterPlaceholder}
+                        disabled={disabled}
+                        items={dataForFilter}
+                        onCalciteFilterChange={this.handleFilterChange}
+                        placeholder={filterPlaceholder}
+                        value={filterText}
+                        // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+                        ref={this.setFilterEl}
+                      />
+                      <slot
+                        name={SLOTS.filterActionsEnd}
+                        onSlotchange={this.handleFilterActionsEndSlotChange}
+                        slot={STACK_SLOTS.actionsEnd}
+                      />
+                    </calcite-stack>
+                  </th>
+                </tr>
+              </thead>
+            ) : null}
+            <tbody class={CSS.tableContainer}>
+              <slot onSlotchange={this.handleDefaultSlotChange} />
+            </tbody>
+          </table>
+        </div>
+      </InteractiveContainer>
     );
   }
 
diff --git a/packages/calcite-components/src/components/panel/panel.tsx b/packages/calcite-components/src/components/panel/panel.tsx
index 4dda36e6d97..acb98b1732f 100644
--- a/packages/calcite-components/src/components/panel/panel.tsx
+++ b/packages/calcite-components/src/components/panel/panel.tsx
@@ -3,7 +3,6 @@ import {
   Element,
   Event,
   EventEmitter,
-  Fragment,
   h,
   Method,
   Prop,
@@ -21,6 +20,7 @@ import {
   connectInteractive,
   disconnectInteractive,
   InteractiveComponent,
+  InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
 import {
@@ -583,7 +583,7 @@ export class Panel
   }
 
   render(): VNode {
-    const { loading, panelKeyDownHandler, closed, closable } = this;
+    const { disabled, loading, panelKeyDownHandler, closed, closable } = this;
 
     const panelNode = (
       <article
@@ -602,10 +602,10 @@ export class Panel
     );
 
     return (
-      <Fragment>
+      <InteractiveContainer disabled={disabled}>
         {loading ? <calcite-scrim loading={loading} /> : null}
         {panelNode}
-      </Fragment>
+      </InteractiveContainer>
     );
   }
 }
diff --git a/packages/calcite-components/src/components/pick-list-item/pick-list-item.tsx b/packages/calcite-components/src/components/pick-list-item/pick-list-item.tsx
index ba1b309291a..3d6ab74bb32 100644
--- a/packages/calcite-components/src/components/pick-list-item/pick-list-item.tsx
+++ b/packages/calcite-components/src/components/pick-list-item/pick-list-item.tsx
@@ -3,7 +3,6 @@ import {
   Element,
   Event,
   EventEmitter,
-  Fragment,
   h,
   Method,
   Prop,
@@ -21,6 +20,7 @@ import {
   connectInteractive,
   disconnectInteractive,
   InteractiveComponent,
+  InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
 import {
@@ -219,7 +219,7 @@ export class PickListItem
   }
 
   componentDidRender(): void {
-    updateHostInteraction(this, this.el.closest("calcite-pick-list") ? "managed" : false);
+    updateHostInteraction(this);
   }
 
   // --------------------------------------------------------------------------
@@ -381,7 +381,7 @@ export class PickListItem
     const { description, label } = this;
 
     return (
-      <Fragment>
+      <InteractiveContainer disabled={this.disabled}>
         {this.renderIcon()}
         {this.renderActionsStart()}
         <label
@@ -403,7 +403,7 @@ export class PickListItem
           </div>
         </label>
         {this.renderActionsEnd()}
-      </Fragment>
+      </InteractiveContainer>
     );
   }
 }
diff --git a/packages/calcite-components/src/components/pick-list/shared-list-render.tsx b/packages/calcite-components/src/components/pick-list/shared-list-render.tsx
index 1154c42d7c9..96ca51124d3 100644
--- a/packages/calcite-components/src/components/pick-list/shared-list-render.tsx
+++ b/packages/calcite-components/src/components/pick-list/shared-list-render.tsx
@@ -4,6 +4,7 @@ import { toAriaBoolean } from "../../utils/dom";
 import { CSS, SLOTS } from "./resources";
 import { handleFilter, handleFilterEvent } from "./shared-list-logic";
 import DOMAttributes = JSXBase.DOMAttributes;
+import { InteractiveContainer } from "../../utils/interactive";
 
 interface ListProps extends DOMAttributes<any> {
   disabled: boolean;
@@ -41,33 +42,35 @@ export const List: FunctionalComponent<{ props: ListProps } & DOMAttributes<any>
   const defaultSlot = <slot />;
   return (
     <Host aria-busy={toAriaBoolean(loading)} role="menu" {...rest}>
-      <section>
-        {dragEnabled ? (
-          <span
-            aria-live="assertive"
-            class="assistive-text"
-            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref={storeAssistiveEl}
-          />
-        ) : null}
-        <header class={{ [CSS.sticky]: true }}>
-          {filterEnabled ? (
-            <calcite-filter
-              aria-label={filterPlaceholder}
-              disabled={disabled}
-              items={dataForFilter}
-              onCalciteFilterChange={handleFilterEvent}
-              placeholder={filterPlaceholder}
-              value={filterText}
+      <InteractiveContainer disabled={disabled}>
+        <section>
+          {dragEnabled ? (
+            <span
+              aria-live="assertive"
+              class="assistive-text"
               // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-              ref={setFilterEl}
+              ref={storeAssistiveEl}
             />
           ) : null}
-          <slot name={SLOTS.menuActions} />
-        </header>
-        {loading ? <calcite-scrim loading={loading} /> : null}
-        {defaultSlot}
-      </section>
+          <header class={{ [CSS.sticky]: true }}>
+            {filterEnabled ? (
+              <calcite-filter
+                aria-label={filterPlaceholder}
+                disabled={disabled}
+                items={dataForFilter}
+                onCalciteFilterChange={handleFilterEvent}
+                placeholder={filterPlaceholder}
+                value={filterText}
+                // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+                ref={setFilterEl}
+              />
+            ) : null}
+            <slot name={SLOTS.menuActions} />
+          </header>
+          {loading ? <calcite-scrim loading={loading} /> : null}
+          {defaultSlot}
+        </section>
+      </InteractiveContainer>
     </Host>
   );
 };
diff --git a/packages/calcite-components/src/components/radio-button/radio-button.tsx b/packages/calcite-components/src/components/radio-button/radio-button.tsx
index 9339bcab7a3..93d27b1b0b7 100644
--- a/packages/calcite-components/src/components/radio-button/radio-button.tsx
+++ b/packages/calcite-components/src/components/radio-button/radio-button.tsx
@@ -25,6 +25,7 @@ import {
   connectInteractive,
   disconnectInteractive,
   InteractiveComponent,
+  InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
 import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label";
@@ -499,20 +500,22 @@ export class RadioButton
     const tabIndex = this.getTabIndex();
     return (
       <Host onClick={this.clickHandler} onKeyDown={this.handleKeyDown}>
-        <div
-          aria-checked={toAriaBoolean(this.checked)}
-          aria-label={getLabelText(this)}
-          class={CSS.container}
-          onBlur={this.onContainerBlur}
-          onFocus={this.onContainerFocus}
-          role="radio"
-          tabIndex={tabIndex}
-          // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-          ref={this.setContainerEl}
-        >
-          <div class="radio" />
-        </div>
-        <HiddenFormInputSlot component={this} />
+        <InteractiveContainer disabled={this.disabled}>
+          <div
+            aria-checked={toAriaBoolean(this.checked)}
+            aria-label={getLabelText(this)}
+            class={CSS.container}
+            onBlur={this.onContainerBlur}
+            onFocus={this.onContainerFocus}
+            role="radio"
+            tabIndex={tabIndex}
+            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+            ref={this.setContainerEl}
+          >
+            <div class="radio" />
+          </div>
+          <HiddenFormInputSlot component={this} />
+        </InteractiveContainer>
       </Host>
     );
   }
diff --git a/packages/calcite-components/src/components/rating/rating.tsx b/packages/calcite-components/src/components/rating/rating.tsx
index 7320634554c..24d1152d504 100644
--- a/packages/calcite-components/src/components/rating/rating.tsx
+++ b/packages/calcite-components/src/components/rating/rating.tsx
@@ -16,6 +16,7 @@ import {
   connectInteractive,
   disconnectInteractive,
   InteractiveComponent,
+  InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
 import { connectLabel, disconnectLabel, LabelableComponent } from "../../utils/label";
@@ -227,65 +228,77 @@ export class Rating
         onPointerOut={this.handleRatingPointerOut}
         onPointerOver={this.handleRatingPointerOver}
       >
-        <span class="wrapper">
-          <fieldset class="fieldset" disabled={this.disabled}>
-            <legend class="visually-hidden">{this.messages.rating}</legend>
-            {this.starsMap.map(
-              ({ average, checked, fraction, hovered, id, partial, selected, value, tabIndex }) => {
-                return (
-                  <label
-                    class={{
-                      star: true,
-                      selected,
-                      hovered,
-                      average,
-                      partial,
-                    }}
-                    data-value={value}
-                    htmlFor={id}
-                    onClick={this.handleLabelClick}
-                    onFocus={this.handleLabelFocus}
-                    onKeyDown={this.handleLabelKeyDown}
-                    onPointerDown={this.handleLabelPointerDown}
-                    onPointerOver={this.handleLabelPointerOver}
-                    tabIndex={tabIndex}
-                    // eslint-disable-next-line react/jsx-sort-props
-                    ref={this.setLabelEl}
-                  >
-                    <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}
-                    />
-                    <StarIcon full={selected || average} scale={this.scale} />
-                    {partial && (
-                      <div class="fraction" style={{ width: `${fraction * 100}%` }}>
-                        <StarIcon full partial scale={this.scale} />
-                      </div>
-                    )}
-                    <span class="visually-hidden">
-                      {this.messages.stars.replace("{num}", `${value}`)}
-                    </span>
-                  </label>
-                );
-              }
-            )}
-
-            {(this.count || this.average) && this.showChip ? (
-              <calcite-chip scale={this.scale} value={this.count?.toString()}>
-                {!!this.average && <span class="number--average">{this.average.toString()}</span>}
-                {!!this.count && <span class="number--count">({this.count?.toString()})</span>}
-              </calcite-chip>
-            ) : null}
-          </fieldset>
-          <HiddenFormInputSlot component={this} />
-        </span>
+        <InteractiveContainer disabled={this.disabled}>
+          <span class="wrapper">
+            <fieldset class="fieldset" disabled={this.disabled}>
+              <legend class="visually-hidden">{this.messages.rating}</legend>
+              {this.starsMap.map(
+                ({
+                  average,
+                  checked,
+                  fraction,
+                  hovered,
+                  id,
+                  partial,
+                  selected,
+                  value,
+                  tabIndex,
+                }) => {
+                  return (
+                    <label
+                      class={{
+                        star: true,
+                        selected,
+                        hovered,
+                        average,
+                        partial,
+                      }}
+                      data-value={value}
+                      htmlFor={id}
+                      onClick={this.handleLabelClick}
+                      onFocus={this.handleLabelFocus}
+                      onKeyDown={this.handleLabelKeyDown}
+                      onPointerDown={this.handleLabelPointerDown}
+                      onPointerOver={this.handleLabelPointerOver}
+                      tabIndex={tabIndex}
+                      // eslint-disable-next-line react/jsx-sort-props
+                      ref={this.setLabelEl}
+                    >
+                      <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}
+                      />
+                      <StarIcon full={selected || average} scale={this.scale} />
+                      {partial && (
+                        <div class="fraction" style={{ width: `${fraction * 100}%` }}>
+                          <StarIcon full partial scale={this.scale} />
+                        </div>
+                      )}
+                      <span class="visually-hidden">
+                        {this.messages.stars.replace("{num}", `${value}`)}
+                      </span>
+                    </label>
+                  );
+                }
+              )}
+
+              {(this.count || this.average) && this.showChip ? (
+                <calcite-chip scale={this.scale} value={this.count?.toString()}>
+                  {!!this.average && <span class="number--average">{this.average.toString()}</span>}
+                  {!!this.count && <span class="number--count">({this.count?.toString()})</span>}
+                </calcite-chip>
+              ) : null}
+            </fieldset>
+            <HiddenFormInputSlot component={this} />
+          </span>
+        </InteractiveContainer>
       </Host>
     );
   }
diff --git a/packages/calcite-components/src/components/segmented-control/segmented-control.tsx b/packages/calcite-components/src/components/segmented-control/segmented-control.tsx
index 5ae0e820b8b..393641bf613 100644
--- a/packages/calcite-components/src/components/segmented-control/segmented-control.tsx
+++ b/packages/calcite-components/src/components/segmented-control/segmented-control.tsx
@@ -25,6 +25,7 @@ import {
   connectInteractive,
   disconnectInteractive,
   InteractiveComponent,
+  InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
 import { connectLabel, disconnectLabel, LabelableComponent } from "../../utils/label";
@@ -173,8 +174,10 @@ export class SegmentedControl
   render(): VNode {
     return (
       <Host onClick={this.handleClick} role="radiogroup">
-        <slot />
-        <HiddenFormInputSlot component={this} />
+        <InteractiveContainer disabled={this.disabled}>
+          <slot />
+          <HiddenFormInputSlot component={this} />
+        </InteractiveContainer>
       </Host>
     );
   }
diff --git a/packages/calcite-components/src/components/select/select.tsx b/packages/calcite-components/src/components/select/select.tsx
index 7b2ab752b6d..4c85e3181d7 100644
--- a/packages/calcite-components/src/components/select/select.tsx
+++ b/packages/calcite-components/src/components/select/select.tsx
@@ -23,6 +23,7 @@ import {
   connectInteractive,
   disconnectInteractive,
   InteractiveComponent,
+  InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
 import { connectLabel, disconnectLabel, LabelableComponent, getLabelText } from "../../utils/label";
@@ -385,30 +386,34 @@ export class Select
   }
 
   render(): VNode {
+    const { disabled } = this;
+
     return (
       <Host>
-        <div class={CSS.wrapper}>
-          <select
-            aria-label={getLabelText(this)}
-            class={CSS.select}
-            disabled={this.disabled}
-            onChange={this.handleInternalSelectChange}
-            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref={this.storeSelectRef}
-          >
-            <slot />
-          </select>
-          {this.renderChevron()}
-          <HiddenFormInputSlot component={this} />
-        </div>
-        {this.validationMessage ? (
-          <Validation
-            icon={this.validationIcon}
-            message={this.validationMessage}
-            scale={this.scale}
-            status={this.status}
-          />
-        ) : null}
+        <InteractiveContainer disabled={disabled}>
+          <div class={CSS.wrapper}>
+            <select
+              aria-label={getLabelText(this)}
+              class={CSS.select}
+              disabled={disabled}
+              onChange={this.handleInternalSelectChange}
+              // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+              ref={this.storeSelectRef}
+            >
+              <slot />
+            </select>
+            {this.renderChevron()}
+            <HiddenFormInputSlot component={this} />
+          </div>
+          {this.validationMessage ? (
+            <Validation
+              icon={this.validationIcon}
+              message={this.validationMessage}
+              scale={this.scale}
+              status={this.status}
+            />
+          ) : null}
+        </InteractiveContainer>
       </Host>
     );
   }
diff --git a/packages/calcite-components/src/components/slider/slider.tsx b/packages/calcite-components/src/components/slider/slider.tsx
index ae5bd1275e1..83b95ea5aa3 100644
--- a/packages/calcite-components/src/components/slider/slider.tsx
+++ b/packages/calcite-components/src/components/slider/slider.tsx
@@ -26,6 +26,7 @@ import {
   connectInteractive,
   disconnectInteractive,
   InteractiveComponent,
+  InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
 import { isActivationKey } from "../../utils/key";
@@ -656,81 +657,83 @@ export class Slider
 
     return (
       <Host id={id} onTouchStart={this.handleTouchStart}>
-        <div
-          aria-label={getLabelText(this)}
-          class={{
-            ["container"]: true,
-            ["container--range"]: valueIsRange,
-            [`scale--${this.scale}`]: true,
-          }}
-        >
-          {this.renderGraph()}
+        <InteractiveContainer disabled={this.disabled}>
           <div
-            class="track"
-            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref={this.storeTrackRef}
+            aria-label={getLabelText(this)}
+            class={{
+              ["container"]: true,
+              ["container--range"]: valueIsRange,
+              [`scale--${this.scale}`]: true,
+            }}
           >
+            {this.renderGraph()}
             <div
-              class="track__range"
-              onPointerDown={(event) => this.pointerDownDragStart(event, "minMaxValue")}
-              style={{
-                left: `${mirror ? 100 - maxInterval : minInterval}%`,
-                right: `${mirror ? minInterval : 100 - maxInterval}%`,
-              }}
-            />
-            <div class="ticks">
-              {this.tickValues.map((tick) => {
-                const tickOffset = `${this.getUnitInterval(tick) * 100}%`;
-                let activeTicks = tick >= min && tick <= value;
-                if (useMinValue) {
-                  activeTicks = tick >= this.minValue && tick <= this.maxValue;
-                }
-
-                return (
-                  <span
-                    class={{
-                      tick: true,
-                      "tick--active": activeTicks,
-                    }}
-                    style={{
-                      left: mirror ? "" : tickOffset,
-                      right: mirror ? tickOffset : "",
-                    }}
-                  >
-                    {this.renderTickLabel(tick)}
-                  </span>
-                );
-              })}
+              class="track"
+              // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+              ref={this.storeTrackRef}
+            >
+              <div
+                class="track__range"
+                onPointerDown={(event) => this.pointerDownDragStart(event, "minMaxValue")}
+                style={{
+                  left: `${mirror ? 100 - maxInterval : minInterval}%`,
+                  right: `${mirror ? minInterval : 100 - maxInterval}%`,
+                }}
+              />
+              <div class="ticks">
+                {this.tickValues.map((tick) => {
+                  const tickOffset = `${this.getUnitInterval(tick) * 100}%`;
+                  let activeTicks = tick >= min && tick <= value;
+                  if (useMinValue) {
+                    activeTicks = tick >= this.minValue && tick <= this.maxValue;
+                  }
+
+                  return (
+                    <span
+                      class={{
+                        tick: true,
+                        "tick--active": activeTicks,
+                      }}
+                      style={{
+                        left: mirror ? "" : tickOffset,
+                        right: mirror ? tickOffset : "",
+                      }}
+                    >
+                      {this.renderTickLabel(tick)}
+                    </span>
+                  );
+                })}
+              </div>
+            </div>
+            <div class="thumb-container">
+              {!this.precise && !this.labelHandles && valueIsRange && minHandle}
+              {!this.hasHistogram &&
+                !this.precise &&
+                this.labelHandles &&
+                valueIsRange &&
+                minLabeledHandle}
+              {this.precise && !this.labelHandles && valueIsRange && minPreciseHandle}
+              {this.precise && this.labelHandles && valueIsRange && minLabeledPreciseHandle}
+              {this.hasHistogram &&
+                !this.precise &&
+                this.labelHandles &&
+                valueIsRange &&
+                minHistogramLabeledHandle}
+
+              {!this.precise && !this.labelHandles && handle}
+              {!this.hasHistogram && !this.precise && this.labelHandles && labeledHandle}
+              {!this.hasHistogram && this.precise && !this.labelHandles && preciseHandle}
+              {this.hasHistogram && this.precise && !this.labelHandles && histogramPreciseHandle}
+              {!this.hasHistogram && this.precise && this.labelHandles && labeledPreciseHandle}
+              {this.hasHistogram && !this.precise && this.labelHandles && histogramLabeledHandle}
+              {this.hasHistogram &&
+                this.precise &&
+                this.labelHandles &&
+                histogramLabeledPreciseHandle}
+              <HiddenFormInputSlot component={this} />
             </div>
           </div>
-          <div class="thumb-container">
-            {!this.precise && !this.labelHandles && valueIsRange && minHandle}
-            {!this.hasHistogram &&
-              !this.precise &&
-              this.labelHandles &&
-              valueIsRange &&
-              minLabeledHandle}
-            {this.precise && !this.labelHandles && valueIsRange && minPreciseHandle}
-            {this.precise && this.labelHandles && valueIsRange && minLabeledPreciseHandle}
-            {this.hasHistogram &&
-              !this.precise &&
-              this.labelHandles &&
-              valueIsRange &&
-              minHistogramLabeledHandle}
-
-            {!this.precise && !this.labelHandles && handle}
-            {!this.hasHistogram && !this.precise && this.labelHandles && labeledHandle}
-            {!this.hasHistogram && this.precise && !this.labelHandles && preciseHandle}
-            {this.hasHistogram && this.precise && !this.labelHandles && histogramPreciseHandle}
-            {!this.hasHistogram && this.precise && this.labelHandles && labeledPreciseHandle}
-            {this.hasHistogram && !this.precise && this.labelHandles && histogramLabeledHandle}
-            {this.hasHistogram &&
-              this.precise &&
-              this.labelHandles &&
-              histogramLabeledPreciseHandle}
-            <HiddenFormInputSlot component={this} />
-          </div>
-        </div>
+        </InteractiveContainer>
       </Host>
     );
   }
diff --git a/packages/calcite-components/src/components/sortable-list/sortable-list.tsx b/packages/calcite-components/src/components/sortable-list/sortable-list.tsx
index 85720792418..bf232da70a1 100644
--- a/packages/calcite-components/src/components/sortable-list/sortable-list.tsx
+++ b/packages/calcite-components/src/components/sortable-list/sortable-list.tsx
@@ -4,6 +4,7 @@ import {
   connectInteractive,
   disconnectInteractive,
   InteractiveComponent,
+  InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
 import { createObserver } from "../../utils/observers";
@@ -233,19 +234,21 @@ export class SortableList implements InteractiveComponent, SortableComponent {
   // --------------------------------------------------------------------------
 
   render(): VNode {
-    const { layout } = this;
+    const { disabled, layout } = this;
     const horizontal = layout === "horizontal" || false;
 
     return (
-      <div
-        class={{
-          [CSS.container]: true,
-          [CSS.containerVertical]: !horizontal,
-          [CSS.containerHorizontal]: horizontal,
-        }}
-      >
-        <slot />
-      </div>
+      <InteractiveContainer disabled={disabled}>
+        <div
+          class={{
+            [CSS.container]: true,
+            [CSS.containerVertical]: !horizontal,
+            [CSS.containerHorizontal]: horizontal,
+          }}
+        >
+          <slot />
+        </div>
+      </InteractiveContainer>
     );
   }
 }
diff --git a/packages/calcite-components/src/components/split-button/split-button.tsx b/packages/calcite-components/src/components/split-button/split-button.tsx
index cba41764055..c0ad5bc5949 100644
--- a/packages/calcite-components/src/components/split-button/split-button.tsx
+++ b/packages/calcite-components/src/components/split-button/split-button.tsx
@@ -13,7 +13,7 @@ import { OverlayPositioning } from "../../utils/floating-ui";
 import {
   connectInteractive,
   disconnectInteractive,
-  InteractiveComponent,
+  InteractiveComponent, InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
 import {
@@ -182,50 +182,52 @@ export class SplitButton implements InteractiveComponent, LoadableComponent {
     const buttonWidth = this.width === "auto" ? "auto" : "full";
 
     return (
-      <div class={CSS.container}>
-        <calcite-button
-          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}
-        </calcite-button>
-        <div class={CSS.dividerContainer}>
-          <div class={CSS.divider} />
-        </div>
-        <calcite-dropdown
-          disabled={this.disabled}
-          onClick={this.calciteSplitButtonSecondaryClickHandler}
-          open={this.active}
-          overlayPositioning={this.overlayPositioning}
-          placement="bottom-end"
-          scale={this.scale}
-          width-scale={this.scale}
-        >
+      <InteractiveContainer disabled={this.disabled}>
+        <div class={CSS.container}>
           <calcite-button
             appearance={this.appearance}
             disabled={this.disabled}
-            icon-start={this.dropdownIcon}
+            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.dropdownLabel}
+            label={this.primaryLabel}
+            loading={this.loading}
+            onClick={this.calciteSplitButtonPrimaryClickHandler}
             scale={this.scale}
-            slot="trigger"
-            splitChild={"secondary"}
+            splitChild={"primary"}
             type="button"
-          />
-          <slot />
-        </calcite-dropdown>
-      </div>
+            width={buttonWidth}
+          >
+            {this.primaryText}
+          </calcite-button>
+          <div class={CSS.dividerContainer}>
+            <div class={CSS.divider} />
+          </div>
+          <calcite-dropdown
+            disabled={this.disabled}
+            onClick={this.calciteSplitButtonSecondaryClickHandler}
+            open={this.active}
+            overlayPositioning={this.overlayPositioning}
+            placement="bottom-end"
+            scale={this.scale}
+            width-scale={this.scale}
+          >
+            <calcite-button
+              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"
+            />
+            <slot />
+          </calcite-dropdown>
+        </div>
+      </InteractiveContainer>
     );
   }
 
diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.tsx b/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
index 505b1f68102..04276937b43 100644
--- a/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
+++ b/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
@@ -17,6 +17,7 @@ import {
   connectInteractive,
   disconnectInteractive,
   InteractiveComponent,
+  InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
 import {
@@ -241,7 +242,7 @@ export class StepperItem
   }
 
   componentDidRender(): void {
-    updateHostInteraction(this, true);
+    updateHostInteraction(this);
   }
 
   disconnectedCallback(): void {
@@ -256,35 +257,38 @@ export class StepperItem
         aria-current={this.selected ? "step" : "false"}
         onClick={this.handleItemClick}
         onKeyDown={this.keyDownHandler}
+        tabIndex={this.disabled ? -1 : 0}
       >
-        <div class={CSS.container}>
-          {this.complete && (
-            <span aria-live="polite" class={CSS.visuallyHidden}>
-              {this.messages.complete}
-            </span>
-          )}
-          <div
-            class={CSS.stepperItemHeader}
-            tabIndex={
-              /* additional tab index logic needed because of display: contents */
-              this.layout === "horizontal" && !this.disabled && this.multipleViewMode ? 0 : null
-            }
-            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref={(el) => (this.headerEl = el)}
-          >
-            {this.icon ? this.renderIcon() : null}
-            {this.numbered ? (
-              <div class={CSS.stepperItemNumber}>{this.renderNumbers()}.</div>
-            ) : null}
-            <div class={CSS.stepperItemHeaderText}>
-              <span class={CSS.stepperItemHeading}>{this.heading}</span>
-              <span class={CSS.stepperItemDescription}>{this.description}</span>
+        <InteractiveContainer disabled={this.disabled}>
+          <div class={CSS.container}>
+            {this.complete && (
+              <span aria-live="polite" class={CSS.visuallyHidden}>
+                {this.messages.complete}
+              </span>
+            )}
+            <div
+              class={CSS.stepperItemHeader}
+              tabIndex={
+                /* additional tab index logic needed because of display: contents */
+                this.layout === "horizontal" && !this.disabled && this.multipleViewMode ? 0 : null
+              }
+              // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+              ref={(el) => (this.headerEl = el)}
+            >
+              {this.icon ? this.renderIcon() : null}
+              {this.numbered ? (
+                <div class={CSS.stepperItemNumber}>{this.renderNumbers()}.</div>
+              ) : null}
+              <div class={CSS.stepperItemHeaderText}>
+                <span class={CSS.stepperItemHeading}>{this.heading}</span>
+                <span class={CSS.stepperItemDescription}>{this.description}</span>
+              </div>
+            </div>
+            <div class={CSS.stepperItemContent}>
+              <slot />
             </div>
           </div>
-          <div class={CSS.stepperItemContent}>
-            <slot />
-          </div>
-        </div>
+        </InteractiveContainer>
       </Host>
     );
   }
diff --git a/packages/calcite-components/src/components/switch/switch.tsx b/packages/calcite-components/src/components/switch/switch.tsx
index cce1c657b61..71932b6b7c8 100644
--- a/packages/calcite-components/src/components/switch/switch.tsx
+++ b/packages/calcite-components/src/components/switch/switch.tsx
@@ -20,6 +20,7 @@ import {
   connectInteractive,
   disconnectInteractive,
   InteractiveComponent,
+  InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
 import { isActivationKey } from "../../utils/key";
@@ -199,20 +200,22 @@ export class Switch
   render(): VNode {
     return (
       <Host onClick={this.clickHandler} onKeyDown={this.keyDownHandler}>
-        <div
-          aria-checked={toAriaBoolean(this.checked)}
-          aria-label={getLabelText(this)}
-          class="container"
-          role="switch"
-          tabIndex={0}
-          // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-          ref={this.setSwitchEl}
-        >
-          <div class="track">
-            <div class="handle" />
+        <InteractiveContainer disabled={this.disabled}>
+          <div
+            aria-checked={toAriaBoolean(this.checked)}
+            aria-label={getLabelText(this)}
+            class="container"
+            role="switch"
+            tabIndex={0}
+            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+            ref={this.setSwitchEl}
+          >
+            <div class="track">
+              <div class="handle" />
+            </div>
+            <HiddenFormInputSlot component={this} />
           </div>
-          <HiddenFormInputSlot component={this} />
-        </div>
+        </InteractiveContainer>
       </Host>
     );
   }
diff --git a/packages/calcite-components/src/components/tab-title/tab-title.tsx b/packages/calcite-components/src/components/tab-title/tab-title.tsx
index 89ecddc91e2..9fbb148b712 100644
--- a/packages/calcite-components/src/components/tab-title/tab-title.tsx
+++ b/packages/calcite-components/src/components/tab-title/tab-title.tsx
@@ -19,6 +19,7 @@ import {
   connectInteractive,
   disconnectInteractive,
   InteractiveComponent,
+  InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
 import { createObserver } from "../../utils/observers";
@@ -213,25 +214,27 @@ export class TabTitle implements InteractiveComponent, LocalizedComponent, T9nCo
         aria-selected={toAriaBoolean(this.selected)}
         id={id}
         role="tab"
-        tabIndex={this.selected ? 0 : -1}
+        tabIndex={this.selected && !this.disabled ? 0 : -1}
       >
-        <div
-          class={{
-            container: true,
-            [CSS.iconPresent]: !!this.iconStart || !!this.iconEnd,
-            [`scale-${this.scale}`]: true,
-          }}
-          hidden={closed}
-          // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-          ref={(el) => this.resizeObserver?.observe(el)}
-        >
-          <div class={{ [CSS.content]: true, [CSS.contentHasText]: this.hasText }}>
-            {this.iconStart ? iconStartEl : null}
-            <slot />
-            {this.iconEnd ? iconEndEl : null}
+        <InteractiveContainer disabled={this.disabled}>
+          <div
+            class={{
+              container: true,
+              [CSS.iconPresent]: !!this.iconStart || !!this.iconEnd,
+              [`scale-${this.scale}`]: true,
+            }}
+            hidden={closed}
+            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+            ref={(el) => this.resizeObserver?.observe(el)}
+          >
+            <div class={{ [CSS.content]: true, [CSS.contentHasText]: this.hasText }}>
+              {this.iconStart ? iconStartEl : null}
+              <slot />
+              {this.iconEnd ? iconEndEl : null}
+            </div>
+            {this.renderCloseButton()}
           </div>
-          {this.renderCloseButton()}
-        </div>
+        </InteractiveContainer>
       </Host>
     );
   }
@@ -261,9 +264,7 @@ export class TabTitle implements InteractiveComponent, LocalizedComponent, T9nCo
   }
 
   componentDidRender(): void {
-    updateHostInteraction(this, () => {
-      return this.selected;
-    });
+    updateHostInteraction(this);
   }
 
   //--------------------------------------------------------------------------
diff --git a/packages/calcite-components/src/components/table-cell/table-cell.scss b/packages/calcite-components/src/components/table-cell/table-cell.scss
index 493332b12ba..e6bc2a40ab5 100644
--- a/packages/calcite-components/src/components/table-cell/table-cell.scss
+++ b/packages/calcite-components/src/components/table-cell/table-cell.scss
@@ -77,3 +77,5 @@ td {
     @apply pointer-events-none mt-1;
   }
 }
+
+@include disabled();
diff --git a/packages/calcite-components/src/components/table-cell/table-cell.tsx b/packages/calcite-components/src/components/table-cell/table-cell.tsx
index 789a04fe5c9..4eab7423e28 100644
--- a/packages/calcite-components/src/components/table-cell/table-cell.tsx
+++ b/packages/calcite-components/src/components/table-cell/table-cell.tsx
@@ -17,6 +17,7 @@ import {
   connectInteractive,
   disconnectInteractive,
   InteractiveComponent,
+  InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
 
@@ -211,32 +212,34 @@ export class TableCell
 
     return (
       <Host>
-        <td
-          aria-disabled={this.disabled}
-          class={{
-            [CSS.footerCell]: this.parentRowType === "foot",
-            [CSS.numberCell]: this.numberCell,
-            [CSS.selectionCell]: this.selectionCell,
-            [CSS.selectedCell]: this.parentRowIsSelected,
-            [CSS_UTILITY.rtl]: dir === "rtl",
-          }}
-          colSpan={this.colSpan}
-          onBlur={this.onContainerBlur}
-          onFocus={this.onContainerFocus}
-          role="gridcell"
-          rowSpan={this.rowSpan}
-          tabIndex={this.disabled ? -1 : 0}
-          // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-          ref={(el) => (this.containerEl = el)}
-        >
-          {(this.selectionCell || this.readCellContentsToAT) && this.focused && (
-            <span aria-hidden={true} aria-live="polite" class={CSS.assistiveText}>
-              {this.selectionCell && this.selectionText}
-              {this.readCellContentsToAT && !this.selectionCell && this.contentsText}
-            </span>
-          )}
-          <slot onSlotchange={this.updateScreenReaderContentsText} />
-        </td>
+        <InteractiveContainer disabled={this.disabled}>
+          <td
+            aria-disabled={this.disabled}
+            class={{
+              [CSS.footerCell]: this.parentRowType === "foot",
+              [CSS.numberCell]: this.numberCell,
+              [CSS.selectionCell]: this.selectionCell,
+              [CSS.selectedCell]: this.parentRowIsSelected,
+              [CSS_UTILITY.rtl]: dir === "rtl",
+            }}
+            colSpan={this.colSpan}
+            onBlur={this.onContainerBlur}
+            onFocus={this.onContainerFocus}
+            role="gridcell"
+            rowSpan={this.rowSpan}
+            tabIndex={this.disabled ? -1 : 0}
+            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+            ref={(el) => (this.containerEl = el)}
+          >
+            {(this.selectionCell || this.readCellContentsToAT) && this.focused && (
+              <span aria-hidden={true} aria-live="polite" class={CSS.assistiveText}>
+                {this.selectionCell && this.selectionText}
+                {this.readCellContentsToAT && !this.selectionCell && this.contentsText}
+              </span>
+            )}
+            <slot onSlotchange={this.updateScreenReaderContentsText} />
+          </td>
+        </InteractiveContainer>
       </Host>
     );
   }
diff --git a/packages/calcite-components/src/components/table-row/table-row.tsx b/packages/calcite-components/src/components/table-row/table-row.tsx
index 2cab4e0820d..f2498f94e16 100644
--- a/packages/calcite-components/src/components/table-row/table-row.tsx
+++ b/packages/calcite-components/src/components/table-row/table-row.tsx
@@ -20,6 +20,7 @@ import {
   connectInteractive,
   disconnectInteractive,
   InteractiveComponent,
+  InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
 import { getIconScale } from "../../utils/component";
@@ -373,21 +374,23 @@ export class TableRow implements InteractiveComponent, LocalizedComponent {
   render(): VNode {
     return (
       <Host>
-        <tr
-          aria-disabled={this.disabled}
-          aria-rowindex={this.positionAll + 1}
-          aria-selected={this.selected}
-          onKeyDown={(event) => this.keyDownHandler(event)}
-          // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-          ref={(el) => (this.tableRowEl = el)}
-        >
-          {this.numbered && this.renderNumberedCell()}
-          {this.selectionMode !== "none" && this.renderSelectableCell()}
-          <slot
-            onSlotchange={this.updateCells}
-            ref={(el) => (this.tableRowSlotEl = el as HTMLSlotElement)}
-          />
-        </tr>
+        <InteractiveContainer disabled={this.disabled}>
+          <tr
+            aria-disabled={this.disabled}
+            aria-rowindex={this.positionAll + 1}
+            aria-selected={this.selected}
+            onKeyDown={(event) => this.keyDownHandler(event)}
+            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+            ref={(el) => (this.tableRowEl = el)}
+          >
+            {this.numbered && this.renderNumberedCell()}
+            {this.selectionMode !== "none" && this.renderSelectableCell()}
+            <slot
+              onSlotchange={this.updateCells}
+              ref={(el) => (this.tableRowSlotEl = el as HTMLSlotElement)}
+            />
+          </tr>
+        </InteractiveContainer>
       </Host>
     );
   }
diff --git a/packages/calcite-components/src/components/text-area/text-area.tsx b/packages/calcite-components/src/components/text-area/text-area.tsx
index eb1af2be455..3ff576979e7 100644
--- a/packages/calcite-components/src/components/text-area/text-area.tsx
+++ b/packages/calcite-components/src/components/text-area/text-area.tsx
@@ -43,6 +43,7 @@ import {
   connectInteractive,
   disconnectInteractive,
   InteractiveComponent,
+  InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
 import { CharacterLengthObj } from "./interfaces";
@@ -264,78 +265,80 @@ export class TextArea
     const hasFooter = this.startSlotHasElements || this.endSlotHasElements || !!this.maxLength;
     return (
       <Host>
-        <textarea
-          aria-describedby={this.guid}
-          aria-invalid={toAriaBoolean(this.isCharacterLimitExceeded())}
-          aria-label={getLabelText(this)}
-          autofocus={this.autofocus}
-          class={{
-            [CSS.readOnly]: this.readOnly,
-            [CSS.textAreaInvalid]: this.isCharacterLimitExceeded(),
-            [CSS.footerSlotted]: this.endSlotHasElements && this.startSlotHasElements,
-            [CSS.blockSizeFull]: !hasFooter,
-            [CSS.borderColor]: !hasFooter,
-          }}
-          cols={this.columns}
-          disabled={this.disabled}
-          name={this.name}
-          onChange={this.handleChange}
-          onInput={this.handleInput}
-          placeholder={this.placeholder}
-          readonly={this.readOnly}
-          required={this.required}
-          rows={this.rows}
-          value={this.value}
-          wrap={this.wrap}
-          // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-          ref={this.setTextAreaEl}
-        />
-        <span class={{ [CSS.content]: true }}>
-          <slot onSlotchange={this.contentSlotChangeHandler} />
-        </span>
-        <footer
-          class={{
-            [CSS.footer]: true,
-            [CSS.readOnly]: this.readOnly,
-            [CSS.hide]: !hasFooter,
-          }}
-          ref={(el) => (this.footerEl = el as HTMLElement)}
-        >
-          <div
+        <InteractiveContainer disabled={this.disabled}>
+          <textarea
+            aria-describedby={this.guid}
+            aria-invalid={toAriaBoolean(this.isCharacterLimitExceeded())}
+            aria-label={getLabelText(this)}
+            autofocus={this.autofocus}
+            class={{
+              [CSS.readOnly]: this.readOnly,
+              [CSS.textAreaInvalid]: this.isCharacterLimitExceeded(),
+              [CSS.footerSlotted]: this.endSlotHasElements && this.startSlotHasElements,
+              [CSS.blockSizeFull]: !hasFooter,
+              [CSS.borderColor]: !hasFooter,
+            }}
+            cols={this.columns}
+            disabled={this.disabled}
+            name={this.name}
+            onChange={this.handleChange}
+            onInput={this.handleInput}
+            placeholder={this.placeholder}
+            readonly={this.readOnly}
+            required={this.required}
+            rows={this.rows}
+            value={this.value}
+            wrap={this.wrap}
+            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+            ref={this.setTextAreaEl}
+          />
+          <span class={{ [CSS.content]: true }}>
+            <slot onSlotchange={this.contentSlotChangeHandler} />
+          </span>
+          <footer
             class={{
-              [CSS.container]: true,
-              [CSS.footerEndSlotOnly]: !this.startSlotHasElements && this.endSlotHasElements,
+              [CSS.footer]: true,
+              [CSS.readOnly]: this.readOnly,
+              [CSS.hide]: !hasFooter,
             }}
+            ref={(el) => (this.footerEl = el as HTMLElement)}
           >
-            <slot
-              name={SLOTS.footerStart}
-              onSlotchange={(event) =>
-                (this.startSlotHasElements = slotChangeHasAssignedElement(event))
-              }
-            />
-            <slot
-              name={SLOTS.footerEnd}
-              onSlotchange={(event) =>
-                (this.endSlotHasElements = slotChangeHasAssignedElement(event))
-              }
+            <div
+              class={{
+                [CSS.container]: true,
+                [CSS.footerEndSlotOnly]: !this.startSlotHasElements && this.endSlotHasElements,
+              }}
+            >
+              <slot
+                name={SLOTS.footerStart}
+                onSlotchange={(event) =>
+                  (this.startSlotHasElements = slotChangeHasAssignedElement(event))
+                }
+              />
+              <slot
+                name={SLOTS.footerEnd}
+                onSlotchange={(event) =>
+                  (this.endSlotHasElements = slotChangeHasAssignedElement(event))
+                }
+              />
+            </div>
+            {this.renderCharacterLimit()}
+          </footer>
+          <HiddenFormInputSlot component={this} />
+          {this.isCharacterLimitExceeded() && (
+            <span aria-hidden={true} aria-live="polite" class={CSS.assistiveText} id={this.guid}>
+              {this.replacePlaceHoldersInMessages()}
+            </span>
+          )}
+          {this.validationMessage ? (
+            <Validation
+              icon={this.validationIcon}
+              message={this.validationMessage}
+              scale={this.scale}
+              status={this.status}
             />
-          </div>
-          {this.renderCharacterLimit()}
-        </footer>
-        <HiddenFormInputSlot component={this} />
-        {this.isCharacterLimitExceeded() && (
-          <span aria-hidden={true} aria-live="polite" class={CSS.assistiveText} id={this.guid}>
-            {this.replacePlaceHoldersInMessages()}
-          </span>
-        )}
-        {this.validationMessage ? (
-          <Validation
-            icon={this.validationIcon}
-            message={this.validationMessage}
-            scale={this.scale}
-            status={this.status}
-          />
-        ) : null}
+          ) : null}
+        </InteractiveContainer>
       </Host>
     );
   }
diff --git a/packages/calcite-components/src/components/tile-select-group/tile-select-group.tsx b/packages/calcite-components/src/components/tile-select-group/tile-select-group.tsx
index 7cbf662d825..d90ae03c230 100644
--- a/packages/calcite-components/src/components/tile-select-group/tile-select-group.tsx
+++ b/packages/calcite-components/src/components/tile-select-group/tile-select-group.tsx
@@ -3,6 +3,7 @@ import {
   connectInteractive,
   disconnectInteractive,
   InteractiveComponent,
+  InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
 import { TileSelectGroupLayout } from "./interfaces";
@@ -59,6 +60,10 @@ export class TileSelectGroup implements InteractiveComponent {
   }
 
   render(): VNode {
-    return <slot />;
+    return (
+      <InteractiveContainer disabled={this.disabled}>
+        <slot />
+      </InteractiveContainer>
+    );
   }
 }
diff --git a/packages/calcite-components/src/components/tile-select/tile-select.tsx b/packages/calcite-components/src/components/tile-select/tile-select.tsx
index 2da6c7b5523..d170772a3ff 100644
--- a/packages/calcite-components/src/components/tile-select/tile-select.tsx
+++ b/packages/calcite-components/src/components/tile-select/tile-select.tsx
@@ -16,6 +16,7 @@ import {
   connectInteractive,
   disconnectInteractive,
   InteractiveComponent,
+  InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
 import {
@@ -311,41 +312,43 @@ export class TileSelect implements InteractiveComponent, LoadableComponent {
     const isLargeVisual = heading && icon && !description;
     const renderIcon = Boolean(icon);
     return (
-      <div
-        class={{
-          checked,
-          container: true,
-          [CSS.description]: Boolean(description),
-          [CSS.descriptionOnly]: Boolean(!heading && !icon && description),
-          disabled,
-          focused,
-          [CSS.heading]: Boolean(heading),
-          [CSS.headingOnly]: heading && !icon && !description,
-          [CSS.icon]: renderIcon,
-          [CSS.iconOnly]: !heading && icon && !description,
-          [CSS.inputAlignmentEnd]: inputAlignment === "end",
-          [CSS.inputAlignmentStart]: inputAlignment === "start",
-          [CSS.inputEnabled]: inputEnabled,
-          [CSS.largeVisual]: isLargeVisual,
-          [CSS.widthAuto]: width === "auto",
-          [CSS.widthFull]: width === "full",
-        }}
-      >
-        <div class={{ [CSS.tile]: true, [CSS.tileLargeVisual]: isLargeVisual }}>
-          {icon && (
-            <div class={{ [CSS.icon]: renderIcon }}>
-              <calcite-icon flipRtl={iconFlipRtl} icon={icon} scale="l" />
-            </div>
-          )}
-          <div class={CSS.tileContentContainer}>
-            <div class={CSS.tileContent}>
-              {heading && <div class={CSS.tileHeading}>{heading}</div>}
-              {description && <div class={CSS.tileDescription}>{description}</div>}
+      <InteractiveContainer disabled={disabled}>
+        <div
+          class={{
+            checked,
+            container: true,
+            [CSS.description]: Boolean(description),
+            [CSS.descriptionOnly]: Boolean(!heading && !icon && description),
+            disabled,
+            focused,
+            [CSS.heading]: Boolean(heading),
+            [CSS.headingOnly]: heading && !icon && !description,
+            [CSS.icon]: renderIcon,
+            [CSS.iconOnly]: !heading && icon && !description,
+            [CSS.inputAlignmentEnd]: inputAlignment === "end",
+            [CSS.inputAlignmentStart]: inputAlignment === "start",
+            [CSS.inputEnabled]: inputEnabled,
+            [CSS.largeVisual]: isLargeVisual,
+            [CSS.widthAuto]: width === "auto",
+            [CSS.widthFull]: width === "full",
+          }}
+        >
+          <div class={{ [CSS.tile]: true, [CSS.tileLargeVisual]: isLargeVisual }}>
+            {icon && (
+              <div class={{ [CSS.icon]: renderIcon }}>
+                <calcite-icon flipRtl={iconFlipRtl} icon={icon} scale="l" />
+              </div>
+            )}
+            <div class={CSS.tileContentContainer}>
+              <div class={CSS.tileContent}>
+                {heading && <div class={CSS.tileHeading}>{heading}</div>}
+                {description && <div class={CSS.tileDescription}>{description}</div>}
+              </div>
             </div>
           </div>
+          <slot />
         </div>
-        <slot />
-      </div>
+      </InteractiveContainer>
     );
   }
 }
diff --git a/packages/calcite-components/src/components/tile/tile.tsx b/packages/calcite-components/src/components/tile/tile.tsx
index 892cd9d67cf..4bda6b6e4d3 100644
--- a/packages/calcite-components/src/components/tile/tile.tsx
+++ b/packages/calcite-components/src/components/tile/tile.tsx
@@ -1,4 +1,4 @@
-import { Component, Element, Fragment, h, Prop, VNode } from "@stencil/core";
+import { Component, Element, h, Prop, VNode } from "@stencil/core";
 import {
   ConditionalSlotComponent,
   connectConditionalSlotComponent,
@@ -9,6 +9,7 @@ import {
   connectInteractive,
   disconnectInteractive,
   InteractiveComponent,
+  InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
 import { SLOTS } from "./resources";
@@ -146,16 +147,18 @@ export class Tile implements ConditionalSlotComponent, InteractiveComponent {
   }
 
   render(): VNode {
+    const { disabled } = this;
+
     return (
-      <Fragment>
+      <InteractiveContainer disabled={disabled}>
         {this.href ? (
-          <calcite-link disabled={this.disabled} href={this.href}>
+          <calcite-link disabled={disabled} href={this.href}>
             {this.renderTile()}
           </calcite-link>
         ) : (
           this.renderTile()
         )}
-      </Fragment>
+      </InteractiveContainer>
     );
   }
 }
diff --git a/packages/calcite-components/src/components/tree-item/tree-item.e2e.ts b/packages/calcite-components/src/components/tree-item/tree-item.e2e.ts
index f8ba96e0c45..5d9b136fe52 100644
--- a/packages/calcite-components/src/components/tree-item/tree-item.e2e.ts
+++ b/packages/calcite-components/src/components/tree-item/tree-item.e2e.ts
@@ -285,7 +285,7 @@ describe("calcite-tree-item", () => {
 
       const item = await page.find("#newbie");
       expect(item).toEqualAttribute("aria-hidden", "false");
-      expect(item.tabIndex).toBe(-1); // items are programmatically focused
+      expect(item.tabIndex).toBe(0);
     });
   });
 
diff --git a/packages/calcite-components/src/components/tree-item/tree-item.tsx b/packages/calcite-components/src/components/tree-item/tree-item.tsx
index 369b9f55092..ebe7a27f462 100644
--- a/packages/calcite-components/src/components/tree-item/tree-item.tsx
+++ b/packages/calcite-components/src/components/tree-item/tree-item.tsx
@@ -27,6 +27,7 @@ import {
   connectInteractive,
   disconnectInteractive,
   InteractiveComponent,
+  InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
 import { CSS_UTILITY } from "../../utils/resources";
@@ -185,10 +186,7 @@ export class TreeItem implements ConditionalSlotComponent, InteractiveComponent
   }
 
   componentDidRender(): void {
-    updateHostInteraction(
-      this,
-      () => false // programmatically focusable
-    );
+    updateHostInteraction(this);
   }
 
   //--------------------------------------------------------------------------
@@ -282,44 +280,47 @@ export class TreeItem implements ConditionalSlotComponent, InteractiveComponent
         aria-selected={this.selected ? "true" : showCheckmark ? "false" : undefined}
         calcite-hydrated-hidden={hidden}
         role="treeitem"
+        tabIndex={this.disabled ? -1 : 0}
       >
-        <div class={{ [CSS.itemExpanded]: isExpanded }}>
-          <div class={CSS.nodeAndActionsContainer}>
+        <InteractiveContainer disabled={this.disabled}>
+          <div class={{ [CSS.itemExpanded]: isExpanded }}>
+            <div class={CSS.nodeAndActionsContainer}>
+              <div
+                class={{
+                  [CSS.nodeContainer]: true,
+                  [CSS_UTILITY.rtl]: rtl,
+                }}
+                data-selection-mode={this.selectionMode}
+                // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+                ref={(el) => (this.defaultSlotWrapper = el as HTMLElement)}
+              >
+                {chevron}
+                {itemIndicator}
+                {this.iconStart ? iconStartEl : null}
+                {checkbox ? checkbox : defaultSlotNode}
+              </div>
+              <div
+                class={CSS.actionsEnd}
+                hidden={!hasEndActions}
+                ref={(el) => (this.actionSlotWrapper = el as HTMLElement)}
+              >
+                {slotNode}
+              </div>
+            </div>
+
             <div
               class={{
-                [CSS.nodeContainer]: true,
+                [CSS.childrenContainer]: true,
                 [CSS_UTILITY.rtl]: rtl,
               }}
-              data-selection-mode={this.selectionMode}
-              // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-              ref={(el) => (this.defaultSlotWrapper = el as HTMLElement)}
-            >
-              {chevron}
-              {itemIndicator}
-              {this.iconStart ? iconStartEl : null}
-              {checkbox ? checkbox : defaultSlotNode}
-            </div>
-            <div
-              class={CSS.actionsEnd}
-              hidden={!hasEndActions}
-              ref={(el) => (this.actionSlotWrapper = el as HTMLElement)}
+              data-test-id="calcite-tree-children"
+              onClick={this.childrenClickHandler}
+              role={this.hasChildren ? "group" : undefined}
             >
-              {slotNode}
+              <slot name={SLOTS.children} />
             </div>
           </div>
-
-          <div
-            class={{
-              [CSS.childrenContainer]: true,
-              [CSS_UTILITY.rtl]: rtl,
-            }}
-            data-test-id="calcite-tree-children"
-            onClick={this.childrenClickHandler}
-            role={this.hasChildren ? "group" : undefined}
-          >
-            <slot name={SLOTS.children} />
-          </div>
-        </div>
+        </InteractiveContainer>
       </Host>
     );
   }
diff --git a/packages/calcite-components/src/components/value-list-item/value-list-item.tsx b/packages/calcite-components/src/components/value-list-item/value-list-item.tsx
index d3f1b672c4c..d1fb45e6457 100644
--- a/packages/calcite-components/src/components/value-list-item/value-list-item.tsx
+++ b/packages/calcite-components/src/components/value-list-item/value-list-item.tsx
@@ -21,6 +21,7 @@ import {
   connectInteractive,
   disconnectInteractive,
   InteractiveComponent,
+  InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
 import {
@@ -152,7 +153,7 @@ export class ValueListItem
   }
 
   componentDidRender(): void {
-    updateHostInteraction(this, this.el.closest("calcite-value-list") ? "managed" : false);
+    updateHostInteraction(this);
   }
 
   // --------------------------------------------------------------------------
@@ -287,24 +288,26 @@ export class ValueListItem
   render(): VNode {
     return (
       <Host id={this.el.id || this.guid}>
-        {this.renderHandle()}
-        <calcite-pick-list-item
-          description={this.description}
-          deselectDisabled={this.deselectDisabled}
-          disabled={this.disabled}
-          label={this.label}
-          metadata={this.metadata}
-          nonInteractive={this.nonInteractive}
-          onCalciteListItemChange={this.handleSelectChange}
-          removable={this.removable}
-          selected={this.selected}
-          value={this.value}
-          // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-          ref={this.getPickListRef}
-        >
-          {this.renderActionsStart()}
-          {this.renderActionsEnd()}
-        </calcite-pick-list-item>
+        <InteractiveContainer disabled={this.disabled}>
+          {this.renderHandle()}
+          <calcite-pick-list-item
+            description={this.description}
+            deselectDisabled={this.deselectDisabled}
+            disabled={this.disabled}
+            label={this.label}
+            metadata={this.metadata}
+            nonInteractive={this.nonInteractive}
+            onCalciteListItemChange={this.handleSelectChange}
+            removable={this.removable}
+            selected={this.selected}
+            value={this.value}
+            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+            ref={this.getPickListRef}
+          >
+            {this.renderActionsStart()}
+            {this.renderActionsEnd()}
+          </calcite-pick-list-item>
+        </InteractiveContainer>
       </Host>
     );
   }
diff --git a/packages/calcite-components/src/utils/interactive.spec.ts b/packages/calcite-components/src/utils/interactive.spec.ts
index fb141490e87..ab7f211fa56 100644
--- a/packages/calcite-components/src/utils/interactive.spec.ts
+++ b/packages/calcite-components/src/utils/interactive.spec.ts
@@ -15,14 +15,12 @@ describe("interactive", () => {
 
     updateHostInteraction(fakeInteractive);
 
-    expect(fakeInteractiveEl.getAttribute("tabindex")).toBeNull();
     expect(fakeInteractiveEl.getAttribute("aria-disabled")).toBeNull();
 
     fakeInteractive.disabled = true;
 
     updateHostInteraction(fakeInteractive);
 
-    expect(fakeInteractiveEl.getAttribute("tabindex")).toBe("-1");
     expect(fakeInteractiveEl.getAttribute("aria-disabled")).toBe("true");
   });
 });
diff --git a/packages/calcite-components/src/utils/interactive.ts b/packages/calcite-components/src/utils/interactive.tsx
similarity index 84%
rename from packages/calcite-components/src/utils/interactive.ts
rename to packages/calcite-components/src/utils/interactive.tsx
index 1b9384a5000..19e57379c68 100644
--- a/packages/calcite-components/src/utils/interactive.ts
+++ b/packages/calcite-components/src/utils/interactive.tsx
@@ -1,4 +1,6 @@
 import { getUserAgentString } from "./browser";
+import { JSXAttributes } from "@stencil/core/internal";
+import { FunctionalComponent, h, VNode } from "@stencil/core";
 
 export interface InteractiveComponent {
   /**
@@ -17,8 +19,6 @@ export interface InteractiveComponent {
   disabled: boolean;
 }
 
-type HostIsTabbablePredicate = () => boolean;
-
 /**
  * Exported for testing purposes only.
  *
@@ -88,14 +88,9 @@ const captureOnlyOptions = { capture: true } as const;
  * technically, users can override `tabindex` and restore keyboard navigation, but this will be considered user error
  *
  * @param component
- * @param hostIsTabbable – when set to true or its predicate returns true, the host is tabbable and will be managed by the helper. Set to "managed" for cases where a component's parent determines which item is tabbable (i.e., sets `tabindex` to allow tabbing).
  */
-export function updateHostInteraction(
-  component: InteractiveComponent,
-  hostIsTabbable: boolean | HostIsTabbablePredicate | "managed" = false
-): void {
+export function updateHostInteraction(component: InteractiveComponent): void {
   if (component.disabled) {
-    component.el.setAttribute("tabindex", "-1");
     component.el.setAttribute("aria-disabled", "true");
 
     if (component.el.contains(document.activeElement)) {
@@ -109,16 +104,6 @@ export function updateHostInteraction(
 
   restoreInteraction(component);
 
-  if (typeof hostIsTabbable === "function") {
-    component.el.setAttribute("tabindex", hostIsTabbable.call(component) ? "0" : "-1");
-  } else if (hostIsTabbable === true) {
-    component.el.setAttribute("tabindex", "0");
-  } else if (hostIsTabbable === false) {
-    component.el.removeAttribute("tabindex");
-  } else {
-    // noop for "managed" as owning component will manage its tab index
-  }
-
   component.el.removeAttribute("aria-disabled");
 }
 
@@ -173,7 +158,8 @@ export function connectInteractive(component: InteractiveComponent): void {
   }
 
   const parent =
-    component.el.parentElement || component.el; /* assume element is host if it has no parent when connected */
+    component.el.parentElement ||
+    component.el; /* assume element is host if it has no parent when connected */
   interactiveElementToParent.set(component.el as InteractiveHTMLElement, parent);
   blockInteraction(component);
 }
@@ -194,3 +180,24 @@ export function disconnectInteractive(component: InteractiveComponent): void {
   interactiveElementToParent.delete(component.el as InteractiveHTMLElement);
   restoreInteraction(component);
 }
+
+export interface InteractiveContainerOptions extends JSXAttributes {
+  disabled: boolean;
+}
+
+export const CSS = {
+  container: "interaction-container",
+};
+
+export function InteractiveContainer(
+  { disabled }: InteractiveContainerOptions,
+  children: VNode[]
+): FunctionalComponent {
+  return (
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore-error - `inert` is missing from Stencil's types (see https://github.com/ionic-team/stencil/issues/5071)
+    <div class={CSS.container} inert={disabled}>
+      {...children}
+    </div>
+  );
+}
diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/formatExtraOutput.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/formatExtraOutput.ts
index 8dfb7f5e594..6bbfb391646 100644
--- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/formatExtraOutput.ts
+++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/formatExtraOutput.ts
@@ -49,7 +49,8 @@ export function formatExtraOutput(
                 const m = ensureIfArray(outputObject[`${output}.${args.platform}`]);
                 const cssProps = m.map((o) => `${o}`.replaceAll("$", "--"));
                 return Array.isArray(m)
-                  ? `${output === "light" ? `:root {${cssProps.join("")}}` : ""
+                  ? `${
+                      output === "light" ? `:root {${cssProps.join("")}}` : ""
                     }@media (${mediaSchemed}) {.calcite-mode-auto {${cssProps.join("")}}}`
                   : "";
               })