From 71c3ec0dc5ca6223ed138ff1aabbbda78fd8f739 Mon Sep 17 00:00:00 2001
From: David-Emmanuel DIVERNOIS <david-emmanuel.divernois@amadeus.com>
Date: Mon, 24 Jul 2023 18:41:59 +0200
Subject: [PATCH] HTML snapshot test for all samples for consistency in the
 markup

---
 .prettierignore                               |   1 +
 .../src/app/samples/alert/config.route.ts     |   4 +-
 .../src/app/samples/alert/dynamic.route.ts    |  22 +-
 .../demo/src/app/samples/alert/icon.route.ts  |   2 +-
 .../samples/focustrack/focustrack.route.ts    |   4 +-
 .../src/app/samples/modal/default.route.ts    |   2 +-
 .../app/samples/pagination/config.route.ts    |   8 +-
 .../src/app/samples/rating/config.route.ts    |   2 +-
 .../src/app/samples/select/select.route.ts    |   4 +-
 angular/demo/src/index.html                   |   2 +-
 angular/lib/src/lib/alert/alert.component.ts  |   7 +-
 .../lib/pagination/pagination.component.ts    |  11 +-
 e2e/htmlSnapshot.ts                           | 188 +++++++++++++++
 e2e/samplesMarkup.e2e-spec.ts                 |  19 ++
 .../alert-config.html                         | 131 +++++++++++
 .../alert-dynamic.html                        |  31 +++
 .../alert-generic.html                        |  90 +++++++
 .../alert-icon.html                           | 140 +++++++++++
 .../alert-playground.html                     |  23 ++
 .../focustrack-focustrack.html                |  80 +++++++
 .../modal-default.html                        |  20 ++
 .../modal-playground.html                     |   9 +
 .../modal-stack.html                          |  15 ++
 .../pagination-config.html                    | 162 +++++++++++++
 .../pagination-default.html                   |  79 +++++++
 .../pagination-playground.html                |  71 ++++++
 .../rating-config.html                        | 222 ++++++++++++++++++
 .../rating-customtemplate.html                | 171 ++++++++++++++
 .../rating-default.html                       | 153 ++++++++++++
 .../rating-form.html                          | 171 ++++++++++++++
 .../rating-playground.html                    | 131 +++++++++++
 .../rating-readonly.html                      | 127 ++++++++++
 .../transition-transition.html                | 139 +++++++++++
 playwright.config.ts                          |   1 +
 react/demo/app/samples/alert/Icon.route.tsx   |   2 +-
 .../app/samples/pagination/Config.route.tsx   |   2 +-
 react/lib/Alert.tsx                           |   2 +-
 react/lib/pagination/Pagination.tsx           |   4 +-
 svelte/demo/samples/alert/Config.route.svelte |   2 +-
 .../demo/samples/alert/Dynamic.route.svelte   |   9 +-
 svelte/demo/samples/alert/Icon.svelte         |  16 +-
 .../focustrack/Focustrack.route.svelte        |   4 +-
 .../demo/samples/modal/Default.route.svelte   |   1 -
 .../samples/pagination/Config.route.svelte    |   4 +-
 .../samples/pagination/Default.route.svelte   |   2 +-
 .../samples/transition/InnerComponent.svelte  |  27 +--
 46 files changed, 2249 insertions(+), 68 deletions(-)
 create mode 100644 e2e/htmlSnapshot.ts
 create mode 100644 e2e/samplesMarkup.e2e-spec.ts
 create mode 100644 e2e/samplesMarkup.e2e-spec.ts-snapshots/alert-config.html
 create mode 100644 e2e/samplesMarkup.e2e-spec.ts-snapshots/alert-dynamic.html
 create mode 100644 e2e/samplesMarkup.e2e-spec.ts-snapshots/alert-generic.html
 create mode 100644 e2e/samplesMarkup.e2e-spec.ts-snapshots/alert-icon.html
 create mode 100644 e2e/samplesMarkup.e2e-spec.ts-snapshots/alert-playground.html
 create mode 100644 e2e/samplesMarkup.e2e-spec.ts-snapshots/focustrack-focustrack.html
 create mode 100644 e2e/samplesMarkup.e2e-spec.ts-snapshots/modal-default.html
 create mode 100644 e2e/samplesMarkup.e2e-spec.ts-snapshots/modal-playground.html
 create mode 100644 e2e/samplesMarkup.e2e-spec.ts-snapshots/modal-stack.html
 create mode 100644 e2e/samplesMarkup.e2e-spec.ts-snapshots/pagination-config.html
 create mode 100644 e2e/samplesMarkup.e2e-spec.ts-snapshots/pagination-default.html
 create mode 100644 e2e/samplesMarkup.e2e-spec.ts-snapshots/pagination-playground.html
 create mode 100644 e2e/samplesMarkup.e2e-spec.ts-snapshots/rating-config.html
 create mode 100644 e2e/samplesMarkup.e2e-spec.ts-snapshots/rating-customtemplate.html
 create mode 100644 e2e/samplesMarkup.e2e-spec.ts-snapshots/rating-default.html
 create mode 100644 e2e/samplesMarkup.e2e-spec.ts-snapshots/rating-form.html
 create mode 100644 e2e/samplesMarkup.e2e-spec.ts-snapshots/rating-playground.html
 create mode 100644 e2e/samplesMarkup.e2e-spec.ts-snapshots/rating-readonly.html
 create mode 100644 e2e/samplesMarkup.e2e-spec.ts-snapshots/transition-transition.html

diff --git a/.prettierignore b/.prettierignore
index 3b91d94904..003ff267e0 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -5,3 +5,4 @@ coverage/
 playwright-report/
 test-results/
 .svelte-kit/
+*-snapshots/
diff --git a/angular/demo/src/app/samples/alert/config.route.ts b/angular/demo/src/app/samples/alert/config.route.ts
index 9e83a8a8eb..6b8a0e619c 100644
--- a/angular/demo/src/app/samples/alert/config.route.ts
+++ b/angular/demo/src/app/samples/alert/config.route.ts
@@ -18,14 +18,14 @@ export enum AlertStatus {
 @Component({
 	standalone: true,
 	imports: [AgnosUIAngularModule, NgFor, FormsModule],
-	template: ` <button class="btn btn-primary showAlert" (click)="showAlert(alert)">Show alert</button>
+	template: ` <button class="btn btn-primary showAlert" (click)="showAlert(alert)" type="button">Show alert</button>
 		<br />
 		<br />
 		<div class="d-flex flex-column">
 			<div class="d-flex form-group">
 				<label class="align-self-center me-3" for="typeSelect">Alert type: </label>
 				<select id="typeSelect" class="form-select w-auto" [(ngModel)]="type">
-					<option *ngFor="let style of styleList" [ngValue]="style.value">{{ style.label }}</option>
+					<option *ngFor="let style of styleList" [value]="style.value">{{ style.label }}</option>
 				</select>
 			</div>
 
diff --git a/angular/demo/src/app/samples/alert/dynamic.route.ts b/angular/demo/src/app/samples/alert/dynamic.route.ts
index 57492f0e45..cc25e06e51 100644
--- a/angular/demo/src/app/samples/alert/dynamic.route.ts
+++ b/angular/demo/src/app/samples/alert/dynamic.route.ts
@@ -24,18 +24,16 @@ class AlertContainerService {
 	standalone: true,
 	imports: [AlertComponent, NgFor],
 	template: `
-		<div #errorArea>
-			<au-alert
-				*ngFor="let alert of alertContainerService.alerts"
-				[animation]="alert.animation"
-				[animationOnInit]="alert.animationOnInit"
-				[dismissible]="alert.dismissible"
-				[type]="alert.type"
-				[slotDefault]="alert.slotDefault"
-				(hidden)="removeAlert(alert)"
-			>
-			</au-alert>
-		</div>
+		<au-alert
+			*ngFor="let alert of alertContainerService.alerts"
+			[animation]="alert.animation"
+			[animationOnInit]="alert.animationOnInit"
+			[dismissible]="alert.dismissible"
+			[type]="alert.type"
+			[slotDefault]="alert.slotDefault"
+			(hidden)="removeAlert(alert)"
+		>
+		</au-alert>
 	`,
 })
 class ChildComponent {
diff --git a/angular/demo/src/app/samples/alert/icon.route.ts b/angular/demo/src/app/samples/alert/icon.route.ts
index 4e664636e4..5246b5397c 100644
--- a/angular/demo/src/app/samples/alert/icon.route.ts
+++ b/angular/demo/src/app/samples/alert/icon.route.ts
@@ -39,7 +39,7 @@ export default class IconAlertComponent {
 	providers: [SlotDirective],
 	template: `
 		<ng-template #iconDemo let-state="state" let-widget="widget">
-			<span class="d-flex align-items-center me-1" [innerHTML]="sanitizer.bypassSecurityTrustHtml(typeIcon[state.type])"> </span>
+			<span class="d-flex align-items-center svg icon-20 me-1" [innerHTML]="sanitizer.bypassSecurityTrustHtml(typeIcon[state.type])"> </span>
 			<div class="d-flex w-100 alert-body">
 				<ng-template [auSlot]="state.slotDefault" [auSlotProps]="{widget, state}"></ng-template>
 				<button
diff --git a/angular/demo/src/app/samples/focustrack/focustrack.route.ts b/angular/demo/src/app/samples/focustrack/focustrack.route.ts
index c4dc227772..3ef3250d52 100644
--- a/angular/demo/src/app/samples/focustrack/focustrack.route.ts
+++ b/angular/demo/src/app/samples/focustrack/focustrack.route.ts
@@ -12,7 +12,7 @@ import {Component} from '@angular/core';
 			<div [auUse]="hasFocusApi.directive" class="my-2 p-2 border">
 				<h5>Container</h5>
 				<input class="form-control" type="text" placeholder="Focusable input" id="focusableInput" /><br />
-				<input class="form-control" type="text" placeholder="Focusable input 2" id="focusableInput2" /><br />
+				<input class="form-control" type="text" placeholder="Focusable input 2" id="focusableInput2" />
 			</div>
 			<input class="form-control" type="text" placeholder="Disabled input" id="disabledInput" disabled /><br />
 			<div class="form-check mb-2">
@@ -20,7 +20,7 @@ import {Component} from '@angular/core';
 				<label class="form-check-label" for="containerHasFocus">Focus in container</label>
 			</div>
 			<label for="activeElement" class="form-label">Active element history:</label>
-			<textarea class="form-control mb-2" id="activeElementHistory">{{ activeElementsJson }}</textarea>
+			<textarea class="form-control mb-2" id="activeElementHistory" readonly>{{ activeElementsJson }}</textarea>
 			<button class="btn btn-primary" (click)="clear()">Clear</button>
 		</div>
 	`,
diff --git a/angular/demo/src/app/samples/modal/default.route.ts b/angular/demo/src/app/samples/modal/default.route.ts
index b03d806ea1..41b531f410 100644
--- a/angular/demo/src/app/samples/modal/default.route.ts
+++ b/angular/demo/src/app/samples/modal/default.route.ts
@@ -9,7 +9,7 @@ import {FormsModule} from '@angular/forms';
 	standalone: true,
 	imports: [AgnosUIAngularModule, CommonModule, FormsModule],
 	template: `
-		<button class="btn btn-primary" (click)="show(modal)">Launch demo modal</button>
+		<button class="btn btn-primary" type="button" (click)="show(modal)">Launch demo modal</button>
 		<div class="mt-3" data-testid="message">{{ message }}</div>
 		<au-modal #modal slotTitle="Save changes">
 			Do you want to save your changes?
diff --git a/angular/demo/src/app/samples/pagination/config.route.ts b/angular/demo/src/app/samples/pagination/config.route.ts
index 46b91cdfa8..6f63357d6f 100644
--- a/angular/demo/src/app/samples/pagination/config.route.ts
+++ b/angular/demo/src/app/samples/pagination/config.route.ts
@@ -47,7 +47,7 @@ const FILTER_PAG_REGEX = /[^0-9]/g;
 					*ngIf="!widget.api.isEllipsis(page)"
 					[attr.aria-label]="state.pagesLabel[i]"
 					class="page-link au-page"
-					href
+					href="#"
 					(click)="widget.actions.select(page); $event.preventDefault()"
 					[attr.tabindex]="state.disabled ? '-1' : null"
 					[attr.aria-disabled]="state.disabled ? 'true' : null"
@@ -77,7 +77,7 @@ const FILTER_PAG_REGEX = /[^0-9]/g;
 				</button>
 			</div>
 			<br />
-			Collection Size:
+			Collection size:
 			<div id="btn-config-collectionSize" class="btn-group mb-2">
 				<button
 					class="btn btn-sm btn-outline-secondary"
@@ -102,7 +102,7 @@ const FILTER_PAG_REGEX = /[^0-9]/g;
 				</button>
 				<button
 					class="btn btn-sm btn-outline-secondary"
-					[class.active]="(widgetsConfig$ | async)?.pagination?.collectionSize === undefined"
+					[class.active]="!(widgetsConfig$ | async)?.pagination?.collectionSize"
 					(click)="updatePaginationConfig({collectionSize: undefined})"
 				>
 					undefined
@@ -148,7 +148,7 @@ const FILTER_PAG_REGEX = /[^0-9]/g;
 					[class.active]="(widgetsConfig$ | async)?.pagination?.slotPages === custom"
 					(click)="updatePaginationConfig({slotPages: custom})"
 				>
-					custom Pages
+					custom pages
 				</button>
 				<button
 					class="btn btn-sm btn-outline-secondary"
diff --git a/angular/demo/src/app/samples/rating/config.route.ts b/angular/demo/src/app/samples/rating/config.route.ts
index 6bf5255802..e05966d1a1 100644
--- a/angular/demo/src/app/samples/rating/config.route.ts
+++ b/angular/demo/src/app/samples/rating/config.route.ts
@@ -56,7 +56,7 @@ import {Component} from '@angular/core';
 				</button>
 				<button
 					class="btn btn-sm btn-outline-secondary"
-					[class.active]="(widgetsConfig$ | async)?.rating?.maxRating === undefined"
+					[class.active]="!(widgetsConfig$ | async)?.rating?.maxRating"
 					(click)="updateRatingConfig({maxRating: undefined})"
 				>
 					undefined
diff --git a/angular/demo/src/app/samples/select/select.route.ts b/angular/demo/src/app/samples/select/select.route.ts
index da1734095b..c389d64b66 100644
--- a/angular/demo/src/app/samples/select/select.route.ts
+++ b/angular/demo/src/app/samples/select/select.route.ts
@@ -10,8 +10,8 @@ import {FormsModule} from '@angular/forms';
 	template: `
 		<h2>Multiselect example</h2>
 		<div class="mb-3">
-			<label for="select-example" class="form-label">Multiselect</label>
-			<au-select id="select-example" [items]="items" [(filterText)]="filterText"></au-select>
+			<label class="form-label">Multiselect</label>
+			<au-select [items]="items" [(filterText)]="filterText"></au-select>
 		</div>
 		<div class="demo-select-config">
 			<strong>Default config</strong><br />
diff --git a/angular/demo/src/index.html b/angular/demo/src/index.html
index d9fc79e928..68a0ddf2db 100644
--- a/angular/demo/src/index.html
+++ b/angular/demo/src/index.html
@@ -7,6 +7,6 @@
 		<link rel="icon" type="image/x-icon" href="favicon.ico" />
 	</head>
 	<body>
-		<app-root></app-root>
+		<app-root id="root"></app-root>
 	</body>
 </html>
diff --git a/angular/lib/src/lib/alert/alert.component.ts b/angular/lib/src/lib/alert/alert.component.ts
index 565a97774c..88226a022c 100644
--- a/angular/lib/src/lib/alert/alert.component.ts
+++ b/angular/lib/src/lib/alert/alert.component.ts
@@ -79,7 +79,12 @@ const defaultConfig: Partial<AlertProps> = {
 			<ng-content></ng-content>
 		</ng-template>
 
-		<div *ngIf="!state().hidden" [auUse]="widget.directives.transitionDirective" class="d-flex w-100 alert alert-{{ state().type }}" role="alert">
+		<div
+			*ngIf="!state().hidden"
+			[auUse]="widget.directives.transitionDirective"
+			class="au-alert d-flex w-100 alert alert-{{ state().type }}"
+			role="alert"
+		>
 			<ng-template [auSlot]="state().slotStructure" [auSlotProps]="{state: state(), widget}"></ng-template>
 		</div>`,
 })
diff --git a/angular/lib/src/lib/pagination/pagination.component.ts b/angular/lib/src/lib/pagination/pagination.component.ts
index 74e52a6877..ecb9094ea7 100644
--- a/angular/lib/src/lib/pagination/pagination.component.ts
+++ b/angular/lib/src/lib/pagination/pagination.component.ts
@@ -139,7 +139,7 @@ export class PaginationPagesDirective {
 				*ngIf="!widget.api.isEllipsis(page)"
 				[attr.aria-label]="state.pagesLabel[i]"
 				class="page-link au-page"
-				href
+				href="#"
 				(click)="widget.actions.select(page); $event.preventDefault()"
 				[attr.tabindex]="state.disabled ? '-1' : null"
 				[attr.aria-disabled]="state.disabled ? 'true' : null"
@@ -176,7 +176,7 @@ const defaultConfig: Partial<PaginationProps> = {
 					<a
 						[attr.aria-label]="state.ariaFirstLabel"
 						class="page-link au-first"
-						href
+						href="#"
 						(click)="widget.actions.first(); $event.preventDefault()"
 						[attr.tabindex]="state.previousDisabled ? '-1' : null"
 						[attr.aria-disabled]="state.previousDisabled ? 'true' : null"
@@ -190,7 +190,7 @@ const defaultConfig: Partial<PaginationProps> = {
 					<a
 						[attr.aria-label]="state.ariaPreviousLabel"
 						class="page-link au-previous"
-						href
+						href="#"
 						(click)="widget.actions.previous(); $event.preventDefault()"
 						[attr.tabindex]="state.previousDisabled ? '-1' : null"
 						[attr.aria-disabled]="state.previousDisabled ? 'true' : null"
@@ -205,7 +205,7 @@ const defaultConfig: Partial<PaginationProps> = {
 					<a
 						[attr.aria-label]="state.ariaNextLabel"
 						class="page-link au-next"
-						href
+						href="#"
 						(click)="widget.actions.next(); $event.preventDefault()"
 						[attr.tabindex]="state.nextDisabled ? '-1' : null"
 						[attr.aria-disabled]="state.nextDisabled ? 'true' : null"
@@ -219,7 +219,7 @@ const defaultConfig: Partial<PaginationProps> = {
 					<a
 						[attr.aria-label]="state.ariaLastLabel"
 						class="page-link au-last"
-						href
+						href="#"
 						(click)="widget.actions.last(); $event.preventDefault()"
 						[attr.tabindex]="state.nextDisabled ? '-1' : null"
 						[attr.aria-disabled]="state.nextDisabled ? 'true' : null"
@@ -230,6 +230,7 @@ const defaultConfig: Partial<PaginationProps> = {
 					</a>
 				</li>
 			</ul>
+			<div aria-live="polite" class="visually-hidden">Current page is {{ state.page }}</div>
 		</ng-container>
 	`,
 })
diff --git a/e2e/htmlSnapshot.ts b/e2e/htmlSnapshot.ts
new file mode 100644
index 0000000000..1af87755d7
--- /dev/null
+++ b/e2e/htmlSnapshot.ts
@@ -0,0 +1,188 @@
+import type {Locator} from '@playwright/test';
+
+export type HTMLAttribute = {name: string; value: string};
+export type HTMLNode =
+	| null
+	| string
+	| {
+			tagName: string;
+			childNodes: HTMLNode[];
+			attributes: HTMLAttribute[];
+	  };
+
+export const htmlStructure = (locator: Locator): Promise<HTMLNode> =>
+	locator.evaluate((element) => {
+		const isElement = (node: Node): node is Element => node.nodeType === node.ELEMENT_NODE;
+		const isInput = (node: Element): node is HTMLInputElement => node.tagName === 'INPUT';
+		const isTextArea = (node: Element): node is HTMLTextAreaElement => node.tagName === 'TEXTAREA';
+		const recFn = (node: Node) => {
+			if (!isElement(node)) {
+				if (node.nodeType === node.TEXT_NODE) {
+					return node.nodeValue;
+				}
+				// Note: ignore comments
+				return null;
+			}
+			const tagName = node.tagName.toLowerCase();
+			const textarea = isTextArea(node);
+			const childNodes: any[] = [];
+			if (textarea) {
+				// only keep the actual current value of the textarea instead of the real attribute
+				childNodes.push(node.value);
+			} else {
+				for (const child of node.childNodes) {
+					const value = recFn(child);
+					if (value != null) {
+						childNodes.push(value);
+					}
+				}
+			}
+			const attributes: HTMLAttribute[] = [];
+			const input = isInput(node);
+			const checkbox = input && node.getAttribute('type')?.toLowerCase() === 'checkbox';
+			// only keep the actual current value of the input in attributes instead of the real attribute
+			// that only contains the initial value and may be present or not depending on the framework
+			if (checkbox) {
+				attributes.push({name: 'checked', value: `${node.checked}`});
+			} else if (input) {
+				attributes.push({name: 'value', value: node.value});
+			}
+			for (const {name, value} of node.attributes) {
+				if ((checkbox && name === 'checked') || (input && !checkbox && name === 'value')) {
+					continue;
+				}
+				attributes.push({name, value});
+			}
+			return {tagName, childNodes, attributes};
+		};
+		return recFn(element);
+	});
+
+const cleanChildNodes = (childNodes: HTMLNode[]) => {
+	childNodes = [...childNodes];
+	const result: HTMLNode[] = [];
+	for (let i = 0; i < childNodes.length; i++) {
+		let newValue = childNodes[i];
+		if (!newValue) continue;
+		if (typeof newValue === 'string') {
+			const previousValue = result[result.length - 1];
+			if (typeof previousValue === 'string') {
+				result.pop();
+				newValue = previousValue + newValue;
+			}
+		} else if (newValue.tagName === '') {
+			// only keep descendants
+			childNodes.splice(i, 1, ...newValue.childNodes);
+			i--;
+			continue;
+		}
+		result.push(newValue);
+	}
+	return removeWhiteSpace(result);
+};
+
+const removeWhiteSpace = (childNodes: HTMLNode[]) =>
+	childNodes.map((item) => (typeof item === 'string' ? item.replace(/\s+/g, ' ').trim() : item)).filter((item) => !!item);
+
+const compare = (a: number | string, b: number | string) => (a < b ? -1 : a > b ? 1 : 0);
+const compareName = ({name: a}: {name: string}, {name: b}: {name: string}) => compare(a, b);
+
+const spaceRegExp = /\s+/;
+const excludeClassRegExp = /^(s|ng)-/;
+const excludeAttrRegExp = /^(ng-|_ng|slot$)/;
+
+const excludeAttrSet = new Set([
+	'slot', // slot shouldn't be kept in the DOM by svelte, cf https://github.com/sveltejs/svelte/issues/8621
+
+	// The following attributes are used in our Angular components:
+	// FIXME (to discuss): do not use anymore the host element in AgnosUI Angular components
+	// so that we can filter it out (as it is done in au-alert, au-modal, and au-pagination in tagReplacements)
+	// and then remove the following list of attributes
+	'arialabel', // note: this should not be confused with the standard Aria attribute aria-label (which should not be removed)
+	'arialabelledby', // note: this should not be confused with the standard Aria attribute aria-labelledby (which should not be removed)
+	'classname',
+]);
+
+const removeTagsAndDescendants = new Set(['script', 'router-outlet']);
+const tagReplacements = new Map([
+	['app-root', 'div'],
+	['au-alert', ''],
+	['au-modal', ''],
+	['au-pagination', ''],
+	['au-rating', 'div'],
+	['au-select', 'div'],
+	['ng-component', ''],
+]);
+const filterTagName = (tagName: string) => {
+	const mapResult = tagReplacements.get(tagName);
+	if (mapResult != null) {
+		return mapResult;
+	}
+	if (tagName.startsWith('app-')) {
+		return '';
+	}
+	return tagName;
+};
+
+export const filterHtmlStructure = (node: HTMLNode): HTMLNode => {
+	// only keep what we want to compare
+	if (!node || typeof node === 'string') {
+		return node;
+	}
+	let {tagName, attributes, childNodes} = node;
+	if (removeTagsAndDescendants.has(tagName)) {
+		return null;
+	}
+	tagName = filterTagName(tagName);
+	if (tagName == '') {
+		attributes = [];
+	}
+	attributes = attributes
+		.filter(({name, value}) => !(excludeAttrSet.has(name) || excludeAttrRegExp.test(name)))
+		.map(({name, value}) => {
+			if (name === 'class') {
+				value = value
+					.trim()
+					.split(spaceRegExp)
+					.filter((className) => !excludeClassRegExp.test(className))
+					.sort()
+					.join(' ');
+			}
+			return {name, value};
+		})
+		.sort(compareName);
+	childNodes = cleanChildNodes(childNodes.map(filterHtmlStructure));
+	return {
+		tagName,
+		attributes,
+		childNodes,
+	};
+};
+
+export const htmlSnapshot = async (locator: Locator) => {
+	const res: string[] = [];
+	const recFn = (node: HTMLNode, level = '') => {
+		if (node && typeof node === 'object') {
+			const {tagName, attributes, childNodes} = node;
+			const hasAttributes = attributes.length > 0;
+			const hasChildNodes = childNodes.length > 0;
+			res.push(`${level}<${tagName}${hasAttributes ? '' : hasChildNodes ? '>' : ' />'}`);
+			if (hasAttributes) {
+				for (const {name, value} of attributes) {
+					res.push(`${level} ${name}=${JSON.stringify(value)}`);
+				}
+				res.push(`${level}${hasChildNodes ? '>' : '/>'}`);
+			}
+			if (hasChildNodes) {
+				for (const child of childNodes) {
+					recFn(child, `${level}\t`);
+				}
+				res.push(`${level}</${tagName}>`);
+			}
+		} else {
+			res.push(level + JSON.stringify(node));
+		}
+	};
+	recFn(filterHtmlStructure(await htmlStructure(locator)));
+	return res.join('\n');
+};
diff --git a/e2e/samplesMarkup.e2e-spec.ts b/e2e/samplesMarkup.e2e-spec.ts
new file mode 100644
index 0000000000..8c43b2bda1
--- /dev/null
+++ b/e2e/samplesMarkup.e2e-spec.ts
@@ -0,0 +1,19 @@
+import {test, expect} from '@playwright/test';
+import {htmlSnapshot} from './htmlSnapshot';
+import {globSync} from 'glob';
+import path from 'path';
+
+test.describe.parallel(`Samples markup consistency check`, () => {
+	const allRoutes = globSync('**/*.route.svelte', {cwd: path.join(__dirname, '../svelte/demo/samples')}).map(
+		(route) => `${route.replace(/\.route\.svelte$/, '').toLowerCase()}`
+	);
+	for (const route of allRoutes) {
+		test(`${route} should have a consistent markup`, async ({page}) => {
+			test.skip(route === 'pagination/pagination', 'FIXME: sample to be made consistent');
+			test.skip(route === 'select/select', 'FIXME: sample to be made consistent');
+			await page.goto(`#/${route}`);
+			await page.waitForSelector('.fade', {state: 'detached'}); // wait for fade transitions to be finished
+			expect(await htmlSnapshot(page.locator('body'))).toMatchSnapshot(`${route}.html`);
+		});
+	}
+});
diff --git a/e2e/samplesMarkup.e2e-spec.ts-snapshots/alert-config.html b/e2e/samplesMarkup.e2e-spec.ts-snapshots/alert-config.html
new file mode 100644
index 0000000000..5a630562a1
--- /dev/null
+++ b/e2e/samplesMarkup.e2e-spec.ts-snapshots/alert-config.html
@@ -0,0 +1,131 @@
+<body>
+	<div
+	 id="root"
+	>
+		<div
+		 class="container p-3"
+		>
+			<button
+			 class="btn btn-primary showAlert"
+			 type="button"
+			>
+				"Show alert"
+			</button>
+			<br />
+			<br />
+			<div
+			 class="d-flex flex-column"
+			>
+				<div
+				 class="d-flex form-group"
+				>
+					<label
+					 class="align-self-center me-3"
+					 for="typeSelect"
+					>
+						"Alert type:"
+					</label>
+					<select
+					 class="form-select w-auto"
+					 id="typeSelect"
+					>
+						<option
+						 value="success"
+						>
+							"success"
+						</option>
+						<option
+						 value="info"
+						>
+							"info"
+						</option>
+						<option
+						 value="warning"
+						>
+							"warning"
+						</option>
+						<option
+						 value="danger"
+						>
+							"danger"
+						</option>
+						<option
+						 value="primary"
+						>
+							"primary"
+						</option>
+						<option
+						 value="secondary"
+						>
+							"secondary"
+						</option>
+						<option
+						 value="light"
+						>
+							"light"
+						</option>
+						<option
+						 value="dark"
+						>
+							"dark"
+						</option>
+					</select>
+				</div>
+				<label>
+					<input
+					 checked="true"
+					 class="form-check-input me-1"
+					 type="checkbox"
+					/>
+					"Animation on init"
+				</label>
+				<label>
+					<input
+					 checked="true"
+					 class="form-check-input me-1"
+					 type="checkbox"
+					/>
+					"Animation"
+				</label>
+				<label>
+					<input
+					 checked="true"
+					 class="dismissibleInput form-check-input me-1"
+					 type="checkbox"
+					/>
+					"Dismissible"
+				</label>
+			</div>
+			<br />
+			<br />
+			<div
+			 class="alert alert-success au-alert d-flex show w-100"
+			 role="alert"
+			>
+				<div
+				 class="alert-body"
+				>
+					<h4
+					 class="alert-heading"
+					>
+						"Well done!"
+					</h4>
+					<p>
+						"Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content."
+					</p>
+					<hr />
+					<p
+					 class="mb-0"
+					>
+						"Whenever you need to, be sure to use margin utilities to keep things nice and tidy."
+					</p>
+				</div>
+				<button
+				 aria-label="Close"
+				 class="btn-close ms-auto"
+				 type="button"
+				/>
+			</div>
+		</div>
+	</div>
+</body>
\ No newline at end of file
diff --git a/e2e/samplesMarkup.e2e-spec.ts-snapshots/alert-dynamic.html b/e2e/samplesMarkup.e2e-spec.ts-snapshots/alert-dynamic.html
new file mode 100644
index 0000000000..40d0acb947
--- /dev/null
+++ b/e2e/samplesMarkup.e2e-spec.ts-snapshots/alert-dynamic.html
@@ -0,0 +1,31 @@
+<body>
+	<div
+	 id="root"
+	>
+		<div
+		 class="container p-3"
+		>
+			<button
+			 class="addError btn btn-primary me-1"
+			>
+				"Add error"
+			</button>
+			<button
+			 class="addInfo btn btn-primary me-1"
+			>
+				"Add info"
+			</button>
+			<button
+			 class="addWarning btn btn-primary me-1"
+			>
+				"Add warning"
+			</button>
+			<br />
+			<div
+			 class="alertCount mb-3"
+			>
+				"Alerts in the service: 0"
+			</div>
+		</div>
+	</div>
+</body>
\ No newline at end of file
diff --git a/e2e/samplesMarkup.e2e-spec.ts-snapshots/alert-generic.html b/e2e/samplesMarkup.e2e-spec.ts-snapshots/alert-generic.html
new file mode 100644
index 0000000000..9dc0c7fad1
--- /dev/null
+++ b/e2e/samplesMarkup.e2e-spec.ts-snapshots/alert-generic.html
@@ -0,0 +1,90 @@
+<body>
+	<div
+	 id="root"
+	>
+		<div
+		 class="container p-3"
+		>
+			<div
+			 class="alert alert-primary au-alert d-flex show w-100"
+			 role="alert"
+			>
+				<div
+				 class="alert-body"
+				>
+					"Simple primary alert"
+				</div>
+			</div>
+			<div
+			 class="alert alert-secondary au-alert d-flex show w-100"
+			 role="alert"
+			>
+				<div
+				 class="alert-body"
+				>
+					"Simple secondary alert"
+				</div>
+			</div>
+			<div
+			 class="alert alert-success au-alert d-flex show w-100"
+			 role="alert"
+			>
+				<div
+				 class="alert-body"
+				>
+					"Simple success alert"
+				</div>
+			</div>
+			<div
+			 class="alert alert-danger au-alert d-flex show w-100"
+			 role="alert"
+			>
+				<div
+				 class="alert-body"
+				>
+					"Simple danger alert"
+				</div>
+			</div>
+			<div
+			 class="alert alert-warning au-alert d-flex show w-100"
+			 role="alert"
+			>
+				<div
+				 class="alert-body"
+				>
+					"Simple warning alert"
+				</div>
+			</div>
+			<div
+			 class="alert alert-info au-alert d-flex show w-100"
+			 role="alert"
+			>
+				<div
+				 class="alert-body"
+				>
+					"Simple info alert"
+				</div>
+			</div>
+			<div
+			 class="alert alert-light au-alert d-flex show w-100"
+			 role="alert"
+			>
+				<div
+				 class="alert-body"
+				>
+					"Simple light alert"
+				</div>
+			</div>
+			<div
+			 class="alert alert-dark au-alert d-flex show w-100"
+			 role="alert"
+			>
+				<div
+				 class="alert-body"
+				>
+					"Simple dark alert"
+				</div>
+			</div>
+		</div>
+	</div>
+</body>
\ No newline at end of file
diff --git a/e2e/samplesMarkup.e2e-spec.ts-snapshots/alert-icon.html b/e2e/samplesMarkup.e2e-spec.ts-snapshots/alert-icon.html
new file mode 100644
index 0000000000..6695db534d
--- /dev/null
+++ b/e2e/samplesMarkup.e2e-spec.ts-snapshots/alert-icon.html
@@ -0,0 +1,140 @@
+<body>
+	<div
+	 id="root"
+	>
+		<div
+		 class="container p-3"
+		>
+			<div
+			 class="alert alert-success au-alert d-flex show w-100"
+			 role="alert"
+			>
+				<span
+				 class="align-items-center d-flex icon-20 me-1 svg"
+				>
+					<svg
+					 class="bi bi-check-circle-fill"
+					 fill="currentColor"
+					 height="16"
+					 viewBox="0 0 16 16"
+					 width="16"
+					 xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+						 d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"
+						/>
+					</svg>
+				</span>
+				<div
+				 class="alert-body d-flex w-100"
+				>
+					"Alert success with a customisable icon"
+				</div>
+			</div>
+			<div
+			 class="alert alert-warning au-alert d-flex show w-100"
+			 role="alert"
+			>
+				<span
+				 class="align-items-center d-flex icon-20 me-1 svg"
+				>
+					<svg
+					 class="bi bi-exclamation-triangle-fill"
+					 fill="currentColor"
+					 height="16"
+					 viewBox="0 0 16 16"
+					 width="16"
+					 xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+						 d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"
+						/>
+					</svg>
+				</span>
+				<div
+				 class="alert-body d-flex w-100"
+				>
+					"Alert warning with a customisable icon"
+				</div>
+			</div>
+			<div
+			 class="alert alert-danger au-alert d-flex show w-100"
+			 role="alert"
+			>
+				<span
+				 class="align-items-center d-flex icon-20 me-1 svg"
+				>
+					<svg
+					 class="bi bi-dash-circle-fill"
+					 fill="currentColor"
+					 height="16"
+					 viewBox="0 0 16 16"
+					 width="16"
+					 xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+						 d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM4.5 7.5a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1h-7z"
+						/>
+					</svg>
+				</span>
+				<div
+				 class="alert-body d-flex w-100"
+				>
+					"Alert danger with a customisable icon"
+				</div>
+			</div>
+			<div
+			 class="alert alert-info au-alert d-flex show w-100"
+			 role="alert"
+			>
+				<span
+				 class="align-items-center d-flex icon-20 me-1 svg"
+				>
+					<svg
+					 class="bi bi-info-circle-fill"
+					 fill="currentColor"
+					 height="16"
+					 viewBox="0 0 16 16"
+					 width="16"
+					 xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+						 d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"
+						/>
+					</svg>
+				</span>
+				<div
+				 class="alert-body d-flex w-100"
+				>
+					"Alert info with a customisable icon"
+				</div>
+			</div>
+			<div
+			 class="alert alert-light au-alert d-flex show w-100"
+			 role="alert"
+			>
+				<span
+				 class="align-items-center d-flex icon-20 me-1 svg"
+				>
+					<svg
+					 class="bi bi-lightbulb"
+					 fill="currentColor"
+					 height="16"
+					 viewBox="0 0 16 16"
+					 width="16"
+					 xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+						 d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13a.5.5 0 0 1 0 1 .5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1 0-1 .5.5 0 0 1 0-1 .5.5 0 0 1-.46-.302l-.761-1.77a1.964 1.964 0 0 0-.453-.618A5.984 5.984 0 0 1 2 6zm6-5a5 5 0 0 0-3.479 8.592c.263.254.514.564.676.941L5.83 12h4.342l.632-1.467c.162-.377.413-.687.676-.941A5 5 0 0 0 8 1z"
+						/>
+					</svg>
+				</span>
+				<div
+				 class="alert-body d-flex w-100"
+				>
+					"Alert light with a customisable icon"
+				</div>
+			</div>
+		</div>
+	</div>
+</body>
\ No newline at end of file
diff --git a/e2e/samplesMarkup.e2e-spec.ts-snapshots/alert-playground.html b/e2e/samplesMarkup.e2e-spec.ts-snapshots/alert-playground.html
new file mode 100644
index 0000000000..7a7ed228a3
--- /dev/null
+++ b/e2e/samplesMarkup.e2e-spec.ts-snapshots/alert-playground.html
@@ -0,0 +1,23 @@
+<body>
+	<div
+	 id="root"
+	>
+		<div
+		 class="container p-3"
+		>
+			<div
+			 class="alert alert-primary au-alert d-flex show w-100"
+			 role="alert"
+			>
+				<div
+				 class="alert-body"
+				/>
+				<button
+				 aria-label="Close"
+				 class="btn-close ms-auto"
+				 type="button"
+				/>
+			</div>
+		</div>
+	</div>
+</body>
\ No newline at end of file
diff --git a/e2e/samplesMarkup.e2e-spec.ts-snapshots/focustrack-focustrack.html b/e2e/samplesMarkup.e2e-spec.ts-snapshots/focustrack-focustrack.html
new file mode 100644
index 0000000000..bd3c6fbe17
--- /dev/null
+++ b/e2e/samplesMarkup.e2e-spec.ts-snapshots/focustrack-focustrack.html
@@ -0,0 +1,80 @@
+<body>
+	<div
+	 id="root"
+	>
+		<div
+		 class="container p-3"
+		>
+			<div
+			 class="demo-focustrack"
+			>
+				<div
+				 class="border my-2 p-2"
+				>
+					<h5>
+						"Container"
+					</h5>
+					<input
+					 class="form-control"
+					 id="focusableInput"
+					 placeholder="Focusable input"
+					 type="text"
+					 value=""
+					/>
+					<br />
+					<input
+					 class="form-control"
+					 id="focusableInput2"
+					 placeholder="Focusable input 2"
+					 type="text"
+					 value=""
+					/>
+				</div>
+				<input
+				 class="form-control"
+				 disabled=""
+				 id="disabledInput"
+				 placeholder="Disabled input"
+				 type="text"
+				 value=""
+				/>
+				<br />
+				<div
+				 class="form-check mb-2"
+				>
+					<input
+					 checked="false"
+					 class="form-check-input"
+					 disabled=""
+					 id="containerHasFocus"
+					 type="checkbox"
+					/>
+					<label
+					 class="form-check-label"
+					 for="containerHasFocus"
+					>
+						"Focus in container"
+					</label>
+				</div>
+				<label
+				 class="form-label"
+				 for="activeElement"
+				>
+					"Active element history:"
+				</label>
+				<textarea
+				 class="form-control mb-2"
+				 id="activeElementHistory"
+				 readonly=""
+				>
+					"[{\"tagName\":\"body\"}]"
+				</textarea>
+				<button
+				 class="btn btn-primary"
+				>
+					"Clear"
+				</button>
+			</div>
+		</div>
+	</div>
+</body>
\ No newline at end of file
diff --git a/e2e/samplesMarkup.e2e-spec.ts-snapshots/modal-default.html b/e2e/samplesMarkup.e2e-spec.ts-snapshots/modal-default.html
new file mode 100644
index 0000000000..71f4ac0eec
--- /dev/null
+++ b/e2e/samplesMarkup.e2e-spec.ts-snapshots/modal-default.html
@@ -0,0 +1,20 @@
+<body>
+	<div
+	 id="root"
+	>
+		<div
+		 class="container p-3"
+		>
+			<button
+			 class="btn btn-primary"
+			 type="button"
+			>
+				"Launch demo modal"
+			</button>
+			<div
+			 class="mt-3"
+			 data-testid="message"
+			/>
+		</div>
+	</div>
+</body>
\ No newline at end of file
diff --git a/e2e/samplesMarkup.e2e-spec.ts-snapshots/modal-playground.html b/e2e/samplesMarkup.e2e-spec.ts-snapshots/modal-playground.html
new file mode 100644
index 0000000000..bf2304d7e7
--- /dev/null
+++ b/e2e/samplesMarkup.e2e-spec.ts-snapshots/modal-playground.html
@@ -0,0 +1,9 @@
+<body>
+	<div
+	 id="root"
+	>
+		<div
+		 class="container p-3"
+		/>
+	</div>
+</body>
\ No newline at end of file
diff --git a/e2e/samplesMarkup.e2e-spec.ts-snapshots/modal-stack.html b/e2e/samplesMarkup.e2e-spec.ts-snapshots/modal-stack.html
new file mode 100644
index 0000000000..df7bb85dbf
--- /dev/null
+++ b/e2e/samplesMarkup.e2e-spec.ts-snapshots/modal-stack.html
@@ -0,0 +1,15 @@
+<body>
+	<div
+	 id="root"
+	>
+		<div
+		 class="container p-3"
+		>
+			<button
+			 class="btn btn-primary"
+			>
+				"Launch demo modal"
+			</button>
+		</div>
+	</div>
+</body>
\ No newline at end of file
diff --git a/e2e/samplesMarkup.e2e-spec.ts-snapshots/pagination-config.html b/e2e/samplesMarkup.e2e-spec.ts-snapshots/pagination-config.html
new file mode 100644
index 0000000000..8abe85f27b
--- /dev/null
+++ b/e2e/samplesMarkup.e2e-spec.ts-snapshots/pagination-config.html
@@ -0,0 +1,162 @@
+<body>
+	<div
+	 id="root"
+	>
+		<div
+		 class="container p-3"
+		>
+			<ul
+			 class="au-pagination pagination"
+			>
+				<li
+				 class="disabled page-item"
+				>
+					<a
+					 aria-disabled="true"
+					 aria-label="Action link for previous page"
+					 class="au-previous page-link"
+					 href="#"
+					 tabindex="-1"
+					>
+						<span
+						 aria-hidden="true"
+						>
+							"‹"
+						</span>
+					</a>
+				</li>
+				<li
+				 aria-current="page"
+				 class="active page-item"
+				>
+					<a
+					 aria-label="Page 1 of 1"
+					 class="au-page page-link"
+					 href="#"
+					>
+						"1"
+						<span
+						 class="visually-hidden"
+						>
+							"(current)"
+						</span>
+					</a>
+				</li>
+				<li
+				 class="disabled page-item"
+				>
+					<a
+					 aria-disabled="true"
+					 aria-label="Action link for next page"
+					 class="au-next page-link"
+					 href="#"
+					 tabindex="-1"
+					>
+						<span
+						 aria-hidden="true"
+						>
+							"›"
+						</span>
+					</a>
+				</li>
+			</ul>
+			<div
+			 aria-live="polite"
+			 class="visually-hidden"
+			>
+				"Current page is 1"
+			</div>
+			<div
+			 class="mt-3"
+			>
+				"Disabled:"
+				<div
+				 class="btn-group mb-2"
+				 id="btn-config-disabled"
+				>
+					<button
+					 class="btn btn-outline-secondary btn-sm"
+					>
+						"true"
+					</button>
+					<button
+					 class="active btn btn-outline-secondary btn-sm"
+					>
+						"false"
+					</button>
+				</div>
+				<br />
+				"Collection size:"
+				<div
+				 class="btn-group mb-2"
+				 id="btn-config-collectionSize"
+				>
+					<button
+					 class="btn btn-outline-secondary btn-sm"
+					>
+						"40"
+					</button>
+					<button
+					 class="btn btn-outline-secondary btn-sm"
+					>
+						"30"
+					</button>
+					<button
+					 class="btn btn-outline-secondary btn-sm"
+					>
+						"20"
+					</button>
+					<button
+					 class="active btn btn-outline-secondary btn-sm"
+					>
+						"undefined"
+					</button>
+				</div>
+				<br />
+				"className:"
+				<div
+				 class="btn-group mb-2"
+				 id="btn-config-className"
+				>
+					<button
+					 class="btn btn-outline-secondary btn-sm"
+					>
+						"justify-content-center"
+					</button>
+					<button
+					 class="btn btn-outline-secondary btn-sm"
+					>
+						"justify-content-end"
+					</button>
+					<button
+					 class="active btn btn-outline-secondary btn-sm"
+					>
+						"undefined"
+					</button>
+				</div>
+				<br />
+				"slotPages:"
+				<div
+				 class="btn-group mb-2"
+				 id="btn-config-slotPages"
+				>
+					<button
+					 class="btn btn-outline-secondary btn-sm"
+					>
+						"reuse default"
+					</button>
+					<button
+					 class="btn btn-outline-secondary btn-sm"
+					>
+						"custom pages"
+					</button>
+					<button
+					 class="active btn btn-outline-secondary btn-sm"
+					>
+						"undefined"
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+</body>
\ No newline at end of file
diff --git a/e2e/samplesMarkup.e2e-spec.ts-snapshots/pagination-default.html b/e2e/samplesMarkup.e2e-spec.ts-snapshots/pagination-default.html
new file mode 100644
index 0000000000..3d57c543eb
--- /dev/null
+++ b/e2e/samplesMarkup.e2e-spec.ts-snapshots/pagination-default.html
@@ -0,0 +1,79 @@
+<body>
+	<div
+	 id="root"
+	>
+		<div
+		 class="container p-3"
+		>
+			<ul
+			 class="au-pagination pagination"
+			>
+				<li
+				 class="disabled page-item"
+				>
+					<a
+					 aria-disabled="true"
+					 aria-label="Action link for previous page"
+					 class="au-previous page-link"
+					 href="#"
+					 tabindex="-1"
+					>
+						<span
+						 aria-hidden="true"
+						>
+							"‹"
+						</span>
+					</a>
+				</li>
+				<li
+				 aria-current="page"
+				 class="active page-item"
+				>
+					<a
+					 aria-label="Page 1 of 1"
+					 class="au-page page-link"
+					 href="#"
+					>
+						"1"
+						<span
+						 class="visually-hidden"
+						>
+							"(current)"
+						</span>
+					</a>
+				</li>
+				<li
+				 class="disabled page-item"
+				>
+					<a
+					 aria-disabled="true"
+					 aria-label="Action link for next page"
+					 class="au-next page-link"
+					 href="#"
+					 tabindex="-1"
+					>
+						<span
+						 aria-hidden="true"
+						>
+							"›"
+						</span>
+					</a>
+				</li>
+			</ul>
+			<div
+			 aria-live="polite"
+			 class="visually-hidden"
+			>
+				"Current page is 1"
+			</div>
+			<div>
+				"Current page:"
+				<span
+				 id="defaultPage"
+				>
+					"1"
+				</span>
+			</div>
+		</div>
+	</div>
+</body>
\ No newline at end of file
diff --git a/e2e/samplesMarkup.e2e-spec.ts-snapshots/pagination-playground.html b/e2e/samplesMarkup.e2e-spec.ts-snapshots/pagination-playground.html
new file mode 100644
index 0000000000..e38161aeb6
--- /dev/null
+++ b/e2e/samplesMarkup.e2e-spec.ts-snapshots/pagination-playground.html
@@ -0,0 +1,71 @@
+<body>
+	<div
+	 id="root"
+	>
+		<div
+		 class="container p-3"
+		>
+			<ul
+			 class="au-pagination pagination"
+			>
+				<li
+				 class="disabled page-item"
+				>
+					<a
+					 aria-disabled="true"
+					 aria-label="Action link for previous page"
+					 class="au-previous page-link"
+					 href="#"
+					 tabindex="-1"
+					>
+						<span
+						 aria-hidden="true"
+						>
+							"‹"
+						</span>
+					</a>
+				</li>
+				<li
+				 aria-current="page"
+				 class="active page-item"
+				>
+					<a
+					 aria-label="Page 1 of 1"
+					 class="au-page page-link"
+					 href="#"
+					>
+						"1"
+						<span
+						 class="visually-hidden"
+						>
+							"(current)"
+						</span>
+					</a>
+				</li>
+				<li
+				 class="disabled page-item"
+				>
+					<a
+					 aria-disabled="true"
+					 aria-label="Action link for next page"
+					 class="au-next page-link"
+					 href="#"
+					 tabindex="-1"
+					>
+						<span
+						 aria-hidden="true"
+						>
+							"›"
+						</span>
+					</a>
+				</li>
+			</ul>
+			<div
+			 aria-live="polite"
+			 class="visually-hidden"
+			>
+				"Current page is 1"
+			</div>
+		</div>
+	</div>
+</body>
\ No newline at end of file
diff --git a/e2e/samplesMarkup.e2e-spec.ts-snapshots/rating-config.html b/e2e/samplesMarkup.e2e-spec.ts-snapshots/rating-config.html
new file mode 100644
index 0000000000..17b7fc57a4
--- /dev/null
+++ b/e2e/samplesMarkup.e2e-spec.ts-snapshots/rating-config.html
@@ -0,0 +1,222 @@
+<body>
+	<div
+	 id="root"
+	>
+		<div
+		 class="container p-3"
+		>
+			<div
+			 aria-label="Rating"
+			 aria-valuemax="10"
+			 aria-valuemin="0"
+			 aria-valuenow="3"
+			 aria-valuetext="3 out of 10"
+			 class="au-rating d-inline-flex"
+			 role="slider"
+			 tabindex="0"
+			>
+				<span
+				 class="visually-hidden"
+				>
+					"(*)"
+				</span>
+				<span
+				 class="au-rating-star"
+				 style="cursor: pointer;"
+				>
+					"★"
+				</span>
+				<span
+				 class="visually-hidden"
+				>
+					"(*)"
+				</span>
+				<span
+				 class="au-rating-star"
+				 style="cursor: pointer;"
+				>
+					"★"
+				</span>
+				<span
+				 class="visually-hidden"
+				>
+					"(*)"
+				</span>
+				<span
+				 class="au-rating-star"
+				 style="cursor: pointer;"
+				>
+					"★"
+				</span>
+				<span
+				 class="visually-hidden"
+				>
+					"( )"
+				</span>
+				<span
+				 class="au-rating-star"
+				 style="cursor: pointer;"
+				>
+					"☆"
+				</span>
+				<span
+				 class="visually-hidden"
+				>
+					"( )"
+				</span>
+				<span
+				 class="au-rating-star"
+				 style="cursor: pointer;"
+				>
+					"☆"
+				</span>
+				<span
+				 class="visually-hidden"
+				>
+					"( )"
+				</span>
+				<span
+				 class="au-rating-star"
+				 style="cursor: pointer;"
+				>
+					"☆"
+				</span>
+				<span
+				 class="visually-hidden"
+				>
+					"( )"
+				</span>
+				<span
+				 class="au-rating-star"
+				 style="cursor: pointer;"
+				>
+					"☆"
+				</span>
+				<span
+				 class="visually-hidden"
+				>
+					"( )"
+				</span>
+				<span
+				 class="au-rating-star"
+				 style="cursor: pointer;"
+				>
+					"☆"
+				</span>
+				<span
+				 class="visually-hidden"
+				>
+					"( )"
+				</span>
+				<span
+				 class="au-rating-star"
+				 style="cursor: pointer;"
+				>
+					"☆"
+				</span>
+				<span
+				 class="visually-hidden"
+				>
+					"( )"
+				</span>
+				<span
+				 class="au-rating-star"
+				 style="cursor: pointer;"
+				>
+					"☆"
+				</span>
+			</div>
+			<div
+			 class="mt-3"
+			>
+				"Disabled:"
+				<div
+				 class="btn-group mb-2"
+				 id="btn-config-disabled"
+				>
+					<button
+					 class="btn btn-outline-secondary btn-sm"
+					>
+						"true"
+					</button>
+					<button
+					 class="active btn btn-outline-secondary btn-sm"
+					>
+						"false"
+					</button>
+				</div>
+				<br />
+				"maxRating:"
+				<div
+				 class="btn-group mb-2"
+				 id="btn-config-maxRating"
+				>
+					<button
+					 class="btn btn-outline-secondary btn-sm"
+					>
+						"40"
+					</button>
+					<button
+					 class="btn btn-outline-secondary btn-sm"
+					>
+						"30"
+					</button>
+					<button
+					 class="btn btn-outline-secondary btn-sm"
+					>
+						"20"
+					</button>
+					<button
+					 class="active btn btn-outline-secondary btn-sm"
+					>
+						"undefined"
+					</button>
+				</div>
+				<br />
+				"className:"
+				<div
+				 class="btn-group mb-2"
+				 id="btn-config-className"
+				>
+					<button
+					 class="btn btn-outline-secondary btn-sm"
+					>
+						"fs-1"
+					</button>
+					<button
+					 class="btn btn-outline-secondary btn-sm"
+					>
+						"fs-2"
+					</button>
+					<button
+					 class="active btn btn-outline-secondary btn-sm"
+					>
+						"undefined"
+					</button>
+				</div>
+				<br />
+				"slotStar:"
+				<div
+				 class="btn-group mb-2"
+				 id="btn-config-slotStar"
+				>
+					<button
+					 class="btn btn-outline-secondary btn-sm"
+					>
+						"custom"
+					</button>
+					<button
+					 class="btn btn-outline-secondary btn-sm"
+					>
+						"'*'"
+					</button>
+					<button
+					 class="active btn btn-outline-secondary btn-sm"
+					>
+						"undefined"
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+</body>
\ No newline at end of file
diff --git a/e2e/samplesMarkup.e2e-spec.ts-snapshots/rating-customtemplate.html b/e2e/samplesMarkup.e2e-spec.ts-snapshots/rating-customtemplate.html
new file mode 100644
index 0000000000..ddd3d18873
--- /dev/null
+++ b/e2e/samplesMarkup.e2e-spec.ts-snapshots/rating-customtemplate.html
@@ -0,0 +1,171 @@
+<body>
+	<div
+	 id="root"
+	>
+		<div
+		 class="container p-3"
+		>
+			<div
+			 aria-label="custom rating"
+			 aria-valuemax="10"
+			 aria-valuemin="0"
+			 aria-valuenow="7"
+			 aria-valuetext="7 out of 10"
+			 class="au-rating d-inline-flex rating-custom"
+			 role="slider"
+			 tabindex="0"
+			>
+				<span
+				 class="visually-hidden"
+				>
+					"(*)"
+				</span>
+				<span
+				 class="au-rating-star"
+				 style="cursor: pointer;"
+				>
+					<span
+					 class="bad filled star-2"
+					>
+						"★"
+					</span>
+				</span>
+				<span
+				 class="visually-hidden"
+				>
+					"(*)"
+				</span>
+				<span
+				 class="au-rating-star"
+				 style="cursor: pointer;"
+				>
+					<span
+					 class="bad filled star-2"
+					>
+						"★"
+					</span>
+				</span>
+				<span
+				 class="visually-hidden"
+				>
+					"(*)"
+				</span>
+				<span
+				 class="au-rating-star"
+				 style="cursor: pointer;"
+				>
+					<span
+					 class="bad filled star-2"
+					>
+						"★"
+					</span>
+				</span>
+				<span
+				 class="visually-hidden"
+				>
+					"(*)"
+				</span>
+				<span
+				 class="au-rating-star"
+				 style="cursor: pointer;"
+				>
+					<span
+					 class="filled star-2"
+					>
+						"★"
+					</span>
+				</span>
+				<span
+				 class="visually-hidden"
+				>
+					"(*)"
+				</span>
+				<span
+				 class="au-rating-star"
+				 style="cursor: pointer;"
+				>
+					<span
+					 class="filled star-2"
+					>
+						"★"
+					</span>
+				</span>
+				<span
+				 class="visually-hidden"
+				>
+					"(*)"
+				</span>
+				<span
+				 class="au-rating-star"
+				 style="cursor: pointer;"
+				>
+					<span
+					 class="filled star-2"
+					>
+						"★"
+					</span>
+				</span>
+				<span
+				 class="visually-hidden"
+				>
+					"(*)"
+				</span>
+				<span
+				 class="au-rating-star"
+				 style="cursor: pointer;"
+				>
+					<span
+					 class="filled star-2"
+					>
+						"★"
+					</span>
+				</span>
+				<span
+				 class="visually-hidden"
+				>
+					"( )"
+				</span>
+				<span
+				 class="au-rating-star"
+				 style="cursor: pointer;"
+				>
+					<span
+					 class="star-2"
+					>
+						"★"
+					</span>
+				</span>
+				<span
+				 class="visually-hidden"
+				>
+					"( )"
+				</span>
+				<span
+				 class="au-rating-star"
+				 style="cursor: pointer;"
+				>
+					<span
+					 class="star-2"
+					>
+						"★"
+					</span>
+				</span>
+				<span
+				 class="visually-hidden"
+				>
+					"( )"
+				</span>
+				<span
+				 class="au-rating-star"
+				 style="cursor: pointer;"
+				>
+					<span
+					 class="star-2"
+					>
+						"★"
+					</span>
+				</span>
+			</div>
+		</div>
+	</div>
+</body>
\ No newline at end of file
diff --git a/e2e/samplesMarkup.e2e-spec.ts-snapshots/rating-default.html b/e2e/samplesMarkup.e2e-spec.ts-snapshots/rating-default.html
new file mode 100644
index 0000000000..2484c734ef
--- /dev/null
+++ b/e2e/samplesMarkup.e2e-spec.ts-snapshots/rating-default.html
@@ -0,0 +1,153 @@
+<body>
+	<div
+	 id="root"
+	>
+		<div
+		 class="container p-3"
+		>
+			<div
+			 aria-label="rating"
+			 aria-valuemax="10"
+			 aria-valuemin="0"
+			 aria-valuenow="3"
+			 aria-valuetext="3 out of 10"
+			 class="au-rating d-inline-flex"
+			 role="slider"
+			 tabindex="0"
+			>
+				<span
+				 class="visually-hidden"
+				>
+					"(*)"
+				</span>
+				<span
+				 class="au-rating-star"
+				 style="cursor: pointer;"
+				>
+					"★"
+				</span>
+				<span
+				 class="visually-hidden"
+				>
+					"(*)"
+				</span>
+				<span
+				 class="au-rating-star"
+				 style="cursor: pointer;"
+				>
+					"★"
+				</span>
+				<span
+				 class="visually-hidden"
+				>
+					"(*)"
+				</span>
+				<span
+				 class="au-rating-star"
+				 style="cursor: pointer;"
+				>
+					"★"
+				</span>
+				<span
+				 class="visually-hidden"
+				>
+					"( )"
+				</span>
+				<span
+				 class="au-rating-star"
+				 style="cursor: pointer;"
+				>
+					"☆"
+				</span>
+				<span
+				 class="visually-hidden"
+				>
+					"( )"
+				</span>
+				<span
+				 class="au-rating-star"
+				 style="cursor: pointer;"
+				>
+					"☆"
+				</span>
+				<span
+				 class="visually-hidden"
+				>
+					"( )"
+				</span>
+				<span
+				 class="au-rating-star"
+				 style="cursor: pointer;"
+				>
+					"☆"
+				</span>
+				<span
+				 class="visually-hidden"
+				>
+					"( )"
+				</span>
+				<span
+				 class="au-rating-star"
+				 style="cursor: pointer;"
+				>
+					"☆"
+				</span>
+				<span
+				 class="visually-hidden"
+				>
+					"( )"
+				</span>
+				<span
+				 class="au-rating-star"
+				 style="cursor: pointer;"
+				>
+					"☆"
+				</span>
+				<span
+				 class="visually-hidden"
+				>
+					"( )"
+				</span>
+				<span
+				 class="au-rating-star"
+				 style="cursor: pointer;"
+				>
+					"☆"
+				</span>
+				<span
+				 class="visually-hidden"
+				>
+					"( )"
+				</span>
+				<span
+				 class="au-rating-star"
+				 style="cursor: pointer;"
+				>
+					"☆"
+				</span>
+			</div>
+			<div>
+				"Current rate:"
+				<span
+				 id="defaultRating"
+				>
+					"3"
+				</span>
+				<br />
+				"Hovered:"
+				<span
+				 id="defaultHovered"
+				>
+					"0"
+				</span>
+				<br />
+				"Left:"
+				<span
+				 id="defaultLeft"
+				>
+					"0"
+				</span>
+			</div>
+		</div>
+	</div>
+</body>
\ No newline at end of file
diff --git a/e2e/samplesMarkup.e2e-spec.ts-snapshots/rating-form.html b/e2e/samplesMarkup.e2e-spec.ts-snapshots/rating-form.html
new file mode 100644
index 0000000000..5c63526887
--- /dev/null
+++ b/e2e/samplesMarkup.e2e-spec.ts-snapshots/rating-form.html
@@ -0,0 +1,171 @@
+<body>
+	<div
+	 id="root"
+	>
+		<div
+		 class="container p-3"
+		>
+			<label
+			 class="form-label"
+			 id="ratingLabel"
+			>
+				"Rating of your experience"
+			</label>
+			<br />
+			<div
+			 aria-label="Rating"
+			 aria-labelledby="ratingLabel"
+			 aria-valuemax="10"
+			 aria-valuemin="0"
+			 aria-valuenow="0"
+			 aria-valuetext="0 out of 10"
+			 class="au-rating d-inline-flex"
+			 role="slider"
+			 tabindex="0"
+			>
+				<span
+				 class="visually-hidden"
+				>
+					"( )"
+				</span>
+				<span
+				 class="au-rating-star"
+				 style="cursor: pointer;"
+				>
+					"☆"
+				</span>
+				<span
+				 class="visually-hidden"
+				>
+					"( )"
+				</span>
+				<span
+				 class="au-rating-star"
+				 style="cursor: pointer;"
+				>
+					"☆"
+				</span>
+				<span
+				 class="visually-hidden"
+				>
+					"( )"
+				</span>
+				<span
+				 class="au-rating-star"
+				 style="cursor: pointer;"
+				>
+					"☆"
+				</span>
+				<span
+				 class="visually-hidden"
+				>
+					"( )"
+				</span>
+				<span
+				 class="au-rating-star"
+				 style="cursor: pointer;"
+				>
+					"☆"
+				</span>
+				<span
+				 class="visually-hidden"
+				>
+					"( )"
+				</span>
+				<span
+				 class="au-rating-star"
+				 style="cursor: pointer;"
+				>
+					"☆"
+				</span>
+				<span
+				 class="visually-hidden"
+				>
+					"( )"
+				</span>
+				<span
+				 class="au-rating-star"
+				 style="cursor: pointer;"
+				>
+					"☆"
+				</span>
+				<span
+				 class="visually-hidden"
+				>
+					"( )"
+				</span>
+				<span
+				 class="au-rating-star"
+				 style="cursor: pointer;"
+				>
+					"☆"
+				</span>
+				<span
+				 class="visually-hidden"
+				>
+					"( )"
+				</span>
+				<span
+				 class="au-rating-star"
+				 style="cursor: pointer;"
+				>
+					"☆"
+				</span>
+				<span
+				 class="visually-hidden"
+				>
+					"( )"
+				</span>
+				<span
+				 class="au-rating-star"
+				 style="cursor: pointer;"
+				>
+					"☆"
+				</span>
+				<span
+				 class="visually-hidden"
+				>
+					"( )"
+				</span>
+				<span
+				 class="au-rating-star"
+				 style="cursor: pointer;"
+				>
+					"☆"
+				</span>
+			</div>
+			<div
+			 class="form-text small"
+			 id="form-msg"
+			>
+				<div
+				 class="text-danger"
+				>
+					"Please rate us"
+				</div>
+			</div>
+			<pre>
+				"Model:"
+				<span
+				 id="form-model"
+				>
+					<b>
+						"0"
+					</b>
+				</span>
+			</pre>
+			<button
+			 class="btn btn-outline-success btn-sm me-2"
+			 id="form-btn-enable"
+			>
+				"control enabled"
+			</button>
+			<button
+			 class="btn btn-outline-primary btn-sm me-2"
+			 id="form-btn-clear"
+			>
+				"Clear"
+			</button>
+		</div>
+	</div>
+</body>
\ No newline at end of file
diff --git a/e2e/samplesMarkup.e2e-spec.ts-snapshots/rating-playground.html b/e2e/samplesMarkup.e2e-spec.ts-snapshots/rating-playground.html
new file mode 100644
index 0000000000..e26e5b8435
--- /dev/null
+++ b/e2e/samplesMarkup.e2e-spec.ts-snapshots/rating-playground.html
@@ -0,0 +1,131 @@
+<body>
+	<div
+	 id="root"
+	>
+		<div
+		 class="container p-3"
+		>
+			<div
+			 aria-label="Rating"
+			 aria-valuemax="10"
+			 aria-valuemin="0"
+			 aria-valuenow="0"
+			 aria-valuetext="0 out of 10"
+			 class="au-rating d-inline-flex"
+			 role="slider"
+			 tabindex="0"
+			>
+				<span
+				 class="visually-hidden"
+				>
+					"( )"
+				</span>
+				<span
+				 class="au-rating-star"
+				 style="cursor: pointer;"
+				>
+					"☆"
+				</span>
+				<span
+				 class="visually-hidden"
+				>
+					"( )"
+				</span>
+				<span
+				 class="au-rating-star"
+				 style="cursor: pointer;"
+				>
+					"☆"
+				</span>
+				<span
+				 class="visually-hidden"
+				>
+					"( )"
+				</span>
+				<span
+				 class="au-rating-star"
+				 style="cursor: pointer;"
+				>
+					"☆"
+				</span>
+				<span
+				 class="visually-hidden"
+				>
+					"( )"
+				</span>
+				<span
+				 class="au-rating-star"
+				 style="cursor: pointer;"
+				>
+					"☆"
+				</span>
+				<span
+				 class="visually-hidden"
+				>
+					"( )"
+				</span>
+				<span
+				 class="au-rating-star"
+				 style="cursor: pointer;"
+				>
+					"☆"
+				</span>
+				<span
+				 class="visually-hidden"
+				>
+					"( )"
+				</span>
+				<span
+				 class="au-rating-star"
+				 style="cursor: pointer;"
+				>
+					"☆"
+				</span>
+				<span
+				 class="visually-hidden"
+				>
+					"( )"
+				</span>
+				<span
+				 class="au-rating-star"
+				 style="cursor: pointer;"
+				>
+					"☆"
+				</span>
+				<span
+				 class="visually-hidden"
+				>
+					"( )"
+				</span>
+				<span
+				 class="au-rating-star"
+				 style="cursor: pointer;"
+				>
+					"☆"
+				</span>
+				<span
+				 class="visually-hidden"
+				>
+					"( )"
+				</span>
+				<span
+				 class="au-rating-star"
+				 style="cursor: pointer;"
+				>
+					"☆"
+				</span>
+				<span
+				 class="visually-hidden"
+				>
+					"( )"
+				</span>
+				<span
+				 class="au-rating-star"
+				 style="cursor: pointer;"
+				>
+					"☆"
+				</span>
+			</div>
+		</div>
+	</div>
+</body>
\ No newline at end of file
diff --git a/e2e/samplesMarkup.e2e-spec.ts-snapshots/rating-readonly.html b/e2e/samplesMarkup.e2e-spec.ts-snapshots/rating-readonly.html
new file mode 100644
index 0000000000..c6ecf91077
--- /dev/null
+++ b/e2e/samplesMarkup.e2e-spec.ts-snapshots/rating-readonly.html
@@ -0,0 +1,127 @@
+<body>
+	<div
+	 id="root"
+	>
+		<div
+		 class="container p-3"
+		>
+			<div
+			 aria-label="readonly rating"
+			 aria-readonly="true"
+			 aria-valuemax="5"
+			 aria-valuemin="0"
+			 aria-valuenow="3.64"
+			 aria-valuetext="3.64 out of 5"
+			 class="au-rating d-inline-flex rating-custom"
+			 role="slider"
+			 tabindex="0"
+			>
+				<span
+				 class="visually-hidden"
+				>
+					"(*)"
+				</span>
+				<span
+				 class="au-rating-star"
+				 style="cursor: default;"
+				>
+					<span
+					 class="full star"
+					>
+						<span
+						 class="half"
+						 style="width: 100%;"
+						>
+							"♥"
+						</span>
+						"♥"
+					</span>
+				</span>
+				<span
+				 class="visually-hidden"
+				>
+					"(*)"
+				</span>
+				<span
+				 class="au-rating-star"
+				 style="cursor: default;"
+				>
+					<span
+					 class="full star"
+					>
+						<span
+						 class="half"
+						 style="width: 100%;"
+						>
+							"♥"
+						</span>
+						"♥"
+					</span>
+				</span>
+				<span
+				 class="visually-hidden"
+				>
+					"(*)"
+				</span>
+				<span
+				 class="au-rating-star"
+				 style="cursor: default;"
+				>
+					<span
+					 class="full star"
+					>
+						<span
+						 class="half"
+						 style="width: 100%;"
+						>
+							"♥"
+						</span>
+						"♥"
+					</span>
+				</span>
+				<span
+				 class="visually-hidden"
+				>
+					"(*)"
+				</span>
+				<span
+				 class="au-rating-star"
+				 style="cursor: default;"
+				>
+					<span
+					 class="star"
+					>
+						<span
+						 class="half"
+						 style="width: 64%;"
+						>
+							"♥"
+						</span>
+						"♥"
+					</span>
+				</span>
+				<span
+				 class="visually-hidden"
+				>
+					"( )"
+				</span>
+				<span
+				 class="au-rating-star"
+				 style="cursor: default;"
+				>
+					<span
+					 class="star"
+					>
+						<span
+						 class="half"
+						 style="width: 0%;"
+						>
+							"♥"
+						</span>
+						"♥"
+					</span>
+				</span>
+			</div>
+		</div>
+	</div>
+</body>
\ No newline at end of file
diff --git a/e2e/samplesMarkup.e2e-spec.ts-snapshots/transition-transition.html b/e2e/samplesMarkup.e2e-spec.ts-snapshots/transition-transition.html
new file mode 100644
index 0000000000..9eaf7eb95d
--- /dev/null
+++ b/e2e/samplesMarkup.e2e-spec.ts-snapshots/transition-transition.html
@@ -0,0 +1,139 @@
+<body>
+	<div
+	 id="root"
+	>
+		<div
+		 class="container p-3"
+		>
+			<h2>
+				"Transition example"
+			</h2>
+			<div
+			 class="demo-transition mb-3"
+			>
+				<button
+				 class="btn btn-outline-secondary"
+				 id="toggle-component"
+				>
+					"Toggle component"
+				</button>
+				<div
+				 class="transition-inner"
+				>
+					<p
+					 class="mt-2"
+					>
+						"Transition:"
+						<button
+						 class="active btn btn-outline-secondary btn-sm ms-2"
+						 type="button"
+						>
+							"Vertical collapse"
+						</button>
+						<button
+						 class="btn btn-outline-secondary btn-sm ms-2"
+						 type="button"
+						>
+							"Horizontal collapse"
+						</button>
+						<button
+						 class="btn btn-outline-secondary btn-sm ms-2"
+						 type="button"
+						>
+							"Fade"
+						</button>
+					</p>
+					<label
+					 class="form-check"
+					>
+						<input
+						 checked="true"
+						 class="form-check-input"
+						 type="checkbox"
+						/>
+						"Animation"
+					</label>
+					<label
+					 class="form-check"
+					>
+						<input
+						 checked="false"
+						 class="form-check-input"
+						 type="checkbox"
+						/>
+						"Animation on init"
+					</label>
+					<label
+					 class="form-check"
+					>
+						<input
+						 checked="true"
+						 class="form-check-input"
+						 type="checkbox"
+						/>
+						"Remove from DOM"
+					</label>
+					<label
+					 class="form-check mb-2"
+					>
+						<input
+						 checked="true"
+						 class="form-check-input"
+						 type="checkbox"
+						/>
+						"Visible"
+					</label>
+					<button
+					 class="btn btn-outline-primary"
+					 type="button"
+					>
+						"Toggle"
+					</button>
+					<button
+					 class="btn btn-outline-primary ms-2"
+					 type="button"
+					>
+						"Toggle with animation"
+					</button>
+					<button
+					 class="btn btn-outline-primary ms-2"
+					 type="button"
+					>
+						"Toggle without animation"
+					</button>
+					<ul
+					 class="mt-2"
+					>
+						<li>
+							"visible = true"
+						</li>
+						<li>
+							"transitioning = false"
+						</li>
+						<li>
+							"shown = true"
+						</li>
+						<li>
+							"hidden = false"
+						</li>
+					</ul>
+					<div
+					 class="collapse show"
+					 style="max-width: 300px;"
+					>
+						<div
+						 class="card"
+						 style="width: 300px;"
+						>
+							<div
+							 class="card-body"
+							>
+								"You can collapse this card by clicking Toggle"
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</body>
\ No newline at end of file
diff --git a/playwright.config.ts b/playwright.config.ts
index 54017dd889..ca8bb47846 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -65,6 +65,7 @@ if (includesDemo) {
 const config: PlaywrightTestConfig = {
 	testDir: 'e2e',
 	testMatch: '*e2e-spec.ts',
+	snapshotPathTemplate: '{testDir}/{testFilePath}-snapshots/{arg}{ext}',
 	retries: 0,
 	reporter: [['list'], ['html', {open: 'never'}]],
 	forbidOnly: isCI,
diff --git a/react/demo/app/samples/alert/Icon.route.tsx b/react/demo/app/samples/alert/Icon.route.tsx
index 1771fb1a09..96fadc2b75 100644
--- a/react/demo/app/samples/alert/Icon.route.tsx
+++ b/react/demo/app/samples/alert/Icon.route.tsx
@@ -23,7 +23,7 @@ const AlertIcon = ({widget, state}: AlertContext) => {
 	return (
 		<>
 			<span className="d-flex align-items-center svg icon-20 me-1" dangerouslySetInnerHTML={{__html: typeIcon[state.type]}}></span>
-			<div className="alert-body">
+			<div className="alert-body d-flex w-100">
 				<Slot slotContent={state.slotDefault} props={{widget, state}}></Slot>
 			</div>
 			{state.dismissible ? (
diff --git a/react/demo/app/samples/pagination/Config.route.tsx b/react/demo/app/samples/pagination/Config.route.tsx
index 495c3bae0f..fcc8a9601c 100644
--- a/react/demo/app/samples/pagination/Config.route.tsx
+++ b/react/demo/app/samples/pagination/Config.route.tsx
@@ -80,7 +80,7 @@ const PaginationDemo = () => {
 					</button>
 				</div>
 				<br />
-				collection size:&nbsp;
+				Collection size:&nbsp;
 				<div id="btn-config-collectionSize" className="btn-group mb-2">
 					<button
 						className={`btn btn-sm btn-outline-secondary ${paginationConfig.collectionSize === 40 ? 'active' : ''}`}
diff --git a/react/lib/Alert.tsx b/react/lib/Alert.tsx
index 4273e4d17c..8f7aaf2af3 100644
--- a/react/lib/Alert.tsx
+++ b/react/lib/Alert.tsx
@@ -45,7 +45,7 @@ export const Alert = forwardRef(function Alert(props: PropsWithChildren<Partial<
 	return (
 		<>
 			{state.hidden ? null : (
-				<div className={`d-flex alert w-100 alert-${state.type}`} ref={refTransition}>
+				<div className={`au-alert d-flex alert w-100 alert-${state.type}`} role="alert" ref={refTransition}>
 					<Slot slotContent={state.slotStructure} props={slotContext}></Slot>
 				</div>
 			)}
diff --git a/react/lib/pagination/Pagination.tsx b/react/lib/pagination/Pagination.tsx
index 2e0320de88..18f6dee4df 100644
--- a/react/lib/pagination/Pagination.tsx
+++ b/react/lib/pagination/Pagination.tsx
@@ -125,7 +125,9 @@ export function Pagination(props: Partial<PaginationProps>) {
 				<Slot slotContent={state.slotPages} props={slotContext}></Slot>
 				{ItemsAfter}
 			</ul>
-			<div className="visually-hidden">{state.page && `Current page is ${state.page}`}</div>
+			<div aria-live="polite" className="visually-hidden">
+				{state.page && `Current page is ${state.page}`}
+			</div>
 		</>
 	);
 }
diff --git a/svelte/demo/samples/alert/Config.route.svelte b/svelte/demo/samples/alert/Config.route.svelte
index 0e748021e0..eee35cfa42 100644
--- a/svelte/demo/samples/alert/Config.route.svelte
+++ b/svelte/demo/samples/alert/Config.route.svelte
@@ -24,7 +24,7 @@
 	});
 </script>
 
-<button class="btn btn-primary showAlert" on:click={() => alert.api.open()}>Open alert</button>
+<button class="btn btn-primary showAlert" on:click={() => alert.api.open()} type="button">Show alert</button>
 
 <br />
 <br />
diff --git a/svelte/demo/samples/alert/Dynamic.route.svelte b/svelte/demo/samples/alert/Dynamic.route.svelte
index 184c757331..0655c1f8d9 100644
--- a/svelte/demo/samples/alert/Dynamic.route.svelte
+++ b/svelte/demo/samples/alert/Dynamic.route.svelte
@@ -17,16 +17,17 @@
 	export const alerts$ = createAlerts();
 </script>
 
-<button class="btn btn-primary addError" on:click={() => alerts$.add({type: 'danger', slotDefault: 'Error', dismissible: true, animation: true})}
+<button class="btn btn-primary addError me-1" on:click={() => alerts$.add({type: 'danger', slotDefault: 'Error', dismissible: true, animation: true})}
 	>Add error</button
 >
 
-<button class="btn btn-primary addInfo" on:click={() => alerts$.add({type: 'info', slotDefault: 'Info', dismissible: true, animation: true})}
+<button class="btn btn-primary addInfo me-1" on:click={() => alerts$.add({type: 'info', slotDefault: 'Info', dismissible: true, animation: true})}
 	>Add info</button
 >
 
-<button class="btn btn-primary addWarning" on:click={() => alerts$.add({type: 'warning', slotDefault: 'Warning', dismissible: true, animation: true})}
-	>Add warning</button
+<button
+	class="btn btn-primary addWarning me-1"
+	on:click={() => alerts$.add({type: 'warning', slotDefault: 'Warning', dismissible: true, animation: true})}>Add warning</button
 >
 
 <br />
diff --git a/svelte/demo/samples/alert/Icon.svelte b/svelte/demo/samples/alert/Icon.svelte
index 0bc5c52541..71e4b70dff 100644
--- a/svelte/demo/samples/alert/Icon.svelte
+++ b/svelte/demo/samples/alert/Icon.svelte
@@ -24,13 +24,15 @@
 
 <!-- eslint-disable-next-line svelte/no-at-html-tags -->
 <span class="d-flex align-items-center svg icon-20 me-1">{@html typeIcon[state.type]}</span>
-<Slot slotContent={state.slotDefault} props={{widget, state}} let:component let:props>
-	<slot slot="slot" let:props {...props} />
-	<svelte:component this={component} {...props}>
-		<svelte:fragment let:state let:widget><slot {state} {widget} /></svelte:fragment>
-		<slot name="structure" slot="structure" let:state let:widget {state} {widget} />
-	</svelte:component>
-</Slot>
+<div class="alert-body d-flex w-100">
+	<Slot slotContent={state.slotDefault} props={{widget, state}} let:component let:props>
+		<slot slot="slot" let:props {...props} />
+		<svelte:component this={component} {...props}>
+			<svelte:fragment let:state let:widget><slot {state} {widget} /></svelte:fragment>
+			<slot name="structure" slot="structure" let:state let:widget {state} {widget} />
+		</svelte:component>
+	</Slot>
+</div>
 {#if state.dismissible}
 	<button type="button" class="btn-close ms-auto" on:click={() => widget.api.close()} aria-label={state.ariaCloseButtonLabel} />
 {/if}
diff --git a/svelte/demo/samples/focustrack/Focustrack.route.svelte b/svelte/demo/samples/focustrack/Focustrack.route.svelte
index 7aaccf86e8..f0a2218690 100644
--- a/svelte/demo/samples/focustrack/Focustrack.route.svelte
+++ b/svelte/demo/samples/focustrack/Focustrack.route.svelte
@@ -19,6 +19,6 @@
 		<label class="form-check-label" for="containerHasFocus">Focus in container</label>
 	</div>
 	<label for="activeElement" class="form-label">Active element history:</label>
-	<textarea class="form-control mb-2" id="activeElementHistory">{JSON.stringify(activeElements)}</textarea>
-	<button class="btn btn-primary mb-2" on:click={() => (activeElements = [])}>Clear</button>
+	<textarea class="form-control mb-2" id="activeElementHistory" readonly>{JSON.stringify(activeElements)}</textarea>
+	<button class="btn btn-primary" on:click={() => (activeElements = [])}>Clear</button>
 </div>
diff --git a/svelte/demo/samples/modal/Default.route.svelte b/svelte/demo/samples/modal/Default.route.svelte
index f83827944a..cdf898034e 100644
--- a/svelte/demo/samples/modal/Default.route.svelte
+++ b/svelte/demo/samples/modal/Default.route.svelte
@@ -13,7 +13,6 @@
 		<button type="button" class="btn btn-outline-danger" on:click={() => modal.api.close(false)}>No</button>
 	</svelte:fragment>
 </Modal>
-<br />
 <button
 	type="button"
 	class="btn btn-primary"
diff --git a/svelte/demo/samples/pagination/Config.route.svelte b/svelte/demo/samples/pagination/Config.route.svelte
index 4f5c154599..1b94f884b3 100644
--- a/svelte/demo/samples/pagination/Config.route.svelte
+++ b/svelte/demo/samples/pagination/Config.route.svelte
@@ -33,7 +33,7 @@
 		</button>
 	</div>
 	<br />
-	Collection Size::
+	Collection size:
 	<div id="btn-config-collectionSize" class="btn-group mb-2">
 		<button
 			class="btn btn-sm btn-outline-secondary"
@@ -104,7 +104,7 @@
 			class:active={$widgetsConfig$.pagination?.slotPages === CustomPages}
 			on:click={() => updatePaginationConfig({slotPages: CustomPages})}
 		>
-			custom Pages
+			custom pages
 		</button>
 		<button
 			class="btn btn-sm btn-outline-secondary"
diff --git a/svelte/demo/samples/pagination/Default.route.svelte b/svelte/demo/samples/pagination/Default.route.svelte
index 77fa1aca56..6d40e529e7 100644
--- a/svelte/demo/samples/pagination/Default.route.svelte
+++ b/svelte/demo/samples/pagination/Default.route.svelte
@@ -6,5 +6,5 @@
 
 <Pagination bind:page />
 <div>
-	Current page: <span id="defaultPage">{page}</span><br />
+	Current page: <span id="defaultPage">{page}</span>
 </div>
diff --git a/svelte/demo/samples/transition/InnerComponent.svelte b/svelte/demo/samples/transition/InnerComponent.svelte
index 34677cb1f8..99fedd7ea1 100644
--- a/svelte/demo/samples/transition/InnerComponent.svelte
+++ b/svelte/demo/samples/transition/InnerComponent.svelte
@@ -68,20 +68,19 @@
 	<button type="button" class="btn btn-outline-primary" on:click={() => toggle()}>Toggle</button>
 	<button type="button" class="ms-2 btn btn-outline-primary" on:click={() => toggle(undefined, true)}>Toggle with animation</button>
 	<button type="button" class="ms-2 btn btn-outline-primary" on:click={() => toggle(undefined, false)}>Toggle without animation</button>
-	<div>
-		<ul class="mt-2">
-			<li>visible = {$visible$}</li>
-			<li>transitioning = {$transitioning$}</li>
-			<li>shown = {$shown$}</li>
-			<li>hidden = {$hidden$}</li>
-		</ul>
 
-		{#if !$paramRemoveFromDom$ || !$hidden$}
-			<div use:directive={{transition: $paramTransition$, animation: $paramAnimation$}} style="max-width: 300px;">
-				<div class="card" style="width: 300px;">
-					<div class="card-body">You can collapse this card by clicking Toggle</div>
-				</div>
+	<ul class="mt-2">
+		<li>visible = {$visible$}</li>
+		<li>transitioning = {$transitioning$}</li>
+		<li>shown = {$shown$}</li>
+		<li>hidden = {$hidden$}</li>
+	</ul>
+
+	{#if !$paramRemoveFromDom$ || !$hidden$}
+		<div use:directive={{transition: $paramTransition$, animation: $paramAnimation$}} style="max-width: 300px;">
+			<div class="card" style="width: 300px;">
+				<div class="card-body">You can collapse this card by clicking Toggle</div>
 			</div>
-		{/if}
-	</div>
+		</div>
+	{/if}
 </div>