From 3b96a8785b85b91e79c8ed481cf63940f2063c8d Mon Sep 17 00:00:00 2001
From: Daniel Beck <daniel@beck.win>
Date: Thu, 6 May 2021 14:39:13 +0200
Subject: [PATCH 1/6] build(www): fix whitelabel copy condition

(cherry picked from commit fd0d8faac16489c76d2c569b177cd09fe040b016)
---
 packages/components/stencil-dev.config.ts | 6 +++---
 packages/components/stencil.config.ts     | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/components/stencil-dev.config.ts b/packages/components/stencil-dev.config.ts
index 592c5686cc..1ed10b33bc 100644
--- a/packages/components/stencil-dev.config.ts
+++ b/packages/components/stencil-dev.config.ts
@@ -17,9 +17,9 @@ export const config: Config = {
         },
         { src: '../../design-tokens/dist/*', dest: 'build/', warn: true },
         { src: './html/*', dest: './', warn: true },
-        !process.env.WHITELABEL
-          ? { src: './html/telekom/*', dest: './', warn: true }
-          : {},
+        ...(!process.env.WHITELABEL
+          ? [{ src: './html/telekom/*', dest: './', warn: true }]
+          : []),
       ],
     },
   ],
diff --git a/packages/components/stencil.config.ts b/packages/components/stencil.config.ts
index 64cbee0303..6ada577cd5 100644
--- a/packages/components/stencil.config.ts
+++ b/packages/components/stencil.config.ts
@@ -59,9 +59,9 @@ export const config: Config = {
         },
         { src: '../../design-tokens/dist/*', dest: 'build/', warn: true },
         { src: './html/*', dest: './', warn: true },
-        !process.env.WHITELABEL
-          ? { src: './html/telekom/*', dest: './', warn: true }
-          : {},
+        ...(!process.env.WHITELABEL
+          ? [{ src: './html/telekom/*', dest: './', warn: true }]
+          : []),
       ],
     },
     {

From 239ece1592e1c46f7e152167306959f649c9b3a8 Mon Sep 17 00:00:00 2001
From: Daniel Beck <daniel@beck.win>
Date: Wed, 1 Sep 2021 20:46:06 +0200
Subject: [PATCH 2/6] chore(ci): use correct workspace (#561)

---
 .github/workflows/publish.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
index 318db7e5dc..a454bc5b3c 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -124,7 +124,7 @@ jobs:
 
       - name: Build Angular Proxy
         run: |
-          yarn workspace @telekom/scale-components process-angular-proxies
+          yarn workspace @telekom/scale-components-neutral process-angular-proxies
           yarn workspace @telekom/scale-components-angular-neutral build
 
       - name: Build React Proxy

From 885702ab429542e79ea63295faa664beb320acc8 Mon Sep 17 00:00:00 2001
From: Daniel Beck <daniel@beck.win>
Date: Thu, 23 Jun 2022 16:22:09 +0200
Subject: [PATCH 3/6] ci: pass --no-verify-access to lerna publish cmd

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index c52ad485fd..b0fd9f8ba2 100644
--- a/package.json
+++ b/package.json
@@ -16,9 +16,9 @@
     "new-version": "lerna version --conventional-commits --no-push",
     "force-version": "lerna version --conventional-commits --force-publish",
     "format": "lerna run format",
-    "publish-telekom": "lerna publish -y from-package --no-git-tag-version --no-push --force-publish @telekom/scale-components,@telekom/scale-components-react,@telekom/scale-components-angular,@telekom/scale-components-vue,@telekom/scale-design-tokens --dist-tag next",
+    "publish-telekom": "lerna publish -y from-package --no-verify-access --no-git-tag-version --no-push --force-publish @telekom/scale-components,@telekom/scale-components-react,@telekom/scale-components-angular,@telekom/scale-components-vue,@telekom/scale-design-tokens --dist-tag next",
     "prepare-neutral": "node scripts/prepare-neutral-release.js && git commit . -m 'chore: temp commit'",
-    "publish-neutral": "lerna publish -y from-package --no-git-tag-version --no-push --force-publish @telekom/scale-components-neutral,@telekom/scale-components-react-neutral,@telekom/scale-components-angular-neutral,@telekom/scale-components-vue-neutral,@telekom/scale-design-tokens-neutral --dist-tag next"
+    "publish-neutral": "lerna publish -y from-package --no-verify-access --no-git-tag-version --no-push --force-publish @telekom/scale-components-neutral,@telekom/scale-components-react-neutral,@telekom/scale-components-angular-neutral,@telekom/scale-components-vue-neutral,@telekom/scale-design-tokens-neutral --dist-tag next"
   },
   "devDependencies": {
     "@commitlint/cli": "^12.1.1",

From 0cb7e4e5698a0477075714a4d8a9a19a0cac35ee Mon Sep 17 00:00:00 2001
From: Arturo Castillo Delgado <ac@iconstorm.com>
Date: Thu, 14 Sep 2023 18:18:07 +0200
Subject: [PATCH 4/6] chore: fix CI failing to publish (#2128) (#2129)

---
 .github/workflows/publish.yml | 21 +++------------------
 package.json                  |  2 +-
 yarn.lock                     |  4 ++--
 3 files changed, 6 insertions(+), 21 deletions(-)

diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
index 417f7fba83..4485c51693 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -32,16 +32,11 @@ jobs:
         if: steps.yarn-cache.outputs.cache-hit != 'true'
         run: yarn
 
-      - name: Run Lerna bootstrap
+      - name: Bootstrap
         if: steps.yarn-cache.outputs.cache-hit != 'true'
         run: |
           yarn bootstrap
 
-      - name: Generate files
-        if: steps.yarn-cache.outputs.cache-hit == 'true'
-        run: |
-          lerna run generate
-
       - name: Build Components
         run: |
           yarn workspace @telekom/scale-components build
@@ -85,16 +80,11 @@ jobs:
         if: steps.yarn-cache.outputs.cache-hit != 'true'
         run: yarn
 
-      - name: Run Lerna bootstrap
+      - name: Bootstrap
         if: steps.yarn-cache.outputs.cache-hit != 'true'
         run: |
           yarn bootstrap
 
-      - name: Generate files
-        if: steps.yarn-cache.outputs.cache-hit == 'true'
-        run: |
-          lerna run generate
-
       - name: Build Components
         run: |
           yarn workspace @telekom/scale-components build
@@ -165,16 +155,11 @@ jobs:
         if: steps.yarn-cache.outputs.cache-hit != 'true'
         run: yarn
 
-      - name: Run Lerna bootstrap
+      - name: Bootstrap
         if: steps.yarn-cache.outputs.cache-hit != 'true'
         run: |
           WHITELABEL=1 yarn bootstrap
 
-      - name: Generate files
-        if: steps.yarn-cache.outputs.cache-hit == 'true'
-        run: |
-          WHITELABEL=1 lerna run generate
-
       - name: Build Components
         run: |
           WHITELABEL=1 yarn workspace @telekom/scale-components build
diff --git a/package.json b/package.json
index d1d908a3a5..15d978e0d1 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "@commitlint/cli": "^12.1.1",
     "@commitlint/config-conventional": "^12.1.1",
     "husky": "^3.0.9",
-    "lerna": "^3.20.2",
+    "lerna": "3.22.1",
     "prettier": "2.7.1",
     "replace-in-file": "^6.2.0",
     "rimraf": "2.6.3"
diff --git a/yarn.lock b/yarn.lock
index adcb124366..3ce600ed5e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13572,9 +13572,9 @@ lcid@^2.0.0:
   dependencies:
     invert-kv "^2.0.0"
 
-lerna@^3.20.2:
+lerna@3.22.1:
   version "3.22.1"
-  resolved "https://registry.yarnpkg.com/lerna/-/lerna-3.22.1.tgz"
+  resolved "https://registry.yarnpkg.com/lerna/-/lerna-3.22.1.tgz#82027ac3da9c627fd8bf02ccfeff806a98e65b62"
   integrity sha512-vk1lfVRFm+UuEFA7wkLKeSF7Iz13W+N/vFd48aW2yuS7Kv0RbNm2/qcDPV863056LMfkRlsEe+QYOw3palj5Lg==
   dependencies:
     "@lerna/add" "3.21.0"

From 3753fca9be665b85e33b3c362a4b9193052648d3 Mon Sep 17 00:00:00 2001
From: Arturo <arturo@arturu.com>
Date: Fri, 3 Nov 2023 16:40:10 +0100
Subject: [PATCH 5/6] chore: trigger ci


From 942c40676ec6354843fd0087ab2743357b446d4a Mon Sep 17 00:00:00 2001
From: Amir Baghdoust <baghdoust@gmail.com>
Date: Thu, 19 Sep 2024 13:31:00 +0200
Subject: [PATCH 6/6] Merge branch 'main' into release (#2355)

* ci: sets up docker compose alias for compatibility (#2342)

* fix: dropdown scroll fixed (#2333)

* chip accessibility fix (#2332)

* feat: chip keyboard handling fixed

* feat: chip html added

* fix: snapshot updated

* fix: focus issues fixed

* fix: readme fix

* checkbox and switch css fixes for high contrast mode (#2317)

fix: checkbox and switch CSS fixes for high contrast mode

* ghost btn in storybook  (#2341)

* fix: ghost btn in storybook fixed

* fix: one more ghost fixed

* event part in storybook fixed (#2345)

* fix: event part in storybook fixed

* fix: german versions fixed

* aria details vs aria describedby fixed for text field (#2352)

* refactor: aria details vs aria describedby fixed for text field

* fix: reverted to ariaDetailedId + description added to storybook

* chore(release): publish (#2354)

* chore(release): publish

---------

Co-authored-by: tshimber <110041439+tshimber@users.noreply.github.com>
---
 .github/workflows/build-pr.yml                |  9 ++-
 CHANGELOG.md                                  | 14 ++++
 lerna.json                                    |  2 +-
 packages/components-angular/CHANGELOG.md      |  9 +++
 packages/components-angular/package.json      |  2 +-
 packages/components-react/CHANGELOG.md        |  9 +++
 packages/components-react/package.json        |  2 +-
 packages/components-vue/CHANGELOG.md          |  9 +++
 packages/components-vue/package.json          |  2 +-
 packages/components/CHANGELOG.md              | 15 ++++
 packages/components/package.json              |  2 +-
 .../src/components/checkbox/checkbox.css      | 13 ++++
 .../chip/__snapshots__/chip.spec.ts.snap      |  2 +-
 .../components/src/components/chip/chip.css   |  3 +-
 .../components/src/components/chip/chip.tsx   | 73 +++++++------------
 .../components/src/components/chip/readme.md  |  2 +-
 .../dropdown-select/dropdown-select.tsx       | 10 +--
 .../src/components/switch/switch.css          |  2 +-
 .../src/components/text-field/readme.md       |  2 -
 .../src/components/text-field/text-field.tsx  | 13 +++-
 packages/components/src/html/checkbox.html    | 50 +++++++++++++
 packages/components/src/html/chip.html        | 51 +++++++++++++
 packages/components/src/html/text-field.html  | 45 ++++++++++++
 packages/design-tokens/CHANGELOG.md           |  9 +++
 packages/design-tokens/package.json           |  2 +-
 packages/storybook-vue/CHANGELOG.md           |  9 +++
 packages/storybook-vue/package.json           |  6 +-
 .../components/button/Button.stories.mdx      | 10 +--
 .../components/text-field/ScaleTextField.vue  |  2 +-
 .../text-field/TextField.stories.mdx          | 43 +++++++----
 .../setup_and_info/ScaleAndAngular_de.md      |  4 +-
 .../setup_and_info/ScaleAndAngular_en.md      |  4 +-
 .../setup_and_info/ScaleAndReact_de.md        | 10 ++-
 .../setup_and_info/ScaleAndReact_en.md        | 10 ++-
 .../stories/setup_and_info/ScaleAndVue_de.md  |  6 +-
 .../stories/setup_and_info/ScaleAndVue_en.md  |  6 +-
 packages/visual-tests/CHANGELOG.md            |  9 +++
 packages/visual-tests/package.json            |  2 +-
 38 files changed, 359 insertions(+), 114 deletions(-)
 create mode 100644 packages/components/src/html/checkbox.html
 create mode 100644 packages/components/src/html/chip.html
 create mode 100644 packages/components/src/html/text-field.html

diff --git a/.github/workflows/build-pr.yml b/.github/workflows/build-pr.yml
index 7a6c434b70..4170af692c 100644
--- a/.github/workflows/build-pr.yml
+++ b/.github/workflows/build-pr.yml
@@ -134,12 +134,15 @@ jobs:
     runs-on: ubuntu-20.04
     steps:
       - uses: actions/checkout@v3
-        with:
-          ref: ${{ github.head_ref }}
       - uses: actions/setup-node@v3
         with:
           node-version: 16
-
+      - name: Set up Docker Compose alias 
+        run: |
+          sudo touch /usr/bin/docker-compose
+          echo 'docker compose --compatibility "$@"' | sudo tee /usr/bin/docker-compose
+          sudo chmod +x /usr/bin/docker-compose
+          
       - name: Restore Lerna
         id: yarn-cache
         uses: actions/cache@v2
diff --git a/CHANGELOG.md b/CHANGELOG.md
index c4f055f6ee..6b9af1d47c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.0.0-beta.153](https://github.com/amir-ba/scale/compare/v3.0.0-beta.152...v3.0.0-beta.153) (2024-09-19)
+
+
+### Bug Fixes
+
+* dropdown scroll fixed ([#2327](https://github.com/scale/issues/2327)) ([6f326eb](https://github.com/telekom/scale/commit/6f326eb138eff93080d39b1c74d48d9393fd1684))
+* chip accessibility fix ([#2328](https://github.com/telekom/scale/issues/2328)) ([0b21978](https://github.com/telekom/scale/commit/0b21978bad9516d9958aa61e733a3f8348d11799))
+* checkbox and switch css fixes for high contrast mode ([#2300](https://github.com/scale/issues/2300)) ([318df56](https://github.com/telekom/scale/commit/318df5658a21b7eea44abe37eba1fc6bedfc243c))
+* ghost btn in storybook ([#2312](https://github.com/scale/issues/2312)) ([168f710](https://github.com/telekom/scale/commit/168f710fedae9df7f08decb79066b14bd7f73d1e))
+* update of event descriptions in storybook ([#2315](https://github.com/scale/issues/2315)) ([8681ed8](https://github.com/telekom/scale/commit/8681ed8d4f1cd08a756cf7e952e520df840c40b4))
+* aria describedby added extended for other use cases in text field ([#2349](https://github.com/scale/issues/2349)) ([2706542](https://github.com/telekom/scale/commit/270654297695571068c894aee30178729f361833))
+
+
+
 # [3.0.0-beta.152](https://github.com/telekom/scale/compare/v3.0.0-beta.151...v3.0.0-beta.152) (2024-07-10)
 
 
diff --git a/lerna.json b/lerna.json
index cc003408c9..38d3ad7c17 100644
--- a/lerna.json
+++ b/lerna.json
@@ -7,7 +7,7 @@
     "--pure-lockfile"
   ],
   "useWorkspaces": true,
-  "version": "3.0.0-beta.152",
+  "version": "3.0.0-beta.153",
   "command": {
     "version": {
       "allowBranch": "main"
diff --git a/packages/components-angular/CHANGELOG.md b/packages/components-angular/CHANGELOG.md
index 571e1a52cc..45a1eb8e10 100644
--- a/packages/components-angular/CHANGELOG.md
+++ b/packages/components-angular/CHANGELOG.md
@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.0.0-beta.153](https://github.com/telekom/scale/compare/v3.0.0-beta.152...v3.0.0-beta.153) (2024-09-19)
+
+**Note:** Version bump only for package @telekom/scale-components-angular
+
+
+
+
+
+
 # [3.0.0-beta.152](https://github.com/telekom/scale/compare/v3.0.0-beta.151...v3.0.0-beta.152) (2024-07-10)
 
 **Note:** Version bump only for package @telekom/scale-components-angular
diff --git a/packages/components-angular/package.json b/packages/components-angular/package.json
index b0c28b458f..269663bb4f 100644
--- a/packages/components-angular/package.json
+++ b/packages/components-angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@telekom/scale-components-angular",
-  "version": "3.0.0-beta.152",
+  "version": "3.0.0-beta.153",
   "description": "Angular specific wrapper for @telekom/scale-components",
   "license": "MPL-2.0",
   "homepage": "https://github.com/telekom/scale",
diff --git a/packages/components-react/CHANGELOG.md b/packages/components-react/CHANGELOG.md
index 9afef2e5cf..0bfd4a4b1c 100644
--- a/packages/components-react/CHANGELOG.md
+++ b/packages/components-react/CHANGELOG.md
@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.0.0-beta.153](https://github.com/telekom/scale/compare/v3.0.0-beta.152...v3.0.0-beta.153) (2024-09-19)
+
+**Note:** Version bump only for package @telekom/scale-components-react
+
+
+
+
+
+
 # [3.0.0-beta.152](https://github.com/telekom/scale/compare/v3.0.0-beta.151...v3.0.0-beta.152) (2024-07-10)
 
 **Note:** Version bump only for package @telekom/scale-components-react
diff --git a/packages/components-react/package.json b/packages/components-react/package.json
index 0bda7f5170..9f39f66adc 100755
--- a/packages/components-react/package.json
+++ b/packages/components-react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@telekom/scale-components-react",
   "sideEffects": false,
-  "version": "3.0.0-beta.152",
+  "version": "3.0.0-beta.153",
   "description": "React proxy for @telekom/scale-components",
   "license": "MPL-2.0",
   "homepage": "https://github.com/telekom/scale",
diff --git a/packages/components-vue/CHANGELOG.md b/packages/components-vue/CHANGELOG.md
index d7575c10c2..65bb314256 100644
--- a/packages/components-vue/CHANGELOG.md
+++ b/packages/components-vue/CHANGELOG.md
@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.0.0-beta.153](https://github.com/telekom/scale/compare/v3.0.0-beta.152...v3.0.0-beta.153) (2024-09-19)
+
+**Note:** Version bump only for package @telekom/scale-components-vue
+
+
+
+
+
+
 # [3.0.0-beta.152](https://github.com/telekom/scale/compare/v3.0.0-beta.151...v3.0.0-beta.152) (2024-07-10)
 
 **Note:** Version bump only for package @telekom/scale-components-vue
diff --git a/packages/components-vue/package.json b/packages/components-vue/package.json
index 387eed066d..55cbc57931 100644
--- a/packages/components-vue/package.json
+++ b/packages/components-vue/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@telekom/scale-components-vue",
   "sideEffects": false,
-  "version": "3.0.0-beta.152",
+  "version": "3.0.0-beta.153",
   "description": "Vue specific wrapper for @telekom/scale-components",
   "license": "MPL-2.0",
   "homepage": "https://github.com/telekom/scale",
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 8f146b4d71..3d48d3c1ca 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -3,6 +3,21 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.0.0-beta.153](https://github.com/telekom/scale/compare/v3.0.0-beta.152...v3.0.0-beta.153) (2024-09-19)
+
+
+### Bug Fixes
+
+* dropdown scroll fixed ([#2327](https://github.com/scale/issues/2327)) ([6f326eb](https://github.com/telekom/scale/commit/6f326eb138eff93080d39b1c74d48d9393fd1684))
+* chip accessibility fix ([#2328](https://github.com/telekom/scale/issues/2328)) ([0b21978](https://github.com/telekom/scale/commit/0b21978bad9516d9958aa61e733a3f8348d11799))
+* checkbox and switch css fixes for high contrast mode ([#2300](https://github.com/scale/issues/2300)) ([318df56](https://github.com/telekom/scale/commit/318df5658a21b7eea44abe37eba1fc6bedfc243c))
+* ghost btn in storybook ([#2312](https://github.com/scale/issues/2312)) ([168f710](https://github.com/telekom/scale/commit/168f710fedae9df7f08decb79066b14bd7f73d1e))
+* update of event descriptions in storybook ([#2315](https://github.com/scale/issues/2315)) ([8681ed8](https://github.com/telekom/scale/commit/8681ed8d4f1cd08a756cf7e952e520df840c40b4))
+* aria describedby added extended for other use cases in text field ([#2349](https://github.com/scale/issues/2349)) ([2706542](https://github.com/telekom/scale/commit/270654297695571068c894aee30178729f361833))
+
+
+
+
 # [3.0.0-beta.152](https://github.com/telekom/scale/compare/v3.0.0-beta.151...v3.0.0-beta.152) (2024-07-10)
 
 
diff --git a/packages/components/package.json b/packages/components/package.json
index 2a190babb2..c014e2b82f 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@telekom/scale-components",
-  "version": "3.0.0-beta.152",
+  "version": "3.0.0-beta.153",
   "description": "Scale is the digital design system for Telekom products and experiences.",
   "homepage": "https://github.com/telekom/scale",
   "repository": {
diff --git a/packages/components/src/components/checkbox/checkbox.css b/packages/components/src/components/checkbox/checkbox.css
index d8c2a22624..8ad349843a 100644
--- a/packages/components/src/components/checkbox/checkbox.css
+++ b/packages/components/src/components/checkbox/checkbox.css
@@ -147,6 +147,13 @@ scale-checkbox.indeterminate [part='checkbox'] {
   border: none;
   color: var(--color-icon-checked-active);
 }
+
+@media screen and (forced-colors: active), (-ms-high-contrast: active) {
+  scale-checkbox.indeterminate [part='checkbox'] {
+    border: 1px solid;
+  }
+}
+
 scale-checkbox.indeterminate [part='icon'] {
   color: var(--color-icon-checked-active);
 }
@@ -256,6 +263,12 @@ scale-checkbox.error [part='checkbox'] {
   border: none;
 }
 
+@media screen and (forced-colors: active), (-ms-high-contrast: active) {
+  scale-checkbox.error [part='checkbox'] {
+    border: 1px solid;
+  }
+}
+
 scale-checkbox.error
   [part='input']:focus
   ~ [part='container']
diff --git a/packages/components/src/components/chip/__snapshots__/chip.spec.ts.snap b/packages/components/src/components/chip/__snapshots__/chip.spec.ts.snap
index e597051eff..2b307049bb 100644
--- a/packages/components/src/components/chip/__snapshots__/chip.spec.ts.snap
+++ b/packages/components/src/components/chip/__snapshots__/chip.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`Chip should match snapshot 1`] = `
 <scale-chip>
   <mock:shadow-root>
-    <span aria-checked="false" class="chip chip--type-persistent chip--variant-standard" part="base type-persistent variant-standard" role="switch" tabindex="-1">
+    <span aria-checked="false" class="chip chip--type-persistent chip--variant-standard" part="base type-persistent variant-standard" role="switch" tabindex="0">
       <slot name="chip-icon"></slot>
       <span class="chip-label">
         <slot></slot>
diff --git a/packages/components/src/components/chip/chip.css b/packages/components/src/components/chip/chip.css
index fcb70553fd..7df0bc37fb 100644
--- a/packages/components/src/components/chip/chip.css
+++ b/packages/components/src/components/chip/chip.css
@@ -85,8 +85,7 @@
   color: var(--telekom-color-text-and-icon-inverted-standard);
 }
 
-.chip:not(.chip--disabled):not(.chip--type-dynamic):focus,
-.chip.chip--type-dynamic:not(.chip--selected):focus {
+.chip:not(.chip--disabled):focus {
   outline: var(--telekom-spacing-composition-space-02) solid var(--color-focus);
   outline-offset: var(--telekom-spacing-composition-space-01);
 }
diff --git a/packages/components/src/components/chip/chip.tsx b/packages/components/src/components/chip/chip.tsx
index 53e9209561..4f2650f4ab 100644
--- a/packages/components/src/components/chip/chip.tsx
+++ b/packages/components/src/components/chip/chip.tsx
@@ -32,7 +32,7 @@ export class Chip {
   /** (optional) */
   @Prop() type?: 'dynamic' | 'persistent' = 'persistent';
   /** (optional) */
-  @Prop() selected?: boolean = false;
+  @Prop({ mutable: true }) selected?: boolean = false;
   /** (optional) chip aria-role */
   @Prop() ariaRoleTitle?:
     | 'switch'
@@ -52,7 +52,7 @@ export class Chip {
   /** (optional) Injected CSS styles */
   @Prop() styles?: string;
 
-  /** (optional) Change icon click event */
+  /** (optional) Change event */
   @Event({ eventName: 'scale-change' }) scaleChange: EventEmitter<MouseEvent>;
   /** @deprecated in v3 in favor of kebab-case event names */
   @Event({ eventName: 'scaleChange' })
@@ -87,21 +87,26 @@ export class Chip {
   handleClose = (event: MouseEvent) => {
     event.preventDefault();
     event.stopPropagation();
-    if (this.disabled && this.type !== 'dynamic') {
-      return;
-    }
     emitEvent(this, 'scaleClose', event);
   };
 
   handleClick = (event: MouseEvent) => {
-    if (this.type !== 'dynamic') {
-      this.selected = !this.selected;
+    this.handleChange(event);
+  };
+
+  handleKeyDown = (event: KeyboardEvent) => {
+    if (event.code === 'Space') {
+      this.handleChange(event);
     }
+  };
+
+  handleChange = (event: MouseEvent | KeyboardEvent): void => {
     event.preventDefault();
     event.stopPropagation();
-    if (this.disabled && this.type !== 'dynamic') {
+    if (this.disabled || this.type === 'dynamic') {
       return;
     }
+    this.selected = !this.selected;
     emitEvent(this, 'scaleChange', event);
   };
 
@@ -140,45 +145,21 @@ export class Chip {
     return (
       <Host>
         {this.styles && <style>{this.styles}</style>}
-        {this.type === 'dynamic' && this.selected ? (
-          <span
-            role={this.ariaRoleTitle}
-            tabindex={this.selected ? '0' : '-1'}
-            part={this.getBasePartMap()}
-            class={this.getCssClassMap()}
-            aria-checked={this.selected.toString()}
-            onClick={
-              !this.disabled || this.type === 'dynamic'
-                ? this.handleClick
-                : null
-            }
-          >
-            <slot name="chip-icon"></slot>
-            <span class="chip-label">
-              <slot />
-            </span>
-            {this.selected ? this.getIcon() : null}
-          </span>
-        ) : (
-          <span
-            role={this.ariaRoleTitle}
-            aria-checked={this.selected.toString()}
-            tabindex={this.selected ? '0' : '-1'}
-            part={this.getBasePartMap()}
-            class={this.getCssClassMap()}
-            onClick={
-              !this.disabled || this.type === 'dynamic'
-                ? this.handleClick
-                : null
-            }
-          >
-            <slot name="chip-icon"></slot>
-            <span class="chip-label">
-              <slot />
-            </span>
-            {this.selected ? this.getIcon() : null}
+        <span
+          role={this.ariaRoleTitle}
+          aria-checked={this.selected.toString()}
+          tabindex={this.disabled ? '-1' : '0'}
+          part={this.getBasePartMap()}
+          class={this.getCssClassMap()}
+          onClick={this.handleClick}
+          onKeyDown={this.handleKeyDown}
+        >
+          <slot name="chip-icon"></slot>
+          <span class="chip-label">
+            <slot />
           </span>
-        )}
+          {this.selected ? this.getIcon() : null}
+        </span>
       </Host>
     );
   }
diff --git a/packages/components/src/components/chip/readme.md b/packages/components/src/components/chip/readme.md
index a40054341d..76064f86a4 100644
--- a/packages/components/src/components/chip/readme.md
+++ b/packages/components/src/components/chip/readme.md
@@ -24,7 +24,7 @@
 
 | Event          | Description                                                                                        | Type                      |
 | -------------- | -------------------------------------------------------------------------------------------------- | ------------------------- |
-| `scale-change` | (optional) Change icon click event                                                                 | `CustomEvent<MouseEvent>` |
+| `scale-change` | (optional) Change event                                                                            | `CustomEvent<MouseEvent>` |
 | `scale-close`  | (optional) Close icon click event                                                                  | `CustomEvent<MouseEvent>` |
 | `scaleChange`  | <span style="color:red">**[DEPRECATED]**</span> in v3 in favor of kebab-case event names<br/><br/> | `CustomEvent<MouseEvent>` |
 | `scaleClose`   | <span style="color:red">**[DEPRECATED]**</span> in v3 in favor of kebab-case event names<br/><br/> | `CustomEvent<MouseEvent>` |
diff --git a/packages/components/src/components/dropdown-select/dropdown-select.tsx b/packages/components/src/components/dropdown-select/dropdown-select.tsx
index 7325431046..afe80c06ce 100644
--- a/packages/components/src/components/dropdown-select/dropdown-select.tsx
+++ b/packages/components/src/components/dropdown-select/dropdown-select.tsx
@@ -270,7 +270,7 @@ export class DropdownSelect {
   @State() hasFocus: boolean = false;
 
   private comboEl: HTMLElement;
-  private listboxEl: HTMLElement;
+  private scrollContainer: HTMLElement;
   private listboxPadEl: HTMLElement;
   private hiddenInput: HTMLInputElement;
 
@@ -346,10 +346,10 @@ export class DropdownSelect {
 
   bringIntoView(index) {
     const options: NodeListOf<HTMLElement> =
-      this.listboxEl.querySelectorAll('[role=option]');
+      this.scrollContainer.querySelectorAll('[role=option]');
 
-    if (hasOverflow(this.listboxEl)) {
-      keepInView(options[index], this.listboxEl);
+    if (hasOverflow(this.scrollContainer)) {
+      keepInView(options[index], this.scrollContainer);
     }
 
     if (!isInView(options[index])) {
@@ -530,13 +530,13 @@ export class DropdownSelect {
             </div>
             <div part="listbox-pad" ref={(el) => (this.listboxPadEl = el)}>
               <div
+                ref={(el) => (this.scrollContainer = el)}
                 part="listbox-scroll-container"
                 onMouseDown={(e) => {
                   e.preventDefault();
                 }}
               >
                 <div
-                  ref={(el) => (this.listboxEl = el)}
                   part="listbox"
                   role="listbox"
                   id={`${this.comboboxId}-listbox`}
diff --git a/packages/components/src/components/switch/switch.css b/packages/components/src/components/switch/switch.css
index ba3562eae8..76b6b0f756 100644
--- a/packages/components/src/components/switch/switch.css
+++ b/packages/components/src/components/switch/switch.css
@@ -307,7 +307,7 @@ scale-switch scale-icon-action-success {
   .switch__toggle {
     border: 1px solid;
   }
-  scale-icon-action-checkmark {
+  scale-switch scale-icon-action-checkmark {
     visibility: hidden !important;
   }
 }
diff --git a/packages/components/src/components/text-field/readme.md b/packages/components/src/components/text-field/readme.md
index b3cec4f037..49accdaec3 100644
--- a/packages/components/src/components/text-field/readme.md
+++ b/packages/components/src/components/text-field/readme.md
@@ -1,7 +1,5 @@
 # scale-text-field
 
-
-
 <!-- Auto Generated Below -->
 
 
diff --git a/packages/components/src/components/text-field/text-field.tsx b/packages/components/src/components/text-field/text-field.tsx
index 4408dcb8be..29726f4def 100644
--- a/packages/components/src/components/text-field/text-field.tsx
+++ b/packages/components/src/components/text-field/text-field.tsx
@@ -231,8 +231,11 @@ export class TextField {
     const ariaInvalidAttr =
       this.status === 'error' || this.invalid ? { 'aria-invalid': 'true' } : {};
     const helperTextId = `helper-message-${this.internalId}`;
-    const ariaDescribedByAttr = { 'aria-describedBy': helperTextId };
-    const ariaDetailedById = { 'aria-details': this.ariaDetailedId };
+    const ariaDescribedByAttr = {
+      'aria-describedBy':
+        (this.helperText && helperTextId) || this.ariaDetailedId,
+    };
+    const ariaDetailsAttr = { 'aria-details': this.ariaDetailedId };
     const numericTypes = [
       'number',
       'date',
@@ -275,9 +278,11 @@ export class TextField {
             disabled={this.disabled}
             readonly={this.readonly}
             autocomplete={this.inputAutocomplete}
-            {...ariaDetailedById}
             {...ariaInvalidAttr}
-            {...(this.helperText ? ariaDescribedByAttr : {})}
+            {...(this.helperText || this.ariaDetailedId
+              ? ariaDescribedByAttr
+              : {})}
+            {...(this.helperText && this.ariaDetailedId ? ariaDetailsAttr : {})}
             {...(numericTypes.includes(this.type) ? { step: this.step } : {})}
           />
           {(!!this.helperText || !!this.counter) && (
diff --git a/packages/components/src/html/checkbox.html b/packages/components/src/html/checkbox.html
new file mode 100644
index 0000000000..ab3a64e616
--- /dev/null
+++ b/packages/components/src/html/checkbox.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html dir="ltr" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
+    />
+    <title>Stencil Component Starter</title>
+
+    <script type="module" src="/build/scale-components.esm.js"></script>
+    <link rel="stylesheet" href="/build/scale-components.css" />
+    <style type="text/css" media="screen, print">
+      html {
+        margin: 0;
+        padding: 0;
+      }
+
+      body {
+        margin: 0;
+        padding: 4rem;
+      }
+    </style>
+  </head>
+
+  <body>
+    <p>
+      <scale-checkbox
+        checked
+        disabled
+        label="Selected Disabled"
+      ></scale-checkbox>
+    </p>
+    <p>
+      <scale-checkbox indeterminate label="Indeterminate"></scale-checkbox>
+    </p>
+    <p>
+      <scale-checkbox
+        label="Standard with error"
+        helper-text="This is the error message"
+        invalid
+      ></scale-checkbox>
+    </p>
+    <p>
+      <scale-switch
+        label="My styles were affecting checkbox styles"
+      ></scale-switch>
+    </p>
+  </body>
+</html>
diff --git a/packages/components/src/html/chip.html b/packages/components/src/html/chip.html
new file mode 100644
index 0000000000..99105f5fa8
--- /dev/null
+++ b/packages/components/src/html/chip.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html dir="ltr" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
+    />
+    <title>Stencil Component Starter</title>
+
+    <script type="module" src="/build/scale-components.esm.js"></script>
+    <link rel="stylesheet" href="/build/scale-components.css" />
+    <style type="text/css" media="screen, print">
+      html {
+        margin: 0;
+        padding: 0;
+      }
+
+      body {
+        margin: 0;
+        padding: 4rem;
+      }
+    </style>
+  </head>
+
+  <body>
+    <p>
+      <scale-chip>Label</scale-chip>
+      <scale-chip disabled>Label</scale-chip>
+      <scale-chip selected>Label</scale-chip>
+      <scale-chip type="dynamic">Label</scale-chip>
+      <scale-chip selected type="dynamic">Label</scale-chip>
+    </p>
+    <span>
+      <scale-chip
+        >Label
+        <div slot="chip-icon">
+          <scale-icon-action-favorite accessibility-title="favorite" />
+        </div>
+      </scale-chip>
+    </span>
+    <p>
+      <scale-chip
+        >Label
+        <span slot="chip-icon">
+          <scale-icon-action-favorite accessibility-title="favorite" />
+        </span>
+      </scale-chip>
+    </p>
+  </body>
+</html>
diff --git a/packages/components/src/html/text-field.html b/packages/components/src/html/text-field.html
new file mode 100644
index 0000000000..0f342c8158
--- /dev/null
+++ b/packages/components/src/html/text-field.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html dir="ltr" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
+    />
+    <title>Stencil Component Starter</title>
+
+    <script type="module" src="/build/scale-components.esm.js"></script>
+    <link rel="stylesheet" href="/build/scale-components.css" />
+    <style type="text/css" media="screen, print">
+      html {
+        margin: 0;
+        padding: 0;
+      }
+
+      body {
+        margin: 0;
+        padding: 4rem;
+      }
+    </style>
+  </head>
+
+  <body>
+    <scale-text-field
+      label="Label"
+      placeholder="this is the placeholder"
+      helper-text="some helper text"
+    ></scale-text-field>
+    <scale-text-field
+      label="Label"
+      placeholder="this is the placeholder"
+      aria-detailed-id="extra"
+    ></scale-text-field>
+    <scale-text-field
+      label="Label"
+      placeholder="this is the placeholder"
+      helper-text="some helper text"
+      aria-detailed-id="extra"
+    ></scale-text-field>
+    <div id="extra">some extra desc</div>
+  </body>
+</html>
diff --git a/packages/design-tokens/CHANGELOG.md b/packages/design-tokens/CHANGELOG.md
index 1f83374a80..b1f3cb2653 100644
--- a/packages/design-tokens/CHANGELOG.md
+++ b/packages/design-tokens/CHANGELOG.md
@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.0.0-beta.153](https://github.com/telekom/scale/compare/v3.0.0-beta.152...v3.0.0-beta.153) (2024-09-19)
+
+**Note:** Version bump only for package @telekom/scale-design-tokens
+
+
+
+
+
+
 # [3.0.0-beta.152](https://github.com/telekom/scale/compare/v3.0.0-beta.151...v3.0.0-beta.152) (2024-07-10)
 
 **Note:** Version bump only for package @telekom/scale-design-tokens
diff --git a/packages/design-tokens/package.json b/packages/design-tokens/package.json
index 76aa3c33c3..e8f5098ba9 100644
--- a/packages/design-tokens/package.json
+++ b/packages/design-tokens/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@telekom/scale-design-tokens",
-  "version": "3.0.0-beta.152",
+  "version": "3.0.0-beta.153",
   "type": "module",
   "description": "Design Tokens for the Scale Design System",
   "homepage": "https://github.com/telekom/scale",
diff --git a/packages/storybook-vue/CHANGELOG.md b/packages/storybook-vue/CHANGELOG.md
index 47b1430d2b..902dc2e621 100644
--- a/packages/storybook-vue/CHANGELOG.md
+++ b/packages/storybook-vue/CHANGELOG.md
@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.0.0-beta.153](https://github.com/amir-ba/scale/compare/v3.0.0-beta.152...v3.0.0-beta.153) (2024-09-19)
+
+**Note:** Version bump only for package @telekom/scale-storybook-vue
+
+
+
+
+
+
 # [3.0.0-beta.152](https://github.com/telekom/scale/compare/v3.0.0-beta.151...v3.0.0-beta.152) (2024-07-10)
 
 **Note:** Version bump only for package @telekom/scale-storybook-vue
diff --git a/packages/storybook-vue/package.json b/packages/storybook-vue/package.json
index c101c59f6c..cd29504581 100644
--- a/packages/storybook-vue/package.json
+++ b/packages/storybook-vue/package.json
@@ -2,7 +2,7 @@
   "homepage": "https://telekom.github.io/scale",
   "name": "@telekom/scale-storybook-vue",
   "private": true,
-  "version": "3.0.0-beta.152",
+  "version": "3.0.0-beta.153",
   "main": "index.js",
   "license": "MPL-2.0",
   "devDependencies": {
@@ -32,8 +32,8 @@
   "dependencies": {
     "@storybook/addon-viewport": "^6.4.22",
     "@telekom/design-tokens": "^1.0.0-beta.2",
-    "@telekom/scale-components": "^3.0.0-beta.152",
-    "@telekom/scale-components-vue": "^3.0.0-beta.152"
+    "@telekom/scale-components": "^3.0.0-beta.153",
+    "@telekom/scale-components-vue": "^3.0.0-beta.153"
   },
   "scripts": {
     "prestart": "rm -rf node_modules/.cache/ && yes | cp -a ../components/dist/scale-components/fonts/* public/fonts/ && yes | cp -a ../components/dist/scale-components/scale-components.css public/",
diff --git a/packages/storybook-vue/stories/components/button/Button.stories.mdx b/packages/storybook-vue/stories/components/button/Button.stories.mdx
index 5c4db20b29..c46d89caf8 100644
--- a/packages/storybook-vue/stories/components/button/Button.stories.mdx
+++ b/packages/storybook-vue/stories/components/button/Button.stories.mdx
@@ -117,8 +117,9 @@ export const Template = (args, { argTypes }) => ({
   --min-height: var(--telekom-spacing-composition-space-13);
   --min-width: var(--telekom-spacing-composition-space-13);
   --radius: var(--telekom-radius-standard);
-  --transition: all var(--telekom-motion-duration-transition)
-    var(--telekom-motion-easing-standard);
+  --transition: all var(--telekom-motion-duration-transition) var(
+      --telekom-motion-easing-standard
+    );
   --color-focus: var(--telekom-color-functional-focus-standard);
   --font-weight: var(--telekom-typography-font-weight-bold);
   --font-size: var(--telekom-typography-font-size-body);
@@ -235,7 +236,7 @@ For Shadow Parts, please inspect the element's #shadow.
 </Canvas>
 
 ```html
-<scale-button variant="secondary-white">Label</scale-button>
+<scale-button variant="ghost">Label</scale-button>
 ```
 
 ## Disabled
@@ -288,10 +289,9 @@ For Shadow Parts, please inspect the element's #shadow.
 </Canvas>
 
 ```html
-<scale-button variant="secondary" disabled>Label</scale-button>
+<scale-button variant="ghost" disabled>Label</scale-button>
 ```
 
-
 ## With Icon Before
 
 <Canvas withSource="none">
diff --git a/packages/storybook-vue/stories/components/text-field/ScaleTextField.vue b/packages/storybook-vue/stories/components/text-field/ScaleTextField.vue
index b57337688d..740f57ff13 100644
--- a/packages/storybook-vue/stories/components/text-field/ScaleTextField.vue
+++ b/packages/storybook-vue/stories/components/text-field/ScaleTextField.vue
@@ -62,7 +62,7 @@ export default {
     inputAutofocus: { type: Boolean },
     inputAutocomplete: { type: String },
     experimentalControlled: { type: Boolean },
-    hideLabelVisually: {type: Boolean, default: false},
+    hideLabelVisually: { type: Boolean, default: false },
     styles: { type: String },
   },
   methods: {
diff --git a/packages/storybook-vue/stories/components/text-field/TextField.stories.mdx b/packages/storybook-vue/stories/components/text-field/TextField.stories.mdx
index a989a68f21..1a2f740c47 100644
--- a/packages/storybook-vue/stories/components/text-field/TextField.stories.mdx
+++ b/packages/storybook-vue/stories/components/text-field/TextField.stories.mdx
@@ -60,6 +60,13 @@ export const ICON =
       description: `(optional) DEPRECATED - css overwrite should replace size`,
       control: { type: null },
     },
+    ariaDetailedId: {
+      table: {
+        type: { summary: 'string' },
+      },
+      description: `(optional) Id of the element with additional information, will be used as aria-details. In case helperText is not provided, will be used as aria-describedBy`,
+      control: { type: null },
+    },
   }}
 />
 
@@ -184,24 +191,30 @@ export const StorySectionsTemplate = (args, { argTypes }) => ({
 
 ```css
 scale-text-field {
-  --transition: all var(--telekom-motion-duration-transition)
-    var(--telekom-motion-easing-standard);
+  --transition: all var(--telekom-motion-duration-transition) var(
+      --telekom-motion-easing-standard
+    );
   --radius: var(--telekom-radius-standard);
-  --border: var(--telekom-spacing-composition-space-01) solid
-    var(--telekom-color-ui-border-standard);
-  --border-error: var(--telekom-spacing-composition-space-02) solid
-    var(--telekom-color-functional-danger-standard);
-  --border-success: var(--telekom-spacing-composition-space-02) solid
-    var(--telekom-color-functional-success-standard);
-  --border-warning: var(--telekom-spacing-composition-space-02) solid
-    var(--telekom-color-functional-warning-standard);
+  --border: var(--telekom-spacing-composition-space-01) solid var(
+      --telekom-color-ui-border-standard
+    );
+  --border-error: var(--telekom-spacing-composition-space-02) solid var(
+      --telekom-color-functional-danger-standard
+    );
+  --border-success: var(--telekom-spacing-composition-space-02) solid var(
+      --telekom-color-functional-success-standard
+    );
+  --border-warning: var(--telekom-spacing-composition-space-02) solid var(
+      --telekom-color-functional-warning-standard
+    );
   --border-color-hover: var(--telekom-color-ui-border-hovered);
   --border-color-focus: var(--telekom-color-ui-border-hovered);
   --border-color-disabled: var(--telekom-color-ui-border-disabled);
   --background-color-hover: var(--telekom-color-ui-state-fill-hovered);
   --background-color-disabled: none;
-  --focus-outline: var(--telekom-line-weight-highlight) solid
-    var(--telekom-color-functional-focus-standard);
+  --focus-outline: var(--telekom-line-weight-highlight) solid var(
+      --telekom-color-functional-focus-standard
+    );
   --height: 44px;
   --spacing-x: var(--telekom-spacing-composition-space-05);
   --color-disabled: var(--telekom-color-text-and-icon-disabled);
@@ -218,9 +231,9 @@ scale-text-field {
   --color-meta-error: var(--telekom-color-text-and-icon-functional-danger);
 
   /* control */
-  --spacing-control: 1.125rem
-    calc(2rem - var(--telekom-spacing-composition-space-01)) 0.25rem
-    calc(0.75rem - var(--telekom-spacing-composition-space-01));
+  --spacing-control: 1.125rem calc(
+      2rem - var(--telekom-spacing-composition-space-01)
+    ) 0.25rem calc(0.75rem - var(--telekom-spacing-composition-space-01));
   --transition-control: var(--transition);
   --background-control: var(--telekom-color-ui-state-fill-standard);
   --margin-bottom-control: var(--telekom-spacing-composition-space-03);
diff --git a/packages/storybook-vue/stories/setup_and_info/ScaleAndAngular_de.md b/packages/storybook-vue/stories/setup_and_info/ScaleAndAngular_de.md
index 55c44ebfca..f924099597 100644
--- a/packages/storybook-vue/stories/setup_and_info/ScaleAndAngular_de.md
+++ b/packages/storybook-vue/stories/setup_and_info/ScaleAndAngular_de.md
@@ -72,12 +72,12 @@ Nun solltest du in der Lage sein, Scale-Komponenten in deinen Templates zu verwe
 
 ## Events in Angular
 
-Um Konflikte mit Standard-Events zu vermeiden und für beste Kompatibilität mit anderen Libraries und Frameworks, sind die Custom Events, die von einigen Scale-Komponenten ausgegeben werden, mit dem Prefix `scale` gekennzeichnet. Event-Namen werden in camelCase-Syntax geschrieben (z. B. scaleChange). Die Dokumentation zu Custom Events findest du auf den jeweiligen Komponentenseiten im Abschnitt "docs".
+Um Konflikte mit Standard-Events zu vermeiden und für bessere Kompatibilität mit anderen Libraries und Frameworks, sind Custom Events mit dem Prefix `scale` gekennzeichnet. Event-Namen werden in kebab-case-Syntax geschrieben (z.B. `scale-change`). Beachte, dass die Events vor v3 im сamelCase geschrieben wurden (z.B. `scaleChange`). Diese sind jetzt veraltet, aber noch verfügbar, um die Abwärtskompatibilität zu gewährleisten. Für die neuesten Komponenten gelten nur noch Events im kebab-case. Die Dokumentation zu Custom Events findest du auf den entsprechenden Komponentenseiten im Abschnitt "Docs".
 
 An Events mit dem Prefix `scale` kannst du reguläre Angular-Syntax anbinden:
 
 ```html
-<scale-slider (scaleInput)="setValue($event)"></scale-slider>
+<scale-slider (scale-input)="setValue($event)"></scale-slider>
 ```
 
 ## Reactive Forms
diff --git a/packages/storybook-vue/stories/setup_and_info/ScaleAndAngular_en.md b/packages/storybook-vue/stories/setup_and_info/ScaleAndAngular_en.md
index 6c2200d8af..657ae69905 100644
--- a/packages/storybook-vue/stories/setup_and_info/ScaleAndAngular_en.md
+++ b/packages/storybook-vue/stories/setup_and_info/ScaleAndAngular_en.md
@@ -72,12 +72,12 @@ You should now be able to use Scale components in your templates:
 
 ## Events in Angular
 
-In order to prevent collisions with standard events and for better compatibility with other libraries and frameworks, the custom events emitted by some Scale components are prefixed with `scale`. Event names are camelCased (e.g. `scaleChange`). You can find the documentation on these custom events on the respective component pages in the "docs" section.
+In order to prevent collisions with standard events and for better compatibility with other libraries and frameworks, the custom events emitted by some Scale components are prefixed with `scale`. Event names are kebab-cased (e.g. scale-change). Note, that before v3 events were camelCased (e.g. `scaleChange`), these are now deprecated, but still available for maintaining backward compatibility. For newest components only kebab-case events apply. You can find the documentation to custom events on the respective component pages in the "docs" section.
 
 You can bind to `scale`-prefixed events with the regular Angular syntax:
 
 ```html
-<scale-slider (scaleInput)="setValue($event)"></scale-slider>
+<scale-slider (scale-input)="setValue($event)"></scale-slider>
 ```
 
 ## Reactive Forms
diff --git a/packages/storybook-vue/stories/setup_and_info/ScaleAndReact_de.md b/packages/storybook-vue/stories/setup_and_info/ScaleAndReact_de.md
index 1a86ade1a5..2271b3c316 100644
--- a/packages/storybook-vue/stories/setup_and_info/ScaleAndReact_de.md
+++ b/packages/storybook-vue/stories/setup_and_info/ScaleAndReact_de.md
@@ -62,7 +62,7 @@ React übermittelt Daten zu Custom Elements nicht als Properties, sondern als HT
 
 ### Custom Events
 
-React hat sein eigenes [Synthetic Event System](https://reactjs.org/docs/handling-events.html), weshalb Custom Events nicht deklarativ angebunden werden können. `<scale-button onScaleChange={handleChange}>` wird nicht funktionieren.
+React hat sein eigenes [Synthetic Event System](https://reactjs.org/docs/handling-events.html), weshalb Custom Events nicht deklarativ angebunden werden können. `<scale-button on-scale-change={handleChange}>` wird nicht funktionieren.
 
 Diese Einschränkung ohne Hilfe zu umgehen, kann aufwändig sein und erfordert imperativen Code. Wir empfehlen die Verwendung eines Wrappers oder Interop Layers.
 
@@ -82,17 +82,19 @@ const App = () => {
   const handleInput = (event) => {
     // it works!
   };
-  return <ScaleSlider label="Example" onScaleInput={handleInput}></ScaleSlider>;
+  return (
+    <ScaleSlider label="Example" on-scale-input={handleInput}></ScaleSlider>
+  );
 };
 
 export default App;
 ```
 
-Bitte beachten Sie, dass es wichtig ist, das Wort "on" vor dem Ereignisnamen zu verwenden, wenn Sie benutzerdefinierte Ereignisse von einer Skala in einem Wrapper verwenden. "scaleChange" sollte zum Beispiel als "onScaleChange" geschrieben werden.
+Bitte beachten Sie, dass es wichtig ist, das Wort "on" vor dem Ereignisnamen zu verwenden, wenn Sie benutzerdefinierte Ereignisse von einer Skala in einem Wrapper verwenden. "scale-change" sollte zum Beispiel als "on-scale-change" geschrieben werden.
 
 ## Events in React
 
-Um Konflikte mit Standard-Events zu vermeiden und für bessere Kompatibilität mit anderen Libraries und Frameworks, sind Custom Events mit dem Prefix `scale` gekennzeichnet. Event-Namen werden in camelCase-Syntax geschrieben (z.B. `scaleChange`) Die Dokumentation zu Custom Events findest du auf den entsprechenden Komponentenseiten im Abschnitt "Docs".
+Um Konflikte mit Standard-Events zu vermeiden und für bessere Kompatibilität mit anderen Libraries und Frameworks, sind Custom Events mit dem Prefix `scale` gekennzeichnet. Event-Namen werden in kebab-case-Syntax geschrieben (z.B. `scale-change`). Beachte, dass die Events vor v3 im сamelCase geschrieben wurden (z.B. `scaleChange`). Diese sind jetzt veraltet, aber noch verfügbar, um die Abwärtskompatibilität zu gewährleisten. Für die neuesten Komponenten gelten nur noch Events im kebab-case. Die Dokumentation zu Custom Events findest du auf den entsprechenden Komponentenseiten im Abschnitt "Docs".
 
 Aufgrund von Reacts [Synthetic Events](https://reactjs.org/docs/handling-events.html), bedarf das Binding von Custom Events etwas Mehraufwand. Nutze wie oben beschrieben einen Interop Layer oder alternativ [`ref`](https://reactjs.org/docs/refs-and-the-dom.html), um `addEventListener` imperativ anzuwenden.
 
diff --git a/packages/storybook-vue/stories/setup_and_info/ScaleAndReact_en.md b/packages/storybook-vue/stories/setup_and_info/ScaleAndReact_en.md
index cfdada40d9..3d83d368c4 100644
--- a/packages/storybook-vue/stories/setup_and_info/ScaleAndReact_en.md
+++ b/packages/storybook-vue/stories/setup_and_info/ScaleAndReact_en.md
@@ -62,7 +62,7 @@ React passes all data to custom elements not as props but as HTML attributes whi
 
 ### Custom Events
 
-React has its own [synthetic event system](https://reactjs.org/docs/handling-events.html), which makes it impossible to declaratively bind to custom events. That means `<scale-button onScaleChange={handleChange}>` won't work.
+React has its own [synthetic event system](https://reactjs.org/docs/handling-events.html), which makes it impossible to declaratively bind to custom events. That means `<scale-button on-scale-change={handleChange}>` won't work.
 
 Working around these limitations without help is possible but can be cumbersome and requires some imperative code. So we recommend using a wrapper or interop layer to make things easier.
 
@@ -82,17 +82,19 @@ const App = () => {
   const handleInput = (event) => {
     // it works!
   };
-  return <ScaleSlider label="Example" onScaleInput={handleInput}></ScaleSlider>;
+  return (
+    <ScaleSlider label="Example" on-scale-input={handleInput}></ScaleSlider>
+  );
 };
 
 export default App;
 ```
 
-Please note that when using any custom events from scale in a wrapper, it is important to include "on" before the event name. For example, "scaleChange" should be written as "onScaleChange.
+Please note that when using any custom events from scale in a wrapper, it is important to include "on" before the event name. For example, "scale-change" should be written as "on-scale-change".
 
 ## Events in React
 
-In order to prevent collisions with standard events and for better compatibility with other libraries and frameworks, the custom events emitted by some Scale components are prefixed with `scale`. Event names are camelCased (e.g. `scaleChange`). You can find the documentation for these custom events on the respective component pages in the "docs" section.
+In order to prevent collisions with standard events and for better compatibility with other libraries and frameworks, the custom events emitted by some Scale components are prefixed with `scale`. Event names are kebab-cased (e.g. scale-change). Note, that before v3 events were camelCased (e.g. `scaleChange`), these are now deprecated, but still available for maintaining backward compatibility. For newest components only kebab-case events apply. You can find the documentation to custom events on the respective component pages in the "docs" section.
 
 Due to React's [synthetic events](https://reactjs.org/docs/handling-events.html), binding to custom events requires some extra work. You can use an interop layer like the ones listed above, or alternatively use [`ref`](https://reactjs.org/docs/refs-and-the-dom.html) to bind imperatively with `addEventListener`.
 
diff --git a/packages/storybook-vue/stories/setup_and_info/ScaleAndVue_de.md b/packages/storybook-vue/stories/setup_and_info/ScaleAndVue_de.md
index 86d3882d8f..ec71e1bc7c 100644
--- a/packages/storybook-vue/stories/setup_and_info/ScaleAndVue_de.md
+++ b/packages/storybook-vue/stories/setup_and_info/ScaleAndVue_de.md
@@ -100,12 +100,12 @@ Nun solltest du in der Lage sein, Scale-Komponenten in deinen Templates zu verwe
 
 ## Events in Vue
 
-Um Konflikte mit Standard-Events zu vermeiden und für beste Kompatibilität mit anderen Libraries und Frameworks, sind die Custom Events, die von einigen Scale-Komponenten ausgegeben werden, mit dem Prefix `scale` gekennzeichnet. Event-Namen werden in camelCase-Syntax geschrieben (z. B. scaleChange). Die Dokumentation zu Custom Events findest du auf den jeweiligen Komponentenseiten im Abschnitt "Docs".
+Um Konflikte mit Standard-Events zu vermeiden und für bessere Kompatibilität mit anderen Libraries und Frameworks, sind Custom Events mit dem Prefix `scale` gekennzeichnet. Event-Namen werden in kebab-case-Syntax geschrieben (z.B. `scale-change`). Beachte, dass die Events vor v3 im сamelCase geschrieben wurden (z. B. `scaleChange`). Diese sind jetzt veraltet, aber noch verfügbar, um die Abwärtskompatibilität zu gewährleisten. Für die neuesten Komponenten gelten nur noch Events im kebab-case. Die Dokumentation zu Custom Events findest du auf den entsprechenden Komponentenseiten im Abschnitt "Docs".
 
 An Events mit dem Prefix `scale` kannst du reguläre Vue-Syntax anbinden:
 
 ```html
-<scale-slider @scaleInput="handleInput"></scale-slider>
+<scale-slider @scale-input="handleInput"></scale-slider>
 ```
 
 ## Form Input Bindings
@@ -117,7 +117,7 @@ Du kannst ganz einfach die gleichen Ergebnisse erzielen:
 ```html
 <scale-text-field
   :value="example"
-  @scaleChange="example = $event.target.value"
+  @scale-change="example = $event.target.value"
 ></scale-text-field>
 ```
 
diff --git a/packages/storybook-vue/stories/setup_and_info/ScaleAndVue_en.md b/packages/storybook-vue/stories/setup_and_info/ScaleAndVue_en.md
index 19bad55672..293c568eac 100644
--- a/packages/storybook-vue/stories/setup_and_info/ScaleAndVue_en.md
+++ b/packages/storybook-vue/stories/setup_and_info/ScaleAndVue_en.md
@@ -100,12 +100,12 @@ You should now be able to use Scale components in your templates:
 
 ## Events in Vue
 
-In order to prevent collisions with standard events and for better compatibility with other libraries and frameworks, the custom events emitted by some Scale components are prefixed with `scale`. Event names are camelCased (e.g. `scaleChange`). You can find the documentation for these custom events on the respective component pages in the "docs" section.
+In order to prevent collisions with standard events and for better compatibility with other libraries and frameworks, the custom events emitted by some Scale components are prefixed with `scale`. Event names are kebab-cased (e.g. scale-change). Note, that before v3 events were camelCased (e.g. `scaleChange`), these are now deprecated, but still available for maintaining backward compatibility. For newest components only kebab-case events apply. You can find the documentation to custom events on the respective component pages in the "docs" section.
 
 You can bind to `scale`-prefixed events with the regular Vue syntax:
 
 ```html
-<scale-slider @scaleInput="handleInput"></scale-slider>
+<scale-slider @scale-input="handleInput"></scale-slider>
 ```
 
 ## Form Input Bindings
@@ -117,7 +117,7 @@ You can achieve the same results quite easily:
 ```html
 <scale-text-field
   :value="example"
-  @scaleChange="example = $event.target.value"
+  @scale-change="example = $event.target.value"
 ></scale-text-field>
 ```
 
diff --git a/packages/visual-tests/CHANGELOG.md b/packages/visual-tests/CHANGELOG.md
index 236763236a..c9f0645a23 100644
--- a/packages/visual-tests/CHANGELOG.md
+++ b/packages/visual-tests/CHANGELOG.md
@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.0.0-beta.153](https://github.com/amir-ba/scale/compare/v3.0.0-beta.152...v3.0.0-beta.153) (2024-09-19)
+
+**Note:** Version bump only for package @telekom/scale-visual-tests
+
+
+
+
+
+
 # [3.0.0-beta.152](https://github.com/telekom/scale/compare/v3.0.0-beta.151...v3.0.0-beta.152) (2024-07-10)
 
 **Note:** Version bump only for package @telekom/scale-visual-tests
diff --git a/packages/visual-tests/package.json b/packages/visual-tests/package.json
index fae554bc34..295e79fba9 100644
--- a/packages/visual-tests/package.json
+++ b/packages/visual-tests/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@telekom/scale-visual-tests",
   "private": true,
-  "version": "3.0.0-beta.152",
+  "version": "3.0.0-beta.153",
   "main": "index.js",
   "license": "MPL-2.0",
   "scripts": {