diff --git a/libs/docs/ui5-webcomponents/button/examples/button-sample.ts b/libs/docs/ui5-webcomponents/button/examples/button-sample.ts
index 8ef934fdd2d..d2105dc245c 100644
--- a/libs/docs/ui5-webcomponents/button/examples/button-sample.ts
+++ b/libs/docs/ui5-webcomponents/button/examples/button-sample.ts
@@ -1,5 +1,7 @@
 import { Component, signal } from '@angular/core';
+import type { UI5WrapperCustomEvent } from '@fundamental-ngx/ui5-webcomponents-base';
 import { Button } from '@fundamental-ngx/ui5-webcomponents/button';
+
 import '@ui5/webcomponents-icons/dist/AllIcons.js';
 
 @Component({
@@ -17,7 +19,7 @@ import '@ui5/webcomponents-icons/dist/AllIcons.js';
 })
 export class ButtonExample {
     // Example click handler
-    onButtonClick(event: any, buttonLabel: string): void {
+    onButtonClick(event: UI5WrapperCustomEvent<Button, 'ui5Click'>, buttonLabel: string): void {
         console.log(`${buttonLabel} clicked`, event);
     }
 
diff --git a/libs/docs/ui5-webcomponents/calendar/examples/calendar-sample.html b/libs/docs/ui5-webcomponents/calendar/examples/calendar-sample.html
index d397edb9e83..5a278dd62f2 100644
--- a/libs/docs/ui5-webcomponents/calendar/examples/calendar-sample.html
+++ b/libs/docs/ui5-webcomponents/calendar/examples/calendar-sample.html
@@ -2,7 +2,7 @@
     <div class="fd-section__header">
         <h2 id="calendar-basic" class="fd-section__title">Calendar</h2>
     </div>
-    <ui5-calendar (ui5selectionChange)="onSelectionChange($event)" aria-label="Basic calendar example"> </ui5-calendar>
+    <ui5-calendar (ui5SelectionChange)="onSelectionChange($event)" aria-label="Basic calendar example"> </ui5-calendar>
     <p class="fd-margin-top--sm"><strong>Selected Dates:</strong> {{ selectedDatesDisplay() }}</p>
     <p class="fd-margin-top--tiny"><strong>Selection Mode:</strong> {{ currentSelectionMode() }}</p>
 </section>
@@ -41,7 +41,7 @@ <h3 class="fd-margin-top--sm fd-margin-bottom--tiny">Quick Actions</h3>
         [formatPattern]="formatPattern()"
         [minDate]="minDate()"
         [maxDate]="maxDate()"
-        (ui5selectionChange)="onSelectionChange($event)"
+        (ui5SelectionChange)="onSelectionChange($event)"
         aria-label="Configured calendar example"
     >
         @if (currentSelectionMode() !== 'Range') { @for (date of selectedDates(); track date) {
@@ -66,7 +66,7 @@ <h2 id="calendar-range" class="fd-section__title">Range Selection Calendar</h2>
     </div>
     <ui5-calendar
         selectionMode="Range"
-        (ui5selectionChange)="onSelectionChange($event)"
+        (ui5SelectionChange)="onSelectionChange($event)"
         aria-label="Range selection calendar"
     >
     </ui5-calendar>
@@ -83,7 +83,7 @@ <h2 id="calendar-multiple" class="fd-section__title">Multiple Selection Calendar
     </div>
     <ui5-calendar
         selectionMode="Multiple"
-        (ui5selectionChange)="onSelectionChange($event)"
+        (ui5SelectionChange)="onSelectionChange($event)"
         aria-label="Multiple selection calendar"
     >
     </ui5-calendar>
@@ -104,7 +104,7 @@ <h2 id="calendar-restricted" class="fd-section__title">Calendar with Date Restri
         minDate="2024-06-01"
         maxDate="2024-12-31"
         formatPattern="MM/dd/yyyy"
-        (ui5selectionChange)="onSelectionChange($event)"
+        (ui5SelectionChange)="onSelectionChange($event)"
         aria-label="Date restricted calendar"
     >
     </ui5-calendar>
@@ -129,7 +129,7 @@ <h3 class="fd-panel__title">Gregorian Calendar</h3>
                         <ui5-calendar
                             primaryCalendarType="Gregorian"
                             selectionMode="Single"
-                            (ui5selectionChange)="onSelectionChange($event)"
+                            (ui5SelectionChange)="onSelectionChange($event)"
                             aria-label="Gregorian calendar"
                         >
                         </ui5-calendar>
@@ -146,7 +146,7 @@ <h3 class="fd-panel__title">Islamic Calendar</h3>
                         <ui5-calendar
                             primaryCalendarType="Islamic"
                             selectionMode="Single"
-                            (ui5selectionChange)="onSelectionChange($event)"
+                            (ui5SelectionChange)="onSelectionChange($event)"
                             aria-label="Islamic calendar"
                         >
                         </ui5-calendar>
@@ -163,7 +163,7 @@ <h3 class="fd-panel__title">Japanese Calendar</h3>
                         <ui5-calendar
                             primaryCalendarType="Japanese"
                             selectionMode="Single"
-                            (ui5selectionChange)="onSelectionChange($event)"
+                            (ui5SelectionChange)="onSelectionChange($event)"
                             aria-label="Japanese calendar"
                         >
                         </ui5-calendar>
@@ -180,7 +180,7 @@ <h3 class="fd-panel__title">Buddhist Calendar</h3>
                         <ui5-calendar
                             primaryCalendarType="Buddhist"
                             selectionMode="Single"
-                            (ui5selectionChange)="onSelectionChange($event)"
+                            (ui5SelectionChange)="onSelectionChange($event)"
                             aria-label="Buddhist calendar"
                         >
                         </ui5-calendar>
@@ -199,7 +199,7 @@ <h2 id="calendar-dual" class="fd-section__title">Dual Calendar Type</h2>
         primaryCalendarType="Gregorian"
         secondaryCalendarType="Islamic"
         selectionMode="Single"
-        (ui5selectionChange)="onSelectionChange($event)"
+        (ui5SelectionChange)="onSelectionChange($event)"
         aria-label="Dual calendar type example"
     >
     </ui5-calendar>
diff --git a/libs/docs/ui5-webcomponents/calendar/examples/calendar-sample.ts b/libs/docs/ui5-webcomponents/calendar/examples/calendar-sample.ts
index 046de4482fd..edc8e2f8af4 100644
--- a/libs/docs/ui5-webcomponents/calendar/examples/calendar-sample.ts
+++ b/libs/docs/ui5-webcomponents/calendar/examples/calendar-sample.ts
@@ -1,4 +1,5 @@
 import { Component, computed, effect, signal } from '@angular/core';
+import type { UI5WrapperCustomEvent } from '@fundamental-ngx/ui5-webcomponents-base';
 import { Button } from '@fundamental-ngx/ui5-webcomponents/button';
 import { Calendar } from '@fundamental-ngx/ui5-webcomponents/calendar';
 import { CalendarDate } from '@fundamental-ngx/ui5-webcomponents/calendar-date';
@@ -79,10 +80,9 @@ export class CalendarExample {
     }
 
     // Event handlers using Angular 20 patterns
-    onSelectionChange(event: any): void {
-        const calendarEvent = event.detail;
+    onSelectionChange(event: UI5WrapperCustomEvent<Calendar, 'ui5SelectionChange'>): void {
         // Extract selectedValues (date strings) instead of selectedDates (timestamps)
-        const dates = calendarEvent.selectedValues || [];
+        const dates = event.detail.selectedValues || [];
         this.selectedDates.set(dates);
         console.log('Calendar selection changed:', dates);
     }
@@ -98,7 +98,7 @@ export class CalendarExample {
     }
 
     // Event handlers for UI5 segmented buttons
-    onSelectionModeChange(event: any): void {
+    onSelectionModeChange(event: UI5WrapperCustomEvent<SegmentedButton, 'ui5SelectionChange'>): void {
         console.log('onSelectionModeChange called', event.detail);
         const selectedItems = event.detail.selectedItems;
         if (selectedItems && selectedItems.length > 0) {
@@ -107,7 +107,7 @@ export class CalendarExample {
         }
     }
 
-    onCalendarTypeChange(event: any): void {
+    onCalendarTypeChange(event: UI5WrapperCustomEvent<SegmentedButton, 'ui5SelectionChange'>): void {
         console.log('onCalendarTypeChange called:', event.detail.selectedItems[0].innerText);
         const selectedItems = event.detail.selectedItems;
         if (selectedItems && selectedItems.length > 0) {
diff --git a/libs/docs/ui5-webcomponents/card/examples/card-sample.ts b/libs/docs/ui5-webcomponents/card/examples/card-sample.ts
index 39ee9f5e3b0..4b38cf4ecd2 100644
--- a/libs/docs/ui5-webcomponents/card/examples/card-sample.ts
+++ b/libs/docs/ui5-webcomponents/card/examples/card-sample.ts
@@ -154,14 +154,6 @@ export class CardExample {
         console.log(`Action clicked: ${action}`);
     }
 
-    onProductSelect(product: any): void {
-        console.log('Product selected:', product.name);
-    }
-
-    onTeamMemberClick(member: any): void {
-        console.log('Team member clicked:', member.name);
-    }
-
     // Configuration methods
     toggleLoading(): void {
         console.log('toggleLoading called, current value:', this.showLoading());
@@ -169,26 +161,6 @@ export class CardExample {
         console.log('toggleLoading new value:', this.showLoading());
     }
 
-    toggleInteractive(): void {
-        console.log('toggleInteractive called, current value:', this.interactive());
-        this.interactive.update((interactive) => !interactive);
-        console.log('toggleInteractive new value:', this.interactive());
-    }
-
-    onViewChange(event: any): void {
-        console.log('onViewChange called, event:', event);
-        const selectedText = event.detail.selectedItem.textContent?.toLowerCase().trim() || 'overview';
-        console.log('selectedText:', selectedText);
-        this.currentView.set(selectedText);
-    }
-
-    onLoadingDelayChange(event: any): void {
-        console.log('onLoadingDelayChange called, event:', event);
-        const delayText = event.detail.selectedItem.textContent?.replace('ms', '') || '500';
-        console.log('delayText:', delayText);
-        this.loadingDelay.set(Number(delayText));
-    }
-
     refreshData(): void {
         this.refreshing.set(true);
     }
@@ -201,15 +173,6 @@ export class CardExample {
         }).format(value);
     }
 
-    getStatusColor(status: string): string {
-        const colors = {
-            online: 'var(--sapSuccessColor)',
-            busy: 'var(--sapCriticalColor)',
-            offline: 'var(--sapNeutralColor)'
-        };
-        return colors[status] || 'var(--sapNeutralColor)';
-    }
-
     getStatusState(status: string): ObjectStatus {
         const states: Record<string, ObjectStatus> = {
             online: 'positive',
@@ -227,31 +190,4 @@ export class CardExample {
         };
         return icons[status] || 'circle-task';
     }
-
-    getPriorityColor(priority: string): string {
-        const colors = {
-            high: 'var(--sapErrorColor)',
-            medium: 'var(--sapCriticalColor)',
-            low: 'var(--sapSuccessColor)'
-        };
-        return colors[priority] || 'var(--sapNeutralColor)';
-    }
-
-    getTrendIcon(trend: string): string {
-        return trend === 'up' ? 'sap-icon://trend-up' : 'sap-icon://trend-down';
-    }
-
-    getTrendColor(trend: string): string {
-        return trend === 'up' ? 'var(--sapSuccessColor)' : 'var(--sapErrorColor)';
-    }
-
-    getStockStatus(stock: number): { text: string; color: string } {
-        if (stock < 5) {
-            return { text: 'Critical', color: 'var(--sapErrorColor)' };
-        }
-        if (stock < 10) {
-            return { text: 'Low', color: 'var(--sapCriticalColor)' };
-        }
-        return { text: 'Good', color: 'var(--sapSuccessColor)' };
-    }
 }
diff --git a/libs/docs/ui5-webcomponents/carousel/examples/carousel-sample.ts b/libs/docs/ui5-webcomponents/carousel/examples/carousel-sample.ts
index fc5f75aca24..4c61b822eb4 100644
--- a/libs/docs/ui5-webcomponents/carousel/examples/carousel-sample.ts
+++ b/libs/docs/ui5-webcomponents/carousel/examples/carousel-sample.ts
@@ -1,4 +1,5 @@
 import { Component, computed, effect, signal } from '@angular/core';
+import type { UI5WrapperCustomEvent } from '@fundamental-ngx/ui5-webcomponents-base';
 import { Button } from '@fundamental-ngx/ui5-webcomponents/button';
 import { Card } from '@fundamental-ngx/ui5-webcomponents/card';
 import { CardHeader } from '@fundamental-ngx/ui5-webcomponents/card-header';
@@ -16,6 +17,7 @@ import {
     CarouselArrowsPlacement,
     CarouselPageIndicatorType
 } from '@fundamental-ngx/ui5-webcomponents/types';
+
 import '@ui5/webcomponents-icons/dist/AllIcons.js';
 
 // Import Fundamental Styles
@@ -25,6 +27,13 @@ import 'fundamental-styles/dist/paddings.css';
 import 'fundamental-styles/dist/panel.css';
 import 'fundamental-styles/dist/section.css';
 
+interface ImageStyle {
+    url: string;
+    title: string;
+    description: string;
+    gradient: string;
+}
+
 @Component({
     selector: 'ui5-carousel-sample',
     templateUrl: './carousel-sample.html',
@@ -58,7 +67,7 @@ export class CarouselExample {
     readonly arrowsPlacements = computed(() => Object.values(CarouselArrowsPlacement));
 
     // Sample data signals
-    readonly images = signal<Array<{ url: string; title: string; description: string; gradient: string }>>([
+    readonly images = signal<Array<ImageStyle>>([
         {
             url: 'https://picsum.photos/800/500?id=1',
             title: 'Nature Landscape',
@@ -166,32 +175,32 @@ export class CarouselExample {
     }
 
     // Navigation event handlers
-    onBasicNavigate(event: any): void {
+    onBasicNavigate(event: UI5WrapperCustomEvent<Carousel, 'ui5Navigate'>): void {
         const detail = event.detail;
         this.basicCurrentPage.set(detail.selectedIndex);
         console.log('Basic carousel navigated to page:', detail.selectedIndex);
     }
 
-    onImageNavigate(event: any): void {
+    onImageNavigate(event: UI5WrapperCustomEvent<Carousel, 'ui5Navigate'>): void {
         const detail = event.detail;
         this.currentImagePage.set(detail.selectedIndex);
         console.log('Image carousel navigated to page:', detail.selectedIndex);
     }
 
-    onProductNavigate(event: any): void {
+    onProductNavigate(event: UI5WrapperCustomEvent<Carousel, 'ui5Navigate'>): void {
         const detail = event.detail;
         this.currentProductPage.set(detail.selectedIndex);
         console.log('Product carousel navigated to page:', detail.selectedIndex);
     }
 
-    onFeatureNavigate(event: any): void {
+    onFeatureNavigate(event: UI5WrapperCustomEvent<Carousel, 'ui5Navigate'>): void {
         const detail = event.detail;
         this.currentFeaturePage.set(detail.selectedIndex);
         console.log('Feature carousel navigated to page:', detail.selectedIndex);
     }
 
     // Configuration change handlers
-    onPageIndicatorTypeChange(event: any): void {
+    onPageIndicatorTypeChange(event: UI5WrapperCustomEvent<SegmentedButton, 'ui5SelectionChange'>): void {
         const detail = event.detail;
         const selectedItems = detail.selectedItems || [];
         if (selectedItems.length > 0) {
@@ -200,16 +209,7 @@ export class CarouselExample {
         }
     }
 
-    onBackgroundDesignChange(event: any): void {
-        const detail = event.detail;
-        const selectedItems = detail.selectedItems || [];
-        if (selectedItems.length > 0) {
-            const selectedDesign = selectedItems[0].innerText as BackgroundDesign;
-            this.backgroundDesign.set(selectedDesign);
-        }
-    }
-
-    onArrowsPlacementChange(event: any): void {
+    onArrowsPlacementChange(event: UI5WrapperCustomEvent<SegmentedButton, 'ui5SelectionChange'>): void {
         const detail = event.detail;
         const selectedItems = detail.selectedItems || [];
         if (selectedItems.length > 0) {
@@ -276,30 +276,30 @@ export class CarouselExample {
         return types[status] || '1';
     }
 
-    getImageStyle(image: any): string {
+    getImageStyle(image: ImageStyle): string {
         return `
-            height: 500px; 
-            background: ${image.gradient}; 
-            background-image: url('${image.url}'); 
-            background-size: cover; 
-            background-position: center; 
-            background-blend-mode: overlay; 
-            display: flex; 
-            align-items: center; 
+            height: 500px;
+            background: ${image.gradient};
+            background-image: url('${image.url}');
+            background-size: cover;
+            background-position: center;
+            background-blend-mode: overlay;
+            display: flex;
+            align-items: center;
             justify-content: center;
         `;
     }
 
-    getCardImageStyle(image: any): string {
+    getCardImageStyle(image: ImageStyle): string {
         return `
-            height: 250px; 
-            background: ${image.gradient}; 
-            background-image: url('${image.url}'); 
-            background-size: cover; 
-            background-position: center; 
-            background-blend-mode: overlay; 
-            display: flex; 
-            align-items: center; 
+            height: 250px;
+            background: ${image.gradient};
+            background-image: url('${image.url}');
+            background-size: cover;
+            background-position: center;
+            background-blend-mode: overlay;
+            display: flex;
+            align-items: center;
             justify-content: center;
         `;
     }
diff --git a/libs/docs/ui5-webcomponents/check-box/examples/basic-sample.ts b/libs/docs/ui5-webcomponents/check-box/examples/basic-sample.ts
index c3e47cd8445..9b1849a6a83 100644
--- a/libs/docs/ui5-webcomponents/check-box/examples/basic-sample.ts
+++ b/libs/docs/ui5-webcomponents/check-box/examples/basic-sample.ts
@@ -1,5 +1,6 @@
 import { Component, signal } from '@angular/core';
 
+import { UI5WrapperCustomEvent } from '@fundamental-ngx/ui5-webcomponents-base';
 import { CheckBox } from '@fundamental-ngx/ui5-webcomponents/check-box';
 
 @Component({
@@ -32,7 +33,7 @@ import { CheckBox } from '@fundamental-ngx/ui5-webcomponents/check-box';
 export class BasicCheckBoxSample {
     checked = signal(false);
 
-    onCheckboxChange(event: any): void {
+    onCheckboxChange(event: UI5WrapperCustomEvent<CheckBox, 'ui5Change'>): void {
         this.checked.set(event.target?.['checked']);
     }
 }
diff --git a/libs/docs/ui5-webcomponents/color-palette/examples/basic-sample.ts b/libs/docs/ui5-webcomponents/color-palette/examples/basic-sample.ts
index 9e64458ae71..6b58591bfc6 100644
--- a/libs/docs/ui5-webcomponents/color-palette/examples/basic-sample.ts
+++ b/libs/docs/ui5-webcomponents/color-palette/examples/basic-sample.ts
@@ -1,4 +1,5 @@
 import { Component, signal } from '@angular/core';
+import { UI5WrapperCustomEvent } from '@fundamental-ngx/ui5-webcomponents-base';
 import { ColorPalette } from '@fundamental-ngx/ui5-webcomponents/color-palette';
 import { ColorPaletteItem } from '@fundamental-ngx/ui5-webcomponents/color-palette-item';
 
@@ -11,7 +12,7 @@ import { ColorPaletteItem } from '@fundamental-ngx/ui5-webcomponents/color-palet
 export class BasicColorPaletteSample {
     selectedColor = signal<string>('None');
 
-    onItemClick(event: any): void {
+    onItemClick(event: UI5WrapperCustomEvent<ColorPalette, 'ui5ItemClick'>): void {
         this.selectedColor.set(event.detail.color);
     }
 }
diff --git a/libs/docs/ui5-webcomponents/color-picker/examples/basic-sample.ts b/libs/docs/ui5-webcomponents/color-picker/examples/basic-sample.ts
index a142adb215c..22f2407447e 100644
--- a/libs/docs/ui5-webcomponents/color-picker/examples/basic-sample.ts
+++ b/libs/docs/ui5-webcomponents/color-picker/examples/basic-sample.ts
@@ -1,4 +1,5 @@
 import { Component, signal } from '@angular/core';
+import { UI5WrapperCustomEvent } from '@fundamental-ngx/ui5-webcomponents-base';
 import { ColorPicker } from '@fundamental-ngx/ui5-webcomponents/color-picker';
 import { Label } from '@fundamental-ngx/ui5-webcomponents/label';
 import { Text } from '@fundamental-ngx/ui5-webcomponents/text';
@@ -17,8 +18,8 @@ import 'fundamental-styles/dist/paddings.css';
 export class ColorPickerBasicExample {
     readonly selectedColor = signal('rgba(255, 0, 0, 1)');
 
-    onColorChange(event: CustomEvent): void {
-        const colorValue = (event.target as any)?.value || event.detail?.color;
+    onColorChange(event: UI5WrapperCustomEvent<ColorPicker, 'ui5Change'>): void {
+        const colorValue = event.target?.['value'];
         if (colorValue) {
             this.selectedColor.set(colorValue);
         }
diff --git a/libs/docs/ui5-webcomponents/color-picker/examples/simplified.ts b/libs/docs/ui5-webcomponents/color-picker/examples/simplified.ts
index 4c0a265774b..5b1f09aecb0 100644
--- a/libs/docs/ui5-webcomponents/color-picker/examples/simplified.ts
+++ b/libs/docs/ui5-webcomponents/color-picker/examples/simplified.ts
@@ -1,4 +1,5 @@
 import { Component, signal } from '@angular/core';
+import { UI5WrapperCustomEvent } from '@fundamental-ngx/ui5-webcomponents-base';
 import { ColorPicker } from '@fundamental-ngx/ui5-webcomponents/color-picker';
 import { Label } from '@fundamental-ngx/ui5-webcomponents/label';
 import { Text } from '@fundamental-ngx/ui5-webcomponents/text';
@@ -18,8 +19,8 @@ export class ColorPickerSimplifiedExample {
     readonly selectedColor = signal('rgba(0, 128, 255, 1)');
     readonly isSimplified = signal(true);
 
-    onColorChange(event: CustomEvent): void {
-        const colorValue = (event.target as any)?.value || event.detail?.color;
+    onColorChange(event: UI5WrapperCustomEvent<ColorPicker, 'ui5Change'>): void {
+        const colorValue = event.target?.['value'];
         if (colorValue) {
             this.selectedColor.set(colorValue);
         }
diff --git a/libs/docs/ui5-webcomponents/expandable-text/examples/overflow-mode-popover.ts b/libs/docs/ui5-webcomponents/expandable-text/examples/overflow-mode-popover.ts
index d2717e7ccfc..3d6c8ba850e 100644
--- a/libs/docs/ui5-webcomponents/expandable-text/examples/overflow-mode-popover.ts
+++ b/libs/docs/ui5-webcomponents/expandable-text/examples/overflow-mode-popover.ts
@@ -1,8 +1,6 @@
 import { Component, signal } from '@angular/core';
 import { ExpandableText } from '@fundamental-ngx/ui5-webcomponents/expandable-text';
 import { Label } from '@fundamental-ngx/ui5-webcomponents/label';
-import { Option } from '@fundamental-ngx/ui5-webcomponents/option';
-import { Select } from '@fundamental-ngx/ui5-webcomponents/select';
 import { Table } from '@fundamental-ngx/ui5-webcomponents/table';
 import { TableCell } from '@fundamental-ngx/ui5-webcomponents/table-cell';
 import { TableHeaderCell } from '@fundamental-ngx/ui5-webcomponents/table-header-cell';
@@ -18,7 +16,7 @@ import 'fundamental-styles/dist/paddings.css';
     selector: 'ui5-expandable-text-overflow-mode-popover-example',
     templateUrl: './overflow-mode-popover.html',
     standalone: true,
-    imports: [ExpandableText, Table, TableCell, TableRow, TableHeaderCell, TableHeaderRow, Label, Select, Option]
+    imports: [ExpandableText, Table, TableCell, TableRow, TableHeaderCell, TableHeaderRow, Label]
 })
 export class ExpandableTextOverflowModePopoverExample {
     readonly selectedOverflowMode = signal<'InPlace' | 'Popover'>('InPlace');
@@ -30,11 +28,4 @@ export class ExpandableTextOverflowModePopoverExample {
             'when you want to preserve the layout and not push other content around. Both modes provide a clean and ' +
             'intuitive way for users to access additional content when needed.'
     );
-
-    onOverflowModeChange(event: any): void {
-        const selectedValue = (event.target as any).selectedOption?.value;
-        if (selectedValue === 'InPlace' || selectedValue === 'Popover') {
-            this.selectedOverflowMode.set(selectedValue);
-        }
-    }
 }
diff --git a/libs/docs/ui5-webcomponents/form/examples/basic-sample.ts b/libs/docs/ui5-webcomponents/form/examples/basic-sample.ts
index 428b3fbae3f..f083e91273f 100644
--- a/libs/docs/ui5-webcomponents/form/examples/basic-sample.ts
+++ b/libs/docs/ui5-webcomponents/form/examples/basic-sample.ts
@@ -1,5 +1,6 @@
 import { JsonPipe, NgStyle } from '@angular/common';
 import { Component, signal } from '@angular/core';
+import { UI5WrapperCustomEvent } from '@fundamental-ngx/ui5-webcomponents-base';
 import { Button } from '@fundamental-ngx/ui5-webcomponents/button';
 import { Form } from '@fundamental-ngx/ui5-webcomponents/form';
 import { FormGroup } from '@fundamental-ngx/ui5-webcomponents/form-group';
@@ -49,16 +50,19 @@ export class FormBasicSample {
         });
     }
 
-    onSliderChange(event: CustomEvent): void {
+    onSliderChange(event: UI5WrapperCustomEvent<Slider, 'ui5Change'>): void {
         const width = (event.target?.['value'] / 100) * 1500;
         this.containerWidth.set(`${width}px`);
         this.pageSize.set(this.getLayoutByWidth(width));
     }
 
-    updateFormField(field: keyof ReturnType<typeof this.formData>, event: any): void {
+    updateFormField(
+        field: keyof ReturnType<typeof this.formData>,
+        event: UI5WrapperCustomEvent<Input | TextArea, 'ui5Input'>
+    ): void {
         this.formData.update((data) => ({
             ...data,
-            [field]: event.target.value
+            [field]: event.target?.['value']
         }));
     }
 
diff --git a/libs/docs/ui5-webcomponents/form/examples/column-span.ts b/libs/docs/ui5-webcomponents/form/examples/column-span.ts
index dcf881b9b4e..c909dd53342 100644
--- a/libs/docs/ui5-webcomponents/form/examples/column-span.ts
+++ b/libs/docs/ui5-webcomponents/form/examples/column-span.ts
@@ -1,5 +1,6 @@
 import { NgStyle } from '@angular/common';
 import { Component, signal } from '@angular/core';
+import { UI5WrapperCustomEvent } from '@fundamental-ngx/ui5-webcomponents-base';
 import { Form } from '@fundamental-ngx/ui5-webcomponents/form';
 import { FormGroup } from '@fundamental-ngx/ui5-webcomponents/form-group';
 import { FormItem } from '@fundamental-ngx/ui5-webcomponents/form-item';
@@ -56,7 +57,7 @@ export class FormColumnSpanSample {
         }
     ]);
 
-    onSliderChange(event: CustomEvent): void {
+    onSliderChange(event: UI5WrapperCustomEvent<Slider, 'ui5Change'>): void {
         const width = (event.target?.['value'] / 100) * 1500;
         this.containerWidth.set(`${width}px`);
         this.pageSize.set(this.getLayoutByWidth(width));
diff --git a/libs/docs/ui5-webcomponents/form/examples/edit.ts b/libs/docs/ui5-webcomponents/form/examples/edit.ts
index 05f623a9bec..9db425b7d3d 100644
--- a/libs/docs/ui5-webcomponents/form/examples/edit.ts
+++ b/libs/docs/ui5-webcomponents/form/examples/edit.ts
@@ -1,4 +1,5 @@
 import { Component, computed, signal } from '@angular/core';
+import { UI5WrapperCustomEvent } from '@fundamental-ngx/ui5-webcomponents-base';
 import { Form } from '@fundamental-ngx/ui5-webcomponents/form';
 import { FormItem } from '@fundamental-ngx/ui5-webcomponents/form-item';
 import { Input } from '@fundamental-ngx/ui5-webcomponents/input';
@@ -30,7 +31,7 @@ export class FormEditSample {
         { id: 'field6', label: 'Delivery Address:', value: 'Newtown' }
     ]);
 
-    toggleSelection(event: CustomEvent): void {
+    toggleSelection(event: UI5WrapperCustomEvent<SegmentedButton, 'ui5SelectionChange'>): void {
         if (event.detail.selectedItems[0].id === 'edit') {
             this.editable.set(true);
         } else {
diff --git a/libs/docs/ui5-webcomponents/form/examples/empty-span.ts b/libs/docs/ui5-webcomponents/form/examples/empty-span.ts
index c5aa505ad45..276652b0651 100644
--- a/libs/docs/ui5-webcomponents/form/examples/empty-span.ts
+++ b/libs/docs/ui5-webcomponents/form/examples/empty-span.ts
@@ -1,5 +1,6 @@
 import { NgStyle } from '@angular/common';
 import { Component, signal } from '@angular/core';
+import { UI5WrapperCustomEvent } from '@fundamental-ngx/ui5-webcomponents-base';
 import { Form } from '@fundamental-ngx/ui5-webcomponents/form';
 import { FormItem } from '@fundamental-ngx/ui5-webcomponents/form-item';
 import { Input as UI5Input } from '@fundamental-ngx/ui5-webcomponents/input';
@@ -31,7 +32,7 @@ export class FormEmptySpanSample {
     readonly containerWidth = signal('1250px');
     readonly pageSize = signal('L');
 
-    onSliderChange(event: CustomEvent): void {
+    onSliderChange(event: UI5WrapperCustomEvent<Slider, 'ui5Change'>): void {
         const width = (event.target?.['value'] / 100) * 1500;
         this.containerWidth.set(`${width}px`);
         this.pageSize.set(this.getLayoutByWidth(width));
diff --git a/libs/docs/ui5-webcomponents/form/examples/label-span.ts b/libs/docs/ui5-webcomponents/form/examples/label-span.ts
index 4d64d3c0da0..c89ebcfc99d 100644
--- a/libs/docs/ui5-webcomponents/form/examples/label-span.ts
+++ b/libs/docs/ui5-webcomponents/form/examples/label-span.ts
@@ -1,5 +1,6 @@
 import { NgStyle } from '@angular/common';
 import { Component, signal } from '@angular/core';
+import { UI5WrapperCustomEvent } from '@fundamental-ngx/ui5-webcomponents-base';
 import { Form } from '@fundamental-ngx/ui5-webcomponents/form';
 import { FormItem } from '@fundamental-ngx/ui5-webcomponents/form-item';
 import { Label } from '@fundamental-ngx/ui5-webcomponents/label';
@@ -27,7 +28,7 @@ export class FormLabelSpanSample {
         { id: 'field4', label: 'Country:', value: 'Germany' }
     ]);
 
-    onSliderChange(event: CustomEvent): void {
+    onSliderChange(event: UI5WrapperCustomEvent<Slider, 'ui5Change'>): void {
         const width = (event.target?.['value'] / 100) * 1500;
         this.containerWidth.set(`${width}px`);
         this.pageSize.set(this.getLayoutByWidth(width));
diff --git a/libs/docs/ui5-webcomponents/form/examples/labels-on-top.ts b/libs/docs/ui5-webcomponents/form/examples/labels-on-top.ts
index 17837e8ed51..f0515a82ea3 100644
--- a/libs/docs/ui5-webcomponents/form/examples/labels-on-top.ts
+++ b/libs/docs/ui5-webcomponents/form/examples/labels-on-top.ts
@@ -1,5 +1,6 @@
 import { NgStyle } from '@angular/common';
 import { Component, signal } from '@angular/core';
+import { UI5WrapperCustomEvent } from '@fundamental-ngx/ui5-webcomponents-base';
 import { Form } from '@fundamental-ngx/ui5-webcomponents/form';
 import { FormItem } from '@fundamental-ngx/ui5-webcomponents/form-item';
 import { Label } from '@fundamental-ngx/ui5-webcomponents/label';
@@ -29,7 +30,7 @@ export class FormLabelsOnTopSample {
         { id: 'address_field6', label: 'Delivery Address:', value: 'Newtown' }
     ]);
 
-    onSliderChange(event: CustomEvent): void {
+    onSliderChange(event: UI5WrapperCustomEvent<Slider, 'ui5Change'>): void {
         const width = (event.target?.['value'] / 100) * 1500;
         this.containerWidth.set(`${width}px`);
         this.pageSize.set(this.getLayoutByWidth(width));
diff --git a/libs/docs/ui5-webcomponents/form/examples/layouts.ts b/libs/docs/ui5-webcomponents/form/examples/layouts.ts
index 444d4f4f877..72109a51d1b 100644
--- a/libs/docs/ui5-webcomponents/form/examples/layouts.ts
+++ b/libs/docs/ui5-webcomponents/form/examples/layouts.ts
@@ -1,5 +1,6 @@
 import { NgStyle } from '@angular/common';
 import { Component, signal } from '@angular/core';
+import { UI5WrapperCustomEvent } from '@fundamental-ngx/ui5-webcomponents-base';
 import { Form } from '@fundamental-ngx/ui5-webcomponents/form';
 import { FormGroup } from '@fundamental-ngx/ui5-webcomponents/form-group';
 import { FormItem } from '@fundamental-ngx/ui5-webcomponents/form-item';
@@ -67,7 +68,7 @@ export class FormLayoutsSample {
         }
     ]);
 
-    onSliderChange(event: CustomEvent): void {
+    onSliderChange(event: UI5WrapperCustomEvent<Slider, 'ui5Change'>): void {
         const width = (event.target?.['value'] / 100) * 1500;
         this.containerWidth.set(`${width}px`);
         this.pageSize.set(this.getLayoutByWidth(width));
diff --git a/libs/docs/ui5-webcomponents/form/examples/validation.ts b/libs/docs/ui5-webcomponents/form/examples/validation.ts
index 9ddf7ef6627..cedae628bf4 100644
--- a/libs/docs/ui5-webcomponents/form/examples/validation.ts
+++ b/libs/docs/ui5-webcomponents/form/examples/validation.ts
@@ -1,6 +1,7 @@
 import { JsonPipe } from '@angular/common';
 import { Component, computed, effect, signal } from '@angular/core';
 import { AbstractControl, FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import type { UI5WrapperCustomEvent } from '@fundamental-ngx/ui5-webcomponents-base';
 import { Button } from '@fundamental-ngx/ui5-webcomponents/button';
 import { CheckBox } from '@fundamental-ngx/ui5-webcomponents/check-box';
 import { Form } from '@fundamental-ngx/ui5-webcomponents/form';
@@ -11,11 +12,6 @@ import { Label } from '@fundamental-ngx/ui5-webcomponents/label';
 import { MessageStrip } from '@fundamental-ngx/ui5-webcomponents/message-strip';
 import { TextArea } from '@fundamental-ngx/ui5-webcomponents/text-area';
 
-// Import UI5 custom event types
-import { UI5CustomEvent } from '@ui5/webcomponents-base';
-import { default as _Input } from '@ui5/webcomponents/dist/Input.js';
-import { default as _TextArea } from '@ui5/webcomponents/dist/TextArea.js';
-
 // Import Fundamental Styles
 import 'fundamental-styles/dist/layout-grid.css';
 import 'fundamental-styles/dist/margins.css';
@@ -185,20 +181,20 @@ export class FormValidationSample {
         return 'Invalid input';
     }
 
-    onInputChange(fieldName: string, event: UI5CustomEvent<_Input, 'input'>): void {
+    onInputChange(fieldName: string, event: UI5WrapperCustomEvent<Input, 'ui5Input'>): void {
         const value = (event.target as any)?.value;
         this.registrationForm.get(fieldName)?.setValue(value);
         this.registrationForm.get(fieldName)?.markAsDirty();
     }
 
-    onTextAreaChange(fieldName: string, event: UI5CustomEvent<_TextArea, 'input'>): void {
+    onTextAreaChange(fieldName: string, event: UI5WrapperCustomEvent<TextArea, 'ui5Input'>): void {
         const value = (event.target as any)?.value;
         this.registrationForm.get(fieldName)?.setValue(value);
         this.registrationForm.get(fieldName)?.markAsDirty();
     }
 
-    onCheckboxChange(fieldName: string, event: any): void {
-        const checked = event.target.checked;
+    onCheckboxChange(fieldName: string, event: UI5WrapperCustomEvent<CheckBox, 'ui5Change'>): void {
+        const checked = (event.target as any)?.checked;
         this.registrationForm.get(fieldName)?.setValue(checked);
         this.registrationForm.get(fieldName)?.markAsDirty();
     }
diff --git a/libs/docs/ui5-webcomponents/icon/examples/basic-sample.ts b/libs/docs/ui5-webcomponents/icon/examples/basic-sample.ts
index 1cdcd2ef624..b59af0c08f2 100644
--- a/libs/docs/ui5-webcomponents/icon/examples/basic-sample.ts
+++ b/libs/docs/ui5-webcomponents/icon/examples/basic-sample.ts
@@ -1,6 +1,5 @@
 import { Component, signal } from '@angular/core';
 import { Icon } from '@fundamental-ngx/ui5-webcomponents/icon';
-import { Label } from '@fundamental-ngx/ui5-webcomponents/label';
 
 // Import Fundamental Styles
 import 'fundamental-styles/dist/paddings.css';
@@ -17,7 +16,7 @@ import '@ui5/webcomponents-icons/dist/settings.js';
     selector: 'ui5-icon-basic-example',
     templateUrl: './basic-sample.html',
     standalone: true,
-    imports: [Icon, Label]
+    imports: [Icon]
 })
 export class IconBasicExample {
     readonly basicIcons = signal([
diff --git a/libs/docs/ui5-webcomponents/icon/examples/customization.ts b/libs/docs/ui5-webcomponents/icon/examples/customization.ts
index 721d5b69640..beb7a5876d8 100644
--- a/libs/docs/ui5-webcomponents/icon/examples/customization.ts
+++ b/libs/docs/ui5-webcomponents/icon/examples/customization.ts
@@ -1,4 +1,5 @@
 import { Component, signal } from '@angular/core';
+import { UI5WrapperCustomEvent } from '@fundamental-ngx/ui5-webcomponents-base';
 import { Icon } from '@fundamental-ngx/ui5-webcomponents/icon';
 import { Label } from '@fundamental-ngx/ui5-webcomponents/label';
 import { Option } from '@fundamental-ngx/ui5-webcomponents/option';
@@ -34,13 +35,13 @@ export class IconCustomizationExample {
         { value: 'neutral', label: 'Neutral Gray', css: 'var(--sapNeutralColor)' }
     ]);
 
-    onSizeChange(event: CustomEvent): void {
-        const value = (event.target as any).value;
+    onSizeChange(event: UI5WrapperCustomEvent<Slider, 'ui5Change'>): void {
+        const value = event.target?.['value'];
         this.iconSize.set(Number(value));
     }
 
-    onColorChange(event: CustomEvent): void {
-        const selectedValue = (event.target as any).selectedOption?.value;
+    onColorChange(event: UI5WrapperCustomEvent<Select, 'ui5Change'>): void {
+        const selectedValue = event.detail.selectedOption.value;
         if (selectedValue) {
             this.selectedColor.set(selectedValue);
         }
diff --git a/libs/docs/ui5-webcomponents/icon/examples/designs.ts b/libs/docs/ui5-webcomponents/icon/examples/designs.ts
index 7e13dcbe34c..79c138d544d 100644
--- a/libs/docs/ui5-webcomponents/icon/examples/designs.ts
+++ b/libs/docs/ui5-webcomponents/icon/examples/designs.ts
@@ -1,8 +1,5 @@
 import { Component, signal } from '@angular/core';
 import { Icon } from '@fundamental-ngx/ui5-webcomponents/icon';
-import { Label } from '@fundamental-ngx/ui5-webcomponents/label';
-import { Option } from '@fundamental-ngx/ui5-webcomponents/option';
-import { Select } from '@fundamental-ngx/ui5-webcomponents/select';
 import { IconDesign } from '@fundamental-ngx/ui5-webcomponents/types';
 
 // Import Fundamental Styles
@@ -15,7 +12,7 @@ import '@ui5/webcomponents-icons/dist/da-2.js';
     selector: 'ui5-icon-designs-example',
     templateUrl: './designs.html',
     standalone: true,
-    imports: [Icon, Label, Select, Option]
+    imports: [Icon]
 })
 export class IconDesignsExample {
     readonly demoIcons = signal([
diff --git a/libs/docs/ui5-webcomponents/icon/examples/interactive.ts b/libs/docs/ui5-webcomponents/icon/examples/interactive.ts
index a19d7bba3b4..f2ad01b94bb 100644
--- a/libs/docs/ui5-webcomponents/icon/examples/interactive.ts
+++ b/libs/docs/ui5-webcomponents/icon/examples/interactive.ts
@@ -1,8 +1,6 @@
 import { Component, signal } from '@angular/core';
-import { CheckBox } from '@fundamental-ngx/ui5-webcomponents/check-box';
 import { Icon } from '@fundamental-ngx/ui5-webcomponents/icon';
 import { Label } from '@fundamental-ngx/ui5-webcomponents/label';
-import { Text } from '@fundamental-ngx/ui5-webcomponents/text';
 import { IconMode } from '@fundamental-ngx/ui5-webcomponents/types';
 
 // Import Fundamental Styles
@@ -17,7 +15,7 @@ import '@ui5/webcomponents-icons/dist/AllIcons.js';
     selector: 'ui5-icon-interactive-example',
     templateUrl: './interactive.html',
     standalone: true,
-    imports: [Icon, Label, Text, CheckBox]
+    imports: [Icon, Label]
 })
 export class IconInteractiveExample {
     readonly clickCount = signal(0);
diff --git a/libs/docs/ui5-webcomponents/icon/examples/tnt-icons.ts b/libs/docs/ui5-webcomponents/icon/examples/tnt-icons.ts
index 029204783f6..81d96a2818a 100644
--- a/libs/docs/ui5-webcomponents/icon/examples/tnt-icons.ts
+++ b/libs/docs/ui5-webcomponents/icon/examples/tnt-icons.ts
@@ -1,6 +1,5 @@
 import { Component, signal } from '@angular/core';
 import { Icon } from '@fundamental-ngx/ui5-webcomponents/icon';
-import { Label } from '@fundamental-ngx/ui5-webcomponents/label';
 
 // Import Fundamental Styles
 import 'fundamental-styles/dist/paddings.css';
@@ -16,7 +15,7 @@ import '@ui5/webcomponents-icons-tnt/dist/repeater.js';
     selector: 'ui5-icon-tnt-example',
     templateUrl: './tnt-icons.html',
     standalone: true,
-    imports: [Icon, Label]
+    imports: [Icon]
 })
 export class IconTntExample {
     readonly tntIcons = signal([
diff --git a/libs/docs/ui5-webcomponents/input/examples/input-sample.ts b/libs/docs/ui5-webcomponents/input/examples/input-sample.ts
index d5c1a748f55..68b6141f980 100644
--- a/libs/docs/ui5-webcomponents/input/examples/input-sample.ts
+++ b/libs/docs/ui5-webcomponents/input/examples/input-sample.ts
@@ -11,12 +11,12 @@ import {
     ViewChild
 } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { UI5WrapperCustomEvent } from '@fundamental-ngx/ui5-webcomponents-base';
 import { Button } from '@fundamental-ngx/ui5-webcomponents/button';
 import { Card } from '@fundamental-ngx/ui5-webcomponents/card';
 import { CardHeader } from '@fundamental-ngx/ui5-webcomponents/card-header';
 import { Input } from '@fundamental-ngx/ui5-webcomponents/input';
 import { Label } from '@fundamental-ngx/ui5-webcomponents/label';
-import { MessageStrip } from '@fundamental-ngx/ui5-webcomponents/message-strip';
 import { Option } from '@fundamental-ngx/ui5-webcomponents/option';
 import { Panel } from '@fundamental-ngx/ui5-webcomponents/panel';
 import { Select } from '@fundamental-ngx/ui5-webcomponents/select';
@@ -42,7 +42,6 @@ import '@sap-ui/common-css/dist/sap-text.css';
         Input,
         Button,
         Label,
-        MessageStrip,
         Panel,
         Switch,
         Select,
@@ -276,89 +275,27 @@ export class InputExample implements AfterViewInit {
     }
 
     // Event handlers
-    onBasicInput(event: CustomEvent): void {
-        const target = event.target as any;
+    onBasicInput(event: UI5WrapperCustomEvent<Input, 'ui5Input'>): void {
+        const target = event.target?.['value'];
         this.basicValue.set(target.value || '');
         this.addInputEvent(`Input: "${target.value}"`);
     }
 
-    onBasicChange(event: CustomEvent): void {
+    onBasicChange(event: UI5WrapperCustomEvent<Input, 'ui5Change'>): void {
         const target = event.target as any;
         this.addChangeEvent(`Change: "${target.value}"`);
     }
 
-    onSelection(event: CustomEvent): void {
+    onSelection(event: UI5WrapperCustomEvent<Input, 'ui5Select'>): void {
         const target = event.target as any;
         this.addSelectionEvent(`Selection at: ${target.selectionStart}-${target.selectionEnd}`);
     }
 
-    onSearchInput(event: CustomEvent): void {
+    onSearchInput(event: UI5WrapperCustomEvent<Input, 'ui5Input'>): void {
         const target = event.target as any;
         this.searchValue.set(target.value || '');
     }
 
-    onDynamicStateInput(event: CustomEvent): void {
-        const target = event.target as any;
-        const value = (target.value || '').toLowerCase();
-        this.dynamicStateValue.set(value);
-
-        // Update state and message based on input
-        if (value.includes('success') || value.includes('positive')) {
-            this.dynamicStateMessage.set('✓ Success state activated - everything looks good!');
-        } else if (value.includes('warning') || value.includes('critical')) {
-            this.dynamicStateMessage.set('⚠️ Warning state activated - please review your input');
-        } else if (value.includes('error') || value.includes('negative')) {
-            this.dynamicStateMessage.set('❌ Error state activated - there seems to be an issue');
-        } else if (value.includes('info') || value.includes('information')) {
-            this.dynamicStateMessage.set("INFO: Information state activated - here's some helpful context");
-        } else if (value === '') {
-            this.dynamicStateMessage.set('');
-        } else {
-            this.dynamicStateMessage.set('💡 Try typing: "success", "warning", "error", or "info"');
-        }
-    }
-
-    getDynamicValueState(): 'None' | 'Positive' | 'Negative' | 'Critical' | 'Information' {
-        const value = this.dynamicStateValue().toLowerCase();
-        if (value.includes('success') || value.includes('positive')) {
-            return 'Positive';
-        }
-        if (value.includes('warning') || value.includes('critical')) {
-            return 'Critical';
-        }
-        if (value.includes('error') || value.includes('negative')) {
-            return 'Negative';
-        }
-        if (value.includes('info') || value.includes('information')) {
-            return 'Information';
-        }
-        return 'None';
-    }
-
-    getDynamicMessageDesign():
-        | 'Positive'
-        | 'Critical'
-        | 'Negative'
-        | 'Information'
-        | 'ColorSet1'
-        | 'ColorSet2'
-        | undefined {
-        const value = this.dynamicStateValue().toLowerCase();
-        if (value.includes('success') || value.includes('positive')) {
-            return 'Positive';
-        }
-        if (value.includes('warning') || value.includes('critical')) {
-            return 'Critical';
-        }
-        if (value.includes('error') || value.includes('negative')) {
-            return 'Negative';
-        }
-        if (value.includes('info') || value.includes('information')) {
-            return 'Information';
-        }
-        return 'Information';
-    }
-
     // Configuration methods
     toggleDisabled(): void {
         this.isDisabled.update((value) => !value);
@@ -380,25 +317,26 @@ export class InputExample implements AfterViewInit {
         this.showSuggestions.update((value) => !value);
     }
 
-    onTypeChange(event: CustomEvent): void {
-        const target = event.target as any;
-        const selectedOption = target.selectedOption;
+    onTypeChange(event: UI5WrapperCustomEvent<Select, 'ui5Change'>): void {
+        const selectedOption = event.detail.selectedOption;
         if (selectedOption) {
-            this.inputType.set(selectedOption.textContent);
+            this.inputType.set(
+                event.detail.selectedOption.textContent as 'Text' | 'Email' | 'Password' | 'Tel' | 'URL' | 'Number'
+            );
         }
     }
 
-    onValueStateChange(event: CustomEvent): void {
-        const target = event.target as any;
-        const selectedOption = target.selectedOption;
+    onValueStateChange(event: UI5WrapperCustomEvent<Select, 'ui5Change'>): void {
+        const selectedOption = event.detail.selectedOption;
         if (selectedOption) {
-            this.currentValueState.set(selectedOption.textContent);
+            this.currentValueState.set(
+                selectedOption.textContent as 'None' | 'Positive' | 'Negative' | 'Critical' | 'Information'
+            );
         }
     }
 
-    onMaxLengthChange(event: CustomEvent): void {
-        const target = event.target as any;
-        const value = parseInt(target.value, 10);
+    onMaxLengthChange(event: UI5WrapperCustomEvent<Input, 'ui5Change'>): void {
+        const value = parseInt(event.target?.['value'], 10);
         this.maxLength.set(isNaN(value) ? undefined : value);
     }
 
diff --git a/libs/docs/ui5-webcomponents/label/examples/label-sample.html b/libs/docs/ui5-webcomponents/label/examples/label-sample.html
index 7c8e6fb1600..54cb6aa9150 100644
--- a/libs/docs/ui5-webcomponents/label/examples/label-sample.html
+++ b/libs/docs/ui5-webcomponents/label/examples/label-sample.html
@@ -8,7 +8,7 @@ <h2 id="label-basic" class="fd-section__title">Basic Label</h2>
             id="basic-input"
             placeholder="Enter your first name"
             [value]="firstName()"
-            (ui5input)="onFirstNameChange($event)"
+            (ui5Input)="onFirstNameChange($event)"
         ></ui5-input>
     </div>
     <p class="fd-margin-top--tiny"><strong>Current Value:</strong> {{ firstName() || 'No value entered' }}</p>
@@ -45,7 +45,7 @@ <h3 class="fd-margin-top--sm fd-margin-bottom--tiny">Wrapping Type</h3>
             id="configured-input"
             placeholder="Type here to see label behavior"
             [value]="lastName()"
-            (ui5input)="onLastNameChange($event)"
+            (ui5Input)="onLastNameChange($event)"
         ></ui5-input>
     </div>
 
@@ -72,7 +72,7 @@ <h2 id="label-form" class="fd-section__title">Form with Labels</h2>
                     id="form-first-name"
                     placeholder="Enter first name"
                     [value]="firstName()"
-                    (ui5input)="onFirstNameChange($event)"
+                    (ui5Input)="onFirstNameChange($event)"
                 ></ui5-input>
             </ui5-form-item>
 
@@ -84,7 +84,7 @@ <h2 id="label-form" class="fd-section__title">Form with Labels</h2>
                     id="form-last-name"
                     placeholder="Enter last name"
                     [value]="lastName()"
-                    (ui5input)="onLastNameChange($event)"
+                    (ui5Input)="onLastNameChange($event)"
                 ></ui5-input>
             </ui5-form-item>
 
@@ -97,7 +97,7 @@ <h2 id="label-form" class="fd-section__title">Form with Labels</h2>
                     type="Email"
                     placeholder="Enter email address"
                     [value]="email()"
-                    (ui5input)="onEmailChange($event)"
+                    (ui5Input)="onEmailChange($event)"
                 ></ui5-input>
             </ui5-form-item>
         </ui5-form-group>
@@ -110,7 +110,7 @@ <h2 id="label-form" class="fd-section__title">Form with Labels</h2>
                     placeholder="Enter description"
                     [rows]="textAreaRows()"
                     [value]="description()"
-                    (ui5input)="onDescriptionChange($event)"
+                    (ui5Input)="onDescriptionChange($event)"
                 ></ui5-textarea>
             </ui5-form-item>
 
@@ -123,7 +123,7 @@ <h2 id="label-form" class="fd-section__title">Form with Labels</h2>
                         value="male"
                         text="Male"
                         [checked]="gender() === 'male'"
-                        (ui5change)="onGenderChange($event)"
+                        (ui5Change)="onGenderChange($event)"
                     ></ui5-radio-button>
                     <ui5-radio-button
                         id="form-gender-female"
@@ -131,7 +131,7 @@ <h2 id="label-form" class="fd-section__title">Form with Labels</h2>
                         value="female"
                         text="Female"
                         [checked]="gender() === 'female'"
-                        (ui5change)="onGenderChange($event)"
+                        (ui5Change)="onGenderChange($event)"
                     ></ui5-radio-button>
                     <ui5-radio-button
                         id="form-gender-other"
@@ -139,14 +139,14 @@ <h2 id="label-form" class="fd-section__title">Form with Labels</h2>
                         value="other"
                         text="Other"
                         [checked]="gender() === 'other'"
-                        (ui5change)="onGenderChange($event)"
+                        (ui5Change)="onGenderChange($event)"
                     ></ui5-radio-button>
                 </div>
             </ui5-form-item>
 
             <ui5-form-item>
                 <ui5-label for="form-country" [showColon]="showColon()">Country</ui5-label>
-                <ui5-select id="form-country" (ui5change)="onCountryChange($event)">
+                <ui5-select id="form-country" (ui5Change)="onCountryChange($event)">
                     <ui5-option>Select Country</ui5-option>
                     <ui5-option value="us">United States</ui5-option>
                     <ui5-option value="ca">Canada</ui5-option>
@@ -161,7 +161,7 @@ <h2 id="label-form" class="fd-section__title">Form with Labels</h2>
                 <ui5-switch
                     id="form-notifications"
                     [checked]="notifications()"
-                    (ui5change)="onNotificationsChange($event)"
+                    (ui5Change)="onNotificationsChange($event)"
                 ></ui5-switch>
             </ui5-form-item>
 
@@ -171,7 +171,7 @@ <h2 id="label-form" class="fd-section__title">Form with Labels</h2>
                     id="form-terms"
                     text="I accept the terms and conditions"
                     [checked]="acceptTerms()"
-                    (ui5change)="onTermsChange($event)"
+                    (ui5Change)="onTermsChange($event)"
                 ></ui5-checkbox>
             </ui5-form-item>
         </ui5-form-group>
diff --git a/libs/docs/ui5-webcomponents/label/examples/label-sample.ts b/libs/docs/ui5-webcomponents/label/examples/label-sample.ts
index 9b7e3b11f54..8a1378a5db8 100644
--- a/libs/docs/ui5-webcomponents/label/examples/label-sample.ts
+++ b/libs/docs/ui5-webcomponents/label/examples/label-sample.ts
@@ -1,4 +1,5 @@
 import { Component, computed, effect, signal } from '@angular/core';
+import { UI5WrapperCustomEvent } from '@fundamental-ngx/ui5-webcomponents-base';
 import { Button } from '@fundamental-ngx/ui5-webcomponents/button';
 import { CheckBox } from '@fundamental-ngx/ui5-webcomponents/check-box';
 import { Form } from '@fundamental-ngx/ui5-webcomponents/form';
@@ -100,36 +101,36 @@ export class LabelExample {
     }
 
     // Event handlers for form controls
-    onFirstNameChange(event: any): void {
-        this.firstName.set(event.target.value);
+    onFirstNameChange(event: UI5WrapperCustomEvent<Input, 'ui5Input'>): void {
+        this.firstName.set(event.target?.['value']);
     }
 
-    onLastNameChange(event: any): void {
-        this.lastName.set(event.target.value);
+    onLastNameChange(event: UI5WrapperCustomEvent<Input, 'ui5Input'>): void {
+        this.lastName.set(event.target?.['value']);
     }
 
-    onEmailChange(event: any): void {
-        this.email.set(event.target.value);
+    onEmailChange(event: UI5WrapperCustomEvent<Input, 'ui5Input'>): void {
+        this.email.set(event.target?.['value']);
     }
 
-    onDescriptionChange(event: any): void {
-        this.description.set(event.target.value);
+    onDescriptionChange(event: UI5WrapperCustomEvent<TextArea, 'ui5Input'>): void {
+        this.description.set(event.target?.['value']);
     }
 
-    onTermsChange(event: any): void {
-        this.acceptTerms.set(event.target.checked);
+    onTermsChange(event: UI5WrapperCustomEvent<CheckBox, 'ui5Change'>): void {
+        this.acceptTerms.set(event.target?.['checked']);
     }
 
-    onGenderChange(event: any): void {
-        this.gender.set(event.target.value);
+    onGenderChange(event: UI5WrapperCustomEvent<RadioButton, 'ui5Change'>): void {
+        this.gender.set(event.target?.['value']);
     }
 
-    onCountryChange(event: any): void {
+    onCountryChange(event: UI5WrapperCustomEvent<Select, 'ui5Change'>): void {
         this.country.set(event.detail.selectedOption?.textContent || '');
     }
 
-    onNotificationsChange(event: any): void {
-        this.notifications.set(event.target.checked);
+    onNotificationsChange(event: UI5WrapperCustomEvent<Switch, 'ui5Change'>): void {
+        this.notifications.set(event.target?.['checked']);
     }
 
     // Label configuration handlers
@@ -141,7 +142,7 @@ export class LabelExample {
         this.showRequired.update((current) => !current);
     }
 
-    onWrappingTypeChange(event: any): void {
+    onWrappingTypeChange(event: UI5WrapperCustomEvent<SegmentedButton, 'ui5SelectionChange'>): void {
         const selectedItems = event.detail.selectedItems;
         if (selectedItems && selectedItems.length > 0) {
             const selectedType = selectedItems[0].innerText as WrappingType;
diff --git a/libs/docs/ui5-webcomponents/link/examples/link-sample.ts b/libs/docs/ui5-webcomponents/link/examples/link-sample.ts
index b50bd7e9497..e95a211572f 100644
--- a/libs/docs/ui5-webcomponents/link/examples/link-sample.ts
+++ b/libs/docs/ui5-webcomponents/link/examples/link-sample.ts
@@ -1,4 +1,5 @@
 import { Component, computed, effect, signal } from '@angular/core';
+import { UI5WrapperCustomEvent } from '@fundamental-ngx/ui5-webcomponents-base';
 import { Button } from '@fundamental-ngx/ui5-webcomponents/button';
 import { Label } from '@fundamental-ngx/ui5-webcomponents/label';
 import { Link } from '@fundamental-ngx/ui5-webcomponents/link';
@@ -143,7 +144,7 @@ export class LinkExample {
     }
 
     // Event handlers
-    onLinkClick(linkText: string, event?: Event): void {
+    onLinkClick(linkText: string, event?: UI5WrapperCustomEvent<Link, 'ui5Click'>): void {
         // Prevent navigation for demo purposes on certain links
         if (linkText.includes('Download') || linkText.includes('Settings')) {
             event?.preventDefault();
@@ -158,7 +159,7 @@ export class LinkExample {
         this.design.set(design as 'Default' | 'Subtle' | 'Emphasized');
     }
 
-    onSegmentedButtonChange(event: any): void {
+    onSegmentedButtonChange(event: UI5WrapperCustomEvent<SegmentedButton, 'ui5SelectionChange'>): void {
         const selectedItems = event.detail.selectedItems;
         if (selectedItems && selectedItems.length > 0) {
             const selectedItem = selectedItems[0];
diff --git a/libs/docs/ui5-webcomponents/list/examples/drag-and-drop.ts b/libs/docs/ui5-webcomponents/list/examples/drag-and-drop.ts
index fd599582766..f53f36dbbda 100644
--- a/libs/docs/ui5-webcomponents/list/examples/drag-and-drop.ts
+++ b/libs/docs/ui5-webcomponents/list/examples/drag-and-drop.ts
@@ -1,11 +1,9 @@
 import { Component, signal } from '@angular/core';
+import type { UI5WrapperCustomEvent } from '@fundamental-ngx/ui5-webcomponents-base';
 import { MovePlacement } from '@fundamental-ngx/ui5-webcomponents-base/types';
 import { List } from '@fundamental-ngx/ui5-webcomponents/list';
 import { ListItemStandard } from '@fundamental-ngx/ui5-webcomponents/list-item-standard';
 
-import { UI5CustomEvent } from '@ui5/webcomponents-base';
-import { default as _List } from '@ui5/webcomponents/dist/List.js';
-
 // Import the icon used in this example
 import '@ui5/webcomponents-icons/dist/checklist-item.js';
 
@@ -18,7 +16,7 @@ import '@ui5/webcomponents-icons/dist/checklist-item.js';
 export class ListDragAndDropExample {
     readonly items = signal(['Item #1', 'Item #2', 'Item #3', 'Item #4']);
 
-    onItemMove(event: any): void {
+    onItemMove(event: UI5WrapperCustomEvent<List, 'ui5Move'>): void {
         const { destination, source } = event.detail;
 
         switch (destination.placement) {
@@ -34,7 +32,7 @@ export class ListDragAndDropExample {
         }
     }
 
-    onItemMoveOver(event: UI5CustomEvent<_List, 'move-over'>): void {
+    onItemMoveOver(event: UI5WrapperCustomEvent<List, 'ui5MoveOver'>): void {
         const { source } = event.detail;
 
         if (!(event.target as HTMLElement).contains(source.element)) {
@@ -44,7 +42,7 @@ export class ListDragAndDropExample {
         this.handleBeforeItemMove(event);
     }
 
-    private handleBeforeItemMove(event: UI5CustomEvent<_List, 'move-over'>): void {
+    private handleBeforeItemMove(event: UI5WrapperCustomEvent<List, 'ui5MoveOver'>): void {
         const { destination } = event.detail;
 
         if (destination.placement === 'Before' || destination.placement === 'After') {
diff --git a/libs/docs/ui5-webcomponents/list/examples/grouping.ts b/libs/docs/ui5-webcomponents/list/examples/grouping.ts
index 454e9e20b9e..e67bc59ef0e 100644
--- a/libs/docs/ui5-webcomponents/list/examples/grouping.ts
+++ b/libs/docs/ui5-webcomponents/list/examples/grouping.ts
@@ -2,7 +2,6 @@ import { Component, signal } from '@angular/core';
 import { Avatar } from '@fundamental-ngx/ui5-webcomponents/avatar';
 import { Icon } from '@fundamental-ngx/ui5-webcomponents/icon';
 import { List } from '@fundamental-ngx/ui5-webcomponents/list';
-import { ListItemCustom } from '@fundamental-ngx/ui5-webcomponents/list-item-custom';
 import { ListItemGroup } from '@fundamental-ngx/ui5-webcomponents/list-item-group';
 import { ListItemStandard } from '@fundamental-ngx/ui5-webcomponents/list-item-standard';
 
@@ -13,7 +12,7 @@ import '@ui5/webcomponents-icons/dist/navigation-right-arrow.js';
     selector: 'ui5-list-grouping-example',
     templateUrl: './grouping.html',
     standalone: true,
-    imports: [List, ListItemStandard, ListItemCustom, ListItemGroup, Avatar, Icon]
+    imports: [List, ListItemStandard, ListItemGroup, Avatar, Icon]
 })
 export class ListGroupingExample {
     frontEndDevs = signal([
diff --git a/libs/docs/ui5-webcomponents/list/examples/growing-list.ts b/libs/docs/ui5-webcomponents/list/examples/growing-list.ts
index 572f3a5f74c..b3aae56acb0 100644
--- a/libs/docs/ui5-webcomponents/list/examples/growing-list.ts
+++ b/libs/docs/ui5-webcomponents/list/examples/growing-list.ts
@@ -1,6 +1,5 @@
 import { Component, computed, signal } from '@angular/core';
 import { Button } from '@fundamental-ngx/ui5-webcomponents/button';
-import { CheckBox } from '@fundamental-ngx/ui5-webcomponents/check-box';
 import { Label } from '@fundamental-ngx/ui5-webcomponents/label';
 import { List } from '@fundamental-ngx/ui5-webcomponents/list';
 import { ListItemStandard } from '@fundamental-ngx/ui5-webcomponents/list-item-standard';
@@ -22,7 +21,7 @@ interface DataItem {
     selector: 'ui5-list-growing-example',
     templateUrl: './growing-list.html',
     standalone: true,
-    imports: [List, ListItemStandard, Label, CheckBox, Button, Text]
+    imports: [List, ListItemStandard, Label, Button, Text]
 })
 export class ListGrowingExample {
     private readonly totalItems = 50;
diff --git a/libs/docs/ui5-webcomponents/list/examples/multiple-drag-and-drop.ts b/libs/docs/ui5-webcomponents/list/examples/multiple-drag-and-drop.ts
index 0a24d52fed7..5e87a6faa61 100644
--- a/libs/docs/ui5-webcomponents/list/examples/multiple-drag-and-drop.ts
+++ b/libs/docs/ui5-webcomponents/list/examples/multiple-drag-and-drop.ts
@@ -1,4 +1,5 @@
 import { Component, ElementRef, QueryList, signal, ViewChild, ViewChildren } from '@angular/core';
+import { UI5WrapperCustomEvent } from '@fundamental-ngx/ui5-webcomponents-base';
 import { MovePlacement } from '@fundamental-ngx/ui5-webcomponents-base/types';
 import { Label } from '@fundamental-ngx/ui5-webcomponents/label';
 import { List } from '@fundamental-ngx/ui5-webcomponents/list';
@@ -69,7 +70,7 @@ export class ListMultipleDragAndDropExample {
         }
     }
 
-    onItemMoveOver(event: CustomEvent): void {
+    onItemMoveOver(event: UI5WrapperCustomEvent<List, 'ui5MoveOver'>): void {
         const { source, destination } = event.detail;
 
         // Allow drops from both lists
@@ -85,7 +86,7 @@ export class ListMultipleDragAndDropExample {
         }
     }
 
-    onItemMove(event: CustomEvent): void {
+    onItemMove(event: UI5WrapperCustomEvent<List, 'ui5Move'>): void {
         const { source, destination } = event.detail;
 
         // Get the source list to find all selected items
@@ -134,8 +135,8 @@ export class ListMultipleDragAndDropExample {
         }
     }
 
-    private getSelectedItems(listElement: HTMLElement): Element[] {
-        const listItemsInThisList = this.allListItems.filter((item) => listElement.contains(item.nativeElement));
+    private getSelectedItems(listElement: Element | null): Element[] {
+        const listItemsInThisList = this.allListItems.filter((item) => listElement?.contains(item.nativeElement));
         return listItemsInThisList.map((item) => item.nativeElement).filter((item: any) => item.selected);
     }
 }
diff --git a/libs/docs/ui5-webcomponents/list/examples/selection-modes.ts b/libs/docs/ui5-webcomponents/list/examples/selection-modes.ts
index bd1170a5b8b..aa0b369b741 100644
--- a/libs/docs/ui5-webcomponents/list/examples/selection-modes.ts
+++ b/libs/docs/ui5-webcomponents/list/examples/selection-modes.ts
@@ -1,4 +1,5 @@
 import { Component, signal } from '@angular/core';
+import { UI5WrapperCustomEvent } from '@fundamental-ngx/ui5-webcomponents-base';
 import { Label } from '@fundamental-ngx/ui5-webcomponents/label';
 import { List } from '@fundamental-ngx/ui5-webcomponents/list';
 import { ListItemStandard } from '@fundamental-ngx/ui5-webcomponents/list-item-standard';
@@ -39,21 +40,21 @@ export class ListSelectionModesExample {
         { name: 'Poland', capital: 'Warsaw', population: '38M' }
     ]);
 
-    onSelectionModeChange(event: CustomEvent): void {
-        const selectedValue = (event.target as any).selectedOption?.value;
+    onSelectionModeChange(event: UI5WrapperCustomEvent<Select, 'ui5Change'>): void {
+        const selectedValue = event.detail.selectedOption?.value as ListSelectionMode;
         if (selectedValue) {
             this.selectedMode.set(selectedValue);
             this.selectedItems.set([]);
         }
     }
 
-    onSelectionChange(event: CustomEvent): void {
+    onSelectionChange(event: UI5WrapperCustomEvent<List, 'ui5SelectionChange'>): void {
         const selectedItems = event.detail.selectedItems.map((item: any) => item.textContent.trim());
         this.selectedItems.set(selectedItems);
     }
 
-    onItemDelete(event: CustomEvent): void {
-        const deletedItemText = event.detail.item.textContent.trim();
+    onItemDelete(event: UI5WrapperCustomEvent<List, 'ui5ItemDelete'>): void {
+        const deletedItemText = event.detail.item.textContent?.trim();
         this.countries.update((countries) => countries.filter((country) => country.name !== deletedItemText));
     }
 }
diff --git a/libs/docs/ui5-webcomponents/message-strip/examples/customization.ts b/libs/docs/ui5-webcomponents/message-strip/examples/customization.ts
index f03c18524ae..1896d95202d 100644
--- a/libs/docs/ui5-webcomponents/message-strip/examples/customization.ts
+++ b/libs/docs/ui5-webcomponents/message-strip/examples/customization.ts
@@ -1,4 +1,5 @@
 import { Component, computed, signal } from '@angular/core';
+import { UI5WrapperCustomEvent } from '@fundamental-ngx/ui5-webcomponents-base';
 import { Button } from '@fundamental-ngx/ui5-webcomponents/button';
 import { Icon } from '@fundamental-ngx/ui5-webcomponents/icon';
 import { MessageStrip } from '@fundamental-ngx/ui5-webcomponents/message-strip';
@@ -39,7 +40,7 @@ export class MessageStripCustomizationSample {
         this.showCloseButton.update((current) => !current);
     }
 
-    onColorSchemeChange(event: any): void {
+    onColorSchemeChange(event: UI5WrapperCustomEvent<SegmentedButton, 'ui5SelectionChange'>): void {
         const detail = event.detail;
         const selectedItems = detail.selectedItems || [];
         if (selectedItems.length > 0) {
@@ -48,16 +49,16 @@ export class MessageStripCustomizationSample {
         }
     }
 
-    onDesignChange(event: any): void {
+    onDesignChange(event: UI5WrapperCustomEvent<SegmentedButton, 'ui5SelectionChange'>): void {
         const detail = event.detail;
         const selectedItems = detail.selectedItems || [];
         if (selectedItems.length > 0) {
-            const selectedDesign = selectedItems[0].innerText;
+            const selectedDesign = selectedItems[0].innerText as MessageStripDesign;
             this.selectedDesign.set(selectedDesign);
         }
     }
 
-    onCustomMessageClose(event: any): void {
+    onCustomMessageClose(event: UI5WrapperCustomEvent<MessageStrip, 'ui5Close'>): void {
         console.log('Custom message closed: ', event);
     }
 }
diff --git a/libs/docs/ui5-webcomponents/segmented-button/examples/segmented-button-sample.ts b/libs/docs/ui5-webcomponents/segmented-button/examples/segmented-button-sample.ts
index 968ea295345..43b6304ff73 100644
--- a/libs/docs/ui5-webcomponents/segmented-button/examples/segmented-button-sample.ts
+++ b/libs/docs/ui5-webcomponents/segmented-button/examples/segmented-button-sample.ts
@@ -1,5 +1,6 @@
 import { TitleCasePipe } from '@angular/common';
 import { AfterViewInit, Component, computed, effect, signal, ViewChild } from '@angular/core';
+import { UI5WrapperCustomEvent } from '@fundamental-ngx/ui5-webcomponents-base';
 import { Button } from '@fundamental-ngx/ui5-webcomponents/button';
 import { SegmentedButton } from '@fundamental-ngx/ui5-webcomponents/segmented-button';
 import { SegmentedButtonItem } from '@fundamental-ngx/ui5-webcomponents/segmented-button-item';
@@ -219,7 +220,7 @@ export class SegmentedButtonExample implements AfterViewInit {
     }
 
     // Event handlers for segmented button selection changes
-    onBasicSelectionChange(event: any): void {
+    onBasicSelectionChange(event: UI5WrapperCustomEvent<SegmentedButton, 'ui5SelectionChange'>): void {
         const detail = event.detail;
         const selectedItems = detail.selectedItems || [];
         const itemTexts = selectedItems.map((item: any) => item.innerText || item.textContent);
@@ -227,7 +228,7 @@ export class SegmentedButtonExample implements AfterViewInit {
         console.log('Basic selection changed:', itemTexts);
     }
 
-    onReactiveSelectionChange(event: any): void {
+    onReactiveSelectionChange(event: UI5WrapperCustomEvent<SegmentedButton, 'ui5SelectionChange'>): void {
         const detail = event.detail;
         const selectedItems = detail.selectedItems || [];
         const itemTexts = selectedItems.map((item: any) => item.innerText || item.textContent);
@@ -238,7 +239,7 @@ export class SegmentedButtonExample implements AfterViewInit {
         );
     }
 
-    onConfigurableSelectionChange(event: any): void {
+    onConfigurableSelectionChange(event: UI5WrapperCustomEvent<SegmentedButton, 'ui5SelectionChange'>): void {
         const detail = event.detail;
         const selectedItems = detail.selectedItems || [];
         const itemTexts = selectedItems.map((item: any) => item.innerText || item.textContent);
@@ -246,7 +247,7 @@ export class SegmentedButtonExample implements AfterViewInit {
         console.log('Configurable selection changed:', itemTexts);
     }
 
-    onMultipleSelectionChange(event: any): void {
+    onMultipleSelectionChange(event: UI5WrapperCustomEvent<SegmentedButton, 'ui5SelectionChange'>): void {
         const detail = event.detail;
         const selectedItems = detail.selectedItems || [];
         const itemTexts = selectedItems.map((item: any) => item.innerText || item.textContent);
@@ -254,7 +255,7 @@ export class SegmentedButtonExample implements AfterViewInit {
         console.log('Multiple selection changed:', itemTexts);
     }
 
-    onSingleSelectionChange(event: any): void {
+    onSingleSelectionChange(event: UI5WrapperCustomEvent<SegmentedButton, 'ui5SelectionChange'>): void {
         const detail = event.detail;
         const selectedItems = detail.selectedItems || [];
         const itemTexts = selectedItems.map((item: any) => item.innerText || item.textContent);
@@ -262,7 +263,7 @@ export class SegmentedButtonExample implements AfterViewInit {
         console.log('Single selection changed:', itemTexts);
     }
 
-    onSelectionModeChange(event: any): void {
+    onSelectionModeChange(event: UI5WrapperCustomEvent<SegmentedButton, 'ui5SelectionChange'>): void {
         const detail = event.detail;
         const selectedItems = detail.selectedItems || [];
         if (selectedItems.length > 0) {
@@ -273,7 +274,7 @@ export class SegmentedButtonExample implements AfterViewInit {
         }
     }
 
-    onThemeChange(event: any): void {
+    onThemeChange(event: UI5WrapperCustomEvent<SegmentedButton, 'ui5SelectionChange'>): void {
         const detail = event.detail;
         const selectedItems = detail.selectedItems || [];
         if (selectedItems.length > 0) {
@@ -283,7 +284,7 @@ export class SegmentedButtonExample implements AfterViewInit {
         }
     }
 
-    onViewTypeChange(event: any): void {
+    onViewTypeChange(event: UI5WrapperCustomEvent<SegmentedButton, 'ui5SelectionChange'>): void {
         const detail = event.detail;
         const selectedItems = detail.selectedItems || [];
         if (selectedItems.length > 0) {
@@ -293,7 +294,7 @@ export class SegmentedButtonExample implements AfterViewInit {
         }
     }
 
-    onPriorityChange(event: any): void {
+    onPriorityChange(event: UI5WrapperCustomEvent<SegmentedButton, 'ui5SelectionChange'>): void {
         const detail = event.detail;
         const selectedItems = detail.selectedItems || [];
         if (selectedItems.length > 0) {
@@ -303,7 +304,7 @@ export class SegmentedButtonExample implements AfterViewInit {
         }
     }
 
-    onStatusChange(event: any): void {
+    onStatusChange(event: UI5WrapperCustomEvent<SegmentedButton, 'ui5SelectionChange'>): void {
         const detail = event.detail;
         const selectedItems = detail.selectedItems || [];
         if (selectedItems.length > 0) {
diff --git a/libs/docs/ui5-webcomponents/slider/examples/slider-sample.ts b/libs/docs/ui5-webcomponents/slider/examples/slider-sample.ts
index fb0236e253f..e70dabf8f55 100644
--- a/libs/docs/ui5-webcomponents/slider/examples/slider-sample.ts
+++ b/libs/docs/ui5-webcomponents/slider/examples/slider-sample.ts
@@ -1,4 +1,5 @@
 import { Component, computed, effect, signal } from '@angular/core';
+import { UI5WrapperCustomEvent } from '@fundamental-ngx/ui5-webcomponents-base';
 import { Button } from '@fundamental-ngx/ui5-webcomponents/button';
 import { Label } from '@fundamental-ngx/ui5-webcomponents/label';
 import { RangeSlider } from '@fundamental-ngx/ui5-webcomponents/range-slider';
@@ -135,45 +136,45 @@ export class SliderExample {
     }
 
     // Event handlers for basic sliders
-    onBasicSliderChange(event: any): void {
-        this.basicSliderValue.set(event.target.value);
+    onBasicSliderChange(event: UI5WrapperCustomEvent<Slider, 'ui5Change'>): void {
+        this.basicSliderValue.set(event.target?.['value']);
     }
 
-    onVolumeChange(event: any): void {
-        this.volumeValue.set(event.target.value);
+    onVolumeChange(event: UI5WrapperCustomEvent<Slider, 'ui5Change'>): void {
+        this.volumeValue.set(event.target?.['value']);
     }
 
-    onTemperatureChange(event: any): void {
-        this.temperatureValue.set(event.target.value);
+    onTemperatureChange(event: UI5WrapperCustomEvent<Slider, 'ui5Change'>): void {
+        this.temperatureValue.set(event.target?.['value']);
     }
 
     // Event handlers for range sliders
-    onPriceRangeChange(event: any): void {
-        this.priceRangeStart.set(event.target.startValue);
-        this.priceRangeEnd.set(event.target.endValue);
+    onPriceRangeChange(event: UI5WrapperCustomEvent<RangeSlider, 'ui5Change'>): void {
+        this.priceRangeStart.set(event.target?.['startValue']);
+        this.priceRangeEnd.set(event.target?.['endValue']);
     }
 
-    onTimeRangeChange(event: any): void {
-        this.timeRangeStart.set(event.target.startValue);
-        this.timeRangeEnd.set(event.target.endValue);
+    onTimeRangeChange(event: UI5WrapperCustomEvent<RangeSlider, 'ui5Change'>): void {
+        this.timeRangeStart.set(event.target?.['startValue']);
+        this.timeRangeEnd.set(event.target?.['endValue']);
     }
 
     // Event handlers for configurable slider
-    onConfigSliderChange(event: any): void {
-        this.configSliderValue.set(event.target.value);
+    onConfigSliderChange(event: UI5WrapperCustomEvent<Slider, 'ui5Change'>): void {
+        this.configSliderValue.set(event.target?.['value']);
     }
 
     // Event handlers for advanced demo sliders
-    onBrightnessChange(event: any): void {
-        this.brightnessValue.set(event.target.value);
+    onBrightnessChange(event: UI5WrapperCustomEvent<Slider, 'ui5Change'>): void {
+        this.brightnessValue.set(event.target?.['value']);
     }
 
-    onQualityChange(event: any): void {
-        this.qualityValue.set(event.target.value);
+    onQualityChange(event: UI5WrapperCustomEvent<Slider, 'ui5Change'>): void {
+        this.qualityValue.set(event.target?.['value']);
     }
 
-    onZoomChange(event: any): void {
-        this.zoomValue.set(event.target.value);
+    onZoomChange(event: UI5WrapperCustomEvent<Slider, 'ui5Change'>): void {
+        this.zoomValue.set(event.target?.['value']);
     }
 
     // Configuration toggle methods
diff --git a/libs/docs/ui5-webcomponents/step-input/examples/precision-step-input.ts b/libs/docs/ui5-webcomponents/step-input/examples/precision-step-input.ts
index 4750578bea9..0311ba5bdfa 100644
--- a/libs/docs/ui5-webcomponents/step-input/examples/precision-step-input.ts
+++ b/libs/docs/ui5-webcomponents/step-input/examples/precision-step-input.ts
@@ -1,4 +1,5 @@
 import { Component, computed, signal } from '@angular/core';
+import { UI5WrapperCustomEvent } from '@fundamental-ngx/ui5-webcomponents-base';
 import { Label } from '@fundamental-ngx/ui5-webcomponents/label';
 import { SegmentedButton } from '@fundamental-ngx/ui5-webcomponents/segmented-button';
 import { SegmentedButtonItem } from '@fundamental-ngx/ui5-webcomponents/segmented-button-item';
@@ -78,7 +79,7 @@ export class PrecisionStepInputExample {
         return precision === 0 ? 1 : 1 / Math.pow(10, precision);
     });
 
-    onCustomValueChange(event: CustomEvent): void {
+    onCustomValueChange(event: UI5WrapperCustomEvent<StepInput, 'ui5Change'>): void {
         this._customValue.set(Number(event.target?.['value'] ?? 0));
     }
 
diff --git a/libs/docs/ui5-webcomponents/step-input/examples/value-state-step-input.ts b/libs/docs/ui5-webcomponents/step-input/examples/value-state-step-input.ts
index f03df57046e..386759c6c7e 100644
--- a/libs/docs/ui5-webcomponents/step-input/examples/value-state-step-input.ts
+++ b/libs/docs/ui5-webcomponents/step-input/examples/value-state-step-input.ts
@@ -1,4 +1,5 @@
 import { Component, signal } from '@angular/core';
+import { UI5WrapperCustomEvent } from '@fundamental-ngx/ui5-webcomponents-base';
 import { ValueState } from '@fundamental-ngx/ui5-webcomponents-base/types';
 import { Label } from '@fundamental-ngx/ui5-webcomponents/label';
 import { StepInput } from '@fundamental-ngx/ui5-webcomponents/step-input';
@@ -73,15 +74,15 @@ export class ValueStateStepInputExample {
         }
     ]);
 
-    onFormValueChange(event: CustomEvent): void {
+    onFormValueChange(event: UI5WrapperCustomEvent<StepInput, 'ui5Change'>): void {
         console.log('Value change event:', event);
     }
 
-    onFormValueInput(event: CustomEvent): void {
+    onFormValueInput(event: UI5WrapperCustomEvent<StepInput, 'ui5Input'>): void {
         console.log('Input event:', event);
     }
 
-    onValueStateChange(event: CustomEvent): void {
+    onValueStateChange(event: UI5WrapperCustomEvent<StepInput, 'ui5ValueStateChange'>): void {
         console.log('Value state change event:', event);
     }
 }
diff --git a/libs/docs/ui5-webcomponents/text-area/examples/character-limit.ts b/libs/docs/ui5-webcomponents/text-area/examples/character-limit.ts
index 05ee7c842ad..6ea2663c108 100644
--- a/libs/docs/ui5-webcomponents/text-area/examples/character-limit.ts
+++ b/libs/docs/ui5-webcomponents/text-area/examples/character-limit.ts
@@ -1,4 +1,5 @@
 import { Component, signal } from '@angular/core';
+import { UI5WrapperCustomEvent } from '@fundamental-ngx/ui5-webcomponents-base';
 import { ValueState } from '@fundamental-ngx/ui5-webcomponents-base/types';
 import { TextArea } from '@fundamental-ngx/ui5-webcomponents/text-area';
 
@@ -16,7 +17,7 @@ import 'fundamental-styles/dist/margins.css';
 export class TextAreaCharacterLimitSample {
     readonly exceededValueState = signal(ValueState.None);
 
-    onExceededLimitTextChange(event: CustomEvent): void {
-        this.exceededValueState.set((event.target as any).value.length > 100 ? ValueState.Critical : ValueState.None);
+    onExceededLimitTextChange(event: UI5WrapperCustomEvent<TextArea, 'ui5Input'>): void {
+        this.exceededValueState.set(event.target?.['value'].length > 100 ? ValueState.Critical : ValueState.None);
     }
 }
diff --git a/libs/docs/ui5-webcomponents/text-area/examples/events.ts b/libs/docs/ui5-webcomponents/text-area/examples/events.ts
index dafbe7f46a7..6f7cf5e37f0 100644
--- a/libs/docs/ui5-webcomponents/text-area/examples/events.ts
+++ b/libs/docs/ui5-webcomponents/text-area/examples/events.ts
@@ -1,4 +1,5 @@
 import { Component, signal } from '@angular/core';
+import { UI5WrapperCustomEvent } from '@fundamental-ngx/ui5-webcomponents-base';
 import { Label } from '@fundamental-ngx/ui5-webcomponents/label';
 import { Text } from '@fundamental-ngx/ui5-webcomponents/text';
 import { TextArea } from '@fundamental-ngx/ui5-webcomponents/text-area';
@@ -26,13 +27,13 @@ export class TextAreaEventsSample {
         this.eventLog.update((log) => [eventDescription, ...log].slice(0, 10)); // Keep last 10 events
     }
 
-    onTextareaChange(event: CustomEvent): void {
-        this.textareaValue.set((event.target as any).value);
-        this.addEvent('ui5Change', { value: (event.target as any).value });
+    onTextareaChange(event: UI5WrapperCustomEvent<TextArea, 'ui5Change'>): void {
+        this.textareaValue.set(event.target?.['value']);
+        this.addEvent('ui5Change', { value: event.target?.['value'] });
     }
 
-    onTextareaInput(event: CustomEvent): void {
-        this.addEvent('ui5Input', { value: (event.target as any).value });
+    onTextareaInput(event: UI5WrapperCustomEvent<TextArea, 'ui5Input'>): void {
+        this.addEvent('ui5Input', { value: event.target?.['value'] });
     }
 
     onTextareaSelect(): void {
diff --git a/libs/docs/ui5-webcomponents/text-area/examples/growing.ts b/libs/docs/ui5-webcomponents/text-area/examples/growing.ts
index b9bfeefa5cd..1d742dec290 100644
--- a/libs/docs/ui5-webcomponents/text-area/examples/growing.ts
+++ b/libs/docs/ui5-webcomponents/text-area/examples/growing.ts
@@ -1,4 +1,5 @@
 import { Component, signal } from '@angular/core';
+import { UI5WrapperCustomEvent } from '@fundamental-ngx/ui5-webcomponents-base';
 import { TextArea } from '@fundamental-ngx/ui5-webcomponents/text-area';
 
 // Import Fundamental Styles
@@ -17,7 +18,7 @@ export class TextAreaGrowingSample {
         'This is a fixed height textarea that demonstrates the difference from growing textareas. When you have more content than can fit in the visible rows, the textarea will show a scrollbar instead of expanding.'
     );
 
-    onTextChange(event: CustomEvent): void {
+    onTextChange(event: UI5WrapperCustomEvent<TextArea, 'ui5Change'>): void {
         console.log('Text changed', event);
     }
 }
diff --git a/libs/docs/ui5-webcomponents/time-picker/examples/basic-sample.ts b/libs/docs/ui5-webcomponents/time-picker/examples/basic-sample.ts
index b2289d7b3df..2717cf83ad4 100644
--- a/libs/docs/ui5-webcomponents/time-picker/examples/basic-sample.ts
+++ b/libs/docs/ui5-webcomponents/time-picker/examples/basic-sample.ts
@@ -1,7 +1,7 @@
 import { NgStyle } from '@angular/common';
 import { Component, signal } from '@angular/core';
+import type { UI5WrapperCustomEvent } from '@fundamental-ngx/ui5-webcomponents-base';
 import { TimePicker } from '@fundamental-ngx/ui5-webcomponents/time-picker';
-import { TimePickerChangeEventDetail } from '@ui5/webcomponents/dist/TimePicker.js';
 
 // Ensure CLDR data is available for all time-picker components
 import '@ui5/webcomponents-localization/dist/Assets.js';
@@ -21,15 +21,15 @@ export class TimePickerBasicSample {
     readonly placeholderValue = signal('');
     readonly formattedValue = signal('14:30:00');
 
-    onBasicValueChange(event: CustomEvent<TimePickerChangeEventDetail>): void {
+    onBasicValueChange(event: UI5WrapperCustomEvent<TimePicker, 'ui5Change'>): void {
         this.basicValue.set(event.detail.value);
     }
 
-    onPlaceholderValueChange(event: CustomEvent<TimePickerChangeEventDetail>): void {
+    onPlaceholderValueChange(event: UI5WrapperCustomEvent<TimePicker, 'ui5Input'>): void {
         this.placeholderValue.set(event.detail.value);
     }
 
-    onFormattedValueChange(event: CustomEvent<TimePickerChangeEventDetail>): void {
+    onFormattedValueChange(event: UI5WrapperCustomEvent<TimePicker, 'ui5Change'>): void {
         this.formattedValue.set(event.detail.value);
     }
 }
diff --git a/libs/docs/ui5-webcomponents/time-picker/examples/events.ts b/libs/docs/ui5-webcomponents/time-picker/examples/events.ts
index a42c5357070..ccbb558cce3 100644
--- a/libs/docs/ui5-webcomponents/time-picker/examples/events.ts
+++ b/libs/docs/ui5-webcomponents/time-picker/examples/events.ts
@@ -3,12 +3,11 @@ import { Label } from '@fundamental-ngx/ui5-webcomponents/label';
 import { Text } from '@fundamental-ngx/ui5-webcomponents/text';
 import { TimePicker } from '@fundamental-ngx/ui5-webcomponents/time-picker';
 
-import { TimePickerChangeEventDetail, TimePickerInputEventDetail } from '@ui5/webcomponents/dist/TimePicker.js';
-
 // Ensure CLDR data is available for all time-picker components
 import '@ui5/webcomponents-localization/dist/Assets.js';
 
 // Import Fundamental Styles
+import type { UI5WrapperCustomEvent } from '@fundamental-ngx/ui5-webcomponents-base';
 import 'fundamental-styles/dist/form-item.css';
 import 'fundamental-styles/dist/margins.css';
 import 'fundamental-styles/dist/text.css';
@@ -32,20 +31,20 @@ export class TimePickerEventsSample {
         this.eventLog.update((log) => [eventDescription, ...log].slice(0, 10)); // Keep last 10 events
     }
 
-    onTimeChange(event: CustomEvent<TimePickerChangeEventDetail>): void {
+    onTimeChange(event: UI5WrapperCustomEvent<TimePicker, 'ui5Change'>): void {
         this.timeValue.set(event.detail.value);
         this.addEvent('ui5Change', { value: event.detail.value });
     }
 
-    onTimeInput(event: CustomEvent<TimePickerInputEventDetail>): void {
+    onTimeInput(event: UI5WrapperCustomEvent<TimePicker, 'ui5Input'>): void {
         this.addEvent('ui5Input', { value: event.detail.value });
     }
 
-    onTimeOpen(_event: CustomEvent): void {
+    onTimeOpen(_event: UI5WrapperCustomEvent<TimePicker, 'ui5Open'>): void {
         this.addEvent('ui5Open');
     }
 
-    onTimeClose(_event: CustomEvent): void {
+    onTimeClose(_event: UI5WrapperCustomEvent<TimePicker, 'ui5Close'>): void {
         this.addEvent('ui5Close');
     }
 }
diff --git a/libs/docs/ui5-webcomponents/time-picker/examples/format-patterns.ts b/libs/docs/ui5-webcomponents/time-picker/examples/format-patterns.ts
index a462e6621a5..5a2b178c8bd 100644
--- a/libs/docs/ui5-webcomponents/time-picker/examples/format-patterns.ts
+++ b/libs/docs/ui5-webcomponents/time-picker/examples/format-patterns.ts
@@ -1,4 +1,5 @@
 import { Component, signal } from '@angular/core';
+import { UI5WrapperCustomEvent } from '@fundamental-ngx/ui5-webcomponents-base';
 import { TimePicker } from '@fundamental-ngx/ui5-webcomponents/time-picker';
 
 // Ensure CLDR data is available for all time-picker components
@@ -58,10 +59,10 @@ export class TimePickerFormatPatternsSample {
         HH: '14'
     });
 
-    onPatternChange(event: any, pattern: string): void {
+    onPatternChange(event: UI5WrapperCustomEvent<TimePicker, 'ui5Change'>, pattern: string): void {
         this.patternValues.update((values) => ({
             ...values,
-            [pattern]: event.target.value
+            [pattern]: event.detail.value
         }));
     }
 }
diff --git a/libs/docs/ui5-webcomponents/time-picker/examples/value-states.ts b/libs/docs/ui5-webcomponents/time-picker/examples/value-states.ts
index bb67fae53e0..04c904938fa 100644
--- a/libs/docs/ui5-webcomponents/time-picker/examples/value-states.ts
+++ b/libs/docs/ui5-webcomponents/time-picker/examples/value-states.ts
@@ -1,4 +1,5 @@
 import { Component, signal } from '@angular/core';
+import { UI5WrapperCustomEvent } from '@fundamental-ngx/ui5-webcomponents-base';
 import { ValueState } from '@fundamental-ngx/ui5-webcomponents-base/types';
 import { TimePicker } from '@fundamental-ngx/ui5-webcomponents/time-picker';
 
@@ -33,10 +34,10 @@ export class TimePickerValueStatesSample {
         Information: '12:00:00'
     });
 
-    onStateChange(event: any, state: string): void {
+    onStateChange(event: UI5WrapperCustomEvent<TimePicker, 'ui5Change'>, state: string): void {
         this.stateValues.update((values) => ({
             ...values,
-            [state]: event.target.value
+            [state]: event.detail.value
         }));
     }
 }
diff --git a/libs/docs/ui5-webcomponents/toast/examples/duration.ts b/libs/docs/ui5-webcomponents/toast/examples/duration.ts
index e69e270c129..88de1accdde 100644
--- a/libs/docs/ui5-webcomponents/toast/examples/duration.ts
+++ b/libs/docs/ui5-webcomponents/toast/examples/duration.ts
@@ -1,6 +1,6 @@
 import { Component, signal } from '@angular/core';
 import { Button, Label, Option, Select, Toast } from '@fundamental-ngx/ui5-webcomponents';
-import { SelectChangeEventDetail } from '@ui5/webcomponents/dist/Select.js';
+import { UI5WrapperCustomEvent } from '@fundamental-ngx/ui5-webcomponents-base';
 
 // Import Fundamental Styles
 import 'fundamental-styles/dist/layout-grid.css';
@@ -24,7 +24,7 @@ export class ToastDurationSample {
     readonly isToastOpen = signal(false);
     readonly toastMessage = signal('This toast will auto-close after the selected duration');
 
-    onDurationChange(event: CustomEvent<SelectChangeEventDetail>): void {
+    onDurationChange(event: UI5WrapperCustomEvent<Select, 'ui5Change'>): void {
         const selectedOption = event.detail?.selectedOption;
         if (selectedOption) {
             const duration = parseInt(selectedOption.getAttribute('value') || '3000');
diff --git a/libs/docs/ui5-webcomponents/toast/examples/placement.ts b/libs/docs/ui5-webcomponents/toast/examples/placement.ts
index 468a97f5d54..c9afc82c097 100644
--- a/libs/docs/ui5-webcomponents/toast/examples/placement.ts
+++ b/libs/docs/ui5-webcomponents/toast/examples/placement.ts
@@ -1,7 +1,7 @@
 import { Component, signal } from '@angular/core';
 import { Button, Label, Option, Select, Toast } from '@fundamental-ngx/ui5-webcomponents';
+import { UI5WrapperCustomEvent } from '@fundamental-ngx/ui5-webcomponents-base';
 import { ToastPlacement } from '@fundamental-ngx/ui5-webcomponents/types';
-import { SelectChangeEventDetail } from '@ui5/webcomponents/dist/Select.js';
 
 // Import Fundamental Styles
 import 'fundamental-styles/dist/layout-grid.css';
@@ -20,7 +20,7 @@ export class ToastPlacementSample {
     readonly isToastOpen = signal(false);
     readonly toastMessage = signal('Toast notification with custom placement');
 
-    onPlacementChange(event: CustomEvent<SelectChangeEventDetail>): void {
+    onPlacementChange(event: UI5WrapperCustomEvent<Select, 'ui5Change'>): void {
         const selectedOption = event.detail?.selectedOption;
         if (selectedOption) {
             this.selectedPlacement.set(
diff --git a/libs/docs/ui5-webcomponents/toggle-button/examples/interactive.ts b/libs/docs/ui5-webcomponents/toggle-button/examples/interactive.ts
index 1cb6c3b0670..54dbc306294 100644
--- a/libs/docs/ui5-webcomponents/toggle-button/examples/interactive.ts
+++ b/libs/docs/ui5-webcomponents/toggle-button/examples/interactive.ts
@@ -1,5 +1,6 @@
 import { Component, signal, WritableSignal } from '@angular/core';
 import { ButtonDesign, CheckBox, Option, Select } from '@fundamental-ngx/ui5-webcomponents';
+import { UI5WrapperCustomEvent } from '@fundamental-ngx/ui5-webcomponents-base';
 import { ToggleButton } from '@fundamental-ngx/ui5-webcomponents/toggle-button';
 
 // Import SAP Icon
@@ -21,10 +22,10 @@ export class ToggleButtonInteractiveSample {
     readonly hasText = signal(true);
     readonly isLoading = signal(false);
 
-    onDesignChange(event: any): void {
+    onDesignChange(event: UI5WrapperCustomEvent<Select, 'ui5Change'>): void {
         const selectedOption = event.detail?.selectedOption;
         if (selectedOption) {
-            this.selectedDesign.set(selectedOption.getAttribute('value') || 'Default');
+            this.selectedDesign.set((selectedOption.getAttribute('value') as keyof typeof ButtonDesign) || 'Default');
         }
     }
 
@@ -34,19 +35,19 @@ export class ToggleButtonInteractiveSample {
         }
     }
 
-    onDisabledChange(event: any): void {
-        this.isDisabled.set(event.target.checked);
+    onDisabledChange(event: UI5WrapperCustomEvent<CheckBox, 'ui5Change'>): void {
+        this.isDisabled.set(event.target?.['checked']);
     }
 
-    onIconChange(event: any): void {
-        this.hasIcon.set(event.target.checked);
+    onIconChange(event: UI5WrapperCustomEvent<CheckBox, 'ui5Change'>): void {
+        this.hasIcon.set(event.target?.['checked']);
     }
 
-    onTextChange(event: any): void {
-        this.hasText.set(event.target.checked);
+    onTextChange(event: UI5WrapperCustomEvent<CheckBox, 'ui5Change'>): void {
+        this.hasText.set(event.target?.['checked']);
     }
 
-    onLoadingChange(event: any): void {
-        this.isLoading.set(event.target.checked);
+    onLoadingChange(event: UI5WrapperCustomEvent<CheckBox, 'ui5Change'>): void {
+        this.isLoading.set(event.target?.['checked']);
     }
 }
diff --git a/libs/docs/ui5-webcomponents/token/examples/token-in-multi-input.ts b/libs/docs/ui5-webcomponents/token/examples/token-in-multi-input.ts
index d69b3027574..e8ae897452b 100644
--- a/libs/docs/ui5-webcomponents/token/examples/token-in-multi-input.ts
+++ b/libs/docs/ui5-webcomponents/token/examples/token-in-multi-input.ts
@@ -1,5 +1,6 @@
 import { Component, signal, viewChild } from '@angular/core';
 import { MultiInput } from '@fundamental-ngx/ui5-webcomponents';
+import { UI5WrapperCustomEvent } from '@fundamental-ngx/ui5-webcomponents-base';
 import { Token } from '@fundamental-ngx/ui5-webcomponents/token';
 
 @Component({
@@ -20,8 +21,8 @@ export class TokenInMultiInputSample {
 
     readonly multiInput = viewChild<MultiInput>('multiInput');
 
-    onInputChange(event: any): void {
-        const inputValue = event.target.value;
+    onInputChange(event: UI5WrapperCustomEvent<MultiInput, 'ui5Change'> | Event): void {
+        const inputValue = event.target?.['value'];
         this.availableTags.update(() => [...this.availableTags(), { text: inputValue }]);
 
         const multiInput = this.multiInput();
@@ -30,8 +31,8 @@ export class TokenInMultiInputSample {
         }
     }
 
-    onTokenDelete(event: any): void {
-        const tokens = event.detail?.tokens;
+    onTokenDelete(event: UI5WrapperCustomEvent<MultiInput, 'ui5TokenDelete'>): void {
+        const tokens = event.detail.tokens;
         if (tokens) {
             tokens.forEach((token) => token.remove());
         }
diff --git a/libs/docs/ui5-webcomponents/tokenizer/examples/basic-sample.ts b/libs/docs/ui5-webcomponents/tokenizer/examples/basic-sample.ts
index f3df28fee60..0eb382fb1ff 100644
--- a/libs/docs/ui5-webcomponents/tokenizer/examples/basic-sample.ts
+++ b/libs/docs/ui5-webcomponents/tokenizer/examples/basic-sample.ts
@@ -1,4 +1,5 @@
 import { Component, signal } from '@angular/core';
+import { UI5WrapperCustomEvent } from '@fundamental-ngx/ui5-webcomponents-base';
 import { Token } from '@fundamental-ngx/ui5-webcomponents/token';
 import { Tokenizer } from '@fundamental-ngx/ui5-webcomponents/tokenizer';
 
@@ -16,8 +17,8 @@ export class TokenizerBasicSample {
         { id: 4, text: 'Product D', value: 'product-d' }
     ]);
 
-    onTokenDelete(event: any): void {
-        const tokens = event.detail?.tokens;
+    onTokenDelete(event: UI5WrapperCustomEvent<Tokenizer, 'ui5TokenDelete'>): void {
+        const tokens = event.detail.tokens;
 
         if (tokens) {
             tokens.forEach((token) => token.remove());
diff --git a/libs/docs/ui5-webcomponents/tokenizer/examples/clear-all.ts b/libs/docs/ui5-webcomponents/tokenizer/examples/clear-all.ts
index a0f32e3e989..47c80e22c84 100644
--- a/libs/docs/ui5-webcomponents/tokenizer/examples/clear-all.ts
+++ b/libs/docs/ui5-webcomponents/tokenizer/examples/clear-all.ts
@@ -1,5 +1,5 @@
 import { Component, signal } from '@angular/core';
-import { Button } from '@fundamental-ngx/ui5-webcomponents/button';
+import { UI5WrapperCustomEvent } from '@fundamental-ngx/ui5-webcomponents-base';
 import { Token } from '@fundamental-ngx/ui5-webcomponents/token';
 import { Tokenizer } from '@fundamental-ngx/ui5-webcomponents/tokenizer';
 
@@ -7,7 +7,7 @@ import { Tokenizer } from '@fundamental-ngx/ui5-webcomponents/tokenizer';
     selector: 'ui5-tokenizer-clear-all-sample',
     templateUrl: './clear-all.html',
     standalone: true,
-    imports: [Tokenizer, Token, Button]
+    imports: [Tokenizer, Token]
 })
 export class TokenizerClearAllSample {
     tags = signal([
@@ -25,7 +25,7 @@ export class TokenizerClearAllSample {
      * This method is fired upon deleting a single token as well as when "Clear All" button is clicked.
      * The difference between the two is the number of elements in event.detail.tokens
      */
-    onTokenDelete(event: CustomEvent): void {
+    onTokenDelete(event: UI5WrapperCustomEvent<Tokenizer, 'ui5TokenDelete'>): void {
         const tokenElements = event.detail.tokens;
         tokenElements.forEach((token) => token.remove());
     }
diff --git a/libs/docs/ui5-webcomponents/tokenizer/examples/multi-line.ts b/libs/docs/ui5-webcomponents/tokenizer/examples/multi-line.ts
index 5dffd5c6e71..36ca1ec885d 100644
--- a/libs/docs/ui5-webcomponents/tokenizer/examples/multi-line.ts
+++ b/libs/docs/ui5-webcomponents/tokenizer/examples/multi-line.ts
@@ -1,5 +1,6 @@
 import { NgStyle } from '@angular/common';
 import { Component, signal } from '@angular/core';
+import { UI5WrapperCustomEvent } from '@fundamental-ngx/ui5-webcomponents-base';
 import { Token } from '@fundamental-ngx/ui5-webcomponents/token';
 import { Tokenizer } from '@fundamental-ngx/ui5-webcomponents/tokenizer';
 
@@ -27,16 +28,16 @@ export class TokenizerMultiLineSample {
         'Musical Instruments'
     ]);
 
-    onSingleLineTokenDelete(event: any): void {
-        const tokens = event.detail?.tokens;
+    onSingleLineTokenDelete(event: UI5WrapperCustomEvent<Tokenizer, 'ui5TokenDelete'>): void {
+        const tokens = event.detail.tokens;
 
         if (tokens) {
             tokens.forEach((token) => token.remove());
         }
     }
 
-    onMultiLineTokenDelete(event: any): void {
-        const tokens = event.detail?.tokens;
+    onMultiLineTokenDelete(event: UI5WrapperCustomEvent<Tokenizer, 'ui5TokenDelete'>): void {
+        const tokens = event.detail.tokens;
 
         if (tokens) {
             tokens.forEach((token) => token.remove());
diff --git a/libs/webc-generator/src/executors/generate/component-template.ts b/libs/webc-generator/src/executors/generate/component-template.ts
index 44015723588..38e20365f3b 100644
--- a/libs/webc-generator/src/executors/generate/component-template.ts
+++ b/libs/webc-generator/src/executors/generate/component-template.ts
@@ -39,10 +39,9 @@ function hasCvaHostDirective(data: CEM.CustomElementDeclaration): boolean {
 
 function generateTypeImports(
     data: CEM.CustomElementDeclaration,
-    allEnums: { name: string; members: string[] }[],
-    enumPackageMapping: Record<string, string>
+    allEnums: { name: string; members: string[] }[]
 ): { componentImports: string[]; componentEnums: string[] } {
-    const componentImports: string[] = [];
+    const componentImports: Set<string> = new Set();
     const typeNames = new Set<string>();
 
     const members = (data.members as CEM.ClassField[] | undefined) || [];
@@ -74,9 +73,9 @@ function generateTypeImports(
                             reference.module?.includes('/types/')
                         ) {
                             // Use default import for direct type imports and default exports
-                            componentImports.push(`import { default as ${reference.name} } from '${importPath}';`);
+                            componentImports.add(`import { default as ${reference.name} } from '${importPath}';`);
                         } else {
-                            componentImports.push(`import { ${reference.name} } from '${importPath}';`);
+                            componentImports.add(`import { ${reference.name} } from '${importPath}';`);
                         }
                         typeNames.add(reference.name);
                     }
@@ -84,9 +83,10 @@ function generateTypeImports(
             }
         }
     }
+
     const extractedEnums = allEnums.filter((e) => typeNames.has(e.name)).map((e) => e.name);
 
-    return { componentImports, componentEnums: extractedEnums };
+    return { componentImports: Array.from(componentImports), componentEnums: extractedEnums };
 }
 
 /** Helper function to generate input properties for the component. */
@@ -210,18 +210,17 @@ function generateOutputs(data: CEM.CustomElementDeclaration, className: string):
    */
   ui5${pascalCaseEventName} = output<UI5CustomEvent<_${className}, '${event.name}'>>();`);
     });
+
     return outputs.join('\n');
 }
 
 /** Generate the Angular component wrapper. */
 export function componentTemplate(
     data: CEM.CustomElementDeclaration,
-    cemPackage: CEM.Package,
     allEnums: { name: string; members: string[] }[],
-    packageName: string,
-    enumPackageMapping: Record<string, string>
+    packageName: string
 ): string {
-    const { componentImports, componentEnums } = generateTypeImports(data, allEnums, enumPackageMapping);
+    const { componentImports, componentEnums } = generateTypeImports(data, allEnums);
     const tagName = data.tagName || '';
     const className = data.name;
     const { readonlyProperties, privateProperties } = generateProperties(data);
diff --git a/libs/webc-generator/src/executors/generate/executor.ts b/libs/webc-generator/src/executors/generate/executor.ts
index 8091156bcac..745e10de440 100644
--- a/libs/webc-generator/src/executors/generate/executor.ts
+++ b/libs/webc-generator/src/executors/generate/executor.ts
@@ -18,12 +18,7 @@ const FILES = {
     THEMING_TEMPLATE: 'utils/theming-service-template.tpl'
 };
 
-const DEFAULT_ENUM_PACKAGE_MAPPING: Record<string, string> = {
-    '@ui5/webcomponents': '@fundamental-ngx/ui5-webcomponents/types',
-    '@ui5/webcomponents-base': '@fundamental-ngx/ui5-webcomponents-base/types',
-    '@ui5/webcomponents-fiori': '@fundamental-ngx/ui5-webcomponents-fiori/types',
-    '@ui5/webcomponents-ai': '@fundamental-ngx/ui5-webcomponents-ai/types'
-};
+const WEB_COMPONENTS_BASE = 'ui5-webcomponents-base';
 
 /** Converts PascalCase to kebab-case (e.g., 'Ui5Button' -> 'ui5-button'). */
 const pascalToKebabCase = (str: string): string => str.replace(/\B([A-Z])/g, '-$1').toLowerCase();
@@ -132,7 +127,11 @@ function extractCemData(cemData: CEM.Package, options: GenerateExecutorSchema):
 /**
  * Generates the types/index.ts file and its ng-package.json.
  */
-async function generateTypesFiles(allEnums: ExtractedCemData['allEnums'], targetDir: string): Promise<string> {
+async function generateTypesFiles(
+    allEnums: ExtractedCemData['allEnums'],
+    targetDir: string,
+    projectName: string
+): Promise<string> {
     let typesContent = allEnums
         .map(
             (e) =>
@@ -141,6 +140,10 @@ async function generateTypesFiles(allEnums: ExtractedCemData['allEnums'], target
         )
         .join('\n');
 
+    if (projectName === WEB_COMPONENTS_BASE) {
+        typesContent += addUI5WrapperCustomEventType();
+    }
+
     // Add one empty line at the end if there's content
     if (typesContent) {
         typesContent += '\n';
@@ -173,7 +176,6 @@ async function generateThemingFiles(packageName: string, targetDir: string): Pro
  */
 async function generateComponentFiles(
     componentDeclarations: { declaration: CEM.CustomElementDeclaration; modulePath: string }[],
-    cemData: CEM.Package,
     allEnums: ExtractedCemData['allEnums'],
     packageName: string,
     targetDir: string
@@ -197,10 +199,8 @@ async function generateComponentFiles(
 
             const templateContent = componentTemplate(
                 declaration,
-                cemData,
                 allEnums.map((e) => ({ name: e.name, members: e.members })),
-                packageName,
-                DEFAULT_ENUM_PACKAGE_MAPPING
+                packageName
             );
 
             return ensureDirAndWriteFile(componentIndexPath, templateContent).then(() =>
@@ -238,6 +238,18 @@ async function generateUtilsFiles(targetDir: string): Promise<void> {
     await writeFile(ngPackagePath, JSON.stringify({ lib: { entryFile: './index.ts' } }, null, 2), 'utf-8');
 }
 
+function addUI5WrapperCustomEventType(): string {
+    return `
+import { OutputEmitterRef } from '@angular/core';
+
+type OutputKeys<T> = {
+    [K in keyof T]: T[K] extends OutputEmitterRef<any> ? K : never;
+}[keyof T];
+
+export type UI5WrapperCustomEvent<T, N extends OutputKeys<T>> = T[N] extends OutputEmitterRef<infer E> ? E : never;
+`;
+}
+
 /**
  * An NX executor that generates Angular components from UI5 Web Components'
  * custom-elements-internal.json schema.
@@ -266,7 +278,7 @@ const runExecutor: PromiseExecutor<GenerateExecutorSchema> = async (options, con
         let exportsContent = '';
 
         if (allEnums.length > 0) {
-            exportsContent += await generateTypesFiles(allEnums, targetDir);
+            exportsContent += await generateTypesFiles(allEnums, targetDir, context.projectName);
         }
 
         if (options.skipComponents !== true) {
@@ -282,7 +294,6 @@ const runExecutor: PromiseExecutor<GenerateExecutorSchema> = async (options, con
             // Generate Component Wrappers
             const componentExports = await generateComponentFiles(
                 componentDeclarations,
-                cemData,
                 allEnums,
                 packageName,
                 targetDir
diff --git a/netlify.toml b/netlify.toml
index cb2e8f4cd16..6e26b638cc1 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -8,7 +8,7 @@
 [build]
   ignore = 'sh ./ignore.sh'
   publish = "dist/apps/docs"
-  command = "NODE_OPTIONS=--max_old_space_size=8192 npx nx run-many --target=generate --projects=ui5-webcomponents-base,ui5-webcomponents,ui5-webcomponents-ai,ui5-webcomponents-fiori && npx nx run docs:compile:production-unoptimized --base-href=\"/\""
+  command = "NODE_OPTIONS=--max_old_space_size=8192 npx nx run-many --target=generate --projects=ui5-webcomponents-base,ui5-webcomponents,ui5-webcomponents-ai,ui5-webcomponents-fiori --skip-nx-cache && npx nx run docs:compile:production-unoptimized --base-href=\"/\""
 
 [build.environment]
   NODE_VERSION = "22.12.0"
diff --git a/package.json b/package.json
index 399777540f6..f0dd71fa49f 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
         "build:prepare": "echo Building libraries and preparing for publishing && nx run-many --target=prepare --all --pack --configuration=production --skip-nx-cache",
         "test": "echo Running unit tests && nx run-many --target=test --all --parallel=10",
         "cleanup": "find libs/ui5-webcomponents -mindepth 1 -type d -exec rm -r {} + && rm libs/ui5-webcomponents/index.ts && find libs/ui5-webcomponents-ai -mindepth 1 -type d -exec rm -r {} + && rm libs/ui5-webcomponents-ai/index.ts && find libs/ui5-webcomponents-fiori -mindepth 1 -type d -exec rm -r {} + && rm libs/ui5-webcomponents-fiori/index.ts && rm -rf libs/ui5-webcomponents-base/types && rm -rf dist",
-        "generate:ui5": "echo Generating UI5 Webcomponents Wrappers && nx run-many --target=generate --projects=ui5-webcomponents,ui5-webcomponents-ai,ui5-webcomponents-fiori,ui5-webcomponents-base",
+        "generate:ui5": "echo Generating UI5 Webcomponents Wrappers && nx run-many --target=generate --projects=ui5-webcomponents,ui5-webcomponents-ai,ui5-webcomponents-fiori,ui5-webcomponents-base --skip-nx-cache",
         "app:e2e:affected": "echo Running affected e2e tests on local && nx run docs:e2e-app:affected-local",
         "app:e2e:all": "echo Running all e2e tests on local && nx run docs:e2e-app:all-local",
         "ng": "ng",