diff --git a/test/wdio/ts-target/components.d.ts b/test/wdio/ts-target/components.d.ts
index fd443705545..a650cf506fa 100644
--- a/test/wdio/ts-target/components.d.ts
+++ b/test/wdio/ts-target/components.d.ts
@@ -6,6 +6,18 @@
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 export namespace Components {
+    interface CompositionCheckboxGroup {
+    }
+    interface CompositionRadioGroup {
+    }
+    /**
+     * Main component that demonstrates composition-based scaling
+     * with 3 components and 2 controllers (ValidationController and FocusController)
+     */
+    interface CompositionScalingDemo {
+    }
+    interface CompositionTextInput {
+    }
     interface ExtendedCmp {
         "method1": () => Promise<void>;
         "method2": () => Promise<void>;
@@ -54,10 +66,81 @@ export namespace Components {
          */
         "prop2": string;
     }
+    /**
+     * ConflictsCmp - Demonstrates decorator conflicts in inheritance chains
+     * This component:
+     * 1. Extends ConflictsBase (inherits base decorators)
+     * 2. Defines duplicate decorators with same names but different values/behavior
+     * 3. Verifies component decorators override base decorators
+     * 4. Renders UI showing which version is active (component should win)
+     */
+    interface ExtendsConflicts {
+        /**
+          * Non-duplicate method for comparison
+         */
+        "baseOnlyMethod": () => Promise<string>;
+        /**
+          * @default 'base only prop value'
+         */
+        "baseOnlyProp": string;
+        /**
+          * Duplicate method - same name as base, should override Component version should be called, not base version
+         */
+        "duplicateMethod": () => Promise<string>;
+        /**
+          * @default 'component prop value'
+         */
+        "duplicateProp": string;
+        /**
+          * Method to get combined call log (base + component)
+         */
+        "getCombinedMethodCallLog": () => Promise<string[]>;
+        /**
+          * Method to get component method call log
+         */
+        "getComponentMethodCallLog": () => Promise<string[]>;
+        /**
+          * Method to get the call log for testing
+         */
+        "getMethodCallLog": () => Promise<string[]>;
+        /**
+          * Method to reset all call logs
+         */
+        "resetAllCallLogs": () => Promise<void>;
+        /**
+          * Method to reset component call log
+         */
+        "resetComponentMethodCallLog": () => Promise<void>;
+        /**
+          * Method to reset call log for testing
+         */
+        "resetMethodCallLog": () => Promise<void>;
+        /**
+          * Method to update component-only state
+         */
+        "updateComponentOnlyState": (value: string) => Promise<void>;
+        /**
+          * Method to update duplicate state for testing
+         */
+        "updateDuplicateState": (value: string) => Promise<void>;
+    }
     interface ExtendsControllerUpdates {
     }
     interface ExtendsDirectState {
     }
+    /**
+     * EventsCmp - Demonstrates
+     * @Listen decorator inheritance
+     * This component:
+     * 1. Extends EventBase (inherits base
+     * @Listen decorators)
+     * 2. Adds additional
+     * @Listen decorators
+     * 3. Overrides base event handler
+     * 4. Demonstrates event bubbling and propagation
+     */
+    interface ExtendsEvents {
+    }
     interface ExtendsExternal {
         "method1": () => Promise<void>;
         "method2": () => Promise<void>;
@@ -120,6 +203,53 @@ export namespace Components {
          */
         "updateDisplay": (value: string) => Promise<void>;
     }
+    /**
+     * MixedDecoratorsCmp - Demonstrates mixed decorator type conflicts in inheritance chains
+     * This component:
+     * 1. Extends MixedDecoratorsBase (inherits base decorators)
+     * 2. Defines conflicting decorators with same names but different decorator types
+     * 3. Verifies runtime behavior when mixed decorator types exist
+     * 4. Renders UI showing which decorator type is active (component decorator type should win)
+     */
+    interface ExtendsMixedDecorators {
+        /**
+          * Non-conflicting method for comparison
+         */
+        "baseOnlyMethod": () => Promise<string>;
+        /**
+          * @default 'base only prop value'
+         */
+        "baseOnlyProp": string;
+        /**
+          * Method to get the call log for testing
+         */
+        "getMethodCallLog": () => Promise<string[]>;
+        /**
+          * Method that will conflict with
+          * @Prop in component
+         */
+        "mixedMethodName": () => Promise<string>;
+        /**
+          * @default 'base prop value'
+         */
+        "mixedName": string;
+        /**
+          * @default 'component prop value'
+         */
+        "mixedStateName": string;
+        /**
+          * Method to reset call log for testing
+         */
+        "resetMethodCallLog": () => Promise<void>;
+        /**
+          * Method to update component-only state
+         */
+        "updateComponentOnlyState": (value: string) => Promise<void>;
+        /**
+          * Method to update mixedName state for testing
+         */
+        "updateMixedName": (value: string) => Promise<void>;
+    }
     interface ExtendsMixinCmp {
         "method1": () => Promise<void>;
         "method2": () => Promise<void>;
@@ -179,6 +309,59 @@ export namespace Components {
     }
     interface ExtendsViaHostCmp {
     }
+    /**
+     * WatchCmp - Demonstrates
+     * @Watch decorator inheritance
+     * This component:
+     * 1. Extends WatchBase (inherits base
+     * @Watch decorators)
+     * 2. Adds additional
+     * @Watch decorators
+     * 3. Overrides base watch handler (overrideProp)
+     * 4. Demonstrates watch execution order
+     * 5. Demonstrates reactive property chains
+     */
+    interface ExtendsWatch {
+        /**
+          * @default 0
+         */
+        "baseCount": number;
+        /**
+          * @default 'base prop initial'
+         */
+        "baseProp": string;
+        /**
+          * @default 'child prop initial'
+         */
+        "childProp": string;
+        "incrementBaseCount": () => Promise<void>;
+        "incrementBaseCounter": () => Promise<void>;
+        "incrementChildCounter": () => Promise<void>;
+        /**
+          * @default 'override prop initial'
+         */
+        "overrideProp": string;
+        "resetWatchLogs": () => Promise<void>;
+        "updateBaseCount": (value: number) => Promise<void>;
+        "updateBaseCounter": (value: number) => Promise<void>;
+        "updateBaseProp": (value: string) => Promise<void>;
+        "updateBaseState": (value: string) => Promise<void>;
+        "updateChildCounter": (value: number) => Promise<void>;
+        "updateChildProp": (value: string) => Promise<void>;
+        "updateOverrideProp": (value: string) => Promise<void>;
+    }
+    interface InheritanceCheckboxGroup {
+    }
+    interface InheritanceRadioGroup {
+    }
+    /**
+     * Main component that demonstrates inheritance-based scaling
+     * with 3 components and 2 controllers (ValidationController and FocusController)
+     */
+    interface InheritanceScalingDemo {
+    }
+    interface InheritanceTextInput {
+    }
     interface TsTargetProps {
         /**
           * @default 'basicProp'
@@ -192,11 +375,77 @@ export namespace Components {
         "dynamicLifecycle": string[];
     }
 }
+export interface CompositionCheckboxGroupCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCompositionCheckboxGroupElement;
+}
+export interface CompositionRadioGroupCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCompositionRadioGroupElement;
+}
 export interface ExtendsLocalCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLExtendsLocalElement;
 }
+export interface InheritanceCheckboxGroupCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLInheritanceCheckboxGroupElement;
+}
+export interface InheritanceRadioGroupCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLInheritanceRadioGroupElement;
+}
 declare global {
+    interface HTMLCompositionCheckboxGroupElementEventMap {
+        "valueChange": string[];
+    }
+    interface HTMLCompositionCheckboxGroupElement extends Components.CompositionCheckboxGroup, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLCompositionCheckboxGroupElementEventMap>(type: K, listener: (this: HTMLCompositionCheckboxGroupElement, ev: CompositionCheckboxGroupCustomEvent<HTMLCompositionCheckboxGroupElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLCompositionCheckboxGroupElementEventMap>(type: K, listener: (this: HTMLCompositionCheckboxGroupElement, ev: CompositionCheckboxGroupCustomEvent<HTMLCompositionCheckboxGroupElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLCompositionCheckboxGroupElement: {
+        prototype: HTMLCompositionCheckboxGroupElement;
+        new (): HTMLCompositionCheckboxGroupElement;
+    };
+    interface HTMLCompositionRadioGroupElementEventMap {
+        "valueChange": string;
+    }
+    interface HTMLCompositionRadioGroupElement extends Components.CompositionRadioGroup, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLCompositionRadioGroupElementEventMap>(type: K, listener: (this: HTMLCompositionRadioGroupElement, ev: CompositionRadioGroupCustomEvent<HTMLCompositionRadioGroupElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLCompositionRadioGroupElementEventMap>(type: K, listener: (this: HTMLCompositionRadioGroupElement, ev: CompositionRadioGroupCustomEvent<HTMLCompositionRadioGroupElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLCompositionRadioGroupElement: {
+        prototype: HTMLCompositionRadioGroupElement;
+        new (): HTMLCompositionRadioGroupElement;
+    };
+    /**
+     * Main component that demonstrates composition-based scaling
+     * with 3 components and 2 controllers (ValidationController and FocusController)
+     */
+    interface HTMLCompositionScalingDemoElement extends Components.CompositionScalingDemo, HTMLStencilElement {
+    }
+    var HTMLCompositionScalingDemoElement: {
+        prototype: HTMLCompositionScalingDemoElement;
+        new (): HTMLCompositionScalingDemoElement;
+    };
+    interface HTMLCompositionTextInputElement extends Components.CompositionTextInput, HTMLStencilElement {
+    }
+    var HTMLCompositionTextInputElement: {
+        prototype: HTMLCompositionTextInputElement;
+        new (): HTMLCompositionTextInputElement;
+    };
     interface HTMLExtendedCmpElement extends Components.ExtendedCmp, HTMLStencilElement {
     }
     var HTMLExtendedCmpElement: {
@@ -221,6 +470,20 @@ declare global {
         prototype: HTMLExtendsCmpCmpElement;
         new (): HTMLExtendsCmpCmpElement;
     };
+    /**
+     * ConflictsCmp - Demonstrates decorator conflicts in inheritance chains
+     * This component:
+     * 1. Extends ConflictsBase (inherits base decorators)
+     * 2. Defines duplicate decorators with same names but different values/behavior
+     * 3. Verifies component decorators override base decorators
+     * 4. Renders UI showing which version is active (component should win)
+     */
+    interface HTMLExtendsConflictsElement extends Components.ExtendsConflicts, HTMLStencilElement {
+    }
+    var HTMLExtendsConflictsElement: {
+        prototype: HTMLExtendsConflictsElement;
+        new (): HTMLExtendsConflictsElement;
+    };
     interface HTMLExtendsControllerUpdatesElement extends Components.ExtendsControllerUpdates, HTMLStencilElement {
     }
     var HTMLExtendsControllerUpdatesElement: {
@@ -233,6 +496,23 @@ declare global {
         prototype: HTMLExtendsDirectStateElement;
         new (): HTMLExtendsDirectStateElement;
     };
+    /**
+     * EventsCmp - Demonstrates
+     * @Listen decorator inheritance
+     * This component:
+     * 1. Extends EventBase (inherits base
+     * @Listen decorators)
+     * 2. Adds additional
+     * @Listen decorators
+     * 3. Overrides base event handler
+     * 4. Demonstrates event bubbling and propagation
+     */
+    interface HTMLExtendsEventsElement extends Components.ExtendsEvents, HTMLStencilElement {
+    }
+    var HTMLExtendsEventsElement: {
+        prototype: HTMLExtendsEventsElement;
+        new (): HTMLExtendsEventsElement;
+    };
     interface HTMLExtendsExternalElement extends Components.ExtendsExternal, HTMLStencilElement {
     }
     var HTMLExtendsExternalElement: {
@@ -274,6 +554,20 @@ declare global {
         prototype: HTMLExtendsMethodsElement;
         new (): HTMLExtendsMethodsElement;
     };
+    /**
+     * MixedDecoratorsCmp - Demonstrates mixed decorator type conflicts in inheritance chains
+     * This component:
+     * 1. Extends MixedDecoratorsBase (inherits base decorators)
+     * 2. Defines conflicting decorators with same names but different decorator types
+     * 3. Verifies runtime behavior when mixed decorator types exist
+     * 4. Renders UI showing which decorator type is active (component decorator type should win)
+     */
+    interface HTMLExtendsMixedDecoratorsElement extends Components.ExtendsMixedDecorators, HTMLStencilElement {
+    }
+    var HTMLExtendsMixedDecoratorsElement: {
+        prototype: HTMLExtendsMixedDecoratorsElement;
+        new (): HTMLExtendsMixedDecoratorsElement;
+    };
     interface HTMLExtendsMixinCmpElement extends Components.ExtendsMixinCmp, HTMLStencilElement {
     }
     var HTMLExtendsMixinCmpElement: {
@@ -318,6 +612,74 @@ declare global {
         prototype: HTMLExtendsViaHostCmpElement;
         new (): HTMLExtendsViaHostCmpElement;
     };
+    /**
+     * WatchCmp - Demonstrates
+     * @Watch decorator inheritance
+     * This component:
+     * 1. Extends WatchBase (inherits base
+     * @Watch decorators)
+     * 2. Adds additional
+     * @Watch decorators
+     * 3. Overrides base watch handler (overrideProp)
+     * 4. Demonstrates watch execution order
+     * 5. Demonstrates reactive property chains
+     */
+    interface HTMLExtendsWatchElement extends Components.ExtendsWatch, HTMLStencilElement {
+    }
+    var HTMLExtendsWatchElement: {
+        prototype: HTMLExtendsWatchElement;
+        new (): HTMLExtendsWatchElement;
+    };
+    interface HTMLInheritanceCheckboxGroupElementEventMap {
+        "valueChange": string[];
+    }
+    interface HTMLInheritanceCheckboxGroupElement extends Components.InheritanceCheckboxGroup, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLInheritanceCheckboxGroupElementEventMap>(type: K, listener: (this: HTMLInheritanceCheckboxGroupElement, ev: InheritanceCheckboxGroupCustomEvent<HTMLInheritanceCheckboxGroupElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLInheritanceCheckboxGroupElementEventMap>(type: K, listener: (this: HTMLInheritanceCheckboxGroupElement, ev: InheritanceCheckboxGroupCustomEvent<HTMLInheritanceCheckboxGroupElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLInheritanceCheckboxGroupElement: {
+        prototype: HTMLInheritanceCheckboxGroupElement;
+        new (): HTMLInheritanceCheckboxGroupElement;
+    };
+    interface HTMLInheritanceRadioGroupElementEventMap {
+        "valueChange": string;
+    }
+    interface HTMLInheritanceRadioGroupElement extends Components.InheritanceRadioGroup, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLInheritanceRadioGroupElementEventMap>(type: K, listener: (this: HTMLInheritanceRadioGroupElement, ev: InheritanceRadioGroupCustomEvent<HTMLInheritanceRadioGroupElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLInheritanceRadioGroupElementEventMap>(type: K, listener: (this: HTMLInheritanceRadioGroupElement, ev: InheritanceRadioGroupCustomEvent<HTMLInheritanceRadioGroupElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLInheritanceRadioGroupElement: {
+        prototype: HTMLInheritanceRadioGroupElement;
+        new (): HTMLInheritanceRadioGroupElement;
+    };
+    /**
+     * Main component that demonstrates inheritance-based scaling
+     * with 3 components and 2 controllers (ValidationController and FocusController)
+     */
+    interface HTMLInheritanceScalingDemoElement extends Components.InheritanceScalingDemo, HTMLStencilElement {
+    }
+    var HTMLInheritanceScalingDemoElement: {
+        prototype: HTMLInheritanceScalingDemoElement;
+        new (): HTMLInheritanceScalingDemoElement;
+    };
+    interface HTMLInheritanceTextInputElement extends Components.InheritanceTextInput, HTMLStencilElement {
+    }
+    var HTMLInheritanceTextInputElement: {
+        prototype: HTMLInheritanceTextInputElement;
+        new (): HTMLInheritanceTextInputElement;
+    };
     interface HTMLTsTargetPropsElement extends Components.TsTargetProps, HTMLStencilElement {
     }
     var HTMLTsTargetPropsElement: {
@@ -325,25 +687,51 @@ declare global {
         new (): HTMLTsTargetPropsElement;
     };
     interface HTMLElementTagNameMap {
+        "composition-checkbox-group": HTMLCompositionCheckboxGroupElement;
+        "composition-radio-group": HTMLCompositionRadioGroupElement;
+        "composition-scaling-demo": HTMLCompositionScalingDemoElement;
+        "composition-text-input": HTMLCompositionTextInputElement;
         "extended-cmp": HTMLExtendedCmpElement;
         "extended-cmp-cmp": HTMLExtendedCmpCmpElement;
         "extends-abstract": HTMLExtendsAbstractElement;
         "extends-cmp-cmp": HTMLExtendsCmpCmpElement;
+        "extends-conflicts": HTMLExtendsConflictsElement;
         "extends-controller-updates": HTMLExtendsControllerUpdatesElement;
         "extends-direct-state": HTMLExtendsDirectStateElement;
+        "extends-events": HTMLExtendsEventsElement;
         "extends-external": HTMLExtendsExternalElement;
         "extends-lifecycle-basic": HTMLExtendsLifecycleBasicElement;
         "extends-lifecycle-multilevel": HTMLExtendsLifecycleMultilevelElement;
         "extends-local": HTMLExtendsLocalElement;
         "extends-methods": HTMLExtendsMethodsElement;
+        "extends-mixed-decorators": HTMLExtendsMixedDecoratorsElement;
         "extends-mixin-cmp": HTMLExtendsMixinCmpElement;
         "extends-props-state": HTMLExtendsPropsStateElement;
         "extends-render": HTMLExtendsRenderElement;
         "extends-via-host-cmp": HTMLExtendsViaHostCmpElement;
+        "extends-watch": HTMLExtendsWatchElement;
+        "inheritance-checkbox-group": HTMLInheritanceCheckboxGroupElement;
+        "inheritance-radio-group": HTMLInheritanceRadioGroupElement;
+        "inheritance-scaling-demo": HTMLInheritanceScalingDemoElement;
+        "inheritance-text-input": HTMLInheritanceTextInputElement;
         "ts-target-props": HTMLTsTargetPropsElement;
     }
 }
 declare namespace LocalJSX {
+    interface CompositionCheckboxGroup {
+        "onValueChange"?: (event: CompositionCheckboxGroupCustomEvent<string[]>) => void;
+    }
+    interface CompositionRadioGroup {
+        "onValueChange"?: (event: CompositionRadioGroupCustomEvent<string>) => void;
+    }
+    /**
+     * Main component that demonstrates composition-based scaling
+     * with 3 components and 2 controllers (ValidationController and FocusController)
+     */
+    interface CompositionScalingDemo {
+    }
+    interface CompositionTextInput {
+    }
     interface ExtendedCmp {
         /**
           * @default 'ExtendedCmp text'
@@ -384,10 +772,41 @@ declare namespace LocalJSX {
          */
         "prop2"?: string;
     }
+    /**
+     * ConflictsCmp - Demonstrates decorator conflicts in inheritance chains
+     * This component:
+     * 1. Extends ConflictsBase (inherits base decorators)
+     * 2. Defines duplicate decorators with same names but different values/behavior
+     * 3. Verifies component decorators override base decorators
+     * 4. Renders UI showing which version is active (component should win)
+     */
+    interface ExtendsConflicts {
+        /**
+          * @default 'base only prop value'
+         */
+        "baseOnlyProp"?: string;
+        /**
+          * @default 'component prop value'
+         */
+        "duplicateProp"?: string;
+    }
     interface ExtendsControllerUpdates {
     }
     interface ExtendsDirectState {
     }
+    /**
+     * EventsCmp - Demonstrates
+     * @Listen decorator inheritance
+     * This component:
+     * 1. Extends EventBase (inherits base
+     * @Listen decorators)
+     * 2. Adds additional
+     * @Listen decorators
+     * 3. Overrides base event handler
+     * 4. Demonstrates event bubbling and propagation
+     */
+    interface ExtendsEvents {
+    }
     interface ExtendsExternal {
         /**
           * @default 'default text'
@@ -415,6 +834,28 @@ declare namespace LocalJSX {
     }
     interface ExtendsMethods {
     }
+    /**
+     * MixedDecoratorsCmp - Demonstrates mixed decorator type conflicts in inheritance chains
+     * This component:
+     * 1. Extends MixedDecoratorsBase (inherits base decorators)
+     * 2. Defines conflicting decorators with same names but different decorator types
+     * 3. Verifies runtime behavior when mixed decorator types exist
+     * 4. Renders UI showing which decorator type is active (component decorator type should win)
+     */
+    interface ExtendsMixedDecorators {
+        /**
+          * @default 'base only prop value'
+         */
+        "baseOnlyProp"?: string;
+        /**
+          * @default 'base prop value'
+         */
+        "mixedName"?: string;
+        /**
+          * @default 'component prop value'
+         */
+        "mixedStateName"?: string;
+    }
     interface ExtendsMixinCmp {
         /**
           * @default 'default text'
@@ -467,6 +908,50 @@ declare namespace LocalJSX {
     }
     interface ExtendsViaHostCmp {
     }
+    /**
+     * WatchCmp - Demonstrates
+     * @Watch decorator inheritance
+     * This component:
+     * 1. Extends WatchBase (inherits base
+     * @Watch decorators)
+     * 2. Adds additional
+     * @Watch decorators
+     * 3. Overrides base watch handler (overrideProp)
+     * 4. Demonstrates watch execution order
+     * 5. Demonstrates reactive property chains
+     */
+    interface ExtendsWatch {
+        /**
+          * @default 0
+         */
+        "baseCount"?: number;
+        /**
+          * @default 'base prop initial'
+         */
+        "baseProp"?: string;
+        /**
+          * @default 'child prop initial'
+         */
+        "childProp"?: string;
+        /**
+          * @default 'override prop initial'
+         */
+        "overrideProp"?: string;
+    }
+    interface InheritanceCheckboxGroup {
+        "onValueChange"?: (event: InheritanceCheckboxGroupCustomEvent<string[]>) => void;
+    }
+    interface InheritanceRadioGroup {
+        "onValueChange"?: (event: InheritanceRadioGroupCustomEvent<string>) => void;
+    }
+    /**
+     * Main component that demonstrates inheritance-based scaling
+     * with 3 components and 2 controllers (ValidationController and FocusController)
+     */
+    interface InheritanceScalingDemo {
+    }
+    interface InheritanceTextInput {
+    }
     interface TsTargetProps {
         /**
           * @default 'basicProp'
@@ -480,21 +965,33 @@ declare namespace LocalJSX {
         "dynamicLifecycle"?: string[];
     }
     interface IntrinsicElements {
+        "composition-checkbox-group": CompositionCheckboxGroup;
+        "composition-radio-group": CompositionRadioGroup;
+        "composition-scaling-demo": CompositionScalingDemo;
+        "composition-text-input": CompositionTextInput;
         "extended-cmp": ExtendedCmp;
         "extended-cmp-cmp": ExtendedCmpCmp;
         "extends-abstract": ExtendsAbstract;
         "extends-cmp-cmp": ExtendsCmpCmp;
+        "extends-conflicts": ExtendsConflicts;
         "extends-controller-updates": ExtendsControllerUpdates;
         "extends-direct-state": ExtendsDirectState;
+        "extends-events": ExtendsEvents;
         "extends-external": ExtendsExternal;
         "extends-lifecycle-basic": ExtendsLifecycleBasic;
         "extends-lifecycle-multilevel": ExtendsLifecycleMultilevel;
         "extends-local": ExtendsLocal;
         "extends-methods": ExtendsMethods;
+        "extends-mixed-decorators": ExtendsMixedDecorators;
         "extends-mixin-cmp": ExtendsMixinCmp;
         "extends-props-state": ExtendsPropsState;
         "extends-render": ExtendsRender;
         "extends-via-host-cmp": ExtendsViaHostCmp;
+        "extends-watch": ExtendsWatch;
+        "inheritance-checkbox-group": InheritanceCheckboxGroup;
+        "inheritance-radio-group": InheritanceRadioGroup;
+        "inheritance-scaling-demo": InheritanceScalingDemo;
+        "inheritance-text-input": InheritanceTextInput;
         "ts-target-props": TsTargetProps;
     }
 }
@@ -502,17 +999,55 @@ export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
+            "composition-checkbox-group": LocalJSX.CompositionCheckboxGroup & JSXBase.HTMLAttributes<HTMLCompositionCheckboxGroupElement>;
+            "composition-radio-group": LocalJSX.CompositionRadioGroup & JSXBase.HTMLAttributes<HTMLCompositionRadioGroupElement>;
+            /**
+             * Main component that demonstrates composition-based scaling
+             * with 3 components and 2 controllers (ValidationController and FocusController)
+             */
+            "composition-scaling-demo": LocalJSX.CompositionScalingDemo & JSXBase.HTMLAttributes<HTMLCompositionScalingDemoElement>;
+            "composition-text-input": LocalJSX.CompositionTextInput & JSXBase.HTMLAttributes<HTMLCompositionTextInputElement>;
             "extended-cmp": LocalJSX.ExtendedCmp & JSXBase.HTMLAttributes<HTMLExtendedCmpElement>;
             "extended-cmp-cmp": LocalJSX.ExtendedCmpCmp & JSXBase.HTMLAttributes<HTMLExtendedCmpCmpElement>;
             "extends-abstract": LocalJSX.ExtendsAbstract & JSXBase.HTMLAttributes<HTMLExtendsAbstractElement>;
             "extends-cmp-cmp": LocalJSX.ExtendsCmpCmp & JSXBase.HTMLAttributes<HTMLExtendsCmpCmpElement>;
+            /**
+             * ConflictsCmp - Demonstrates decorator conflicts in inheritance chains
+             * This component:
+             * 1. Extends ConflictsBase (inherits base decorators)
+             * 2. Defines duplicate decorators with same names but different values/behavior
+             * 3. Verifies component decorators override base decorators
+             * 4. Renders UI showing which version is active (component should win)
+             */
+            "extends-conflicts": LocalJSX.ExtendsConflicts & JSXBase.HTMLAttributes<HTMLExtendsConflictsElement>;
             "extends-controller-updates": LocalJSX.ExtendsControllerUpdates & JSXBase.HTMLAttributes<HTMLExtendsControllerUpdatesElement>;
             "extends-direct-state": LocalJSX.ExtendsDirectState & JSXBase.HTMLAttributes<HTMLExtendsDirectStateElement>;
+            /**
+             * EventsCmp - Demonstrates
+             * @Listen decorator inheritance
+             * This component:
+             * 1. Extends EventBase (inherits base
+             * @Listen decorators)
+             * 2. Adds additional
+             * @Listen decorators
+             * 3. Overrides base event handler
+             * 4. Demonstrates event bubbling and propagation
+             */
+            "extends-events": LocalJSX.ExtendsEvents & JSXBase.HTMLAttributes<HTMLExtendsEventsElement>;
             "extends-external": LocalJSX.ExtendsExternal & JSXBase.HTMLAttributes<HTMLExtendsExternalElement>;
             "extends-lifecycle-basic": LocalJSX.ExtendsLifecycleBasic & JSXBase.HTMLAttributes<HTMLExtendsLifecycleBasicElement>;
             "extends-lifecycle-multilevel": LocalJSX.ExtendsLifecycleMultilevel & JSXBase.HTMLAttributes<HTMLExtendsLifecycleMultilevelElement>;
             "extends-local": LocalJSX.ExtendsLocal & JSXBase.HTMLAttributes<HTMLExtendsLocalElement>;
             "extends-methods": LocalJSX.ExtendsMethods & JSXBase.HTMLAttributes<HTMLExtendsMethodsElement>;
+            /**
+             * MixedDecoratorsCmp - Demonstrates mixed decorator type conflicts in inheritance chains
+             * This component:
+             * 1. Extends MixedDecoratorsBase (inherits base decorators)
+             * 2. Defines conflicting decorators with same names but different decorator types
+             * 3. Verifies runtime behavior when mixed decorator types exist
+             * 4. Renders UI showing which decorator type is active (component decorator type should win)
+             */
+            "extends-mixed-decorators": LocalJSX.ExtendsMixedDecorators & JSXBase.HTMLAttributes<HTMLExtendsMixedDecoratorsElement>;
             "extends-mixin-cmp": LocalJSX.ExtendsMixinCmp & JSXBase.HTMLAttributes<HTMLExtendsMixinCmpElement>;
             /**
              * Test Case #3: Property & State Inheritance Basics
@@ -537,6 +1072,27 @@ declare module "@stencil/core" {
              */
             "extends-render": LocalJSX.ExtendsRender & JSXBase.HTMLAttributes<HTMLExtendsRenderElement>;
             "extends-via-host-cmp": LocalJSX.ExtendsViaHostCmp & JSXBase.HTMLAttributes<HTMLExtendsViaHostCmpElement>;
+            /**
+             * WatchCmp - Demonstrates
+             * @Watch decorator inheritance
+             * This component:
+             * 1. Extends WatchBase (inherits base
+             * @Watch decorators)
+             * 2. Adds additional
+             * @Watch decorators
+             * 3. Overrides base watch handler (overrideProp)
+             * 4. Demonstrates watch execution order
+             * 5. Demonstrates reactive property chains
+             */
+            "extends-watch": LocalJSX.ExtendsWatch & JSXBase.HTMLAttributes<HTMLExtendsWatchElement>;
+            "inheritance-checkbox-group": LocalJSX.InheritanceCheckboxGroup & JSXBase.HTMLAttributes<HTMLInheritanceCheckboxGroupElement>;
+            "inheritance-radio-group": LocalJSX.InheritanceRadioGroup & JSXBase.HTMLAttributes<HTMLInheritanceRadioGroupElement>;
+            /**
+             * Main component that demonstrates inheritance-based scaling
+             * with 3 components and 2 controllers (ValidationController and FocusController)
+             */
+            "inheritance-scaling-demo": LocalJSX.InheritanceScalingDemo & JSXBase.HTMLAttributes<HTMLInheritanceScalingDemoElement>;
+            "inheritance-text-input": LocalJSX.InheritanceTextInput & JSXBase.HTMLAttributes<HTMLInheritanceTextInputElement>;
             "ts-target-props": LocalJSX.TsTargetProps & JSXBase.HTMLAttributes<HTMLTsTargetPropsElement>;
         }
     }
diff --git a/test/wdio/ts-target/extends-composition-scaling/checkbox-group-cmp.tsx b/test/wdio/ts-target/extends-composition-scaling/checkbox-group-cmp.tsx
new file mode 100644
index 00000000000..eb89e44fb3b
--- /dev/null
+++ b/test/wdio/ts-target/extends-composition-scaling/checkbox-group-cmp.tsx
@@ -0,0 +1,119 @@
+import { Component, h, State, Element, Event, EventEmitter } from '@stencil/core';
+import { ReactiveControllerHost } from './reactive-controller-host.js';
+import { ValidationController } from './validation-controller.js';
+import { FocusController } from './focus-controller.js';
+
+@Component({
+  tag: 'composition-checkbox-group',
+})
+export class CheckboxGroupCmp extends ReactiveControllerHost {
+  @Element() el!: HTMLElement;
+  @State() values: string[] = [];
+  @State() helperText: string = 'Select at least one option';
+
+  @Event() valueChange!: EventEmitter<string[]>;
+
+  // Controllers via composition
+  private validation = new ValidationController(this);
+  private focus = new FocusController(this);
+
+  private inputId = `checkbox-group-${Math.random().toString(36).substr(2, 9)}`;
+  private helperTextId = `${this.inputId}-helper-text`;
+  private errorTextId = `${this.inputId}-error-text`;
+
+  componentWillLoad() {
+    super.componentWillLoad(); // Call base class to trigger controllers
+    // Set up validation callback
+    this.validation.setValidationCallback((vals: string[]) => {
+      if (!vals || vals.length === 0) {
+        return 'Please select at least one option';
+      }
+      return undefined;
+    });
+  }
+
+  componentDidLoad() {
+    super.componentDidLoad(); // Call base class to trigger controllers
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback(); // Call base class to trigger controllers
+  }
+
+  private handleChange = (e: Event) => {
+    const checkbox = e.target as HTMLInputElement;
+    const value = checkbox.value;
+
+    if (checkbox.checked) {
+      this.values = [...this.values, value];
+    } else {
+      this.values = this.values.filter((v) => v !== value);
+    }
+
+    this.valueChange.emit(this.values);
+    this.validation.validate(this.values);
+  };
+
+  private handleFocus = () => {
+    this.focus.handleFocus();
+  };
+
+  private handleBlur = () => {
+    this.focus.handleBlur();
+    this.validation.handleBlur(this.values);
+  };
+
+  render() {
+    const focusState = this.focus.getFocusState();
+    const validationData = this.validation.getValidationMessageData(this.helperTextId, this.errorTextId);
+
+    return (
+      <div class="checkbox-group-container">
+        <label>Select Options</label>
+        <div class="checkbox-group" tabindex="0" onFocus={this.handleFocus} onBlur={this.handleBlur}>
+          <label>
+            <input
+              type="checkbox"
+              name={this.inputId}
+              value="option1"
+              checked={this.values.includes('option1')}
+              onChange={this.handleChange}
+            />
+            Option 1
+          </label>
+          <label>
+            <input
+              type="checkbox"
+              name={this.inputId}
+              value="option2"
+              checked={this.values.includes('option2')}
+              onChange={this.handleChange}
+            />
+            Option 2
+          </label>
+          <label>
+            <input
+              type="checkbox"
+              name={this.inputId}
+              value="option3"
+              checked={this.values.includes('option3')}
+              onChange={this.handleChange}
+            />
+            Option 3
+          </label>
+        </div>
+        {validationData.hasError && (
+          <div class="validation-message">
+            <div id={validationData.errorTextId} class="error-text">
+              {validationData.errorMessage}
+            </div>
+          </div>
+        )}
+        <div class="focus-info">
+          Focused: {focusState.isFocused ? 'Yes' : 'No'} | Focus Count: {focusState.focusCount} | Blur Count:{' '}
+          {focusState.blurCount}
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/test/wdio/ts-target/extends-composition-scaling/cmp.test.ts b/test/wdio/ts-target/extends-composition-scaling/cmp.test.ts
new file mode 100644
index 00000000000..8270642a7b6
--- /dev/null
+++ b/test/wdio/ts-target/extends-composition-scaling/cmp.test.ts
@@ -0,0 +1,337 @@
+import { browser, expect } from '@wdio/globals';
+import { setupIFrameTest } from '../../util.js';
+
+/**
+ * Tests for composition-based scaling with 3 components and 2 controllers.
+ * Built with `tsconfig-es2022.json` > `"target": "es2022"` `dist` and `dist-custom-elements` outputs.
+ *
+ * Test Case #16 - Composition-Based Scaling
+ * This verifies that:
+ * 1. 3 components (TextInput, RadioGroup, CheckboxGroup) work with composition
+ * 2. 2 controllers (ValidationController, FocusController) work via composition
+ * 3. Lifecycle methods are called automatically via ReactiveControllerHost
+ * 4. Validation triggers on blur
+ * 5. Focus tracking works
+ * 6. Controllers are properly composed (not inherited)
+ */
+
+describe('Test Case #16 – Composition-Based Scaling (3 components, 2 controllers)', () => {
+  describe('es2022 dist output', () => {
+    let frameContent: HTMLElement;
+
+    beforeEach(async () => {
+      frameContent = await setupIFrameTest('/extends-composition-scaling/es2022.dist.html', 'es2022-dist');
+      const frameEle = await browser.$('#es2022-dist');
+      await frameEle.waitUntil(async () => !!frameContent.querySelector('composition-scaling-demo'), { timeout: 5000 });
+    });
+
+    it('all 3 components render correctly', async () => {
+      const demo = frameContent.querySelector('composition-scaling-demo');
+      expect(demo).toBeTruthy();
+
+      const textInput = demo?.querySelector('composition-text-input');
+      const radioGroup = demo?.querySelector('composition-radio-group');
+      const checkboxGroup = demo?.querySelector('composition-checkbox-group');
+
+      expect(textInput).toBeTruthy();
+      expect(radioGroup).toBeTruthy();
+      expect(checkboxGroup).toBeTruthy();
+    });
+
+    it('text input validation works on blur', async () => {
+      const demo = frameContent.querySelector('composition-scaling-demo');
+      expect(demo).toBeTruthy();
+
+      // Wait for textInput component to be available
+      await browser.waitUntil(
+        () => {
+          const textInput = demo?.querySelector('composition-text-input');
+          return !!textInput;
+        },
+        { timeout: 5000 },
+      );
+
+      const textInput = demo?.querySelector('composition-text-input');
+      expect(textInput).toBeTruthy();
+
+      // Wait for input element to be available
+      await browser.waitUntil(
+        () => {
+          const input = textInput?.querySelector('input[type="text"]');
+          return !!input;
+        },
+        { timeout: 5000 },
+      );
+
+      const input = textInput?.querySelector('input[type="text"]') as HTMLInputElement;
+      expect(input).toBeTruthy();
+
+      // Focus and blur without entering value - should show error
+      input?.focus();
+      await browser.pause(100);
+      input?.blur();
+      await browser.pause(100); // Give component time to process blur event
+
+      await browser.waitUntil(
+        () => {
+          const errorText = textInput?.querySelector('.error-text');
+          return errorText?.textContent?.includes('Name is required');
+        },
+        { timeout: 5000 },
+      );
+
+      const errorText = textInput?.querySelector('.error-text');
+      expect(errorText?.textContent).toContain('Name is required');
+    });
+
+    it('text input focus tracking works', async () => {
+      const demo = frameContent.querySelector('composition-scaling-demo');
+      expect(demo).toBeTruthy();
+
+      const textInput = demo?.querySelector('composition-text-input');
+      expect(textInput).toBeTruthy();
+
+      // Wait for input and focus-info elements to be available
+      await browser.waitUntil(
+        () => {
+          const input = textInput?.querySelector('input[type="text"]');
+          const focusInfo = textInput?.querySelector('.focus-info');
+          return !!input && !!focusInfo;
+        },
+        { timeout: 5000 },
+      );
+
+      const input = textInput?.querySelector('input[type="text"]') as HTMLInputElement;
+      const focusInfo = textInput?.querySelector('.focus-info');
+
+      expect(input).toBeTruthy();
+      expect(focusInfo).toBeTruthy();
+
+      // Initial state should show not focused
+      expect(focusInfo?.textContent).toContain('Focused: No');
+      expect(focusInfo?.textContent).toContain('Focus Count: 0');
+
+      // Focus the input
+      input?.focus();
+      await browser.pause(100);
+
+      await browser.waitUntil(
+        () => {
+          const info = textInput?.querySelector('.focus-info')?.textContent;
+          return info?.includes('Focused: Yes') && info?.includes('Focus Count: 1');
+        },
+        { timeout: 5000 },
+      );
+
+      // Blur the input
+      input?.blur();
+      await browser.pause(100);
+
+      await browser.waitUntil(
+        () => {
+          const info = textInput?.querySelector('.focus-info')?.textContent;
+          return info?.includes('Focused: No') && info?.includes('Blur Count: 1');
+        },
+        { timeout: 5000 },
+      );
+    });
+
+    it('radio group validation works on blur', async () => {
+      const demo = frameContent.querySelector('composition-scaling-demo');
+      expect(demo).toBeTruthy();
+
+      const radioGroup = demo?.querySelector('composition-radio-group');
+      expect(radioGroup).toBeTruthy();
+
+      // Wait for radio container to be available
+      await browser.waitUntil(
+        () => {
+          const container = radioGroup?.querySelector('.radio-group');
+          return !!container;
+        },
+        { timeout: 5000 },
+      );
+
+      const radioContainer = radioGroup?.querySelector('.radio-group');
+
+      expect(radioContainer).toBeTruthy();
+
+      // Focus and blur without selecting - should show error
+      (radioContainer as HTMLElement)?.focus();
+      await browser.pause(100);
+      (radioContainer as HTMLElement)?.blur();
+
+      await browser.waitUntil(
+        () => {
+          const errorText = radioGroup?.querySelector('.error-text');
+          return errorText?.textContent?.includes('Please select an option');
+        },
+        { timeout: 5000 },
+      );
+
+      const errorText = radioGroup?.querySelector('.error-text');
+      expect(errorText?.textContent).toContain('Please select an option');
+    });
+
+    it('checkbox group validation works on blur', async () => {
+      const demo = frameContent.querySelector('composition-scaling-demo');
+      expect(demo).toBeTruthy();
+
+      const checkboxGroup = demo?.querySelector('composition-checkbox-group');
+      expect(checkboxGroup).toBeTruthy();
+
+      // Wait for checkbox container to be available
+      await browser.waitUntil(
+        () => {
+          const container = checkboxGroup?.querySelector('.checkbox-group');
+          return !!container;
+        },
+        { timeout: 5000 },
+      );
+
+      const checkboxContainer = checkboxGroup?.querySelector('.checkbox-group');
+
+      expect(checkboxContainer).toBeTruthy();
+
+      // Focus and blur without selecting - should show error
+      (checkboxContainer as HTMLElement)?.focus();
+      await browser.pause(100);
+      (checkboxContainer as HTMLElement)?.blur();
+
+      await browser.waitUntil(
+        () => {
+          const errorText = checkboxGroup?.querySelector('.error-text');
+          return errorText?.textContent?.includes('Please select at least one option');
+        },
+        { timeout: 5000 },
+      );
+
+      const errorText = checkboxGroup?.querySelector('.error-text');
+      expect(errorText?.textContent).toContain('Please select at least one option');
+    });
+
+    it('validation and focus controllers work together', async () => {
+      const textInput = frameContent.querySelector('composition-text-input');
+      const input = textInput?.querySelector('input[type="text"]') as HTMLInputElement;
+
+      // Focus - should track focus
+      input?.focus();
+      await browser.pause(100);
+
+      await browser.waitUntil(
+        () => {
+          const focusInfo = textInput?.querySelector('.focus-info')?.textContent;
+          return focusInfo?.includes('Focused: Yes');
+        },
+        { timeout: 5000 },
+      );
+
+      // Blur - should track blur AND validate
+      input?.blur();
+      await browser.pause(100);
+
+      await browser.waitUntil(
+        () => {
+          const focusInfo = textInput?.querySelector('.focus-info')?.textContent;
+          const errorText = textInput?.querySelector('.error-text');
+          return (
+            focusInfo?.includes('Focused: No') &&
+            focusInfo?.includes('Blur Count: 1') &&
+            errorText?.textContent?.includes('Name is required')
+          );
+        },
+        { timeout: 5000 },
+      );
+    });
+
+    it('validates that both controllers use composition pattern', async () => {
+      const demo = frameContent.querySelector('composition-scaling-demo');
+      expect(demo).toBeTruthy();
+
+      // All components should have both validation and focus functionality
+      const textInput = demo?.querySelector('composition-text-input');
+      const radioGroup = demo?.querySelector('composition-radio-group');
+      const checkboxGroup = demo?.querySelector('composition-checkbox-group');
+
+      // Each should have validation error display capability (trigger validation first)
+      // Trigger validation on text input to show error
+      const textInputField = textInput?.querySelector('input[type="text"]') as HTMLInputElement;
+      textInputField?.focus();
+      await browser.pause(50);
+      textInputField?.blur();
+      await browser.waitUntil(
+        () => {
+          const errorText = textInput?.querySelector('.error-text');
+          return errorText?.textContent?.includes('Name is required');
+        },
+        { timeout: 5000 },
+      );
+      expect(textInput?.querySelector('.error-text')).toBeTruthy();
+
+      // Trigger validation on radio group to show error
+      const radioContainer = radioGroup?.querySelector('.radio-group') as HTMLElement;
+      radioContainer?.focus();
+      await browser.pause(50);
+      radioContainer?.blur();
+      await browser.waitUntil(
+        () => {
+          const errorText = radioGroup?.querySelector('.error-text');
+          return errorText?.textContent?.includes('Please select an option');
+        },
+        { timeout: 5000 },
+      );
+      expect(radioGroup?.querySelector('.error-text')).toBeTruthy();
+
+      // Trigger validation on checkbox group to show error
+      const checkboxContainer = checkboxGroup?.querySelector('.checkbox-group') as HTMLElement;
+      checkboxContainer?.focus();
+      await browser.pause(50);
+      checkboxContainer?.blur();
+      await browser.waitUntil(
+        () => {
+          const errorText = checkboxGroup?.querySelector('.error-text');
+          return errorText?.textContent?.includes('Please select at least one option');
+        },
+        { timeout: 5000 },
+      );
+      expect(checkboxGroup?.querySelector('.error-text')).toBeTruthy();
+
+      // Each should have focus info display
+      expect(textInput?.querySelector('.focus-info')).toBeTruthy();
+      expect(radioGroup?.querySelector('.focus-info')).toBeTruthy();
+      expect(checkboxGroup?.querySelector('.focus-info')).toBeTruthy();
+    });
+
+    it('controllers are automatically called during lifecycle via ReactiveControllerHost', async () => {
+      // This test verifies that controllers' lifecycle methods are called automatically
+      // via the ReactiveControllerHost base class, without needing explicit super() calls
+      // for each controller's lifecycle methods
+
+      const textInput = frameContent.querySelector('composition-text-input');
+      const input = textInput?.querySelector('input[type="text"]') as HTMLInputElement;
+
+      // The fact that validation and focus tracking work proves that:
+      // 1. Controllers' hostDidLoad() was called automatically
+      // 2. Controllers are properly registered with ReactiveControllerHost
+      // 3. Lifecycle methods are chained automatically
+
+      // Verify controllers are working (which proves lifecycle was called)
+      input?.focus();
+      await browser.pause(100);
+
+      await browser.waitUntil(
+        () => {
+          const focusInfo = textInput?.querySelector('.focus-info')?.textContent;
+          return focusInfo?.includes('Focus Count: 1');
+        },
+        { timeout: 5000 },
+      );
+
+      // This proves the composition pattern works:
+      // - Component extends ReactiveControllerHost
+      // - Controllers are instantiated and added automatically
+      // - Lifecycle methods are called automatically via base class
+      // - No need for explicit super() calls for each controller
+    });
+  });
+});
diff --git a/test/wdio/ts-target/extends-composition-scaling/cmp.tsx b/test/wdio/ts-target/extends-composition-scaling/cmp.tsx
new file mode 100644
index 00000000000..287eb396cae
--- /dev/null
+++ b/test/wdio/ts-target/extends-composition-scaling/cmp.tsx
@@ -0,0 +1,125 @@
+import { Component, h } from '@stencil/core';
+
+/**
+ * Main component that demonstrates composition-based scaling
+ * with 3 components and 2 controllers (ValidationController and FocusController)
+ */
+@Component({
+  tag: 'composition-scaling-demo',
+  styles: `
+    :host {
+      display: block;
+      padding: 20px;
+      font-family: Arial, sans-serif;
+    }
+
+    .demo-container {
+      max-width: 600px;
+      margin: 0 auto;
+    }
+
+    .component-section {
+      margin: 30px 0;
+      padding: 20px;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+    }
+
+    .text-input-container,
+    .radio-group-container,
+    .checkbox-group-container {
+      margin: 10px 0;
+    }
+
+    label {
+      display: block;
+      margin-bottom: 8px;
+      font-weight: bold;
+    }
+
+    input[type='text'] {
+      width: 100%;
+      padding: 8px;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      box-sizing: border-box;
+    }
+
+    input[type='text'].invalid {
+      border-color: #f00;
+    }
+
+    .radio-group,
+    .checkbox-group {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .radio-group label,
+    .checkbox-group label {
+      display: flex;
+      align-items: center;
+      font-weight: normal;
+      cursor: pointer;
+    }
+
+    .radio-group input[type='radio'],
+    .checkbox-group input[type='checkbox'] {
+      margin-right: 8px;
+    }
+
+    .validation-message {
+      margin-top: 8px;
+    }
+
+    .error-text {
+      color: #f00;
+      font-size: 0.875em;
+    }
+
+    .focus-info {
+      margin-top: 8px;
+      font-size: 0.875em;
+      color: #666;
+    }
+
+    h1 {
+      text-align: center;
+      color: #333;
+    }
+
+    h2 {
+      color: #555;
+      margin-top: 0;
+    }
+  `,
+})
+export class CompositionScalingDemo {
+  render() {
+    return (
+      <div class="demo-container">
+        <h1>Composition-Based Scaling Demo</h1>
+        <p>
+          This demo shows 3 components (TextInput, RadioGroup, CheckboxGroup) using 2 controllers (ValidationController,
+          FocusController) via composition.
+        </p>
+
+        <div class="component-section">
+          <h2>Text Input Component</h2>
+          <composition-text-input />
+        </div>
+
+        <div class="component-section">
+          <h2>Radio Group Component</h2>
+          <composition-radio-group />
+        </div>
+
+        <div class="component-section">
+          <h2>Checkbox Group Component</h2>
+          <composition-checkbox-group />
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/test/wdio/ts-target/extends-composition-scaling/es2022.custom-element.html b/test/wdio/ts-target/extends-composition-scaling/es2022.custom-element.html
new file mode 100644
index 00000000000..f15bebb4598
--- /dev/null
+++ b/test/wdio/ts-target/extends-composition-scaling/es2022.custom-element.html
@@ -0,0 +1,14 @@
+<html>
+<head>
+  <title>ES2022 dist-custom-elements output - Composition Scaling Demo</title>
+  <script type="module">
+    import { defineCustomElement } from '/test-ts-target-output/custom-elements/extends-composition-scaling.js';
+    defineCustomElement()
+  </script>
+</head>
+<body>
+  <h1>ES2022 dist-custom-elements output - Composition Scaling Demo</h1>
+  <composition-scaling-demo></composition-scaling-demo>
+</body>
+</html>
+
diff --git a/test/wdio/ts-target/extends-composition-scaling/es2022.dist.html b/test/wdio/ts-target/extends-composition-scaling/es2022.dist.html
new file mode 100644
index 00000000000..3684b7ffab3
--- /dev/null
+++ b/test/wdio/ts-target/extends-composition-scaling/es2022.dist.html
@@ -0,0 +1,11 @@
+<html>
+<head>
+  <title>ES2022 dist output - Composition Scaling Demo</title>
+  <script src="/test-ts-target-output/dist/testtstarget/testtstarget.esm.js" type="module"></script>
+</head>
+<body>
+  <h1>ES2022 dist output - Composition Scaling Demo</h1>
+  <composition-scaling-demo></composition-scaling-demo>
+</body>
+</html>
+
diff --git a/test/wdio/ts-target/extends-composition-scaling/focus-controller.ts b/test/wdio/ts-target/extends-composition-scaling/focus-controller.ts
new file mode 100644
index 00000000000..5d00bc17149
--- /dev/null
+++ b/test/wdio/ts-target/extends-composition-scaling/focus-controller.ts
@@ -0,0 +1,71 @@
+/**
+ * FocusController - demonstrates focus management controller via composition
+ *
+ * This controller:
+ * 1. Manages focus state (isFocused, hasFocus)
+ * 2. Tracks focus/blur events
+ * 3. Provides methods to handle focus lifecycle
+ */
+import { forceUpdate } from '@stencil/core';
+import type { ReactiveControllerHost, ReactiveController } from './reactive-controller-host.js';
+
+export class FocusController implements ReactiveController {
+  private host: ReactiveControllerHost;
+  private isFocused: boolean = false;
+  private focusCount: number = 0;
+  private blurCount: number = 0;
+
+  constructor(host: ReactiveControllerHost) {
+    this.host = host;
+    host.addController(this);
+  }
+
+  // Lifecycle methods
+  hostDidLoad() {
+    // Setup focus tracking on component load
+    this.setupFocusTracking();
+  }
+
+  hostDisconnected() {
+    // Cleanup focus tracking
+    this.cleanupFocusTracking();
+  }
+
+  private setupFocusTracking() {
+    // Default implementation - can be extended
+  }
+
+  private cleanupFocusTracking() {
+    // Default implementation - can be extended
+  }
+
+  // Handle focus event
+  handleFocus() {
+    this.isFocused = true;
+    this.focusCount++;
+    forceUpdate(this.host);
+  }
+
+  // Handle blur event
+  handleBlur() {
+    this.isFocused = false;
+    this.blurCount++;
+    forceUpdate(this.host);
+  }
+
+  // Get focus state
+  getFocusState() {
+    return {
+      isFocused: this.isFocused,
+      focusCount: this.focusCount,
+      blurCount: this.blurCount,
+    };
+  }
+
+  // Reset focus tracking
+  resetFocusTracking() {
+    this.focusCount = 0;
+    this.blurCount = 0;
+    forceUpdate(this.host);
+  }
+}
diff --git a/test/wdio/ts-target/extends-composition-scaling/radio-group-cmp.tsx b/test/wdio/ts-target/extends-composition-scaling/radio-group-cmp.tsx
new file mode 100644
index 00000000000..91785ce5c55
--- /dev/null
+++ b/test/wdio/ts-target/extends-composition-scaling/radio-group-cmp.tsx
@@ -0,0 +1,114 @@
+import { Component, h, State, Element, Event, EventEmitter } from '@stencil/core';
+import { ReactiveControllerHost } from './reactive-controller-host.js';
+import { ValidationController } from './validation-controller.js';
+import { FocusController } from './focus-controller.js';
+
+@Component({
+  tag: 'composition-radio-group',
+})
+export class RadioGroupCmp extends ReactiveControllerHost {
+  @Element() el!: HTMLElement;
+  @State() value: string | undefined = undefined;
+  @State() helperText: string = 'Select an option';
+
+  @Event() valueChange!: EventEmitter<string>;
+
+  // Controllers via composition
+  private validation = new ValidationController(this);
+  private focus = new FocusController(this);
+
+  private inputId = `radio-group-${Math.random().toString(36).substr(2, 9)}`;
+  private helperTextId = `${this.inputId}-helper-text`;
+  private errorTextId = `${this.inputId}-error-text`;
+
+  componentWillLoad() {
+    super.componentWillLoad(); // Call base class to trigger controllers
+    // Set up validation callback
+    this.validation.setValidationCallback((val: string | undefined) => {
+      if (!val) {
+        return 'Please select an option';
+      }
+      return undefined;
+    });
+  }
+
+  componentDidLoad() {
+    super.componentDidLoad(); // Call base class to trigger controllers
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback(); // Call base class to trigger controllers
+  }
+
+  private handleChange = (e: Event) => {
+    const radio = e.target as HTMLInputElement;
+    if (radio.checked) {
+      this.value = radio.value;
+      this.valueChange.emit(this.value);
+      this.validation.validate(this.value);
+    }
+  };
+
+  private handleFocus = () => {
+    this.focus.handleFocus();
+  };
+
+  private handleBlur = () => {
+    this.focus.handleBlur();
+    this.validation.handleBlur(this.value);
+  };
+
+  render() {
+    const focusState = this.focus.getFocusState();
+    const validationData = this.validation.getValidationMessageData(this.helperTextId, this.errorTextId);
+
+    return (
+      <div class="radio-group-container">
+        <label>Select Option</label>
+        <div class="radio-group" tabindex="0" onFocus={this.handleFocus} onBlur={this.handleBlur}>
+          <label>
+            <input
+              type="radio"
+              name={this.inputId}
+              value="option1"
+              checked={this.value === 'option1'}
+              onChange={this.handleChange}
+            />
+            Option 1
+          </label>
+          <label>
+            <input
+              type="radio"
+              name={this.inputId}
+              value="option2"
+              checked={this.value === 'option2'}
+              onChange={this.handleChange}
+            />
+            Option 2
+          </label>
+          <label>
+            <input
+              type="radio"
+              name={this.inputId}
+              value="option3"
+              checked={this.value === 'option3'}
+              onChange={this.handleChange}
+            />
+            Option 3
+          </label>
+        </div>
+        {validationData.hasError && (
+          <div class="validation-message">
+            <div id={validationData.errorTextId} class="error-text">
+              {validationData.errorMessage}
+            </div>
+          </div>
+        )}
+        <div class="focus-info">
+          Focused: {focusState.isFocused ? 'Yes' : 'No'} | Focus Count: {focusState.focusCount} | Blur Count:{' '}
+          {focusState.blurCount}
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/test/wdio/ts-target/extends-composition-scaling/reactive-controller-host.ts b/test/wdio/ts-target/extends-composition-scaling/reactive-controller-host.ts
new file mode 100644
index 00000000000..87dab441732
--- /dev/null
+++ b/test/wdio/ts-target/extends-composition-scaling/reactive-controller-host.ts
@@ -0,0 +1,56 @@
+import { ComponentInterface } from '@stencil/core';
+
+export interface ReactiveController {
+  hostConnected?(): void;
+  hostDisconnected?(): void;
+  hostWillLoad?(): Promise<void> | void;
+  hostDidLoad?(): void;
+  hostWillRender?(): Promise<void> | void;
+  hostDidRender?(): void;
+  hostWillUpdate?(): Promise<void> | void;
+  hostDidUpdate?(): void;
+}
+
+export class ReactiveControllerHost implements ComponentInterface {
+  controllers = new Set<ReactiveController>();
+
+  addController(controller: ReactiveController) {
+    this.controllers.add(controller);
+  }
+
+  removeController(controller: ReactiveController) {
+    this.controllers.delete(controller);
+  }
+
+  connectedCallback() {
+    this.controllers.forEach((controller) => controller.hostConnected?.());
+  }
+
+  disconnectedCallback() {
+    this.controllers.forEach((controller) => controller.hostDisconnected?.());
+  }
+
+  componentWillLoad() {
+    this.controllers.forEach((controller) => controller.hostWillLoad?.());
+  }
+
+  componentDidLoad() {
+    this.controllers.forEach((controller) => controller.hostDidLoad?.());
+  }
+
+  componentWillRender() {
+    this.controllers.forEach((controller) => controller.hostWillRender?.());
+  }
+
+  componentDidRender() {
+    this.controllers.forEach((controller) => controller.hostDidRender?.());
+  }
+
+  componentWillUpdate() {
+    this.controllers.forEach((controller) => controller.hostWillUpdate?.());
+  }
+
+  componentDidUpdate() {
+    this.controllers.forEach((controller) => controller.hostDidUpdate?.());
+  }
+}
diff --git a/test/wdio/ts-target/extends-composition-scaling/text-input-cmp.tsx b/test/wdio/ts-target/extends-composition-scaling/text-input-cmp.tsx
new file mode 100644
index 00000000000..5f5866cc0f7
--- /dev/null
+++ b/test/wdio/ts-target/extends-composition-scaling/text-input-cmp.tsx
@@ -0,0 +1,89 @@
+import { Component, h, State, Element } from '@stencil/core';
+import { ReactiveControllerHost } from './reactive-controller-host.js';
+import { ValidationController } from './validation-controller.js';
+import { FocusController } from './focus-controller.js';
+
+@Component({
+  tag: 'composition-text-input',
+})
+export class TextInputCmp extends ReactiveControllerHost {
+  @Element() el!: HTMLElement;
+  @State() value: string = '';
+  @State() helperText: string = 'Enter your name';
+
+  // Controllers via composition
+  private validation = new ValidationController(this);
+  private focus = new FocusController(this);
+
+  private inputId = `text-input-${Math.random().toString(36).substr(2, 9)}`;
+  private helperTextId = `${this.inputId}-helper-text`;
+  private errorTextId = `${this.inputId}-error-text`;
+
+  componentWillLoad() {
+    super.componentWillLoad(); // Call base class to trigger controllers
+    // Set up validation callback
+    this.validation.setValidationCallback((val: string) => {
+      if (!val || val.trim().length === 0) {
+        return 'Name is required';
+      }
+      if (val.length < 2) {
+        return 'Name must be at least 2 characters';
+      }
+      return undefined;
+    });
+  }
+
+  componentDidLoad() {
+    super.componentDidLoad(); // Call base class to trigger controllers
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback(); // Call base class to trigger controllers
+  }
+
+  private handleInput = (e: Event) => {
+    const input = e.target as HTMLInputElement;
+    this.value = input.value;
+  };
+
+  private handleFocus = () => {
+    this.focus.handleFocus();
+  };
+
+  private handleBlur = () => {
+    this.focus.handleBlur();
+    this.validation.handleBlur(this.value);
+  };
+
+  render() {
+    const focusState = this.focus.getFocusState();
+    const validationState = this.validation.getValidationState();
+    const validationData = this.validation.getValidationMessageData(this.helperTextId, this.errorTextId);
+
+    return (
+      <div class="text-input-container">
+        <label htmlFor={this.inputId}>Name</label>
+        <input
+          id={this.inputId}
+          type="text"
+          value={this.value}
+          onInput={this.handleInput}
+          onFocus={this.handleFocus}
+          onBlur={this.handleBlur}
+          class={validationState.isValid ? '' : 'invalid'}
+        />
+        {validationData.hasError && (
+          <div class="validation-message">
+            <div id={validationData.errorTextId} class="error-text">
+              {validationData.errorMessage}
+            </div>
+          </div>
+        )}
+        <div class="focus-info">
+          Focused: {focusState.isFocused ? 'Yes' : 'No'} | Focus Count: {focusState.focusCount} | Blur Count:{' '}
+          {focusState.blurCount}
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/test/wdio/ts-target/extends-composition-scaling/validation-controller.ts b/test/wdio/ts-target/extends-composition-scaling/validation-controller.ts
new file mode 100644
index 00000000000..afcb29d6128
--- /dev/null
+++ b/test/wdio/ts-target/extends-composition-scaling/validation-controller.ts
@@ -0,0 +1,95 @@
+/**
+ * ValidationController - demonstrates validation controller via composition
+ *
+ * This controller:
+ * 1. Manages validation state (isValid, errorMessage)
+ * 2. Provides method to get validation message data for rendering
+ * 3. Can trigger validation (ideally on blur)
+ * 4. Runs a callback provided by the host for validation logic
+ */
+import { forceUpdate } from '@stencil/core';
+import type { ReactiveControllerHost, ReactiveController } from './reactive-controller-host.js';
+
+export class ValidationController implements ReactiveController {
+  private host: ReactiveControllerHost;
+  private isValid: boolean = true;
+  private errorMessage: string = '';
+  private validationCallback?: (value: any) => string | undefined;
+
+  constructor(host: ReactiveControllerHost) {
+    this.host = host;
+    host.addController(this);
+  }
+
+  // Lifecycle methods
+  hostDidLoad() {
+    // Setup validation on component load
+    this.setupValidation();
+  }
+
+  hostDisconnected() {
+    // Cleanup if needed
+    this.cleanupValidation();
+  }
+
+  // Setup validation - can be overridden by host
+  private setupValidation() {
+    // Default implementation - can be extended
+  }
+
+  private cleanupValidation() {
+    // Default implementation - can be extended
+  }
+
+  // Set the validation callback from host
+  setValidationCallback(callback: (value: any) => string | undefined) {
+    this.validationCallback = callback;
+  }
+
+  // Validate the value - returns true if valid, false otherwise
+  validate(value: any): boolean {
+    if (!this.validationCallback) {
+      this.isValid = true;
+      this.errorMessage = '';
+      forceUpdate(this.host);
+      return true;
+    }
+
+    const error = this.validationCallback(value);
+    this.isValid = !error;
+    this.errorMessage = error || '';
+    forceUpdate(this.host);
+    return this.isValid;
+  }
+
+  // Trigger validation on blur
+  handleBlur(value: any) {
+    this.validate(value);
+  }
+
+  // Get validation state
+  getValidationState() {
+    return {
+      isValid: this.isValid,
+      errorMessage: this.errorMessage,
+    };
+  }
+
+  // Get validation message data for rendering
+  getValidationMessageData(helperTextId?: string, errorTextId?: string) {
+    return {
+      isValid: this.isValid,
+      errorMessage: this.errorMessage,
+      helperTextId,
+      errorTextId,
+      hasError: !!this.errorMessage,
+    };
+  }
+
+  // Reset validation state
+  resetValidation() {
+    this.isValid = true;
+    this.errorMessage = '';
+    forceUpdate(this.host);
+  }
+}
diff --git a/test/wdio/ts-target/extends-conflicts/cmp.test.ts b/test/wdio/ts-target/extends-conflicts/cmp.test.ts
new file mode 100644
index 00000000000..1acabb32364
--- /dev/null
+++ b/test/wdio/ts-target/extends-conflicts/cmp.test.ts
@@ -0,0 +1,273 @@
+import { browser, expect } from '@wdio/globals';
+import { setupIFrameTest } from '../../util.js';
+
+/**
+ * Tests for decorator conflicts - duplicate decorator names of the same type in inheritance chains.
+ * Built with `tsconfig-es2022.json` > `"target": "es2022"` `dist` and `dist-custom-elements` outputs.
+ *
+ * Test Case #13 - Decorator Conflicts
+ * Features:
+ * - Duplicate @Prop names (component overrides base)
+ * - Duplicate @State names (component overrides base)
+ * - Duplicate @Method names (component overrides base)
+ * - Compiler precedence rules (component decorators take precedence)
+ */
+
+describe('Test Case #13 – Decorator Conflicts (Duplicate decorator names)', () => {
+  describe('es2022 dist output', () => {
+    let frameContent: HTMLElement;
+
+    beforeEach(async () => {
+      frameContent = await setupIFrameTest('/extends-conflicts/es2022.dist.html', 'es2022-dist');
+      const frameEle = await browser.$('#es2022-dist');
+      await frameEle.waitUntil(async () => !!frameContent.querySelector('.container'), { timeout: 5000 });
+    });
+
+    describe('Duplicate @Prop Names', () => {
+      it('component @Prop overrides base @Prop - component value is used', async () => {
+        const duplicateProp = frameContent.querySelector('.duplicate-prop-value');
+
+        expect(duplicateProp?.textContent).toContain('Duplicate Prop: component prop value');
+        expect(duplicateProp?.textContent).not.toContain('base prop value');
+      });
+
+      it('component @Prop can be set via attribute', async () => {
+        const component = frameContent.querySelector('extends-conflicts');
+        component?.setAttribute('duplicate-prop', 'updated via attribute');
+
+        await browser.waitUntil(
+          () => {
+            const duplicateProp = frameContent.querySelector('.duplicate-prop-value');
+            return duplicateProp?.textContent?.includes('updated via attribute');
+          },
+          { timeout: 3000 },
+        );
+
+        const duplicateProp = frameContent.querySelector('.duplicate-prop-value');
+        expect(duplicateProp?.textContent).toContain('Duplicate Prop: updated via attribute');
+      });
+
+      it('component @Prop can be set via property', async () => {
+        const component = frameContent.querySelector('extends-conflicts') as any;
+        component.duplicateProp = 'updated via property';
+
+        await browser.waitUntil(
+          () => {
+            const duplicateProp = frameContent.querySelector('.duplicate-prop-value');
+            return duplicateProp?.textContent?.includes('updated via property');
+          },
+          { timeout: 3000 },
+        );
+
+        const duplicateProp = frameContent.querySelector('.duplicate-prop-value');
+        expect(duplicateProp?.textContent).toContain('Duplicate Prop: updated via property');
+      });
+
+      it('base-only prop is still accessible and not overridden', async () => {
+        const baseOnlyProp = frameContent.querySelector('.base-only-prop-value');
+
+        expect(baseOnlyProp?.textContent).toContain('Base Only Prop: base only prop value');
+      });
+    });
+
+    describe('Duplicate @State Names', () => {
+      it('component @State overrides base @State - component value is used', async () => {
+        const duplicateState = frameContent.querySelector('.duplicate-state-value');
+
+        expect(duplicateState?.textContent).toContain('Duplicate State: component state value');
+        expect(duplicateState?.textContent).not.toContain('base state value');
+      });
+
+      it('component @State updates trigger re-renders correctly', async () => {
+        const component = frameContent.querySelector('extends-conflicts') as any;
+        const button = frameContent.querySelector('.update-duplicate-state') as HTMLButtonElement;
+
+        // Click button to update duplicate state
+        button?.click();
+
+        await browser.waitUntil(
+          () => {
+            const duplicateState = frameContent.querySelector('.duplicate-state-value');
+            return duplicateState?.textContent?.includes('duplicate state updated');
+          },
+          { timeout: 3000 },
+        );
+
+        const duplicateState = frameContent.querySelector('.duplicate-state-value');
+        expect(duplicateState?.textContent).toContain('Duplicate State: duplicate state updated');
+      });
+
+      it('component @State can be updated via method', async () => {
+        const component = frameContent.querySelector('extends-conflicts') as any;
+        await component.updateDuplicateState('updated via method');
+
+        await browser.waitUntil(
+          () => {
+            const duplicateState = frameContent.querySelector('.duplicate-state-value');
+            return duplicateState?.textContent?.includes('updated via method');
+          },
+          { timeout: 3000 },
+        );
+
+        const duplicateState = frameContent.querySelector('.duplicate-state-value');
+        expect(duplicateState?.textContent).toContain('Duplicate State: updated via method');
+      });
+
+      it('base-only state is still accessible and not overridden', async () => {
+        const baseOnlyState = frameContent.querySelector('.base-only-state-value');
+
+        expect(baseOnlyState?.textContent).toContain('Base Only State: base only state value');
+      });
+    });
+
+    describe('Duplicate @Method Names', () => {
+      it('component @Method overrides base @Method - component implementation is called', async () => {
+        const component = frameContent.querySelector('extends-conflicts') as any;
+
+        // Reset call logs
+        await component.resetAllCallLogs();
+
+        // Call duplicate method - should call component version, not base
+        const result = await component.duplicateMethod();
+
+        expect(result).toBe('component method');
+        expect(result).not.toBe('base method');
+      });
+
+      it('component @Method return value is used (not base)', async () => {
+        const component = frameContent.querySelector('extends-conflicts') as any;
+
+        await component.resetAllCallLogs();
+
+        const result = await component.duplicateMethod();
+        expect(result).toBe('component method');
+      });
+
+      it('component method call log shows component version was called', async () => {
+        const component = frameContent.querySelector('extends-conflicts') as any;
+
+        await component.resetAllCallLogs();
+
+        await component.duplicateMethod();
+
+        const componentLog = await component.getComponentMethodCallLog();
+        expect(componentLog).toContain('duplicateMethod:component');
+
+        // Verify base method was NOT called
+        const baseLog = await component.getMethodCallLog();
+        expect(baseLog).not.toContain('duplicateMethod:base');
+      });
+
+      it('base-only method is still accessible and not overridden', async () => {
+        const component = frameContent.querySelector('extends-conflicts') as any;
+
+        await component.resetAllCallLogs();
+
+        const result = await component.baseOnlyMethod();
+        expect(result).toBe('base only method');
+
+        const baseLog = await component.getMethodCallLog();
+        expect(baseLog).toContain('baseOnlyMethod');
+      });
+    });
+
+    describe('Compiler Precedence Rules', () => {
+      it('component decorators take precedence over base decorators', async () => {
+        const duplicateProp = frameContent.querySelector('.duplicate-prop-value');
+        const duplicateState = frameContent.querySelector('.duplicate-state-value');
+        const component = frameContent.querySelector('extends-conflicts') as any;
+
+        // Verify component values are used (not base)
+        expect(duplicateProp?.textContent).toContain('component prop value');
+        expect(duplicateState?.textContent).toContain('component state value');
+
+        // Verify component method is called
+        await component.resetAllCallLogs();
+        const methodResult = await component.duplicateMethod();
+        expect(methodResult).toBe('component method');
+      });
+
+      it('non-duplicate base decorators remain accessible', async () => {
+        const baseOnlyProp = frameContent.querySelector('.base-only-prop-value');
+        const baseOnlyState = frameContent.querySelector('.base-only-state-value');
+        const component = frameContent.querySelector('extends-conflicts') as any;
+
+        expect(baseOnlyProp?.textContent).toContain('base only prop value');
+        expect(baseOnlyState?.textContent).toContain('base only state value');
+
+        const methodResult = await component.baseOnlyMethod();
+        expect(methodResult).toBe('base only method');
+      });
+
+      it('component-only decorators work correctly', async () => {
+        const componentOnlyState = frameContent.querySelector('.component-only-state-value');
+        const component = frameContent.querySelector('extends-conflicts') as any;
+
+        expect(componentOnlyState?.textContent).toContain('component only state');
+
+        await component.updateComponentOnlyState('component only updated');
+
+        await browser.waitUntil(
+          () => {
+            const updatedState = frameContent.querySelector('.component-only-state-value');
+            return updatedState?.textContent?.includes('component only updated');
+          },
+          { timeout: 3000 },
+        );
+
+        const updatedState = frameContent.querySelector('.component-only-state-value');
+        expect(updatedState?.textContent).toContain('Component Only State: component only updated');
+      });
+    });
+  });
+
+  describe('es2022 custom-element output', () => {
+    let frameContent: HTMLElement;
+
+    beforeEach(async () => {
+      await browser.switchToParentFrame();
+      frameContent = await setupIFrameTest('/extends-conflicts/es2022.custom-element.html', 'es2022-custom-elements');
+      const frameEle = await browser.$('iframe#es2022-custom-elements');
+      await frameEle.waitUntil(async () => !!frameContent.querySelector('.container'), { timeout: 5000 });
+    });
+
+    it('component @Prop overrides base @Prop in custom elements build', async () => {
+      const duplicateProp = frameContent.querySelector('.duplicate-prop-value');
+
+      expect(duplicateProp?.textContent).toContain('Duplicate Prop: component prop value');
+      expect(duplicateProp?.textContent).not.toContain('base prop value');
+    });
+
+    it('component @State overrides base @State in custom elements build', async () => {
+      const duplicateState = frameContent.querySelector('.duplicate-state-value');
+
+      expect(duplicateState?.textContent).toContain('Duplicate State: component state value');
+      expect(duplicateState?.textContent).not.toContain('base state value');
+    });
+
+    it('component @Method overrides base @Method in custom elements build', async () => {
+      const component = frameContent.querySelector('extends-conflicts') as any;
+
+      await component.resetAllCallLogs();
+
+      const result = await component.duplicateMethod();
+      expect(result).toBe('component method');
+
+      const componentLog = await component.getComponentMethodCallLog();
+      expect(componentLog).toContain('duplicateMethod:component');
+    });
+
+    it('component decorators take precedence in custom elements build', async () => {
+      const duplicateProp = frameContent.querySelector('.duplicate-prop-value');
+      const duplicateState = frameContent.querySelector('.duplicate-state-value');
+      const component = frameContent.querySelector('extends-conflicts') as any;
+
+      expect(duplicateProp?.textContent).toContain('component prop value');
+      expect(duplicateState?.textContent).toContain('component state value');
+
+      await component.resetAllCallLogs();
+      const methodResult = await component.duplicateMethod();
+      expect(methodResult).toBe('component method');
+    });
+  });
+});
diff --git a/test/wdio/ts-target/extends-conflicts/cmp.tsx b/test/wdio/ts-target/extends-conflicts/cmp.tsx
new file mode 100644
index 00000000000..59dcbe4453b
--- /dev/null
+++ b/test/wdio/ts-target/extends-conflicts/cmp.tsx
@@ -0,0 +1,140 @@
+import { Component, Element, h, Method, Prop, State } from '@stencil/core';
+import { ConflictsBase } from './conflicts-base.js';
+
+/**
+ * ConflictsCmp - Demonstrates decorator conflicts in inheritance chains
+ *
+ * This component:
+ * 1. Extends ConflictsBase (inherits base decorators)
+ * 2. Defines duplicate decorators with same names but different values/behavior
+ * 3. Verifies component decorators override base decorators
+ * 4. Renders UI showing which version is active (component should win)
+ */
+@Component({
+  tag: 'extends-conflicts',
+})
+export class ConflictsCmp extends ConflictsBase {
+  @Element() el!: HTMLElement;
+
+  // Duplicate @Prop - same name as base, should override
+  @Prop() duplicateProp: string = 'component prop value';
+
+  // Duplicate @State - same name as base, should override
+  @State() duplicateState: string = 'component state value';
+
+  // Component-specific properties
+  @State() componentOnlyState: string = 'component only state';
+
+  // Tracking mechanism for component method calls
+  protected componentMethodCallLog: string[] = [];
+
+  /**
+   * Duplicate method - same name as base, should override
+   * Component version should be called, not base version
+   */
+  @Method()
+  async duplicateMethod(): Promise<string> {
+    this.componentMethodCallLog.push('duplicateMethod:component');
+    return 'component method';
+  }
+
+  /**
+   * Method to update duplicate state for testing
+   */
+  @Method()
+  async updateDuplicateState(value: string): Promise<void> {
+    this.duplicateState = value;
+  }
+
+  /**
+   * Method to update component-only state
+   */
+  @Method()
+  async updateComponentOnlyState(value: string): Promise<void> {
+    this.componentOnlyState = value;
+  }
+
+  /**
+   * Method to get component method call log
+   */
+  @Method()
+  async getComponentMethodCallLog(): Promise<string[]> {
+    return [...this.componentMethodCallLog];
+  }
+
+  /**
+   * Method to reset component call log
+   */
+  @Method()
+  async resetComponentMethodCallLog(): Promise<void> {
+    this.componentMethodCallLog = [];
+  }
+
+  /**
+   * Method to get combined call log (base + component)
+   */
+  @Method()
+  async getCombinedMethodCallLog(): Promise<string[]> {
+    const baseLog = await super.getMethodCallLog();
+    return [...baseLog, ...this.componentMethodCallLog];
+  }
+
+  /**
+   * Method to reset all call logs
+   */
+  @Method()
+  async resetAllCallLogs(): Promise<void> {
+    await super.resetMethodCallLog();
+    this.componentMethodCallLog = [];
+  }
+
+  render() {
+    return (
+      <div class="container">
+        <h2>Decorator Conflicts Test</h2>
+
+        <div class="duplicate-props">
+          <h3>Duplicate @Prop (Component Override)</h3>
+          <p class="duplicate-prop-value">Duplicate Prop: {this.duplicateProp}</p>
+          <p class="expected-prop-value">Expected: component prop value (component override)</p>
+        </div>
+
+        <div class="duplicate-states">
+          <h3>Duplicate @State (Component Override)</h3>
+          <p class="duplicate-state-value">Duplicate State: {this.duplicateState}</p>
+          <p class="expected-state-value">Expected: component state value (component override)</p>
+        </div>
+
+        <div class="base-only-props">
+          <h3>Base-Only Properties (Not Duplicated)</h3>
+          <p class="base-only-prop-value">Base Only Prop: {this.baseOnlyProp}</p>
+          <p class="base-only-state-value">Base Only State: {this.baseOnlyState}</p>
+        </div>
+
+        <div class="component-only-state">
+          <h3>Component-Only State</h3>
+          <p class="component-only-state-value">Component Only State: {this.componentOnlyState}</p>
+        </div>
+
+        <div class="actions">
+          <button class="update-duplicate-state" onClick={() => this.updateDuplicateState('duplicate state updated')}>
+            Update Duplicate State
+          </button>
+          <button
+            class="update-component-only-state"
+            onClick={() => this.updateComponentOnlyState('component only updated')}
+          >
+            Update Component Only State
+          </button>
+        </div>
+
+        <div class="test-info">
+          <p>
+            Features: Duplicate @Prop names | Duplicate @State names | Duplicate @Method names | Compiler precedence
+            rules
+          </p>
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/test/wdio/ts-target/extends-conflicts/conflicts-base.ts b/test/wdio/ts-target/extends-conflicts/conflicts-base.ts
new file mode 100644
index 00000000000..676509ed447
--- /dev/null
+++ b/test/wdio/ts-target/extends-conflicts/conflicts-base.ts
@@ -0,0 +1,56 @@
+import { Prop, State, Method } from '@stencil/core';
+
+/**
+ * ConflictsBase - Base class demonstrating decorator conflicts
+ *
+ * This base class provides:
+ * 1. @Prop, @State, and @Method decorators that will be duplicated in component
+ * 2. Non-duplicate properties/methods for comparison
+ * 3. Tracking mechanism to verify which version is used
+ */
+export class ConflictsBase {
+  // Duplicate properties that will be overridden in component
+  @Prop() duplicateProp: string = 'base prop value';
+  @State() duplicateState: string = 'base state value';
+
+  // Non-duplicate properties for comparison
+  @Prop() baseOnlyProp: string = 'base only prop value';
+  @State() baseOnlyState: string = 'base only state value';
+
+  // Tracking mechanism to verify which method is called
+  protected methodCallLog: string[] = [];
+
+  /**
+   * Duplicate method that will be overridden in component
+   */
+  @Method()
+  async duplicateMethod(): Promise<string> {
+    this.methodCallLog.push('duplicateMethod:base');
+    return 'base method';
+  }
+
+  /**
+   * Non-duplicate method for comparison
+   */
+  @Method()
+  async baseOnlyMethod(): Promise<string> {
+    this.methodCallLog.push('baseOnlyMethod');
+    return 'base only method';
+  }
+
+  /**
+   * Method to get the call log for testing
+   */
+  @Method()
+  async getMethodCallLog(): Promise<string[]> {
+    return [...this.methodCallLog];
+  }
+
+  /**
+   * Method to reset call log for testing
+   */
+  @Method()
+  async resetMethodCallLog(): Promise<void> {
+    this.methodCallLog = [];
+  }
+}
diff --git a/test/wdio/ts-target/extends-conflicts/es2022.custom-element.html b/test/wdio/ts-target/extends-conflicts/es2022.custom-element.html
new file mode 100644
index 00000000000..a0a990f7438
--- /dev/null
+++ b/test/wdio/ts-target/extends-conflicts/es2022.custom-element.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>ES2022 dist-custom-elements output - Decorator Conflicts</title>
+  <script type="module">
+    import { defineCustomElement } from '/test-ts-target-output/custom-elements/extends-conflicts.js';
+    defineCustomElement();
+  </script>
+</head>
+<body>
+  <h1>ES2022 dist-custom-elements output - Decorator Conflicts</h1>
+  <extends-conflicts></extends-conflicts>
+</body>
+</html>
+
diff --git a/test/wdio/ts-target/extends-conflicts/es2022.dist.html b/test/wdio/ts-target/extends-conflicts/es2022.dist.html
new file mode 100644
index 00000000000..c5827a73e32
--- /dev/null
+++ b/test/wdio/ts-target/extends-conflicts/es2022.dist.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>ES2022 dist output - Decorator Conflicts</title>
+  <script src="/test-ts-target-output/dist/testtstarget/testtstarget.esm.js" type="module"></script>
+</head>
+<body>
+  <h1>ES2022 dist output - Decorator Conflicts</h1>
+  <extends-conflicts></extends-conflicts>
+</body>
+</html>
+
diff --git a/test/wdio/ts-target/extends-controller-updates/cmp.test.ts b/test/wdio/ts-target/extends-controller-updates/cmp.test.ts
index 70e13c9b619..285b3235afd 100644
--- a/test/wdio/ts-target/extends-controller-updates/cmp.test.ts
+++ b/test/wdio/ts-target/extends-controller-updates/cmp.test.ts
@@ -2,6 +2,7 @@ import { browser, expect } from '@wdio/globals';
 import { setupIFrameTest } from '../../util.js';
 
 /**
+ * Test Case #12 - Controller-Initiated Updates
  * Tests for controller-initiated updates. Built with
  * `tsconfig-es2022.json` > `"target": "es2022"` `dist` and `dist-custom-elements` outputs.
  *
@@ -9,7 +10,7 @@ import { setupIFrameTest } from '../../util.js';
  * Modeled after Lit's ClockController: https://lit.dev/docs/composition/controllers/
  */
 
-describe('Test Case #3 – Controller-Initiated Updates (ClockController pattern)', () => {
+describe('Test Case #12 – Controller-Initiated Updates (ClockController pattern)', () => {
   describe('es2022 dist output', () => {
     let frameContent: HTMLElement;
 
diff --git a/test/wdio/ts-target/extends-direct-state/cmp.test.ts b/test/wdio/ts-target/extends-direct-state/cmp.test.ts
index eeb2bcfa516..22ed5c61520 100644
--- a/test/wdio/ts-target/extends-direct-state/cmp.test.ts
+++ b/test/wdio/ts-target/extends-direct-state/cmp.test.ts
@@ -2,6 +2,7 @@ import { browser, expect } from '@wdio/globals';
 import { setupIFrameTest } from '../../util.js';
 
 /**
+ * Test Case #12a - Direct State Management
  * Tests for direct state management via extends. Built with
  * `tsconfig-es2022.json` > `"target": "es2022"` `dist` and `dist-custom-elements` outputs.
  *
@@ -9,7 +10,7 @@ import { setupIFrameTest } from '../../util.js';
  * without needing requestUpdate patterns like Lit's ClockController
  */
 
-describe('Test Case #4 – Direct State Management (Simplified Pattern)', () => {
+describe('Test Case #12a – Direct State Management (Simplified Pattern)', () => {
   describe('es2022 dist output', () => {
     let frameContent: HTMLElement;
 
diff --git a/test/wdio/ts-target/extends-events/cmp.test.ts b/test/wdio/ts-target/extends-events/cmp.test.ts
new file mode 100644
index 00000000000..a3908fa081d
--- /dev/null
+++ b/test/wdio/ts-target/extends-events/cmp.test.ts
@@ -0,0 +1,343 @@
+import { browser, expect } from '@wdio/globals';
+import { setupIFrameTest } from '../../util.js';
+
+/**
+ * Tests for @Listen decorator inheritance through extends.
+ * Built with `tsconfig-es2022.json` > `"target": "es2022"` `dist` and `dist-custom-elements` outputs.
+ *
+ * Test Case #10 - Event Handling Inheritance
+ * Features:
+ * - @Listen decorator inheritance from base class
+ * - Multiple @Listen decorators at different inheritance levels
+ * - Global vs Local listeners (window, document, host)
+ * - Event handler override behavior
+ * - Event bubbling and propagation
+ */
+
+describe('Test Case #10 – Event Handling Inheritance (@Listen decorators)', () => {
+  describe('es2022 dist output', () => {
+    let frameContent: HTMLElement;
+
+    beforeEach(async () => {
+      frameContent = await setupIFrameTest('/extends-events/es2022.dist.html', 'es2022-dist');
+      const frameEle = await browser.$('#es2022-dist');
+      await frameEle.waitUntil(async () => !!frameContent.querySelector('.event-info'), { timeout: 5000 });
+    });
+
+    it('inherits base class window listener', async () => {
+      const button = frameContent.querySelector('.trigger-base-window') as HTMLButtonElement;
+      const baseEventsEl = frameContent.querySelector('.base-events');
+
+      // Get initial count from DOM
+      const initialText = baseEventsEl?.textContent || '';
+      const initialMatch = initialText.match(/Base Events: (\d+)/);
+      const initialCount = initialMatch ? parseInt(initialMatch[1], 10) : 0;
+
+      // Trigger event
+      button?.click();
+
+      // Wait for event to be processed and DOM to update
+      await browser.waitUntil(
+        async () => {
+          const updatedText = baseEventsEl?.textContent || '';
+          const updatedMatch = updatedText.match(/Base Events: (\d+)/);
+          const updatedCount = updatedMatch ? parseInt(updatedMatch[1], 10) : 0;
+          return updatedCount > initialCount;
+        },
+        { timeout: 3000 },
+      );
+
+      // Verify event was handled
+      const finalText = baseEventsEl?.textContent || '';
+      const finalMatch = finalText.match(/Base Events: (\d+)/);
+      const finalCount = finalMatch ? parseInt(finalMatch[1], 10) : 0;
+      expect(finalCount).toBeGreaterThan(initialCount);
+
+      // Verify event appears in log
+      const eventLog = frameContent.querySelector('#event-log-list');
+      expect(eventLog?.textContent).toContain('base-window-event');
+    });
+
+    it('inherits base class document listener', async () => {
+      const button = frameContent.querySelector('.trigger-base-document') as HTMLButtonElement;
+      const baseEventsEl = frameContent.querySelector('.base-events');
+
+      const initialText = baseEventsEl?.textContent || '';
+      const initialMatch = initialText.match(/Base Events: (\d+)/);
+      const initialCount = initialMatch ? parseInt(initialMatch[1], 10) : 0;
+
+      button?.click();
+
+      await browser.waitUntil(
+        async () => {
+          const updatedText = baseEventsEl?.textContent || '';
+          const updatedMatch = updatedText.match(/Base Events: (\d+)/);
+          const updatedCount = updatedMatch ? parseInt(updatedMatch[1], 10) : 0;
+          return updatedCount > initialCount;
+        },
+        { timeout: 3000 },
+      );
+
+      const finalText = baseEventsEl?.textContent || '';
+      const finalMatch = finalText.match(/Base Events: (\d+)/);
+      const finalCount = finalMatch ? parseInt(finalMatch[1], 10) : 0;
+      expect(finalCount).toBeGreaterThan(initialCount);
+
+      const eventLog = frameContent.querySelector('#event-log-list');
+      expect(eventLog?.textContent).toContain('base-document-event');
+    });
+
+    it('inherits base class host listener', async () => {
+      const button = frameContent.querySelector('.trigger-base-host') as HTMLButtonElement;
+      const baseEventsEl = frameContent.querySelector('.base-events');
+
+      const initialText = baseEventsEl?.textContent || '';
+      const initialMatch = initialText.match(/Base Events: (\d+)/);
+      const initialCount = initialMatch ? parseInt(initialMatch[1], 10) : 0;
+
+      button?.click();
+
+      await browser.waitUntil(
+        async () => {
+          const updatedText = baseEventsEl?.textContent || '';
+          const updatedMatch = updatedText.match(/Base Events: (\d+)/);
+          const updatedCount = updatedMatch ? parseInt(updatedMatch[1], 10) : 0;
+          return updatedCount > initialCount;
+        },
+        { timeout: 3000 },
+      );
+
+      const finalText = baseEventsEl?.textContent || '';
+      const finalMatch = finalText.match(/Base Events: (\d+)/);
+      const finalCount = finalMatch ? parseInt(finalMatch[1], 10) : 0;
+      expect(finalCount).toBeGreaterThan(initialCount);
+
+      const eventLog = frameContent.querySelector('#event-log-list');
+      expect(eventLog?.textContent).toContain('base-host-event');
+    });
+
+    it('handles child class window listener', async () => {
+      const button = frameContent.querySelector('.trigger-child-window') as HTMLButtonElement;
+      const childEventsEl = frameContent.querySelector('.child-events');
+
+      const initialText = childEventsEl?.textContent || '';
+      const initialMatch = initialText.match(/Child Events: (\d+)/);
+      const initialCount = initialMatch ? parseInt(initialMatch[1], 10) : 0;
+
+      button?.click();
+
+      await browser.waitUntil(
+        async () => {
+          const updatedText = childEventsEl?.textContent || '';
+          const updatedMatch = updatedText.match(/Child Events: (\d+)/);
+          const updatedCount = updatedMatch ? parseInt(updatedMatch[1], 10) : 0;
+          return updatedCount > initialCount;
+        },
+        { timeout: 3000 },
+      );
+
+      const finalText = childEventsEl?.textContent || '';
+      const finalMatch = finalText.match(/Child Events: (\d+)/);
+      const finalCount = finalMatch ? parseInt(finalMatch[1], 10) : 0;
+      expect(finalCount).toBeGreaterThan(initialCount);
+
+      const eventLog = frameContent.querySelector('#event-log-list');
+      expect(eventLog?.textContent).toContain('child-window-event');
+    });
+
+    it('handles child class document listener', async () => {
+      const button = frameContent.querySelector('.trigger-child-document') as HTMLButtonElement;
+      const childEventsEl = frameContent.querySelector('.child-events');
+
+      const initialText = childEventsEl?.textContent || '';
+      const initialMatch = initialText.match(/Child Events: (\d+)/);
+      const initialCount = initialMatch ? parseInt(initialMatch[1], 10) : 0;
+
+      button?.click();
+
+      await browser.waitUntil(
+        async () => {
+          const updatedText = childEventsEl?.textContent || '';
+          const updatedMatch = updatedText.match(/Child Events: (\d+)/);
+          const updatedCount = updatedMatch ? parseInt(updatedMatch[1], 10) : 0;
+          return updatedCount > initialCount;
+        },
+        { timeout: 3000 },
+      );
+
+      const finalText = childEventsEl?.textContent || '';
+      const finalMatch = finalText.match(/Child Events: (\d+)/);
+      const finalCount = finalMatch ? parseInt(finalMatch[1], 10) : 0;
+      expect(finalCount).toBeGreaterThan(initialCount);
+
+      const eventLog = frameContent.querySelector('#event-log-list');
+      expect(eventLog?.textContent).toContain('child-document-event');
+    });
+
+    it('handles child class host listener', async () => {
+      const button = frameContent.querySelector('.trigger-child-host') as HTMLButtonElement;
+      const childEventsEl = frameContent.querySelector('.child-events');
+
+      const initialText = childEventsEl?.textContent || '';
+      const initialMatch = initialText.match(/Child Events: (\d+)/);
+      const initialCount = initialMatch ? parseInt(initialMatch[1], 10) : 0;
+
+      button?.click();
+
+      await browser.waitUntil(
+        async () => {
+          const updatedText = childEventsEl?.textContent || '';
+          const updatedMatch = updatedText.match(/Child Events: (\d+)/);
+          const updatedCount = updatedMatch ? parseInt(updatedMatch[1], 10) : 0;
+          return updatedCount > initialCount;
+        },
+        { timeout: 3000 },
+      );
+
+      const finalText = childEventsEl?.textContent || '';
+      const finalMatch = finalText.match(/Child Events: (\d+)/);
+      const finalCount = finalMatch ? parseInt(finalMatch[1], 10) : 0;
+      expect(finalCount).toBeGreaterThan(initialCount);
+
+      const eventLog = frameContent.querySelector('#event-log-list');
+      expect(eventLog?.textContent).toContain('child-host-event');
+    });
+
+    it('child override event handler takes precedence over base', async () => {
+      const button = frameContent.querySelector('.trigger-override') as HTMLButtonElement;
+      const eventLog = frameContent.querySelector('#event-log-list');
+
+      // Get initial log content
+      const initialLogContent = eventLog?.textContent || '';
+
+      button?.click();
+
+      // Wait for event processing and DOM update
+      await browser.waitUntil(
+        async () => {
+          const updatedLogContent = eventLog?.textContent || '';
+          return updatedLogContent.length > initialLogContent.length;
+        },
+        { timeout: 3000 },
+      );
+
+      // Verify child handler was called (override behavior)
+      const finalLogContent = eventLog?.textContent || '';
+      expect(finalLogContent).toContain('override-event:child');
+
+      // Verify base handler was NOT called (override takes precedence)
+      // Count occurrences of 'override-event:base' - should be 0 (or same as initial)
+      const baseOverrideMatches = (finalLogContent.match(/override-event:base/g) || []).length;
+      const initialBaseOverrideMatches = (initialLogContent.match(/override-event:base/g) || []).length;
+      expect(baseOverrideMatches).toBe(initialBaseOverrideMatches);
+    });
+
+    it('handles event bubbling correctly', async () => {
+      const button = frameContent.querySelector('.trigger-bubble') as HTMLButtonElement;
+      const childEventsEl = frameContent.querySelector('.child-events');
+      const eventLog = frameContent.querySelector('#event-log-list');
+
+      const initialText = childEventsEl?.textContent || '';
+      const initialMatch = initialText.match(/Child Events: (\d+)/);
+      const initialCount = initialMatch ? parseInt(initialMatch[1], 10) : 0;
+
+      button?.click();
+
+      await browser.waitUntil(
+        async () => {
+          const updatedText = childEventsEl?.textContent || '';
+          const updatedMatch = updatedText.match(/Child Events: (\d+)/);
+          const updatedCount = updatedMatch ? parseInt(updatedMatch[1], 10) : 0;
+          return updatedCount > initialCount;
+        },
+        { timeout: 3000 },
+      );
+
+      const finalLogContent = eventLog?.textContent || '';
+      expect(finalLogContent).toContain('bubble-event:child');
+    });
+
+    it('tracks events in combined event log', async () => {
+      const totalEventsEl = frameContent.querySelector('.total-events');
+      const eventLog = frameContent.querySelector('#event-log-list');
+
+      // Trigger multiple events
+      const baseWindowBtn = frameContent.querySelector('.trigger-base-window') as HTMLButtonElement;
+      const childWindowBtn = frameContent.querySelector('.trigger-child-window') as HTMLButtonElement;
+      const baseHostBtn = frameContent.querySelector('.trigger-base-host') as HTMLButtonElement;
+
+      baseWindowBtn?.click();
+      await browser.pause(100);
+      childWindowBtn?.click();
+      await browser.pause(100);
+      baseHostBtn?.click();
+
+      // Wait for all events to process
+      await browser.waitUntil(
+        async () => {
+          const totalText = totalEventsEl?.textContent || '';
+          const totalMatch = totalText.match(/Total Events: (\d+)/);
+          const totalCount = totalMatch ? parseInt(totalMatch[1], 10) : 0;
+          return totalCount >= 3;
+        },
+        { timeout: 3000 },
+      );
+
+      const finalLogContent = eventLog?.textContent || '';
+
+      expect(finalLogContent).toContain('base-window-event');
+      expect(finalLogContent).toContain('child-window-event');
+      expect(finalLogContent).toContain('base-host-event');
+    });
+  });
+
+  describe('es2022 custom-element output', () => {
+    let frameContent: HTMLElement;
+
+    beforeEach(async () => {
+      frameContent = await setupIFrameTest('/extends-events/es2022.custom-element.html', 'es2022-custom-elements');
+      const frameEle = await browser.$('iframe#es2022-custom-elements');
+      await frameEle.waitUntil(async () => !!frameContent.querySelector('.event-info'), { timeout: 5000 });
+    });
+
+    it('inherits @Listen decorators in custom elements build', async () => {
+      const component = frameContent.querySelector<any>('extends-events');
+      const button = frameContent.querySelector('.trigger-base-window') as HTMLButtonElement;
+
+      const initialCount = component?.baseGlobalEventCount || 0;
+
+      button?.click();
+
+      await browser.waitUntil(
+        async () => {
+          const count = component?.baseGlobalEventCount || 0;
+          return count > initialCount;
+        },
+        { timeout: 3000 },
+      );
+
+      const finalCount = component?.baseGlobalEventCount || 0;
+      expect(finalCount).toBeGreaterThan(initialCount);
+    });
+
+    it('handles child @Listen decorators in custom elements build', async () => {
+      const component = frameContent.querySelector<any>('extends-events');
+      const button = frameContent.querySelector('.trigger-child-host') as HTMLButtonElement;
+
+      const initialCount = component?.childLocalEventCount || 0;
+
+      button?.click();
+
+      await browser.waitUntil(
+        async () => {
+          const count = component?.childLocalEventCount || 0;
+          return count > initialCount;
+        },
+        { timeout: 3000 },
+      );
+
+      const finalCount = component?.childLocalEventCount || 0;
+      expect(finalCount).toBeGreaterThan(initialCount);
+    });
+  });
+});
diff --git a/test/wdio/ts-target/extends-events/cmp.tsx b/test/wdio/ts-target/extends-events/cmp.tsx
new file mode 100644
index 00000000000..f200b1d6d55
--- /dev/null
+++ b/test/wdio/ts-target/extends-events/cmp.tsx
@@ -0,0 +1,164 @@
+import { Component, Element, h, Listen, State } from '@stencil/core';
+import { EventBase } from './event-base.js';
+
+/**
+ * EventsCmp - Demonstrates @Listen decorator inheritance
+ *
+ * This component:
+ * 1. Extends EventBase (inherits base @Listen decorators)
+ * 2. Adds additional @Listen decorators
+ * 3. Overrides base event handler
+ * 4. Demonstrates event bubbling and propagation
+ */
+@Component({
+  tag: 'extends-events',
+})
+export class EventsCmp extends EventBase {
+  @Element() el!: HTMLElement;
+
+  // Child-specific event tracking
+  @State() childEventLog: string[] = [];
+  @State() childGlobalEventCount: number = 0;
+  @State() childLocalEventCount: number = 0;
+
+  // Additional global window listener in child
+  @Listen('child-window-event', { target: 'window' })
+  handleChildWindowEvent() {
+    this.childEventLog.push('child-window-event');
+    this.childGlobalEventCount++;
+  }
+
+  // Additional document listener in child
+  @Listen('child-document-event', { target: 'document' })
+  handleChildDocumentEvent() {
+    this.childEventLog.push('child-document-event');
+    this.childGlobalEventCount++;
+  }
+
+  // Additional local host listener in child
+  @Listen('child-host-event')
+  handleChildHostEvent() {
+    this.childEventLog.push('child-host-event');
+    this.childLocalEventCount++;
+  }
+
+  // Override base event handler - child version takes precedence
+  @Listen('override-event')
+  handleOverrideEvent() {
+    this.childEventLog.push('override-event:child');
+    this.childLocalEventCount++;
+    // Note: base handler is NOT called automatically - this is override behavior
+  }
+
+  // Event that bubbles - test event propagation
+  @Listen('bubble-event')
+  handleBubbleEvent(_e: Event) {
+    this.childEventLog.push('bubble-event:child');
+    this.childLocalEventCount++;
+    // Allow event to continue bubbling
+  }
+
+  // Method to trigger events for testing
+  triggerBaseWindowEvent() {
+    window.dispatchEvent(new Event('base-window-event', { bubbles: true, cancelable: true, composed: true }));
+  }
+
+  triggerBaseDocumentEvent() {
+    document.dispatchEvent(new Event('base-document-event', { bubbles: true, cancelable: true, composed: true }));
+  }
+
+  triggerBaseHostEvent() {
+    this.el.dispatchEvent(new Event('base-host-event', { bubbles: true, cancelable: true, composed: true }));
+  }
+
+  triggerChildWindowEvent() {
+    window.dispatchEvent(new Event('child-window-event', { bubbles: true, cancelable: true, composed: true }));
+  }
+
+  triggerChildDocumentEvent() {
+    document.dispatchEvent(new Event('child-document-event', { bubbles: true, cancelable: true, composed: true }));
+  }
+
+  triggerChildHostEvent() {
+    this.el.dispatchEvent(new Event('child-host-event', { bubbles: true, cancelable: true, composed: true }));
+  }
+
+  triggerOverrideEvent() {
+    this.el.dispatchEvent(new Event('override-event', { bubbles: true, cancelable: true, composed: true }));
+  }
+
+  triggerBubbleEvent() {
+    this.el.dispatchEvent(new Event('bubble-event', { bubbles: true, cancelable: true, composed: true }));
+  }
+
+  // Expose base class method for testing
+  getEventLog(): string[] {
+    return super.getEventLog();
+  }
+
+  // Get combined event log
+  getCombinedEventLog(): string[] {
+    return [...this.baseEventLog, ...this.childEventLog];
+  }
+
+  render() {
+    const combinedLog = this.getCombinedEventLog();
+    const totalGlobal = this.baseGlobalEventCount + this.childGlobalEventCount;
+    const totalLocal = this.baseLocalEventCount + this.childLocalEventCount;
+
+    return (
+      <div>
+        <h2>Event Handling Inheritance Test</h2>
+
+        <div class="event-info">
+          <p class="base-events">Base Events: {this.baseEventLog.length}</p>
+          <p class="child-events">Child Events: {this.childEventLog.length}</p>
+          <p class="total-events">Total Events: {combinedLog.length}</p>
+          <p class="global-count">Global Events: {totalGlobal}</p>
+          <p class="local-count">Local Events: {totalLocal}</p>
+        </div>
+
+        <div class="event-log">
+          <h3>Event Log:</h3>
+          <ul id="event-log-list">
+            {combinedLog.map((event, index) => (
+              <li key={index}>{event}</li>
+            ))}
+          </ul>
+        </div>
+
+        <div class="controls">
+          <h3>Trigger Events:</h3>
+          <button class="trigger-base-window" onClick={() => this.triggerBaseWindowEvent()}>
+            Base Window Event
+          </button>
+          <button class="trigger-base-document" onClick={() => this.triggerBaseDocumentEvent()}>
+            Base Document Event
+          </button>
+          <button class="trigger-base-host" onClick={() => this.triggerBaseHostEvent()}>
+            Base Host Event
+          </button>
+          <button class="trigger-child-window" onClick={() => this.triggerChildWindowEvent()}>
+            Child Window Event
+          </button>
+          <button class="trigger-child-document" onClick={() => this.triggerChildDocumentEvent()}>
+            Child Document Event
+          </button>
+          <button class="trigger-child-host" onClick={() => this.triggerChildHostEvent()}>
+            Child Host Event
+          </button>
+          <button class="trigger-override" onClick={() => this.triggerOverrideEvent()}>
+            Override Event
+          </button>
+          <button class="trigger-bubble" onClick={() => this.triggerBubbleEvent()}>
+            Bubble Event
+          </button>
+        </div>
+
+        <div class="test-info">
+          <p>Features: @Listen inheritance | Global vs Local listeners | Event handler override | Event bubbling</p>
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/test/wdio/ts-target/extends-events/es2022.custom-element.html b/test/wdio/ts-target/extends-events/es2022.custom-element.html
new file mode 100644
index 00000000000..f4ca107fdac
--- /dev/null
+++ b/test/wdio/ts-target/extends-events/es2022.custom-element.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>ES2022 dist-custom-elements output - Event Handling Inheritance</title>
+  <script type="module">
+    import { defineCustomElement } from '/test-ts-target-output/custom-elements/extends-events.js';
+    defineCustomElement();
+  </script>
+</head>
+<body>
+  <h1>ES2022 dist-custom-elements output - Event Handling Inheritance</h1>
+  <extends-events></extends-events>
+</body>
+</html>
+
+
diff --git a/test/wdio/ts-target/extends-events/es2022.dist.html b/test/wdio/ts-target/extends-events/es2022.dist.html
new file mode 100644
index 00000000000..5fe40b4c2cb
--- /dev/null
+++ b/test/wdio/ts-target/extends-events/es2022.dist.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>ES2022 dist output - Event Handling Inheritance</title>
+  <script src="/test-ts-target-output/dist/testtstarget/testtstarget.esm.js" type="module"></script>
+</head>
+<body>
+  <h1>ES2022 dist output - Event Handling Inheritance</h1>
+  <extends-events></extends-events>
+</body>
+</html>
+
+
diff --git a/test/wdio/ts-target/extends-events/event-base.ts b/test/wdio/ts-target/extends-events/event-base.ts
new file mode 100644
index 00000000000..9a86647ba5c
--- /dev/null
+++ b/test/wdio/ts-target/extends-events/event-base.ts
@@ -0,0 +1,56 @@
+import { Listen, State } from '@stencil/core';
+
+/**
+ * EventBase - Base class demonstrating @Listen decorator inheritance
+ *
+ * This base class provides:
+ * 1. Global listeners (window, document)
+ * 2. Local listeners (host)
+ * 3. Event handlers that can be overridden
+ */
+export class EventBase {
+  // Track event calls for testing
+  @State() baseEventLog: string[] = [];
+  @State() baseGlobalEventCount: number = 0;
+  @State() baseLocalEventCount: number = 0;
+
+  // Global window listener - inherited by child
+  @Listen('base-window-event', { target: 'window' })
+  handleBaseWindowEvent() {
+    this.baseEventLog.push('base-window-event');
+    this.baseGlobalEventCount++;
+  }
+
+  // Global document listener - inherited by child
+  @Listen('base-document-event', { target: 'document' })
+  handleBaseDocumentEvent() {
+    this.baseEventLog.push('base-document-event');
+    this.baseGlobalEventCount++;
+  }
+
+  // Local host listener - inherited by child
+  @Listen('base-host-event')
+  handleBaseHostEvent() {
+    this.baseEventLog.push('base-host-event');
+    this.baseLocalEventCount++;
+  }
+
+  // Event handler that can be overridden in child
+  @Listen('override-event')
+  handleOverrideEvent() {
+    this.baseEventLog.push('override-event:base');
+    this.baseLocalEventCount++;
+  }
+
+  // Helper method to get event log
+  getEventLog(): string[] {
+    return [...this.baseEventLog];
+  }
+
+  // Helper method to reset event tracking
+  resetEventLog() {
+    this.baseEventLog = [];
+    this.baseGlobalEventCount = 0;
+    this.baseLocalEventCount = 0;
+  }
+}
diff --git a/test/wdio/ts-target/extends-inheritance-scaling/checkbox-group-cmp.tsx b/test/wdio/ts-target/extends-inheritance-scaling/checkbox-group-cmp.tsx
new file mode 100644
index 00000000000..aea93cfa9fe
--- /dev/null
+++ b/test/wdio/ts-target/extends-inheritance-scaling/checkbox-group-cmp.tsx
@@ -0,0 +1,112 @@
+import { Component, h, State, Element, Event, EventEmitter } from '@stencil/core';
+import { FormFieldBase } from './form-field-base.js';
+
+@Component({
+  tag: 'inheritance-checkbox-group',
+})
+export class CheckboxGroupCmp extends FormFieldBase {
+  @Element() el!: HTMLElement;
+  @State() values: string[] = [];
+  @State() helperText: string = 'Select at least one option';
+
+  @Event() valueChange!: EventEmitter<string[]>;
+
+  private inputId = `checkbox-group-${Math.random().toString(36).substr(2, 9)}`;
+  private helperTextId = `${this.inputId}-helper-text`;
+  private errorTextId = `${this.inputId}-error-text`;
+
+  constructor() {
+    super();
+    // Set up validation callback
+    this.setValidationCallback((vals: string[]) => {
+      if (!vals || vals.length === 0) {
+        return 'Please select at least one option';
+      }
+      return undefined;
+    });
+  }
+
+  componentDidLoad() {
+    super.componentDidLoad();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
+
+  private handleChange = (e: Event) => {
+    const checkbox = e.target as HTMLInputElement;
+    const value = checkbox.value;
+
+    if (checkbox.checked) {
+      this.values = [...this.values, value];
+    } else {
+      this.values = this.values.filter((v) => v !== value);
+    }
+
+    this.valueChange.emit(this.values);
+    this.validate(this.values);
+  };
+
+  private onFocus = () => {
+    this.handleFocusEvent();
+  };
+
+  private onBlur = () => {
+    this.handleBlurEvent(this.values);
+  };
+
+  render() {
+    const focusState = this.getFocusState();
+    const validationData = this.getValidationMessageData(this.helperTextId, this.errorTextId);
+
+    return (
+      <div class="checkbox-group-container">
+        <label>Select Options</label>
+        <div class="checkbox-group" tabindex="0" onFocus={this.onFocus} onBlur={this.onBlur}>
+          <label>
+            <input
+              type="checkbox"
+              name={this.inputId}
+              value="option1"
+              checked={this.values.includes('option1')}
+              onChange={this.handleChange}
+            />
+            Option 1
+          </label>
+          <label>
+            <input
+              type="checkbox"
+              name={this.inputId}
+              value="option2"
+              checked={this.values.includes('option2')}
+              onChange={this.handleChange}
+            />
+            Option 2
+          </label>
+          <label>
+            <input
+              type="checkbox"
+              name={this.inputId}
+              value="option3"
+              checked={this.values.includes('option3')}
+              onChange={this.handleChange}
+            />
+            Option 3
+          </label>
+        </div>
+        {validationData.hasError && (
+          <div class="validation-message">
+            <div id={validationData.errorTextId} class="error-text">
+              {validationData.errorMessage}
+            </div>
+          </div>
+        )}
+        <div class="focus-info">
+          Focused: {focusState.isFocused ? 'Yes' : 'No'} | Focus Count: {focusState.focusCount} | Blur Count:{' '}
+          {focusState.blurCount}
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/test/wdio/ts-target/extends-inheritance-scaling/cmp.test.ts b/test/wdio/ts-target/extends-inheritance-scaling/cmp.test.ts
new file mode 100644
index 00000000000..2178c9726c7
--- /dev/null
+++ b/test/wdio/ts-target/extends-inheritance-scaling/cmp.test.ts
@@ -0,0 +1,308 @@
+import { browser, expect } from '@wdio/globals';
+import { setupIFrameTest } from '../../util.js';
+
+/**
+ * Tests for inheritance-based scaling with 3 components and 2 controllers.
+ * Built with `tsconfig-es2022.json` > `"target": "es2022"` `dist` and `dist-custom-elements` outputs.
+ *
+ * Test Case #15 - Inheritance-Based Scaling
+ * This verifies that:
+ * 1. 3 components (TextInput, RadioGroup, CheckboxGroup) work with inheritance
+ * 2. 2 controllers (ValidationController, FocusController) work via inheritance
+ * 3. Lifecycle methods are called correctly
+ * 4. Validation triggers on blur
+ * 5. Focus tracking works
+ */
+
+describe('Test Case #15 – Inheritance-Based Scaling (3 components, 2 controllers)', () => {
+  describe('es2022 dist output', () => {
+    let frameContent: HTMLElement;
+
+    beforeEach(async () => {
+      frameContent = await setupIFrameTest('/extends-inheritance-scaling/es2022.dist.html', 'es2022-dist');
+      const frameEle = await browser.$('#es2022-dist');
+      await frameEle.waitUntil(async () => !!frameContent.querySelector('inheritance-scaling-demo'), { timeout: 5000 });
+    });
+
+    it('all 3 components render correctly', async () => {
+      const demo = frameContent.querySelector('inheritance-scaling-demo');
+      expect(demo).toBeTruthy();
+
+      const textInput = demo?.querySelector('inheritance-text-input');
+      const radioGroup = demo?.querySelector('inheritance-radio-group');
+      const checkboxGroup = demo?.querySelector('inheritance-checkbox-group');
+
+      expect(textInput).toBeTruthy();
+      expect(radioGroup).toBeTruthy();
+      expect(checkboxGroup).toBeTruthy();
+    });
+
+    it('text input validation works on blur', async () => {
+      const demo = frameContent.querySelector('inheritance-scaling-demo');
+      expect(demo).toBeTruthy();
+
+      // Wait for textInput component to be available
+      await browser.waitUntil(
+        () => {
+          const textInput = demo?.querySelector('inheritance-text-input');
+          return !!textInput;
+        },
+        { timeout: 5000 },
+      );
+
+      const textInput = demo?.querySelector('inheritance-text-input');
+      expect(textInput).toBeTruthy();
+
+      // Wait for input element to be available
+      await browser.waitUntil(
+        () => {
+          const input = textInput?.querySelector('input[type="text"]');
+          return !!input;
+        },
+        { timeout: 5000 },
+      );
+
+      const input = textInput?.querySelector('input[type="text"]') as HTMLInputElement;
+
+      expect(input).toBeTruthy();
+
+      // Focus and blur without entering value - should show error
+      input?.focus();
+      await browser.pause(100);
+      input?.blur();
+      await browser.pause(100); // Give component time to process blur event
+
+      await browser.waitUntil(
+        () => {
+          const errorText = textInput?.querySelector('.error-text');
+          return errorText?.textContent?.includes('Name is required');
+        },
+        { timeout: 5000 },
+      );
+
+      const errorText = textInput?.querySelector('.error-text');
+      expect(errorText?.textContent).toContain('Name is required');
+    });
+
+    it('text input focus tracking works', async () => {
+      const demo = frameContent.querySelector('inheritance-scaling-demo');
+      expect(demo).toBeTruthy();
+
+      const textInput = demo?.querySelector('inheritance-text-input');
+      expect(textInput).toBeTruthy();
+
+      // Wait for input and focus-info elements to be available
+      await browser.waitUntil(
+        () => {
+          const input = textInput?.querySelector('input[type="text"]');
+          const focusInfo = textInput?.querySelector('.focus-info');
+          return !!input && !!focusInfo;
+        },
+        { timeout: 5000 },
+      );
+
+      const input = textInput?.querySelector('input[type="text"]') as HTMLInputElement;
+      const focusInfo = textInput?.querySelector('.focus-info');
+
+      expect(input).toBeTruthy();
+      expect(focusInfo).toBeTruthy();
+
+      // Initial state should show not focused
+      expect(focusInfo?.textContent).toContain('Focused: No');
+      expect(focusInfo?.textContent).toContain('Focus Count: 0');
+
+      // Focus the input
+      input?.focus();
+      await browser.pause(100);
+
+      await browser.waitUntil(
+        () => {
+          const info = textInput?.querySelector('.focus-info')?.textContent;
+          return info?.includes('Focused: Yes') && info?.includes('Focus Count: 1');
+        },
+        { timeout: 5000 },
+      );
+
+      // Blur the input
+      input?.blur();
+      await browser.pause(100);
+
+      await browser.waitUntil(
+        () => {
+          const info = textInput?.querySelector('.focus-info')?.textContent;
+          return info?.includes('Focused: No') && info?.includes('Blur Count: 1');
+        },
+        { timeout: 5000 },
+      );
+    });
+
+    it('radio group validation works on blur', async () => {
+      const demo = frameContent.querySelector('inheritance-scaling-demo');
+      expect(demo).toBeTruthy();
+
+      const radioGroup = demo?.querySelector('inheritance-radio-group');
+      expect(radioGroup).toBeTruthy();
+
+      // Wait for radio container to be available
+      await browser.waitUntil(
+        () => {
+          const container = radioGroup?.querySelector('.radio-group');
+          return !!container;
+        },
+        { timeout: 5000 },
+      );
+
+      const radioContainer = radioGroup?.querySelector('.radio-group');
+
+      expect(radioContainer).toBeTruthy();
+
+      // Focus and blur without selecting - should show error
+      (radioContainer as HTMLElement)?.focus();
+      await browser.pause(100);
+      (radioContainer as HTMLElement)?.blur();
+
+      await browser.waitUntil(
+        () => {
+          const errorText = radioGroup?.querySelector('.error-text');
+          return errorText?.textContent?.includes('Please select an option');
+        },
+        { timeout: 5000 },
+      );
+
+      const errorText = radioGroup?.querySelector('.error-text');
+      expect(errorText?.textContent).toContain('Please select an option');
+    });
+
+    it('checkbox group validation works on blur', async () => {
+      const demo = frameContent.querySelector('inheritance-scaling-demo');
+      expect(demo).toBeTruthy();
+
+      const checkboxGroup = demo?.querySelector('inheritance-checkbox-group');
+      expect(checkboxGroup).toBeTruthy();
+
+      // Wait for checkbox container to be available
+      await browser.waitUntil(
+        () => {
+          const container = checkboxGroup?.querySelector('.checkbox-group');
+          return !!container;
+        },
+        { timeout: 5000 },
+      );
+
+      const checkboxContainer = checkboxGroup?.querySelector('.checkbox-group');
+
+      expect(checkboxContainer).toBeTruthy();
+
+      // Focus and blur without selecting - should show error
+      (checkboxContainer as HTMLElement)?.focus();
+      await browser.pause(100);
+      (checkboxContainer as HTMLElement)?.blur();
+
+      await browser.waitUntil(
+        () => {
+          const errorText = checkboxGroup?.querySelector('.error-text');
+          return errorText?.textContent?.includes('Please select at least one option');
+        },
+        { timeout: 5000 },
+      );
+
+      const errorText = checkboxGroup?.querySelector('.error-text');
+      expect(errorText?.textContent).toContain('Please select at least one option');
+    });
+
+    it('validation and focus controllers work together', async () => {
+      const textInput = frameContent.querySelector('inheritance-text-input');
+      const input = textInput?.querySelector('input[type="text"]') as HTMLInputElement;
+
+      // Focus - should track focus
+      input?.focus();
+      await browser.pause(100);
+
+      await browser.waitUntil(
+        () => {
+          const focusInfo = textInput?.querySelector('.focus-info')?.textContent;
+          return focusInfo?.includes('Focused: Yes');
+        },
+        { timeout: 5000 },
+      );
+
+      // Blur - should track blur AND validate
+      input?.blur();
+      await browser.pause(100);
+
+      await browser.waitUntil(
+        () => {
+          const focusInfo = textInput?.querySelector('.focus-info')?.textContent;
+          const errorText = textInput?.querySelector('.error-text');
+          return (
+            focusInfo?.includes('Focused: No') &&
+            focusInfo?.includes('Blur Count: 1') &&
+            errorText?.textContent?.includes('Name is required')
+          );
+        },
+        { timeout: 5000 },
+      );
+    });
+
+    it('validates that both controllers use inheritance pattern', async () => {
+      const demo = frameContent.querySelector('inheritance-scaling-demo');
+      expect(demo).toBeTruthy();
+
+      // All components should have both validation and focus functionality
+      const textInput = demo?.querySelector('inheritance-text-input');
+      const radioGroup = demo?.querySelector('inheritance-radio-group');
+      const checkboxGroup = demo?.querySelector('inheritance-checkbox-group');
+
+      // Each should have validation error display capability (trigger validation first)
+      // Trigger validation on text input to show error
+      const textInputField = textInput?.querySelector('input[type="text"]') as HTMLInputElement;
+      textInputField?.focus();
+      await browser.pause(100);
+      textInputField?.blur();
+      await browser.pause(100); // Give component time to process blur event
+      await browser.waitUntil(
+        () => {
+          const errorText = textInput?.querySelector('.error-text');
+          return errorText?.textContent?.includes('Name is required');
+        },
+        { timeout: 5000 },
+      );
+      expect(textInput?.querySelector('.error-text')).toBeTruthy();
+
+      // Trigger validation on radio group to show error
+      const radioContainer = radioGroup?.querySelector('.radio-group') as HTMLElement;
+      radioContainer?.focus();
+      await browser.pause(100);
+      radioContainer?.blur();
+      await browser.pause(100); // Give component time to process blur event
+      await browser.waitUntil(
+        () => {
+          const errorText = radioGroup?.querySelector('.error-text');
+          return errorText?.textContent?.includes('Please select an option');
+        },
+        { timeout: 5000 },
+      );
+      expect(radioGroup?.querySelector('.error-text')).toBeTruthy();
+
+      // Trigger validation on checkbox group to show error
+      const checkboxContainer = checkboxGroup?.querySelector('.checkbox-group') as HTMLElement;
+      checkboxContainer?.focus();
+      await browser.pause(100);
+      checkboxContainer?.blur();
+      await browser.pause(100); // Give component time to process blur event
+      await browser.waitUntil(
+        () => {
+          const errorText = checkboxGroup?.querySelector('.error-text');
+          return errorText?.textContent?.includes('Please select at least one option');
+        },
+        { timeout: 5000 },
+      );
+      expect(checkboxGroup?.querySelector('.error-text')).toBeTruthy();
+
+      // Each should have focus info display
+      expect(textInput?.querySelector('.focus-info')).toBeTruthy();
+      expect(radioGroup?.querySelector('.focus-info')).toBeTruthy();
+      expect(checkboxGroup?.querySelector('.focus-info')).toBeTruthy();
+    });
+  });
+});
diff --git a/test/wdio/ts-target/extends-inheritance-scaling/cmp.tsx b/test/wdio/ts-target/extends-inheritance-scaling/cmp.tsx
new file mode 100644
index 00000000000..850221c1f51
--- /dev/null
+++ b/test/wdio/ts-target/extends-inheritance-scaling/cmp.tsx
@@ -0,0 +1,125 @@
+import { Component, h } from '@stencil/core';
+
+/**
+ * Main component that demonstrates inheritance-based scaling
+ * with 3 components and 2 controllers (ValidationController and FocusController)
+ */
+@Component({
+  tag: 'inheritance-scaling-demo',
+  styles: `
+    :host {
+      display: block;
+      padding: 20px;
+      font-family: Arial, sans-serif;
+    }
+
+    .demo-container {
+      max-width: 600px;
+      margin: 0 auto;
+    }
+
+    .component-section {
+      margin: 30px 0;
+      padding: 20px;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+    }
+
+    .text-input-container,
+    .radio-group-container,
+    .checkbox-group-container {
+      margin: 10px 0;
+    }
+
+    label {
+      display: block;
+      margin-bottom: 8px;
+      font-weight: bold;
+    }
+
+    input[type='text'] {
+      width: 100%;
+      padding: 8px;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      box-sizing: border-box;
+    }
+
+    input[type='text'].invalid {
+      border-color: #f00;
+    }
+
+    .radio-group,
+    .checkbox-group {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .radio-group label,
+    .checkbox-group label {
+      display: flex;
+      align-items: center;
+      font-weight: normal;
+      cursor: pointer;
+    }
+
+    .radio-group input[type='radio'],
+    .checkbox-group input[type='checkbox'] {
+      margin-right: 8px;
+    }
+
+    .validation-message {
+      margin-top: 8px;
+    }
+
+    .error-text {
+      color: #f00;
+      font-size: 0.875em;
+    }
+
+    .focus-info {
+      margin-top: 8px;
+      font-size: 0.875em;
+      color: #666;
+    }
+
+    h1 {
+      text-align: center;
+      color: #333;
+    }
+
+    h2 {
+      color: #555;
+      margin-top: 0;
+    }
+  `,
+})
+export class InheritanceScalingDemo {
+  render() {
+    return (
+      <div class="demo-container">
+        <h1>Inheritance-Based Scaling Demo</h1>
+        <p>
+          This demo shows 3 components (TextInput, RadioGroup, CheckboxGroup) using 2 controllers (ValidationController,
+          FocusController) via inheritance.
+        </p>
+
+        <div class="component-section">
+          <h2>Text Input Component</h2>
+          <inheritance-text-input />
+        </div>
+
+        <div class="component-section">
+          <h2>Radio Group Component</h2>
+          <inheritance-radio-group />
+        </div>
+
+        <div class="component-section">
+          <h2>Checkbox Group Component</h2>
+          <inheritance-checkbox-group />
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/test/wdio/ts-target/extends-inheritance-scaling/es2022.custom-element.html b/test/wdio/ts-target/extends-inheritance-scaling/es2022.custom-element.html
new file mode 100644
index 00000000000..8f510c15761
--- /dev/null
+++ b/test/wdio/ts-target/extends-inheritance-scaling/es2022.custom-element.html
@@ -0,0 +1,14 @@
+<html>
+<head>
+  <title>ES2022 dist-custom-elements output - Inheritance Scaling Demo</title>
+  <script type="module">
+    import { defineCustomElement } from '/test-ts-target-output/custom-elements/extends-inheritance-scaling.js';
+    defineCustomElement()
+  </script>
+</head>
+<body>
+  <h1>ES2022 dist-custom-elements output - Inheritance Scaling Demo</h1>
+  <inheritance-scaling-demo></inheritance-scaling-demo>
+</body>
+</html>
+
diff --git a/test/wdio/ts-target/extends-inheritance-scaling/es2022.dist.html b/test/wdio/ts-target/extends-inheritance-scaling/es2022.dist.html
new file mode 100644
index 00000000000..349b308e372
--- /dev/null
+++ b/test/wdio/ts-target/extends-inheritance-scaling/es2022.dist.html
@@ -0,0 +1,11 @@
+<html>
+<head>
+  <title>ES2022 dist output - Inheritance Scaling Demo</title>
+  <script src="/test-ts-target-output/dist/testtstarget/testtstarget.esm.js" type="module"></script>
+</head>
+<body>
+  <h1>ES2022 dist output - Inheritance Scaling Demo</h1>
+  <inheritance-scaling-demo></inheritance-scaling-demo>
+</body>
+</html>
+
diff --git a/test/wdio/ts-target/extends-inheritance-scaling/focus-controller-base.ts b/test/wdio/ts-target/extends-inheritance-scaling/focus-controller-base.ts
new file mode 100644
index 00000000000..43356e7dde9
--- /dev/null
+++ b/test/wdio/ts-target/extends-inheritance-scaling/focus-controller-base.ts
@@ -0,0 +1,68 @@
+/**
+ * FocusControllerBase - demonstrates focus management controller via inheritance
+ *
+ * This base class:
+ * 1. Manages focus state (isFocused, hasFocus)
+ * 2. Tracks focus/blur events
+ * 3. Provides methods to handle focus lifecycle
+ */
+export abstract class FocusControllerBase {
+  protected isFocused: boolean = false;
+  protected focusCount: number = 0;
+  protected blurCount: number = 0;
+
+  constructor() {}
+
+  // Abstract method - host component must implement this
+  // This simulates Lit's this.host.requestUpdate()
+  protected abstract requestUpdate(): void;
+
+  // Lifecycle methods that components can use
+  componentDidLoad() {
+    // Setup focus tracking on component load
+    this.setupFocusTracking();
+  }
+
+  disconnectedCallback() {
+    // Cleanup focus tracking
+    this.cleanupFocusTracking();
+  }
+
+  protected setupFocusTracking() {
+    // Default implementation - can be extended
+  }
+
+  protected cleanupFocusTracking() {
+    // Default implementation - can be extended
+  }
+
+  // Handle focus event
+  handleFocus() {
+    this.isFocused = true;
+    this.focusCount++;
+    this.requestUpdate();
+  }
+
+  // Handle blur event
+  handleBlur() {
+    this.isFocused = false;
+    this.blurCount++;
+    this.requestUpdate();
+  }
+
+  // Get focus state
+  getFocusState() {
+    return {
+      isFocused: this.isFocused,
+      focusCount: this.focusCount,
+      blurCount: this.blurCount,
+    };
+  }
+
+  // Reset focus tracking
+  resetFocusTracking() {
+    this.focusCount = 0;
+    this.blurCount = 0;
+    this.requestUpdate();
+  }
+}
diff --git a/test/wdio/ts-target/extends-inheritance-scaling/focus-controller-mixin.ts b/test/wdio/ts-target/extends-inheritance-scaling/focus-controller-mixin.ts
new file mode 100644
index 00000000000..82984f6c97c
--- /dev/null
+++ b/test/wdio/ts-target/extends-inheritance-scaling/focus-controller-mixin.ts
@@ -0,0 +1,68 @@
+/**
+ * FocusControllerMixin - mixin factory for focus management functionality
+ *
+ * This mixin provides:
+ * 1. Focus state management (isFocused, focusCount, blurCount)
+ * 2. Focus tracking methods (handleFocus, handleBlur, etc.)
+ * 3. Uses forceUpdate() directly for re-renders
+ */
+import { State, forceUpdate } from '@stencil/core';
+
+export const FocusControllerMixin = (Base: any) => {
+  class FocusMixin extends Base {
+    @State() protected isFocused: boolean = false;
+    @State() protected focusCount: number = 0;
+    @State() protected blurCount: number = 0;
+
+    // Lifecycle methods
+    componentDidLoad() {
+      super.componentDidLoad?.();
+      this.setupFocusTracking();
+    }
+
+    disconnectedCallback() {
+      super.disconnectedCallback?.();
+      this.cleanupFocusTracking();
+    }
+
+    protected setupFocusTracking() {
+      // Default implementation - can be extended
+    }
+
+    protected cleanupFocusTracking() {
+      // Default implementation - can be extended
+    }
+
+    // Handle focus event
+    handleFocus() {
+      this.isFocused = true;
+      this.focusCount++;
+      forceUpdate(this);
+    }
+
+    // Handle blur event
+    handleBlur() {
+      this.isFocused = false;
+      this.blurCount++;
+      forceUpdate(this);
+    }
+
+    // Get focus state
+    getFocusState() {
+      return {
+        isFocused: this.isFocused,
+        focusCount: this.focusCount,
+        blurCount: this.blurCount,
+      };
+    }
+
+    // Reset focus tracking
+    resetFocusTracking() {
+      this.focusCount = 0;
+      this.blurCount = 0;
+      forceUpdate(this);
+    }
+  }
+
+  return FocusMixin;
+};
diff --git a/test/wdio/ts-target/extends-inheritance-scaling/form-field-base.ts b/test/wdio/ts-target/extends-inheritance-scaling/form-field-base.ts
new file mode 100644
index 00000000000..8598e2859cb
--- /dev/null
+++ b/test/wdio/ts-target/extends-inheritance-scaling/form-field-base.ts
@@ -0,0 +1,22 @@
+/**
+ * FormFieldBase - combines ValidationControllerMixin and FocusControllerMixin
+ *
+ * This base class demonstrates how multiple controllers can be combined
+ * via Mixin (multiple inheritance). Components can extend this to get both
+ * validation and focus management functionality.
+ */
+import { Mixin } from '@stencil/core';
+import { ValidationControllerMixin } from './validation-controller-mixin.js';
+import { FocusControllerMixin } from './focus-controller-mixin.js';
+
+export abstract class FormFieldBase extends Mixin(ValidationControllerMixin, FocusControllerMixin) {
+  // Convenience methods that combine both controllers
+  handleFocusEvent() {
+    this.handleFocus(); // From FocusControllerMixin
+  }
+
+  handleBlurEvent(value: any) {
+    this.handleBlur(); // From FocusControllerMixin (no params)
+    this.validate(value); // From ValidationControllerMixin
+  }
+}
diff --git a/test/wdio/ts-target/extends-inheritance-scaling/radio-group-cmp.tsx b/test/wdio/ts-target/extends-inheritance-scaling/radio-group-cmp.tsx
new file mode 100644
index 00000000000..141fb4aeac3
--- /dev/null
+++ b/test/wdio/ts-target/extends-inheritance-scaling/radio-group-cmp.tsx
@@ -0,0 +1,107 @@
+import { Component, h, State, Element, Event, EventEmitter } from '@stencil/core';
+import { FormFieldBase } from './form-field-base.js';
+
+@Component({
+  tag: 'inheritance-radio-group',
+})
+export class RadioGroupCmp extends FormFieldBase {
+  @Element() el!: HTMLElement;
+  @State() value: string | undefined = undefined;
+  @State() helperText: string = 'Select an option';
+
+  @Event() valueChange!: EventEmitter<string>;
+
+  private inputId = `radio-group-${Math.random().toString(36).substr(2, 9)}`;
+  private helperTextId = `${this.inputId}-helper-text`;
+  private errorTextId = `${this.inputId}-error-text`;
+
+  constructor() {
+    super();
+    // Set up validation callback
+    this.setValidationCallback((val: string | undefined) => {
+      if (!val) {
+        return 'Please select an option';
+      }
+      return undefined;
+    });
+  }
+
+  componentDidLoad() {
+    super.componentDidLoad();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
+
+  private handleChange = (e: Event) => {
+    const radio = e.target as HTMLInputElement;
+    if (radio.checked) {
+      this.value = radio.value;
+      this.valueChange.emit(this.value);
+      this.validate(this.value);
+    }
+  };
+
+  private onFocus = () => {
+    this.handleFocusEvent();
+  };
+
+  private onBlur = () => {
+    this.handleBlurEvent(this.value);
+  };
+
+  render() {
+    const focusState = this.getFocusState();
+    const validationData = this.getValidationMessageData(this.helperTextId, this.errorTextId);
+
+    return (
+      <div class="radio-group-container">
+        <label>Select Option</label>
+        <div class="radio-group" tabindex="0" onFocus={this.onFocus} onBlur={this.onBlur}>
+          <label>
+            <input
+              type="radio"
+              name={this.inputId}
+              value="option1"
+              checked={this.value === 'option1'}
+              onChange={this.handleChange}
+            />
+            Option 1
+          </label>
+          <label>
+            <input
+              type="radio"
+              name={this.inputId}
+              value="option2"
+              checked={this.value === 'option2'}
+              onChange={this.handleChange}
+            />
+            Option 2
+          </label>
+          <label>
+            <input
+              type="radio"
+              name={this.inputId}
+              value="option3"
+              checked={this.value === 'option3'}
+              onChange={this.handleChange}
+            />
+            Option 3
+          </label>
+        </div>
+        {validationData.hasError && (
+          <div class="validation-message">
+            <div id={validationData.errorTextId} class="error-text">
+              {validationData.errorMessage}
+            </div>
+          </div>
+        )}
+        <div class="focus-info">
+          Focused: {focusState.isFocused ? 'Yes' : 'No'} | Focus Count: {focusState.focusCount} | Blur Count:{' '}
+          {focusState.blurCount}
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/test/wdio/ts-target/extends-inheritance-scaling/text-input-cmp.tsx b/test/wdio/ts-target/extends-inheritance-scaling/text-input-cmp.tsx
new file mode 100644
index 00000000000..dcb172459f4
--- /dev/null
+++ b/test/wdio/ts-target/extends-inheritance-scaling/text-input-cmp.tsx
@@ -0,0 +1,82 @@
+import { Component, h, State, Element } from '@stencil/core';
+import { FormFieldBase } from './form-field-base.js';
+
+@Component({
+  tag: 'inheritance-text-input',
+})
+export class TextInputCmp extends FormFieldBase {
+  @Element() el!: HTMLElement;
+  @State() value: string = '';
+  @State() helperText: string = 'Enter your name';
+
+  private inputId = `text-input-${Math.random().toString(36).substr(2, 9)}`;
+  private helperTextId = `${this.inputId}-helper-text`;
+  private errorTextId = `${this.inputId}-error-text`;
+
+  constructor() {
+    super();
+    // Set up validation callback
+    this.setValidationCallback((val: string) => {
+      if (!val || val.trim().length === 0) {
+        return 'Name is required';
+      }
+      if (val.length < 2) {
+        return 'Name must be at least 2 characters';
+      }
+      return undefined;
+    });
+  }
+
+  componentDidLoad() {
+    super.componentDidLoad();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
+
+  private handleInput = (e: Event) => {
+    const input = e.target as HTMLInputElement;
+    this.value = input.value;
+  };
+
+  private onFocus = () => {
+    this.handleFocusEvent();
+  };
+
+  private onBlur = () => {
+    this.handleBlurEvent(this.value);
+  };
+
+  render() {
+    const focusState = this.getFocusState();
+    const validationState = this.getValidationState();
+    const validationData = this.getValidationMessageData(this.helperTextId, this.errorTextId);
+
+    return (
+      <div class="text-input-container">
+        <label htmlFor={this.inputId}>Name</label>
+        <input
+          id={this.inputId}
+          type="text"
+          value={this.value}
+          onInput={this.handleInput}
+          onFocus={this.onFocus}
+          onBlur={this.onBlur}
+          class={validationState.isValid ? '' : 'invalid'}
+        />
+        {validationData.hasError && (
+          <div class="validation-message">
+            <div id={validationData.errorTextId} class="error-text">
+              {validationData.errorMessage}
+            </div>
+          </div>
+        )}
+        <div class="focus-info">
+          Focused: {focusState.isFocused ? 'Yes' : 'No'} | Focus Count: {focusState.focusCount} | Blur Count:{' '}
+          {focusState.blurCount}
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/test/wdio/ts-target/extends-inheritance-scaling/validation-controller-base.ts b/test/wdio/ts-target/extends-inheritance-scaling/validation-controller-base.ts
new file mode 100644
index 00000000000..5339dca85ee
--- /dev/null
+++ b/test/wdio/ts-target/extends-inheritance-scaling/validation-controller-base.ts
@@ -0,0 +1,94 @@
+/**
+ * ValidationControllerBase - demonstrates validation controller via inheritance
+ *
+ * This base class:
+ * 1. Manages validation state (isValid, errorMessage)
+ * 2. Provides method to render validation message
+ * 3. Can trigger validation (ideally on blur)
+ * 4. Runs a callback provided by the host for validation logic
+ */
+export abstract class ValidationControllerBase {
+  protected isValid: boolean = true;
+  protected errorMessage: string = '';
+  protected validationCallback?: (value: any) => string | undefined;
+
+  constructor() {}
+
+  // Abstract method - host component must implement this
+  // This simulates Lit's this.host.requestUpdate()
+  protected abstract requestUpdate(): void;
+
+  // Lifecycle methods that components can use
+  componentDidLoad() {
+    // Setup validation on component load
+    this.setupValidation();
+  }
+
+  disconnectedCallback() {
+    // Cleanup if needed
+    this.cleanupValidation();
+  }
+
+  // Setup validation - can be overridden by host
+  protected setupValidation() {
+    // Default implementation - can be extended
+  }
+
+  protected cleanupValidation() {
+    // Default implementation - can be extended
+  }
+
+  // Set the validation callback from host
+  setValidationCallback(callback: (value: any) => string | undefined) {
+    this.validationCallback = callback;
+  }
+
+  // Validate the value - returns true if valid, false otherwise
+  validate(value: any): boolean {
+    if (!this.validationCallback) {
+      this.isValid = true;
+      this.errorMessage = '';
+      this.requestUpdate();
+      return true;
+    }
+
+    const error = this.validationCallback(value);
+    this.isValid = !error;
+    this.errorMessage = error || '';
+    this.requestUpdate();
+    return this.isValid;
+  }
+
+  // Trigger validation on blur
+  handleBlur(value: any) {
+    this.validate(value);
+  }
+
+  // Get validation state
+  getValidationState() {
+    return {
+      isValid: this.isValid,
+      errorMessage: this.errorMessage,
+    };
+  }
+
+  // Get validation message data for rendering
+  getValidationMessageData(helperTextId?: string, errorTextId?: string) {
+    const { isValid, errorMessage } = this.getValidationState();
+
+    return {
+      isValid,
+      errorMessage,
+      helperTextId,
+      errorTextId,
+      hasError: !!errorMessage,
+    };
+  }
+
+  // Reset validation state
+  resetValidation() {
+    this.isValid = true;
+    this.errorMessage = '';
+    this.requestUpdate();
+  }
+}
diff --git a/test/wdio/ts-target/extends-inheritance-scaling/validation-controller-mixin.ts b/test/wdio/ts-target/extends-inheritance-scaling/validation-controller-mixin.ts
new file mode 100644
index 00000000000..f2dfbc290f8
--- /dev/null
+++ b/test/wdio/ts-target/extends-inheritance-scaling/validation-controller-mixin.ts
@@ -0,0 +1,87 @@
+/**
+ * ValidationControllerMixin - mixin factory for validation functionality
+ *
+ * This mixin provides:
+ * 1. Validation state management (isValid, errorMessage)
+ * 2. Validation methods (validate, handleBlur, etc.)
+ * 3. Uses forceUpdate() directly for re-renders
+ */
+import { State, forceUpdate } from '@stencil/core';
+
+export const ValidationControllerMixin = (Base: any) => {
+  class ValidationMixin extends Base {
+    @State() protected isValid: boolean = true;
+    @State() protected errorMessage: string = '';
+    protected validationCallback?: (value: any) => string | undefined;
+
+    // Lifecycle methods
+    componentDidLoad() {
+      super.componentDidLoad?.();
+      this.setupValidation();
+    }
+
+    disconnectedCallback() {
+      super.disconnectedCallback?.();
+      this.cleanupValidation();
+    }
+
+    protected setupValidation() {
+      // Default implementation - can be extended
+    }
+
+    protected cleanupValidation() {
+      // Default implementation - can be extended
+    }
+
+    // Set the validation callback from host
+    setValidationCallback(callback: (value: any) => string | undefined) {
+      this.validationCallback = callback;
+    }
+
+    // Validate the value - returns true if valid, false otherwise
+    validate(value: any): boolean {
+      if (!this.validationCallback) {
+        this.isValid = true;
+        this.errorMessage = '';
+        forceUpdate(this);
+        return true;
+      }
+
+      const error = this.validationCallback(value);
+      this.isValid = !error;
+      this.errorMessage = error || '';
+      forceUpdate(this);
+      return this.isValid;
+    }
+
+    // Get validation state
+    getValidationState() {
+      return {
+        isValid: this.isValid,
+        errorMessage: this.errorMessage,
+      };
+    }
+
+    // Get validation message data for rendering
+    getValidationMessageData(helperTextId?: string, errorTextId?: string) {
+      const { isValid, errorMessage } = this.getValidationState();
+
+      return {
+        isValid,
+        errorMessage,
+        helperTextId,
+        errorTextId,
+        hasError: !!errorMessage,
+      };
+    }
+
+    // Reset validation state
+    resetValidation() {
+      this.isValid = true;
+      this.errorMessage = '';
+      forceUpdate(this);
+    }
+  }
+
+  return ValidationMixin;
+};
diff --git a/test/wdio/ts-target/extends-mixed-decorators/cmp.test.ts b/test/wdio/ts-target/extends-mixed-decorators/cmp.test.ts
new file mode 100644
index 00000000000..8ab36b79517
--- /dev/null
+++ b/test/wdio/ts-target/extends-mixed-decorators/cmp.test.ts
@@ -0,0 +1,255 @@
+import { browser, expect } from '@wdio/globals';
+import { setupIFrameTest } from '../../util.js';
+
+/**
+ * Tests for mixed decorator types - same name used as different decorator types in inheritance chains.
+ * Built with `tsconfig-es2022.json` > `"target": "es2022"` `dist` and `dist-custom-elements` outputs.
+ *
+ * Test Case #18 - Mixed Decorator Types
+ * Features:
+ * - @Prop in Base, @State in Component (mixedName)
+ * - @State in Base, @Prop in Component (mixedStateName)
+ * - Runtime behavior verification
+ */
+
+describe('Test Case #18 – Mixed Decorator Types (Different decorator types, same name)', () => {
+  describe('es2022 dist output', () => {
+    let frameContent: HTMLElement;
+
+    beforeEach(async () => {
+      frameContent = await setupIFrameTest('/extends-mixed-decorators/es2022.dist.html', 'es2022-dist');
+      const frameEle = await browser.$('#es2022-dist');
+      await frameEle.waitUntil(async () => !!frameContent.querySelector('.container'), { timeout: 5000 });
+    });
+
+    describe('@Prop in Base, @State in Component (mixedName)', () => {
+      it('component @State overrides base @Prop - component value is used', async () => {
+        const mixedName = frameContent.querySelector('.mixed-name-value');
+
+        expect(mixedName?.textContent).toContain('Mixed Name: component state value');
+        expect(mixedName?.textContent).not.toContain('base prop value');
+      });
+
+      it('component @State updates trigger re-renders correctly', async () => {
+        const button = frameContent.querySelector('.update-mixed-name') as HTMLButtonElement;
+
+        // Click button to update mixedName state
+        button?.click();
+
+        await browser.waitUntil(
+          () => {
+            const mixedName = frameContent.querySelector('.mixed-name-value');
+            return mixedName?.textContent?.includes('mixed name updated');
+          },
+          { timeout: 3000 },
+        );
+
+        const mixedName = frameContent.querySelector('.mixed-name-value');
+        expect(mixedName?.textContent).toContain('Mixed Name: mixed name updated');
+      });
+
+      it('component @State can be updated via method', async () => {
+        const component = frameContent.querySelector('extends-mixed-decorators') as any;
+        await component.updateMixedName('updated via method');
+
+        await browser.waitUntil(
+          () => {
+            const mixedName = frameContent.querySelector('.mixed-name-value');
+            return mixedName?.textContent?.includes('updated via method');
+          },
+          { timeout: 3000 },
+        );
+
+        const mixedName = frameContent.querySelector('.mixed-name-value');
+        expect(mixedName?.textContent).toContain('Mixed Name: updated via method');
+      });
+
+      it('base @Prop is not accessible (component @State wins)', async () => {
+        const mixedName = frameContent.querySelector('.mixed-name-value');
+
+        // Verify component @State value is used (not base @Prop)
+        expect(mixedName?.textContent).toContain('component state value');
+        expect(mixedName?.textContent).not.toContain('base prop value');
+
+        // Verify it behaves as a state (reactive, can be updated)
+        const component = frameContent.querySelector('extends-mixed-decorators') as any;
+        await component.updateMixedName('state behavior verified');
+
+        await browser.waitUntil(
+          () => {
+            const updated = frameContent.querySelector('.mixed-name-value');
+            return updated?.textContent?.includes('state behavior verified');
+          },
+          { timeout: 3000 },
+        );
+      });
+
+      it('component @State type is active (not base @Prop type)', async () => {
+        const mixedNameType = frameContent.querySelector('.mixed-name-type');
+
+        expect(mixedNameType?.textContent).toContain('component @State overrides base @Prop');
+      });
+    });
+
+    describe('@State in Base, @Prop in Component (mixedStateName)', () => {
+      it('component @Prop initial value is used (not base @State)', async () => {
+        const mixedStateName = frameContent.querySelector('.mixed-state-name-value');
+
+        expect(mixedStateName?.textContent).toContain('Mixed State Name: component prop value');
+        expect(mixedStateName?.textContent).not.toContain('base state value');
+      });
+
+      it('component @Prop conflicts with base @State - attribute updates may not work', async () => {
+        const component = frameContent.querySelector('extends-mixed-decorators');
+        const initialValue = frameContent.querySelector('.mixed-state-name-value')?.textContent;
+        component?.setAttribute('mixed-state-name', 'updated via attribute');
+
+        // Wait to see if update occurs
+        await browser
+          .waitUntil(
+            () => {
+              const mixedStateName = frameContent.querySelector('.mixed-state-name-value');
+              return mixedStateName?.textContent?.includes('updated via attribute');
+            },
+            { timeout: 3000 },
+          )
+          .catch(() => {
+            // If update doesn't occur, document this as runtime behavior
+            const mixedStateName = frameContent.querySelector('.mixed-state-name-value');
+            // Verify initial value is still present (conflict prevents update)
+            expect(mixedStateName?.textContent).toContain('component prop value');
+          });
+      });
+
+      it('component @Prop conflicts with base @State - property updates may not work', async () => {
+        const component = frameContent.querySelector('extends-mixed-decorators') as any;
+        component.mixedStateName = 'updated via property';
+
+        // Wait to see if update occurs
+        await browser
+          .waitUntil(
+            () => {
+              const mixedStateName = frameContent.querySelector('.mixed-state-name-value');
+              return mixedStateName?.textContent?.includes('updated via property');
+            },
+            { timeout: 3000 },
+          )
+          .catch(() => {
+            // If update doesn't occur, document this as runtime behavior
+            const mixedStateName = frameContent.querySelector('.mixed-state-name-value');
+            // Verify initial value is still present (conflict prevents update)
+            expect(mixedStateName?.textContent).toContain('component prop value');
+          });
+      });
+
+      it('base @State conflicts with component @Prop - initial value shows component prop', async () => {
+        const mixedStateName = frameContent.querySelector('.mixed-state-name-value');
+
+        // Verify component @Prop initial value is used (not base @State)
+        expect(mixedStateName?.textContent).toContain('component prop value');
+        expect(mixedStateName?.textContent).not.toContain('base state value');
+
+        // Document that conflicts may prevent updates
+        // This is the actual runtime behavior being tested
+      });
+    });
+
+    describe('Runtime Behavior', () => {
+      it('only one version exists in final component (component decorator type wins)', async () => {
+        const mixedName = frameContent.querySelector('.mixed-name-value');
+        const mixedStateName = frameContent.querySelector('.mixed-state-name-value');
+
+        // Verify component decorator types are active (not base)
+        expect(mixedName?.textContent).toContain('component state value');
+        expect(mixedStateName?.textContent).toContain('component prop value');
+
+        // Verify base values are not present
+        expect(mixedName?.textContent).not.toContain('base prop value');
+        expect(mixedStateName?.textContent).not.toContain('base state value');
+      });
+
+      it('winning decorator types behave correctly', async () => {
+        const component = frameContent.querySelector('extends-mixed-decorators') as any;
+
+        // Test @State behavior (mixedName) - this works correctly
+        await component.updateMixedName('state reactivity verified');
+        await browser.waitUntil(
+          () => {
+            const updated = frameContent.querySelector('.mixed-name-value');
+            return updated?.textContent?.includes('state reactivity verified');
+          },
+          { timeout: 3000 },
+        );
+
+        // Test @Prop behavior (mixedStateName) - may conflict with base @State
+        component.mixedStateName = 'prop attribute verified';
+        await browser
+          .waitUntil(
+            () => {
+              const updated = frameContent.querySelector('.mixed-state-name-value');
+              return updated?.textContent?.includes('prop attribute verified');
+            },
+            { timeout: 3000 },
+          )
+          .catch(() => {
+            // If update doesn't occur, document conflict behavior
+            const updated = frameContent.querySelector('.mixed-state-name-value');
+            expect(updated?.textContent).toContain('component prop value');
+          });
+      });
+
+      it('non-conflicting base decorators remain accessible', async () => {
+        const baseOnlyProp = frameContent.querySelector('.base-only-prop-value');
+        const baseOnlyState = frameContent.querySelector('.base-only-state-value');
+        const component = frameContent.querySelector('extends-mixed-decorators') as any;
+
+        expect(baseOnlyProp?.textContent).toContain('base only prop value');
+        expect(baseOnlyState?.textContent).toContain('base only state value');
+
+        // Verify base method is still accessible
+        await component.resetMethodCallLog();
+        const result = await component.baseOnlyMethod();
+        expect(result).toBe('base only method');
+
+        const baseLog = await component.getMethodCallLog();
+        expect(baseLog).toContain('baseOnlyMethod');
+      });
+    });
+  });
+
+  describe('es2022 custom-element output', () => {
+    let frameContent: HTMLElement;
+
+    beforeEach(async () => {
+      await browser.switchToParentFrame();
+      frameContent = await setupIFrameTest(
+        '/extends-mixed-decorators/es2022.custom-element.html',
+        'es2022-custom-elements',
+      );
+      const frameEle = await browser.$('iframe#es2022-custom-elements');
+      await frameEle.waitUntil(async () => !!frameContent.querySelector('.container'), { timeout: 5000 });
+    });
+
+    it('component @State overrides base @Prop in custom elements build', async () => {
+      const mixedName = frameContent.querySelector('.mixed-name-value');
+
+      expect(mixedName?.textContent).toContain('Mixed Name: component state value');
+      expect(mixedName?.textContent).not.toContain('base prop value');
+    });
+
+    it('component @Prop overrides base @State in custom elements build', async () => {
+      const mixedStateName = frameContent.querySelector('.mixed-state-name-value');
+
+      expect(mixedStateName?.textContent).toContain('Mixed State Name: component prop value');
+      expect(mixedStateName?.textContent).not.toContain('base state value');
+    });
+
+    it('component decorator types take precedence in custom elements build', async () => {
+      const mixedName = frameContent.querySelector('.mixed-name-value');
+      const mixedStateName = frameContent.querySelector('.mixed-state-name-value');
+
+      expect(mixedName?.textContent).toContain('component state value');
+      expect(mixedStateName?.textContent).toContain('component prop value');
+    });
+  });
+});
diff --git a/test/wdio/ts-target/extends-mixed-decorators/cmp.tsx b/test/wdio/ts-target/extends-mixed-decorators/cmp.tsx
new file mode 100644
index 00000000000..c7b22aeff90
--- /dev/null
+++ b/test/wdio/ts-target/extends-mixed-decorators/cmp.tsx
@@ -0,0 +1,91 @@
+import { Component, Element, h, Method, Prop, State } from '@stencil/core';
+import { MixedDecoratorsBase } from './mixed-decorators-base.js';
+
+/**
+ * MixedDecoratorsCmp - Demonstrates mixed decorator type conflicts in inheritance chains
+ *
+ * This component:
+ * 1. Extends MixedDecoratorsBase (inherits base decorators)
+ * 2. Defines conflicting decorators with same names but different decorator types
+ * 3. Verifies runtime behavior when mixed decorator types exist
+ * 4. Renders UI showing which decorator type is active (component decorator type should win)
+ */
+@Component({
+  tag: 'extends-mixed-decorators',
+})
+export class MixedDecoratorsCmp extends MixedDecoratorsBase {
+  @Element() el!: HTMLElement;
+
+  // Mixed decorator type conflicts - same name, different decorator type
+  // Base has @Prop, component has @State - component @State should override base @Prop
+  @State() mixedName: string = 'component state value';
+
+  // Base has @State, component has @Prop - component @Prop should override base @State
+  @Prop() mixedStateName: string = 'component prop value';
+
+  // Component-specific properties for comparison
+  @State() componentOnlyState: string = 'component only state';
+
+  /**
+   * Method to update mixedName state for testing
+   */
+  @Method()
+  async updateMixedName(value: string): Promise<void> {
+    this.mixedName = value;
+  }
+
+  /**
+   * Method to update component-only state
+   */
+  @Method()
+  async updateComponentOnlyState(value: string): Promise<void> {
+    this.componentOnlyState = value;
+  }
+
+  render() {
+    return (
+      <div class="container">
+        <h2>Mixed Decorator Types Test</h2>
+
+        <div class="prop-state-conflict">
+          <h3>@Prop in Base, @State in Component (mixedName)</h3>
+          <p class="mixed-name-value">Mixed Name: {this.mixedName}</p>
+          <p class="mixed-name-type">Expected: component state value (component @State overrides base @Prop)</p>
+        </div>
+
+        <div class="state-prop-conflict">
+          <h3>@State in Base, @Prop in Component (mixedStateName)</h3>
+          <p class="mixed-state-name-value">Mixed State Name: {this.mixedStateName}</p>
+          <p class="mixed-state-name-type">Expected: component prop value (component @Prop overrides base @State)</p>
+        </div>
+
+        <div class="base-only-props">
+          <h3>Base-Only Properties (Not Conflicted)</h3>
+          <p class="base-only-prop-value">Base Only Prop: {this.baseOnlyProp}</p>
+          <p class="base-only-state-value">Base Only State: {this.baseOnlyState}</p>
+        </div>
+
+        <div class="component-only-state">
+          <h3>Component-Only State</h3>
+          <p class="component-only-state-value">Component Only State: {this.componentOnlyState}</p>
+        </div>
+
+        <div class="actions">
+          <button class="update-mixed-name" onClick={() => this.updateMixedName('mixed name updated')}>
+            Update Mixed Name (State)
+          </button>
+          <button
+            class="update-component-only-state"
+            onClick={() => this.updateComponentOnlyState('component only updated')}
+          >
+            Update Component Only State
+          </button>
+        </div>
+
+        <div class="test-info">
+          <p>Features: @Prop/@State conflicts | @State/@Prop conflicts | Runtime behavior</p>
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/test/wdio/ts-target/extends-mixed-decorators/es2022.custom-element.html b/test/wdio/ts-target/extends-mixed-decorators/es2022.custom-element.html
new file mode 100644
index 00000000000..a68edcdad7d
--- /dev/null
+++ b/test/wdio/ts-target/extends-mixed-decorators/es2022.custom-element.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>ES2022 dist-custom-elements output - Mixed Decorator Types</title>
+  <script type="module">
+    import { defineCustomElement } from '/test-ts-target-output/custom-elements/extends-mixed-decorators.js';
+    defineCustomElement();
+  </script>
+</head>
+<body>
+  <h1>ES2022 dist-custom-elements output - Mixed Decorator Types</h1>
+  <extends-mixed-decorators></extends-mixed-decorators>
+</body>
+</html>
+
diff --git a/test/wdio/ts-target/extends-mixed-decorators/es2022.dist.html b/test/wdio/ts-target/extends-mixed-decorators/es2022.dist.html
new file mode 100644
index 00000000000..9da2fc8d0aa
--- /dev/null
+++ b/test/wdio/ts-target/extends-mixed-decorators/es2022.dist.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>ES2022 dist output - Mixed Decorator Types</title>
+  <script src="/test-ts-target-output/dist/testtstarget/testtstarget.esm.js" type="module"></script>
+</head>
+<body>
+  <h1>ES2022 dist output - Mixed Decorator Types</h1>
+  <extends-mixed-decorators></extends-mixed-decorators>
+</body>
+</html>
+
diff --git a/test/wdio/ts-target/extends-mixed-decorators/mixed-decorators-base.ts b/test/wdio/ts-target/extends-mixed-decorators/mixed-decorators-base.ts
new file mode 100644
index 00000000000..c722167e129
--- /dev/null
+++ b/test/wdio/ts-target/extends-mixed-decorators/mixed-decorators-base.ts
@@ -0,0 +1,56 @@
+import { Prop, State, Method } from '@stencil/core';
+
+/**
+ * MixedDecoratorsBase - Base class demonstrating mixed decorator type conflicts
+ *
+ * This base class provides:
+ * 1. @Prop, @State, and @Method decorators that will conflict with different decorator types in component
+ * 2. Non-conflicting properties/methods for comparison
+ * 3. Tracking mechanism to verify which version is used
+ */
+export class MixedDecoratorsBase {
+  // Properties that will conflict with different decorator types in component
+  @Prop() mixedName: string = 'base prop value';
+  @State() mixedStateName: string = 'base state value';
+
+  // Non-conflicting properties for comparison
+  @Prop() baseOnlyProp: string = 'base only prop value';
+  @State() baseOnlyState: string = 'base only state value';
+
+  // Tracking mechanism to verify which method is called
+  protected methodCallLog: string[] = [];
+
+  /**
+   * Method that will conflict with @Prop in component
+   */
+  @Method()
+  async mixedMethodName(): Promise<string> {
+    this.methodCallLog.push('mixedMethodName:base');
+    return 'base method';
+  }
+
+  /**
+   * Non-conflicting method for comparison
+   */
+  @Method()
+  async baseOnlyMethod(): Promise<string> {
+    this.methodCallLog.push('baseOnlyMethod');
+    return 'base only method';
+  }
+
+  /**
+   * Method to get the call log for testing
+   */
+  @Method()
+  async getMethodCallLog(): Promise<string[]> {
+    return [...this.methodCallLog];
+  }
+
+  /**
+   * Method to reset call log for testing
+   */
+  @Method()
+  async resetMethodCallLog(): Promise<void> {
+    this.methodCallLog = [];
+  }
+}
diff --git a/test/wdio/ts-target/extends-via-host/cmp.test.ts b/test/wdio/ts-target/extends-via-host/cmp.test.ts
index 48716fea92d..aaf80505141 100644
--- a/test/wdio/ts-target/extends-via-host/cmp.test.ts
+++ b/test/wdio/ts-target/extends-via-host/cmp.test.ts
@@ -6,6 +6,7 @@ import { setupIFrameTest } from '../../util.js';
  * with automatic lifecycle hooking. Built with
  * `tsconfig-es2022.json` > `"target": "es2022"` `dist` and `dist-custom-elements` outputs.
  *
+ * Test Case #14 - ReactiveControllerHost Pattern
  * This verifies that:
  * 1. Controllers are automatically called during lifecycle events
  * 2. Controllers can trigger component updates via requestUpdate()
@@ -13,7 +14,7 @@ import { setupIFrameTest } from '../../util.js';
  * 4. No super() calls needed for controller lifecycle methods
  */
 
-describe('Test Case – ReactiveControllerHost Pattern', () => {
+describe('Test Case #14 – ReactiveControllerHost Pattern', () => {
   describe('es2022 dist output', () => {
     let frameContent: HTMLElement;
 
diff --git a/test/wdio/ts-target/extends-watch/cmp.test.ts b/test/wdio/ts-target/extends-watch/cmp.test.ts
new file mode 100644
index 00000000000..e73a281885b
--- /dev/null
+++ b/test/wdio/ts-target/extends-watch/cmp.test.ts
@@ -0,0 +1,478 @@
+import { browser, expect } from '@wdio/globals';
+import { setupIFrameTest } from '../../util.js';
+
+/**
+ * Tests for @Watch decorator inheritance through extends.
+ * Built with `tsconfig-es2022.json` > `"target": "es2022"` `dist` and `dist-custom-elements` outputs.
+ *
+ * Test Case #11 - Watch Decorator Inheritance
+ * Features:
+ * - @Watch decorator inheritance from base class
+ * - Multiple @Watch decorators for same property at different inheritance levels
+ * - Watch execution order (base class first, component second)
+ * - Reactive property chains (watch handlers triggering other property changes)
+ * - Watch handler override behavior (when base and component both watch same property)
+ */
+
+describe('Test Case #11 – Watch Decorator Inheritance (@Watch decorators)', () => {
+  describe('es2022 dist output', () => {
+    let frameContent: HTMLElement;
+
+    beforeEach(async () => {
+      frameContent = await setupIFrameTest('/extends-watch/es2022.dist.html', 'es2022-dist');
+      const frameEle = await browser.$('#es2022-dist');
+      await frameEle.waitUntil(async () => !!frameContent.querySelector('.watch-info'), { timeout: 5000 });
+
+      // Reset state before each test
+      const component = frameContent.querySelector<any>('extends-watch');
+      await component.resetWatchLogs();
+    });
+
+    it('inherits base class @Watch decorator for baseProp', async () => {
+      const component = frameContent.querySelector<any>('extends-watch');
+      const button = frameContent.querySelector('.update-base-prop') as HTMLButtonElement;
+      const baseWatchCountEl = frameContent.querySelector('.base-watch-count');
+
+      // Get initial count from DOM
+      const initialText = baseWatchCountEl?.textContent || '';
+      const initialMatch = initialText.match(/Base Watch Calls: (\d+)/);
+      const initialCount = initialMatch ? parseInt(initialMatch[1], 10) : 0;
+
+      // Trigger property change
+      button?.click();
+
+      // Wait for watch handler to be called and DOM to update
+      await browser.waitUntil(
+        async () => {
+          const updatedText = baseWatchCountEl?.textContent || '';
+          const updatedMatch = updatedText.match(/Base Watch Calls: (\d+)/);
+          const updatedCount = updatedMatch ? parseInt(updatedMatch[1], 10) : 0;
+          return updatedCount > initialCount;
+        },
+        { timeout: 3000 },
+      );
+
+      // Verify watch handler was called
+      const finalText = baseWatchCountEl?.textContent || '';
+      const finalMatch = finalText.match(/Base Watch Calls: (\d+)/);
+      const finalCount = finalMatch ? parseInt(finalMatch[1], 10) : 0;
+      expect(finalCount).toBeGreaterThan(initialCount);
+
+      // Verify watch log contains entry
+      const watchLog = frameContent.querySelector('#watch-log-list');
+      expect(watchLog?.textContent).toContain('basePropChanged');
+    });
+
+    it('inherits base class @Watch decorator for baseCount', async () => {
+      const component = frameContent.querySelector<any>('extends-watch');
+      const button = frameContent.querySelector('.update-base-count') as HTMLButtonElement;
+      const baseWatchCountEl = frameContent.querySelector('.base-watch-count');
+
+      const initialText = baseWatchCountEl?.textContent || '';
+      const initialMatch = initialText.match(/Base Watch Calls: (\d+)/);
+      const initialCount = initialMatch ? parseInt(initialMatch[1], 10) : 0;
+
+      button?.click();
+
+      await browser.waitUntil(
+        async () => {
+          const updatedText = baseWatchCountEl?.textContent || '';
+          const updatedMatch = updatedText.match(/Base Watch Calls: (\d+)/);
+          const updatedCount = updatedMatch ? parseInt(updatedMatch[1], 10) : 0;
+          return updatedCount > initialCount;
+        },
+        { timeout: 3000 },
+      );
+
+      const finalText = baseWatchCountEl?.textContent || '';
+      const finalMatch = finalText.match(/Base Watch Calls: (\d+)/);
+      const finalCount = finalMatch ? parseInt(finalMatch[1], 10) : 0;
+      expect(finalCount).toBeGreaterThan(initialCount);
+
+      const watchLog = frameContent.querySelector('#watch-log-list');
+      expect(watchLog?.textContent).toContain('baseCountChanged');
+    });
+
+    it('inherits base class @Watch decorator for baseState', async () => {
+      const component = frameContent.querySelector<any>('extends-watch');
+      const button = frameContent.querySelector('.update-base-state') as HTMLButtonElement;
+      const baseWatchCountEl = frameContent.querySelector('.base-watch-count');
+
+      const initialText = baseWatchCountEl?.textContent || '';
+      const initialMatch = initialText.match(/Base Watch Calls: (\d+)/);
+      const initialCount = initialMatch ? parseInt(initialMatch[1], 10) : 0;
+
+      button?.click();
+
+      await browser.waitUntil(
+        async () => {
+          const updatedText = baseWatchCountEl?.textContent || '';
+          const updatedMatch = updatedText.match(/Base Watch Calls: (\d+)/);
+          const updatedCount = updatedMatch ? parseInt(updatedMatch[1], 10) : 0;
+          return updatedCount > initialCount;
+        },
+        { timeout: 3000 },
+      );
+
+      const finalText = baseWatchCountEl?.textContent || '';
+      const finalMatch = finalText.match(/Base Watch Calls: (\d+)/);
+      const finalCount = finalMatch ? parseInt(finalMatch[1], 10) : 0;
+      expect(finalCount).toBeGreaterThan(initialCount);
+
+      const watchLog = frameContent.querySelector('#watch-log-list');
+      expect(watchLog?.textContent).toContain('baseStateChanged');
+    });
+
+    it('handles child class @Watch decorator for childProp', async () => {
+      const component = frameContent.querySelector<any>('extends-watch');
+      const button = frameContent.querySelector('.update-child-prop') as HTMLButtonElement;
+      const childWatchCountEl = frameContent.querySelector('.child-watch-count');
+
+      const initialText = childWatchCountEl?.textContent || '';
+      const initialMatch = initialText.match(/Child Watch Calls: (\d+)/);
+      const initialCount = initialMatch ? parseInt(initialMatch[1], 10) : 0;
+
+      button?.click();
+
+      await browser.waitUntil(
+        async () => {
+          const updatedText = childWatchCountEl?.textContent || '';
+          const updatedMatch = updatedText.match(/Child Watch Calls: (\d+)/);
+          const updatedCount = updatedMatch ? parseInt(updatedMatch[1], 10) : 0;
+          return updatedCount > initialCount;
+        },
+        { timeout: 3000 },
+      );
+
+      const finalText = childWatchCountEl?.textContent || '';
+      const finalMatch = finalText.match(/Child Watch Calls: (\d+)/);
+      const finalCount = finalMatch ? parseInt(finalMatch[1], 10) : 0;
+      expect(finalCount).toBeGreaterThan(initialCount);
+
+      const watchLog = frameContent.querySelector('#watch-log-list');
+      expect(watchLog?.textContent).toContain('childPropChanged');
+    });
+
+    it('executes watch handlers in correct order: base first, then child', async () => {
+      const component = frameContent.querySelector<any>('extends-watch');
+      const button = frameContent.querySelector('.update-base-prop') as HTMLButtonElement;
+
+      // Reset logs to start fresh
+      await component.resetWatchLogs();
+
+      // Trigger property change that both base and child watch
+      button?.click();
+
+      // Wait for watch handlers to execute
+      await browser.pause(500);
+
+      // Get watch log
+      const watchLog = frameContent.querySelector('#watch-log-list');
+      const logContent = watchLog?.textContent || '';
+
+      // Find positions of base and child handlers
+      const basePropIndex = logContent.indexOf('basePropChanged');
+      const childBasePropIndex = logContent.indexOf('childBasePropChanged');
+
+      // Base handler should execute before child handler
+      expect(basePropIndex).toBeGreaterThan(-1);
+      expect(childBasePropIndex).toBeGreaterThan(-1);
+      expect(basePropIndex).toBeLessThan(childBasePropIndex);
+    });
+
+    it('child override watch handler takes precedence over base', async () => {
+      const component = frameContent.querySelector<any>('extends-watch');
+      const button = frameContent.querySelector('.update-override-prop') as HTMLButtonElement;
+      const watchLog = frameContent.querySelector('#watch-log-list');
+
+      // Reset logs
+      await component.resetWatchLogs();
+
+      // Get initial log content
+      const initialLogContent = watchLog?.textContent || '';
+
+      button?.click();
+
+      // Wait for watch processing and DOM update
+      await browser.waitUntil(
+        async () => {
+          const updatedLogContent = watchLog?.textContent || '';
+          return updatedLogContent.length > initialLogContent.length;
+        },
+        { timeout: 3000 },
+      );
+
+      // Verify child handler was called (override behavior)
+      const finalLogContent = watchLog?.textContent || '';
+      expect(finalLogContent).toContain('overridePropChanged:child');
+
+      // Verify base handler was NOT called (override takes precedence)
+      const baseOverrideMatches = (finalLogContent.match(/overridePropChanged:base/g) || []).length;
+      const initialBaseOverrideMatches = (initialLogContent.match(/overridePropChanged:base/g) || []).length;
+      expect(baseOverrideMatches).toBe(initialBaseOverrideMatches);
+    });
+
+    it('reactive property chains work: baseProp change triggers baseState change', async () => {
+      const component = frameContent.querySelector<any>('extends-watch');
+      const button = frameContent.querySelector('.update-base-prop') as HTMLButtonElement;
+      const baseStateEl = frameContent.querySelector('.base-state-value');
+
+      // Get initial state value
+      const initialText = baseStateEl?.textContent || '';
+
+      button?.click();
+
+      // Wait for reactive chain to update baseState
+      await browser.waitUntil(
+        async () => {
+          const updatedText = baseStateEl?.textContent || '';
+          return updatedText !== initialText && updatedText.includes('state updated by baseProp');
+        },
+        { timeout: 3000 },
+      );
+
+      // Verify baseState was updated by watch handler
+      const finalText = baseStateEl?.textContent || '';
+      expect(finalText).toContain('state updated by baseProp');
+    });
+
+    it('reactive property chains work: baseCount change triggers baseChainCount change', async () => {
+      const component = frameContent.querySelector<any>('extends-watch');
+      const button = frameContent.querySelector('.update-base-count') as HTMLButtonElement;
+      const baseChainCountEl = frameContent.querySelector('.base-chain-count');
+
+      button?.click();
+
+      // Wait for reactive chain to update baseChainCount
+      await browser.waitUntil(
+        async () => {
+          const chainCountText = baseChainCountEl?.textContent || '';
+          const match = chainCountText.match(/Base Chain Count: (\d+)/);
+          const count = match ? parseInt(match[1], 10) : 0;
+          return count === 10; // baseCount (5) * 2 = 10
+        },
+        { timeout: 3000 },
+      );
+
+      const finalText = baseChainCountEl?.textContent || '';
+      expect(finalText).toContain('Base Chain Count: 10');
+    });
+
+    it('reactive property chains work: baseCounter change triggers baseChainTriggered', async () => {
+      const component = frameContent.querySelector<any>('extends-watch');
+      const button = frameContent.querySelector('.update-base-counter') as HTMLButtonElement;
+      const baseChainTriggeredEl = frameContent.querySelector('.base-chain-triggered');
+
+      // Reset first
+      await component.resetWatchLogs();
+
+      button?.click();
+
+      // Wait for reactive chain to update baseChainTriggered
+      await browser.waitUntil(
+        async () => {
+          const chainText = baseChainTriggeredEl?.textContent || '';
+          return chainText.includes('Base Chain Triggered: true');
+        },
+        { timeout: 3000 },
+      );
+
+      const finalText = baseChainTriggeredEl?.textContent || '';
+      expect(finalText).toContain('Base Chain Triggered: true');
+    });
+
+    it('reactive property chains work: childProp change triggers childState change', async () => {
+      const component = frameContent.querySelector<any>('extends-watch');
+      const button = frameContent.querySelector('.update-child-prop') as HTMLButtonElement;
+      const childStateEl = frameContent.querySelector('.child-state-value');
+
+      const initialText = childStateEl?.textContent || '';
+
+      button?.click();
+
+      // Wait for reactive chain to update childState
+      await browser.waitUntil(
+        async () => {
+          const updatedText = childStateEl?.textContent || '';
+          return updatedText !== initialText && updatedText.includes('state updated by childProp');
+        },
+        { timeout: 3000 },
+      );
+
+      const finalText = childStateEl?.textContent || '';
+      expect(finalText).toContain('state updated by childProp');
+    });
+
+    it('reactive property chains work: childCounter change triggers childChainTriggered', async () => {
+      const component = frameContent.querySelector<any>('extends-watch');
+      const button = frameContent.querySelector('.update-child-counter') as HTMLButtonElement;
+      const childChainTriggeredEl = frameContent.querySelector('.child-chain-triggered');
+
+      // Reset first
+      await component.resetWatchLogs();
+
+      button?.click();
+
+      // Wait for reactive chain to update childChainTriggered
+      await browser.waitUntil(
+        async () => {
+          const chainText = childChainTriggeredEl?.textContent || '';
+          return chainText.includes('Child Chain Triggered: true');
+        },
+        { timeout: 3000 },
+      );
+
+      const finalText = childChainTriggeredEl?.textContent || '';
+      expect(finalText).toContain('Child Chain Triggered: true');
+    });
+
+    it('tracks watch calls in combined watch log', async () => {
+      const totalWatchCountEl = frameContent.querySelector('.total-watch-count');
+      const watchLog = frameContent.querySelector('#watch-log-list');
+
+      // Trigger multiple property changes
+      const basePropBtn = frameContent.querySelector('.update-base-prop') as HTMLButtonElement;
+      const childPropBtn = frameContent.querySelector('.update-child-prop') as HTMLButtonElement;
+      const baseCountBtn = frameContent.querySelector('.update-base-count') as HTMLButtonElement;
+
+      basePropBtn?.click();
+      await browser.pause(200);
+      childPropBtn?.click();
+      await browser.pause(200);
+      baseCountBtn?.click();
+
+      // Wait for all watch handlers to process - wait for baseCountChanged to appear in log
+      await browser.waitUntil(
+        async () => {
+          const logContent = watchLog?.textContent || '';
+          return (
+            logContent.includes('basePropChanged') &&
+            logContent.includes('childPropChanged') &&
+            logContent.includes('baseCountChanged')
+          );
+        },
+        { timeout: 3000 },
+      );
+
+      const finalLogContent = watchLog?.textContent || '';
+
+      expect(finalLogContent).toContain('basePropChanged');
+      expect(finalLogContent).toContain('childPropChanged');
+      expect(finalLogContent).toContain('baseCountChanged');
+    });
+
+    it('increment operations trigger watch handlers', async () => {
+      const component = frameContent.querySelector<any>('extends-watch');
+      const button = frameContent.querySelector('.increment-base-count') as HTMLButtonElement;
+      const baseWatchCountEl = frameContent.querySelector('.base-watch-count');
+      const baseCountEl = frameContent.querySelector('.base-count-value');
+
+      // Get initial values
+      const initialWatchText = baseWatchCountEl?.textContent || '';
+      const initialWatchMatch = initialWatchText.match(/Base Watch Calls: (\d+)/);
+      const initialWatchCount = initialWatchMatch ? parseInt(initialWatchMatch[1], 10) : 0;
+
+      const initialCountText = baseCountEl?.textContent || '';
+      const initialCountMatch = initialCountText.match(/Base Count: (\d+)/);
+      const initialCount = initialCountMatch ? parseInt(initialCountMatch[1], 10) : 0;
+
+      button?.click();
+
+      // Wait for watch handler to be called
+      await browser.waitUntil(
+        async () => {
+          const updatedWatchText = baseWatchCountEl?.textContent || '';
+          const updatedWatchMatch = updatedWatchText.match(/Base Watch Calls: (\d+)/);
+          const updatedWatchCount = updatedWatchMatch ? parseInt(updatedWatchMatch[1], 10) : 0;
+          return updatedWatchCount > initialWatchCount;
+        },
+        { timeout: 3000 },
+      );
+
+      // Verify count was incremented
+      const finalCountText = baseCountEl?.textContent || '';
+      const finalCountMatch = finalCountText.match(/Base Count: (\d+)/);
+      const finalCount = finalCountMatch ? parseInt(finalCountMatch[1], 10) : 0;
+      expect(finalCount).toBe(initialCount + 1);
+    });
+  });
+
+  describe('es2022 custom-element output', () => {
+    let frameContent: HTMLElement;
+
+    beforeEach(async () => {
+      frameContent = await setupIFrameTest('/extends-watch/es2022.custom-element.html', 'es2022-custom-elements');
+      const frameEle = await browser.$('iframe#es2022-custom-elements');
+      await frameEle.waitUntil(async () => !!frameContent.querySelector('.watch-info'), { timeout: 5000 });
+    });
+
+    it('inherits @Watch decorators in custom elements build', async () => {
+      const component = frameContent.querySelector<any>('extends-watch');
+      const button = frameContent.querySelector('.update-base-prop') as HTMLButtonElement;
+
+      const initialCount = component?.baseWatchCallCount || 0;
+
+      button?.click();
+
+      await browser.waitUntil(
+        async () => {
+          const count = component?.baseWatchCallCount || 0;
+          return count > initialCount;
+        },
+        { timeout: 3000 },
+      );
+
+      const finalCount = component?.baseWatchCallCount || 0;
+      expect(finalCount).toBeGreaterThan(initialCount);
+    });
+
+    it('handles child @Watch decorators in custom elements build', async () => {
+      const component = frameContent.querySelector<any>('extends-watch');
+      const button = frameContent.querySelector('.update-child-prop') as HTMLButtonElement;
+
+      const initialCount = component?.childWatchCallCount || 0;
+
+      button?.click();
+
+      await browser.waitUntil(
+        async () => {
+          const count = component?.childWatchCallCount || 0;
+          return count > initialCount;
+        },
+        { timeout: 3000 },
+      );
+
+      const finalCount = component?.childWatchCallCount || 0;
+      expect(finalCount).toBeGreaterThan(initialCount);
+    });
+
+    it('watch handler override works in custom elements build', async () => {
+      const component = frameContent.querySelector<any>('extends-watch');
+      const button = frameContent.querySelector('.update-override-prop') as HTMLButtonElement;
+
+      // Reset logs
+      await component.resetWatchLogs();
+
+      const initialChildCount = component?.childWatchCallCount || 0;
+      const initialBaseCount = component?.baseWatchCallCount || 0;
+
+      button?.click();
+
+      await browser.waitUntil(
+        async () => {
+          const childCount = component?.childWatchCallCount || 0;
+          return childCount > initialChildCount;
+        },
+        { timeout: 3000 },
+      );
+
+      // Child handler should be called
+      const finalChildCount = component?.childWatchCallCount || 0;
+      expect(finalChildCount).toBeGreaterThan(initialChildCount);
+
+      // Base handler should NOT be called (override behavior)
+      const finalBaseCount = component?.baseWatchCallCount || 0;
+      expect(finalBaseCount).toBe(initialBaseCount);
+    });
+  });
+});
diff --git a/test/wdio/ts-target/extends-watch/cmp.tsx b/test/wdio/ts-target/extends-watch/cmp.tsx
new file mode 100644
index 00000000000..3e09261a3e3
--- /dev/null
+++ b/test/wdio/ts-target/extends-watch/cmp.tsx
@@ -0,0 +1,233 @@
+import { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';
+import { WatchBase } from './watch-base.js';
+
+/**
+ * WatchCmp - Demonstrates @Watch decorator inheritance
+ *
+ * This component:
+ * 1. Extends WatchBase (inherits base @Watch decorators)
+ * 2. Adds additional @Watch decorators
+ * 3. Overrides base watch handler (overrideProp)
+ * 4. Demonstrates watch execution order
+ * 5. Demonstrates reactive property chains
+ */
+@Component({
+  tag: 'extends-watch',
+})
+export class WatchCmp extends WatchBase {
+  @Element() el!: HTMLElement;
+
+  // Child-specific properties with watch decorators
+  @Prop() childProp: string = 'child prop initial';
+  @State() childState: string = 'child state initial';
+  @State() childCounter: number = 0;
+
+  // Track child watch handler execution
+  @State() childWatchLog: string[] = [];
+  @State() childWatchCallCount: number = 0;
+
+  // Additional reactive chain property
+  @State() childChainTriggered: boolean = false;
+
+  // Watch childProp - child-specific watch handler
+  @Watch('childProp')
+  childPropChanged(newValue: string, oldValue: string) {
+    this.childWatchLog.push(`childPropChanged:${oldValue}->${newValue}`);
+    this.childWatchCallCount++;
+
+    // Reactive chain: update childState
+    this.childState = `state updated by childProp: ${newValue}`;
+  }
+
+  // Watch childState - child-specific watch handler
+  @Watch('childState')
+  childStateChanged(newValue: string, oldValue: string) {
+    this.childWatchLog.push(`childStateChanged:${oldValue}->${newValue}`);
+    this.childWatchCallCount++;
+  }
+
+  // Watch childCounter - child-specific watch handler
+  @Watch('childCounter')
+  childCounterChanged(newValue: number, oldValue: number) {
+    this.childWatchLog.push(`childCounterChanged:${oldValue}->${newValue}`);
+    this.childWatchCallCount++;
+
+    // Reactive chain: trigger childChainTriggered
+    if (newValue > 0) {
+      this.childChainTriggered = true;
+    }
+  }
+
+  // Override base watch handler - child version takes precedence
+  @Watch('overrideProp')
+  overridePropChanged(newValue: string, oldValue: string) {
+    this.childWatchLog.push(`overridePropChanged:child:${oldValue}->${newValue}`);
+    this.childWatchCallCount++;
+    // Note: base handler should NOT be called - this is override behavior
+  }
+
+  // Also watch baseProp in child (multiple @Watch decorators for same property at different levels)
+  @Watch('baseProp')
+  childBasePropChanged(newValue: string, oldValue: string) {
+    this.childWatchLog.push(`childBasePropChanged:${oldValue}->${newValue}`);
+    this.childWatchCallCount++;
+    // This should execute AFTER base handler (execution order test)
+  }
+
+  // Methods to trigger property changes for testing
+  @Method()
+  async updateBaseProp(value: string) {
+    this.baseProp = value;
+  }
+
+  @Method()
+  async updateBaseCount(value: number) {
+    this.baseCount = value;
+  }
+
+  @Method()
+  async updateBaseState(value: string) {
+    this.baseState = value;
+  }
+
+  @Method()
+  async updateBaseCounter(value: number) {
+    this.baseCounter = value;
+  }
+
+  @Method()
+  async updateOverrideProp(value: string) {
+    this.overrideProp = value;
+  }
+
+  @Method()
+  async updateChildProp(value: string) {
+    this.childProp = value;
+  }
+
+  @Method()
+  async updateChildCounter(value: number) {
+    this.childCounter = value;
+  }
+
+  @Method()
+  async incrementBaseCount() {
+    this.baseCount++;
+  }
+
+  @Method()
+  async incrementBaseCounter() {
+    this.baseCounter++;
+  }
+
+  @Method()
+  async incrementChildCounter() {
+    this.childCounter++;
+  }
+
+  // Expose base class methods for testing
+  getBaseWatchLog(): string[] {
+    return super.getWatchLog();
+  }
+
+  // Get combined watch log
+  getCombinedWatchLog(): string[] {
+    return [...this.baseWatchLog, ...this.childWatchLog];
+  }
+
+  // Reset all watch tracking
+  @Method()
+  async resetWatchLogs() {
+    super.resetWatchLog();
+    this.childWatchLog = [];
+    this.childWatchCallCount = 0;
+    this.childChainTriggered = false;
+  }
+
+  render() {
+    const combinedLog = this.getCombinedWatchLog();
+    const totalWatchCalls = this.baseWatchCallCount + this.childWatchCallCount;
+
+    return (
+      <div>
+        <h2>Watch Decorator Inheritance Test</h2>
+
+        <div class="watch-info">
+          <p class="base-watch-count">Base Watch Calls: {this.baseWatchCallCount}</p>
+          <p class="child-watch-count">Child Watch Calls: {this.childWatchCallCount}</p>
+          <p class="total-watch-count">Total Watch Calls: {totalWatchCalls}</p>
+          <p class="watch-log-length">Watch Log Entries: {combinedLog.length}</p>
+        </div>
+
+        <div class="property-values">
+          <h3>Property Values:</h3>
+          <p class="base-prop-value">Base Prop: {this.baseProp}</p>
+          <p class="base-count-value">Base Count: {this.baseCount}</p>
+          <p class="base-state-value">Base State: {this.baseState}</p>
+          <p class="base-counter-value">Base Counter: {this.baseCounter}</p>
+          <p class="override-prop-value">Override Prop: {this.overrideProp}</p>
+          <p class="child-prop-value">Child Prop: {this.childProp}</p>
+          <p class="child-state-value">Child State: {this.childState}</p>
+          <p class="child-counter-value">Child Counter: {this.childCounter}</p>
+        </div>
+
+        <div class="reactive-chains">
+          <h3>Reactive Chains:</h3>
+          <p class="base-chain-triggered">Base Chain Triggered: {this.baseChainTriggered ? 'true' : 'false'}</p>
+          <p class="base-chain-count">Base Chain Count: {this.baseChainCount}</p>
+          <p class="child-chain-triggered">Child Chain Triggered: {this.childChainTriggered ? 'true' : 'false'}</p>
+        </div>
+
+        <div class="watch-log">
+          <h3>Watch Log:</h3>
+          <ul id="watch-log-list">
+            {combinedLog.map((entry, index) => (
+              <li key={index}>{entry}</li>
+            ))}
+          </ul>
+        </div>
+
+        <div class="controls">
+          <h3>Trigger Property Changes:</h3>
+          <button class="update-base-prop" onClick={() => this.updateBaseProp('base prop updated')}>
+            Update Base Prop
+          </button>
+          <button class="update-base-count" onClick={() => this.updateBaseCount(5)}>
+            Update Base Count
+          </button>
+          <button class="update-base-state" onClick={() => this.updateBaseState('base state updated')}>
+            Update Base State
+          </button>
+          <button class="update-base-counter" onClick={() => this.updateBaseCounter(10)}>
+            Update Base Counter
+          </button>
+          <button class="update-override-prop" onClick={() => this.updateOverrideProp('override prop updated')}>
+            Update Override Prop
+          </button>
+          <button class="update-child-prop" onClick={() => this.updateChildProp('child prop updated')}>
+            Update Child Prop
+          </button>
+          <button class="update-child-counter" onClick={() => this.updateChildCounter(20)}>
+            Update Child Counter
+          </button>
+          <button class="increment-base-count" onClick={() => this.incrementBaseCount()}>
+            Increment Base Count
+          </button>
+          <button class="increment-base-counter" onClick={() => this.incrementBaseCounter()}>
+            Increment Base Counter
+          </button>
+          <button class="increment-child-counter" onClick={() => this.incrementChildCounter()}>
+            Increment Child Counter
+          </button>
+          <button class="reset-logs" onClick={() => this.resetWatchLogs()}>
+            Reset Logs
+          </button>
+        </div>
+
+        <div class="test-info">
+          <p>Features: @Watch inheritance | Execution order | Reactive chains | Handler override</p>
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/test/wdio/ts-target/extends-watch/es2022.custom-element.html b/test/wdio/ts-target/extends-watch/es2022.custom-element.html
new file mode 100644
index 00000000000..5ee8c4e5b4e
--- /dev/null
+++ b/test/wdio/ts-target/extends-watch/es2022.custom-element.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>ES2022 dist-custom-elements output - Watch Decorator Inheritance</title>
+  <script type="module">
+    import { defineCustomElement } from '/test-ts-target-output/custom-elements/extends-watch.js';
+    defineCustomElement();
+  </script>
+</head>
+<body>
+  <h1>ES2022 dist-custom-elements output - Watch Decorator Inheritance</h1>
+  <extends-watch></extends-watch>
+</body>
+</html>
+
diff --git a/test/wdio/ts-target/extends-watch/es2022.dist.html b/test/wdio/ts-target/extends-watch/es2022.dist.html
new file mode 100644
index 00000000000..d86e8959ce1
--- /dev/null
+++ b/test/wdio/ts-target/extends-watch/es2022.dist.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>ES2022 dist output - Watch Decorator Inheritance</title>
+  <script src="/test-ts-target-output/dist/testtstarget/testtstarget.esm.js" type="module"></script>
+</head>
+<body>
+  <h1>ES2022 dist output - Watch Decorator Inheritance</h1>
+  <extends-watch></extends-watch>
+</body>
+</html>
+
diff --git a/test/wdio/ts-target/extends-watch/watch-base.ts b/test/wdio/ts-target/extends-watch/watch-base.ts
new file mode 100644
index 00000000000..a2c0ba07516
--- /dev/null
+++ b/test/wdio/ts-target/extends-watch/watch-base.ts
@@ -0,0 +1,89 @@
+import { Prop, State, Watch } from '@stencil/core';
+
+/**
+ * WatchBase - Base class demonstrating @Watch decorator inheritance
+ *
+ * This base class provides:
+ * 1. @Watch decorators on @Prop properties
+ * 2. @Watch decorators on @State properties
+ * 3. Watch handlers that track execution order
+ * 4. Watch handlers that trigger other property changes (reactive chains)
+ * 5. Watch handlers that can be overridden in child classes
+ */
+export class WatchBase {
+  // Base properties with watch decorators
+  @Prop() baseProp: string = 'base prop initial';
+  @Prop() baseCount: number = 0;
+  @State() baseState: string = 'base state initial';
+  @State() baseCounter: number = 0;
+
+  // Properties used for reactive chains (watch handlers trigger changes to these)
+  @State() baseChainTriggered: boolean = false;
+  @State() baseChainCount: number = 0;
+
+  // Track watch handler execution for testing
+  @State() baseWatchLog: string[] = [];
+  @State() baseWatchCallCount: number = 0;
+
+  // Watch baseProp - inherited by child, can be overridden
+  @Watch('baseProp')
+  basePropChanged(newValue: string, oldValue: string) {
+    this.baseWatchLog.push(`basePropChanged:${oldValue}->${newValue}`);
+    this.baseWatchCallCount++;
+
+    // Reactive chain: trigger change to baseState
+    this.baseState = `state updated by baseProp: ${newValue}`;
+  }
+
+  // Watch baseCount - inherited by child
+  @Watch('baseCount')
+  baseCountChanged(newValue: number, oldValue: number) {
+    this.baseWatchLog.push(`baseCountChanged:${oldValue}->${newValue}`);
+    this.baseWatchCallCount++;
+
+    // Reactive chain: increment baseChainCount
+    this.baseChainCount = newValue * 2;
+  }
+
+  // Watch baseState - inherited by child, can be overridden
+  @Watch('baseState')
+  baseStateChanged(newValue: string, oldValue: string) {
+    this.baseWatchLog.push(`baseStateChanged:${oldValue}->${newValue}`);
+    this.baseWatchCallCount++;
+  }
+
+  // Watch baseCounter - inherited by child
+  @Watch('baseCounter')
+  baseCounterChanged(newValue: number, oldValue: number) {
+    this.baseWatchLog.push(`baseCounterChanged:${oldValue}->${newValue}`);
+    this.baseWatchCallCount++;
+
+    // Reactive chain: set baseChainTriggered flag
+    if (newValue > 0) {
+      this.baseChainTriggered = true;
+    }
+  }
+
+  // Property that can be watched by both base and child (override scenario)
+  @Prop() overrideProp: string = 'override prop initial';
+
+  // Watch overrideProp - can be overridden in child class
+  @Watch('overrideProp')
+  overridePropChanged(newValue: string, oldValue: string) {
+    this.baseWatchLog.push(`overridePropChanged:base:${oldValue}->${newValue}`);
+    this.baseWatchCallCount++;
+  }
+
+  // Helper method to get watch log
+  getWatchLog(): string[] {
+    return [...this.baseWatchLog];
+  }
+
+  // Helper method to reset watch tracking
+  resetWatchLog() {
+    this.baseWatchLog = [];
+    this.baseWatchCallCount = 0;
+    this.baseChainTriggered = false;
+    this.baseChainCount = 0;
+  }
+}