From c718381387aa1ca1e5cd40e27e1bf1c6664c7a18 Mon Sep 17 00:00:00 2001
From: Quentin Deroubaix <139884126+quentinderoubaix@users.noreply.github.com>
Date: Fri, 18 Oct 2024 14:31:35 +0200
Subject: [PATCH] feat: moving actions into directives / api (#947)

---
 .../src/components/select/select.component.ts |  16 +-
 angular/bootstrap/src/index.ts                |  18 +-
 .../app/samples/pagination/custom.route.ts    |   2 +-
 .../src/app/samples/select/custom.route.ts    |   2 +-
 .../slots/rating-readonly.component.ts        |   5 -
 .../pagination/pagination.component.html      |  10 +-
 .../app/samples/rating/rating.component.html  |   6 +-
 .../app/samples/slider/slider.component.html  |  12 +-
 .../app/samples/slider/slider.component.ts    |   4 +-
 angular/ssr-app/tsconfig.json                 |   2 +
 .../src/components/accordion/accordion.ts     |   3 +-
 core-bootstrap/src/components/modal/modal.ts  |  10 +-
 .../src/components/pagination/pagination.ts   |   4 +-
 .../src/components/rating/rating.ts           |  10 +-
 .../src/components/select/select.ts           |  11 +-
 .../src/components/slider/slider.ts           |  10 +-
 core-bootstrap/src/scss/select.scss           |   2 +
 .../components/accordion/accordion.spec.ts    |  10 +-
 core/src/components/accordion/accordion.ts    |  26 +-
 core/src/components/components.spec-utils.ts  |  54 ++++
 core/src/components/modal/modal.spec.ts       |   7 +-
 core/src/components/modal/modal.ts            |  41 +--
 .../components/pagination/pagination.spec.ts  |  19 +-
 core/src/components/pagination/pagination.ts  |  62 ++---
 core/src/components/rating/rating.spec.ts     | 118 ++++----
 core/src/components/rating/rating.ts          | 137 +++++----
 core/src/components/select/select.spec.ts     |  36 ++-
 core/src/components/select/select.ts          | 191 +++++++------
 core/src/components/slider/slider.spec.ts     |  93 ++++---
 core/src/components/slider/slider.ts          | 259 ++++++++----------
 .../bootstrap-select-custom.html              |   2 +-
 .../bootstrap-select-default.html             |   2 +-
 .../bootstrap-select-playground.html          |   2 +-
 .../bootstrap-select-select.html              |   2 +-
 .../daisyui-slider-default.html               |   2 +-
 e2e/select/select.singlebrowser-e2e-spec.ts   |   4 +-
 e2e/ssr.ssr-e2e-spec.ts-snapshots/ssr.html    |   2 +-
 .../src/components/select/select.tsx          |  18 +-
 .../samples/pagination/Custom.route.tsx       |   2 +-
 .../bootstrap/samples/select/Custom.route.tsx |   3 +-
 .../daisyui/samples/pagination/Pagination.tsx |   2 +-
 .../src/daisyui/samples/rating/Rating.tsx     |   6 +-
 .../src/daisyui/samples/slider/Slider.tsx     |  11 +-
 react/headless/src/utils/directive.ts         |   3 +
 react/ssr-app/tsconfig.json                   |   1 +
 .../src/components/select/Select.svelte       |  18 +-
 .../samples/pagination/CustomPages.svelte     |   2 +-
 .../samples/select/Custom.route.svelte        |   6 +-
 .../samples/pagination/Pagination.svelte      |   4 +-
 .../src/daisyui/samples/rating/Rating.svelte  |  11 +-
 .../src/daisyui/samples/slider/Slider.svelte  |   8 +-
 51 files changed, 616 insertions(+), 675 deletions(-)

diff --git a/angular/bootstrap/src/components/select/select.component.ts b/angular/bootstrap/src/components/select/select.component.ts
index a0f402768b..6b3ec733bd 100644
--- a/angular/bootstrap/src/components/select/select.component.ts
+++ b/angular/bootstrap/src/components/select/select.component.ts
@@ -46,24 +46,12 @@ export class SelectItemLabelDirective<Item> {
 			>
 				@if (state.selectedContexts; as selectedContexts) {
 					@for (itemContext of selectedContexts; track itemCtxTrackBy($index, itemContext)) {
-						<div [auUse]="[_widget.directives.badgeAttributesDirective, itemContext]">
+						<div [auUse]="[widget.directives.badgeAttributesDirective, itemContext]">
 							<ng-template [auSlot]="state.badgeLabel" [auSlotProps]="{state, widget, itemContext}"></ng-template>
 						</div>
 					}
 				}
-				<input
-					attr.id="{{ state.id }}"
-					attr.aria-label="{{ state.ariaLabel }}"
-					type="text"
-					class="au-select-input flex-grow-1 border-0"
-					[value]="state.filterText"
-					aria-autocomplete="list"
-					autoCorrect="off"
-					autoCapitalize="none"
-					autoComplete="off"
-					(input)="_widget.actions.onInput($event)"
-					(keydown)="_widget.actions.onInputKeydown($event)"
-				/>
+				<input [auUse]="widget.directives.inputDirective" [value]="state.filterText" />
 			</div>
 			@if (state.open && state.visibleItems.length) {
 				<ul
diff --git a/angular/bootstrap/src/index.ts b/angular/bootstrap/src/index.ts
index 97c950a1a5..b8bb8f4da7 100644
--- a/angular/bootstrap/src/index.ts
+++ b/angular/bootstrap/src/index.ts
@@ -15,7 +15,6 @@ export type {
 	AccordionState,
 	AccordionWidget,
 	AccordionDirectives,
-	AccordionItemActions,
 	AccordionItemApi,
 	AccordionItemDirectives,
 } from './components/accordion';
@@ -28,16 +27,7 @@ export * from './components/alert';
 
 export * from './components/collapse';
 
-export type {
-	ModalContext,
-	ModalProps,
-	ModalState,
-	ModalWidget,
-	ModalApi,
-	ModalDirectives,
-	ModalActions,
-	ModalBeforeCloseEvent,
-} from './components/modal';
+export type {ModalContext, ModalProps, ModalState, ModalWidget, ModalApi, ModalDirectives, ModalBeforeCloseEvent} from './components/modal';
 export {createModal, getModalDefaultConfig, modalCloseButtonClick, modalOutsideClick} from './components/modal';
 export * from './components/modal';
 
@@ -48,7 +38,7 @@ export type {
 	PaginationState,
 	PaginationWidget,
 	DirectionsHrefs,
-	PaginationActions,
+	PaginationApi,
 	PaginationDirectives,
 } from './components/pagination';
 export {createPagination, getPaginationDefaultConfig} from './components/pagination';
@@ -58,7 +48,7 @@ export type {ProgressbarContext, ProgressbarProps, ProgressbarState, Progressbar
 export {createProgressbar, getProgressbarDefaultConfig} from './components/progressbar';
 export * from './components/progressbar';
 
-export type {RatingProps, RatingState, RatingWidget, StarContext, RatingActions, RatingDirectives} from './components/rating';
+export type {RatingProps, RatingState, RatingWidget, StarContext, RatingApi, RatingDirectives} from './components/rating';
 export {createRating, getRatingDefaultConfig} from './components/rating';
 export * from './components/rating';
 
@@ -69,7 +59,6 @@ export type {
 	SelectState,
 	SelectWidget,
 	ItemContext,
-	SelectActions,
 	SelectApi,
 	SelectDirectives,
 } from './components/select';
@@ -83,7 +72,6 @@ export type {
 	SliderSlotLabelContext,
 	SliderState,
 	SliderWidget,
-	SliderActions,
 	SliderHandle,
 	HandleDisplayOptions,
 	ProgressDisplayOptions,
diff --git a/angular/demo/bootstrap/src/app/samples/pagination/custom.route.ts b/angular/demo/bootstrap/src/app/samples/pagination/custom.route.ts
index bd91572c7a..0b0cf40b72 100644
--- a/angular/demo/bootstrap/src/app/samples/pagination/custom.route.ts
+++ b/angular/demo/bootstrap/src/app/samples/pagination/custom.route.ts
@@ -59,7 +59,7 @@ export default class PaginationComponent {
 	handleTheChange(input: HTMLInputElement, widget: PaginationContext['widget']) {
 		const value = input.value;
 		const intValue = parseInt(value);
-		widget.actions.select(intValue);
+		widget.api.select(intValue);
 		input.value = widget.stores.page$().toString();
 	}
 }
diff --git a/angular/demo/bootstrap/src/app/samples/select/custom.route.ts b/angular/demo/bootstrap/src/app/samples/select/custom.route.ts
index 2ab37aff30..88f7d76455 100644
--- a/angular/demo/bootstrap/src/app/samples/select/custom.route.ts
+++ b/angular/demo/bootstrap/src/app/samples/select/custom.route.ts
@@ -36,7 +36,7 @@ function getHtmlText(html: string) {
 						type="button"
 						class="btn-close ms-1 wiki-btn-close"
 						aria-label="Close"
-						(click)="widget.actions.onRemoveBadgeClick($event, itemContext.item)"
+						[auUse]="[widget.directives.badgeCloseButtonDirective, itemContext]"
 					></button>
 				</ng-template>
 				<ng-template auSelectItemLabel let-widget="widget" let-itemContext="itemContext">
diff --git a/angular/demo/bootstrap/src/app/samples/slots/rating-readonly.component.ts b/angular/demo/bootstrap/src/app/samples/slots/rating-readonly.component.ts
index fb098467b3..98b97073d5 100644
--- a/angular/demo/bootstrap/src/app/samples/slots/rating-readonly.component.ts
+++ b/angular/demo/bootstrap/src/app/samples/slots/rating-readonly.component.ts
@@ -39,11 +39,6 @@ export class RatingReadonlyComponent extends BaseWidgetDirective<RatingWidget> {
 		defaultConfig: {
 			readonly: true,
 		},
-		events: {
-			onHover: () => {},
-			onLeave: () => {},
-			onRatingChange: () => {},
-		},
 	});
 
 	readonly className = input<string>();
diff --git a/angular/demo/daisyui/src/app/samples/pagination/pagination.component.html b/angular/demo/daisyui/src/app/samples/pagination/pagination.component.html
index eef7b2ca64..8fc356893a 100644
--- a/angular/demo/daisyui/src/app/samples/pagination/pagination.component.html
+++ b/angular/demo/daisyui/src/app/samples/pagination/pagination.component.html
@@ -4,7 +4,7 @@
 			<button
 				class="join-item btn btn-outline"
 				[attr.aria-label]="state().ariaFirstLabel"
-				(click)="widget.actions.first()"
+				(click)="widget.api.first()"
 				[disabled]="state().previousDisabled"
 				[attr.aria-disabled]="state().previousDisabled ? 'true' : null"
 				[attr.tabindex]="state().previousDisabled ? -1 : undefined"
@@ -16,7 +16,7 @@
 			<button
 				class="join-item btn btn-outline"
 				[attr.aria-label]="state().ariaPreviousLabel"
-				(click)="widget.actions.previous()"
+				(click)="widget.api.previous()"
 				[disabled]="state().previousDisabled"
 				[attr.aria-disabled]="state().previousDisabled ? 'true' : null"
 				[attr.tabindex]="state().previousDisabled ? -1 : undefined"
@@ -31,7 +31,7 @@
 				[attr.aria-current]="page === state().page ? 'page' : null"
 				[attr.tabindex]="state().disabled ? -1 : undefined"
 				[class.disabled]="state().disabled"
-				(click)="widget.actions.select(page)"
+				(click)="widget.api.select(page)"
 			>
 				{{ page }}
 				@if (state().page === page) {
@@ -43,7 +43,7 @@
 			<button
 				class="join-item btn btn-outline"
 				[attr.aria-label]="state().ariaNextLabel"
-				(click)="widget.actions.next()"
+				(click)="widget.api.next()"
 				[disabled]="state().nextDisabled"
 				[attr.aria-disabled]="state().nextDisabled ? 'true' : null"
 				[attr.tabindex]="state().nextDisabled ? -1 : undefined"
@@ -55,7 +55,7 @@
 			<button
 				class="join-item btn btn-outline"
 				[attr.aria-label]="state().ariaLastLabel"
-				(click)="widget.actions.last()"
+				(click)="widget.api.last()"
 				[disabled]="state().nextDisabled"
 				[attr.aria-disabled]="state().nextDisabled ? 'true' : null"
 				[attr.tabindex]="state().nextDisabled ? -1 : undefined"
diff --git a/angular/demo/daisyui/src/app/samples/rating/rating.component.html b/angular/demo/daisyui/src/app/samples/rating/rating.component.html
index 066dd0c048..8ee9a4f83c 100644
--- a/angular/demo/daisyui/src/app/samples/rating/rating.component.html
+++ b/angular/demo/daisyui/src/app/samples/rating/rating.component.html
@@ -2,9 +2,9 @@
 	@for (item of state().stars; track trackByIndex(index); let index = $index) {
 		<input
 			(blur)="onTouched()"
-			(mouseleave)="_widget.actions.leave()"
-			(mouseenter)="_widget.actions.hover(index + 1)"
-			(click)="_widget.actions.click(index + 1)"
+			(mouseleave)="api.leave()"
+			(mouseenter)="api.setHoveredRating(index + 1)"
+			(click)="api.setRating(index + 1)"
 			type="radio"
 			name="rating-1"
 			class="mask mask-star"
diff --git a/angular/demo/daisyui/src/app/samples/slider/slider.component.html b/angular/demo/daisyui/src/app/samples/slider/slider.component.html
index e4a9a54bbc..d795ac224f 100644
--- a/angular/demo/daisyui/src/app/samples/slider/slider.component.html
+++ b/angular/demo/daisyui/src/app/samples/slider/slider.component.html
@@ -1,14 +1,14 @@
 <input
-	[auUse]="widget.directives.sliderDirective"
+	[auUseMulti]="[
+		[widget.directives.sliderDirective, undefined],
+		[widget.directives.clickableAreaDirective, undefined],
+		[widget.directives.handleEventsDirective, {item: {id: 0}}],
+	]"
 	type="range"
 	[min]="state().min"
 	[max]="state().max"
 	[value]="state().sortedHandles[0].value"
 	[step]="state().stepSize"
-	[class]="'range'"
+	class="range"
 	[attr.aria-label]="state().sortedHandles[0].ariaLabel"
-	(click)="widget.actions.click($event)"
-	(keydown)="widget.actions.keydown($event, 0)"
-	(mousedown)="widget.actions.mouseDown($event, 0)"
-	(touchstart)="widget.actions.touchStart($event, 0)"
 />
diff --git a/angular/demo/daisyui/src/app/samples/slider/slider.component.ts b/angular/demo/daisyui/src/app/samples/slider/slider.component.ts
index 00c88230ba..97834486e9 100644
--- a/angular/demo/daisyui/src/app/samples/slider/slider.component.ts
+++ b/angular/demo/daisyui/src/app/samples/slider/slider.component.ts
@@ -5,14 +5,14 @@ import {
 	auNumberAttribute,
 	callWidgetFactory,
 	createSlider,
-	UseDirective,
+	UseMultiDirective,
 } from '@agnos-ui/angular-headless';
 import {ChangeDetectionStrategy, Component, input, model} from '@angular/core';
 
 @Component({
 	selector: 'app-slider',
 	standalone: true,
-	imports: [UseDirective],
+	imports: [UseMultiDirective],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	templateUrl: './slider.component.html',
 })
diff --git a/angular/ssr-app/tsconfig.json b/angular/ssr-app/tsconfig.json
index 547d961c63..c646413f71 100644
--- a/angular/ssr-app/tsconfig.json
+++ b/angular/ssr-app/tsconfig.json
@@ -5,6 +5,8 @@
 		"paths": {
 			"@agnos-ui/core": ["./core/src"],
 			"@agnos-ui/core/*": ["./core/src/*"],
+			"@agnos-ui/core-bootstrap": ["./core-bootstrap/src"],
+			"@agnos-ui/core-bootstrap/*": ["./core-bootstrap/src/*"],
 			"@agnos-ui/angular-headless": ["./angular/headless/src"],
 			"@agnos-ui/angular-bootstrap": ["./angular/bootstrap/src"],
 			"@agnos-ui/common/*": ["./common/*"],
diff --git a/core-bootstrap/src/components/accordion/accordion.ts b/core-bootstrap/src/components/accordion/accordion.ts
index 85143a3eda..819c92ca4c 100644
--- a/core-bootstrap/src/components/accordion/accordion.ts
+++ b/core-bootstrap/src/components/accordion/accordion.ts
@@ -1,7 +1,6 @@
 import type {
 	AccordionApi,
 	AccordionDirectives,
-	AccordionItemActions,
 	AccordionItemApi,
 	AccordionProps as CoreProps,
 	AccordionState as CoreState,
@@ -76,7 +75,7 @@ export type AccordionWidget = Widget<AccordionProps, AccordionState, AccordionAp
 export interface AccordionItemState extends CoreItemState, AccordionItemExtraProps {}
 export interface AccordionItemProps extends CoreItemProps, AccordionItemExtraProps {}
 
-export type AccordionItemWidget = Widget<AccordionItemProps, AccordionItemState, AccordionItemApi, AccordionItemActions, AccordionItemDirectives>;
+export type AccordionItemWidget = Widget<AccordionItemProps, AccordionItemState, AccordionItemApi, object, AccordionItemDirectives>;
 
 const defaultConfigExtraProps: AccordionExtraProps = {
 	itemStructure: undefined,
diff --git a/core-bootstrap/src/components/modal/modal.ts b/core-bootstrap/src/components/modal/modal.ts
index 12d745df01..decb78940a 100644
--- a/core-bootstrap/src/components/modal/modal.ts
+++ b/core-bootstrap/src/components/modal/modal.ts
@@ -1,10 +1,4 @@
-import type {
-	ModalProps as CoreProps,
-	ModalState as CoreState,
-	ModalActions,
-	ModalApi as CoreApi,
-	ModalDirectives,
-} from '@agnos-ui/core/components/modal';
+import type {ModalProps as CoreProps, ModalState as CoreState, ModalApi as CoreApi, ModalDirectives} from '@agnos-ui/core/components/modal';
 import {createModal as createCoreModal, getModalDefaultConfig as getCoreDefaultConfig} from '@agnos-ui/core/components/modal';
 import type {ConfigValidator, PropsConfig, SlotContent, Widget, WidgetSlotContext} from '@agnos-ui/core/types';
 import {fadeTransition} from '../../services/transitions';
@@ -78,7 +72,7 @@ export interface ModalApi<Data> extends Omit<CoreApi, 'patch'> {
 	patch: ModalWidget<Data>['patch'];
 }
 
-export type ModalWidget<Data> = Widget<ModalProps<Data>, ModalState<Data>, ModalApi<Data>, ModalActions, ModalDirectives>;
+export type ModalWidget<Data> = Widget<ModalProps<Data>, ModalState<Data>, ModalApi<Data>, object, ModalDirectives>;
 
 const defaultConfigExtraProps: ModalExtraProps<any> = {
 	contentData: undefined,
diff --git a/core-bootstrap/src/components/pagination/pagination.ts b/core-bootstrap/src/components/pagination/pagination.ts
index 4095fd76ea..ca909259d8 100644
--- a/core-bootstrap/src/components/pagination/pagination.ts
+++ b/core-bootstrap/src/components/pagination/pagination.ts
@@ -1,7 +1,7 @@
 import {extendWidgetProps} from '@agnos-ui/core/services/extendWidget';
 import type {SlotContent, Widget, WidgetFactory, WidgetSlotContext} from '@agnos-ui/core/types';
 import type {
-	PaginationActions,
+	PaginationApi,
 	PaginationDirectives,
 	PaginationProps as CoreProps,
 	PaginationState as CoreState,
@@ -104,7 +104,7 @@ interface PaginationExtraProps {
 export interface PaginationState extends CoreState, PaginationExtraProps {}
 export interface PaginationProps extends CoreProps, PaginationExtraProps {}
 
-export type PaginationWidget = Widget<PaginationProps, PaginationState, object, PaginationActions, PaginationDirectives>;
+export type PaginationWidget = Widget<PaginationProps, PaginationState, PaginationApi, object, PaginationDirectives>;
 
 const defaultConfigExtraProps: PaginationExtraProps = {
 	structure: undefined,
diff --git a/core-bootstrap/src/components/rating/rating.ts b/core-bootstrap/src/components/rating/rating.ts
index fcb3080da0..7b3e52f67b 100644
--- a/core-bootstrap/src/components/rating/rating.ts
+++ b/core-bootstrap/src/components/rating/rating.ts
@@ -1,10 +1,4 @@
-import type {
-	RatingActions,
-	RatingDirectives,
-	StarContext,
-	RatingState as CoreState,
-	RatingProps as CoreProps,
-} from '@agnos-ui/core/components/rating';
+import type {RatingApi, RatingDirectives, StarContext, RatingState as CoreState, RatingProps as CoreProps} from '@agnos-ui/core/components/rating';
 import {getRatingDefaultConfig as getCoreDefaultConfig, createRating as createCoreRating} from '@agnos-ui/core/components/rating';
 import {extendWidgetProps} from '@agnos-ui/core/services/extendWidget';
 import type {SlotContent, Widget, WidgetFactory} from '@agnos-ui/core/types';
@@ -26,7 +20,7 @@ interface RatingExtraProps {
 export interface RatingState extends CoreState, RatingExtraProps {}
 export interface RatingProps extends CoreProps, RatingExtraProps {}
 
-export type RatingWidget = Widget<RatingProps, RatingState, object, RatingActions, RatingDirectives>;
+export type RatingWidget = Widget<RatingProps, RatingState, RatingApi, object, RatingDirectives>;
 
 const defaultConfigExtraProps: RatingExtraProps = {
 	star: ({fill}: StarContext) => String.fromCharCode(fill === 100 ? 9733 : 9734),
diff --git a/core-bootstrap/src/components/select/select.ts b/core-bootstrap/src/components/select/select.ts
index 265ff65137..36f4f42b7c 100644
--- a/core-bootstrap/src/components/select/select.ts
+++ b/core-bootstrap/src/components/select/select.ts
@@ -1,11 +1,4 @@
-import type {
-	ItemContext,
-	SelectActions,
-	SelectApi,
-	SelectDirectives,
-	SelectProps as CoreProps,
-	SelectState as CoreState,
-} from '@agnos-ui/core/components/select';
+import type {ItemContext, SelectApi, SelectDirectives, SelectProps as CoreProps, SelectState as CoreState} from '@agnos-ui/core/components/select';
 import {createSelect as createCoreSelect, getSelectDefaultConfig as getCoreDefaultConfig} from '@agnos-ui/core/components/select';
 import {extendWidgetProps} from '@agnos-ui/core/services/extendWidget';
 import type {PropsConfig, SlotContent, Widget, WidgetSlotContext} from '@agnos-ui/core/types';
@@ -51,7 +44,7 @@ interface SelectExtraProps<Item> {
 export interface SelectState<Item> extends CoreState<Item>, SelectExtraProps<Item> {}
 export interface SelectProps<Item> extends CoreProps<Item>, SelectExtraProps<Item> {}
 
-export type SelectWidget<Item> = Widget<SelectProps<Item>, SelectState<Item>, SelectApi<Item>, SelectActions<Item>, SelectDirectives<Item>>;
+export type SelectWidget<Item> = Widget<SelectProps<Item>, SelectState<Item>, SelectApi<Item>, object, SelectDirectives<Item>>;
 
 const defaultConfigExtraProps: SelectExtraProps<any> = {
 	badgeLabel: ({itemContext}: SelectItemContext<any>) => itemContext.item,
diff --git a/core-bootstrap/src/components/slider/slider.ts b/core-bootstrap/src/components/slider/slider.ts
index 5af38e04b4..006839e492 100644
--- a/core-bootstrap/src/components/slider/slider.ts
+++ b/core-bootstrap/src/components/slider/slider.ts
@@ -1,10 +1,4 @@
-import type {
-	SliderActions,
-	SliderDirectives,
-	SliderHandle,
-	SliderProps as CoreProps,
-	SliderState as CoreState,
-} from '@agnos-ui/core/components/slider';
+import type {SliderDirectives, SliderHandle, SliderProps as CoreProps, SliderState as CoreState} from '@agnos-ui/core/components/slider';
 import {createSlider as createCoreSlider, getSliderDefaultConfig as getCoreDefaultConfig} from '@agnos-ui/core/components/slider';
 import {extendWidgetProps} from '@agnos-ui/core/services/extendWidget';
 import type {SlotContent, Widget, WidgetFactory, WidgetSlotContext} from '@agnos-ui/core/types';
@@ -40,7 +34,7 @@ interface SliderExtraProps {
 export interface SliderState extends CoreState, SliderExtraProps {}
 export interface SliderProps extends CoreProps, SliderExtraProps {}
 
-export type SliderWidget = Widget<SliderProps, SliderState, object, SliderActions, SliderDirectives>;
+export type SliderWidget = Widget<SliderProps, SliderState, object, object, SliderDirectives>;
 
 const defaultConfigExtraProps: SliderExtraProps = {
 	structure: undefined,
diff --git a/core-bootstrap/src/scss/select.scss b/core-bootstrap/src/scss/select.scss
index 0c719aa9d2..83650b9f23 100644
--- a/core-bootstrap/src/scss/select.scss
+++ b/core-bootstrap/src/scss/select.scss
@@ -6,5 +6,7 @@
 }
 
 .au-select-input {
+	border: 0;
+	flex-grow: 1;
 	outline: none;
 }
diff --git a/core/src/components/accordion/accordion.spec.ts b/core/src/components/accordion/accordion.spec.ts
index 3164a2949d..90e7644895 100644
--- a/core/src/components/accordion/accordion.spec.ts
+++ b/core/src/components/accordion/accordion.spec.ts
@@ -114,11 +114,13 @@ describe(`Accordion`, () => {
 	});
 
 	test(`itemVisibleState update properly`, () => {
+		const button = document.createElement('button');
 		const i = accordion.api.registerItem();
+		i.directives.buttonDirective(button);
 		expect(i.state$().visible).toBe(false);
-		i.actions.click();
+		button.click();
 		expect(i.state$().visible).toBe(true);
-		i.actions.click();
+		button.click();
 	});
 
 	test(`should expand all the items and close them`, () => {
@@ -277,12 +279,14 @@ describe(`Accordion`, () => {
 
 	test(`should not work click when item is disabled`, () => {
 		const element = document.createElement('div');
+		const button = document.createElement('button');
 		const i = accordion.api.registerItem({props: {disabled: true}});
 		i.directives.itemDirective(element);
+		i.directives.buttonDirective(button);
 		expectOpenItems(state, [false]);
 		i.patch({visible: true});
 		expectOpenItems(state, [true]);
-		i.actions.click();
+		button.click();
 		expectOpenItems(state, [true]);
 	});
 
diff --git a/core/src/components/accordion/accordion.ts b/core/src/components/accordion/accordion.ts
index 0ee281979d..1f20d3b707 100644
--- a/core/src/components/accordion/accordion.ts
+++ b/core/src/components/accordion/accordion.ts
@@ -172,13 +172,6 @@ export interface AccordionDirectives {
 
 export type AccordionWidget = Widget<AccordionProps, AccordionState, AccordionApi, object, AccordionDirectives>;
 
-export interface AccordionItemActions {
-	/**
-	 * Action to be called when the user clicks on the accordion-item button. If the accordion-item is disabled nothing will happen.
-	 */
-	click(): void;
-}
-
 export interface AccordionItemApi {
 	/**
 	 * It will collapse the accordion-item.
@@ -311,7 +304,7 @@ export interface AccordionItemState extends AccordionItemCommonPropsAndState {
 	shouldBeInDOM: boolean;
 }
 
-export type AccordionItemWidget = Widget<AccordionItemProps, AccordionItemState, AccordionItemApi, AccordionItemActions, AccordionItemDirectives>;
+export type AccordionItemWidget = Widget<AccordionItemProps, AccordionItemState, AccordionItemApi, object, AccordionItemDirectives>;
 
 const defaultAccordionConfig: AccordionProps = {
 	closeOthers: false,
@@ -436,11 +429,6 @@ export function createAccordionItem(config?: PropsConfig<AccordionItemProps>): A
 		},
 	});
 	const shouldBeInDOM$ = computed(() => destroyOnHide$() === false || !transition.stores.hidden$());
-	const clickAction = () => {
-		if (!disabled$()) {
-			visible$.update((c: boolean) => !c);
-		}
-	};
 	const toggleDirective = createAttributesDirective(() => ({
 		attributes: {
 			id: computed(() => `${id$()}-toggle`),
@@ -450,7 +438,13 @@ export function createAccordionItem(config?: PropsConfig<AccordionItemProps>): A
 			disabled: disabled$,
 		},
 		classNames: {collapsed: computed(() => !visible$())},
-		events: {click: clickAction},
+		events: {
+			click: () => {
+				if (!disabled$()) {
+					visible$.update((c: boolean) => !c);
+				}
+			},
+		},
 	}));
 	const transitionDirective = bindDirectiveNoArg(transition.directives.directive);
 	const bodyContainerAttrsDirective = createAttributesDirective(() => ({
@@ -474,9 +468,6 @@ export function createAccordionItem(config?: PropsConfig<AccordionItemProps>): A
 			...stateProps,
 		}),
 		patch,
-		actions: {
-			click: clickAction,
-		},
 		api: {
 			initDone: () => {
 				initDone$.set(true);
@@ -491,6 +482,7 @@ export function createAccordionItem(config?: PropsConfig<AccordionItemProps>): A
 				visible$.update((c: boolean) => !c);
 			},
 		},
+		actions: {},
 		directives: {
 			toggleDirective,
 			buttonDirective: mergeDirectives(
diff --git a/core/src/components/components.spec-utils.ts b/core/src/components/components.spec-utils.ts
index 803936d4b2..c796a4dca7 100644
--- a/core/src/components/components.spec-utils.ts
+++ b/core/src/components/components.spec-utils.ts
@@ -1,3 +1,5 @@
+import type {Directive} from '../types';
+
 /**
  * Utility method to extract all attributes from a node element
  *
@@ -11,3 +13,55 @@ export function getAttributes(node: HTMLElement) {
 	}
 	return attributes;
 }
+
+/**
+ * Utility method to register a directive to a fake dom element and send an event.
+ * @param directive - the directive to attach
+ * @param args - the args of the directive
+ * @param sendEvent - the event dispatcher function
+ * @param nodeType - the type of the DOM element to create
+ * @param destroyAfterEvent - automatically destroy the directive after use
+ * @returns the element and the destroy reference
+ */
+export function attachDirectiveAndSendEvent<T = void>(
+	directive: Directive<T>,
+	args: T,
+	sendEvent: (node: HTMLElement) => void,
+	nodeType: string = 'div',
+	destroyAfterEvent = true,
+): {element: HTMLElement; destroy: void | {destroy?: () => void}} {
+	const element = document.createElement(nodeType);
+	const destroy = directive(element, args);
+	sendEvent(element);
+	if (destroyAfterEvent) {
+		destroy?.destroy?.();
+	}
+	return {
+		element,
+		destroy,
+	};
+}
+
+/**
+ * Utility method to register a directive to a fake button and click on it.
+ *
+ * @param directive - the directive to attach
+ */
+export function attachDirectiveAndClick(directive: Directive<void>): void;
+/**
+ * Utility method to register a directive to a fake button and click on it.
+ *
+ * @param directive - the directive to attach
+ * @param args - the args of the directive
+ */
+export function attachDirectiveAndClick<T = void>(directive: Directive<T>, args: T): void;
+
+/**
+ * Utility method to register a directive to a fake button and click on it.
+ *
+ * @param directive - the directive to attach
+ * @param args - the args of the directive
+ */
+export function attachDirectiveAndClick<T = void>(directive: Directive<T>, args?: T) {
+	attachDirectiveAndSendEvent(directive, args!, (node) => node.click(), 'button');
+}
diff --git a/core/src/components/modal/modal.spec.ts b/core/src/components/modal/modal.spec.ts
index 5ff3c32eba..eff1a7ced9 100644
--- a/core/src/components/modal/modal.spec.ts
+++ b/core/src/components/modal/modal.spec.ts
@@ -1,5 +1,6 @@
 import {describe, expect, test, beforeEach} from 'vitest';
 import {createModal, modalCloseButtonClick, modalOutsideClick} from './modal';
+import {attachDirectiveAndClick} from '../components.spec-utils';
 
 describe('modal', () => {
 	const noopTransition = async () => {};
@@ -68,7 +69,7 @@ describe('modal', () => {
 		});
 		const directive = modal.directives.modalDirective(element);
 		const promise = modal.api.open();
-		modal.actions.closeButtonClick({} as any as MouseEvent);
+		attachDirectiveAndClick(modal.directives.closeButtonDirective);
 		const result = await promise;
 		expect(result).toBe(modalCloseButtonClick);
 		directive?.destroy?.();
@@ -84,7 +85,7 @@ describe('modal', () => {
 		});
 		const directive = modal.directives.modalDirective(element);
 		const promise = modal.api.open();
-		modal.actions.modalClick({currentTarget: element, target: element} as any as MouseEvent);
+		element.click();
 		const result = await promise;
 		expect(result).toBe(modalOutsideClick);
 		directive?.destroy?.();
@@ -99,7 +100,7 @@ describe('modal', () => {
 		let settled = false;
 		const promise = modal.api.open();
 		// should not close the modal:
-		modal.actions.modalClick({currentTarget: element, target: element} as any as MouseEvent);
+		element.click();
 		void promise.finally(() => (settled = true));
 		await new Promise((resolve) => setTimeout(resolve, 100));
 		directive?.destroy?.();
diff --git a/core/src/components/modal/modal.ts b/core/src/components/modal/modal.ts
index 83799adc6c..ccf9d97d0d 100644
--- a/core/src/components/modal/modal.ts
+++ b/core/src/components/modal/modal.ts
@@ -237,26 +237,6 @@ export interface ModalApi {
 	patch: ModalWidget['patch'];
 }
 
-/**
- * Actions of the modal widget.
- */
-export interface ModalActions {
-	/**
-	 * Action to be called when the user clicks on the close button. It closes the modal with the {@link modalCloseButtonClick} result.
-	 * @param event - mouse event
-	 */
-	closeButtonClick(event: Pick<MouseEvent, never>): void;
-
-	/**
-	 * Action to be called when the user clicks on the modal DOM element (which is supposed to have the size of the full viewport).
-	 * If the click is not done on a descendant of the modal DOM element, it is considered to be done outside the modal
-	 * and, depending on the value of the {@link ModalProps.closeOnOutsideClick|closeOnOutsideClick} prop, the modal is or isn't closed
-	 * (with the {@link modalOutsideClick} result).
-	 * @param event - mouse event
-	 */
-	modalClick(event: Pick<MouseEvent, 'target' | 'currentTarget'>): void;
-}
-
 /**
  * Directives of the modal widget.
  */
@@ -294,7 +274,7 @@ export interface ModalDirectives {
 /**
  * Modal widget.
  */
-export type ModalWidget = Widget<ModalProps, ModalState, ModalApi, ModalActions, ModalDirectives>;
+export type ModalWidget = Widget<ModalProps, ModalState, ModalApi, object, ModalDirectives>;
 
 const defaultConfig: ModalProps = {
 	animated: true,
@@ -453,7 +433,7 @@ export function createModal(config$?: PropsConfig<ModalProps>): ModalWidget {
 			'aria-label': ariaCloseButtonLabel$,
 		},
 		events: {
-			click: res.actions.closeButtonClick,
+			click: () => close(modalCloseButtonClick),
 		},
 	}));
 
@@ -468,7 +448,11 @@ export function createModal(config$?: PropsConfig<ModalProps>): ModalWidget {
 			class: className$,
 		},
 		events: {
-			click: res.actions.modalClick,
+			click: (event) => {
+				if (event.currentTarget === event.target && closeOnOutsideClick$()) {
+					close(modalOutsideClick);
+				}
+			},
 		},
 	}));
 
@@ -523,16 +507,7 @@ export function createModal(config$?: PropsConfig<ModalProps>): ModalWidget {
 			},
 			patch,
 		},
-		actions: {
-			modalClick(event) {
-				if (event.currentTarget === event.target && closeOnOutsideClick$()) {
-					close(modalOutsideClick);
-				}
-			},
-			closeButtonClick() {
-				close(modalCloseButtonClick);
-			},
-		},
+		actions: {},
 	};
 
 	return res;
diff --git a/core/src/components/pagination/pagination.spec.ts b/core/src/components/pagination/pagination.spec.ts
index 9f3c19536d..ae814a1cb2 100644
--- a/core/src/components/pagination/pagination.spec.ts
+++ b/core/src/components/pagination/pagination.spec.ts
@@ -3,6 +3,7 @@ import {beforeEach, describe, expect, test, vi} from 'vitest';
 import type {PaginationState, PaginationWidget} from './pagination';
 import {createPagination, getPaginationDefaultConfig} from './pagination';
 import {assign} from '../../../../common/utils';
+import {attachDirectiveAndClick} from '../components.spec-utils';
 
 describe(`Pagination`, () => {
 	let pagination: PaginationWidget;
@@ -78,19 +79,19 @@ describe(`Pagination`, () => {
 		const pages = Array.from({length: 20}, (_, index) => index + 1);
 		const pagesHrefs = Array.from({length: 20}, (_, __) => `#`);
 
-		pagination.actions.first();
+		attachDirectiveAndClick(pagination.directives.pageFirst);
 		expect(state).toStrictEqual(assign(expectedState, {page: 1, pageCount: 20, pagesLabel, nextDisabled: false, pages, pagesHrefs}));
 
-		pagination.actions.next();
+		attachDirectiveAndClick(pagination.directives.pageNext);
 		expect(state).toStrictEqual(assign(expectedState, {page: 2, previousDisabled: false, ariaLiveLabelText: 'Current page is 2'}));
 
-		pagination.actions.select(5);
+		attachDirectiveAndClick(pagination.directives.pageLink, {page: 5});
 		expect(state).toStrictEqual(assign(expectedState, {page: 5, ariaLiveLabelText: 'Current page is 5'}));
 
-		pagination.actions.last();
+		attachDirectiveAndClick(pagination.directives.pageLast);
 		expect(state).toStrictEqual(assign(expectedState, {page: 20, nextDisabled: true, ariaLiveLabelText: 'Current page is 20'}));
 
-		pagination.actions.previous();
+		attachDirectiveAndClick(pagination.directives.pagePrev);
 		expect(state).toStrictEqual(assign(expectedState, {page: 19, nextDisabled: false, ariaLiveLabelText: 'Current page is 19'}));
 	});
 
@@ -116,7 +117,7 @@ describe(`Pagination`, () => {
 		};
 		expect(state).toStrictEqual(expectedState);
 
-		pagination.actions.next();
+		attachDirectiveAndClick(pagination.directives.pageNext);
 		expectedState = assign(expectedState, {
 			page: 4,
 			directionsHrefs: {
@@ -127,7 +128,7 @@ describe(`Pagination`, () => {
 		});
 		expect(state).toStrictEqual(expectedState);
 
-		pagination.actions.next();
+		attachDirectiveAndClick(pagination.directives.pageNext);
 		expectedState = assign(expectedState, {
 			page: 5,
 			nextDisabled: true,
@@ -139,7 +140,7 @@ describe(`Pagination`, () => {
 		});
 		expect(state).toStrictEqual(expectedState);
 
-		pagination.actions.first();
+		attachDirectiveAndClick(pagination.directives.pageFirst);
 		expectedState = assign(expectedState, {
 			page: 1,
 			nextDisabled: false,
@@ -315,7 +316,7 @@ describe(`Pagination`, () => {
 		pagination.patch({onPageChange: mock});
 		pagination.patch({collectionSize: 70, page: 4});
 		expect(mock).not.toHaveBeenCalled();
-		pagination.actions.previous();
+		attachDirectiveAndClick(pagination.directives.pagePrev);
 		expect(mock).toHaveBeenCalledTimes(1);
 		expect(mock).toHaveBeenCalledWith(3);
 		mock.mockRestore();
diff --git a/core/src/components/pagination/pagination.ts b/core/src/components/pagination/pagination.ts
index 28168130cc..cda30291b6 100644
--- a/core/src/components/pagination/pagination.ts
+++ b/core/src/components/pagination/pagination.ts
@@ -271,28 +271,28 @@ export interface PaginationState extends PaginationCommonPropsAndState {
 	ariaLiveLabelText: string;
 }
 
-export interface PaginationActions {
+export interface PaginationApi {
 	/**
 	 * To "go" to a specific page
 	 * @param page - The page number to select
 	 */
-	select(page: number, event?: MouseEvent): void;
+	select(page: number): void;
 	/**
 	 * To "go" to the first page
 	 */
-	first(event?: MouseEvent): void;
+	first(): void;
 	/**
 	 * To "go" to the previous page
 	 */
-	previous(event?: MouseEvent): void;
+	previous(): void;
 	/**
 	 * To "go" to the next page
 	 */
-	next(event?: MouseEvent): void;
+	next(): void;
 	/**
 	 * To "go" to the last page
 	 */
-	last(event?: MouseEvent): void;
+	last(): void;
 }
 
 export interface PaginationDirectives {
@@ -325,7 +325,7 @@ export interface PaginationDirectives {
 	pageLast: Directive;
 }
 
-export type PaginationWidget = Widget<PaginationProps, PaginationState, object, PaginationActions, PaginationDirectives>;
+export type PaginationWidget = Widget<PaginationProps, PaginationState, PaginationApi, object, PaginationDirectives>;
 
 const PAGE_LINK_DEFAULT = '#';
 
@@ -463,19 +463,14 @@ export function createPagination(config?: PropsConfig<PaginationProps>): Paginat
 	 * For navigation outside current browser tab let the default behavior, without updating the page number;
 	 * @param pageNumber current page number
 	 * @param event UI event triggered when page changed
-	 * @param pageNavigationHandler change handler callback for navigation elements
 	 */
-	function handleNavigation(pageNumber: number, event?: MouseEvent, pageNavigationHandler?: (pN: number) => number) {
+	function handleNavigation(pageNumber: number, event?: MouseEvent) {
 		if (pagesHrefs$()[pageNumber - 1] === PAGE_LINK_DEFAULT) {
 			event?.preventDefault();
 		}
 		if (!event || !(event.ctrlKey || event.metaKey)) {
 			event?.preventDefault();
-			if (pageNavigationHandler) {
-				page$.update(pageNavigationHandler);
-			} else {
-				page$.set(pageNumber);
-			}
+			page$.set(pageNumber);
 		}
 	}
 
@@ -498,54 +493,49 @@ export function createPagination(config?: PropsConfig<PaginationProps>): Paginat
 			...stateProps,
 		}),
 		patch,
-		actions: {
+		actions: {},
+		api: {
 			/**
 			 * Set the current page pageNumber (starting from 1)
 			 * @param pageNumber - Current page number to set.
 			 * Value is normalized between 1 and the number of page
-			 * @param event UI event that triggered the select
 			 */
-			select(pageNumber: number, event?: MouseEvent) {
-				handleNavigation(pageNumber, event);
+			select(pageNumber: number) {
+				page$.set(pageNumber);
 			},
 
 			/**
 			 * Select the first page
-			 * @param event Event triggering the action
 			 */
-			first(event?: MouseEvent) {
-				handleNavigation(1, event);
+			first() {
+				page$.set(1);
 			},
 
 			/**
 			 * Select the previous page
-			 * @param event Event triggering the action
 			 */
-			previous(event?: MouseEvent) {
-				handleNavigation(page$() - 1, event, (page) => page - 1);
+			previous() {
+				page$.update((p) => p - 1);
 			},
 
 			/**
 			 * Select the next page
-			 * @param event Event triggering the action
 			 */
-			next(event?: MouseEvent) {
-				handleNavigation(page$() + 1, event, (page) => page + 1);
+			next() {
+				page$.update((p) => p + 1);
 			},
 
 			/**
 			 * Select the last page
-			 * @param event Event triggering the action
 			 */
-			last(event?: MouseEvent) {
-				handleNavigation(pageCount$(), event);
+			last() {
+				page$.set(pageCount$());
 			},
 		},
-		api: {},
 		directives: {
 			pageLink: createAttributesDirective((pageLinkContext$: ReadableSignal<{page: number}>) => ({
 				events: {
-					click: (e) => widget.actions.select(pageLinkContext$().page, e),
+					click: (e) => handleNavigation(pageLinkContext$().page, e),
 				},
 				attributes: {
 					'aria-current': computed(() => (page$() === pageLinkContext$().page ? 'page' : undefined)),
@@ -560,7 +550,7 @@ export function createPagination(config?: PropsConfig<PaginationProps>): Paginat
 			})),
 			pageFirst: createAttributesDirective(() => ({
 				events: {
-					click: (e) => widget.actions.first(e),
+					click: (e) => handleNavigation(1, e),
 				},
 				attributes: {
 					'aria-label': ariaFirstLabel$,
@@ -574,7 +564,7 @@ export function createPagination(config?: PropsConfig<PaginationProps>): Paginat
 			})),
 			pagePrev: createAttributesDirective(() => ({
 				events: {
-					click: (e) => widget.actions.previous(e),
+					click: (e) => handleNavigation(page$() - 1, e),
 				},
 				attributes: {
 					'aria-label': ariaPreviousLabel$,
@@ -588,7 +578,7 @@ export function createPagination(config?: PropsConfig<PaginationProps>): Paginat
 			})),
 			pageNext: createAttributesDirective(() => ({
 				events: {
-					click: (e) => widget.actions.next(e),
+					click: (e) => handleNavigation(page$() + 1, e),
 				},
 				attributes: {
 					'aria-label': ariaNextLabel$,
@@ -602,7 +592,7 @@ export function createPagination(config?: PropsConfig<PaginationProps>): Paginat
 			})),
 			pageLast: createAttributesDirective(() => ({
 				events: {
-					click: (e) => widget.actions.last(e),
+					click: (e) => handleNavigation(pageCount$(), e),
 				},
 				attributes: {
 					'aria-label': ariaLastLabel$,
diff --git a/core/src/components/rating/rating.spec.ts b/core/src/components/rating/rating.spec.ts
index 4228eb796e..4b2da05df7 100644
--- a/core/src/components/rating/rating.spec.ts
+++ b/core/src/components/rating/rating.spec.ts
@@ -6,14 +6,13 @@ import type {WidgetState} from '../../types';
 import {directiveAttributes} from '../../utils/directive';
 import type {RatingProps, RatingWidget} from './rating';
 import {createRating} from './rating';
-import {getAttributes} from '../components.spec-utils';
+import {attachDirectiveAndClick, attachDirectiveAndSendEvent, getAttributes} from '../components.spec-utils';
 
 function keyboardEvent(key: string): KeyboardEvent {
-	return {
-		key,
-		preventDefault() {},
-		stopPropagation() {},
-	} as KeyboardEvent;
+	const keyboardEvent = new KeyboardEvent('keydown', {key});
+	vi.spyOn(keyboardEvent, 'preventDefault');
+	vi.spyOn(keyboardEvent, 'stopPropagation');
+	return keyboardEvent;
 }
 
 describe(`Rating`, () => {
@@ -344,8 +343,7 @@ describe(`Rating`, () => {
 			expect(hovers).toEqual([]);
 			expect(leaves).toEqual([]);
 
-			// hover 2
-			rating.actions.hover(2);
+			attachDirectiveAndSendEvent(rating.directives.starDirective, {index: 1}, (node) => node.dispatchEvent(new Event('mouseenter')));
 			expect(hovers).toEqual([2]);
 			expect(leaves).toEqual([]);
 			expect(state.visibleRating).toBe(2);
@@ -361,7 +359,7 @@ describe(`Rating`, () => {
 			]);
 
 			// hover 1
-			rating.actions.hover(1);
+			attachDirectiveAndSendEvent(rating.directives.starDirective, {index: 0}, (node) => node.dispatchEvent(new Event('mouseenter')));
 			expect(hovers).toEqual([2, 1]);
 			expect(leaves).toEqual([]);
 			expect(state.visibleRating).toBe(1);
@@ -377,7 +375,7 @@ describe(`Rating`, () => {
 			]);
 
 			// leave
-			rating.actions.leave();
+			attachDirectiveAndSendEvent(rating.directives.containerDirective, undefined, (node) => node.dispatchEvent(new Event('mouseleave')));
 			expect(hovers).toEqual([2, 1]);
 			expect(leaves).toEqual([1]);
 			expect(state.visibleRating).toBe(0.75);
@@ -385,7 +383,7 @@ describe(`Rating`, () => {
 			expect(stateChangeCount).toBe(5);
 
 			// hover -1 -> ignored
-			rating.actions.hover(-1);
+			attachDirectiveAndSendEvent(rating.directives.starDirective, {index: -1}, (node) => node.dispatchEvent(new Event('mouseenter')));
 			expect(hovers).toEqual([2, 1]);
 			expect(leaves).toEqual([1]);
 			expect(state.visibleRating).toBe(0.75);
@@ -393,7 +391,7 @@ describe(`Rating`, () => {
 			expect(stateChangeCount).toBe(5);
 
 			// hover 5 -> ignored
-			rating.actions.hover(5);
+			attachDirectiveAndSendEvent(rating.directives.starDirective, {index: 4}, (node) => node.dispatchEvent(new Event('mouseenter')));
 			expect(hovers).toEqual([2, 1]);
 			expect(leaves).toEqual([1]);
 			expect(state.visibleRating).toBe(0.75);
@@ -455,21 +453,21 @@ describe(`Rating`, () => {
 			expect(state).toMatchObject({rating: 0, maxRating: 10, resettable: true});
 			expect(stateChangeCount).toBe(1);
 
-			rating.actions.click(3);
+			attachDirectiveAndClick(rating.directives.starDirective, {index: 2});
 			expect(state).toMatchObject({rating: 3});
 			expect(stateChangeCount).toBe(2);
 
-			rating.actions.click(0);
-			expect(state).toMatchObject({rating: 3});
-			expect(stateChangeCount).toBe(2);
+			attachDirectiveAndClick(rating.directives.starDirective, {index: 0});
+			expect(state).toMatchObject({rating: 1});
+			expect(stateChangeCount).toBe(3);
 
-			rating.actions.click(-1);
-			expect(state).toMatchObject({rating: 3});
-			expect(stateChangeCount).toBe(2);
+			attachDirectiveAndClick(rating.directives.starDirective, {index: -1});
+			expect(state).toMatchObject({rating: 1});
+			expect(stateChangeCount).toBe(3);
 
-			rating.actions.click(11);
-			expect(state).toMatchObject({rating: 3});
-			expect(stateChangeCount).toBe(2);
+			attachDirectiveAndClick(rating.directives.starDirective, {index: 11});
+			expect(state).toMatchObject({rating: 1});
+			expect(stateChangeCount).toBe(3);
 		});
 
 		test(`should be 'resettable' or not`, () => {
@@ -477,7 +475,7 @@ describe(`Rating`, () => {
 			expect(state).toMatchObject({rating: 5, maxRating: 10, resettable: true});
 			expect(stateChangeCount).toBe(2);
 
-			rating.actions.click(5);
+			attachDirectiveAndClick(rating.directives.starDirective, {index: 4});
 			expect(state).toMatchObject({rating: 0});
 			expect(stateChangeCount).toBe(3);
 
@@ -485,7 +483,7 @@ describe(`Rating`, () => {
 			expect(state).toMatchObject({rating: 5, resettable: false});
 			expect(stateChangeCount).toBe(4);
 
-			rating.actions.click(5);
+			attachDirectiveAndClick(rating.directives.starDirective, {index: 4});
 			expect(state).toMatchObject({rating: 5});
 			expect(stateChangeCount).toBe(4);
 		});
@@ -512,7 +510,7 @@ describe(`Rating`, () => {
 			expect(stateChangeCount).toBe(2);
 
 			// user interactions should be ignored
-			rating.actions.click(3);
+			attachDirectiveAndClick(rating.directives.starDirective, {index: 3});
 			expect(state).toMatchObject({rating: 5});
 			expect(stateChangeCount).toBe(2);
 		});
@@ -523,7 +521,7 @@ describe(`Rating`, () => {
 			expect(stateChangeCount).toBe(2);
 
 			// user interactions should be ignored
-			rating.actions.click(3);
+			attachDirectiveAndClick(rating.directives.starDirective, {index: 3});
 			expect(state).toMatchObject({rating: 5});
 			expect(stateChangeCount).toBe(2);
 		});
@@ -532,40 +530,43 @@ describe(`Rating`, () => {
 			rating.patch({rating: 5});
 			expect(state).toMatchObject({disabled: false, readonly: false, rating: 5, maxRating: 10});
 
-			const evt = keyboardEvent('');
-			const preventDefault = vi.spyOn(evt, 'preventDefault');
-			const stopPropagation = vi.spyOn(evt, 'stopPropagation');
+			let evt = keyboardEvent('ArrowLeft');
 
 			// Known keys
-			rating.actions.handleKey({...evt, key: 'ArrowLeft'});
+			attachDirectiveAndSendEvent(rating.directives.containerDirective, undefined, (node) => node.dispatchEvent(evt));
 			expect(state).toMatchObject({rating: 4});
-			expect(preventDefault).toHaveBeenCalledTimes(1);
-			expect(stopPropagation).toHaveBeenCalledTimes(1);
+			expect(evt.preventDefault).toHaveBeenCalledOnce();
+			expect(evt.stopPropagation).toHaveBeenCalledOnce();
 
-			rating.actions.handleKey({...evt, key: 'ArrowDown'});
+			evt = keyboardEvent('ArrowDown');
+			attachDirectiveAndSendEvent(rating.directives.containerDirective, undefined, (node) => node.dispatchEvent(evt));
 			expect(state).toMatchObject({rating: 3});
-			expect(preventDefault).toHaveBeenCalledTimes(2);
-			expect(stopPropagation).toHaveBeenCalledTimes(2);
+			expect(evt.preventDefault).toHaveBeenCalledOnce();
+			expect(evt.stopPropagation).toHaveBeenCalledOnce();
 
-			rating.actions.handleKey({...evt, key: 'ArrowUp'});
+			evt = keyboardEvent('ArrowUp');
+			attachDirectiveAndSendEvent(rating.directives.containerDirective, undefined, (node) => node.dispatchEvent(evt));
 			expect(state).toMatchObject({rating: 4});
-			expect(preventDefault).toHaveBeenCalledTimes(3);
-			expect(stopPropagation).toHaveBeenCalledTimes(3);
+			expect(evt.preventDefault).toHaveBeenCalledOnce();
+			expect(evt.stopPropagation).toHaveBeenCalledOnce();
 
-			rating.actions.handleKey({...evt, key: 'ArrowRight'});
+			evt = keyboardEvent('ArrowRight');
+			attachDirectiveAndSendEvent(rating.directives.containerDirective, undefined, (node) => node.dispatchEvent(evt));
 			expect(state).toMatchObject({rating: 5});
-			expect(preventDefault).toHaveBeenCalledTimes(4);
-			expect(stopPropagation).toHaveBeenCalledTimes(4);
+			expect(evt.preventDefault).toHaveBeenCalledOnce();
+			expect(evt.stopPropagation).toHaveBeenCalledOnce();
 
-			rating.actions.handleKey({...evt, key: 'Home'});
+			evt = keyboardEvent('Home');
+			attachDirectiveAndSendEvent(rating.directives.containerDirective, undefined, (node) => node.dispatchEvent(evt));
 			expect(state).toMatchObject({rating: 0});
-			expect(preventDefault).toHaveBeenCalledTimes(5);
-			expect(stopPropagation).toHaveBeenCalledTimes(5);
+			expect(evt.preventDefault).toHaveBeenCalledOnce();
+			expect(evt.stopPropagation).toHaveBeenCalledOnce();
 
-			rating.actions.handleKey({...evt, key: 'End'});
+			evt = keyboardEvent('End');
+			attachDirectiveAndSendEvent(rating.directives.containerDirective, undefined, (node) => node.dispatchEvent(evt));
 			expect(state).toMatchObject({rating: 10});
-			expect(preventDefault).toHaveBeenCalledTimes(6);
-			expect(stopPropagation).toHaveBeenCalledTimes(6);
+			expect(evt.preventDefault).toHaveBeenCalledOnce();
+			expect(evt.stopPropagation).toHaveBeenCalledOnce();
 		});
 
 		test(`should ignore unknown keyboard events`, () => {
@@ -577,7 +578,7 @@ describe(`Rating`, () => {
 			const stopPropagation = vi.spyOn(evt, 'stopPropagation');
 
 			// Unknown keys
-			rating.actions.handleKey(evt);
+			attachDirectiveAndSendEvent(rating.directives.containerDirective, undefined, (node) => node.dispatchEvent(evt));
 			expect(state).toMatchObject({rating: 5});
 			expect(preventDefault).not.toHaveBeenCalled();
 			expect(stopPropagation).not.toHaveBeenCalled();
@@ -587,23 +588,21 @@ describe(`Rating`, () => {
 			rating.patch({rating: 5});
 			expect(state).toMatchObject({disabled: false, readonly: false, rating: 5, maxRating: 10});
 
-			const evt = keyboardEvent('');
-			const preventDefault = vi.spyOn(evt, 'preventDefault');
-			const stopPropagation = vi.spyOn(evt, 'stopPropagation');
+			const evt = keyboardEvent('ArrowLeft');
 
 			// Disabled
 			rating.patch({readonly: false, disabled: true});
-			rating.actions.handleKey({...evt, key: 'ArrowLeft'});
+			attachDirectiveAndSendEvent(rating.directives.containerDirective, undefined, (node) => node.dispatchEvent(evt));
 			expect(state).toMatchObject({rating: 5});
-			expect(preventDefault).toHaveBeenCalledTimes(0);
-			expect(stopPropagation).toHaveBeenCalledTimes(0);
+			expect(evt.preventDefault).toHaveBeenCalledTimes(0);
+			expect(evt.stopPropagation).toHaveBeenCalledTimes(0);
 
 			// Readonly
 			rating.patch({readonly: true, disabled: false});
-			rating.actions.handleKey({...evt, key: 'ArrowLeft'});
+			attachDirectiveAndSendEvent(rating.directives.containerDirective, undefined, (node) => node.dispatchEvent(evt));
 			expect(state).toMatchObject({rating: 5});
-			expect(preventDefault).toHaveBeenCalledTimes(0);
-			expect(stopPropagation).toHaveBeenCalledTimes(0);
+			expect(evt.preventDefault).toHaveBeenCalledTimes(0);
+			expect(evt.stopPropagation).toHaveBeenCalledTimes(0);
 		});
 
 		test(`should follow updated default config as long as it is not overridden`, () => {
@@ -671,9 +670,10 @@ describe(`Rating`, () => {
 			});
 			const unsubscribe = ratingWidget.stores.visibleRating$.subscribe((value) => visibleRatingValues.push(value));
 			expect(visibleRatingValues).toEqual([2]);
-			ratingWidget.actions.hover(8);
+
+			attachDirectiveAndSendEvent(ratingWidget.directives.starDirective, {index: 7}, (node) => node.dispatchEvent(new Event('mouseenter')));
 			expect(visibleRatingValues).toEqual([2, 8]);
-			ratingWidget.actions.click(8);
+			attachDirectiveAndClick(ratingWidget.directives.starDirective, {index: 7});
 			expect(values).toEqual([8]);
 			unsubscribe();
 		});
diff --git a/core/src/components/rating/rating.ts b/core/src/components/rating/rating.ts
index 7bc8a37a25..1c0151ed9d 100644
--- a/core/src/components/rating/rating.ts
+++ b/core/src/components/rating/rating.ts
@@ -163,39 +163,28 @@ export interface RatingState extends RatingCommonPropsAndState {
 	stars: StarContext[];
 }
 
-export interface RatingActions {
+export interface RatingApi {
 	/**
-	 * Method to be used when a star is clicked.
+	 * Sets the rating value.
 	 *
-	 * To be used in the onclick event of a star
 	 * @param index - Star index, starting from 1
 	 */
-	click(index: number): void;
+	setRating(index: number): void;
 
 	/**
-	 * Method to be used when the mouse enter in a star.
+	 * Sets the hovered rating value.
 	 *
-	 * To be used in the onmouseenter of a star
 	 * @param index - Star index, starting from 1
 	 */
-	hover(index: number): void;
+	setHoveredRating(index: number): void;
 
 	/**
-	 * Method to be used when the mouse leave the widget.
-	 *
-	 * To be used in the onmouseleave of the rating container
+	 * Leave the rating, resetting the visible rating to the rating value and triggering the onLeave callback
 	 */
 	leave(): void;
-
-	/**
-	 * Method to be used to handle the keyboard.
-	 *
-	 * To be used in the onkeydown of the rating container
-	 */
-	handleKey(event: KeyboardEvent): void;
 }
 
-export type RatingWidget = Widget<RatingProps, RatingState, object, RatingActions, RatingDirectives>;
+export type RatingWidget = Widget<RatingProps, RatingState, RatingApi, object, RatingDirectives>;
 
 const defaultConfig: RatingProps = {
 	rating: 0,
@@ -265,7 +254,7 @@ export function createRating(config?: PropsConfig<RatingProps>): RatingWidget {
 	// clean inputs adjustment to valid range
 	const tabindex$ = computed(() => (disabled$() ? -1 : _dirtyTabindex$()));
 
-	const rating$ = bindableProp(_dirtyRating$, onRatingChange$, (dirtyRating) => clamp(dirtyRating, maxRating$()));
+	const rating$ = bindableProp(_dirtyRating$, onRatingChange$, (dirtyRating) => clamp(dirtyRating, maxRating$(), 0));
 
 	// internal inputs
 	const _hoveredRating$ = writable(0);
@@ -296,57 +285,42 @@ export function createRating(config?: PropsConfig<RatingProps>): RatingWidget {
 			...stateProps,
 		}),
 		patch,
-		actions: {
-			click: (index: number) => {
-				if (interactive$() && index > 0 && index <= maxRating$()) {
-					rating$.update((rating) => (rating === index && resettable$() ? 0 : index));
-				}
-			},
-			hover: (index: number) => {
-				if (interactive$() && index > 0 && index <= maxRating$()) {
-					_hoveredRating$.set(index);
-					onHover$()(index);
-				}
-			},
-			leave: () => {
-				if (interactive$()) {
-					onLeave$()(_hoveredRating$());
-					_hoveredRating$.set(0);
-				}
-			},
-			handleKey(event: KeyboardEvent) {
-				if (interactive$()) {
-					const {key} = event;
-					switch (key) {
-						case 'ArrowLeft':
-						case 'ArrowDown':
-							rating$.update((rating) => rating - 1);
-							break;
-						case 'ArrowRight':
-						case 'ArrowUp':
-							rating$.update((rating) => rating + 1);
-							break;
-						case 'Home':
-						case 'PageDown':
-							rating$.set(0);
-							break;
-						case 'End':
-						case 'PageUp':
-							rating$.set(maxRating$());
-							break;
-						default:
-							return;
-					}
-					event.preventDefault();
-					event.stopPropagation();
-				}
-			},
-		},
+		actions: {},
 		directives: {
 			containerDirective: createAttributesDirective(() => ({
 				events: {
-					keydown: (e) => widget.actions.handleKey(e),
-					mouseleave: () => widget.actions.leave(),
+					keydown: (event: KeyboardEvent) => {
+						if (interactive$()) {
+							const {key} = event;
+							switch (key) {
+								case 'ArrowLeft':
+								case 'ArrowDown':
+									rating$.update((rating) => rating - 1);
+									break;
+								case 'ArrowRight':
+								case 'ArrowUp':
+									rating$.update((rating) => rating + 1);
+									break;
+								case 'Home':
+								case 'PageDown':
+									rating$.set(0);
+									break;
+								case 'End':
+								case 'PageUp':
+									rating$.set(maxRating$());
+									break;
+								default:
+									return;
+							}
+							event.preventDefault();
+							event.stopPropagation();
+						}
+					},
+					mouseleave: () => {
+						if (interactive$()) {
+							widget.api.leave();
+						}
+					},
 				},
 				attributes: {
 					role: 'slider',
@@ -368,8 +342,19 @@ export function createRating(config?: PropsConfig<RatingProps>): RatingWidget {
 			starDirective: createAttributesDirective((starContext$: ReadableSignal<{index: number}>) => {
 				return {
 					events: {
-						mouseenter: () => widget.actions.hover(starContext$().index + 1),
-						click: () => widget.actions.click(starContext$().index + 1),
+						mouseenter: () => {
+							const index = starContext$().index + 1;
+							if (interactive$() && index > 0 && index <= maxRating$()) {
+								_hoveredRating$.set(index);
+								onHover$()(index);
+							}
+						},
+						click: () => {
+							const index = starContext$().index + 1;
+							if (interactive$() && index > 0 && index <= maxRating$()) {
+								rating$.update((rating) => (rating === index && resettable$() ? 0 : index));
+							}
+						},
 					},
 					styles: {
 						cursor: computed(() => (interactive$() ? 'pointer' : 'default')),
@@ -380,7 +365,19 @@ export function createRating(config?: PropsConfig<RatingProps>): RatingWidget {
 				};
 			}),
 		},
-		api: {},
+		api: {
+			setRating(index: number) {
+				rating$.set(index);
+			},
+			setHoveredRating(index: number) {
+				onHover$()(index);
+				_hoveredRating$.set(index);
+			},
+			leave() {
+				onLeave$()(visibleRating$());
+				_hoveredRating$.set(0);
+			},
+		},
 	};
 
 	return widget;
diff --git a/core/src/components/select/select.spec.ts b/core/src/components/select/select.spec.ts
index 07883eb912..7b33505d72 100644
--- a/core/src/components/select/select.spec.ts
+++ b/core/src/components/select/select.spec.ts
@@ -1,7 +1,6 @@
 import {computed, type ReadableSignal} from '@amadeus-it-group/tansu';
 import {beforeEach, describe, expect, test, vi} from 'vitest';
 import {assign} from '../../../../common/utils';
-import {addEvent} from '../../utils/internal/dom';
 import type {ItemContext, SelectProps, SelectState, SelectWidget} from './select';
 import {createSelect, getSelectDefaultConfig} from './select';
 
@@ -187,7 +186,10 @@ describe(`Select model`, () => {
 					visibleItems: expectedState.visibleItems.filter(({item}) => item.includes(text)),
 				});
 
-				selectWidget.actions.onInput({target: {value: text}});
+				const input = document.createElement('input');
+				const directiveDestroy = selectWidget.directives.inputDirective(input);
+				input.value = text;
+				input.dispatchEvent(new Event('input'));
 				expect(getState(), 'state after text filtering').toStrictEqual(expectedState);
 
 				text = 'Bb';
@@ -195,8 +197,10 @@ describe(`Select model`, () => {
 					filterText: text,
 				});
 
-				selectWidget.actions.onInput({target: {value: text}});
+				input.value = text;
+				input.dispatchEvent(new Event('input'));
 				expect(getState(), 'filtering with different case').toEqual(expectedState);
+				directiveDestroy?.destroy?.();
 			});
 
 			test('typing', () => {
@@ -204,7 +208,11 @@ describe(`Select model`, () => {
 				const expectedState = getState();
 				const mock = vi.fn().mockImplementation(selectProps.onFilterTextChange!);
 				selectWidget.patch({onFilterTextChange: mock});
-				selectWidget.actions.onInput({target: {value: 'aa'}});
+
+				const input = document.createElement('input');
+				const directiveDestroy = selectWidget.directives.inputDirective(input);
+				input.value = 'aa';
+				input.dispatchEvent(new Event('input'));
 				assign(expectedState, {
 					open: true,
 					filterText: 'aa',
@@ -216,9 +224,11 @@ describe(`Select model`, () => {
 				});
 				expect(getState()).toStrictEqual(expectedState);
 				expect(mock).toHaveBeenCalledWith('aa');
-				selectWidget.actions.onInput({target: {value: 'aa'}});
+				input.value = 'aa';
+				input.dispatchEvent(new Event('input'));
 				expect(mock).toHaveBeenCalledTimes(1);
 				vi.resetAllMocks();
+				directiveDestroy?.destroy?.();
 			});
 
 			test(`Functionnal api for highlighted item`, () => {
@@ -301,12 +311,12 @@ describe(`Select model`, () => {
 					const selectWidget = testCtx.selectWidget;
 					const hasFocusDirective = selectWidget.directives.hasFocusDirective(container)!;
 					const containerDirective = selectWidget.directives.inputContainerDirective(container);
-					const removeInputEvent = addEvent(input, 'keydown', selectWidget.actions.onInputKeydown);
+					const inputDirective = selectWidget.directives.inputDirective(input);
 
 					return () => {
 						containerDirective?.destroy?.();
 						hasFocusDirective.destroy?.();
-						removeInputEvent();
+						inputDirective?.destroy?.();
 					};
 				});
 
@@ -438,16 +448,16 @@ describe(`Select model`, () => {
 
 					const hasFocusDirective = selectWidget.directives.hasFocusDirective(container)!;
 					const containerDirective = selectWidget.directives.inputContainerDirective(container);
-					const removeInputEvent = addEvent(input, 'keydown', selectWidget.actions.onInputKeydown);
-					const removebadgeAEvent = addEvent(badgeA, 'keydown', (e) => selectWidget.actions.onBadgeKeydown(e, 'aa'));
-					const removebadgeBEvent = addEvent(badgeB, 'keydown', (e) => selectWidget.actions.onBadgeKeydown(e, 'bb'));
+					const inputDirective = selectWidget.directives.inputDirective(input);
+					const badgeADirective = selectWidget.directives.badgeAttributesDirective(badgeA, testCtx.getState().visibleItems[0]);
+					const badgeBDirective = selectWidget.directives.badgeAttributesDirective(badgeB, testCtx.getState().visibleItems[1]);
 
 					return () => {
 						containerDirective?.destroy?.();
 						hasFocusDirective.destroy?.();
-						removeInputEvent();
-						removebadgeAEvent();
-						removebadgeBEvent();
+						inputDirective?.destroy?.();
+						badgeADirective?.destroy?.();
+						badgeBDirective?.destroy?.();
 					};
 				});
 
diff --git a/core/src/components/select/select.ts b/core/src/components/select/select.ts
index 6e3f258e85..c28fc63c46 100644
--- a/core/src/components/select/select.ts
+++ b/core/src/components/select/select.ts
@@ -311,37 +311,18 @@ export interface SelectDirectives<Item> {
 	 * A directive that applies all the necessary attributes to the dropdown item
 	 */
 	itemAttributesDirective: Directive<ItemContext<Item>>;
-}
-
-export interface SelectActions<Item> {
-	// Dom methods
-
-	/**
-	 * Method to be plugged to on the 'input' event. The input text will be used as the filter text.
-	 */
-	onInput: (e: {target: any}) => void;
 
 	/**
-	 * Method to be attached to the node element to close a badge on click.
+	 * A directive to be applied to the input
 	 */
-	onRemoveBadgeClick: (event: MouseEvent, item: Item) => void;
-
-	/**
-	 * Method to be plugged to on an keydown event of the main input, in order to control the keyboard interactions with the highlighted item.
-	 * It manages arrow keys to move the highlighted item, or enter to toggle the item.
-	 */
-	onInputKeydown: (event: KeyboardEvent) => void;
-
+	inputDirective: Directive;
 	/**
-	 * Method to be plugged to on an keydown event of a badge container, in order to manage main actions on badges.
-	 *
-	 * @param event - keyboard event
-	 * @param item - corresponding item
+	 * A directive to be applied to a button that closes a badge
 	 */
-	onBadgeKeydown: (event: KeyboardEvent, item: Item) => void;
+	badgeCloseButtonDirective: Directive<ItemContext<Item>>;
 }
 
-export type SelectWidget<Item> = Widget<SelectProps<Item>, SelectState<Item>, SelectApi<Item>, SelectActions<Item>, SelectDirectives<Item>>;
+export type SelectWidget<Item> = Widget<SelectProps<Item>, SelectState<Item>, SelectApi<Item>, object, SelectDirectives<Item>>;
 
 const defaultConfig: SelectProps<any> = {
 	id: undefined,
@@ -533,7 +514,20 @@ export function createSelect<Item>(config?: PropsConfig<SelectProps<Item>>): Sel
 			'au-select-badge': true,
 		},
 		events: {
-			keydown: (e: KeyboardEvent) => widget.actions.onBadgeKeydown(e, itemContext$().item),
+			keydown: (event: KeyboardEvent) => {
+				let keyManaged = false;
+				switch (event.key) {
+					case 'Backspace':
+					case 'Delete': {
+						onRemoveBadge(event, itemContext$().item);
+						keyManaged = true;
+						break;
+					}
+				}
+				if (keyManaged) {
+					event.preventDefault();
+				}
+			},
 		},
 	}));
 
@@ -564,6 +558,79 @@ export function createSelect<Item>(config?: PropsConfig<SelectProps<Item>>): Sel
 		},
 	}));
 
+	const inputDirective = createAttributesDirective(() => ({
+		attributes: {
+			id: id$(),
+			type: 'text',
+			'aria-label': ariaLabel$(),
+			'aria-autocomplete': 'list',
+			autocorrect: 'off',
+			autocapitalize: 'none',
+			autocomplete: 'off',
+		},
+		classNames: {
+			'au-select-input': true,
+		},
+		events: {
+			input: (event: Event) => {
+				const value = (event.target as HTMLInputElement).value;
+				batch(() => {
+					open$.set(value != null && value !== '');
+					filterText$.set(value);
+				});
+			},
+			keydown: ({ctrlKey, key, preventDefault}) => {
+				let keyManaged = true;
+				switch (key) {
+					case 'ArrowDown': {
+						const isOpen = open$();
+						if (isOpen) {
+							if (ctrlKey) {
+								widget.api.highlightLast();
+							} else {
+								widget.api.highlightNext();
+							}
+						} else {
+							widget.api.open();
+							widget.api.highlightFirst();
+						}
+						break;
+					}
+					case 'ArrowUp':
+						if (ctrlKey) {
+							widget.api.highlightFirst();
+						} else {
+							widget.api.highlightPrevious();
+						}
+						break;
+					case 'Enter': {
+						const itemCtx = highlighted$();
+						if (itemCtx) {
+							widget.api.toggleItem(itemCtx.item);
+						}
+						break;
+					}
+					case 'Escape':
+						open$.set(false);
+						break;
+					default:
+						keyManaged = false;
+				}
+				if (keyManaged) {
+					preventDefault();
+				}
+			},
+		},
+	}));
+
+	const badgeCloseButtonDirective = createAttributesDirective((itemContext$: ReadableSignal<ItemContext<Item>>) => ({
+		events: {
+			click: (event: MouseEvent) => {
+				onRemoveBadge(event, itemContext$().item);
+			},
+		},
+	}));
+
 	const widget: SelectWidget<Item> = {
 		...stateStores({
 			id$,
@@ -662,78 +729,10 @@ export function createSelect<Item>(config?: PropsConfig<SelectProps<Item>>): Sel
 			badgeAttributesDirective,
 			menuAttributesDirective,
 			itemAttributesDirective,
+			inputDirective,
+			badgeCloseButtonDirective,
 		},
-		actions: {
-			onInput({target}: {target: HTMLInputElement}) {
-				const value = target.value;
-				batch(() => {
-					open$.set(value != null && value !== '');
-					filterText$.set(value);
-				});
-			},
-
-			onRemoveBadgeClick(event: MouseEvent, item: Item) {
-				onRemoveBadge(event, item);
-			},
-
-			onInputKeydown(e: KeyboardEvent) {
-				const {ctrlKey, key} = e;
-
-				let keyManaged = true;
-				switch (key) {
-					case 'ArrowDown': {
-						const isOpen = open$();
-						if (isOpen) {
-							if (ctrlKey) {
-								widget.api.highlightLast();
-							} else {
-								widget.api.highlightNext();
-							}
-						} else {
-							widget.api.open();
-							widget.api.highlightFirst();
-						}
-						break;
-					}
-					case 'ArrowUp':
-						if (ctrlKey) {
-							widget.api.highlightFirst();
-						} else {
-							widget.api.highlightPrevious();
-						}
-						break;
-					case 'Enter': {
-						const itemCtx = highlighted$();
-						if (itemCtx) {
-							widget.api.toggleItem(itemCtx.item);
-						}
-						break;
-					}
-					case 'Escape':
-						open$.set(false);
-						break;
-					default:
-						keyManaged = false;
-				}
-				if (keyManaged) {
-					e.preventDefault();
-				}
-			},
-			onBadgeKeydown(event: KeyboardEvent, item: Item) {
-				let keyManaged = false;
-				switch (event.key) {
-					case 'Backspace':
-					case 'Delete': {
-						onRemoveBadge(event, item);
-						keyManaged = true;
-						break;
-					}
-				}
-				if (keyManaged) {
-					event.preventDefault();
-				}
-			},
-		},
+		actions: {},
 	};
 
 	return widget;
diff --git a/core/src/components/slider/slider.spec.ts b/core/src/components/slider/slider.spec.ts
index a8c34697bd..9a5eec3f6d 100644
--- a/core/src/components/slider/slider.spec.ts
+++ b/core/src/components/slider/slider.spec.ts
@@ -4,6 +4,7 @@ import {beforeEach, describe, expect, test, vi} from 'vitest';
 import type {HandleDisplayOptions, ProgressDisplayOptions, SliderProps, SliderState, SliderWidget} from './slider';
 import {createSlider} from './slider';
 import {assign} from '../../../../common/utils';
+import {attachDirectiveAndSendEvent} from '../components.spec-utils';
 
 // TODO move to the utils?
 function keyboardEvent(key: string): KeyboardEvent {
@@ -60,6 +61,15 @@ describe(`Slider basic`, () => {
 	let normalizedState$: ReadableSignal<SliderState>;
 	let defConfig: WritableSignal<Partial<SliderProps>>;
 
+	const clickAreaX = (clientX: number) => {
+		attachDirectiveAndSendEvent(slider.directives.clickableAreaDirective, undefined, (node) =>
+			node.dispatchEvent(new MouseEvent('click', {clientX})),
+		);
+	};
+	const useKeyOnHandle = (key: string) => {
+		attachDirectiveAndSendEvent(slider.directives.handleEventsDirective, {item: {id: 0}}, (node) => node.dispatchEvent(keyboardEvent(key)));
+	};
+
 	beforeEach(() => {
 		const sliderElement = document.createElement('div');
 		vi.spyOn(sliderElement, 'getBoundingClientRect').mockReturnValue({x: 10, y: 0, width: 100, height: 4, top: 0, left: 0} as DOMRect);
@@ -425,7 +435,7 @@ describe(`Slider basic`, () => {
 			}),
 		);
 
-		slider.actions.click(new MouseEvent('click', {clientX: 0}));
+		clickAreaX(0);
 
 		expect(normalizedState$()).toStrictEqual(
 			assign(expectedState, {
@@ -511,7 +521,7 @@ describe(`Slider basic`, () => {
 	});
 
 	test(`should set handle to 100 and hide the max label when clicked outside the slider on the right side`, () => {
-		slider.actions.click(new MouseEvent('click', {clientX: 120}));
+		clickAreaX(120);
 
 		const expectedState = defaultState();
 
@@ -546,7 +556,7 @@ describe(`Slider basic`, () => {
 	});
 
 	test(`should set handle to a proper percent when clicked inside the slider`, () => {
-		slider.actions.click(new MouseEvent('click', {clientX: 70}));
+		clickAreaX(70);
 
 		const expectedState = defaultState();
 
@@ -580,7 +590,7 @@ describe(`Slider basic`, () => {
 	});
 
 	test(`should not go below minimum on arrow left and down arrow key stroke`, () => {
-		slider.actions.keydown(keyboardEvent('ArrowDown'), 0);
+		useKeyOnHandle('ArrowDown');
 
 		const expectedState = defaultState();
 
@@ -612,7 +622,7 @@ describe(`Slider basic`, () => {
 			}),
 		);
 
-		slider.actions.keydown(keyboardEvent('ArrowLeft'), 0);
+		useKeyOnHandle('ArrowLeft');
 
 		expect(normalizedState$()).toStrictEqual(expectedState);
 	});
@@ -652,7 +662,7 @@ describe(`Slider basic`, () => {
 			}),
 		);
 
-		slider.actions.keydown(keyboardEvent('ArrowDown'), 0);
+		useKeyOnHandle('ArrowDown');
 
 		expect(normalizedState$()).toStrictEqual(
 			assign(expectedState, {
@@ -681,7 +691,7 @@ describe(`Slider basic`, () => {
 			}),
 		);
 
-		slider.actions.keydown(keyboardEvent('ArrowLeft'), 0);
+		useKeyOnHandle('ArrowLeft');
 
 		expect(normalizedState$()).toStrictEqual(
 			assign(expectedState, {
@@ -716,7 +726,7 @@ describe(`Slider basic`, () => {
 			values: [100],
 		});
 
-		slider.actions.keydown(keyboardEvent('ArrowUp'), 0);
+		useKeyOnHandle('ArrowUp');
 
 		const expectedState = defaultState();
 
@@ -749,7 +759,7 @@ describe(`Slider basic`, () => {
 			}),
 		);
 
-		slider.actions.keydown(keyboardEvent('ArrowRight'), 0);
+		useKeyOnHandle('ArrowRight');
 
 		expect(normalizedState$()).toStrictEqual(expectedState);
 	});
@@ -789,7 +799,7 @@ describe(`Slider basic`, () => {
 			}),
 		);
 
-		slider.actions.keydown(keyboardEvent('ArrowUp'), 0);
+		useKeyOnHandle('ArrowUp');
 
 		expect(normalizedState$()).toStrictEqual(
 			assign(expectedState, {
@@ -818,7 +828,7 @@ describe(`Slider basic`, () => {
 			}),
 		);
 
-		slider.actions.keydown(keyboardEvent('ArrowRight'), 0);
+		useKeyOnHandle('ArrowRight');
 
 		expect(normalizedState$()).toStrictEqual(
 			assign(expectedState, {
@@ -883,7 +893,7 @@ describe(`Slider basic`, () => {
 			}),
 		);
 
-		slider.actions.keydown(keyboardEvent('Home'), 0);
+		useKeyOnHandle('Home');
 
 		expect(normalizedState$()).toStrictEqual(
 			assign(expectedState, {
@@ -949,7 +959,7 @@ describe(`Slider basic`, () => {
 			}),
 		);
 
-		slider.actions.keydown(keyboardEvent('End'), 0);
+		useKeyOnHandle('End');
 
 		expect(normalizedState$()).toStrictEqual(
 			assign(expectedState, {
@@ -996,11 +1006,11 @@ describe(`Slider basic`, () => {
 
 		expect(normalizedState$()).toStrictEqual(expectedState);
 
-		slider.actions.click(new MouseEvent('click', {clientX: 50}));
+		clickAreaX(50);
 
 		expect(normalizedState$()).toStrictEqual(expectedState);
 
-		slider.actions.keydown(keyboardEvent('Home'), 0);
+		useKeyOnHandle('Home');
 
 		expect(normalizedState$()).toStrictEqual(expectedState);
 	});
@@ -1021,11 +1031,11 @@ describe(`Slider basic`, () => {
 
 		expect(normalizedState$()).toStrictEqual(expectedState);
 
-		slider.actions.click(new MouseEvent('click', {clientX: 50}));
+		clickAreaX(50);
 
 		expect(normalizedState$()).toStrictEqual(expectedState);
 
-		slider.actions.keydown(keyboardEvent('Home'), 0);
+		useKeyOnHandle('Home');
 
 		expect(normalizedState$()).toStrictEqual(expectedState);
 	});
@@ -1056,7 +1066,7 @@ describe(`Slider basic`, () => {
 			}),
 		);
 
-		slider.actions.keydown(keyboardEvent('ArrowUp'), 0);
+		useKeyOnHandle('ArrowUp');
 
 		expect(normalizedState$()).toStrictEqual(
 			assign(expectedState, {
@@ -1137,7 +1147,7 @@ describe(`Slider basic`, () => {
 			}),
 		);
 
-		slider.actions.keydown(keyboardEvent('ArrowLeft'), 0);
+		useKeyOnHandle('ArrowLeft');
 
 		expect(normalizedState$()).toStrictEqual(
 			assign(expectedState, {
@@ -1274,7 +1284,7 @@ describe(`Slider basic`, () => {
 			}),
 		);
 
-		slider.actions.keydown(keyboardEvent('ArrowUp'), 0);
+		useKeyOnHandle('ArrowUp');
 
 		expect(normalizedState$()).toStrictEqual(
 			assign(expectedState, {
@@ -1307,7 +1317,7 @@ describe(`Slider basic`, () => {
 			}),
 		);
 
-		slider.actions.keydown(keyboardEvent('ArrowLeft'), 0);
+		useKeyOnHandle('ArrowLeft');
 
 		expect(normalizedState$()).toStrictEqual(
 			assign(expectedState, {
@@ -1340,7 +1350,7 @@ describe(`Slider basic`, () => {
 			}),
 		);
 
-		slider.actions.keydown(keyboardEvent('ArrowDown'), 0);
+		useKeyOnHandle('ArrowDown');
 
 		expect(normalizedState$()).toStrictEqual(
 			assign(expectedState, {
@@ -1373,7 +1383,7 @@ describe(`Slider basic`, () => {
 			}),
 		);
 
-		slider.actions.keydown(keyboardEvent('ArrowRight'), 0);
+		useKeyOnHandle('ArrowRight');
 
 		expect(normalizedState$()).toStrictEqual(
 			assign(expectedState, {
@@ -1413,6 +1423,15 @@ describe(`Slider range`, () => {
 	let normalizedState$: ReadableSignal<SliderState>;
 	let defConfig: WritableSignal<Partial<SliderProps>>;
 
+	const clickAreaX = (clientX: number) => {
+		attachDirectiveAndSendEvent(slider.directives.clickableAreaDirective, undefined, (node) =>
+			node.dispatchEvent(new MouseEvent('click', {clientX})),
+		);
+	};
+	const useKeyOnHandle = (key: string, handleId = 0) => {
+		attachDirectiveAndSendEvent(slider.directives.handleEventsDirective, {item: {id: handleId}}, (node) => node.dispatchEvent(keyboardEvent(key)));
+	};
+
 	beforeEach(() => {
 		defConfig = writable({});
 		slider = createSlider({config: computed(() => ({...defConfig()}))});
@@ -1540,7 +1559,7 @@ describe(`Slider range`, () => {
 			}),
 		);
 
-		slider.actions.click(new MouseEvent('click', {clientX: 60}));
+		clickAreaX(60);
 
 		expect(normalizedState$()).toStrictEqual(
 			assign(expectedState, {
@@ -1634,7 +1653,7 @@ describe(`Slider range`, () => {
 			}),
 		);
 
-		slider.actions.keydown(keyboardEvent('End'), 0);
+		useKeyOnHandle('End');
 
 		expect(normalizedState$()).toStrictEqual(
 			assign(expectedState, {
@@ -1679,7 +1698,7 @@ describe(`Slider range`, () => {
 			}),
 		);
 
-		slider.actions.click(new MouseEvent('click', {clientX: 70}));
+		clickAreaX(70);
 
 		expect(normalizedState$()).toStrictEqual(
 			assign(expectedState, {
@@ -1774,7 +1793,7 @@ describe(`Slider range`, () => {
 			}),
 		);
 
-		slider.actions.click(new MouseEvent('click', {clientX: 70}));
+		clickAreaX(70);
 
 		expect(normalizedState$()).toStrictEqual(
 			assign(expectedState, {
@@ -1879,6 +1898,10 @@ describe(`Slider vertical`, () => {
 	let normalizedState$: ReadableSignal<SliderState>;
 	let defConfig: WritableSignal<Partial<SliderProps>>;
 
+	const useKeyOnHandle = (key: string, handleId = 0) => {
+		attachDirectiveAndSendEvent(slider.directives.handleEventsDirective, {item: {id: handleId}}, (node) => node.dispatchEvent(keyboardEvent(key)));
+	};
+
 	beforeEach(() => {
 		defConfig = writable({});
 		slider = createSlider({config: computed(() => ({...defConfig()}))});
@@ -2017,7 +2040,7 @@ describe(`Slider vertical`, () => {
 			}),
 		);
 
-		slider.actions.keydown(keyboardEvent('ArrowDown'), 0);
+		useKeyOnHandle('ArrowDown');
 
 		expect(normalizedState$()).toStrictEqual(
 			assign(expectedState, {
@@ -2049,7 +2072,7 @@ describe(`Slider vertical`, () => {
 			}),
 		);
 
-		slider.actions.keydown(keyboardEvent('ArrowRight'), 0);
+		useKeyOnHandle('ArrowRight');
 
 		expect(normalizedState$()).toStrictEqual(
 			assign(expectedState, {
@@ -2081,7 +2104,7 @@ describe(`Slider vertical`, () => {
 			}),
 		);
 
-		slider.actions.keydown(keyboardEvent('ArrowUp'), 0);
+		useKeyOnHandle('ArrowUp');
 
 		expect(normalizedState$()).toStrictEqual(
 			assign(expectedState, {
@@ -2113,7 +2136,7 @@ describe(`Slider vertical`, () => {
 			}),
 		);
 
-		slider.actions.keydown(keyboardEvent('ArrowLeft'), 0);
+		useKeyOnHandle('ArrowLeft');
 
 		expect(normalizedState$()).toStrictEqual(
 			assign(expectedState, {
@@ -2185,7 +2208,7 @@ describe(`Slider vertical`, () => {
 			}),
 		);
 
-		slider.actions.keydown(keyboardEvent('ArrowDown'), 0);
+		useKeyOnHandle('ArrowDown');
 
 		expect(normalizedState$()).toStrictEqual(
 			assign(expectedState, {
@@ -2217,7 +2240,7 @@ describe(`Slider vertical`, () => {
 			}),
 		);
 
-		slider.actions.keydown(keyboardEvent('ArrowRight'), 0);
+		useKeyOnHandle('ArrowRight');
 
 		expect(normalizedState$()).toStrictEqual(
 			assign(expectedState, {
@@ -2249,7 +2272,7 @@ describe(`Slider vertical`, () => {
 			}),
 		);
 
-		slider.actions.keydown(keyboardEvent('ArrowUp'), 0);
+		useKeyOnHandle('ArrowUp');
 
 		expect(normalizedState$()).toStrictEqual(
 			assign(expectedState, {
@@ -2281,7 +2304,7 @@ describe(`Slider vertical`, () => {
 			}),
 		);
 
-		slider.actions.keydown(keyboardEvent('ArrowLeft'), 0);
+		useKeyOnHandle('ArrowLeft');
 
 		expect(normalizedState$()).toStrictEqual(
 			assign(expectedState, {
diff --git a/core/src/components/slider/slider.ts b/core/src/components/slider/slider.ts
index 71afbedb30..b1a5b32269 100644
--- a/core/src/components/slider/slider.ts
+++ b/core/src/components/slider/slider.ts
@@ -246,6 +246,10 @@ export interface SliderDirectives {
 	 */
 	clickableAreaDirective: Directive;
 
+	/**
+	 * Directive to apply handle events handlers
+	 */
+	handleEventsDirective: Directive<{item: {id: number}}>;
 	/**
 	 * Directive to apply to the slider handle if any
 	 */
@@ -272,35 +276,7 @@ export interface SliderDirectives {
 	handleLabelDisplayDirective: Directive<{index: number}>;
 }
 
-export interface SliderActions {
-	/**
-	 * Method to handle click on the slider
-	 * @param event - mouse event
-	 */
-	click(event: MouseEvent): void;
-	/**
-	 * Method to process the keyboard event
-	 * @param event - keyboard event object
-	 * @param handleNumber - id of the modified handle
-	 */
-	keydown(event: KeyboardEvent, handleNumber: number): void;
-
-	/**
-	 * Method describing the behavior of the slider handle on mouse down event
-	 * @param event - mouse event
-	 * @param handleId - numeric id of the handle
-	 */
-	mouseDown(event: MouseEvent, handleId: number): void;
-
-	/**
-	 * Method describing the behavior of the slider handle on touch start event
-	 * @param event - touch event
-	 * @param handleId - number id of the handle
-	 */
-	touchStart(event: TouchEvent, handleId: number): void;
-}
-
-export type SliderWidget = Widget<SliderProps, SliderState, object, SliderActions, SliderDirectives>;
+export type SliderWidget = Widget<SliderProps, SliderState, object, object, SliderDirectives>;
 
 const defaultSliderConfig: SliderProps = {
 	min: 0,
@@ -673,113 +649,10 @@ export function createSlider(config?: PropsConfig<SliderProps>): SliderWidget {
 		},
 	}));
 
-	const widget: SliderWidget = {
-		...stateStores({
-			min$,
-			max$,
-			stepSize$,
-			values$,
-			sortedValues$,
-			sortedHandles$,
-			minValueLabelDisplay$,
-			maxValueLabelDisplay$,
-			combinedLabelDisplay$,
-			interactive$,
-			combinedLabelPositionLeft$,
-			combinedLabelPositionTop$,
-			progressDisplayOptions$,
-			handleDisplayOptions$,
-			showValueLabels$,
-			showMinMaxLabels$,
-			rtl$,
-			...stateProps,
-		}),
-		patch,
-		api: {},
-		directives: {
-			sliderDirective: mergeDirectives(sliderDirective, resizeDirective, containerDirective),
-			progressDisplayDirective: createAttributesDirective((progressContext$: ReadableSignal<{option: ProgressDisplayOptions}>) => ({
-				styles: {
-					left: computed(() => percent(progressContext$().option.left)),
-					right: computed(() => percent(progressContext$().option.right)),
-					top: computed(() => percent(progressContext$().option.top)),
-					bottom: computed(() => percent(progressContext$().option.bottom)),
-					width: computed(() => percent(progressContext$().option.width)),
-					height: computed(() => percent(progressContext$().option.height)),
-				},
-				classNames: {
-					'au-slider-progress': true,
-				},
-			})),
-			clickableAreaDirective: createAttributesDirective(() => ({
-				events: {
-					click: (event: MouseEvent) => widget.actions.click(event),
-				},
-				classNames: {
-					'au-slider-clickable-area': horizontal$,
-					'au-slider-clickable-area-vertical': vertical$,
-				},
-			})),
-			handleDirective: createAttributesDirective((handleContext$: ReadableSignal<{item: SliderHandle}>) => ({
-				events: {
-					keydown: (event: KeyboardEvent) => widget.actions.keydown(event, handleContext$().item.id),
-					mousedown: (event: MouseEvent) => widget.actions.mouseDown(event, handleContext$().item.id),
-					touchstart: (event: TouchEvent) => widget.actions.touchStart(event, handleContext$().item.id),
-				},
-				attributes: {
-					role: 'slider',
-					'aria-valuemin': min$,
-					'aria-valuemax': max$,
-					'aria-valuenow': computed(() => handleContext$().item.value),
-					'aria-valuetext': computed(() => handleContext$().item.ariaValueText),
-					'aria-label': computed(() => handleContext$().item.ariaLabel),
-					'aria-orientation': computed(() => (vertical$() ? 'vertical' : undefined)),
-					'aria-disabled': computed(() => (disabled$() ? 'true' : undefined)),
-					disabled: disabled$,
-					'aria-readonly': computed(() => (readonly$() ? 'true' : undefined)),
-				},
-				styles: {
-					left: computed(() => percent(handleDisplayOptions$()[handleContext$().item.id].left)),
-					top: computed(() => percent(handleDisplayOptions$()[handleContext$().item.id].top)),
-				},
-				classNames: {
-					'au-slider-handle': true,
-					'au-slider-handle-vertical': vertical$,
-					'au-slider-handle-horizontal': horizontal$,
-				},
-			})),
-			minLabelDirective: mergeDirectives(minLabelDomDirective, minLabelDirective),
-			maxLabelDirective: mergeDirectives(maxLabelDomDirective, maxLabelDirective),
-			combinedHandleLabelDisplayDirective: createAttributesDirective(() => ({
-				classNames: {
-					'au-slider-label-vertical': vertical$,
-					'au-slider-label-vertical-now': vertical$,
-					'au-slider-label': horizontal$,
-					'au-slider-label-now': horizontal$,
-				},
-				styles: {
-					left: computed(() => percent(combinedLabelPositionLeft$())),
-					top: computed(() => percent(combinedLabelPositionTop$())),
-				},
-			})),
-			handleLabelDisplayDirective: createAttributesDirective((labelDisplayContext$: ReadableSignal<{index: number}>) => ({
-				classNames: {
-					'au-slider-label-vertical': vertical$,
-					'au-slider-label-vertical-now': vertical$,
-					'au-slider-label': horizontal$,
-					'au-slider-label-now': horizontal$,
-				},
-				styles: {
-					left: computed(() => percent(handleDisplayOptions$()[labelDisplayContext$().index].left)),
-					top: computed(() => percent(handleDisplayOptions$()[labelDisplayContext$().index].top)),
-				},
-			})),
-		},
-		actions: {
-			click(event: MouseEvent) {
-				adjustCoordinate(vertical$() ? event.clientY : event.clientX);
-			},
-			keydown(event: KeyboardEvent, handleIndex: number) {
+	const handleEventsDirective = createAttributesDirective((handleContext$: ReadableSignal<{item: {id: number}}>) => ({
+		events: {
+			keydown: (event: KeyboardEvent) => {
+				const handleIndex = handleContext$().item.id;
 				const {key} = event;
 				const rtl = rtl$(),
 					stepSize = stepSize$(),
@@ -827,7 +700,7 @@ export function createSlider(config?: PropsConfig<SliderProps>): SliderWidget {
 					event.stopPropagation();
 				}
 			},
-			mouseDown(event: MouseEvent, handleId: number) {
+			mousedown: (event: MouseEvent) => {
 				event.preventDefault();
 				const currentTarget = event.target as HTMLElement;
 				const handleDrag = (e: MouseEvent) => {
@@ -836,7 +709,7 @@ export function createSlider(config?: PropsConfig<SliderProps>): SliderWidget {
 					currentTarget.focus();
 					if (_prevCoordinate !== newCoord) {
 						_prevCoordinate = newCoord;
-						adjustCoordinate(newCoord, handleId);
+						adjustCoordinate(newCoord, handleContext$().item.id);
 					}
 				};
 				if (interactive$()) {
@@ -853,7 +726,7 @@ export function createSlider(config?: PropsConfig<SliderProps>): SliderWidget {
 					);
 				}
 			},
-			touchStart(event: TouchEvent, handleId: number) {
+			touchstart: (event: TouchEvent) => {
 				event.preventDefault();
 				const handleDrag = (e: TouchEvent) => {
 					e.preventDefault();
@@ -861,7 +734,7 @@ export function createSlider(config?: PropsConfig<SliderProps>): SliderWidget {
 					(event.target as HTMLElement).focus();
 					if (_prevCoordinate !== newCoord) {
 						_prevCoordinate = newCoord;
-						adjustCoordinate(newCoord, handleId);
+						adjustCoordinate(newCoord, handleContext$().item.id);
 					}
 				};
 				if (interactive$()) {
@@ -887,6 +760,112 @@ export function createSlider(config?: PropsConfig<SliderProps>): SliderWidget {
 				}
 			},
 		},
+	}));
+
+	const widget: SliderWidget = {
+		...stateStores({
+			min$,
+			max$,
+			stepSize$,
+			values$,
+			sortedValues$,
+			sortedHandles$,
+			minValueLabelDisplay$,
+			maxValueLabelDisplay$,
+			combinedLabelDisplay$,
+			interactive$,
+			combinedLabelPositionLeft$,
+			combinedLabelPositionTop$,
+			progressDisplayOptions$,
+			handleDisplayOptions$,
+			showValueLabels$,
+			showMinMaxLabels$,
+			rtl$,
+			...stateProps,
+		}),
+		patch,
+		api: {},
+		directives: {
+			sliderDirective: mergeDirectives(sliderDirective, resizeDirective, containerDirective),
+			progressDisplayDirective: createAttributesDirective((progressContext$: ReadableSignal<{option: ProgressDisplayOptions}>) => ({
+				styles: {
+					left: computed(() => percent(progressContext$().option.left)),
+					right: computed(() => percent(progressContext$().option.right)),
+					top: computed(() => percent(progressContext$().option.top)),
+					bottom: computed(() => percent(progressContext$().option.bottom)),
+					width: computed(() => percent(progressContext$().option.width)),
+					height: computed(() => percent(progressContext$().option.height)),
+				},
+				classNames: {
+					'au-slider-progress': true,
+				},
+			})),
+			clickableAreaDirective: createAttributesDirective(() => ({
+				events: {
+					click: (event: MouseEvent) => {
+						adjustCoordinate(vertical$() ? event.clientY : event.clientX);
+					},
+				},
+				classNames: {
+					'au-slider-clickable-area': horizontal$,
+					'au-slider-clickable-area-vertical': vertical$,
+				},
+			})),
+			handleEventsDirective,
+			handleDirective: mergeDirectives(
+				handleEventsDirective,
+				createAttributesDirective((handleContext$: ReadableSignal<{item: SliderHandle}>) => ({
+					attributes: {
+						role: 'slider',
+						'aria-valuemin': min$,
+						'aria-valuemax': max$,
+						'aria-valuenow': computed(() => handleContext$().item.value),
+						'aria-valuetext': computed(() => handleContext$().item.ariaValueText),
+						'aria-label': computed(() => handleContext$().item.ariaLabel),
+						'aria-orientation': computed(() => (vertical$() ? 'vertical' : undefined)),
+						'aria-disabled': computed(() => (disabled$() ? 'true' : undefined)),
+						disabled: disabled$,
+						'aria-readonly': computed(() => (readonly$() ? 'true' : undefined)),
+					},
+					styles: {
+						left: computed(() => percent(handleDisplayOptions$()[handleContext$().item.id].left)),
+						top: computed(() => percent(handleDisplayOptions$()[handleContext$().item.id].top)),
+					},
+					classNames: {
+						'au-slider-handle': true,
+						'au-slider-handle-vertical': vertical$,
+						'au-slider-handle-horizontal': horizontal$,
+					},
+				})),
+			),
+			minLabelDirective: mergeDirectives(minLabelDomDirective, minLabelDirective),
+			maxLabelDirective: mergeDirectives(maxLabelDomDirective, maxLabelDirective),
+			combinedHandleLabelDisplayDirective: createAttributesDirective(() => ({
+				classNames: {
+					'au-slider-label-vertical': vertical$,
+					'au-slider-label-vertical-now': vertical$,
+					'au-slider-label': horizontal$,
+					'au-slider-label-now': horizontal$,
+				},
+				styles: {
+					left: computed(() => percent(combinedLabelPositionLeft$())),
+					top: computed(() => percent(combinedLabelPositionTop$())),
+				},
+			})),
+			handleLabelDisplayDirective: createAttributesDirective((labelDisplayContext$: ReadableSignal<{index: number}>) => ({
+				classNames: {
+					'au-slider-label-vertical': vertical$,
+					'au-slider-label-vertical-now': vertical$,
+					'au-slider-label': horizontal$,
+					'au-slider-label-now': horizontal$,
+				},
+				styles: {
+					left: computed(() => percent(handleDisplayOptions$()[labelDisplayContext$().index].left)),
+					top: computed(() => percent(handleDisplayOptions$()[labelDisplayContext$().index].top)),
+				},
+			})),
+		},
+		actions: {},
 	};
 
 	return widget;
diff --git a/e2e/samplesMarkup.singlebrowser-e2e-spec.ts-snapshots/bootstrap-select-custom.html b/e2e/samplesMarkup.singlebrowser-e2e-spec.ts-snapshots/bootstrap-select-custom.html
index c9253f2014..1ed4aa4405 100644
--- a/e2e/samplesMarkup.singlebrowser-e2e-spec.ts-snapshots/bootstrap-select-custom.html
+++ b/e2e/samplesMarkup.singlebrowser-e2e-spec.ts-snapshots/bootstrap-select-custom.html
@@ -22,7 +22,7 @@
 					 autocapitalize="none"
 					 autocomplete="off"
 					 autocorrect="off"
-					 class="au-select-input border-0 flex-grow-1"
+					 class="au-select-input"
 					 id="rewritten-id-2"
 					 type="text"
 					 value=""
diff --git a/e2e/samplesMarkup.singlebrowser-e2e-spec.ts-snapshots/bootstrap-select-default.html b/e2e/samplesMarkup.singlebrowser-e2e-spec.ts-snapshots/bootstrap-select-default.html
index c09a1c2db7..d4820fbea6 100644
--- a/e2e/samplesMarkup.singlebrowser-e2e-spec.ts-snapshots/bootstrap-select-default.html
+++ b/e2e/samplesMarkup.singlebrowser-e2e-spec.ts-snapshots/bootstrap-select-default.html
@@ -31,7 +31,7 @@
 						 autocapitalize="none"
 						 autocomplete="off"
 						 autocorrect="off"
-						 class="au-select-input border-0 flex-grow-1"
+						 class="au-select-input"
 						 id="rewritten-id-2"
 						 type="text"
 						 value="a"
diff --git a/e2e/samplesMarkup.singlebrowser-e2e-spec.ts-snapshots/bootstrap-select-playground.html b/e2e/samplesMarkup.singlebrowser-e2e-spec.ts-snapshots/bootstrap-select-playground.html
index 9f4f041d7e..7ffaf06ce2 100644
--- a/e2e/samplesMarkup.singlebrowser-e2e-spec.ts-snapshots/bootstrap-select-playground.html
+++ b/e2e/samplesMarkup.singlebrowser-e2e-spec.ts-snapshots/bootstrap-select-playground.html
@@ -19,7 +19,7 @@
 				 autocapitalize="none"
 				 autocomplete="off"
 				 autocorrect="off"
-				 class="au-select-input border-0 flex-grow-1"
+				 class="au-select-input"
 				 id="rewritten-id-2"
 				 type="text"
 				 value=""
diff --git a/e2e/samplesMarkup.singlebrowser-e2e-spec.ts-snapshots/bootstrap-select-select.html b/e2e/samplesMarkup.singlebrowser-e2e-spec.ts-snapshots/bootstrap-select-select.html
index a61f954a2c..e880f94912 100644
--- a/e2e/samplesMarkup.singlebrowser-e2e-spec.ts-snapshots/bootstrap-select-select.html
+++ b/e2e/samplesMarkup.singlebrowser-e2e-spec.ts-snapshots/bootstrap-select-select.html
@@ -30,7 +30,7 @@ <h2>
 					 autocapitalize="none"
 					 autocomplete="off"
 					 autocorrect="off"
-					 class="au-select-input border-0 flex-grow-1"
+					 class="au-select-input"
 					 id="rewritten-id-2"
 					 type="text"
 					 value=""
diff --git a/e2e/samplesMarkup.singlebrowser-e2e-spec.ts-snapshots/daisyui-slider-default.html b/e2e/samplesMarkup.singlebrowser-e2e-spec.ts-snapshots/daisyui-slider-default.html
index 0f82ace11f..7c64d097ba 100644
--- a/e2e/samplesMarkup.singlebrowser-e2e-spec.ts-snapshots/daisyui-slider-default.html
+++ b/e2e/samplesMarkup.singlebrowser-e2e-spec.ts-snapshots/daisyui-slider-default.html
@@ -10,7 +10,7 @@
 		</h2>
 		<input
 		 aria-label="20"
-		 class="au-slider au-slider-horizontal range"
+		 class="au-slider au-slider-clickable-area au-slider-horizontal range"
 		 max="100"
 		 min="0"
 		 step="1"
diff --git a/e2e/select/select.singlebrowser-e2e-spec.ts b/e2e/select/select.singlebrowser-e2e-spec.ts
index a7e085c3c9..cb619e45e6 100644
--- a/e2e/select/select.singlebrowser-e2e-spec.ts
+++ b/e2e/select/select.singlebrowser-e2e-spec.ts
@@ -12,9 +12,9 @@ test.describe('Accessibility', () => {
 		await expect.poll(async () => (await selectPO.state()).badges.length).toBeGreaterThan(0);
 		await selectPO.locatorMenu.waitFor();
 
-		expect((await analyze(page, page.url())).violations).toEqual([]);
+		expect((await analyze(page)).violations).toEqual([]);
 
 		await switchTheme(page, 'dark');
-		expect((await analyze(page, page.url())).violations).toEqual([]);
+		expect((await analyze(page)).violations).toEqual([]);
 	});
 });
diff --git a/e2e/ssr.ssr-e2e-spec.ts-snapshots/ssr.html b/e2e/ssr.ssr-e2e-spec.ts-snapshots/ssr.html
index c964cb216f..2b770ab833 100644
--- a/e2e/ssr.ssr-e2e-spec.ts-snapshots/ssr.html
+++ b/e2e/ssr.ssr-e2e-spec.ts-snapshots/ssr.html
@@ -411,7 +411,7 @@ <h2>
 					 autocapitalize="none"
 					 autocomplete="off"
 					 autocorrect="off"
-					 class="au-select-input border-0 flex-grow-1"
+					 class="au-select-input"
 					 id="rewritten-id-11"
 					 type="text"
 					 value=""
diff --git a/react/bootstrap/src/components/select/select.tsx b/react/bootstrap/src/components/select/select.tsx
index 026d0a25e5..8e55b21f7d 100644
--- a/react/bootstrap/src/components/select/select.tsx
+++ b/react/bootstrap/src/components/select/select.tsx
@@ -61,29 +61,17 @@ const defaultConfig: Partial<SelectProps<any>> = {
 export function Select<Item>(props: Partial<SelectProps<Item>>) {
 	const [state, widget] = useWidgetWithConfig<SelectWidget<Item>>(createSelect, props, 'select', defaultConfig);
 	const slotContext: SelectContext<Item> = {state, widget: toSlotContextWidget(widget)};
-	const {id, ariaLabel, visibleItems, filterText, open, className} = state;
+	const {id, visibleItems, filterText, open, className} = state;
 	const menuId = `${id}-menu`;
 
 	const {
-		directives: {hasFocusDirective, referenceDirective, inputContainerDirective},
+		directives: {hasFocusDirective, referenceDirective, inputContainerDirective, inputDirective},
 	} = widget;
 	return (
 		<div {...useDirectives([classDirective, `au-select dropdown border border-1 p-1 mb-3 d-block ${className}`], referenceDirective)}>
 			<div {...useDirectives([classDirective, 'd-flex align-items-center flex-wrap gap-1'], hasFocusDirective, inputContainerDirective)}>
 				<Badges slotContext={slotContext}></Badges>
-				<input
-					id={id}
-					aria-label={ariaLabel}
-					className="au-select-input flex-grow-1 border-0"
-					type="text"
-					value={filterText}
-					aria-autocomplete="list"
-					autoCorrect="off"
-					autoCapitalize="none"
-					autoComplete="off"
-					onInput={widget.actions.onInput}
-					onKeyDown={(e) => widget.actions.onInputKeydown(e.nativeEvent)}
-				/>
+				<input value={filterText} {...useDirective(inputDirective)} onChange={() => {}} />
 			</div>
 			{open && visibleItems.length > 0 && <Rows slotContext={slotContext} menuId={menuId} />}
 		</div>
diff --git a/react/demo/src/bootstrap/samples/pagination/Custom.route.tsx b/react/demo/src/bootstrap/samples/pagination/Custom.route.tsx
index 6cd5b89b2e..538c267634 100644
--- a/react/demo/src/bootstrap/samples/pagination/Custom.route.tsx
+++ b/react/demo/src/bootstrap/samples/pagination/Custom.route.tsx
@@ -16,7 +16,7 @@ function CustomPages({widget, state}: PaginationContext) {
 	function handleTheChange(e: FocusEvent<HTMLInputElement> | KeyboardEvent<HTMLInputElement>) {
 		const value = e.currentTarget.value;
 		const intValue = parseInt(value);
-		widget.actions.select(intValue);
+		widget.api.select(intValue);
 		setValue(widget.stores.page$().toString());
 	}
 	function formatInput(e: FormEvent<HTMLInputElement>) {
diff --git a/react/demo/src/bootstrap/samples/select/Custom.route.tsx b/react/demo/src/bootstrap/samples/select/Custom.route.tsx
index cacea8199c..ea5d09f402 100644
--- a/react/demo/src/bootstrap/samples/select/Custom.route.tsx
+++ b/react/demo/src/bootstrap/samples/select/Custom.route.tsx
@@ -2,6 +2,7 @@ import {abortPrevious, debounce} from '@agnos-ui/common/samples/utils/debounce';
 import type {SelectItemContext} from '@agnos-ui/react-bootstrap/components/select';
 import {Select} from '@agnos-ui/react-bootstrap/components/select';
 import React, {useCallback, useState} from 'react';
+import {useDirective} from '@agnos-ui/react-bootstrap/utils/directive';
 
 import '@agnos-ui/common/samples/select/custom.scss';
 
@@ -33,7 +34,7 @@ const SlotBadgeLabel = ({itemContext, widget}: SelectItemContext<WikiResult>) =>
 				type="button"
 				className="btn-close ms-1 wiki-btn-close"
 				aria-label="Close"
-				onClick={(e) => widget.actions.onRemoveBadgeClick(e.nativeEvent, itemContext.item)}
+				{...useDirective(widget.directives.badgeCloseButtonDirective, itemContext)}
 			></button>
 		</>
 	);
diff --git a/react/demo/src/daisyui/samples/pagination/Pagination.tsx b/react/demo/src/daisyui/samples/pagination/Pagination.tsx
index ea8ac3e1ea..84a412497d 100644
--- a/react/demo/src/daisyui/samples/pagination/Pagination.tsx
+++ b/react/demo/src/daisyui/samples/pagination/Pagination.tsx
@@ -6,7 +6,7 @@ export function Pagination(props: Partial<PaginationProps>) {
 	const [
 		state,
 		{
-			actions: {first, last, next, previous, select},
+			api: {first, last, next, previous, select},
 		},
 	] = useWidgetWithConfig(createPagination, props, 'pagination');
 
diff --git a/react/demo/src/daisyui/samples/rating/Rating.tsx b/react/demo/src/daisyui/samples/rating/Rating.tsx
index f9e38776d3..5769abce43 100644
--- a/react/demo/src/daisyui/samples/rating/Rating.tsx
+++ b/react/demo/src/daisyui/samples/rating/Rating.tsx
@@ -14,9 +14,9 @@ export function Rating(
 			{stars.map(({index}) => (
 				<React.Fragment key={index}>
 					<input
-						onMouseLeave={widget.actions.leave}
-						onMouseEnter={() => widget.actions.hover(index + 1)}
-						onClick={() => widget.actions.click(index + 1)}
+						onMouseLeave={widget.api.leave}
+						onMouseEnter={() => widget.api.setHoveredRating(index + 1)}
+						onClick={() => widget.api.setRating(index + 1)}
 						// React throws a warning if an onChange is not provided.
 						onChange={() => {}}
 						type="radio"
diff --git a/react/demo/src/daisyui/samples/slider/Slider.tsx b/react/demo/src/daisyui/samples/slider/Slider.tsx
index 3209efe69d..d4a736d7e5 100644
--- a/react/demo/src/daisyui/samples/slider/Slider.tsx
+++ b/react/demo/src/daisyui/samples/slider/Slider.tsx
@@ -1,13 +1,12 @@
 import {type SliderProps, createSlider} from '@agnos-ui/react-headless/components/slider';
 import {useWidgetWithConfig} from '@agnos-ui/react-headless/config';
-import {useDirective} from '@agnos-ui/react-headless/utils/directive';
+import {useDirectives} from '@agnos-ui/react-headless/utils/directive';
 
 export function Slider(props: Partial<Pick<SliderProps, 'min' | 'max' | 'values' | 'stepSize' | 'className' | 'onValuesChange'>>) {
 	const [
 		state,
 		{
-			actions: {click, keydown, mouseDown, touchStart},
-			directives: {sliderDirective},
+			directives: {sliderDirective, clickableAreaDirective, handleEventsDirective},
 		},
 	] = useWidgetWithConfig(createSlider, props, 'slider');
 
@@ -21,11 +20,7 @@ export function Slider(props: Partial<Pick<SliderProps, 'min' | 'max' | 'values'
 			step={state.stepSize}
 			className="range"
 			aria-label={state.sortedHandles[0].ariaLabel}
-			onClick={(e) => click(e.nativeEvent)}
-			onKeyDown={(e) => keydown(e.nativeEvent, 0)}
-			onMouseDown={(e) => mouseDown(e.nativeEvent, 0)}
-			onTouchStart={(e) => touchStart(e.nativeEvent, 0)}
-			{...useDirective(sliderDirective)}
+			{...useDirectives([sliderDirective, undefined], [clickableAreaDirective, undefined], [handleEventsDirective, {item: {id: 0}}])}
 		/>
 	);
 }
diff --git a/react/headless/src/utils/directive.ts b/react/headless/src/utils/directive.ts
index 4eaa177ca6..d53a6311f7 100644
--- a/react/headless/src/utils/directive.ts
+++ b/react/headless/src/utils/directive.ts
@@ -9,6 +9,9 @@ export * from '@agnos-ui/core/utils/directive';
 const attributesMap = new Map([
 	['tabindex', 'tabIndex'],
 	['for', 'htmlFor'],
+	['autocomplete', 'autoComplete'],
+	['autocapitalize', 'autoCapitalize'],
+	['autocorrect', 'autoCorrect'],
 ]);
 
 /**
diff --git a/react/ssr-app/tsconfig.json b/react/ssr-app/tsconfig.json
index 216b85401f..55200efe3c 100644
--- a/react/ssr-app/tsconfig.json
+++ b/react/ssr-app/tsconfig.json
@@ -3,6 +3,7 @@
 	"compilerOptions": {
 		"paths": {
 			"@agnos-ui/core/*": ["./core/src/*"],
+			"@agnos-ui/core-bootstrap/*": ["./core-bootstrap/src/*"],
 			"@agnos-ui/react-headless/*": ["./react/headless/src/*", "./react/headless/src/generated/*"],
 			"@agnos-ui/react/*": ["./react/lib/src/*", "./react/lib/src/generated/*"]
 		},
diff --git a/svelte/bootstrap/src/components/select/Select.svelte b/svelte/bootstrap/src/components/select/Select.svelte
index 58ea3b6eee..dc95df42ab 100644
--- a/svelte/bootstrap/src/components/select/Select.svelte
+++ b/svelte/bootstrap/src/components/select/Select.svelte
@@ -25,9 +25,8 @@
 	});
 	export const api: SelectApi<Item> = widget.api;
 	const {
-		stores: {id$, ariaLabel$, highlighted$, open$, selectedContexts$, badgeLabel$, itemLabel$, visibleItems$, className$, filterText$},
+		stores: {highlighted$, open$, selectedContexts$, badgeLabel$, itemLabel$, visibleItems$, className$, filterText$},
 		state$,
-		actions: {onInput, onInputKeydown},
 		directives: {
 			floatingDirective,
 			hasFocusDirective,
@@ -36,6 +35,7 @@
 			badgeAttributesDirective,
 			menuAttributesDirective,
 			itemAttributesDirective,
+			inputDirective,
 		},
 	} = widget;
 
@@ -56,19 +56,7 @@
 				<Slot content={$badgeLabel$} props={{state: $state$, widget, itemContext}} />
 			</div>
 		{/each}
-		<input
-			id={$id$}
-			aria-label={$ariaLabel$}
-			type="text"
-			class="au-select-input flex-grow-1 border-0"
-			value={$filterText$}
-			aria-autocomplete="list"
-			autoCorrect="off"
-			autoCapitalize="none"
-			autoComplete="off"
-			oninput={onInput}
-			onkeydown={onInputKeydown}
-		/>
+		<input value={$filterText$} use:inputDirective />
 	</div>
 	{#if $open$ && $visibleItems$.length > 0}
 		<ul use:hasFocusDirective use:floatingDirective use:menuAttributesDirective class="dropdown-menu show">
diff --git a/svelte/demo/src/bootstrap/samples/pagination/CustomPages.svelte b/svelte/demo/src/bootstrap/samples/pagination/CustomPages.svelte
index f2d5624734..db00d8f13f 100644
--- a/svelte/demo/src/bootstrap/samples/pagination/CustomPages.svelte
+++ b/svelte/demo/src/bootstrap/samples/pagination/CustomPages.svelte
@@ -12,7 +12,7 @@
 	function handleTheChange(e: (FocusEvent | KeyboardEvent) & {currentTarget: EventTarget & HTMLInputElement}) {
 		const value = e.currentTarget.value;
 		const intValue = parseInt(value);
-		widget.actions.select(intValue);
+		widget.api.select(intValue);
 		e.currentTarget.value = widget.stores.page$().toString();
 	}
 	function formatInput(e: Event & {currentTarget: EventTarget & HTMLInputElement}) {
diff --git a/svelte/demo/src/bootstrap/samples/select/Custom.route.svelte b/svelte/demo/src/bootstrap/samples/select/Custom.route.svelte
index dc691571e4..8d92e924f4 100644
--- a/svelte/demo/src/bootstrap/samples/select/Custom.route.svelte
+++ b/svelte/demo/src/bootstrap/samples/select/Custom.route.svelte
@@ -48,11 +48,7 @@
 	<Select {items} {itemIdFn} {onFilterTextChange} {onSelectedChange} {navSelector} badgeClassName="badge text-bg-light d-flex align-items-center">
 		{#snippet badgeLabel({itemContext, widget})}
 			<a href={`${basePageUrl}${itemContext.item.pageid}`} target="_blank" rel="noreferrer">{itemContext.item.title}</a>
-			<button
-				type="button"
-				class="btn-close ms-1 wiki-btn-close"
-				aria-label="Close"
-				onclick={(e) => widget.actions.onRemoveBadgeClick(e, itemContext.item)}
+			<button type="button" class="btn-close ms-1 wiki-btn-close" aria-label="Close" use:widget.directives.badgeCloseButtonDirective={itemContext}
 			></button>
 		{/snippet}
 		{#snippet itemLabel({itemContext: {id, item}})}
diff --git a/svelte/demo/src/daisyui/samples/pagination/Pagination.svelte b/svelte/demo/src/daisyui/samples/pagination/Pagination.svelte
index a8f035e0e3..b205211770 100644
--- a/svelte/demo/src/daisyui/samples/pagination/Pagination.svelte
+++ b/svelte/demo/src/daisyui/samples/pagination/Pagination.svelte
@@ -31,7 +31,7 @@
 			className$,
 		},
 		state$,
-		actions: {first, previous, next, last},
+		api: {first, previous, next, last, select},
 	} = widget;
 
 	$effect(() => widget.patchChangedProps({...props, page}));
@@ -69,7 +69,7 @@
 				class:btn-active={page === $state$.page}
 				aria-current={page === $state$.page ? 'page' : null}
 				tabindex={page === -1 ? -1 : $state$.disabled ? -1 : undefined}
-				onclick={page === -1 ? () => {} : () => widget.actions.select(page)}
+				onclick={page === -1 ? () => {} : () => select(page)}
 				disabled={page === -1 || $state$.disabled}
 				>{page}
 				{#if $state$.page === page}<span class="sr-only">{$state$.activeLabel}</span>{/if}
diff --git a/svelte/demo/src/daisyui/samples/rating/Rating.svelte b/svelte/demo/src/daisyui/samples/rating/Rating.svelte
index 29e32d91cb..89368a24d3 100644
--- a/svelte/demo/src/daisyui/samples/rating/Rating.svelte
+++ b/svelte/demo/src/daisyui/samples/rating/Rating.svelte
@@ -3,10 +3,7 @@
 	import {callWidgetFactory} from '@agnos-ui/svelte-headless/config';
 
 	// You can choose here the props (form the core) you want as input
-	let {
-		rating = $bindable(),
-		...props
-	}: Pick<Partial<RatingProps>, 'rating' | 'maxRating' | 'className' | 'onHover' | 'onLeave' | 'ariaLabel'> = $props();
+	let {rating = $bindable(), ...props}: Pick<Partial<RatingProps>, 'rating' | 'maxRating' | 'className' | 'onHover' | 'ariaLabel'> = $props();
 
 	const widget = callWidgetFactory({
 		factory: createRating,
@@ -21,7 +18,7 @@
 
 	const {
 		stores: {visibleRating$, stars$, className$, ariaLabel$},
-		actions: {hover, click, leave},
+		api: {setRating, setHoveredRating, leave},
 	} = widget;
 	$effect(() => widget.patchChangedProps({...props, rating}));
 </script>
@@ -30,8 +27,8 @@
 	{#each $stars$ as { index } (index)}
 		<input
 			onmouseleave={leave}
-			onmouseenter={() => hover(index + 1)}
-			onclick={() => click(index + 1)}
+			onmouseenter={() => setHoveredRating(index + 1)}
+			onclick={() => setRating(index + 1)}
 			type="radio"
 			name="rating-1"
 			class="mask mask-star"
diff --git a/svelte/demo/src/daisyui/samples/slider/Slider.svelte b/svelte/demo/src/daisyui/samples/slider/Slider.svelte
index 5091b27836..139277d36c 100644
--- a/svelte/demo/src/daisyui/samples/slider/Slider.svelte
+++ b/svelte/demo/src/daisyui/samples/slider/Slider.svelte
@@ -16,7 +16,7 @@
 	});
 	const {
 		stores: {min$, max$, stepSize$, sortedHandles$},
-		directives: {sliderDirective},
+		directives: {sliderDirective, clickableAreaDirective, handleEventsDirective},
 		patchChangedProps,
 	} = widget;
 	$effect(() => patchChangedProps({...props, values}));
@@ -25,14 +25,12 @@
 <input
 	type="range"
 	use:sliderDirective
+	use:clickableAreaDirective
+	use:handleEventsDirective={{item: {id: 0}}}
 	min={$min$}
 	max={$max$}
 	value={$sortedHandles$[0].value}
 	step={$stepSize$}
 	class="range"
 	aria-label={$sortedHandles$[0].ariaLabel}
-	onclick={widget.actions.click}
-	onkeydown={(e) => widget.actions.keydown(e, 0)}
-	onmousedown={(e) => widget.actions.mouseDown(e, 0)}
-	ontouchstart={(e) => widget.actions.touchStart(e, 0)}
 />