From cdebdc660c80bb147850d0db5377a927b83fc518 Mon Sep 17 00:00:00 2001
From: felixw <felix.weber@iconstorm.com>
Date: Fri, 19 Jan 2024 17:03:54 +0100
Subject: [PATCH 01/25] docs: add angular 17 standalone reactive form sample

---
 .../angular17-reactive-forms/.editorconfig    |  16 +++
 examples/angular17-reactive-forms/.gitignore  |   2 +
 examples/angular17-reactive-forms/README.md   |  27 +++++
 .../angular17-reactive-forms/angular.json     |  96 ++++++++++++++++++
 .../angular17-reactive-forms/package.json     |  39 +++++++
 .../src/app/app.component.css                 |   0
 .../src/app/app.component.html                |  66 ++++++++++++
 .../src/app/app.component.spec.ts             |  29 ++++++
 .../src/app/app.component.ts                  |  33 ++++++
 .../src/app/app.config.ts                     |   8 ++
 .../src/app/app.routes.ts                     |   3 +
 .../src/assets/.gitkeep                       |   0
 .../src/directives/base-value-accessor.ts     |  48 +++++++++
 .../src/directives/checked-value-accessor.ts  |  41 ++++++++
 .../src/directives/date-value-accessor.ts     |  25 +++++
 .../src/directives/number-value-accessor.ts   |  43 ++++++++
 .../src/directives/radio-value-accessor.ts    |  39 +++++++
 .../src/directives/select-value-accessor.ts   |  25 +++++
 .../src/directives/text-value-accessor.ts     |  38 +++++++
 .../angular17-reactive-forms/src/favicon.ico  | Bin 0 -> 15086 bytes
 .../angular17-reactive-forms/src/index.html   |  13 +++
 examples/angular17-reactive-forms/src/main.ts |   8 ++
 .../angular17-reactive-forms/src/styles.css   |   1 +
 .../tsconfig.app.json                         |  14 +++
 .../angular17-reactive-forms/tsconfig.json    |  33 ++++++
 .../tsconfig.spec.json                        |  14 +++
 26 files changed, 661 insertions(+)
 create mode 100644 examples/angular17-reactive-forms/.editorconfig
 create mode 100644 examples/angular17-reactive-forms/.gitignore
 create mode 100644 examples/angular17-reactive-forms/README.md
 create mode 100644 examples/angular17-reactive-forms/angular.json
 create mode 100644 examples/angular17-reactive-forms/package.json
 create mode 100644 examples/angular17-reactive-forms/src/app/app.component.css
 create mode 100644 examples/angular17-reactive-forms/src/app/app.component.html
 create mode 100644 examples/angular17-reactive-forms/src/app/app.component.spec.ts
 create mode 100644 examples/angular17-reactive-forms/src/app/app.component.ts
 create mode 100644 examples/angular17-reactive-forms/src/app/app.config.ts
 create mode 100644 examples/angular17-reactive-forms/src/app/app.routes.ts
 create mode 100644 examples/angular17-reactive-forms/src/assets/.gitkeep
 create mode 100644 examples/angular17-reactive-forms/src/directives/base-value-accessor.ts
 create mode 100644 examples/angular17-reactive-forms/src/directives/checked-value-accessor.ts
 create mode 100644 examples/angular17-reactive-forms/src/directives/date-value-accessor.ts
 create mode 100644 examples/angular17-reactive-forms/src/directives/number-value-accessor.ts
 create mode 100644 examples/angular17-reactive-forms/src/directives/radio-value-accessor.ts
 create mode 100644 examples/angular17-reactive-forms/src/directives/select-value-accessor.ts
 create mode 100644 examples/angular17-reactive-forms/src/directives/text-value-accessor.ts
 create mode 100644 examples/angular17-reactive-forms/src/favicon.ico
 create mode 100644 examples/angular17-reactive-forms/src/index.html
 create mode 100644 examples/angular17-reactive-forms/src/main.ts
 create mode 100644 examples/angular17-reactive-forms/src/styles.css
 create mode 100644 examples/angular17-reactive-forms/tsconfig.app.json
 create mode 100644 examples/angular17-reactive-forms/tsconfig.json
 create mode 100644 examples/angular17-reactive-forms/tsconfig.spec.json

diff --git a/examples/angular17-reactive-forms/.editorconfig b/examples/angular17-reactive-forms/.editorconfig
new file mode 100644
index 0000000000..59d9a3a3e7
--- /dev/null
+++ b/examples/angular17-reactive-forms/.editorconfig
@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
diff --git a/examples/angular17-reactive-forms/.gitignore b/examples/angular17-reactive-forms/.gitignore
new file mode 100644
index 0000000000..f915cb55be
--- /dev/null
+++ b/examples/angular17-reactive-forms/.gitignore
@@ -0,0 +1,2 @@
+.angular
+.vscode
\ No newline at end of file
diff --git a/examples/angular17-reactive-forms/README.md b/examples/angular17-reactive-forms/README.md
new file mode 100644
index 0000000000..648b6b0c44
--- /dev/null
+++ b/examples/angular17-reactive-forms/README.md
@@ -0,0 +1,27 @@
+# Angular17ReactiveForms
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.0.8.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
diff --git a/examples/angular17-reactive-forms/angular.json b/examples/angular17-reactive-forms/angular.json
new file mode 100644
index 0000000000..90fc1c7f1b
--- /dev/null
+++ b/examples/angular17-reactive-forms/angular.json
@@ -0,0 +1,96 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "angular17-reactive-forms": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist/angular17-reactive-forms",
+            "index": "src/index.html",
+            "browser": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.css",
+              "node_modules/@telekom/scale-components/dist/scale-components/scale-components.css"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "angular17-reactive-forms:build:production"
+            },
+            "development": {
+              "buildTarget": "angular17-reactive-forms:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "buildTarget": "angular17-reactive-forms:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "tsconfig.spec.json",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/examples/angular17-reactive-forms/package.json b/examples/angular17-reactive-forms/package.json
new file mode 100644
index 0000000000..a495477161
--- /dev/null
+++ b/examples/angular17-reactive-forms/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "angular17-reactive-forms",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^17.0.0",
+    "@angular/common": "^17.0.0",
+    "@angular/compiler": "^17.0.0",
+    "@angular/core": "^17.0.0",
+    "@angular/forms": "^17.0.0",
+    "@angular/platform-browser": "^17.0.0",
+    "@angular/platform-browser-dynamic": "^17.0.0",
+    "@angular/router": "^17.0.0",
+    "@telekom/scale-components": "^3.0.0-beta.147",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.14.2"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^17.0.8",
+    "@angular/cli": "^17.0.8",
+    "@angular/compiler-cli": "^17.0.0",
+    "@types/jasmine": "~5.1.0",
+    "jasmine-core": "~5.1.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "typescript": "~5.2.2"
+  }
+}
diff --git a/examples/angular17-reactive-forms/src/app/app.component.css b/examples/angular17-reactive-forms/src/app/app.component.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/examples/angular17-reactive-forms/src/app/app.component.html b/examples/angular17-reactive-forms/src/app/app.component.html
new file mode 100644
index 0000000000..2b698b5dba
--- /dev/null
+++ b/examples/angular17-reactive-forms/src/app/app.component.html
@@ -0,0 +1,66 @@
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+<!-- * * * * * * * * * * * The content below * * * * * * * * * * * -->
+<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
+<!-- * * * * * * * * * * and can be replaced.  * * * * * * * * * * -->
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+<!-- * * * * * * * * * Delete the template below * * * * * * * * * -->
+<!-- * * * * * * * to get started with your project! * * * * * * * -->
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+
+<style>
+  :host {
+    display: flex;
+    padding: 1rem;
+    width: 100%;
+    justify-content: center;
+  }
+</style>
+
+<main class="main">
+  <form [formGroup]="signupForm" (ngSubmit)="onSubmit()">
+    <p>
+      <scale-text-field label="Username" formControlName="username"></scale-text-field>
+    </p>
+
+    <p>
+      <scale-text-field label="Password" formControlName="password" type="password"></scale-text-field>
+    </p>
+    <p>
+      <scale-checkbox label="I agree with the privacy policy" formControlName="consent"></scale-checkbox>
+    </p>
+    <p>
+      <scale-dropdown-select label="select" formControlName="select">
+        <scale-dropdown-select-item value="foo">Foo</scale-dropdown-select-item>
+        <scale-dropdown-select-item value="bar">Bar</scale-dropdown-select-item>
+      </scale-dropdown-select>
+    </p>
+  
+    <p>
+      <scale-date-picker
+      label="Standard"
+      value="2020-12-31"
+      placeholder="Select date"
+      formControlName="date"
+      ngDefaultControl
+      ></scale-date-picker>
+    </p> 
+    <label for="name">Name: </label>
+    <scale-button type="submit">console.log</scale-button>
+    <scale-button type="reset" variant="secondary">Reset</scale-button>
+  </form>
+  <scale-card>
+    <pre>{{ signupForm.value | json }}</pre>
+  </scale-card>
+  
+</main>
+
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+<!-- * * * * * * * * * * * The content above * * * * * * * * * * * * -->
+<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * * -->
+<!-- * * * * * * * * * * and can be replaced.  * * * * * * * * * * * -->
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+<!-- * * * * * * * * * * End of Placeholder  * * * * * * * * * * * * -->
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+
+
+<router-outlet></router-outlet>
diff --git a/examples/angular17-reactive-forms/src/app/app.component.spec.ts b/examples/angular17-reactive-forms/src/app/app.component.spec.ts
new file mode 100644
index 0000000000..b582e54280
--- /dev/null
+++ b/examples/angular17-reactive-forms/src/app/app.component.spec.ts
@@ -0,0 +1,29 @@
+import { TestBed } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AppComponent],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have the 'angular17-reactive-forms' title`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('angular17-reactive-forms');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, angular17-reactive-forms');
+  });
+});
diff --git a/examples/angular17-reactive-forms/src/app/app.component.ts b/examples/angular17-reactive-forms/src/app/app.component.ts
new file mode 100644
index 0000000000..c3052ced9c
--- /dev/null
+++ b/examples/angular17-reactive-forms/src/app/app.component.ts
@@ -0,0 +1,33 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterOutlet } from '@angular/router';
+import {  ReactiveFormsModule, FormGroup, FormControl, UntypedFormControl } from '@angular/forms';
+import { CheckedValueAccessorDirective } from '../directives/checked-value-accessor';
+import { DateValueAccessorDirective } from '../directives/date-value-accessor';
+import { SelectValueAccessorDirective } from '../directives/select-value-accessor';
+import { NumberValueAccessorDirective } from '../directives/number-value-accessor';
+import { RadioValueAccessorDirective } from '../directives/radio-value-accessor';
+import { TextValueAccessorDirective } from '../directives/text-value-accessor';
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [CommonModule, RouterOutlet, ReactiveFormsModule, CheckedValueAccessorDirective, DateValueAccessorDirective, SelectValueAccessorDirective,TextValueAccessorDirective, RadioValueAccessorDirective, NumberValueAccessorDirective ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA], // Telekom Scale
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.css'
+})
+export class AppComponent {
+  title = 'angular17-reactive-forms';
+  signupForm = new FormGroup({
+    username: new UntypedFormControl('admin'),
+    password: new UntypedFormControl({ value: '', disabled: false }),
+    consent: new UntypedFormControl(),
+    select: new UntypedFormControl('foo'),
+    date: new UntypedFormControl(),
+  });
+
+
+  onSubmit() {
+    console.log('submitting ->', this.signupForm.value, this.signupForm);
+  }
+}
diff --git a/examples/angular17-reactive-forms/src/app/app.config.ts b/examples/angular17-reactive-forms/src/app/app.config.ts
new file mode 100644
index 0000000000..6c6ef6035f
--- /dev/null
+++ b/examples/angular17-reactive-forms/src/app/app.config.ts
@@ -0,0 +1,8 @@
+import { ApplicationConfig } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideRouter(routes)]
+};
diff --git a/examples/angular17-reactive-forms/src/app/app.routes.ts b/examples/angular17-reactive-forms/src/app/app.routes.ts
new file mode 100644
index 0000000000..dc39edb5f2
--- /dev/null
+++ b/examples/angular17-reactive-forms/src/app/app.routes.ts
@@ -0,0 +1,3 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [];
diff --git a/examples/angular17-reactive-forms/src/assets/.gitkeep b/examples/angular17-reactive-forms/src/assets/.gitkeep
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/examples/angular17-reactive-forms/src/directives/base-value-accessor.ts b/examples/angular17-reactive-forms/src/directives/base-value-accessor.ts
new file mode 100644
index 0000000000..a2d0f844f7
--- /dev/null
+++ b/examples/angular17-reactive-forms/src/directives/base-value-accessor.ts
@@ -0,0 +1,48 @@
+/**
+ * @license
+ * Scale https://github.com/telekom/scale
+ *
+ * Copyright (c) 2021 Egor Kirpichev and contributors, Deutsche Telekom AG
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { Directive, ElementRef } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+
+@Directive({
+})
+export class BaseValueAccessorDirective implements ControlValueAccessor {
+  onChange = (_: any) => {};
+  
+  onTouched = () => {};
+
+  constructor(protected el: ElementRef) {}
+
+  writeValue(value: any) {
+    this.el.nativeElement.value = value;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  registerOnChange(fn: (_: any) => {}): void {
+    this.onChange = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.el.nativeElement.disabled = isDisabled;
+  }
+
+  _handleInput(value: any): void {
+    this.onChange(value);
+  }
+
+  _handleDatePickerSelect(target: any): void {
+    const value = target.querySelector('duet-date-picker').value;
+    this.onChange(value);
+  }
+}
diff --git a/examples/angular17-reactive-forms/src/directives/checked-value-accessor.ts b/examples/angular17-reactive-forms/src/directives/checked-value-accessor.ts
new file mode 100644
index 0000000000..8bc5bd85cf
--- /dev/null
+++ b/examples/angular17-reactive-forms/src/directives/checked-value-accessor.ts
@@ -0,0 +1,41 @@
+/**
+ * @license
+ * Scale https://github.com/telekom/scale
+ *
+ * Copyright (c) 2021 Egor Kirpichev and contributors, Deutsche Telekom AG
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { Directive, ElementRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { BaseValueAccessorDirective } from './base-value-accessor';
+
+@Directive({
+  standalone: true,
+  selector: 'scale-checkbox[formControlName],scale-switch[formControlName],[sclCheckedControl]',
+  host: {
+    '(scaleChange)': '_handleInput($event.target.checked)',
+    '(blur)': 'onTouched()'
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: CheckedValueAccessorDirective,
+      multi: true
+    }
+  ]
+})
+export class CheckedValueAccessorDirective extends BaseValueAccessorDirective {
+
+  constructor(el: ElementRef) {
+    super(el);
+  }
+
+  override writeValue(value: any) {
+    this.el.nativeElement.checked = value;
+  }
+
+}
diff --git a/examples/angular17-reactive-forms/src/directives/date-value-accessor.ts b/examples/angular17-reactive-forms/src/directives/date-value-accessor.ts
new file mode 100644
index 0000000000..193b43ef59
--- /dev/null
+++ b/examples/angular17-reactive-forms/src/directives/date-value-accessor.ts
@@ -0,0 +1,25 @@
+import { Directive, ElementRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+import { BaseValueAccessorDirective } from './base-value-accessor';
+
+@Directive({
+  standalone: true,
+  /* tslint:disable-next-line:directive-selector */
+  selector: 'scale-date-picker[formControlName],[sclDateControl]',
+  host: {
+    '(scale-change)': '_handleDatePickerSelect($event.target)',
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: DateValueAccessorDirective,
+      multi: true
+    }
+  ]
+})
+export class DateValueAccessorDirective extends BaseValueAccessorDirective {
+  constructor(el: ElementRef) {
+    super(el);
+  }
+}
diff --git a/examples/angular17-reactive-forms/src/directives/number-value-accessor.ts b/examples/angular17-reactive-forms/src/directives/number-value-accessor.ts
new file mode 100644
index 0000000000..9108af22db
--- /dev/null
+++ b/examples/angular17-reactive-forms/src/directives/number-value-accessor.ts
@@ -0,0 +1,43 @@
+/**
+ * @license
+ * Scale https://github.com/telekom/scale
+ *
+ * Copyright (c) 2021 Egor Kirpichev and contributors, Deutsche Telekom AG
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { Directive, ElementRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { BaseValueAccessorDirective } from './base-value-accessor';
+
+@Directive({
+  standalone: true,
+  selector: 'scale-text-field[type="number"][formControlName],[sclNumberControl]',
+  host: {
+    '(scaleInput)': '_handleInput($event.target.value)',
+    '(blur)': 'onTouched()'
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: NumberValueAccessorDirective,
+      multi: true
+    }
+  ]
+})
+export class NumberValueAccessorDirective extends BaseValueAccessorDirective {
+
+  constructor(el: ElementRef) {
+    super(el);
+  }
+
+  override registerOnChange(fn: (_: number|null) => void): void {
+    this.onChange = (value): void => {
+      fn(value === '' ? null : parseFloat(value));
+    };
+  }
+
+}
diff --git a/examples/angular17-reactive-forms/src/directives/radio-value-accessor.ts b/examples/angular17-reactive-forms/src/directives/radio-value-accessor.ts
new file mode 100644
index 0000000000..3465eb6a1e
--- /dev/null
+++ b/examples/angular17-reactive-forms/src/directives/radio-value-accessor.ts
@@ -0,0 +1,39 @@
+/**
+ * @license
+ * Scale https://github.com/telekom/scale
+ *
+ * Copyright (c) 2021 Egor Kirpichev and contributors, Deutsche Telekom AG
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { Directive, ElementRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { BaseValueAccessorDirective } from './base-value-accessor';
+
+@Directive({
+  standalone: true,
+  selector: 'scale-radio-button[formControlName],[sclRadioControl]',
+  host: {
+    '(scaleChange)': '_handleInput($event.target.value)',
+    '(blur)': 'onTouched()'
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: RadioValueAccessorDirective,
+      multi: true
+    }
+  ]
+})
+export class RadioValueAccessorDirective extends BaseValueAccessorDirective {
+
+  constructor(el: ElementRef) {
+    super(el);
+  }
+
+  // TODO
+
+}
diff --git a/examples/angular17-reactive-forms/src/directives/select-value-accessor.ts b/examples/angular17-reactive-forms/src/directives/select-value-accessor.ts
new file mode 100644
index 0000000000..ee8ae42906
--- /dev/null
+++ b/examples/angular17-reactive-forms/src/directives/select-value-accessor.ts
@@ -0,0 +1,25 @@
+import { Directive, ElementRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+import { BaseValueAccessorDirective } from './base-value-accessor';
+
+@Directive({
+  standalone: true,
+  /* tslint:disable-next-line:directive-selector */
+  selector: 'scale-dropdown-select[formControlName],[sclSelectControl]',
+  host: {
+    '(scale-change)': '_handleInput($event.target.value)'
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: SelectValueAccessorDirective,
+      multi: true
+    }
+  ]
+})
+export class SelectValueAccessorDirective extends BaseValueAccessorDirective {
+  constructor(el: ElementRef) {
+    super(el);
+  }
+}
diff --git a/examples/angular17-reactive-forms/src/directives/text-value-accessor.ts b/examples/angular17-reactive-forms/src/directives/text-value-accessor.ts
new file mode 100644
index 0000000000..553b8c2607
--- /dev/null
+++ b/examples/angular17-reactive-forms/src/directives/text-value-accessor.ts
@@ -0,0 +1,38 @@
+/**
+ * @license
+ * Scale https://github.com/telekom/scale
+ *
+ * Copyright (c) 2021 Egor Kirpichev and contributors, Deutsche Telekom AG
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { Directive, ElementRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { BaseValueAccessorDirective } from './base-value-accessor';
+
+@Directive({
+  standalone: true,
+  selector: 'scale-text-field:not([type="number"])[formControlName],scale-textarea[formControlName],scale-dropdown[formControlName],[sclTextControl]',
+  host: {
+    '(scaleInput)': '_handleInput($event.target.value)',
+    '(scaleChange)': '_handleInput($event.target.value)',
+    '(blur)': 'onTouched()'
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: TextValueAccessorDirective,
+      multi: true
+    }
+  ]
+})
+export class TextValueAccessorDirective extends BaseValueAccessorDirective {
+
+  constructor(el: ElementRef) {
+    super(el);
+  }
+
+}
diff --git a/examples/angular17-reactive-forms/src/favicon.ico b/examples/angular17-reactive-forms/src/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..57614f9c967596fad0a3989bec2b1deff33034f6
GIT binary patch
literal 15086
zcmd^G33O9Omi+`8$@{|M-I6TH3wzF-p5CV8o}7f~KxR60LK+ApEFB<$bcciv%@SmA
zV{n>g85YMFFeU*Uvl=i4v)C*qgnb;$GQ=3XTe9{Y%c`mO<tM&Bl57ox;hfPqkLUVT
zzv|vsua^I+V3=M^Z)U^@hH5cWC})^|W*9~+?o5X>%su)noNCCQ*@t1WXn|B(hQ7i~
zrUK8|pUkD6#lNo!bt$6)jR!&C?`P5G(`e((P($RaLeq+o0Vd~f11;qB05kdbAOm?r
zXv~GYr_sibQO9NGTCdT;+G(!{4Xs@4fPak8#L8PjgJwcs-Mm#nR_Z0s&u?nDX5^~@
z+A6?}g0|=4e_LoE69pPFO`yCD@BCjgKpzMH0O4Xs{Ahc?K3<?BQv_-<UC>HC5;l=f
zg>}alhBXX&);z$E-wai+9TTRtBX-bWYY@cl$@YN#gMd~tM_5lj6W%8ah4;uZ;jP@Q
zVbuel1rPA?2@x9Y+u?e`l{Z4ngfG5q5BLH5QsEu4GVpt{KIp1?U)=3+KQ;%7ec8l*
zdV=zZgN5>O3G(3L2fqj3;oBbZZw$Ij@`Juz@?+yy#OPw)>#wsTewVgTK9BGt5Ab<U
ze$Tf(VBZpa!SSqoXlj(c_>Z&?K&B3GVF&yu?@(Xj3fR3n+ZP0%+wo)D9_xp>Z$`A4
zfV>}NWjO#3lqumR0`gvnffd9Ka}JJMuHS&|55-*mCD#8e^anA<+sFZVaJe7{=p*oX
zE_Uv?1>e~ga=seYzh{9P+n5<+7&9}<n&VL-3~Og{<S)TZE4h*#P`v^L#_Z0pidV7T
z|Ib<xXZ+do&R-q5D%lf8SW`2_x^ho>&(kwqSaz;1aD|YM3HBiy<))4~QJSIryyqp|
z8nGc(8<b%O&Bp|DVqS`wWF{E*^YfmUv_Uw3r7mDGG4`GR*q(1;f_^;UhdzKc_IbgK
zICR2{aDBicoldxr=tGynCuo=7-^G>>3(_nEI4n)n7j(&d4idW1tVLjZ7QbNLXg;LB
ziHsS5pXHEjGJZb59K<i<Ee&OtiLJ`)M3V_+b)4D=vLUwF0FoC|YuFKcTMx1?`byI+
z(a~UU_3@v>cvS~wv;uZR-+4qEq<Dv4CQD>ow`;JCfB*+b^UL^3!?;-^F%yt=VjU|v
z39SSqKcRu_NVvz!zJzL0CceJaS6%!(eMshPv_0U5G`~!a#I$qI5Ic(>IONej@aH=f
z)($TAT#1I{iCS4f{D2+ApS=$3E7}5=+y(rA9mM#;Cky%b*Gi0KfFA`ofKTzu`AV-9
znW|y@19rrZ*!N2AvDi<_ZeR3O2R{#dh1#3-d%$k${Rx42h+i&GZo5!C^dSL34*AKp
z27mTd>k>?V&X;Nl%GZ(>0s`1UN~Hfyj>KPjtnc|)xM@{H_B9rNr~LuH`Gr5_am&Ep
zTjZA8hljNj5H1Ipm-uD9rC}U{-vR!eay5&6x6FkfupdpT*84MVwGpdd(}ib)zZ3Ky
z7C$p<Hy;Do`sgqRiyt`v4|vWm>njc82(W_y_F{PhYj?o!@3__UUvpX)v69aBSzYj3
zdi}YQkKs^SyXyFG2LTRz9{(w}y~!`{EuAaUr6G1M{*%c+kP1olW9z23dSH!G4_HSK
zzae-DF$OGR{ofP*!$a(r^5Go>I3SObVI6FLY)N@o<*gl0&kLo-OT{Tl*7nCz>Iq=?
zcigIDHtj|H;6sR?or8Wd_a4996GI*CXGU}o;D9`^FM!AT1pBY~?|4h^61BY#_yIfO
zKO?E0<gGmaIqZ?!V)C4TU)ygD!7%{#2Z4PA_Z^sH&W~^s5a8g62h300cYOT~^&L-X
zs{`!igBqM?Qtqn#Sxdn7fL{~!Wf%O|2f%?lFT#H9GR1z8V(0SU_6798%0zpQ{r8}>
zJ{Pc`9rVEI&$xxXu`<5E)&+m(7zX^v0rqofLs&bnQT(1baQkAr^kEsk)15vlzAZ-l
z@OO9RF<+IiJ*O@HE256gCt!bF=NM*vh|WVWmjVawcNoksRTMvR03H{p@cjwKh(CL4
z7_<J2TUZ-fC3|#k{4sefes&DdKHzfT?xA7by!j#_$N_mE2QCko-_cgxX^3a~Gj3bO
zh1n|c9@3V$%VmFxUpsIkI|le1U~R+pH;ZhUcPM`3fIK|;(}}_D7Jv5E*hY66_Q+s+
z#P99{^dX#!I{SgUhb|CXHv)d-aD(~|p96PnL;3FT_?zD%*}XuSbdV?|`-w_aMBMmk
zAF%Tf?FSeO*bj6Zxc5<ek}UfWKXSmnKwrYX0H1<B@Mk{kjtk6%P4be4R_PHJevS{Z
z<Jc1i`aOpA!o0%8j~uxDfIOfdKn_W?8TkH_>PB(dM=kO)!s4fW!1p0f93YN@?ZSG`
z$B!JaAJCtW$B97}HNO9(x-t30&E}Mo1UPi@Av%uHj~?T|!4JLwV;KCx8xO#b9IlUW
zI6+{a@Wj|<2Y=U;a@vXbxqZNngH8^}LleE_4*0&O7#3iGxfJ%Id>+sb;7{L=aIic8
z|EW|{{S)J-wr@;3PmlxRXU8!e2gm_%s|ReH!reFcY8%$Hl4M5>;6^UDUUae?kOy#h
zk~6Ee_@ZAn48Bab__^bN<q%(Zo;%n3!t5yz_MM01_UnKdcmN0F0eu1cG*9pK<QcVj
zCE`a8h+jo<1HYcs(~~mrT~Z>mQ~+k=02<Q%#1pWs`lOPf^+T!%;71PNLrT%U!`!_M
zmVa6r&e&kR0N(-pH(zWg=abv~iYWk=#*}l%06$1$+68m7_~<rIaoMMZn_myiS+E9N
z9c(rN2Y<c|)w1&Vx}i7Q>jz)e0d9Z3>G?RGG!65?d1>9}7iG17?P*=GUV-#<F7Z__
zAx;G$3`2-b<kGq@m#*mT(vU~R!7%BdZ44s<O~2s6xM_Tj<xo2rMgis6-y^Msw3T5{
zH$%FaVNln1rq2?J<6DL~?bi1NWI4lB5UMjlQ@p)7TA>SbLRw)Hu{zx*azHxWk<Mz7
zBi#mR)L~AA4$`Ovgxsg;4Aj&LY?|r{c;1U@deR6wgX#*<0*0}Hl|&5V1g)SvGZfBV
z!27<!DFAItcd&MIraQRyfO}eED!-xPzNh8>GNTWl@HeWjA?39Ia|sCi{e;!^`1Oec
zb>Z|b65OM*;eC=ZLSy?_fg$&^2xI>qSLA2G*$nA3GEnp3$N-)46`|36m*sc#4%C|h
zBN<2U;7k>&G_wL4=Ve5z`ubVD&*Hxi)r@{4RCDw7U_D`lbC(9&pG5C*z#W>8>HU)h
z!h3g?2UL&sS!oY5$3?VlA0Me9W5e~V;2jds*fz^updz#AJ%G8w2V}AEE?E^=MK%Xt
z__Bx1cr7+DQmuHmzn*|hh%~eEc9@m05@clWfpEFcr+06%0&dZJH&@8^&@*$qR@}o3
z@Tuuh2FsLz^zH+dN&T&?0G3I?MpmYJ;GP$J!Ez<EAfkuO_$)Rv+PDYrG)x<4BOp`h
zJq(cPAzCs!NJ-`dHj*yfLn^oUtkjRp8S#4g%oyu5l=laiCeIjXeRo!v{vD9N4p5I@
z98&uSkbeYJjm-`IZftS%xyQ~@eKol<O7B;BUv+ht$L|-IQxpmM{O;a+TKU@GrHk8w
zzHpzF&yO{vu9KTAfa7Vk;jJEMR~wk2GzTtlp9L?7)Bfw`R5Qtl*RJvQ-qU)n30^u|
zAMiOntNttv>jeM#YLJ!W$}MVNb0^HfOA>5Fe~UNn%Zk(PT@~9}1d<z7w`*I>t)1UQ
zU*B5K?Dl#G74qmg|2>^>0WtLX#Jz{lO4NT`NYB*(L#D|5IpXr9v&7a@YsGp3vLR7L
zHYGHZg7{ie6n~2p$6Yz>=^cEg7tEgk-1YRl%-s7^cbqFb(U7&Dp78+&ut5!Tn(hER
z|Gp4Ed@CnOPeAe|N>U(dB;SZ?NU^AzoD^UAH_vamp6Ws}{|mSq`^+VP1<S4$8S@Se
zdq@Do?xA+FBFXjv=6TY2GV_CcsfKO8P|`pSB>g~2B{%N-!mWz<`)G)<vVBk6H#4){
z=Vu$l=6$8~d<`)`{hr#zXE}+Q>>V-<`9`L4?3dM%Qh6<@kba+m`JS{Ya@9Fq*m6$$
zA1%Ogc~VRH33|S9l%CNb4zM%k^EIpqY}@h{w(aBcJ9c05oiZx#SK9t->5lSI`=&l~
z+-Ic)a{FbBhXV$Xt!WRd`R#Jk-$+_Z52rS>?Vpt2IK<84|E-SBEoIw>cs=a{BlQ7O
z-?{Fy_M&84&9|KM5wt~)*!~i~E=(6m8(uCO)I=)M?)&sRbzH$9Rovzd?ZEY}GqX+~
zFbEbLz`BZ49=2Yh-|<`waK-_4!7`ro@zlC|r&I4fc4oyb+m=|c8)8%tZ-z5FwhzDt
zL5kB@u53`d@%nHl0Sp)Dw`(QU&>vujEn?GPEXUW!Wi<+4e%BORl&BIH+SwRcbS}X@
z01Pk|vA%OdJKAs17zSXtO55k!;%m9>1eW9LnyAX4uj7@${O6cfii`49qTNItzny5J
zH&Gj`e}o}?xjQ}r?LrI%FjUd@xflT3|7LA|ka%Q3i}a8gVm<D-KiB{<ME*mIIJvPX
z_?wI2B8`LWm6;zq*T#3f=@x16x)y0E8#iX#r#5i)1K5F{J<#z8^A*_d?BI4g#=_WG
z(g+s@><`HIWoJGH=$EGClX^C0lysQJ>UO(q&;`T#8txuoQ_{l^kEV9CAdXuU1Ghg8
zN_6hHFuy&1x<z(mSz}ryX-+vs&<1V{v0JO#2INfkHdp6~?c+=2jv8nmG2EbI;k%(W
z3#`BVw)knNw=uO+>24q5-(Z7;!poYdt*`UTdrQOIQ!2O7_+AHV2hgXaEz7)>$LEdG
z<8vE^T<d5Y^c`tRKI2e{51fJd7xVqqF#b=-4dqqC+dHlfHtM^3zdr491GL{FId%-@
zzV6ERH2;j~e#`|~>w$|YwZHZDPM!SNOAWG$?J)MdmEk{U!!$M#fp7<eLLj6-0}zjd
zxPG-%QE9&hq6;&EEVqg3K{9Qkvzd<c(@PxbOO`klOER2_UKxZ64OOs`?&y_4<-W)!
zu!(5=B+RBDtM!Cvtpwr}u;~?3amOjT^)gzx^Y@#+ZK)%L=92#qnvVRTuhG4y#C&gh
zOh`k&Q6cJ8uLT)xqv-#~qA>*Wo}jJ$Q(=8>R`Ats?e|VU?Zt7Cdh%AdnfyN3MBWw{
z$OnREvPf7%z6`#2##_7id|H%Y{vV^vWXb?5d5?a_y&t3@p9t$ncHj-NBdo&X{wrfJ
zamN)VMYROYh_SvjJ=Xd!Ga?PY_$;*L=SxFte!4O6%0HEh%iZ4=gvns7IWIyJHa|hT
z2;1+e)`TvbNb3-0z&DD_)Jomsg-7p_Uh`wjGnU1urmv1_oVqRg#=C?e?!7DgtqojU
zWoAB($&53;TsXu^@2;8M`#z{=rPy?JqgYM0CDf4v@z=ZD|ItJ&8%_7A#K?S{wjxgd
z?xA6JdJojrWpB7fr2p_MSsU4(R7=XGS0+Eg#xR=j>`H@R9<ea9ez7LeH1EXlc5;O7
ztyW0w<FMRxhWuo2a;v&b{)6_e><EpxxqhnnP3hXmmGoW-y_ed1?&u9-%Np39lvDXS
zwf#1h1ARzZx2-}}-Q{~*8MpP6hORNjkfroq+=9v5#P(g+JNFl`x5yD$U&cDhl4|7V
zQZBh;Xw6B5KUF5~r1wPVo`qsCge>{XjwBm<mI-HNm*^V3KiPH_-{<RAX>qAiOxOL`
zt?XK-iTEOWV}f<c$uy@9)|c<;`&Ve3zDTSb!GBjJDNSifJ=LyEDrVO#x^Jk`^;`W4
zmdh78CX~tTHPw_uMY8rRK1basFF)9ndd}G@+ILMGyZH@#&esP-no*U>>Pz3H-s*>W
z4~8C&Xq25UQ^xH6H9kY_RM1$ch+%YLF72AA7^b{~VNTG}Tj#qZltz5Q=qxR`&oIlW
Nr__JTFzvMr^FKp4S3v*(

literal 0
HcmV?d00001

diff --git a/examples/angular17-reactive-forms/src/index.html b/examples/angular17-reactive-forms/src/index.html
new file mode 100644
index 0000000000..6f398bf1b6
--- /dev/null
+++ b/examples/angular17-reactive-forms/src/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Angular17ReactiveForms</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>
diff --git a/examples/angular17-reactive-forms/src/main.ts b/examples/angular17-reactive-forms/src/main.ts
new file mode 100644
index 0000000000..5a23812fba
--- /dev/null
+++ b/examples/angular17-reactive-forms/src/main.ts
@@ -0,0 +1,8 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
+import { defineCustomElements } from '@telekom/scale-components/loader';
+
+bootstrapApplication(AppComponent, appConfig)
+  .catch((err) => console.error(err));
+defineCustomElements();
\ No newline at end of file
diff --git a/examples/angular17-reactive-forms/src/styles.css b/examples/angular17-reactive-forms/src/styles.css
new file mode 100644
index 0000000000..90d4ee0072
--- /dev/null
+++ b/examples/angular17-reactive-forms/src/styles.css
@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */
diff --git a/examples/angular17-reactive-forms/tsconfig.app.json b/examples/angular17-reactive-forms/tsconfig.app.json
new file mode 100644
index 0000000000..374cc9d294
--- /dev/null
+++ b/examples/angular17-reactive-forms/tsconfig.app.json
@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": [
+    "src/main.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+}
diff --git a/examples/angular17-reactive-forms/tsconfig.json b/examples/angular17-reactive-forms/tsconfig.json
new file mode 100644
index 0000000000..f37b67ff02
--- /dev/null
+++ b/examples/angular17-reactive-forms/tsconfig.json
@@ -0,0 +1,33 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "sourceMap": true,
+    "declaration": false,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
diff --git a/examples/angular17-reactive-forms/tsconfig.spec.json b/examples/angular17-reactive-forms/tsconfig.spec.json
new file mode 100644
index 0000000000..be7e9da76f
--- /dev/null
+++ b/examples/angular17-reactive-forms/tsconfig.spec.json
@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}

From 8a694a21df324f987f8bc62c765391c978e4fcab Mon Sep 17 00:00:00 2001
From: Amir Baghdoust <baghdoust@gmail.com>
Date: Wed, 28 Aug 2024 08:56:21 +0200
Subject: [PATCH 02/25] ci: sets up docker compose alias for compatibility
 (#2342)

---
 .github/workflows/build-pr.yml | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

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

From 592c69d00e4a50f7113973bc583dff19f1cc8979 Mon Sep 17 00:00:00 2001
From: tshimber <110041439+tshimber@users.noreply.github.com>
Date: Thu, 29 Aug 2024 09:34:05 +0200
Subject: [PATCH 03/25] fix: dropdown scroll fixed (#2333)

---
 .../src/components/dropdown-select/dropdown-select.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

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`}

From 0b21978bad9516d9958aa61e733a3f8348d11799 Mon Sep 17 00:00:00 2001
From: tshimber <110041439+tshimber@users.noreply.github.com>
Date: Thu, 29 Aug 2024 09:34:58 +0200
Subject: [PATCH 04/25] chip accessibility fix (#2332)

* feat: chip keyboard handling fixed

* feat: chip html added

* fix: snapshot updated

* fix: focus issues fixed

* fix: readme fix
---
 .../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 +-
 packages/components/src/html/chip.html        | 51 +++++++++++++
 5 files changed, 81 insertions(+), 50 deletions(-)
 create mode 100644 packages/components/src/html/chip.html

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/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>

From 318df5658a21b7eea44abe37eba1fc6bedfc243c Mon Sep 17 00:00:00 2001
From: tshimber <110041439+tshimber@users.noreply.github.com>
Date: Thu, 29 Aug 2024 09:36:33 +0200
Subject: [PATCH 05/25] checkbox and switch css fixes for high contrast mode
 (#2317)

fix: checkbox and switch CSS fixes for high contrast mode
---
 .../src/components/checkbox/checkbox.css      | 13 +++++
 .../src/components/switch/switch.css          |  2 +-
 packages/components/src/html/checkbox.html    | 50 +++++++++++++++++++
 3 files changed, 64 insertions(+), 1 deletion(-)
 create mode 100644 packages/components/src/html/checkbox.html

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/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/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>

From 168f710fedae9df7f08decb79066b14bd7f73d1e Mon Sep 17 00:00:00 2001
From: tshimber <110041439+tshimber@users.noreply.github.com>
Date: Thu, 29 Aug 2024 09:52:52 +0200
Subject: [PATCH 06/25] ghost btn in storybook  (#2341)

* fix: ghost btn in storybook fixed

* fix: one more ghost fixed
---
 .../stories/components/button/Button.stories.mdx       | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

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">

From 8681ed8d4f1cd08a756cf7e952e520df840c40b4 Mon Sep 17 00:00:00 2001
From: tshimber <110041439+tshimber@users.noreply.github.com>
Date: Thu, 19 Sep 2024 10:50:25 +0200
Subject: [PATCH 07/25] event part in storybook fixed (#2345)

* fix: event part in storybook fixed

* fix: german versions fixed
---
 .../stories/setup_and_info/ScaleAndAngular_de.md       |  4 ++--
 .../stories/setup_and_info/ScaleAndAngular_en.md       |  4 ++--
 .../stories/setup_and_info/ScaleAndReact_de.md         | 10 ++++++----
 .../stories/setup_and_info/ScaleAndReact_en.md         | 10 ++++++----
 .../stories/setup_and_info/ScaleAndVue_de.md           |  6 +++---
 .../stories/setup_and_info/ScaleAndVue_en.md           |  6 +++---
 6 files changed, 22 insertions(+), 18 deletions(-)

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>
 ```
 

From 270654297695571068c894aee30178729f361833 Mon Sep 17 00:00:00 2001
From: tshimber <110041439+tshimber@users.noreply.github.com>
Date: Thu, 19 Sep 2024 12:32:15 +0200
Subject: [PATCH 08/25] 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
---
 .../src/components/text-field/readme.md       |  2 -
 .../src/components/text-field/text-field.tsx  | 13 ++++--
 packages/components/src/html/text-field.html  | 45 +++++++++++++++++++
 .../components/text-field/ScaleTextField.vue  |  2 +-
 .../text-field/TextField.stories.mdx          | 43 +++++++++++-------
 5 files changed, 83 insertions(+), 22 deletions(-)
 create mode 100644 packages/components/src/html/text-field.html

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/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/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);

From 3484ceb63395a506227d0e0ffa072387e1fda389 Mon Sep 17 00:00:00 2001
From: Amir Baghdoust <baghdoust@gmail.com>
Date: Thu, 19 Sep 2024 13:21:04 +0200
Subject: [PATCH 09/25] chore(release): publish (#2354)

* chore(release): publish
---
 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 +-
 packages/design-tokens/CHANGELOG.md      |  9 +++++++++
 packages/design-tokens/package.json      |  2 +-
 packages/storybook-vue/CHANGELOG.md      |  9 +++++++++
 packages/storybook-vue/package.json      |  6 +++---
 packages/visual-tests/CHANGELOG.md       |  9 +++++++++
 packages/visual-tests/package.json       |  2 +-
 16 files changed, 93 insertions(+), 10 deletions(-)

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/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/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": {

From 1c98c496031a5b57d95cfd45da01e6e6387fb040 Mon Sep 17 00:00:00 2001
From: tshimber <110041439+tshimber@users.noreply.github.com>
Date: Thu, 10 Oct 2024 10:00:34 +0200
Subject: [PATCH 10/25] data-grid extend localization (#2344)

feat(data-grid): extends table options localization with TableOptions, expand and collapse attributes
---
 .../data-grid/cell-handlers/cell-interface.ts |  1 +
 .../data-grid/cell-handlers/html-cell.tsx     | 16 ++++++--
 .../src/components/data-grid/data-grid.tsx    | 12 +++++-
 .../src/components/data-grid/readme.md        | 40 +++++++++----------
 packages/components/src/html/data-grid.html   | 10 +++++
 .../components/data-grid/DataGrid.stories.mdx |  4 +-
 6 files changed, 55 insertions(+), 28 deletions(-)

diff --git a/packages/components/src/components/data-grid/cell-handlers/cell-interface.ts b/packages/components/src/components/data-grid/cell-handlers/cell-interface.ts
index 59ed61527c..4ea393cb61 100644
--- a/packages/components/src/components/data-grid/cell-handlers/cell-interface.ts
+++ b/packages/components/src/components/data-grid/cell-handlers/cell-interface.ts
@@ -30,5 +30,6 @@ export interface Cell {
     rowIndex,
     columnIndex,
     isAutoWidthCheck,
+    localization,
   }): HTMLElement;
 }
diff --git a/packages/components/src/components/data-grid/cell-handlers/html-cell.tsx b/packages/components/src/components/data-grid/cell-handlers/html-cell.tsx
index 00a2acd381..f77e71ce8e 100644
--- a/packages/components/src/components/data-grid/cell-handlers/html-cell.tsx
+++ b/packages/components/src/components/data-grid/cell-handlers/html-cell.tsx
@@ -20,16 +20,24 @@ export const HTMLCell: Cell = {
     // Skip check as content width is always the same
     return rows[0][columnIndex];
   },
-  render: ({ content, component }) => {
+  render: ({ content, component, localization }) => {
+    const getAriaLabel = () => {
+      if (localization?.expand && localization?.collapse) {
+        return content.isExpanded
+          ? localization?.collapse
+          : localization?.expand;
+      }
+      return `Activate to ${
+        content.isExpanded ? 'collapse' : 'expand'
+      } content`;
+    };
     return (
       content && (
         <scale-button
           variant="secondary"
           size="small"
           icon-only
-          inner-aria-label={`Activate to ${
-            content.isExpanded ? 'collapse' : 'expand'
-          } content`}
+          inner-aria-label={getAriaLabel()}
           onClick={() => {
             content.isExpanded = !content.isExpanded;
             component.forceRender++;
diff --git a/packages/components/src/components/data-grid/data-grid.tsx b/packages/components/src/components/data-grid/data-grid.tsx
index 24d643781a..240b978ad9 100644
--- a/packages/components/src/components/data-grid/data-grid.tsx
+++ b/packages/components/src/components/data-grid/data-grid.tsx
@@ -112,13 +112,16 @@ export class DataGrid {
   /** (optional) Title for sortable columns */
   @Prop() sortableColumnTitle?: string = 'Activate to sort column';
   /**
-   * (optional) set localization for sort, toggle and select/deselect table
+   * (optional) set localization for sort, toggle, select/deselect, table options, expand/collapse (html cell)
    * Default is English.
    */
   @Prop() localization?: {
     sortBy: string;
     toggle: string;
     select: string;
+    tableOptions: string;
+    expand?: string;
+    collapse?: string;
   };
   /* 4. Events (alphabetical) */
   /** Event triggered every time the editable cells are changed, updating the original rows data */
@@ -797,7 +800,11 @@ export class DataGrid {
           icon-only
           data-sortable={this.isSortable}
         >
-          <scale-icon-service-settings accessibilityTitle="Table options"></scale-icon-service-settings>
+          <scale-icon-service-settings
+            accessibilityTitle={
+              this.localization?.tableOptions || 'Table options'
+            }
+          ></scale-icon-service-settings>
         </scale-button>
         <scale-menu-flyout-list>
           {this.isSortable && (
@@ -1311,6 +1318,7 @@ export class DataGrid {
           component: this,
           rowIndex,
           columnIndex,
+          localization: this.localization,
         })}
       </td>
     );
diff --git a/packages/components/src/components/data-grid/readme.md b/packages/components/src/components/data-grid/readme.md
index c607a5f84e..ba1f894f5b 100644
--- a/packages/components/src/components/data-grid/readme.md
+++ b/packages/components/src/components/data-grid/readme.md
@@ -5,26 +5,26 @@
 
 ## Properties
 
-| Property              | Attribute               | Description                                                                                  | Type                                                  | Default                     |
-| --------------------- | ----------------------- | -------------------------------------------------------------------------------------------- | ----------------------------------------------------- | --------------------------- |
-| `fields`              | `fields`                | Input fields config array                                                                    | `any`                                                 | `undefined`                 |
-| `freezeHeader`        | `freeze-header`         | (optional) Freeze header row from scrolling                                                  | `boolean`                                             | `false`                     |
-| `heading`             | `heading`               | (optional) Heading string                                                                    | `string`                                              | `''`                        |
-| `height`              | `height`                | (optional) Set static table height, by default will auto-resize                              | `string`                                              | `undefined`                 |
-| `hideBorder`          | `hide-border`           | (optional) Set to true to remove border                                                      | `boolean`                                             | `false`                     |
-| `hideHeader`          | `hide-header`           | (optional) Set to true to hide header row                                                    | `boolean`                                             | `false`                     |
-| `hideInfo`            | `hide-info`             | (optional) Set to true to remove info footer block including pagination and selection status | `boolean`                                             | `false`                     |
-| `hideMenu`            | `hide-menu`             | (optional) Set to true to hide settings menu                                                 | `boolean`                                             | `false`                     |
-| `localization`        | --                      | (optional) set localization for sort, toggle and select/deselect table Default is English.   | `{ sortBy: string; toggle: string; select: string; }` | `undefined`                 |
-| `numbered`            | `numbered`              | (optional) Set to true to add numbers column                                                 | `boolean`                                             | `false`                     |
-| `pageSize`            | `page-size`             | (optional) Set number of rows to display per pagination page                                 | `number`                                              | `Infinity`                  |
-| `rows`                | `rows`                  | Input data array                                                                             | `any`                                                 | `undefined`                 |
-| `selectable`          | `selectable`            | (optional) Set to true to add selection column                                               | `boolean`                                             | `false`                     |
-| `selection`           | --                      | Read-only selection array - populated with raw data from selected rows                       | `string[]`                                            | `[]`                        |
-| `shadeAlternate`      | `shade-alternate`       | (optional) Shade every second row darker                                                     | `boolean`                                             | `true`                      |
-| `sortableColumnTitle` | `sortable-column-title` | (optional) Title for sortable columns                                                        | `string`                                              | `'Activate to sort column'` |
-| `styles`              | `styles`                | (optional) Injected css styles                                                               | `any`                                                 | `undefined`                 |
-| `visible`             | `visible`               | (optional) Set to false to hide table, used for nested tables to re-render upon toggle       | `boolean`                                             | `true`                      |
+| Property              | Attribute               | Description                                                                                                                   | Type                                                                                                            | Default                     |
+| --------------------- | ----------------------- | ----------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | --------------------------- |
+| `fields`              | `fields`                | Input fields config array                                                                                                     | `any`                                                                                                           | `undefined`                 |
+| `freezeHeader`        | `freeze-header`         | (optional) Freeze header row from scrolling                                                                                   | `boolean`                                                                                                       | `false`                     |
+| `heading`             | `heading`               | (optional) Heading string                                                                                                     | `string`                                                                                                        | `''`                        |
+| `height`              | `height`                | (optional) Set static table height, by default will auto-resize                                                               | `string`                                                                                                        | `undefined`                 |
+| `hideBorder`          | `hide-border`           | (optional) Set to true to remove border                                                                                       | `boolean`                                                                                                       | `false`                     |
+| `hideHeader`          | `hide-header`           | (optional) Set to true to hide header row                                                                                     | `boolean`                                                                                                       | `false`                     |
+| `hideInfo`            | `hide-info`             | (optional) Set to true to remove info footer block including pagination and selection status                                  | `boolean`                                                                                                       | `false`                     |
+| `hideMenu`            | `hide-menu`             | (optional) Set to true to hide settings menu                                                                                  | `boolean`                                                                                                       | `false`                     |
+| `localization`        | --                      | (optional) set localization for sort, toggle, select/deselect, table options, expand/collapse (html cell) Default is English. | `{ sortBy: string; toggle: string; select: string; tableOptions: string; expand?: string; collapse?: string; }` | `undefined`                 |
+| `numbered`            | `numbered`              | (optional) Set to true to add numbers column                                                                                  | `boolean`                                                                                                       | `false`                     |
+| `pageSize`            | `page-size`             | (optional) Set number of rows to display per pagination page                                                                  | `number`                                                                                                        | `Infinity`                  |
+| `rows`                | `rows`                  | Input data array                                                                                                              | `any`                                                                                                           | `undefined`                 |
+| `selectable`          | `selectable`            | (optional) Set to true to add selection column                                                                                | `boolean`                                                                                                       | `false`                     |
+| `selection`           | --                      | Read-only selection array - populated with raw data from selected rows                                                        | `string[]`                                                                                                      | `[]`                        |
+| `shadeAlternate`      | `shade-alternate`       | (optional) Shade every second row darker                                                                                      | `boolean`                                                                                                       | `true`                      |
+| `sortableColumnTitle` | `sortable-column-title` | (optional) Title for sortable columns                                                                                         | `string`                                                                                                        | `'Activate to sort column'` |
+| `styles`              | `styles`                | (optional) Injected css styles                                                                                                | `any`                                                                                                           | `undefined`                 |
+| `visible`             | `visible`               | (optional) Set to false to hide table, used for nested tables to re-render upon toggle                                        | `boolean`                                                                                                       | `true`                      |
 
 
 ## Events
diff --git a/packages/components/src/html/data-grid.html b/packages/components/src/html/data-grid.html
index ca25564166..d7b917b42f 100644
--- a/packages/components/src/html/data-grid.html
+++ b/packages/components/src/html/data-grid.html
@@ -805,11 +805,21 @@
         ],
       ];
 
+      const localization = {
+        sortBy: 'SortLoc',
+        toggle: 'ToggleLoc',
+        select: 'SelectLoc',
+        tableOptions: 'OptionsLoc',
+        expand: 'Klicken Sie zu expanden',
+        collapse: 'Klicken Sie zu collapsen',
+      };
+
       // Pass in data
       const table = document.querySelector('#table1');
 
       table.fields = fields;
       table.rows = rows;
+      table.localization = localization;
 
       // table.addEventListener('scaleEdit', ({ detail }) => {
       //   const { rows, rowIndex, columnIndex, value } = detail;
diff --git a/packages/storybook-vue/stories/components/data-grid/DataGrid.stories.mdx b/packages/storybook-vue/stories/components/data-grid/DataGrid.stories.mdx
index 4c38c09346..47d83e740b 100644
--- a/packages/storybook-vue/stories/components/data-grid/DataGrid.stories.mdx
+++ b/packages/storybook-vue/stories/components/data-grid/DataGrid.stories.mdx
@@ -42,7 +42,7 @@ import ScaleDataGrid from './ScaleDataGrid.vue';
       },
       description: `(optional) Title for sortable columns`,
       control: { type: null },
-    },    
+    },
     height: {
       table: {
         type: { summary: 'string' },
@@ -111,7 +111,7 @@ import ScaleDataGrid from './ScaleDataGrid.vue';
       table: {
         type: { summary: 'object' },
       },
-      description: `(optional) localization object for sort by, toogle visibility and select/deselect all. The default value is English`,
+      description: `(optional) localization object for sort by, toogle visibility, select/deselect all, table settings, expand/collapse buttons. The default value is English. To provide localization, use object with next keys: 'sortBy', 'toggle', 'select', 'tableOptions', 'expand', 'collapse'`,
       control: { type: null },
     },
     shadeAlternate: {

From d1209c5c45898c78ce097b4f02182c4b247a5d5d Mon Sep 17 00:00:00 2001
From: tshimber <110041439+tshimber@users.noreply.github.com>
Date: Thu, 10 Oct 2024 10:07:54 +0200
Subject: [PATCH 11/25] no userInfo for profile-menu  (#2339)

* fix(header): fixes issue when no service links are provided in hide-login mode for profile-menu
---
 .../telekom-profile-menu.css                  |   2 +-
 .../telekom-profile-menu.tsx                  |  25 +-
 .../src/html/telekom-header-profile-menu.html | 601 ++++++++++++++++++
 3 files changed, 614 insertions(+), 14 deletions(-)
 create mode 100644 packages/components/src/html/telekom-header-profile-menu.html

diff --git a/packages/components/src/components/telekom/telekom-profile-menu/telekom-profile-menu.css b/packages/components/src/components/telekom/telekom-profile-menu/telekom-profile-menu.css
index 880e05a2a8..c5f71e4817 100644
--- a/packages/components/src/components/telekom/telekom-profile-menu/telekom-profile-menu.css
+++ b/packages/components/src/components/telekom/telekom-profile-menu/telekom-profile-menu.css
@@ -68,7 +68,7 @@ scale-telekom-profile-menu scale-menu-flyout {
   height: 12px;
 }
 
-.scale-telekom-nav-item > button {
+scale-telekom-profile-menu .scale-telekom-nav-item > button {
   padding-bottom: var(--_spacing-bottom-slotted-bottom);
 }
 
diff --git a/packages/components/src/components/telekom/telekom-profile-menu/telekom-profile-menu.tsx b/packages/components/src/components/telekom/telekom-profile-menu/telekom-profile-menu.tsx
index 598db4e56e..ca72410d3c 100644
--- a/packages/components/src/components/telekom/telekom-profile-menu/telekom-profile-menu.tsx
+++ b/packages/components/src/components/telekom/telekom-profile-menu/telekom-profile-menu.tsx
@@ -165,7 +165,7 @@ export class TelekomProfileMenu {
   buildLogoutButton() {
     return {
       type: 'button',
-      name: this.logoutLabel,
+      name: this.logoutLabel || 'Logout',
       href: this.logoutUrl || LOGOUT_DEFAULT,
       variant: 'secondary',
       onClick: this.logoutHandler,
@@ -176,17 +176,11 @@ export class TelekomProfileMenu {
     const divider = [{ type: 'divider' }];
 
     const userInfo = readData(this.userInfo);
-    if (!userInfo) {
-      // console.error("userInfo missing");
-    }
-    userInfo.type = 'userInfo';
-
-    let serviceLinks = readData(this.serviceLinks);
-    if (!serviceLinks) {
-      // console.error("serviceLinks missing");
-      serviceLinks = [];
+    if (userInfo) {
+      userInfo.type = 'userInfo';
     }
 
+    const serviceLinks = readData(this.serviceLinks) || [];
     for (const el of serviceLinks) {
       el.type = 'item';
     }
@@ -200,9 +194,11 @@ export class TelekomProfileMenu {
 
     let menu = [];
 
-    menu = menu.concat(userInfo);
+    if (userInfo) {
+      menu = menu.concat(userInfo);
+    }
 
-    if (!this.serviceLinksEmpty()) {
+    if (userInfo && !this.serviceLinksEmpty()) {
       menu = menu.concat(divider);
     }
 
@@ -221,7 +217,10 @@ export class TelekomProfileMenu {
   }
 
   serviceLinksEmpty() {
-    return (this.hideLoginSettings && this.serviceLinks.length < 1) === true;
+    return (
+      this.hideLoginSettings &&
+      (!this.serviceLinks || this.serviceLinks.length < 1)
+    );
   }
 
   buildDesktopMenuStyles() {
diff --git a/packages/components/src/html/telekom-header-profile-menu.html b/packages/components/src/html/telekom-header-profile-menu.html
new file mode 100644
index 0000000000..22c169c62f
--- /dev/null
+++ b/packages/components/src/html/telekom-header-profile-menu.html
@@ -0,0 +1,601 @@
+<!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>Telekom Header</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,
+      body {
+        margin: 0;
+        padding: 0;
+        height: 200vh;
+        background: var(--telekom-color-background-surface-subtle);
+      }
+
+      section {
+        /* --b: #333; */
+        /* width: 22ch; */
+        /* border: 1px dotted #666; */
+      }
+
+      scale-telekom-nav-list {
+        --spacing-inner-x: var(--telekom-spacing-unit-x14);
+      }
+
+      .flyout-body {
+        padding: var(--telekom-spacing-unit-x6) 0;
+      }
+
+      .mobile-menu-flyout {
+        --topbar-height: 60px;
+        --top: var(--topbar-height);
+        --height: calc(100vh - var(--topbar-height));
+        --position: fixed;
+      }
+      .mobile-menu-flyout > div {
+        display: flex;
+        height: 100%;
+        box-sizing: border-box;
+        padding: 1rem;
+      }
+      .mobile-menu-trigger[aria-expanded='true'] {
+        color: red;
+        text-decoration: line-through;
+      }
+      @media screen and (min-width: 1040px) {
+        .mobile-menu-trigger {
+          display: none;
+        }
+      }
+    </style>
+  </head>
+
+  <body>
+    <scale-telekom-header
+      app-name="Application Name"
+      app-name-link="https://example.com"
+    >
+      <!-- MAIN NAV -->
+      <scale-telekom-nav-list variant="main-nav" slot="main-nav">
+        <scale-telekom-nav-item active>
+          <button><span>Topic One</span></button>
+          <scale-telekom-nav-flyout hover>
+            <scale-telekom-mega-menu>
+              <scale-telekom-mega-menu-column>
+                <scale-icon-home-home slot="icon"></scale-icon-home-home>
+                <a href="#" slot="heading">My heading</a>
+                <ul>
+                  <li><a href="#">Link One</a></li>
+                  <li><a href="#">Link Two</a></li>
+                  <li><a href="#">Link Three</a></li>
+                  <li><a href="#">Link Four</a></li>
+                </ul>
+              </scale-telekom-mega-menu-column>
+              <scale-telekom-mega-menu-column>
+                <scale-icon-home-home slot="icon"></scale-icon-home-home>
+                <a href="#" slot="heading">My heading</a>
+                <ul>
+                  <li><a href="#">Link One</a></li>
+                  <li><a href="#">Link Two</a></li>
+                  <li><a href="#">Link Three</a></li>
+                  <li><a href="#">Link Four</a></li>
+                </ul>
+              </scale-telekom-mega-menu-column>
+              <scale-telekom-mega-menu-column>
+                <scale-icon-home-home slot="icon"></scale-icon-home-home>
+                <a href="#" slot="heading">My heading</a>
+                <ul>
+                  <li><a href="#">Link One</a></li>
+                  <li><a href="#">Link Two</a></li>
+                  <li><a href="#">Link Three</a></li>
+                  <li><a href="#">Link Four</a></li>
+                </ul>
+              </scale-telekom-mega-menu-column>
+              <scale-telekom-mega-menu-column>
+                <scale-icon-home-home slot="icon"></scale-icon-home-home>
+                <a href="#" slot="heading">My heading</a>
+                <ul>
+                  <li><a href="#">Link One</a></li>
+                  <li><a href="#">Link Two</a></li>
+                  <li><a href="#">Link Three</a></li>
+                  <li><a href="#">Link Four</a></li>
+                </ul>
+              </scale-telekom-mega-menu-column>
+              <scale-telekom-mega-menu-column>
+                <scale-icon-home-home slot="icon"></scale-icon-home-home>
+                <a href="#" slot="heading">My heading</a>
+                <ul>
+                  <li><a href="#">Link One</a></li>
+                  <li><a href="#">Link Two</a></li>
+                  <li><a href="#">Link Three</a></li>
+                  <li><a href="#">Link Four</a></li>
+                </ul>
+              </scale-telekom-mega-menu-column>
+            </scale-telekom-mega-menu>
+          </scale-telekom-nav-flyout>
+        </scale-telekom-nav-item>
+        <scale-telekom-nav-item>
+          <button>Topic Two</button>
+          <scale-telekom-nav-flyout hover>
+            <scale-telekom-mega-menu>
+              <scale-telekom-mega-menu-column>
+                <a href="#" slot="heading">Tarife</a>
+                <ul>
+                  <li><a href="#">Internet-Tarife</a></li>
+                  <li><a href="#">Für junge Leute unter 28</a></li>
+                  <li><a href="#">Zubuchoptionen</a></li>
+                  <li><a href="#">Verfügbarkeitsprüfung</a></li>
+                </ul>
+              </scale-telekom-mega-menu-column>
+              <scale-telekom-mega-menu-column>
+                <a href="#" slot="heading">Geräte</a>
+                <ul>
+                  <li><a href="#">WLAN & Router</a></li>
+                  <li><a href="#">Festnetztelefone</a></li>
+                  <li><a href="#">Smart Home Geräte</a></li>
+                </ul>
+              </scale-telekom-mega-menu-column>
+              <scale-telekom-mega-menu-column>
+                <a href="#" slot="heading">Vernetztes Zuhause</a>
+                <ul>
+                  <li><a href="#">WLAN Pakete</a></li>
+                  <li><a href="#">WLAN Optimierung</a></li>
+                  <li><a href="#">Mesh-Technologie</a></li>
+                  <li><a href="#">Smart Home</a></li>
+                </ul>
+              </scale-telekom-mega-menu-column>
+              <scale-telekom-mega-menu-column>
+                <a href="#" slot="heading">Netz</a>
+                <ul>
+                  <li><a href="#">Verfügbarkeitsprüfung</a></li>
+                  <li><a href="#">DSL Ausbau</a></li>
+                  <li><a href="#">Glasfaserausbau</a></li>
+                  <li><a href="#">Grünes Netz</a></li>
+                </ul>
+              </scale-telekom-mega-menu-column>
+            </scale-telekom-mega-menu>
+          </scale-telekom-nav-flyout>
+        </scale-telekom-nav-item>
+        <scale-telekom-nav-item>
+          <a href="#">Topic Three</a>
+        </scale-telekom-nav-item>
+        <scale-telekom-nav-item>
+          <a href="#">Topic Four</a>
+        </scale-telekom-nav-item>
+        <scale-telekom-nav-item>
+          <a href="#">Topic Five</a>
+        </scale-telekom-nav-item>
+      </scale-telekom-nav-list>
+      <scale-telekom-nav-list
+        variant="meta-nav-external"
+        slot="meta-nav-external"
+        alignment="left"
+      >
+        <scale-telekom-nav-item>
+          <a href="#">
+            Metalink ext 1
+            <scale-icon-navigation-external-link
+              size="11"
+            ></scale-icon-navigation-external-link>
+          </a>
+        </scale-telekom-nav-item>
+        <scale-telekom-nav-item>
+          <a href="#">
+            Metalink ext 2
+            <scale-icon-navigation-external-link
+              size="11"
+            ></scale-icon-navigation-external-link>
+          </a>
+        </scale-telekom-nav-item>
+      </scale-telekom-nav-list>
+      <scale-telekom-nav-list
+        variant="meta-nav"
+        slot="meta-nav"
+        alignment="left"
+      >
+        <scale-telekom-nav-item>
+          <a href="#">Metalink 1</a>
+        </scale-telekom-nav-item>
+        <scale-telekom-nav-item>
+          <a href="#">Metalink 2</a>
+        </scale-telekom-nav-item>
+      </scale-telekom-nav-list>
+      <scale-telekom-nav-list
+        variant="lang-switcher"
+        slot="lang-switcher"
+        alignment="right"
+      >
+        <scale-telekom-nav-item active>
+          <a href="#">MK</a>
+        </scale-telekom-nav-item>
+        <scale-telekom-nav-item>
+          <a href="#">SO</a>
+        </scale-telekom-nav-item>
+        <scale-telekom-nav-item>
+          <a href="#">DE</a>
+        </scale-telekom-nav-item>
+      </scale-telekom-nav-list>
+      <scale-telekom-nav-list
+        variant="functions"
+        slot="functions"
+        alignment="right"
+      >
+        <scale-telekom-nav-item>
+          <a href="#">
+            <scale-icon-action-search> </scale-icon-action-search>
+          </a>
+        </scale-telekom-nav-item>
+        <scale-telekom-nav-item>
+          <a href="#">
+            <scale-icon-content-credit-card> </scale-icon-content-credit-card>
+          </a>
+        </scale-telekom-nav-item>
+        <scale-telekom-nav-item>
+          <a href="#">
+            <scale-icon-action-shopping-cart> </scale-icon-action-shopping-cart>
+          </a>
+        </scale-telekom-nav-item>
+        <scale-telekom-profile-menu
+          login-url="https://www.telekom.de/todo/login"
+          login-help-url="https://www.telekom.de/hilfe/telekom-login"
+          register-url="https://meinkonto.telekom-dienste.de/telekom/account/registration/assistant/userstatus.xhtml"
+          logged-in="true"
+          app-name="Application"
+          label="Login"
+          accessibility-label="Login"
+          close-menu-accessibility-label="Close menu"
+          service-name="Customer Center"
+          service-description="Manage your contracts, bills, usage overviews, settings, and more."
+          login-label="Log in"
+          login-help-label="Help logging in"
+          register-headline="Need an account?"
+          register-label="Register now"
+          hide-login-settings="true"
+        ></scale-telekom-profile-menu>
+      </scale-telekom-nav-list>
+      <scale-telekom-nav-flyout
+        class="mobile-menu-flyout"
+        style="
+          --translate-y: 100%;
+          --duration: var(--telekom-motion-duration-animation);
+          --top: 0;
+          --height: 100vh;
+          --spacing-x: 0;
+          --background: var(--telekom-color-background-canvas);
+        "
+      >
+        <scale-telekom-mobile-menu
+          app-name="Application Name"
+          app-name-link="#"
+        >
+          <scale-telekom-nav-list
+            variant="meta-nav-external"
+            slot="top-left"
+            alignment="left"
+          >
+            <scale-telekom-nav-item>
+              <a href="#">
+                Metalink ext 1
+                <scale-icon-navigation-external-link
+                  size="11"
+                ></scale-icon-navigation-external-link>
+              </a>
+            </scale-telekom-nav-item>
+            <scale-telekom-nav-item>
+              <a href="#">
+                Metalink ext 2
+                <scale-icon-navigation-external-link
+                  size="11"
+                ></scale-icon-navigation-external-link>
+              </a>
+            </scale-telekom-nav-item>
+          </scale-telekom-nav-list>
+          <scale-telekom-nav-list
+            variant="lang-switcher"
+            slot="top-right"
+            alignment="right"
+          >
+            <scale-telekom-nav-item active>
+              <a href="#">MK</a>
+            </scale-telekom-nav-item>
+            <scale-telekom-nav-item>
+              <a href="#">SO</a>
+            </scale-telekom-nav-item>
+            <scale-telekom-nav-item>
+              <a href="#">DE</a>
+            </scale-telekom-nav-item>
+          </scale-telekom-nav-list>
+          <scale-telekom-mobile-menu-item active>
+            <a href="#category-1">Topic One</a>
+            <scale-telekom-mobile-menu-item slot="children">
+              <a href="#">Second Level</a>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+            </scale-telekom-mobile-menu-item>
+            <scale-telekom-mobile-menu-item slot="children">
+              <a href="#">Second Level</a>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+            </scale-telekom-mobile-menu-item>
+            <scale-telekom-mobile-menu-item slot="children">
+              <a href="#">Second Level</a>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+            </scale-telekom-mobile-menu-item>
+            <scale-telekom-mobile-menu-item slot="children">
+              <a href="#">Second Level</a>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+            </scale-telekom-mobile-menu-item>
+            <scale-telekom-mobile-menu-item slot="children">
+              <a href="#">Second Level</a>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+            </scale-telekom-mobile-menu-item>
+          </scale-telekom-mobile-menu-item>
+          <scale-telekom-mobile-menu-item>
+            <a href="#category-1">Topic Two</a>
+            <scale-telekom-mobile-menu-item slot="children">
+              <a href="#">Second Level</a>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+            </scale-telekom-mobile-menu-item>
+            <scale-telekom-mobile-menu-item slot="children">
+              <a href="#">Second Level</a>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+            </scale-telekom-mobile-menu-item>
+            <scale-telekom-mobile-menu-item slot="children">
+              <a href="#">Second Level</a>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+            </scale-telekom-mobile-menu-item>
+            <scale-telekom-mobile-menu-item slot="children">
+              <a href="#">Second Level</a>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+              <scale-telekom-mobile-menu-item slot="children">
+                <a href="#">Third Level</a>
+              </scale-telekom-mobile-menu-item>
+            </scale-telekom-mobile-menu-item>
+          </scale-telekom-mobile-menu-item>
+          <scale-telekom-mobile-menu-item>
+            <a href="#category-1">Topic Three</a>
+          </scale-telekom-mobile-menu-item>
+          <scale-telekom-mobile-menu-item>
+            <a href="#category-1">Topic Four</a>
+          </scale-telekom-mobile-menu-item>
+          <scale-telekom-mobile-menu-item>
+            <a href="#category-1">Topic Five</a>
+          </scale-telekom-mobile-menu-item>
+          <scale-telekom-nav-list
+            variant="meta-nav-external"
+            slot="bottom"
+            alignment="left"
+            style="--flex-direction: column"
+          >
+            <scale-telekom-nav-item>
+              <a href="#">Metalink ext 1</a>
+            </scale-telekom-nav-item>
+            <scale-telekom-nav-item>
+              <a href="#">Metalink ext 2</a>
+            </scale-telekom-nav-item>
+          </scale-telekom-nav-list>
+        </scale-telekom-mobile-menu>
+      </scale-telekom-nav-flyout>
+    </scale-telekom-header>
+    <p>&nbsp;</p>
+    <p>&nbsp;</p>
+    <p>&nbsp;</p>
+    <p>&nbsp;</p>
+    <p>&nbsp;</p>
+    <p>&nbsp;</p>
+    <p>&nbsp;</p>
+    <p>&nbsp;</p>
+    <p>&nbsp;</p>
+    <p>&nbsp;</p>
+    <p>&nbsp;</p>
+    <p>&nbsp;</p>
+    <p>&nbsp;</p>
+    <p>&nbsp;</p>
+    <p>&nbsp;</p>
+    <p>&nbsp;</p>
+    <p>&nbsp;</p>
+    <p>&nbsp;</p>
+
+    <style>
+      scale-grid {
+        border: 1px solid cyan;
+      }
+      scale-grid-item {
+        background: lime;
+        --size-md: 4;
+      }
+      [foo] {
+        --size-md: 1;
+      }
+    </style>
+    <scale-grid>
+      <scale-grid-item foo>1</scale-grid-item>
+      <scale-grid-item foo>2</scale-grid-item>
+      <scale-grid-item>3</scale-grid-item>
+      <scale-grid-item>4</scale-grid-item>
+      <scale-grid-item>5</scale-grid-item>
+    </scale-grid>
+  </body>
+</html>

From ee21b87d2dbbf922d407a3289b94c38f9be9ff79 Mon Sep 17 00:00:00 2001
From: tshimber <110041439+tshimber@users.noreply.github.com>
Date: Wed, 16 Oct 2024 17:23:24 +0200
Subject: [PATCH 12/25] tag cell in data-grid extended (#2343)

feat(data-grid): tag cell in data-grid extended to include all tag options
---
 .../src/components/data-grid/cell-handlers/tags-cell.tsx    | 6 +++++-
 packages/components/src/html/data-grid.html                 | 6 +++++-
 .../stories/components/data-grid/DataGrid.stories.mdx       | 2 +-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/components/data-grid/cell-handlers/tags-cell.tsx b/packages/components/src/components/data-grid/cell-handlers/tags-cell.tsx
index c1e4ef3cd8..50c46cf97a 100644
--- a/packages/components/src/components/data-grid/cell-handlers/tags-cell.tsx
+++ b/packages/components/src/components/data-grid/cell-handlers/tags-cell.tsx
@@ -33,7 +33,11 @@ export const TagsCell: Cell = {
       <ul class={`tbody__tag-list`}>
         {tags.map((tag) => (
           <li>
-            <scale-tag size="small" type="strong" color={tag.color}>
+            <scale-tag
+              size={tag.size || 'small'}
+              type={tag.type || 'strong'}
+              color={tag.color || 'standard'}
+            >
               {tag.content}
             </scale-tag>
           </li>
diff --git a/packages/components/src/html/data-grid.html b/packages/components/src/html/data-grid.html
index d7b917b42f..8f45259de2 100644
--- a/packages/components/src/html/data-grid.html
+++ b/packages/components/src/html/data-grid.html
@@ -212,7 +212,11 @@
           'One',
           'Lorem ipsum dolor sit amet sime',
           'http://example.com',
-          'Simple, Short',
+          [
+            { content: 'Apple', color: 'red', size: 'standard' },
+            { content: 'Pear', color: 'green', type: 'strong' },
+            { content: 'Bug' },
+          ],
           '00:00:20',
           102045.0,
           false,
diff --git a/packages/storybook-vue/stories/components/data-grid/DataGrid.stories.mdx b/packages/storybook-vue/stories/components/data-grid/DataGrid.stories.mdx
index 47d83e740b..46fe1c0bf9 100644
--- a/packages/storybook-vue/stories/components/data-grid/DataGrid.stories.mdx
+++ b/packages/storybook-vue/stories/components/data-grid/DataGrid.stories.mdx
@@ -669,7 +669,7 @@ Expected format: string
 
 ## Tags Cell
 
-Expected format: comma delimited `string`, eg `'one, two, three'` or array of objects with content and color keys, e.g. `{content: 'Apple', color: 'red'}`
+Expected format: comma delimited `string`, eg `'one, two, three'` or array of objects with required content key and optional color, type, size keys, e.g. `{content: 'Apple', color: 'red'}`. Acceptable values for color, type, size are same as for [Tag component](?path=/docs/components-tag--standard).
 
 <Canvas withSource="close">
   <Story name="Tags Cell">

From f6572021489ae07914dbbb6d31cb0aa2d20ea74c Mon Sep 17 00:00:00 2001
From: tshimber <110041439+tshimber@users.noreply.github.com>
Date: Wed, 16 Oct 2024 18:23:13 +0200
Subject: [PATCH 13/25] feat(data-grid): adds presort to grid (#2335)

feat(data-grid): presort functionality added to data-grid
---
 .../data-grid/cell-handlers/cell-interface.ts |  2 +
 .../src/components/data-grid/data-grid.tsx    | 31 ++++++++++++---
 packages/components/src/html/data-grid.html   | 20 +++++-----
 .../components/data-grid/DataGrid.stories.mdx | 39 +++++++++++++++++++
 4 files changed, 78 insertions(+), 14 deletions(-)

diff --git a/packages/components/src/components/data-grid/cell-handlers/cell-interface.ts b/packages/components/src/components/data-grid/cell-handlers/cell-interface.ts
index 4ea393cb61..b8aef21953 100644
--- a/packages/components/src/components/data-grid/cell-handlers/cell-interface.ts
+++ b/packages/components/src/components/data-grid/cell-handlers/cell-interface.ts
@@ -17,6 +17,8 @@ export interface Cell {
     resizable?: boolean;
     sortable?: boolean;
     sortBy?: 'number' | 'text' | 'date';
+    presort?: boolean;
+    presortDirection?: 'ascending' | 'descending';
     stretchWeight?: number;
     textAlign?: 'left' | 'center' | 'right';
     visible?: boolean;
diff --git a/packages/components/src/components/data-grid/data-grid.tsx b/packages/components/src/components/data-grid/data-grid.tsx
index 240b978ad9..166e26e5af 100644
--- a/packages/components/src/components/data-grid/data-grid.tsx
+++ b/packages/components/src/components/data-grid/data-grid.tsx
@@ -182,11 +182,12 @@ export class DataGrid {
     this.applyResponsiveClasses = this.applyResponsiveClasses.bind(this);
     this.updateColumnStretching = this.updateColumnStretching.bind(this);
   }
+
   componentWillLoad() {
     this.fieldsHandler();
     this.rowsHandler();
   }
-  componentWillUpdate() {}
+
   componentDidRender() {
     if (this.needsAutoWidthParse) {
       this.calculateAutoWidths();
@@ -198,10 +199,11 @@ export class DataGrid {
       }
     });
   }
+
   componentDidLoad() {
     this.addResizeObserver();
   }
-  componentDidUpdate() {}
+
   disconnectedCallback() {
     this.removeResizeObserver();
   }
@@ -216,6 +218,7 @@ export class DataGrid {
     this.resetSortingToggle();
     this.dataNeedsCheck = true;
   }
+
   @Watch('rows')
   rowsHandler() {
     // Reset pagination to the last page of the new records if new records are less than previous.
@@ -225,6 +228,7 @@ export class DataGrid {
     }
     this.parseRows();
     this.setInitialRowProps();
+    this.presortTable();
     this.dataNeedsCheck = true;
     // Set flag to dirty to redo column width with new data
     this.needsAutoWidthParse = true;
@@ -407,7 +411,7 @@ export class DataGrid {
   }
 
   // Sorting handlers
-  toggleTableSorting(sortDirection, columnIndex, type) {
+  toggleTableSorting(currentSortDirection, columnIndex, type) {
     // Remove sorting from previous column index
     if (
       this.activeSortingIndex > -1 &&
@@ -419,9 +423,9 @@ export class DataGrid {
     this.activeSortingIndex = columnIndex;
 
     const newSortDirection =
-      sortDirection === 'none'
+      currentSortDirection === 'none'
         ? 'ascending'
-        : sortDirection === 'ascending'
+        : currentSortDirection === 'ascending'
         ? 'descending'
         : 'none';
     this.fields[columnIndex].sortDirection = newSortDirection;
@@ -496,6 +500,23 @@ export class DataGrid {
     this.activeSortingIndex = -1;
   }
 
+  presortTable(): void {
+    const columnToPresort = this.fields.find(
+      (col) => col.sortable && col.presort
+    );
+    if (!columnToPresort) {
+      return;
+    }
+    const columnIndex = this.fields.indexOf(columnToPresort);
+    const direction =
+      columnToPresort.presortDirection === 'descending'
+        ? 'descending'
+        : 'ascending';
+    this.activeSortingIndex = columnIndex;
+    this.fields[columnIndex].sortDirection = direction;
+    this.sortTable(direction, columnToPresort.type, columnIndex);
+  }
+
   // Column resize handlers
   onDividerDown(e) {
     this.polyfillMousePosition(e);
diff --git a/packages/components/src/html/data-grid.html b/packages/components/src/html/data-grid.html
index 8f45259de2..c2865806a4 100644
--- a/packages/components/src/html/data-grid.html
+++ b/packages/components/src/html/data-grid.html
@@ -172,6 +172,8 @@
           type: 'number',
           label: 'Numbers',
           sortable: true,
+          presort: true,
+          presortDirection: 'descending',
           precision: 2,
           decimalSymbol: '.',
           groupSymbol: ',',
@@ -218,7 +220,7 @@
             { content: 'Bug' },
           ],
           '00:00:20',
-          102045.0,
+          101045.0,
           false,
           15,
           (() => {
@@ -322,7 +324,7 @@
           'http://example.com',
           'Simple, Short',
           '00:01:15',
-          43.2,
+          45.2,
           true,
           73.2,
           (() => {
@@ -355,7 +357,7 @@
           'http://example.com',
           'Simple, Short',
           '00:00:20',
-          102045.0,
+          103045.0,
           false,
           15,
           (() => {
@@ -388,7 +390,7 @@
           'http://example.com',
           'Simple, Short',
           '00:01:15',
-          43.2,
+          47.2,
           true,
           73.2,
           (() => {
@@ -421,7 +423,7 @@
           'http://example.com',
           'Simple, Short',
           '00:00:20',
-          102045.0,
+          105045.0,
           false,
           15,
           (() => {
@@ -454,7 +456,7 @@
           'http://example.com',
           'Simple, Short',
           '00:01:15',
-          43.2,
+          48.2,
           true,
           73.2,
           (() => {
@@ -487,7 +489,7 @@
           'http://example.com',
           'Simple, Short',
           '00:00:20',
-          102045.0,
+          109045.0,
           false,
           15,
           (() => {
@@ -520,7 +522,7 @@
           'http://example.com',
           'Simple, Short',
           '00:01:15',
-          43.2,
+          40.2,
           true,
           73.2,
           (() => {
@@ -553,7 +555,7 @@
           'http://example.com',
           'Simple, Short',
           '00:00:20',
-          102045.0,
+          108045.0,
           false,
           15,
           (() => {
diff --git a/packages/storybook-vue/stories/components/data-grid/DataGrid.stories.mdx b/packages/storybook-vue/stories/components/data-grid/DataGrid.stories.mdx
index 46fe1c0bf9..ac89b0897e 100644
--- a/packages/storybook-vue/stories/components/data-grid/DataGrid.stories.mdx
+++ b/packages/storybook-vue/stories/components/data-grid/DataGrid.stories.mdx
@@ -309,6 +309,8 @@ const rows = [ [1, 'John', '12:30'], [2, 'Mary', '2:12'], [3, 'Patek', '16:01'],
 - `resizable?: boolean = true`
 - `sortable?: boolean = false`
 - `sortBy?: 'number' | 'text' = 'text'`
+- `presort?: boolean = false`
+- `presortDirection?: 'ascending' | 'descending' = 'ascending'`
 - `textAlign?: 'left' | 'center' | 'right' = 'left'`
 - `stretchWeight?: 'number'`
 - `visible?: boolean = true`
@@ -1381,6 +1383,43 @@ Expected format: unformatted `string`, eg `'this is a string'`
   </Story>
 </Canvas>
 
+## Presort
+
+To make grid presorted by certain field on init, add next props to this field: `sortable: true`, `presort: true`, `presortDirection: 'ascending' | 'descending'`.
+
+<Canvas withSource="close">
+  <Story name="Presort">
+    {`<content>
+      <scale-data-grid heading="Presort" id="presort-example"></scale-data-grid>
+      <script type="application/javascript">
+        {
+          const dataGrid = document.querySelector('#presort-example');
+          dataGrid.fields = [
+            {
+              type: 'text',
+              label: 'Name',
+              sortable: true,
+              presort: true,
+              presortDirection: 'descending',
+            },
+            {
+              type: 'checkbox',
+              label: 'Toggle',
+              style: 'switch',
+            },
+          ];
+          dataGrid.rows = [
+            ['Adrienne Hopper', true],
+            ['Merritt Hardin', true],
+            ['Randall Copeland', false],
+            ['Hope Bass', false],
+          ];
+        }
+      </script>
+    </content>`}
+  </Story>
+</Canvas>
+
 <!-- TODO -->
 <!-- manual pagination example -->
 <!-- search filtering example -->

From e0ff15764128fecc0a643d14e1ee01f64ab67d0f Mon Sep 17 00:00:00 2001
From: Marc Roberts <marc.roberts@camao.one>
Date: Wed, 16 Oct 2024 18:53:44 +0200
Subject: [PATCH 14/25] fix(button): Include name and value properties on
 temporary submit button (#2351)

The name and value used on the button element are not submitted as part of the form event as these are not cloned onto the temporary button used for submitting the form.
---
 packages/components/src/components/button/button.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/components/src/components/button/button.tsx b/packages/components/src/components/button/button.tsx
index 385941a44e..a0e3f6e4eb 100644
--- a/packages/components/src/components/button/button.tsx
+++ b/packages/components/src/components/button/button.tsx
@@ -102,6 +102,12 @@ export class Button {
         if (this.type) {
           fakeButton.type = this.type;
         }
+        if (this.value) {
+          fakeButton.value = this.value;
+        }
+        if (this.name) {
+          fakeButton.name = this.name;
+        }
         fakeButton.style.display = 'none';
         parentForm.appendChild(fakeButton);
         fakeButton.click();

From 299be7d00122ed34fcde07cff9e288e291e33318 Mon Sep 17 00:00:00 2001
From: Amir Baghdoust <baghdoust@gmail.com>
Date: Mon, 21 Oct 2024 14:51:00 +0200
Subject: [PATCH 15/25] fix(segment): improves loading of the component and
 solves nested elemnts sizing issue (#2358)

* fix(segment): improves loading of the component and solves nested size issues
---
 .../__snapshots__/segment.spec.ts.snap        |  4 +-
 .../src/components/segment/readme.md          | 36 ++++-----
 .../src/components/segment/segment.tsx        |  9 +--
 .../segmented-button.spec.ts.snap             |  6 +-
 .../segmented-button/segmented-button.tsx     | 81 ++++++++++---------
 .../components/src/html/segment-button.html   | 80 ++++++++++++++++++
 6 files changed, 151 insertions(+), 65 deletions(-)
 create mode 100644 packages/components/src/html/segment-button.html

diff --git a/packages/components/src/components/segment/__snapshots__/segment.spec.ts.snap b/packages/components/src/components/segment/__snapshots__/segment.spec.ts.snap
index bf96880a50..1c95275796 100644
--- a/packages/components/src/components/segment/__snapshots__/segment.spec.ts.snap
+++ b/packages/components/src/components/segment/__snapshots__/segment.spec.ts.snap
@@ -15,6 +15,8 @@ exports[`Segment should match standard snapshot 1`] = `
       </div>
     </button>
   </mock:shadow-root>
-  Label
+  <span>
+    Label
+  </span>
 </scale-segment>
 `;
diff --git a/packages/components/src/components/segment/readme.md b/packages/components/src/components/segment/readme.md
index bc5a198334..249d97f3ad 100644
--- a/packages/components/src/components/segment/readme.md
+++ b/packages/components/src/components/segment/readme.md
@@ -7,24 +7,24 @@
 
 ## Properties
 
-| Property                     | Attribute                      | Description                                                                                                                                            | Type                               | Default        |
-| ---------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------- | -------------- |
-| `adjacentSiblings`           | `adjacent-siblings`            |                                                                                                                                                        | `"left" \| "leftright" \| "right"` | `undefined`    |
-| `ariaDescriptionTranslation` | `aria-description-translation` | a11y text for getting meaningful value. `$buttonNumber` and `$selected` are template variables and will be replaces by their corresponding properties. | `string`                           | `'$selected'`  |
-| `ariaLabelSegment`           | `aria-label-segment`           | (optional) aria-label attribute needed for icon-only segments                                                                                          | `string`                           | `undefined`    |
-| `ariaLangDeselected`         | `aria-lang-deselected`         | (optional) translation of 'deselected                                                                                                                  | `string`                           | `'deselected'` |
-| `ariaLangSelected`           | `aria-lang-selected`           | (optional) translation of 'selected                                                                                                                    | `string`                           | `'selected'`   |
-| `disabled`                   | `disabled`                     | (optional) If `true`, the segment is disabled                                                                                                          | `boolean`                          | `false`        |
-| `hasIcon`                    | `has-icon`                     | (optional) position within group                                                                                                                       | `boolean`                          | `undefined`    |
-| `iconOnly`                   | `icon-only`                    | (optional) position within group                                                                                                                       | `boolean`                          | `undefined`    |
-| `position`                   | `position`                     | (optional) position within group                                                                                                                       | `number`                           | `undefined`    |
-| `segmentId`                  | `segment-id`                   | (optional) segment's id                                                                                                                                | `string`                           | `undefined`    |
-| `selected`                   | `selected`                     | (optional) If `true`, the segment is selected                                                                                                          | `boolean`                          | `false`        |
-| `selectedIndex`              | `selected-index`               | (optional) the index of the currently selected segment in the segmented-button                                                                         | `string`                           | `undefined`    |
-| `size`                       | `size`                         | (optional) The size of the segment                                                                                                                     | `"large" \| "medium" \| "small"`   | `'small'`      |
-| `styles`                     | `styles`                       | (optional) Injected CSS styles                                                                                                                         | `string`                           | `undefined`    |
-| `textOnly`                   | `text-only`                    | (optional) position within group                                                                                                                       | `boolean`                          | `undefined`    |
-| `width`                      | `width`                        | (optional) Segment width set to ensure that all segments have the same width                                                                           | `string`                           | `undefined`    |
+| Property                     | Attribute                      | Description                                                                                                                                            | Type                               | Default            |
+| ---------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------- | ------------------ |
+| `adjacentSiblings`           | `adjacent-siblings`            |                                                                                                                                                        | `"left" \| "leftright" \| "right"` | `undefined`        |
+| `ariaDescriptionTranslation` | `aria-description-translation` | a11y text for getting meaningful value. `$buttonNumber` and `$selected` are template variables and will be replaces by their corresponding properties. | `string`                           | `'$selected'`      |
+| `ariaLabelSegment`           | `aria-label-segment`           | (optional) aria-label attribute needed for icon-only segments                                                                                          | `string`                           | `undefined`        |
+| `ariaLangDeselected`         | `aria-lang-deselected`         | (optional) translation of 'deselected                                                                                                                  | `string`                           | `'deselected'`     |
+| `ariaLangSelected`           | `aria-lang-selected`           | (optional) translation of 'selected                                                                                                                    | `string`                           | `'selected'`       |
+| `disabled`                   | `disabled`                     | (optional) If `true`, the segment is disabled                                                                                                          | `boolean`                          | `false`            |
+| `hasIcon`                    | `has-icon`                     | (optional) position within group                                                                                                                       | `boolean`                          | `undefined`        |
+| `iconOnly`                   | `icon-only`                    | (optional) position within group                                                                                                                       | `boolean`                          | `undefined`        |
+| `position`                   | `position`                     | (optional) position within group                                                                                                                       | `number`                           | `undefined`        |
+| `segmentId`                  | `segment-id`                   | (optional) segment's id                                                                                                                                | `string`                           | `'segment-' + i++` |
+| `selected`                   | `selected`                     | (optional) If `true`, the segment is selected                                                                                                          | `boolean`                          | `false`            |
+| `selectedIndex`              | `selected-index`               | (optional) the index of the currently selected segment in the segmented-button                                                                         | `string`                           | `undefined`        |
+| `size`                       | `size`                         | (optional) The size of the segment                                                                                                                     | `"large" \| "medium" \| "small"`   | `'small'`          |
+| `styles`                     | `styles`                       | (optional) Injected CSS styles                                                                                                                         | `string`                           | `undefined`        |
+| `textOnly`                   | `text-only`                    | (optional) position within group                                                                                                                       | `boolean`                          | `undefined`        |
+| `width`                      | `width`                        | (optional) Segment width set to ensure that all segments have the same width                                                                           | `string`                           | `undefined`        |
 
 
 ## Events
diff --git a/packages/components/src/components/segment/segment.tsx b/packages/components/src/components/segment/segment.tsx
index c2daf67c0c..67b45ffa82 100644
--- a/packages/components/src/components/segment/segment.tsx
+++ b/packages/components/src/components/segment/segment.tsx
@@ -38,7 +38,7 @@ export class Segment {
   /** (optional) If `true`, the segment is disabled */
   @Prop() disabled?: boolean = false;
   /** (optional) segment's id */
-  @Prop({ reflect: true, mutable: true }) segmentId?: string;
+  @Prop({ reflect: true }) segmentId?: string = 'segment-' + i++;
   /** (optional) aria-label attribute needed for icon-only segments */
   @Prop() ariaLabelSegment: string;
   /** (optional) Segment width set to ensure that all segments have the same width */
@@ -84,13 +84,10 @@ export class Segment {
   async setFocus() {
     this.focusableElement.focus();
   }
-
   componentWillLoad() {
-    if (this.segmentId == null) {
-      this.segmentId = 'segment-' + i++;
-    }
+    this.handleIcon();
   }
-  componentDidUpdate() {
+  componentWillUpdate() {
     this.handleIcon();
   }
 
diff --git a/packages/components/src/components/segmented-button/__snapshots__/segmented-button.spec.ts.snap b/packages/components/src/components/segmented-button/__snapshots__/segmented-button.spec.ts.snap
index 41c565086d..82e5bc5170 100644
--- a/packages/components/src/components/segmented-button/__snapshots__/segmented-button.spec.ts.snap
+++ b/packages/components/src/components/segmented-button/__snapshots__/segmented-button.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`SegmentedButton should match selected button snapshot 1`] = `
 <scale-segmented-button>
   <mock:shadow-root>
-    <div aria-label="segment button with 2" class="segmented-button segmented-button--small" part="segmented-button small" role="group" style="grid-template-columns: repeat(2, 0px);">
+    <div aria-label="segment button with 2" class="segmented-button segmented-button--small" part="segmented-button small" role="group" style="grid-template-columns: repeat(2, auto);">
       <slot></slot>
     </div>
   </mock:shadow-root>
@@ -19,7 +19,7 @@ exports[`SegmentedButton should match selected button snapshot 1`] = `
 exports[`SegmentedButton should match standard snapshot 1`] = `
 <scale-segmented-button>
   <mock:shadow-root>
-    <div aria-label="segment button with 4" class="segmented-button segmented-button--small" part="segmented-button small" role="group" style="grid-template-columns: repeat(4, 14px);">
+    <div aria-label="segment button with 4" class="segmented-button segmented-button--small" part="segmented-button small" role="group" style="grid-template-columns: repeat(4, auto);">
       <slot></slot>
     </div>
   </mock:shadow-root>
@@ -36,4 +36,4 @@ exports[`SegmentedButton should match standard snapshot 1`] = `
     Label
   </scale-segment>
 </scale-segmented-button>
-`;
+`;
\ No newline at end of file
diff --git a/packages/components/src/components/segmented-button/segmented-button.tsx b/packages/components/src/components/segmented-button/segmented-button.tsx
index b93fea17c1..e32fbc09ef 100644
--- a/packages/components/src/components/segmented-button/segmented-button.tsx
+++ b/packages/components/src/components/segmented-button/segmented-button.tsx
@@ -52,7 +52,7 @@ export class SegmentedButton {
   /** (optional) Allow more than one button to be selected */
   @Prop() multiSelect: boolean = false;
   /** (optional) the index of the selected segment */
-  @Prop() selectedIndex?: number;
+  @Prop({ mutable: true }) selectedIndex?: number;
   /** (optional) If `true`, the button is disabled */
   @Prop({ reflect: true }) disabled?: boolean = false;
   /** (optional) If `true`, expand to container width */
@@ -119,47 +119,52 @@ export class SegmentedButton {
     });
   }
 
-  componentDidLoad() {
+  componentWillLoad() {
     const tempState: SegmentStatus[] = [];
     const segments = this.getAllSegments();
     this.slottedSegments = segments.length;
-    const longestButtonWidth = this.getLongestButtonWidth();
-    segments.forEach((segment) => {
-      this.position++;
+    segments.forEach((segment, i) => {
       tempState.push({
         id: segment.getAttribute('segment-id') || segment.segmentId,
         selected: segment.hasAttribute('selected') || segment.selected,
       });
-      segment.setAttribute('position', this.position.toString());
+      segment.setAttribute('position', `${i + 1}`);
       segment.setAttribute(
         'aria-description-translation',
         '$position $selected'
       );
     });
+    this.setState(tempState);
+    this.selectedIndex = this.getSelectedIndex();
+    this.showHelperText = this.shouldShowHelperText();
+  }
+  componentDidLoad() {
+    const longestButtonWidth = this.getLongestButtonWidth();
     if (!this.fullWidth) {
-      this.container.style.gridTemplateColumns = `repeat(${
-        this.hostElement.children.length
-      }, ${Math.ceil(longestButtonWidth)}px)`;
+      this.container.style.gridTemplateColumns = longestButtonWidth
+        ? `repeat(${this.hostElement.children.length}, ${Math.ceil(
+            longestButtonWidth
+          )}px)`
+        : `repeat(${this.hostElement.children.length}, auto)`;
     } else {
       this.container.style.display = 'flex';
     }
-
-    this.selectedIndex = this.getSelectedIndex();
     this.propagatePropsToChildren();
-    this.position = 0;
-    this.status = tempState;
-    this.setState(tempState);
   }
 
   componentWillUpdate() {
     this.selectedIndex = this.getSelectedIndex();
-    this.showHelperText = false;
+    this.showHelperText = this.shouldShowHelperText();
+  }
+  shouldShowHelperText() {
+    let showHelperText = false;
     if (
       this.invalid &&
       this.status.filter((e) => e.selected === true).length <= 0
     ) {
-      this.showHelperText = true;
+      showHelperText = true;
     }
+    return showHelperText;
   }
 
   getSelectedIndex() {
@@ -195,27 +200,29 @@ export class SegmentedButton {
   // all segmented buttons should have the same width, based on the largest one
   getLongestButtonWidth() {
     let tempWidth = 0;
-    Array.from(this.hostElement.children).forEach((child) => {
-      const selected = child.hasAttribute('selected');
-      const iconOnly = child.hasAttribute('icon-only');
-      const checkmark =
-        this.size === 'small'
-          ? CHECKMARK_WIDTH_SMALL
-          : this.size === 'medium'
-          ? CHECKMARK_WIDTH_MEDIUM
-          : CHECKMARK_WIDTH_LARGE;
-      if (selected || iconOnly) {
-        tempWidth =
-          child.getBoundingClientRect().width > tempWidth
-            ? child.getBoundingClientRect().width
-            : tempWidth;
-      } else {
-        tempWidth =
-          child.getBoundingClientRect().width + checkmark > tempWidth
-            ? child.getBoundingClientRect().width + checkmark
-            : tempWidth;
-      }
-    });
+    Array.from(this.hostElement.children)
+      .filter((child) => child.getBoundingClientRect().width)
+      .forEach((child) => {
+        const selected = child.hasAttribute('selected');
+        const iconOnly = child.hasAttribute('icon-only');
+        const checkmark =
+          this.size === 'small'
+            ? CHECKMARK_WIDTH_SMALL
+            : this.size === 'medium'
+            ? CHECKMARK_WIDTH_MEDIUM
+            : CHECKMARK_WIDTH_LARGE;
+        if (selected || iconOnly) {
+          tempWidth =
+            child.getBoundingClientRect().width > tempWidth
+              ? child.getBoundingClientRect().width
+              : tempWidth;
+        } else {
+          tempWidth =
+            child.getBoundingClientRect().width + checkmark > tempWidth
+              ? child.getBoundingClientRect().width + checkmark
+              : tempWidth;
+        }
+      });
     return tempWidth;
   }
 
diff --git a/packages/components/src/html/segment-button.html b/packages/components/src/html/segment-button.html
new file mode 100644
index 0000000000..771e502b3e
--- /dev/null
+++ b/packages/components/src/html/segment-button.html
@@ -0,0 +1,80 @@
+<!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>Segment Buttons</title>
+
+    <script type="module" src="build/scale-components.esm.js"></script>
+    <script nomodule src="build/scale-components.js"></script>
+    <link rel="stylesheet" href="build/scale-components.css" />
+    <style>
+      section {
+        padding: 1rem;
+      }
+
+      .bg-black {
+        background: black;
+        color: white;
+      }
+    </style>
+  </head>
+
+  <body>
+    <scale-collapsible>
+      <div slot="heading">Open Me for Disaster</div>
+      <scale-segmented-button>
+        <scale-segment selected>Apple</scale-segment>
+        <scale-segment>One+</scale-segment>
+        <scale-segment>Samsung</scale-segment>
+        <scale-segment>Huawei</scale-segment>
+      </scale-segmented-button>
+    </scale-collapsible>
+    <div style="height: 20px"></div>
+    <scale-segmented-button>
+      <scale-segment>Apple</scale-segment>
+      <scale-segment>One+</scale-segment>
+      <scale-segment>Samsung</scale-segment>
+      <scale-segment>Huawei</scale-segment>
+    </scale-segmented-button>
+    <div style="height: 20px"></div>
+    <scale-segmented-button>
+      <scale-segment selected>Label</scale-segment>
+      <scale-segment selected>Label</scale-segment>
+    </scale-segmented-button>
+    <div style="height: 20px"></div>
+    <scale-segmented-button invalid>
+      <scale-segment>
+        <scale-icon-device-device-phone slot="segment-icon">
+        </scale-icon-device-device-phone>
+        Apple
+      </scale-segment>
+      <scale-segment>
+        <scale-icon-device-device-phone slot="segment-icon">
+        </scale-icon-device-device-phone>
+        One+
+      </scale-segment>
+      <scale-segment>
+        <scale-icon-device-device-phone slot="segment-icon">
+        </scale-icon-device-device-phone>
+        Samsung
+      </scale-segment>
+      <scale-segment>
+        <scale-icon-device-device-phone slot="segment-icon">
+        </scale-icon-device-device-phone>
+        Huawei
+      </scale-segment>
+    </scale-segmented-button>
+    <div style="height: 20px"></div>
+
+    <scale-segmented-button multi-select>
+      <scale-segment selected>Apple</scale-segment>
+      <scale-segment selected>One+</scale-segment>
+      <scale-segment>Samsung</scale-segment>
+      <scale-segment>Huawei</scale-segment>
+    </scale-segmented-button>
+  </body>
+</html>

From 6e8c38027a861babd28e8925dcc5db1c87a4b05d Mon Sep 17 00:00:00 2001
From: felix-ico <97440128+felix-ico@users.noreply.github.com>
Date: Thu, 24 Oct 2024 10:23:31 +0200
Subject: [PATCH 16/25] fix(nav-item): hover underline on function slots
 (#2260)

* fix: hover underline
---------

Co-authored-by: felixw <felix.weber@iconstorm.com>
---
 .../telekom/telekom-nav-item/telekom-nav-item.css        | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/components/src/components/telekom/telekom-nav-item/telekom-nav-item.css b/packages/components/src/components/telekom/telekom-nav-item/telekom-nav-item.css
index ab7246040f..86a00b32ea 100644
--- a/packages/components/src/components/telekom/telekom-nav-item/telekom-nav-item.css
+++ b/packages/components/src/components/telekom/telekom-nav-item/telekom-nav-item.css
@@ -205,6 +205,15 @@
   left: 0;
 }
 
+.scale-telekom-nav-list[variant='functions']
+  > .scale-telekom-nav-item
+  > :where(a, button):hover:after,
+.scale-telekom-nav-list[variant='functions']
+  > .scale-telekom-nav-item
+  > :where(button[aria-expanded='true']):after {
+  width: 100%;
+}
+
 .scale-telekom-nav-list[variant='main-nav']
   > .scale-telekom-nav-item
   > :where(a, button):has(scale-badge[label]):hover:after,

From 30a0ce5bdb8ca13d0c6a067894a0ee4aef6dd98b Mon Sep 17 00:00:00 2001
From: felix-ico <97440128+felix-ico@users.noreply.github.com>
Date: Thu, 24 Oct 2024 12:47:54 +0200
Subject: [PATCH 17/25] feat(data-grid): added tooltip and scale-icon in
 data-grid action cell  (#2308)

Co-authored-by: felixw <felix.weber@iconstorm.com>
---
 .../data-grid/cell-handlers/actions-cell.tsx  | 20 +++++++++++++++++--
 .../src/components/data-grid/readme.md        |  4 ++++
 .../components/date-picker/date-picker.tsx    |  2 +-
 3 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/components/data-grid/cell-handlers/actions-cell.tsx b/packages/components/src/components/data-grid/cell-handlers/actions-cell.tsx
index be350c4068..a134239ec5 100644
--- a/packages/components/src/components/data-grid/cell-handlers/actions-cell.tsx
+++ b/packages/components/src/components/data-grid/cell-handlers/actions-cell.tsx
@@ -18,18 +18,22 @@ export const ActionsCell: Cell = {
     return (
       <div class={`tbody__actions`}>
         {content.map((action) => {
-          const { label, ...props } = action;
+          const { label, iconName, tooltip, ...props } = action;
+          const tooltipProps = tooltip ? { title: tooltip } : {};
+          const IconComponent = resolveIconComponent(iconName);
           if (typeof label === 'object' && '__html' in label) {
             return (
               <scale-button
                 size="small"
                 innerHTML={label.__html}
                 {...props}
+                {...tooltipProps}
               ></scale-button>
             );
           }
           return (
-            <scale-button size="small" {...props}>
+            <scale-button size="small" {...props} {...tooltipProps}>
+              {IconComponent}
               {label}
             </scale-button>
           );
@@ -38,3 +42,15 @@ export const ActionsCell: Cell = {
     );
   },
 };
+
+function resolveIconComponent(iconName) {
+  switch (iconName) {
+    case 'edit':
+      return <scale-icon-action-edit></scale-icon-action-edit>;
+    case 'delete':
+      return <scale-icon-action-remove></scale-icon-action-remove>;
+
+    default:
+      return null;
+  }
+}
diff --git a/packages/components/src/components/data-grid/readme.md b/packages/components/src/components/data-grid/readme.md
index ba1f894f5b..c0e86b7f4b 100644
--- a/packages/components/src/components/data-grid/readme.md
+++ b/packages/components/src/components/data-grid/readme.md
@@ -62,6 +62,8 @@
 - [scale-dropdown-select-item](../dropdown-select-item)
 - [scale-tag](../tag)
 - [scale-text-field](../text-field)
+- [scale-icon-action-edit](../icons/action-edit)
+- [scale-icon-action-remove](../icons/action-remove)
 
 ### Graph
 ```mermaid
@@ -87,6 +89,8 @@ graph TD;
   scale-data-grid --> scale-dropdown-select-item
   scale-data-grid --> scale-tag
   scale-data-grid --> scale-text-field
+  scale-data-grid --> scale-icon-action-edit
+  scale-data-grid --> scale-icon-action-remove
   scale-menu-flyout-item --> scale-icon-action-checkmark
   scale-menu-flyout-item --> scale-icon-navigation-right
   scale-checkbox --> scale-icon-action-minus
diff --git a/packages/components/src/components/date-picker/date-picker.tsx b/packages/components/src/components/date-picker/date-picker.tsx
index 5a15423b68..44f2ab40fe 100644
--- a/packages/components/src/components/date-picker/date-picker.tsx
+++ b/packages/components/src/components/date-picker/date-picker.tsx
@@ -483,7 +483,7 @@ export class DatePicker {
             dateAdapter={this.dateAdapter}
             disabled={this.disabled}
             value={this.value}
-            ref={(element: HTMLElement & DuetDatePicker) =>
+            ref={(element: HTMLDuetDatePickerElement & DuetDatePicker) =>
               (this.duetInput = element)
             }
           ></duet-date-picker>

From c19759f40c44270284573d6afafb9e065657c901 Mon Sep 17 00:00:00 2001
From: Amir Baghdoust <baghdoust@gmail.com>
Date: Thu, 24 Oct 2024 15:19:53 +0200
Subject: [PATCH 18/25] doc: adds VS code support for Scale customElements
 (#2357)

* fix: adds vscode-docs to dist folder for vscode Intellisense support
---
 packages/components/stencil.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/stencil.config.ts b/packages/components/stencil.config.ts
index 7ba424577c..b47b33ab89 100644
--- a/packages/components/stencil.config.ts
+++ b/packages/components/stencil.config.ts
@@ -78,7 +78,7 @@ export const config: Config = {
     },
     {
       type: 'docs-vscode',
-      file: 'custom-elements.json',
+      file: './dist/vscode-data.json',
     },
     {
       type: 'docs-json',

From 42a3b3699df5b361b63fc9c466461e2af61d67ed Mon Sep 17 00:00:00 2001
From: JuliaaaaH <150437405+JuliaaaaH@users.noreply.github.com>
Date: Thu, 24 Oct 2024 15:22:05 +0200
Subject: [PATCH 19/25] fix(data-grid): imporves pagination with 0 elements
 (#2316)

* fix: pagination with 0 elements in data-grid
---------

Co-authored-by: Amir Baghdoust <baghdoust@gmail.com>
---
 .../components/pagination/pagination.spec.ts  | 20 +++++++++++++++++++
 .../src/components/pagination/pagination.tsx  |  4 ++--
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/components/pagination/pagination.spec.ts b/packages/components/src/components/pagination/pagination.spec.ts
index 33272df330..3f58647aca 100644
--- a/packages/components/src/components/pagination/pagination.spec.ts
+++ b/packages/components/src/components/pagination/pagination.spec.ts
@@ -125,4 +125,24 @@ describe('pagination', () => {
       })
     );
   });
+  it('should show no start element when total elements is zero', async () => {
+    const specPage = await newSpecPage({
+      components: [Pagination],
+      html: `<scale-pagination
+                hide-borders="true"
+                hide-border="true"
+                page-size="11"
+                start-element="0"
+                total-elements="0"
+                styles="style">
+              </scale-pagination>`,
+    });
+    const paginationInfoElement =
+      specPage.root.shadowRoot.querySelector('.pagination__info');
+    const buttonPrev = specPage.root.shadowRoot.querySelector(
+      '.pagination__prev-prompt'
+    );
+    expect(paginationInfoElement.textContent).toEqual('0-0 / 0');
+    expect(buttonPrev.hasAttribute('disabled')).toBe(true);
+  });
 });
diff --git a/packages/components/src/components/pagination/pagination.tsx b/packages/components/src/components/pagination/pagination.tsx
index 28ef043342..4954da48c3 100644
--- a/packages/components/src/components/pagination/pagination.tsx
+++ b/packages/components/src/components/pagination/pagination.tsx
@@ -177,9 +177,9 @@ export class Pagination {
   /* 10. Render */
   render() {
     const total = this.totalElements;
-    const start = this.startElement + 1;
+    const start = total === 0 ? 0 : this.startElement + 1;
     const end = Math.min(this.startElement + this.pageSize, total);
-    const isAtStart = start === 1;
+    const isAtStart = start === 1 || total === 0;
     const isAtEnd = end === total;
     return (
       <Host>

From 4c45650e14eff01ef42525f08ba27c1c7b0f2109 Mon Sep 17 00:00:00 2001
From: tshimber <110041439+tshimber@users.noreply.github.com>
Date: Tue, 29 Oct 2024 03:24:24 +0100
Subject: [PATCH 20/25] feat: aria-details added to all input types (#2359)

* feat: aria-details added to diff input type
---
 .../src/components/checkbox/checkbox.tsx      |  5 +-
 .../src/components/checkbox/readme.md         | 33 +++++-----
 .../components/date-picker/date-picker.tsx    | 18 ++++--
 .../src/components/date-picker/readme.md      |  1 +
 .../dropdown-select/dropdown-select.tsx       |  8 ++-
 .../src/components/dropdown-select/readme.md  | 33 +++++-----
 .../src/components/dropdown/dropdown.tsx      | 10 ++-
 .../src/components/dropdown/readme.md         | 39 ++++++------
 .../components/radio-button/radio-button.tsx  | 10 ++-
 .../src/components/radio-button/readme.md     | 25 ++++----
 .../src/components/textarea/readme.md         | 47 +++++++-------
 .../src/components/textarea/textarea.tsx      | 10 ++-
 .../components/checkbox/Checkbox.stories.mdx  |  7 ++-
 .../components/checkbox/ScaleCheckbox.vue     |  3 +-
 .../date-picker/DatePicker.stories.mdx        |  9 +--
 .../date-picker/ScaleDatePicker.vue           |  1 +
 .../DropdownSelect.stories.mdx                | 44 +++++++------
 .../dropdown-select/ScaleDropdownSelect.vue   |  1 +
 .../components/dropdown/DropDown.stories.mdx  | 40 +++++++-----
 .../components/dropdown/ScaleDropDown.vue     |  1 +
 .../RadioButtonGroup.stories.mdx              | 63 +++++++++++--------
 .../radio-button-group/ScaleRadioButton.vue   |  7 ++-
 .../components/text-area/ScaleTextArea.vue    |  1 +
 .../components/text-area/TextArea.stories.mdx | 34 ++++++----
 24 files changed, 267 insertions(+), 183 deletions(-)

diff --git a/packages/components/src/components/checkbox/checkbox.tsx b/packages/components/src/components/checkbox/checkbox.tsx
index 65b9a44936..a341a77324 100644
--- a/packages/components/src/components/checkbox/checkbox.tsx
+++ b/packages/components/src/components/checkbox/checkbox.tsx
@@ -65,6 +65,8 @@ export class Checkbox {
   @Prop() styles?: string;
   /** (optional) Input required */
   @Prop() required?: boolean;
+  /** (optional) id or space separated list of ids of elements that provide or link to additional related information. */
+  @Prop() ariaDetailsId?: string;
 
   /** Emitted when the value has changed. */
   @Event({ eventName: 'scale-change' }) scaleChange: EventEmitter;
@@ -189,7 +191,8 @@ export class Checkbox {
           aria-label={this.ariaLabelCheckbox}
           aria-checked={this.indeterminate ? 'mixed' : false}
           aria-invalid={this.status === 'error' || this.invalid ? 'true' : null}
-          aria-describedBy={helperText.id}
+          aria-describedBy={helperText ? helperText.id : this.ariaDetailsId}
+          aria-details={this.ariaDetailsId}
           disabled={this.disabled}
           required={this.required}
           onChange={this.handleChange}
diff --git a/packages/components/src/components/checkbox/readme.md b/packages/components/src/components/checkbox/readme.md
index 1922303c48..4e083e2f83 100644
--- a/packages/components/src/components/checkbox/readme.md
+++ b/packages/components/src/components/checkbox/readme.md
@@ -7,22 +7,23 @@
 
 ## Properties
 
-| Property            | Attribute             | Description                                                                               | Type      | Default     |
-| ------------------- | --------------------- | ----------------------------------------------------------------------------------------- | --------- | ----------- |
-| `ariaLabelCheckbox` | `aria-label-checkbox` | (optional) Input label output                                                             | `string`  | `undefined` |
-| `checked`           | `checked`             | (optional) Active switch                                                                  | `boolean` | `false`     |
-| `disabled`          | `disabled`            | (optional) Input disabled                                                                 | `boolean` | `false`     |
-| `helperText`        | `helper-text`         | (optional) Input helper text                                                              | `string`  | `undefined` |
-| `hideLabel`         | `hide-label`          | (optional) Hides the specified label visually                                             | `boolean` | `false`     |
-| `indeterminate`     | `indeterminate`       | (optional) indeterminate                                                                  | `boolean` | `false`     |
-| `inputId`           | `input-id`            | (optional) Input checkbox id                                                              | `string`  | `undefined` |
-| `invalid`           | `invalid`             | (optional) Input status                                                                   | `boolean` | `false`     |
-| `label`             | `label`               | (optional) Input label                                                                    | `string`  | `''`        |
-| `name`              | `name`                | (optional) Input name                                                                     | `string`  | `undefined` |
-| `required`          | `required`            | (optional) Input required                                                                 | `boolean` | `undefined` |
-| `status`            | `status`              | <span style="color:red">**[DEPRECATED]**</span> - invalid should replace status<br/><br/> | `string`  | `''`        |
-| `styles`            | `styles`              | (optional) Injected CSS styles                                                            | `string`  | `undefined` |
-| `value`             | `value`               | (optional) Input value                                                                    | `string`  | `''`        |
+| Property            | Attribute             | Description                                                                                                      | Type      | Default     |
+| ------------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------- | --------- | ----------- |
+| `ariaDetailsId`     | `aria-details-id`     | (optional) id or space separated list of ids of elements that provide or link to additional related information. | `string`  | `undefined` |
+| `ariaLabelCheckbox` | `aria-label-checkbox` | (optional) Input label output                                                                                    | `string`  | `undefined` |
+| `checked`           | `checked`             | (optional) Active switch                                                                                         | `boolean` | `false`     |
+| `disabled`          | `disabled`            | (optional) Input disabled                                                                                        | `boolean` | `false`     |
+| `helperText`        | `helper-text`         | (optional) Input helper text                                                                                     | `string`  | `undefined` |
+| `hideLabel`         | `hide-label`          | (optional) Hides the specified label visually                                                                    | `boolean` | `false`     |
+| `indeterminate`     | `indeterminate`       | (optional) indeterminate                                                                                         | `boolean` | `false`     |
+| `inputId`           | `input-id`            | (optional) Input checkbox id                                                                                     | `string`  | `undefined` |
+| `invalid`           | `invalid`             | (optional) Input status                                                                                          | `boolean` | `false`     |
+| `label`             | `label`               | (optional) Input label                                                                                           | `string`  | `''`        |
+| `name`              | `name`                | (optional) Input name                                                                                            | `string`  | `undefined` |
+| `required`          | `required`            | (optional) Input required                                                                                        | `boolean` | `undefined` |
+| `status`            | `status`              | <span style="color:red">**[DEPRECATED]**</span> - invalid should replace status<br/><br/>                        | `string`  | `''`        |
+| `styles`            | `styles`              | (optional) Injected CSS styles                                                                                   | `string`  | `undefined` |
+| `value`             | `value`               | (optional) Input value                                                                                           | `string`  | `''`        |
 
 
 ## Events
diff --git a/packages/components/src/components/date-picker/date-picker.tsx b/packages/components/src/components/date-picker/date-picker.tsx
index 44f2ab40fe..a202a02a30 100644
--- a/packages/components/src/components/date-picker/date-picker.tsx
+++ b/packages/components/src/components/date-picker/date-picker.tsx
@@ -151,6 +151,10 @@ export class DatePicker {
 
   @Prop() variant?: 'informational' | 'warning' | 'danger' | 'success' =
     'informational';
+
+  /** (optional) id or space separated list of ids of elements that provide or link to additional related information. */
+  @Prop() ariaDetailsId?: string;
+
   /** Whether the input element has focus */
   @State() hasFocus: boolean = false;
 
@@ -308,11 +312,15 @@ export class DatePicker {
       input.addEventListener('keyup', this.handleKeyPress);
     }
 
-    if (input && this.helperText) {
-      input.setAttribute(
-        'aria-describedby',
-        `helper-message-${this.internalId}`
-      );
+    if (input && (this.helperText || this.ariaDetailsId)) {
+      const describedBy = this.helperText
+        ? `helper-message-${this.internalId}`
+        : this.ariaDetailsId;
+      input.setAttribute('aria-describedby', describedBy);
+    }
+
+    if (input && this.ariaDetailsId) {
+      input.setAttribute('aria-details', this.ariaDetailsId);
     }
 
     if (input && this.placeholder) {
diff --git a/packages/components/src/components/date-picker/readme.md b/packages/components/src/components/date-picker/readme.md
index 8b3077a06f..06836403f4 100644
--- a/packages/components/src/components/date-picker/readme.md
+++ b/packages/components/src/components/date-picker/readme.md
@@ -9,6 +9,7 @@
 
 | Property         | Attribute           | Description                                                                                                                                                                                                                                           | Type                                                    | Default           |
 | ---------------- | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------------- |
+| `ariaDetailsId`  | `aria-details-id`   | (optional) id or space separated list of ids of elements that provide or link to additional related information.                                                                                                                                      | `string`                                                | `undefined`       |
 | `dateAdapter`    | `date-adapter`      | Date adapter, for custom parsing/formatting. Must be object with a `parse` function which accepts a `string` and returns a `Date`, and a `format` function which accepts a `Date` and returns a `string`. Default is IS0-8601 parsing and formatting. | `any`                                                   | `undefined`       |
 | `direction`      | `direction`         | Forces the opening direction of the calendar modal to be always left or right. This setting can be useful when the input is smaller than the opening date picker would be as by default the picker always opens towards right.                        | `"left" \| "right"`                                     | `'right'`         |
 | `disabled`       | `disabled`          | Makes the date picker input component disabled. This prevents users from being able to interact with the input, and conveys its inactive state to assistive technologies.                                                                             | `boolean`                                               | `false`           |
diff --git a/packages/components/src/components/dropdown-select/dropdown-select.tsx b/packages/components/src/components/dropdown-select/dropdown-select.tsx
index afe80c06ce..2c8e429f00 100644
--- a/packages/components/src/components/dropdown-select/dropdown-select.tsx
+++ b/packages/components/src/components/dropdown-select/dropdown-select.tsx
@@ -257,6 +257,8 @@ export class DropdownSelect {
   @Prop() ariaLabelSelected?: string = 'selected';
   /** (optional) Text displayed in high contrast mode only to indicate disabled state */
   @Prop() hcmLabelDisabled?: string = 'this field is disabled';
+  /** (optional) id or space separated list of ids of elements that provide or link to additional related information. */
+  @Prop() ariaDetailsId?: string;
 
   @Event({ eventName: 'scale-change' }) scaleChange!: EventEmitter<void>;
   @Event({ eventName: 'scale-focus' }) scaleFocus!: EventEmitter<void>;
@@ -490,7 +492,8 @@ export class DropdownSelect {
     const ValueElement = element.ItemElement;
     const hasEmptyValueElement = element.value === '';
     const helperTextId = `helper-message-${generateUniqueId()}`;
-    const ariaDescribedByAttr = { 'aria-describedBy': helperTextId };
+    const describedBy = this.helperText ? helperTextId : this.ariaDetailsId;
+    const ariaDescribedByAttr = { 'aria-describedBy': describedBy };
 
     return (
       <Host>
@@ -505,6 +508,7 @@ export class DropdownSelect {
               aria-expanded={this.open ? 'true' : 'false'}
               aria-haspopup="listbox"
               aria-labelledby={`${this.comboboxId}-label`}
+              aria-details={this.ariaDetailsId}
               id={this.comboboxId}
               part="combobox"
               role="combobox"
@@ -521,7 +525,7 @@ export class DropdownSelect {
                     ).value,
                   }
                 : {})}
-              {...(this.helperText ? ariaDescribedByAttr : {})}
+              {...ariaDescribedByAttr}
               {...(this.invalid ? { 'aria-invalid': 'true' } : {})}
             >
               <span part="combobox-value">
diff --git a/packages/components/src/components/dropdown-select/readme.md b/packages/components/src/components/dropdown-select/readme.md
index 68ea780eba..31a69bfab3 100644
--- a/packages/components/src/components/dropdown-select/readme.md
+++ b/packages/components/src/components/dropdown-select/readme.md
@@ -7,22 +7,23 @@
 
 ## Properties
 
-| Property            | Attribute             | Description                                                                     | Type                                                    | Default                    |
-| ------------------- | --------------------- | ------------------------------------------------------------------------------- | ------------------------------------------------------- | -------------------------- |
-| `ariaLabelSelected` | `aria-label-selected` | (optional) Screen reader text appended to the selected element                  | `string`                                                | `'selected'`               |
-| `comboboxId`        | `combobox-id`         |                                                                                 | `string`                                                | `'combobox'`               |
-| `disabled`          | `disabled`            |                                                                                 | `boolean`                                               | `undefined`                |
-| `floatingStrategy`  | `floating-strategy`   |                                                                                 | `"absolute" \| "fixed"`                                 | `'absolute'`               |
-| `hcmLabelDisabled`  | `hcm-label-disabled`  | (optional) Text displayed in high contrast mode only to indicate disabled state | `string`                                                | `'this field is disabled'` |
-| `helperText`        | `helper-text`         |                                                                                 | `string`                                                | `''`                       |
-| `hideLabelVisually` | `hide-label-visually` | (optional) to hide the label                                                    | `boolean`                                               | `false`                    |
-| `invalid`           | `invalid`             |                                                                                 | `boolean`                                               | `false`                    |
-| `label`             | `label`               |                                                                                 | `string`                                                | `undefined`                |
-| `name`              | `name`                |                                                                                 | `string`                                                | `undefined`                |
-| `readonly`          | `readonly`            |                                                                                 | `boolean`                                               | `undefined`                |
-| `transparent`       | `transparent`         |                                                                                 | `boolean`                                               | `undefined`                |
-| `value`             | `value`               |                                                                                 | `any`                                                   | `undefined`                |
-| `variant`           | `variant`             |                                                                                 | `"danger" \| "informational" \| "success" \| "warning"` | `'informational'`          |
+| Property            | Attribute             | Description                                                                                                      | Type                                                    | Default                    |
+| ------------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | -------------------------- |
+| `ariaDetailsId`     | `aria-details-id`     | (optional) id or space separated list of ids of elements that provide or link to additional related information. | `string`                                                | `undefined`                |
+| `ariaLabelSelected` | `aria-label-selected` | (optional) Screen reader text appended to the selected element                                                   | `string`                                                | `'selected'`               |
+| `comboboxId`        | `combobox-id`         |                                                                                                                  | `string`                                                | `'combobox'`               |
+| `disabled`          | `disabled`            |                                                                                                                  | `boolean`                                               | `undefined`                |
+| `floatingStrategy`  | `floating-strategy`   |                                                                                                                  | `"absolute" \| "fixed"`                                 | `'absolute'`               |
+| `hcmLabelDisabled`  | `hcm-label-disabled`  | (optional) Text displayed in high contrast mode only to indicate disabled state                                  | `string`                                                | `'this field is disabled'` |
+| `helperText`        | `helper-text`         |                                                                                                                  | `string`                                                | `''`                       |
+| `hideLabelVisually` | `hide-label-visually` | (optional) to hide the label                                                                                     | `boolean`                                               | `false`                    |
+| `invalid`           | `invalid`             |                                                                                                                  | `boolean`                                               | `false`                    |
+| `label`             | `label`               |                                                                                                                  | `string`                                                | `undefined`                |
+| `name`              | `name`                |                                                                                                                  | `string`                                                | `undefined`                |
+| `readonly`          | `readonly`            |                                                                                                                  | `boolean`                                               | `undefined`                |
+| `transparent`       | `transparent`         |                                                                                                                  | `boolean`                                               | `undefined`                |
+| `value`             | `value`               |                                                                                                                  | `any`                                                   | `undefined`                |
+| `variant`           | `variant`             |                                                                                                                  | `"danger" \| "informational" \| "success" \| "warning"` | `'informational'`          |
 
 
 ## Events
diff --git a/packages/components/src/components/dropdown/dropdown.tsx b/packages/components/src/components/dropdown/dropdown.tsx
index ffd36e0bba..2adfa3745c 100644
--- a/packages/components/src/components/dropdown/dropdown.tsx
+++ b/packages/components/src/components/dropdown/dropdown.tsx
@@ -70,6 +70,8 @@ export class Dropdown {
   @Prop() controlled?: boolean = false;
   /** (optional) to avoid displaying the label */
   @Prop() hideLabelVisually?: boolean = false;
+  /** (optional) id or space separated list of ids of elements that provide or link to additional related information. */
+  @Prop() ariaDetailsId?: string;
 
   /** (optional) Injected CSS styles */
   @Prop() styles?: string;
@@ -242,7 +244,8 @@ export class Dropdown {
     const ariaInvalidAttr =
       this.status === 'error' || this.invalid ? { 'aria-invalid': 'true' } : {};
     const helperTextId = `helper-message-${this.internalId}`;
-    const ariaDescribedByAttr = { 'aria-describedBy': helperTextId };
+    const describedBy = this.helperText ? helperTextId : this.ariaDetailsId;
+    const ariaDescribedByAttr = { 'aria-describedBy': describedBy };
 
     return (
       <Host>
@@ -268,7 +271,10 @@ export class Dropdown {
               name={this.name}
               size={this.visibleSize}
               {...ariaInvalidAttr}
-              {...(this.helperText ? ariaDescribedByAttr : {})}
+              {...(this.helperText || this.ariaDetailsId
+                ? ariaDescribedByAttr
+                : {})}
+              aria-details={this.ariaDetailsId}
             >
               <slot />
             </select>
diff --git a/packages/components/src/components/dropdown/readme.md b/packages/components/src/components/dropdown/readme.md
index 2daa67e513..f673b4eb41 100644
--- a/packages/components/src/components/dropdown/readme.md
+++ b/packages/components/src/components/dropdown/readme.md
@@ -7,25 +7,26 @@
 
 ## Properties
 
-| Property            | Attribute             | Description                                                                               | Type                                                    | Default           |
-| ------------------- | --------------------- | ----------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------------- |
-| `controlled`        | `controlled`          | (optional) Makes type `select` behave as a controlled component in React                  | `boolean`                                               | `false`           |
-| `disabled`          | `disabled`            |                                                                                           | `boolean`                                               | `undefined`       |
-| `helperText`        | `helper-text`         | (optional) Input helper text                                                              | `string`                                                | `''`              |
-| `hideLabelVisually` | `hide-label-visually` | (optional) to avoid displaying the label                                                  | `boolean`                                               | `false`           |
-| `inputId`           | `input-id`            | (optional) Input checkbox id                                                              | `string`                                                | `undefined`       |
-| `invalid`           | `invalid`             | (optional) Input status                                                                   | `boolean`                                               | `false`           |
-| `label`             | `label`               | (optional) Input label                                                                    | `string`                                                | `''`              |
-| `multiple`          | `multiple`            | (optional) select multiple options                                                        | `boolean`                                               | `undefined`       |
-| `name`              | `name`                | (optional) Input name                                                                     | `string`                                                | `''`              |
-| `required`          | `required`            | (optional) Input required                                                                 | `boolean`                                               | `undefined`       |
-| `size`              | `size`                | <span style="color:red">**[DEPRECATED]**</span> <br/><br/>                                | `string`                                                | `undefined`       |
-| `status`            | `status`              | <span style="color:red">**[DEPRECATED]**</span> - invalid should replace status<br/><br/> | `string`                                                | `''`              |
-| `styles`            | `styles`              | (optional) Injected CSS styles                                                            | `string`                                                | `undefined`       |
-| `transparent`       | `transparent`         | (optional) input background transparent                                                   | `boolean`                                               | `undefined`       |
-| `value`             | `value`               | (optional) Input value                                                                    | `number \| string`                                      | `''`              |
-| `variant`           | `variant`             | (optional) Variant                                                                        | `"danger" \| "informational" \| "success" \| "warning"` | `'informational'` |
-| `visibleSize`       | `visible-size`        | (optional) the number of visible options in a select drop-down list                       | `number`                                                | `undefined`       |
+| Property            | Attribute             | Description                                                                                                      | Type                                                    | Default           |
+| ------------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------------- |
+| `ariaDetailsId`     | `aria-details-id`     | (optional) id or space separated list of ids of elements that provide or link to additional related information. | `string`                                                | `undefined`       |
+| `controlled`        | `controlled`          | (optional) Makes type `select` behave as a controlled component in React                                         | `boolean`                                               | `false`           |
+| `disabled`          | `disabled`            |                                                                                                                  | `boolean`                                               | `undefined`       |
+| `helperText`        | `helper-text`         | (optional) Input helper text                                                                                     | `string`                                                | `''`              |
+| `hideLabelVisually` | `hide-label-visually` | (optional) to avoid displaying the label                                                                         | `boolean`                                               | `false`           |
+| `inputId`           | `input-id`            | (optional) Input checkbox id                                                                                     | `string`                                                | `undefined`       |
+| `invalid`           | `invalid`             | (optional) Input status                                                                                          | `boolean`                                               | `false`           |
+| `label`             | `label`               | (optional) Input label                                                                                           | `string`                                                | `''`              |
+| `multiple`          | `multiple`            | (optional) select multiple options                                                                               | `boolean`                                               | `undefined`       |
+| `name`              | `name`                | (optional) Input name                                                                                            | `string`                                                | `''`              |
+| `required`          | `required`            | (optional) Input required                                                                                        | `boolean`                                               | `undefined`       |
+| `size`              | `size`                | <span style="color:red">**[DEPRECATED]**</span> <br/><br/>                                                       | `string`                                                | `undefined`       |
+| `status`            | `status`              | <span style="color:red">**[DEPRECATED]**</span> - invalid should replace status<br/><br/>                        | `string`                                                | `''`              |
+| `styles`            | `styles`              | (optional) Injected CSS styles                                                                                   | `string`                                                | `undefined`       |
+| `transparent`       | `transparent`         | (optional) input background transparent                                                                          | `boolean`                                               | `undefined`       |
+| `value`             | `value`               | (optional) Input value                                                                                           | `number \| string`                                      | `''`              |
+| `variant`           | `variant`             | (optional) Variant                                                                                               | `"danger" \| "informational" \| "success" \| "warning"` | `'informational'` |
+| `visibleSize`       | `visible-size`        | (optional) the number of visible options in a select drop-down list                                              | `number`                                                | `undefined`       |
 
 
 ## Events
diff --git a/packages/components/src/components/radio-button/radio-button.tsx b/packages/components/src/components/radio-button/radio-button.tsx
index 42e84849b1..5ba1d3e7c9 100644
--- a/packages/components/src/components/radio-button/radio-button.tsx
+++ b/packages/components/src/components/radio-button/radio-button.tsx
@@ -53,6 +53,8 @@ export class RadioButton {
   @Prop() inputId?: string;
   /** (optional) Injected CSS styles */
   @Prop() styles?: string;
+  /** (optional) id or space separated list of ids of elements that provide or link to additional related information. */
+  @Prop() ariaDetailsId?: string;
 
   @Event({ eventName: 'scale-change' })
   scaleChange!: EventEmitter<InputChangeEventDetail>;
@@ -124,7 +126,8 @@ export class RadioButton {
     const ariaInvalidAttr =
       this.status === 'error' || this.invalid ? { 'aria-invalid': 'true' } : {};
     const helperTextId = `helper-message-${this.internalId}`;
-    const ariaDescribedByAttr = { 'aria-describedBy': helperTextId };
+    const describedBy = this.helperText ? helperTextId : this.ariaDetailsId;
+    const ariaDescribedByAttr = { 'aria-describedBy': describedBy };
 
     return (
       <Host>
@@ -138,7 +141,10 @@ export class RadioButton {
             checked={this.checked}
             disabled={this.disabled}
             {...ariaInvalidAttr}
-            {...(this.helperText ? ariaDescribedByAttr : {})}
+            {...(this.helperText || this.ariaDetailsId
+              ? ariaDescribedByAttr
+              : {})}
+            aria-details={this.ariaDetailsId}
           />
           <label htmlFor={this.inputId}>{this.label}</label>
           {!!this.helperText && (
diff --git a/packages/components/src/components/radio-button/readme.md b/packages/components/src/components/radio-button/readme.md
index c0034e5871..5d4c086c81 100644
--- a/packages/components/src/components/radio-button/readme.md
+++ b/packages/components/src/components/radio-button/readme.md
@@ -7,18 +7,19 @@
 
 ## Properties
 
-| Property     | Attribute     | Description                                                                               | Type               | Default     |
-| ------------ | ------------- | ----------------------------------------------------------------------------------------- | ------------------ | ----------- |
-| `checked`    | `checked`     | (optional) Input checked                                                                  | `boolean`          | `false`     |
-| `disabled`   | `disabled`    | (optional) Input disabled                                                                 | `boolean`          | `undefined` |
-| `helperText` | `helper-text` | (optional) Input helper text                                                              | `string`           | `''`        |
-| `inputId`    | `input-id`    | (optional) Input checkbox id                                                              | `string`           | `undefined` |
-| `invalid`    | `invalid`     | (optional) Input status                                                                   | `boolean`          | `false`     |
-| `label`      | `label`       | (optional) Input label                                                                    | `string`           | `''`        |
-| `name`       | `name`        | (optional) Input name                                                                     | `string`           | `''`        |
-| `status`     | `status`      | <span style="color:red">**[DEPRECATED]**</span> - invalid should replace status<br/><br/> | `string`           | `''`        |
-| `styles`     | `styles`      | (optional) Injected CSS styles                                                            | `string`           | `undefined` |
-| `value`      | `value`       | (optional) Input value                                                                    | `number \| string` | `''`        |
+| Property        | Attribute         | Description                                                                                                      | Type               | Default     |
+| --------------- | ----------------- | ---------------------------------------------------------------------------------------------------------------- | ------------------ | ----------- |
+| `ariaDetailsId` | `aria-details-id` | (optional) id or space separated list of ids of elements that provide or link to additional related information. | `string`           | `undefined` |
+| `checked`       | `checked`         | (optional) Input checked                                                                                         | `boolean`          | `false`     |
+| `disabled`      | `disabled`        | (optional) Input disabled                                                                                        | `boolean`          | `undefined` |
+| `helperText`    | `helper-text`     | (optional) Input helper text                                                                                     | `string`           | `''`        |
+| `inputId`       | `input-id`        | (optional) Input checkbox id                                                                                     | `string`           | `undefined` |
+| `invalid`       | `invalid`         | (optional) Input status                                                                                          | `boolean`          | `false`     |
+| `label`         | `label`           | (optional) Input label                                                                                           | `string`           | `''`        |
+| `name`          | `name`            | (optional) Input name                                                                                            | `string`           | `''`        |
+| `status`        | `status`          | <span style="color:red">**[DEPRECATED]**</span> - invalid should replace status<br/><br/>                        | `string`           | `''`        |
+| `styles`        | `styles`          | (optional) Injected CSS styles                                                                                   | `string`           | `undefined` |
+| `value`         | `value`           | (optional) Input value                                                                                           | `number \| string` | `''`        |
 
 
 ## Events
diff --git a/packages/components/src/components/textarea/readme.md b/packages/components/src/components/textarea/readme.md
index 0111cfd0ba..c5e9044087 100644
--- a/packages/components/src/components/textarea/readme.md
+++ b/packages/components/src/components/textarea/readme.md
@@ -7,29 +7,30 @@
 
 ## Properties
 
-| Property         | Attribute         | Description                                                                               | Type                                                    | Default           |
-| ---------------- | ----------------- | ----------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------------- |
-| `cols`           | `cols`            | (optional) textarea column                                                                | `number`                                                | `undefined`       |
-| `counter`        | `counter`         | (optional) Input counter                                                                  | `boolean`                                               | `undefined`       |
-| `disabled`       | `disabled`        | (optional) Input disabled                                                                 | `boolean`                                               | `undefined`       |
-| `helperText`     | `helper-text`     | (optional) Input helper text                                                              | `string`                                                | `''`              |
-| `inputAutofocus` | `input-autofocus` | (optional) the input should automatically get focus when the page loads.                  | `boolean`                                               | `undefined`       |
-| `inputId`        | `input-id`        | (optional) Input checkbox id                                                              | `string`                                                | `undefined`       |
-| `invalid`        | `invalid`         | (optional) Input status                                                                   | `boolean`                                               | `false`           |
-| `label`          | `label`           | (optional) Input label                                                                    | `string`                                                | `''`              |
-| `maxLength`      | `max-length`      | (optional) Input max length                                                               | `number`                                                | `undefined`       |
-| `minLength`      | `min-length`      | (optional) Input min length                                                               | `number`                                                | `undefined`       |
-| `name`           | `name`            | (optional) Input name                                                                     | `string`                                                | `''`              |
-| `placeholder`    | `placeholder`     | (optional) Input placeHolder                                                              | `string`                                                | `''`              |
-| `readonly`       | `readonly`        | (optional) Input readonly                                                                 | `boolean`                                               | `undefined`       |
-| `required`       | `required`        | (optional) Input required                                                                 | `boolean`                                               | `undefined`       |
-| `resize`         | `resize`          | (optional) textarea resize                                                                | `"horizontal" \| "none" \| "unset" \| "vertical"`       | `undefined`       |
-| `rows`           | `rows`            | (optional) textarea row                                                                   | `number`                                                | `undefined`       |
-| `status`         | `status`          | <span style="color:red">**[DEPRECATED]**</span> - invalid should replace status<br/><br/> | `string`                                                | `''`              |
-| `styles`         | `styles`          | (optional) Injected CSS styles                                                            | `string`                                                | `undefined`       |
-| `transparent`    | `transparent`     | (optional) input background transparent                                                   | `boolean`                                               | `undefined`       |
-| `value`          | `value`           | (optional) Input value                                                                    | `number \| string`                                      | `''`              |
-| `variant`        | `variant`         | (optional) Variant                                                                        | `"danger" \| "informational" \| "success" \| "warning"` | `'informational'` |
+| Property         | Attribute         | Description                                                                                                      | Type                                                    | Default           |
+| ---------------- | ----------------- | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------------- |
+| `ariaDetailsId`  | `aria-details-id` | (optional) id or space separated list of ids of elements that provide or link to additional related information. | `string`                                                | `undefined`       |
+| `cols`           | `cols`            | (optional) textarea column                                                                                       | `number`                                                | `undefined`       |
+| `counter`        | `counter`         | (optional) Input counter                                                                                         | `boolean`                                               | `undefined`       |
+| `disabled`       | `disabled`        | (optional) Input disabled                                                                                        | `boolean`                                               | `undefined`       |
+| `helperText`     | `helper-text`     | (optional) Input helper text                                                                                     | `string`                                                | `''`              |
+| `inputAutofocus` | `input-autofocus` | (optional) the input should automatically get focus when the page loads.                                         | `boolean`                                               | `undefined`       |
+| `inputId`        | `input-id`        | (optional) Input checkbox id                                                                                     | `string`                                                | `undefined`       |
+| `invalid`        | `invalid`         | (optional) Input status                                                                                          | `boolean`                                               | `false`           |
+| `label`          | `label`           | (optional) Input label                                                                                           | `string`                                                | `''`              |
+| `maxLength`      | `max-length`      | (optional) Input max length                                                                                      | `number`                                                | `undefined`       |
+| `minLength`      | `min-length`      | (optional) Input min length                                                                                      | `number`                                                | `undefined`       |
+| `name`           | `name`            | (optional) Input name                                                                                            | `string`                                                | `''`              |
+| `placeholder`    | `placeholder`     | (optional) Input placeHolder                                                                                     | `string`                                                | `''`              |
+| `readonly`       | `readonly`        | (optional) Input readonly                                                                                        | `boolean`                                               | `undefined`       |
+| `required`       | `required`        | (optional) Input required                                                                                        | `boolean`                                               | `undefined`       |
+| `resize`         | `resize`          | (optional) textarea resize                                                                                       | `"horizontal" \| "none" \| "unset" \| "vertical"`       | `undefined`       |
+| `rows`           | `rows`            | (optional) textarea row                                                                                          | `number`                                                | `undefined`       |
+| `status`         | `status`          | <span style="color:red">**[DEPRECATED]**</span> - invalid should replace status<br/><br/>                        | `string`                                                | `''`              |
+| `styles`         | `styles`          | (optional) Injected CSS styles                                                                                   | `string`                                                | `undefined`       |
+| `transparent`    | `transparent`     | (optional) input background transparent                                                                          | `boolean`                                               | `undefined`       |
+| `value`          | `value`           | (optional) Input value                                                                                           | `number \| string`                                      | `''`              |
+| `variant`        | `variant`         | (optional) Variant                                                                                               | `"danger" \| "informational" \| "success" \| "warning"` | `'informational'` |
 
 
 ## Events
diff --git a/packages/components/src/components/textarea/textarea.tsx b/packages/components/src/components/textarea/textarea.tsx
index 3405e05c51..b8d39bc831 100644
--- a/packages/components/src/components/textarea/textarea.tsx
+++ b/packages/components/src/components/textarea/textarea.tsx
@@ -77,6 +77,8 @@ export class Textarea {
   @Prop() inputAutofocus?: boolean;
   /** (optional) Injected CSS styles */
   @Prop() styles?: string;
+  /** (optional) id or space separated list of ids of elements that provide or link to additional related information. */
+  @Prop() ariaDetailsId?: string;
 
   /** Emitted when a keyboard input occurred. */
   @Event({ eventName: 'scale-input' }) scaleInput!: EventEmitter<KeyboardEvent>;
@@ -173,7 +175,8 @@ export class Textarea {
     const ariaInvalidAttr =
       this.status === 'error' || this.invalid ? { 'aria-invalid': 'true' } : {};
     const helperTextId = `helper-message-${this.internalId}`;
-    const ariaDescribedByAttr = { 'aria-describedBy': helperTextId };
+    const describedBy = this.helperText ? helperTextId : this.ariaDetailsId;
+    const ariaDescribedByAttr = { 'aria-describedBy': describedBy };
     const readonlyAttr = this.readonly ? { readonly: 'readonly' } : {};
 
     return (
@@ -212,7 +215,10 @@ export class Textarea {
               {...(!!this.rows ? { rows: this.rows } : {})}
               {...(!!this.cols ? { cols: this.cols } : {})}
               {...ariaInvalidAttr}
-              {...(this.helperText ? ariaDescribedByAttr : {})}
+              {...(this.helperText || this.ariaDetailsId
+                ? ariaDescribedByAttr
+                : {})}
+              aria-details={this.ariaDetailsId}
               ref={(el) => (this.focusableElement = el)}
             />
           </div>
diff --git a/packages/storybook-vue/stories/components/checkbox/Checkbox.stories.mdx b/packages/storybook-vue/stories/components/checkbox/Checkbox.stories.mdx
index 915a66902d..61b9b7c4fc 100644
--- a/packages/storybook-vue/stories/components/checkbox/Checkbox.stories.mdx
+++ b/packages/storybook-vue/stories/components/checkbox/Checkbox.stories.mdx
@@ -68,8 +68,9 @@ export const Template = (args, { argTypes }) => ({
 ```css
 scale-checkbox {
   --spacing-x: var(--telekom-spacing-composition-space-04);
-  --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-text: var(--telekom-color-text-and-icon-standard);
   --color-error: var(--telekom-color-functional-danger-standard);
   --color-disabled: var(--telekom-color-text-and-icon-disabled);
@@ -254,4 +255,4 @@ scale-checkbox {
     ></scale-icon-alert-imprint-dataprivacy>
   </span>
 </scale-checkbox>
-```
\ No newline at end of file
+```
diff --git a/packages/storybook-vue/stories/components/checkbox/ScaleCheckbox.vue b/packages/storybook-vue/stories/components/checkbox/ScaleCheckbox.vue
index 6aa6a2d29a..99353851b7 100644
--- a/packages/storybook-vue/stories/components/checkbox/ScaleCheckbox.vue
+++ b/packages/storybook-vue/stories/components/checkbox/ScaleCheckbox.vue
@@ -31,7 +31,8 @@ export default {
     value: { type: String },
     inputId: { type: String },
     required: { type: Boolean },
-    ariaLabelCheckbox: { type: String}
+    ariaLabelCheckbox: { type: String },
+    ariaDetailsId: { type: String },
   },
   methods: {
     scaleChange($event) {
diff --git a/packages/storybook-vue/stories/components/date-picker/DatePicker.stories.mdx b/packages/storybook-vue/stories/components/date-picker/DatePicker.stories.mdx
index d43cb7f1b9..4ae56bf53e 100644
--- a/packages/storybook-vue/stories/components/date-picker/DatePicker.stories.mdx
+++ b/packages/storybook-vue/stories/components/date-picker/DatePicker.stories.mdx
@@ -204,7 +204,7 @@ export const RangeTemplate = (args, { argTypes }) => ({
     args={{
       value: '2020-12-31',
       label: 'Standard',
-      placeholder: 'Select date'
+      placeholder: 'Select date',
     }}
   >
     {Template.bind({})}
@@ -251,8 +251,9 @@ duet-date-picker {
   --font-size-day: var(--telekom-typography-font-size-body);
   --font-size-table-header: var(--telekom-typography-font-size-caption);
   --font-weight-table-header: var(--telekom-typography-font-weight-extra-bold);
-  --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
+    );
 
   --z-index-label: 10;
 }
@@ -290,7 +291,7 @@ duet-date-picker {
       label: 'With Error',
       invalid: true,
       helperText: 'something is wrong',
-      placeholder: 'select date'
+      placeholder: 'select date',
     }}
   >
     {Template.bind({})}
diff --git a/packages/storybook-vue/stories/components/date-picker/ScaleDatePicker.vue b/packages/storybook-vue/stories/components/date-picker/ScaleDatePicker.vue
index 7dc8496b8b..087eaeda1c 100644
--- a/packages/storybook-vue/stories/components/date-picker/ScaleDatePicker.vue
+++ b/packages/storybook-vue/stories/components/date-picker/ScaleDatePicker.vue
@@ -50,6 +50,7 @@ export default {
     styles: { type: String },
     placeholder: { type: String },
     size: { type: String },
+    ariaDetailsId: { type: String },
   },
   methods: {
     scaleChange($event) {
diff --git a/packages/storybook-vue/stories/components/dropdown-select/DropdownSelect.stories.mdx b/packages/storybook-vue/stories/components/dropdown-select/DropdownSelect.stories.mdx
index b295b8e77e..ee7c61bec7 100644
--- a/packages/storybook-vue/stories/components/dropdown-select/DropdownSelect.stories.mdx
+++ b/packages/storybook-vue/stories/components/dropdown-select/DropdownSelect.stories.mdx
@@ -13,8 +13,8 @@ import { action } from '@storybook/addon-actions';
 export const Template = (args, { argTypes }) => ({
   components: { ScaleDropdownSelect },
   props: {
-  itemProps: { default: {} },
-  ...ScaleDropdownSelect.props,
+    itemProps: { default: {} },
+    ...ScaleDropdownSelect.props,
   },
   data() {
     return {
@@ -106,18 +106,22 @@ export const Template = (args, { argTypes }) => ({
   --color-disabled: var(--telekom-color-text-and-icon-disabled);
   --background-disabled: none;
   --background-hover: var(--telekom-color-ui-state-fill-hovered);
-  --border: var(--telekom-spacing-composition-space-01) solid
-    var(--telekom-color-ui-border-standard);
+  --border: var(--telekom-spacing-composition-space-01) solid var(
+      --telekom-color-ui-border-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);
-  --border-invalid: var(--telekom-spacing-composition-space-02) solid
-    var(--telekom-color-functional-danger-hovered);
-  --focus-outline: var(--telekom-line-weight-highlight) solid
-    var(--telekom-color-functional-focus-standard);
+  --border-invalid: var(--telekom-spacing-composition-space-02) solid var(
+      --telekom-color-functional-danger-hovered
+    );
+  --focus-outline: var(--telekom-line-weight-highlight) solid var(
+      --telekom-color-functional-focus-standard
+    );
   --spacing-x: var(--telekom-spacing-composition-space-05);
-  --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);
   --spacing-x-for-helper-text: var(--telekom-spacing-composition-space-03);
 
@@ -128,9 +132,9 @@ export const Template = (args, { argTypes }) => ({
     18px 32px 4px 12px
     (subtracting 1px from border)
   */
-  --spacing-combobox: 1.125rem
-    calc(2rem - var(--telekom-spacing-composition-space-01)) 0.25rem
-    calc(0.75rem - var(--telekom-spacing-composition-space-01));
+  --spacing-combobox: 1.125rem calc(
+      2rem - var(--telekom-spacing-composition-space-01)
+    ) 0.25rem calc(0.75rem - var(--telekom-spacing-composition-space-01));
 
   /*meta*/
   --spacing-y-meta: var(--telekom-spacing-composition-space-03);
@@ -155,17 +159,16 @@ export const Template = (args, { argTypes }) => ({
 
   /*listbox*/
   --background-listbox: var(--telekom-color-background-surface);
-  --box-shadow-listbox: 0 2px 4px 0 rgba(0, 0, 0, 0.1),
-    0 4px 16px 0 rgba(0, 0, 0, 0.1);
+  --box-shadow-listbox: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 4px 16px 0 rgba(0, 0, 0, 0.1);
   --max-height-listbox: 300px;
   --z-index-listbox: 99;
 }
-
 ```
 
 ## Disabled
 
 ### Whole Dropdown Select disabled
+
 <Canvas withSource="none">
   <Story
     name="Disabled"
@@ -187,6 +190,7 @@ export const Template = (args, { argTypes }) => ({
 ```
 
 ### Individual items disabled
+
 <Canvas withSource="none">
   <Story
     name="Disabled items"
@@ -204,8 +208,12 @@ export const Template = (args, { argTypes }) => ({
 
 ```html
 <scale-dropdown-select label="Disabled items">
-  <scale-dropdown-select-item value="caspar" disabled>Caspar</scale-dropdown-select-item>
-  <scale-dropdown-select-item value="cedric" disabled>Cedric</scale-dropdown-select-item>
+  <scale-dropdown-select-item value="caspar" disabled
+    >Caspar</scale-dropdown-select-item
+  >
+  <scale-dropdown-select-item value="cedric" disabled
+    >Cedric</scale-dropdown-select-item
+  >
   <scale-dropdown-select-item value="cem">Cem</scale-dropdown-select-item>
 </scale-dropdown-select>
 ```
diff --git a/packages/storybook-vue/stories/components/dropdown-select/ScaleDropdownSelect.vue b/packages/storybook-vue/stories/components/dropdown-select/ScaleDropdownSelect.vue
index 7b4ad43c48..9b63c21bb4 100644
--- a/packages/storybook-vue/stories/components/dropdown-select/ScaleDropdownSelect.vue
+++ b/packages/storybook-vue/stories/components/dropdown-select/ScaleDropdownSelect.vue
@@ -35,6 +35,7 @@ export default {
     comboboxId: { type: String },
     hideLabelVisually: { type: Boolean, default: false },
     floatingStrategy: { type: String },
+    ariaDetailsId: { type: String },
   },
   methods: {
     'scale-change'($event) {
diff --git a/packages/storybook-vue/stories/components/dropdown/DropDown.stories.mdx b/packages/storybook-vue/stories/components/dropdown/DropDown.stories.mdx
index 4f6dea162e..39fee2f627 100644
--- a/packages/storybook-vue/stories/components/dropdown/DropDown.stories.mdx
+++ b/packages/storybook-vue/stories/components/dropdown/DropDown.stories.mdx
@@ -97,24 +97,31 @@ export const Template = (args, { argTypes }) => ({
   --font-weight: var(--telekom-typography-font-weight-bold);
   --height: var(--telekom-spacing-composition-space-13);
   --spacing-x: var(--telekom-spacing-composition-space-05);
-  --spacing-dropdown: 18px var(--telekom-spacing-composition-space-12) 5px
-    calc(var(--spacing-x) - 1px);
-  --transition: all var(--telekom-motion-duration-transition)
-    var(--telekom-motion-easing-standard);
+  --spacing-dropdown: 18px var(--telekom-spacing-composition-space-12) 5px calc(
+      var(--spacing-x) - 1px
+    );
+  --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-danger: 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-danger: 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);
-  --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
+    );
   --color-disabled: var(--telekom-color-text-and-icon-disabled);
   --background-disabled: none;
   --color: var(--telekom-color-text-and-icon-standard);
@@ -267,6 +274,9 @@ The display error is on the browser side.
   <option value="1">item 1</option>
   <option value="2" selected>item 2</option>
   <option value="3">item 3</option>
-  <scale-icon-content-calendar size="20" slot="icon"></scale-icon-content-calendar>
+  <scale-icon-content-calendar
+    size="20"
+    slot="icon"
+  ></scale-icon-content-calendar>
 </scale-dropdown>
 ```
diff --git a/packages/storybook-vue/stories/components/dropdown/ScaleDropDown.vue b/packages/storybook-vue/stories/components/dropdown/ScaleDropDown.vue
index d4de8dad51..34cded1916 100644
--- a/packages/storybook-vue/stories/components/dropdown/ScaleDropDown.vue
+++ b/packages/storybook-vue/stories/components/dropdown/ScaleDropDown.vue
@@ -40,6 +40,7 @@ export default {
     controlled: { type: Boolean },
     styles: { type: String },
     size: { type: String },
+    ariaDetailsId: { type: String },
   },
   methods: {
     scaleInput($event) {
diff --git a/packages/storybook-vue/stories/components/radio-button-group/RadioButtonGroup.stories.mdx b/packages/storybook-vue/stories/components/radio-button-group/RadioButtonGroup.stories.mdx
index e7d12e2a55..3cc4a0ac29 100644
--- a/packages/storybook-vue/stories/components/radio-button-group/RadioButtonGroup.stories.mdx
+++ b/packages/storybook-vue/stories/components/radio-button-group/RadioButtonGroup.stories.mdx
@@ -54,8 +54,8 @@ export const Template = (args, context) => ({
         :disabled="itemProps[index]?.disabled"
       ></scale-radio-button>
     </scale-radio-button-group>
-  `
-})
+  `,
+});
 
 <div
   style={{
@@ -75,13 +75,13 @@ export const Template = (args, context) => ({
   <Story
     name="Standard"
     parameters={{
-      controls: { 
-        exclude: ['groupName'] 
-      }
+      controls: {
+        exclude: ['groupName'],
+      },
     }}
     args={{
       label: 'Group Label',
-      groupName: 'standard'
+      groupName: 'standard',
     }}
   >
     {Template.bind({})}
@@ -137,8 +137,9 @@ scale-radio-button {
   --color-disabled: var(--telekom-color-text-and-icon-disabled);
   --background-disabled: var(--telekom-color-ui-disabled);
   --color-error: var(--telekom-color-text-and-icon-functional-danger);
-  --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-primary: var(--telekom-color-text-and-icon-primary-standard);
   --color-primary-hover: var(--telekom-color-text-and-icon-standard);
   --color-primary-active: var(--telekom-color-text-and-icon-standard);
@@ -171,26 +172,29 @@ scale-radio-button {
   --height-control: var(--telekom-spacing-composition-space-07);
   --transition-control: var(--transition);
   --background-color-control: var(--telekom-color-ui-base);
-  --border-control: var(--telekom-spacing-composition-space-01) solid
-    var(--telekom-color-ui-border-standard);
+  --border-control: var(--telekom-spacing-composition-space-01) solid var(
+      --telekom-color-ui-border-standard
+    );
   --line-height-helper-text: var(--telekom-typography-line-spacing-standard);
   --border-control-checked: calc(
       0.25 * var(--telekom-spacing-composition-space-05)
-    )
-    solid var(--telekom-color-background-canvas);
+    ) solid var(--telekom-color-background-canvas);
   --border-control-checked-disabled: calc(
       0.5 * var(--telekom-spacing-composition-space-05)
-    )
-    solid var(--telekom-color-ui-border-disabled);
+    ) solid var(--telekom-color-ui-border-disabled);
   --background-control-checked-disabled: none;
-  --border-control-active: var(--telekom-spacing-composition-space-04) solid
-    var(--telekom-color-primary-pressed);
-  --border-control-disabled: 0 0 0 var(--telekom-spacing-composition-space-01)
-    var(--telekom-color-ui-border-disabled);
-  --border-control-error: var(--telekom-spacing-composition-space-02) solid
-    var(--telekom-color-functional-danger-standard);
-  --box-shadow-control-focus: 0 0 0 var(--telekom-spacing-composition-space-03)
-    var(--color-focus);
+  --border-control-active: var(--telekom-spacing-composition-space-04) solid var(
+      --telekom-color-primary-pressed
+    );
+  --border-control-disabled: 0 0 0 var(--telekom-spacing-composition-space-01) var(
+      --telekom-color-ui-border-disabled
+    );
+  --border-control-error: var(--telekom-spacing-composition-space-02) solid var(
+      --telekom-color-functional-danger-standard
+    );
+  --box-shadow-control-focus: 0 0 0 var(--telekom-spacing-composition-space-03) var(
+      --color-focus
+    );
 }
 ```
 
@@ -233,7 +237,10 @@ scale-radio-button {
 </Canvas>
 
 ```html
-<scale-radio-button-group label="Group Label" helper-text="Make sure to fill this">
+<scale-radio-button-group
+  label="Group Label"
+  helper-text="Make sure to fill this"
+>
   <scale-radio-button
     label="Radio Label"
     name="helper-text"
@@ -271,7 +278,7 @@ scale-radio-button {
           checked: true,
           helperText: 'Error message',
         },
-      }
+      },
     }}
   >
     {Template.bind({})}
@@ -279,7 +286,11 @@ scale-radio-button {
 </Canvas>
 
 ```html
-<scale-radio-button-group label="Group Label" invalid helper-text="Something is wrong">
+<scale-radio-button-group
+  label="Group Label"
+  invalid
+  helper-text="Something is wrong"
+>
   <scale-radio-button
     label="Radio Label"
     name="error"
@@ -316,7 +327,7 @@ scale-radio-button {
         0: {
           disabled: true,
         },
-      }
+      },
     }}
   >
     {Template.bind({})}
diff --git a/packages/storybook-vue/stories/components/radio-button-group/ScaleRadioButton.vue b/packages/storybook-vue/stories/components/radio-button-group/ScaleRadioButton.vue
index 6254aaad3a..9404f7ed18 100644
--- a/packages/storybook-vue/stories/components/radio-button-group/ScaleRadioButton.vue
+++ b/packages/storybook-vue/stories/components/radio-button-group/ScaleRadioButton.vue
@@ -10,15 +10,16 @@ export default {
     checked: { type: Boolean },
     value: { type: String },
     inputId: { type: String },
-    styles: { type: String }
+    styles: { type: String },
+    ariaDetailsId: { type: String },
   },
   methods: {
     fireEvents() {
       this.$emit('scale-change');
-    }
+    },
   },
   render() {
     return this.$slots.default;
-  }
+  },
 };
 </script>
diff --git a/packages/storybook-vue/stories/components/text-area/ScaleTextArea.vue b/packages/storybook-vue/stories/components/text-area/ScaleTextArea.vue
index 28e4115f48..ac9931bec1 100644
--- a/packages/storybook-vue/stories/components/text-area/ScaleTextArea.vue
+++ b/packages/storybook-vue/stories/components/text-area/ScaleTextArea.vue
@@ -52,6 +52,7 @@ export default {
     transparent: { type: Boolean },
     inputAutofocus: { type: Boolean },
     styles: { type: String },
+    ariaDetailsId: { type: String },
   },
   methods: {
     scaleInput($event) {
diff --git a/packages/storybook-vue/stories/components/text-area/TextArea.stories.mdx b/packages/storybook-vue/stories/components/text-area/TextArea.stories.mdx
index 64637c058e..a815809d15 100644
--- a/packages/storybook-vue/stories/components/text-area/TextArea.stories.mdx
+++ b/packages/storybook-vue/stories/components/text-area/TextArea.stories.mdx
@@ -89,20 +89,24 @@ export const Template = (args, { argTypes }) => ({
 
 ```css
 scale-textarea {
-  --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-line-weight-standard) solid
-    var(--telekom-color-ui-border-standard);
-  --border-error: var(--telekom-line-weight-highlight) solid
-    var(--telekom-color-functional-danger-standard);
+  --border: var(--telekom-line-weight-standard) solid var(
+      --telekom-color-ui-border-standard
+    );
+  --border-error: var(--telekom-line-weight-highlight) solid var(
+      --telekom-color-functional-danger-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
+    );
   --spacing-x-control: var(--telekom-spacing-composition-space-05);
   --spacing-bottom-control: var(--telekom-spacing-composition-space-05);
   --spacing-top-control: calc(
@@ -126,8 +130,8 @@ scale-textarea {
     18px 32px 4px 12px
     (subtracting 1px from border)
   */
-  --spacing-control: 0 calc(2rem - var(--telekom-spacing-composition-space-01))
-    0.25rem calc(0.75rem - var(--telekom-spacing-composition-space-01));
+  --spacing-control: 0 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);
 
@@ -236,9 +240,9 @@ scale-textarea {
   <Story
     name="Read Only"
     args={{
-      label: "Read only",
+      label: 'Read only',
       readonly: true,
-      value: "This cannot be changed"
+      value: 'This cannot be changed',
     }}
   >
     {Template.bind({})}
@@ -246,7 +250,11 @@ scale-textarea {
 </Canvas>
 
 ```html
-<scale-textarea label="Read only" value="This cannot be changed" readonly></scale-textarea>
+<scale-textarea
+  label="Read only"
+  value="This cannot be changed"
+  readonly
+></scale-textarea>
 ```
 
 ## Max Length With Counter

From bd30a6f2a187976ae85234b5f526537f68b3ea80 Mon Sep 17 00:00:00 2001
From: tshimber <110041439+tshimber@users.noreply.github.com>
Date: Tue, 29 Oct 2024 12:22:32 +0100
Subject: [PATCH 21/25] fix(tab-nav): fixes preselect logic in tabs with
 disabled attribute (#2320)

* fix: fixes disabled tabs in preselect issue and adds preselected tab in tab-nav storybook
---
 .../src/components/tab-header/readme.md       |  7 ++-
 .../src/components/tab-header/tab-header.tsx  | 23 +++++---
 .../src/components/tab-nav/tab-nav.tsx        | 42 +++++++++-----
 packages/components/src/html/tab-nav.html     | 58 +++++++++++++++++++
 .../components/tab-navigation/ScaleTabNav.vue |  4 +-
 .../components/tab-navigation/TabHeader.vue   | 11 ++++
 .../tab-navigation/TabNav.stories.mdx         | 49 ++++++++++++++--
 7 files changed, 163 insertions(+), 31 deletions(-)
 create mode 100644 packages/components/src/html/tab-nav.html
 create mode 100644 packages/storybook-vue/stories/components/tab-navigation/TabHeader.vue

diff --git a/packages/components/src/components/tab-header/readme.md b/packages/components/src/components/tab-header/readme.md
index 34d7389ef8..d2a70cb660 100644
--- a/packages/components/src/components/tab-header/readme.md
+++ b/packages/components/src/components/tab-header/readme.md
@@ -18,9 +18,10 @@
 
 ## Events
 
-| Event          | Description | Type               |
-| -------------- | ----------- | ------------------ |
-| `scale-select` |             | `CustomEvent<any>` |
+| Event            | Description                                      | Type               |
+| ---------------- | ------------------------------------------------ | ------------------ |
+| `scale-disabled` | Emitted when currently selected tab got disabled | `CustomEvent<any>` |
+| `scale-select`   | Emitted on header select                         | `CustomEvent<any>` |
 
 
 ----------------------------------------------
diff --git a/packages/components/src/components/tab-header/tab-header.tsx b/packages/components/src/components/tab-header/tab-header.tsx
index 6102ce7f24..05eb9c772d 100644
--- a/packages/components/src/components/tab-header/tab-header.tsx
+++ b/packages/components/src/components/tab-header/tab-header.tsx
@@ -47,13 +47,16 @@ export class TabHeader {
   /** (optional) size  */
   @Prop() size?: 'small' | 'large' = 'small';
   /** (optional) Whether the tab is selected */
-  @Prop() selected?: boolean;
+  @Prop({ mutable: true }) selected?: boolean;
   /** (optional) Injected CSS styles */
   @Prop() styles?: string;
 
   @State() hasFocus: boolean = false;
 
+  /** Emitted on header select */
   @Event({ eventName: 'scale-select' }) scaleSelect: EventEmitter;
+  /** Emitted when currently selected tab got disabled */
+  @Event({ eventName: 'scale-disabled' }) scaleDisabled: EventEmitter;
 
   @Listen('click')
   handleClick(event: MouseEvent) {
@@ -61,28 +64,30 @@ export class TabHeader {
     if (this.disabled) {
       return;
     }
+    this.selected = true;
     this.scaleSelect.emit();
   }
 
   @Watch('selected')
   selectedChanged(newValue: boolean) {
-    if (!this.hostElement.isConnected) {
+    if (!this.hostElement.isConnected || this.disabled) {
       return;
     }
-    if (!this.disabled) {
-      if (newValue === true && this.tabsHaveFocus()) {
-        // Having focus on the host element, and not on inner elements,
-        // is required because screen readers.
-        this.hostElement.focus();
-      }
-      this.updateSlottedIcon();
+    if (newValue) {
+      this.scaleSelect.emit();
+    }
+    if (newValue && this.tabsHaveFocus()) {
+      // Having focus on the host element and not on inner elements is required because of screen readers
+      this.hostElement.focus();
     }
+    this.updateSlottedIcon();
   }
 
   @Watch('disabled')
   disabledChanged() {
     if (this.disabled) {
       this.selected = false;
+      this.scaleDisabled.emit();
     }
   }
 
diff --git a/packages/components/src/components/tab-nav/tab-nav.tsx b/packages/components/src/components/tab-nav/tab-nav.tsx
index 9c199f36db..6d4416e32a 100644
--- a/packages/components/src/components/tab-nav/tab-nav.tsx
+++ b/packages/components/src/components/tab-nav/tab-nav.tsx
@@ -42,9 +42,12 @@ export class TabNav {
   handleSelect(event) {
     const nextTab = event.target as HTMLScaleTabHeaderElement;
     // Act only if it's a direct child
-    if (this.getAllEnabledTabs().includes(nextTab) && !nextTab.disabled) {
-      this.selectTab(nextTab);
-    }
+    this.selectNextTab(nextTab);
+  }
+
+  @Listen('scale-disabled')
+  handleDisabledTabHeader() {
+    this.selectNextTab();
   }
 
   @Listen('keydown')
@@ -92,7 +95,7 @@ export class TabNav {
       customElements.whenDefined('scale-tab-header'),
       customElements.whenDefined('scale-tab-panel'),
     ]).then(() => {
-      this.linkPanels();
+      this.linkPanelsAndSelectTab();
       this.propagateSizeToTabs();
     });
 
@@ -144,24 +147,33 @@ export class TabNav {
     return tabs[tabs.length - 1];
   }
 
-  linkPanels() {
+  linkPanelsAndSelectTab() {
     const tabs = this.getAllTabs();
-    const selectedTab =
-      tabs.find((x) => x.selected) || tabs.filter((x) => !x.disabled)[0];
-
     tabs.forEach((tab) => {
       const panel = tab.nextElementSibling;
       tab.setAttribute('aria-controls', panel.id);
       panel.setAttribute('aria-labelledby', tab.id);
     });
-    this.selectTab(selectedTab);
+    this.selectNextTab();
   }
 
-  reset() {
+  selectNextTab(nextTab?: HTMLScaleTabHeaderElement): void {
+    const tabs = this.getAllTabs();
+    const tabToSelect =
+      (!nextTab?.disabled && nextTab) ||
+      tabs.find((tab) => tab.selected) ||
+      tabs.filter((tab) => !tab.disabled)[0];
+    this.selectTab(tabToSelect);
+  }
+
+  reset(nextTab?: HTMLScaleTabHeaderElement) {
     const tabs = this.getAllEnabledTabs();
+    tabs.forEach((tab) => {
+      if (tab !== nextTab) {
+        tab.selected = false;
+      }
+    });
     const panels = this.getAllPanels();
-
-    tabs.forEach((tab) => (tab.selected = false));
     panels.forEach((panel) => (panel.hidden = true));
   }
 
@@ -171,10 +183,12 @@ export class TabNav {
   }
 
   selectTab(nextTab: HTMLScaleTabHeaderElement) {
+    this.reset(nextTab);
+    if (!nextTab.selected) {
+      nextTab.selected = true;
+    }
     const nextPanel = this.findPanelForTab(nextTab);
-    this.reset();
     nextPanel.hidden = false;
-    nextTab.selected = true;
   }
 
   /**
diff --git a/packages/components/src/html/tab-nav.html b/packages/components/src/html/tab-nav.html
new file mode 100644
index 0000000000..781aa03b9f
--- /dev/null
+++ b/packages/components/src/html/tab-nav.html
@@ -0,0 +1,58 @@
+<!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-tab-nav>
+        <scale-tab-header slot="tab">General</scale-tab-header>
+        <scale-tab-panel slot="panel">
+          1 Freegan kinfolk farm-to-table humblebrag cred…
+        </scale-tab-panel>
+        <scale-tab-header slot="tab">Usage</scale-tab-header>
+        <scale-tab-panel slot="panel">
+          2 Bespoke austin pork belly yuccie pop-up. Before they sold out…
+        </scale-tab-panel>
+        <scale-tab-header slot="tab">Style</scale-tab-header>
+        <scale-tab-panel slot="panel">
+          3 Biodiesel chia af hoodie tumeric bespoke letterpress…
+        </scale-tab-panel>
+        <scale-tab-header slot="tab">Code</scale-tab-header>
+        <scale-tab-panel slot="panel">
+          4 Asymmetrical tattooed chia, banh mi blog microdosing…
+        </scale-tab-panel>
+      </scale-tab-nav>
+    </p>
+  </body>
+  <script>
+    setTimeout(() => {
+      let tabs = document.querySelectorAll('scale-tab-header');
+      tabs[0].disabled = true;
+    }, 2000);
+    setTimeout(() => {
+      let tabs = document.querySelectorAll('scale-tab-header');
+      tabs[3].selected = true;
+    }, 4000);
+  </script>
+</html>
diff --git a/packages/storybook-vue/stories/components/tab-navigation/ScaleTabNav.vue b/packages/storybook-vue/stories/components/tab-navigation/ScaleTabNav.vue
index 5459aa6c41..5313d2d49c 100644
--- a/packages/storybook-vue/stories/components/tab-navigation/ScaleTabNav.vue
+++ b/packages/storybook-vue/stories/components/tab-navigation/ScaleTabNav.vue
@@ -24,7 +24,7 @@
         bitters.
       </p>
     </scale-tab-panel>
-    <scale-tab-header slot="tab">
+    <scale-tab-header :selected="preselected ? true : false" slot="tab">
       <scale-icon-content-heart v-if="withIcon" /> Style
     </scale-tab-header>
     <scale-tab-panel slot="panel">
@@ -55,8 +55,10 @@ export default {
   props: {
     styles: { type: String },
     disabled: { type: Boolean, default: false },
+    preselected: { type: Boolean, default: false },
     withIcon: { type: Boolean, default: true },
     size: { type: String, default: 'small' },
+    small: { type: Boolean, default: false },
   },
 };
 </script>
diff --git a/packages/storybook-vue/stories/components/tab-navigation/TabHeader.vue b/packages/storybook-vue/stories/components/tab-navigation/TabHeader.vue
new file mode 100644
index 0000000000..cf8d656419
--- /dev/null
+++ b/packages/storybook-vue/stories/components/tab-navigation/TabHeader.vue
@@ -0,0 +1,11 @@
+<script>
+export default {
+  name: 'Tab Header',
+  props: {
+    styles: { type: String },
+    disabled: { type: Boolean, default: 'false' },
+    selected: { type: Boolean, default: 'false' },
+    size: { type: ['large', 'small'], default: 'small' },
+  },
+};
+</script>
diff --git a/packages/storybook-vue/stories/components/tab-navigation/TabNav.stories.mdx b/packages/storybook-vue/stories/components/tab-navigation/TabNav.stories.mdx
index 3a09963717..bc5660a73f 100644
--- a/packages/storybook-vue/stories/components/tab-navigation/TabNav.stories.mdx
+++ b/packages/storybook-vue/stories/components/tab-navigation/TabNav.stories.mdx
@@ -6,12 +6,13 @@ import {
   Description,
 } from '@storybook/addon-docs';
 import ScaleTabNav from './ScaleTabNav.vue';
+import TabHeader from './TabHeader.vue';
 import TabPanel from './TabPanel.vue';
 
 <Meta
   title="Components/Tab Navigation"
   component={ScaleTabNav}
-  subcomponents={{ 'Scale Tab Panel': TabPanel }}
+  subcomponents={{ 'Scale Tab Header': TabHeader, 'Scale Tab Panel': TabPanel }}
   argTypes={{
     styles: {
       table: {
@@ -34,6 +35,13 @@ import TabPanel from './TabPanel.vue';
       description: `(optional) DEPRECATED - size should replace small`,
       control: { type: null },
     },
+    preselected: {
+      table: {
+        disable: true,
+      },
+      description: '',
+      control: { type: null },
+    },
   }}
 />
 
@@ -41,7 +49,7 @@ export const Template = (args, { argTypes }) => ({
   components: { ScaleTabNav },
   props: ScaleTabNav.props,
   template: `
-    <scale-tab-nav :disabled="disabled ? true : false" :size="size" :with-icon="withIcon"></scale-tab-nav>
+    <scale-tab-nav :disabled="disabled ? true : false" :preselected="preselected ? true : false" :size="size" :with-icon="withIcon"></scale-tab-nav>
   `,
 });
 
@@ -123,8 +131,9 @@ export const Template = (args, { argTypes }) => ({
   --color-hover: var(--telekom-color-text-and-icon-primary-hovered);
   --color-active: var(--telekom-color-text-and-icon-primary-pressed);
   --color-selected: var(--telekom-color-text-and-icon-primary-standard);
-  --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
+    );
   --spacing-right-slotted: var(--telekom-spacing-composition-space-04);
   --color-disabled: var(--telekom-color-text-and-icon-disabled);
   --radius: var(--telekom-radius-standard);
@@ -200,6 +209,38 @@ For Shadow Parts, please inspect the element's #shadow.
 </scale-tab-nav>
 ```
 
+## Preselected Tab
+
+<Canvas withSource="none">
+  <Story
+    name="Preselected Tab"
+    args={{ preselected: true, withIcon: false, size: 'small' }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+```html
+<scale-tab-nav>
+  <scale-tab-header slot="tab">General</scale-tab-header>
+  <scale-tab-panel slot="panel">
+    Freegan kinfolk farm-to-table humblebrag cred…
+  </scale-tab-panel>
+  <scale-tab-header slot="tab">Usage</scale-tab-header>
+  <scale-tab-panel slot="panel">
+    Bespoke austin pork belly yuccie pop-up. Before they sold out…
+  </scale-tab-panel>
+  <scale-tab-header selected slot="tab">Style</scale-tab-header>
+  <scale-tab-panel slot="panel">
+    Biodiesel chia af hoodie tumeric bespoke letterpress…
+  </scale-tab-panel>
+  <scale-tab-header slot="tab">Code</scale-tab-header>
+  <scale-tab-panel slot="panel">
+    Asymmetrical tattooed chia, banh mi blog microdosing…
+  </scale-tab-panel>
+</scale-tab-nav>
+```
+
 ## Large, Text & Icon
 
 <Canvas withSource="none">

From 9b021511c94e29e9644680afcb15236b96ab35b5 Mon Sep 17 00:00:00 2001
From: Meridian <meridianpy@gmail.com>
Date: Wed, 6 Nov 2024 13:41:05 +0100
Subject: [PATCH 22/25] feat(accordion): allow collapsible to be individually
 expanded (#2263)

* feat: allow collapsible to be individually expanded

---------

Co-authored-by: Amir Baghdoust <baghdoust@gmail.com>
---
 packages/components/src/components/accordion/accordion.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/components/accordion/accordion.tsx b/packages/components/src/components/accordion/accordion.tsx
index 2c8d0d87a7..ea228f9fd0 100644
--- a/packages/components/src/components/accordion/accordion.tsx
+++ b/packages/components/src/components/accordion/accordion.tsx
@@ -66,7 +66,7 @@ export class Accordion {
     /**
      * Handle `expanded`
      */
-    if (!this.dependent) {
+    if (this.expanded && !this.dependent) {
       this.getCollapsibleChildren().forEach((child) => {
         child.expanded = this.expanded;
       });

From eeaecaf461f014fb57c4ad14e3f279640b777c5f Mon Sep 17 00:00:00 2001
From: Amir Baghdoust <baghdoust@gmail.com>
Date: Wed, 6 Nov 2024 16:12:00 +0100
Subject: [PATCH 23/25] feat(data-grid): add scale-selection event and enhance
 editable text field (#2362)

* feat(data-grid): add scale-selection event and enhance editable text cell properties

---------

Co-authored-by: Amir Ashkan Baghdoust <amir-ashkan.baghdoust@telekom.de>
---
 .../data-grid/cell-handlers/text-cell.tsx     |  2 +
 .../src/components/data-grid/data-grid.tsx    | 32 ++++++++++-----
 .../src/components/data-grid/readme.md        | 23 +++++++----
 packages/components/src/html/data-grid.html   | 40 ++++++++++++++++++-
 .../components/data-grid/DataGrid.stories.mdx | 14 ++++++-
 5 files changed, 90 insertions(+), 21 deletions(-)

diff --git a/packages/components/src/components/data-grid/cell-handlers/text-cell.tsx b/packages/components/src/components/data-grid/cell-handlers/text-cell.tsx
index fde8fd876b..c2720094f4 100644
--- a/packages/components/src/components/data-grid/cell-handlers/text-cell.tsx
+++ b/packages/components/src/components/data-grid/cell-handlers/text-cell.tsx
@@ -38,6 +38,7 @@ export const TextCell: Cell = {
       iconPrefix,
       iconSuffix,
       label,
+      textFieldProps = {},
     } = field;
 
     // Input component doesn't expand with content, so need to return a fake element that simulates width
@@ -52,6 +53,7 @@ export const TextCell: Cell = {
     if (editable) {
       const props = {
         type: 'text',
+        ...textFieldProps,
         value: content,
         label,
       } as any;
diff --git a/packages/components/src/components/data-grid/data-grid.tsx b/packages/components/src/components/data-grid/data-grid.tsx
index 166e26e5af..d4637a8ec1 100644
--- a/packages/components/src/components/data-grid/data-grid.tsx
+++ b/packages/components/src/components/data-grid/data-grid.tsx
@@ -102,7 +102,7 @@ export class DataGrid {
   /** (optional) Set to true to add selection column */
   @Prop() selectable?: boolean = false;
   /** Read-only selection array - populated with raw data from selected rows */
-  @Prop() selection: string[] = [];
+  @Prop({ mutable: true }) selection: any[] = [];
   /** (optional) Shade every second row darker */
   @Prop() shadeAlternate?: boolean = true;
   /** (optional) Injected css styles */
@@ -136,6 +136,9 @@ export class DataGrid {
   /** @deprecated in v3 in favor of kebab-case event names */
   @Event({ eventName: 'scaleSort' })
   scaleSortLegacy: EventEmitter<DataGridSortedEventDetail>;
+  /** Event triggered every time the selection list updates  */
+  @Event({ eventName: 'scale-selection' })
+  scaleSelection: EventEmitter<any[]>;
   /* 5. Private Properties (alphabetical) */
   /** Used to update column divider during interaction */
   private activeDivider: any;
@@ -221,6 +224,9 @@ export class DataGrid {
 
   @Watch('rows')
   rowsHandler() {
+    if (!this.rows) {
+      return;
+    }
     // Reset pagination to the last page of the new records if new records are less than previous.
     if (this.paginationStart > this.rows.length) {
       this.paginationStart =
@@ -249,7 +255,8 @@ export class DataGrid {
       this.sortTable(
         this.fields[this.activeSortingIndex].sortDirection,
         this.fields[this.activeSortingIndex].type,
-        this.activeSortingIndex
+        this.activeSortingIndex,
+        true
       );
     }
   }
@@ -399,14 +406,14 @@ export class DataGrid {
   }
 
   updateReadableSelection() {
-    this.selection.length = 0;
+    this.selection = [];
     this.rows.forEach((row) => row.selected && this.selection.push(row));
-
     // Check header checkbox if any or none are selected
     const selectAll = this.hostElement.shadowRoot.querySelector(
       '.thead__cell--selection scale-checkbox'
     ) as HTMLInputElement;
     selectAll.checked = !!this.selection.length;
+    emitEvent(this, 'scaleSelection', this.selection);
     // selectAll.indeterminate = !!this.selection.length;
   }
 
@@ -432,7 +439,7 @@ export class DataGrid {
     this.sortTable(newSortDirection, type, columnIndex);
   }
 
-  sortTable(sortDirection, type, columnIndex) {
+  sortTable(sortDirection, type, columnIndex, shouldTriggerEvent = true) {
     const format = this.fields[columnIndex].format;
     if (sortDirection === 'none') {
       this.rows.sort((a, b) => {
@@ -489,8 +496,10 @@ export class DataGrid {
       }
     }
     this.forceRender++;
-    // Trigger event
-    this.triggerSortEvent(sortDirection, type, columnIndex);
+    if (shouldTriggerEvent) {
+      // Trigger event
+      this.triggerSortEvent(sortDirection, type, columnIndex);
+    }
   }
 
   resetSortingToggle() {
@@ -514,7 +523,7 @@ export class DataGrid {
         : 'ascending';
     this.activeSortingIndex = columnIndex;
     this.fields[columnIndex].sortDirection = direction;
-    this.sortTable(direction, columnToPresort.type, columnIndex);
+    this.sortTable(direction, columnToPresort.type, columnIndex, false);
   }
 
   // Column resize handlers
@@ -947,6 +956,7 @@ export class DataGrid {
       <div
         ref={(el) => (this.elScrollContainer = el)}
         class={`${name}__scroll-container`}
+        part="scrollable"
         style={{ height: this.height || 'auto' }}
         onScroll={() => this.onTableScroll()}
       >
@@ -1024,7 +1034,7 @@ export class DataGrid {
         <tr class={`thead__row`}>
           {this.numbered && this.renderTableHeadNumberedCell()}
           {this.selectable && this.renderTableHeadSelectableCell()}
-          {this.fields.map(
+          {this.fields?.map(
             (
               {
                 type,
@@ -1165,7 +1175,7 @@ export class DataGrid {
           ref={(el) => (this.elToggleSelectAll = el)}
           onScaleChange={() => this.toggleSelectAll()}
           hideLabel={true}
-          aria-label="Select"
+          ariaLabelCheckbox="Select"
         ></scale-checkbox>
       </th>
     );
@@ -1384,7 +1394,7 @@ export class DataGrid {
       >
         {this.styles && <style>{this.styles}</style>}
         <div class={this.getCssClassMap()}>
-          <div class={`${name}__title-block`}>
+          <div class={`${name}__title-block`} part="title">
             {/* h4 tag + h5 styles feels weird, ideally one should be able to set the tag with an attribute */}
             {this.heading && (
               <h4 class={`${name}__heading scl-h5`}>{this.heading}</h4>
diff --git a/packages/components/src/components/data-grid/readme.md b/packages/components/src/components/data-grid/readme.md
index c0e86b7f4b..61a0ffd2d1 100644
--- a/packages/components/src/components/data-grid/readme.md
+++ b/packages/components/src/components/data-grid/readme.md
@@ -20,7 +20,7 @@
 | `pageSize`            | `page-size`             | (optional) Set number of rows to display per pagination page                                                                  | `number`                                                                                                        | `Infinity`                  |
 | `rows`                | `rows`                  | Input data array                                                                                                              | `any`                                                                                                           | `undefined`                 |
 | `selectable`          | `selectable`            | (optional) Set to true to add selection column                                                                                | `boolean`                                                                                                       | `false`                     |
-| `selection`           | --                      | Read-only selection array - populated with raw data from selected rows                                                        | `string[]`                                                                                                      | `[]`                        |
+| `selection`           | --                      | Read-only selection array - populated with raw data from selected rows                                                        | `any[]`                                                                                                         | `[]`                        |
 | `shadeAlternate`      | `shade-alternate`       | (optional) Shade every second row darker                                                                                      | `boolean`                                                                                                       | `true`                      |
 | `sortableColumnTitle` | `sortable-column-title` | (optional) Title for sortable columns                                                                                         | `string`                                                                                                        | `'Activate to sort column'` |
 | `styles`              | `styles`                | (optional) Injected css styles                                                                                                | `any`                                                                                                           | `undefined`                 |
@@ -29,12 +29,21 @@
 
 ## Events
 
-| Event        | Description                                                                                        | Type                                     |
-| ------------ | -------------------------------------------------------------------------------------------------- | ---------------------------------------- |
-| `scale-edit` | Event triggered every time the editable cells are changed, updating the original rows data         | `CustomEvent<DataGridEditEventDetail>`   |
-| `scale-sort` | Event triggered every time the data is sorted, changing original rows data                         | `CustomEvent<DataGridSortedEventDetail>` |
-| `scaleEdit`  | <span style="color:red">**[DEPRECATED]**</span> in v3 in favor of kebab-case event names<br/><br/> | `CustomEvent<DataGridEditEventDetail>`   |
-| `scaleSort`  | <span style="color:red">**[DEPRECATED]**</span> in v3 in favor of kebab-case event names<br/><br/> | `CustomEvent<DataGridSortedEventDetail>` |
+| Event             | Description                                                                                        | Type                                     |
+| ----------------- | -------------------------------------------------------------------------------------------------- | ---------------------------------------- |
+| `scale-edit`      | Event triggered every time the editable cells are changed, updating the original rows data         | `CustomEvent<DataGridEditEventDetail>`   |
+| `scale-selection` | Event triggered every time the selection list updates                                              | `CustomEvent<any[]>`                     |
+| `scale-sort`      | Event triggered every time the data is sorted, changing original rows data                         | `CustomEvent<DataGridSortedEventDetail>` |
+| `scaleEdit`       | <span style="color:red">**[DEPRECATED]**</span> in v3 in favor of kebab-case event names<br/><br/> | `CustomEvent<DataGridEditEventDetail>`   |
+| `scaleSort`       | <span style="color:red">**[DEPRECATED]**</span> in v3 in favor of kebab-case event names<br/><br/> | `CustomEvent<DataGridSortedEventDetail>` |
+
+
+## Shadow Parts
+
+| Part           | Description |
+| -------------- | ----------- |
+| `"scrollable"` |             |
+| `"title"`      |             |
 
 
 ## Dependencies
diff --git a/packages/components/src/html/data-grid.html b/packages/components/src/html/data-grid.html
index c2865806a4..36b48f64db 100644
--- a/packages/components/src/html/data-grid.html
+++ b/packages/components/src/html/data-grid.html
@@ -189,6 +189,16 @@
           style: 'switch',
           editable: true,
         },
+        {
+          type: 'text',
+          label: 'Nr-edit',
+          editable: true,
+          width: 60,
+          textFieldProps: {
+            type: 'number',
+            max: 2,
+          },
+        },
         {
           type: 'graph',
           label: 'Progress',
@@ -222,6 +232,7 @@
           '00:00:20',
           101045.0,
           false,
+          1,
           15,
           (() => {
             const demoNestedContent = document.createElement('div');
@@ -255,6 +266,7 @@
           '00:01:15',
           43.2,
           true,
+          2,
           73.2,
           (() => {
             const demoNestedContent = document.createElement('div');
@@ -288,6 +300,7 @@
           '00:00:20',
           102045.0,
           false,
+          3,
           15,
           (() => {
             const demoNestedContent = document.createElement('div');
@@ -326,6 +339,7 @@
           '00:01:15',
           45.2,
           true,
+          4,
           73.2,
           (() => {
             const demoNestedContent = document.createElement('div');
@@ -359,6 +373,7 @@
           '00:00:20',
           103045.0,
           false,
+          5,
           15,
           (() => {
             const demoNestedContent = document.createElement('div');
@@ -392,6 +407,7 @@
           '00:01:15',
           47.2,
           true,
+          6,
           73.2,
           (() => {
             const demoNestedContent = document.createElement('div');
@@ -425,6 +441,7 @@
           '00:00:20',
           105045.0,
           false,
+          7,
           15,
           (() => {
             const demoNestedContent = document.createElement('div');
@@ -458,6 +475,7 @@
           '00:01:15',
           48.2,
           true,
+          8,
           73.2,
           (() => {
             const demoNestedContent = document.createElement('div');
@@ -491,6 +509,7 @@
           '00:00:20',
           109045.0,
           false,
+          9,
           15,
           (() => {
             const demoNestedContent = document.createElement('div');
@@ -524,6 +543,7 @@
           '00:01:15',
           40.2,
           true,
+          10,
           73.2,
           (() => {
             const demoNestedContent = document.createElement('div');
@@ -557,6 +577,7 @@
           '00:00:20',
           108045.0,
           false,
+          11,
           15,
           (() => {
             const demoNestedContent = document.createElement('div');
@@ -590,6 +611,7 @@
           '00:01:15',
           43.2,
           true,
+          12,
           73.2,
           (() => {
             const demoNestedContent = document.createElement('div');
@@ -622,6 +644,7 @@
           '00:00:20',
           102045.0,
           false,
+          13,
           15,
           (() => {
             const demoNestedContent = document.createElement('div');
@@ -655,6 +678,7 @@
           '00:01:15',
           43.2,
           true,
+          14,
           73.2,
           (() => {
             const demoNestedContent = document.createElement('div');
@@ -689,6 +713,7 @@
           102045.0,
           false,
           15,
+          15,
           (() => {
             const demoNestedContent = document.createElement('div');
             demoNestedContent.innerHTML = `<scale-button href="https://example.com" target="_blank" title="External link, opens in new tab">
@@ -721,6 +746,7 @@
           '00:01:15',
           43.2,
           true,
+          16,
           73.2,
           (() => {
             const demoNestedContent = document.createElement('div');
@@ -754,6 +780,7 @@
           '00:00:20',
           102045.0,
           false,
+          17,
           15,
           (() => {
             const demoNestedContent = document.createElement('div');
@@ -787,6 +814,7 @@
           '00:01:15',
           43.2,
           true,
+          18,
           73.2,
           (() => {
             const demoNestedContent = document.createElement('div');
@@ -817,12 +845,20 @@
         select: 'SelectLoc',
         tableOptions: 'OptionsLoc',
         expand: 'Klicken Sie zu expanden',
-        collapse: 'Klicken Sie zu collapsen',
       };
 
       // Pass in data
       const table = document.querySelector('#table1');
-
+      document
+        .querySelector('scale-data-grid')
+        .addEventListener('scale-sort', ({ detail }) => {
+          console.log('sort', detail);
+        });
+      document
+        .querySelector('scale-data-grid')
+        .addEventListener('scale-selection', ({ detail }) => {
+          console.log('select', detail);
+        });
       table.fields = fields;
       table.rows = rows;
       table.localization = localization;
diff --git a/packages/storybook-vue/stories/components/data-grid/DataGrid.stories.mdx b/packages/storybook-vue/stories/components/data-grid/DataGrid.stories.mdx
index ac89b0897e..db35d26a9d 100644
--- a/packages/storybook-vue/stories/components/data-grid/DataGrid.stories.mdx
+++ b/packages/storybook-vue/stories/components/data-grid/DataGrid.stories.mdx
@@ -169,6 +169,14 @@ import ScaleDataGrid from './ScaleDataGrid.vue';
       description: `Event triggered every time the data is sorted, changing original rows data`,
       control: { type: null },
     },
+    eventScaleSelection: {
+      name: '[event] scale-selection',
+      table: {
+        type: { summary: 'event' },
+      },
+      description: `Event triggered every time the selection list updates`,
+      control: { type: null },
+    },
     slotMenu: {
       name: '[slot] menu',
       table: {
@@ -740,8 +748,12 @@ Expected format: unformatted `string`, eg `'this is a string'`
 - `iconPrefix?: scale-icon-string (eg 'action-download')`
 - `iconSuffix?: scale-icon-string (eg 'action-download')`
 - `editable?: boolean = false`
+- `textFieldProps?: Object (eg { type: 'number', helperText: 'Enter a number' })`
 
-<Canvas withSource="close">
+
+ If `editable` is set to `true`, a `scale-text-field` is used for the element. The properties of the `scale-text-field` can be passed directly to the editable component using the `textFieldProps` attribute.
+ and if the `editable` is set to `false`, the `textFieldProps` has no effect, as the cell will be read-only.
+ <Canvas withSource="close">
   <Story name="Text Cell">
     {`<content>
     <scale-data-grid id="text-example" hide-menu></scale-data-grid>

From 9ad38f7a2b749059f8dbc912ecb59381375b07fc Mon Sep 17 00:00:00 2001
From: Amir Ashkan Baghdoust <amir-ashkan.baghdoust@telekom.de>
Date: Wed, 6 Nov 2024 16:15:18 +0100
Subject: [PATCH 24/25] chore(release): publish

---
 CHANGELOG.md                             | 26 ++++++++++++++++++++++++
 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         | 26 ++++++++++++++++++++++++
 packages/components/package.json         |  2 +-
 packages/design-tokens/CHANGELOG.md      |  9 ++++++++
 packages/design-tokens/package.json      |  2 +-
 packages/storybook-vue/CHANGELOG.md      | 19 +++++++++++++++++
 packages/storybook-vue/package.json      |  6 +++---
 packages/visual-tests/CHANGELOG.md       |  9 ++++++++
 packages/visual-tests/package.json       |  2 +-
 16 files changed, 126 insertions(+), 10 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6b9af1d47c..c9d3d79f35 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,32 @@
 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.154](https://github.com/amir-ba/scale/compare/v3.0.0-beta.152...v3.0.0-beta.154) (2024-11-06)
+
+
+### Bug Fixes
+
+* **button:** Include name and value properties on temporary submit button ([#2351](https://github.com/amir-ba/scale/issues/2351)) ([e0ff157](https://github.com/amir-ba/scale/commit/e0ff15764128fecc0a643d14e1ee01f64ab67d0f))
+* **data-grid:** imporves pagination with 0 elements ([#2316](https://github.com/amir-ba/scale/issues/2316)) ([42a3b36](https://github.com/amir-ba/scale/commit/42a3b3699df5b361b63fc9c466461e2af61d67ed))
+* **nav-item:** hover underline on function slots ([#2260](https://github.com/amir-ba/scale/issues/2260)) ([6e8c380](https://github.com/amir-ba/scale/commit/6e8c38027a861babd28e8925dcc5db1c87a4b05d))
+* **segment:** improves loading of the component and solves nested elemnts sizing issue ([#2358](https://github.com/amir-ba/scale/issues/2358)) ([299be7d](https://github.com/amir-ba/scale/commit/299be7d00122ed34fcde07cff9e288e291e33318))
+* **tab-nav:** fixes preselect logic in tabs with disabled attribute ([#2320](https://github.com/amir-ba/scale/issues/2320)) ([bd30a6f](https://github.com/amir-ba/scale/commit/bd30a6f2a187976ae85234b5f526537f68b3ea80))
+* dropdown scroll fixed ([#2333](https://github.com/amir-ba/scale/issues/2333)) ([592c69d](https://github.com/amir-ba/scale/commit/592c69d00e4a50f7113973bc583dff19f1cc8979))
+
+
+### Features
+
+* **accordion:** allow collapsible to be individually expanded ([#2263](https://github.com/amir-ba/scale/issues/2263)) ([9b02151](https://github.com/amir-ba/scale/commit/9b021511c94e29e9644680afcb15236b96ab35b5))
+* **data-grid:** add scale-selection event and enhance editable text field ([#2362](https://github.com/amir-ba/scale/issues/2362)) ([eeaecaf](https://github.com/amir-ba/scale/commit/eeaecaf461f014fb57c4ad14e3f279640b777c5f))
+* aria-details added to all input types ([#2359](https://github.com/amir-ba/scale/issues/2359)) ([4c45650](https://github.com/amir-ba/scale/commit/4c45650e14eff01ef42525f08ba27c1c7b0f2109))
+* **data-grid:** added tooltip and scale-icon in data-grid action cell  ([#2308](https://github.com/amir-ba/scale/issues/2308)) ([30a0ce5](https://github.com/amir-ba/scale/commit/30a0ce5bdb8ca13d0c6a067894a0ee4aef6dd98b))
+* **data-grid:** adds presort to grid ([#2335](https://github.com/amir-ba/scale/issues/2335)) ([f657202](https://github.com/amir-ba/scale/commit/f6572021489ae07914dbbb6d31cb0aa2d20ea74c))
+
+
+
+
+
+
 # [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)
 
 
diff --git a/lerna.json b/lerna.json
index 38d3ad7c17..4715d803df 100644
--- a/lerna.json
+++ b/lerna.json
@@ -7,7 +7,7 @@
     "--pure-lockfile"
   ],
   "useWorkspaces": true,
-  "version": "3.0.0-beta.153",
+  "version": "3.0.0-beta.154",
   "command": {
     "version": {
       "allowBranch": "main"
diff --git a/packages/components-angular/CHANGELOG.md b/packages/components-angular/CHANGELOG.md
index 45a1eb8e10..09d006c99a 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.154](https://github.com/telekom/scale/compare/v3.0.0-beta.152...v3.0.0-beta.154) (2024-11-06)
+
+**Note:** Version bump only for package @telekom/scale-components-angular
+
+
+
+
+
+
 # [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
diff --git a/packages/components-angular/package.json b/packages/components-angular/package.json
index 269663bb4f..579ce4ea1f 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.153",
+  "version": "3.0.0-beta.154",
   "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 0bfd4a4b1c..ea74e3edcf 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.154](https://github.com/telekom/scale/compare/v3.0.0-beta.152...v3.0.0-beta.154) (2024-11-06)
+
+**Note:** Version bump only for package @telekom/scale-components-react
+
+
+
+
+
+
 # [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
diff --git a/packages/components-react/package.json b/packages/components-react/package.json
index 9f39f66adc..e33d80ebe6 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.153",
+  "version": "3.0.0-beta.154",
   "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 65bb314256..99547288dd 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.154](https://github.com/telekom/scale/compare/v3.0.0-beta.152...v3.0.0-beta.154) (2024-11-06)
+
+**Note:** Version bump only for package @telekom/scale-components-vue
+
+
+
+
+
+
 # [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
diff --git a/packages/components-vue/package.json b/packages/components-vue/package.json
index 55cbc57931..e7fc109275 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.153",
+  "version": "3.0.0-beta.154",
   "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 3d48d3c1ca..e3fe456044 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -3,6 +3,32 @@
 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.154](https://github.com/telekom/scale/compare/v3.0.0-beta.152...v3.0.0-beta.154) (2024-11-06)
+
+
+### Bug Fixes
+
+* **button:** Include name and value properties on temporary submit button ([#2351](https://github.com/telekom/scale/issues/2351)) ([e0ff157](https://github.com/telekom/scale/commit/e0ff15764128fecc0a643d14e1ee01f64ab67d0f))
+* **data-grid:** imporves pagination with 0 elements ([#2316](https://github.com/telekom/scale/issues/2316)) ([42a3b36](https://github.com/telekom/scale/commit/42a3b3699df5b361b63fc9c466461e2af61d67ed))
+* **nav-item:** hover underline on function slots ([#2260](https://github.com/telekom/scale/issues/2260)) ([6e8c380](https://github.com/telekom/scale/commit/6e8c38027a861babd28e8925dcc5db1c87a4b05d))
+* **segment:** improves loading of the component and solves nested elemnts sizing issue ([#2358](https://github.com/telekom/scale/issues/2358)) ([299be7d](https://github.com/telekom/scale/commit/299be7d00122ed34fcde07cff9e288e291e33318))
+* **tab-nav:** fixes preselect logic in tabs with disabled attribute ([#2320](https://github.com/telekom/scale/issues/2320)) ([bd30a6f](https://github.com/telekom/scale/commit/bd30a6f2a187976ae85234b5f526537f68b3ea80))
+* dropdown scroll fixed ([#2333](https://github.com/telekom/scale/issues/2333)) ([592c69d](https://github.com/telekom/scale/commit/592c69d00e4a50f7113973bc583dff19f1cc8979))
+
+
+### Features
+
+* **accordion:** allow collapsible to be individually expanded ([#2263](https://github.com/telekom/scale/issues/2263)) ([9b02151](https://github.com/telekom/scale/commit/9b021511c94e29e9644680afcb15236b96ab35b5))
+* **data-grid:** add scale-selection event and enhance editable text field ([#2362](https://github.com/telekom/scale/issues/2362)) ([eeaecaf](https://github.com/telekom/scale/commit/eeaecaf461f014fb57c4ad14e3f279640b777c5f))
+* aria-details added to all input types ([#2359](https://github.com/telekom/scale/issues/2359)) ([4c45650](https://github.com/telekom/scale/commit/4c45650e14eff01ef42525f08ba27c1c7b0f2109))
+* **data-grid:** added tooltip and scale-icon in data-grid action cell  ([#2308](https://github.com/telekom/scale/issues/2308)) ([30a0ce5](https://github.com/telekom/scale/commit/30a0ce5bdb8ca13d0c6a067894a0ee4aef6dd98b))
+* **data-grid:** adds presort to grid ([#2335](https://github.com/telekom/scale/issues/2335)) ([f657202](https://github.com/telekom/scale/commit/f6572021489ae07914dbbb6d31cb0aa2d20ea74c))
+
+
+
+
+
+
 # [3.0.0-beta.153](https://github.com/telekom/scale/compare/v3.0.0-beta.152...v3.0.0-beta.153) (2024-09-19)
 
 
diff --git a/packages/components/package.json b/packages/components/package.json
index c014e2b82f..5ab2660dd9 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@telekom/scale-components",
-  "version": "3.0.0-beta.153",
+  "version": "3.0.0-beta.154",
   "description": "Scale is the digital design system for Telekom products and experiences.",
   "homepage": "https://github.com/telekom/scale",
   "repository": {
diff --git a/packages/design-tokens/CHANGELOG.md b/packages/design-tokens/CHANGELOG.md
index b1f3cb2653..25682a59b5 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.154](https://github.com/telekom/scale/compare/v3.0.0-beta.152...v3.0.0-beta.154) (2024-11-06)
+
+**Note:** Version bump only for package @telekom/scale-design-tokens
+
+
+
+
+
+
 # [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
diff --git a/packages/design-tokens/package.json b/packages/design-tokens/package.json
index e8f5098ba9..78abee5353 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.153",
+  "version": "3.0.0-beta.154",
   "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 902dc2e621..dc9a575594 100644
--- a/packages/storybook-vue/CHANGELOG.md
+++ b/packages/storybook-vue/CHANGELOG.md
@@ -3,6 +3,25 @@
 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.154](https://github.com/amir-ba/scale/compare/v3.0.0-beta.152...v3.0.0-beta.154) (2024-11-06)
+
+
+### Bug Fixes
+
+* **tab-nav:** fixes preselect logic in tabs with disabled attribute ([#2320](https://github.com/amir-ba/scale/issues/2320)) ([bd30a6f](https://github.com/amir-ba/scale/commit/bd30a6f2a187976ae85234b5f526537f68b3ea80))
+
+
+### Features
+
+* **data-grid:** add scale-selection event and enhance editable text field ([#2362](https://github.com/amir-ba/scale/issues/2362)) ([eeaecaf](https://github.com/amir-ba/scale/commit/eeaecaf461f014fb57c4ad14e3f279640b777c5f))
+* aria-details added to all input types ([#2359](https://github.com/amir-ba/scale/issues/2359)) ([4c45650](https://github.com/amir-ba/scale/commit/4c45650e14eff01ef42525f08ba27c1c7b0f2109))
+* **data-grid:** adds presort to grid ([#2335](https://github.com/amir-ba/scale/issues/2335)) ([f657202](https://github.com/amir-ba/scale/commit/f6572021489ae07914dbbb6d31cb0aa2d20ea74c))
+
+
+
+
+
+
 # [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
diff --git a/packages/storybook-vue/package.json b/packages/storybook-vue/package.json
index cd29504581..a87631faaf 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.153",
+  "version": "3.0.0-beta.154",
   "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.153",
-    "@telekom/scale-components-vue": "^3.0.0-beta.153"
+    "@telekom/scale-components": "^3.0.0-beta.154",
+    "@telekom/scale-components-vue": "^3.0.0-beta.154"
   },
   "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/visual-tests/CHANGELOG.md b/packages/visual-tests/CHANGELOG.md
index c9f0645a23..a9e48e8479 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.154](https://github.com/amir-ba/scale/compare/v3.0.0-beta.152...v3.0.0-beta.154) (2024-11-06)
+
+**Note:** Version bump only for package @telekom/scale-visual-tests
+
+
+
+
+
+
 # [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
diff --git a/packages/visual-tests/package.json b/packages/visual-tests/package.json
index 295e79fba9..7b35faa26a 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.153",
+  "version": "3.0.0-beta.154",
   "main": "index.js",
   "license": "MPL-2.0",
   "scripts": {

From 1ec47c8964ad2e75aaa1eb511fef86056a512678 Mon Sep 17 00:00:00 2001
From: Amir Baghdoust <baghdoust@gmail.com>
Date: Wed, 6 Nov 2024 16:26:33 +0100
Subject: [PATCH 25/25] chore(release): publish (#2365)

Co-authored-by: Amir Ashkan Baghdoust <amir-ashkan.baghdoust@telekom.de>
---
 CHANGELOG.md                             | 26 ++++++++++++++++++++++++
 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         | 26 ++++++++++++++++++++++++
 packages/components/package.json         |  2 +-
 packages/design-tokens/CHANGELOG.md      |  9 ++++++++
 packages/design-tokens/package.json      |  2 +-
 packages/storybook-vue/CHANGELOG.md      | 19 +++++++++++++++++
 packages/storybook-vue/package.json      |  6 +++---
 packages/visual-tests/CHANGELOG.md       |  9 ++++++++
 packages/visual-tests/package.json       |  2 +-
 16 files changed, 126 insertions(+), 10 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6b9af1d47c..c9d3d79f35 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,32 @@
 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.154](https://github.com/amir-ba/scale/compare/v3.0.0-beta.152...v3.0.0-beta.154) (2024-11-06)
+
+
+### Bug Fixes
+
+* **button:** Include name and value properties on temporary submit button ([#2351](https://github.com/amir-ba/scale/issues/2351)) ([e0ff157](https://github.com/amir-ba/scale/commit/e0ff15764128fecc0a643d14e1ee01f64ab67d0f))
+* **data-grid:** imporves pagination with 0 elements ([#2316](https://github.com/amir-ba/scale/issues/2316)) ([42a3b36](https://github.com/amir-ba/scale/commit/42a3b3699df5b361b63fc9c466461e2af61d67ed))
+* **nav-item:** hover underline on function slots ([#2260](https://github.com/amir-ba/scale/issues/2260)) ([6e8c380](https://github.com/amir-ba/scale/commit/6e8c38027a861babd28e8925dcc5db1c87a4b05d))
+* **segment:** improves loading of the component and solves nested elemnts sizing issue ([#2358](https://github.com/amir-ba/scale/issues/2358)) ([299be7d](https://github.com/amir-ba/scale/commit/299be7d00122ed34fcde07cff9e288e291e33318))
+* **tab-nav:** fixes preselect logic in tabs with disabled attribute ([#2320](https://github.com/amir-ba/scale/issues/2320)) ([bd30a6f](https://github.com/amir-ba/scale/commit/bd30a6f2a187976ae85234b5f526537f68b3ea80))
+* dropdown scroll fixed ([#2333](https://github.com/amir-ba/scale/issues/2333)) ([592c69d](https://github.com/amir-ba/scale/commit/592c69d00e4a50f7113973bc583dff19f1cc8979))
+
+
+### Features
+
+* **accordion:** allow collapsible to be individually expanded ([#2263](https://github.com/amir-ba/scale/issues/2263)) ([9b02151](https://github.com/amir-ba/scale/commit/9b021511c94e29e9644680afcb15236b96ab35b5))
+* **data-grid:** add scale-selection event and enhance editable text field ([#2362](https://github.com/amir-ba/scale/issues/2362)) ([eeaecaf](https://github.com/amir-ba/scale/commit/eeaecaf461f014fb57c4ad14e3f279640b777c5f))
+* aria-details added to all input types ([#2359](https://github.com/amir-ba/scale/issues/2359)) ([4c45650](https://github.com/amir-ba/scale/commit/4c45650e14eff01ef42525f08ba27c1c7b0f2109))
+* **data-grid:** added tooltip and scale-icon in data-grid action cell  ([#2308](https://github.com/amir-ba/scale/issues/2308)) ([30a0ce5](https://github.com/amir-ba/scale/commit/30a0ce5bdb8ca13d0c6a067894a0ee4aef6dd98b))
+* **data-grid:** adds presort to grid ([#2335](https://github.com/amir-ba/scale/issues/2335)) ([f657202](https://github.com/amir-ba/scale/commit/f6572021489ae07914dbbb6d31cb0aa2d20ea74c))
+
+
+
+
+
+
 # [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)
 
 
diff --git a/lerna.json b/lerna.json
index 38d3ad7c17..4715d803df 100644
--- a/lerna.json
+++ b/lerna.json
@@ -7,7 +7,7 @@
     "--pure-lockfile"
   ],
   "useWorkspaces": true,
-  "version": "3.0.0-beta.153",
+  "version": "3.0.0-beta.154",
   "command": {
     "version": {
       "allowBranch": "main"
diff --git a/packages/components-angular/CHANGELOG.md b/packages/components-angular/CHANGELOG.md
index 45a1eb8e10..09d006c99a 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.154](https://github.com/telekom/scale/compare/v3.0.0-beta.152...v3.0.0-beta.154) (2024-11-06)
+
+**Note:** Version bump only for package @telekom/scale-components-angular
+
+
+
+
+
+
 # [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
diff --git a/packages/components-angular/package.json b/packages/components-angular/package.json
index 269663bb4f..579ce4ea1f 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.153",
+  "version": "3.0.0-beta.154",
   "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 0bfd4a4b1c..ea74e3edcf 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.154](https://github.com/telekom/scale/compare/v3.0.0-beta.152...v3.0.0-beta.154) (2024-11-06)
+
+**Note:** Version bump only for package @telekom/scale-components-react
+
+
+
+
+
+
 # [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
diff --git a/packages/components-react/package.json b/packages/components-react/package.json
index 9f39f66adc..e33d80ebe6 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.153",
+  "version": "3.0.0-beta.154",
   "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 65bb314256..99547288dd 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.154](https://github.com/telekom/scale/compare/v3.0.0-beta.152...v3.0.0-beta.154) (2024-11-06)
+
+**Note:** Version bump only for package @telekom/scale-components-vue
+
+
+
+
+
+
 # [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
diff --git a/packages/components-vue/package.json b/packages/components-vue/package.json
index 55cbc57931..e7fc109275 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.153",
+  "version": "3.0.0-beta.154",
   "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 3d48d3c1ca..e3fe456044 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -3,6 +3,32 @@
 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.154](https://github.com/telekom/scale/compare/v3.0.0-beta.152...v3.0.0-beta.154) (2024-11-06)
+
+
+### Bug Fixes
+
+* **button:** Include name and value properties on temporary submit button ([#2351](https://github.com/telekom/scale/issues/2351)) ([e0ff157](https://github.com/telekom/scale/commit/e0ff15764128fecc0a643d14e1ee01f64ab67d0f))
+* **data-grid:** imporves pagination with 0 elements ([#2316](https://github.com/telekom/scale/issues/2316)) ([42a3b36](https://github.com/telekom/scale/commit/42a3b3699df5b361b63fc9c466461e2af61d67ed))
+* **nav-item:** hover underline on function slots ([#2260](https://github.com/telekom/scale/issues/2260)) ([6e8c380](https://github.com/telekom/scale/commit/6e8c38027a861babd28e8925dcc5db1c87a4b05d))
+* **segment:** improves loading of the component and solves nested elemnts sizing issue ([#2358](https://github.com/telekom/scale/issues/2358)) ([299be7d](https://github.com/telekom/scale/commit/299be7d00122ed34fcde07cff9e288e291e33318))
+* **tab-nav:** fixes preselect logic in tabs with disabled attribute ([#2320](https://github.com/telekom/scale/issues/2320)) ([bd30a6f](https://github.com/telekom/scale/commit/bd30a6f2a187976ae85234b5f526537f68b3ea80))
+* dropdown scroll fixed ([#2333](https://github.com/telekom/scale/issues/2333)) ([592c69d](https://github.com/telekom/scale/commit/592c69d00e4a50f7113973bc583dff19f1cc8979))
+
+
+### Features
+
+* **accordion:** allow collapsible to be individually expanded ([#2263](https://github.com/telekom/scale/issues/2263)) ([9b02151](https://github.com/telekom/scale/commit/9b021511c94e29e9644680afcb15236b96ab35b5))
+* **data-grid:** add scale-selection event and enhance editable text field ([#2362](https://github.com/telekom/scale/issues/2362)) ([eeaecaf](https://github.com/telekom/scale/commit/eeaecaf461f014fb57c4ad14e3f279640b777c5f))
+* aria-details added to all input types ([#2359](https://github.com/telekom/scale/issues/2359)) ([4c45650](https://github.com/telekom/scale/commit/4c45650e14eff01ef42525f08ba27c1c7b0f2109))
+* **data-grid:** added tooltip and scale-icon in data-grid action cell  ([#2308](https://github.com/telekom/scale/issues/2308)) ([30a0ce5](https://github.com/telekom/scale/commit/30a0ce5bdb8ca13d0c6a067894a0ee4aef6dd98b))
+* **data-grid:** adds presort to grid ([#2335](https://github.com/telekom/scale/issues/2335)) ([f657202](https://github.com/telekom/scale/commit/f6572021489ae07914dbbb6d31cb0aa2d20ea74c))
+
+
+
+
+
+
 # [3.0.0-beta.153](https://github.com/telekom/scale/compare/v3.0.0-beta.152...v3.0.0-beta.153) (2024-09-19)
 
 
diff --git a/packages/components/package.json b/packages/components/package.json
index c014e2b82f..5ab2660dd9 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@telekom/scale-components",
-  "version": "3.0.0-beta.153",
+  "version": "3.0.0-beta.154",
   "description": "Scale is the digital design system for Telekom products and experiences.",
   "homepage": "https://github.com/telekom/scale",
   "repository": {
diff --git a/packages/design-tokens/CHANGELOG.md b/packages/design-tokens/CHANGELOG.md
index b1f3cb2653..25682a59b5 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.154](https://github.com/telekom/scale/compare/v3.0.0-beta.152...v3.0.0-beta.154) (2024-11-06)
+
+**Note:** Version bump only for package @telekom/scale-design-tokens
+
+
+
+
+
+
 # [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
diff --git a/packages/design-tokens/package.json b/packages/design-tokens/package.json
index e8f5098ba9..78abee5353 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.153",
+  "version": "3.0.0-beta.154",
   "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 902dc2e621..dc9a575594 100644
--- a/packages/storybook-vue/CHANGELOG.md
+++ b/packages/storybook-vue/CHANGELOG.md
@@ -3,6 +3,25 @@
 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.154](https://github.com/amir-ba/scale/compare/v3.0.0-beta.152...v3.0.0-beta.154) (2024-11-06)
+
+
+### Bug Fixes
+
+* **tab-nav:** fixes preselect logic in tabs with disabled attribute ([#2320](https://github.com/amir-ba/scale/issues/2320)) ([bd30a6f](https://github.com/amir-ba/scale/commit/bd30a6f2a187976ae85234b5f526537f68b3ea80))
+
+
+### Features
+
+* **data-grid:** add scale-selection event and enhance editable text field ([#2362](https://github.com/amir-ba/scale/issues/2362)) ([eeaecaf](https://github.com/amir-ba/scale/commit/eeaecaf461f014fb57c4ad14e3f279640b777c5f))
+* aria-details added to all input types ([#2359](https://github.com/amir-ba/scale/issues/2359)) ([4c45650](https://github.com/amir-ba/scale/commit/4c45650e14eff01ef42525f08ba27c1c7b0f2109))
+* **data-grid:** adds presort to grid ([#2335](https://github.com/amir-ba/scale/issues/2335)) ([f657202](https://github.com/amir-ba/scale/commit/f6572021489ae07914dbbb6d31cb0aa2d20ea74c))
+
+
+
+
+
+
 # [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
diff --git a/packages/storybook-vue/package.json b/packages/storybook-vue/package.json
index cd29504581..a87631faaf 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.153",
+  "version": "3.0.0-beta.154",
   "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.153",
-    "@telekom/scale-components-vue": "^3.0.0-beta.153"
+    "@telekom/scale-components": "^3.0.0-beta.154",
+    "@telekom/scale-components-vue": "^3.0.0-beta.154"
   },
   "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/visual-tests/CHANGELOG.md b/packages/visual-tests/CHANGELOG.md
index c9f0645a23..a9e48e8479 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.154](https://github.com/amir-ba/scale/compare/v3.0.0-beta.152...v3.0.0-beta.154) (2024-11-06)
+
+**Note:** Version bump only for package @telekom/scale-visual-tests
+
+
+
+
+
+
 # [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
diff --git a/packages/visual-tests/package.json b/packages/visual-tests/package.json
index 295e79fba9..7b35faa26a 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.153",
+  "version": "3.0.0-beta.154",
   "main": "index.js",
   "license": "MPL-2.0",
   "scripts": {