From 3daaf2c83d7dff92315ccdec3fc9cfde6f444b9d Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Fri, 3 Nov 2023 22:24:10 +0100
Subject: [PATCH 01/14] feat: added possibility to visually hide the label
 #1932

---
 .../src/components/db-checkbox/db-checkbox.tsx      | 13 +++++++++++--
 .../src/components/db-checkbox/readme.md            |  2 +-
 .../stories/db-checkbox.intro.stories.mdx           | 12 ++++++++++++
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/packages/db-ui-elements-stencil/src/components/db-checkbox/db-checkbox.tsx b/packages/db-ui-elements-stencil/src/components/db-checkbox/db-checkbox.tsx
index ea7d970b2b..0980f8990c 100644
--- a/packages/db-ui-elements-stencil/src/components/db-checkbox/db-checkbox.tsx
+++ b/packages/db-ui-elements-stencil/src/components/db-checkbox/db-checkbox.tsx
@@ -52,10 +52,15 @@ export class DbCheckbox {
   @Prop({ reflect: true }) value: string;
 
   /**
-   * The indeterminate attribute is a boolean attribute. When specified, the element is is displayed in an indeterminate state (neither checked, nor unchecked).
+   * The indeterminate attribute is a boolean attribute. When specified, the element is displayed in an indeterminate state (neither checked, nor unchecked).
    */
   @Prop({ reflect: false }) indeterminate: boolean;
 
+  /**
+   * The label-hidden attribute is a boolean attribute. When specified, the elements label visually hidden (it's important to still keep it displayed for accessibility reasons).
+   */
+  @Prop({ reflect: false }) labelHidden: boolean;
+
   /**
    * Method that acceps a boolean and sets the indeterminate state of the checkbox accordingly.
    */
@@ -91,7 +96,11 @@ export class DbCheckbox {
           onChange={(event) => this.handleChange(event)}
         />
 
-        <label class="elm-label" htmlFor={this.input_id}>
+        <label
+          class="elm-label"
+          htmlFor={this.input_id}
+          data-hidden-label={this.labelHidden}
+        >
           {this.label}
         </label>
       </Host>
diff --git a/packages/db-ui-elements-stencil/src/components/db-checkbox/readme.md b/packages/db-ui-elements-stencil/src/components/db-checkbox/readme.md
index a37ae6d21c..5debc5fbb0 100644
--- a/packages/db-ui-elements-stencil/src/components/db-checkbox/readme.md
+++ b/packages/db-ui-elements-stencil/src/components/db-checkbox/readme.md
@@ -12,7 +12,7 @@
 | `autofocus`          | `autofocus`     | The autofocus content attribute allows the author to indicate that a control is to be focused as soon as the page is loaded, allowing the user to just start typing without having to manually focus the main control.                                        | `boolean` | `undefined`            |
 | `checked`            | `checked`       | The checked content attribute is a boolean attribute that gives the default checkedness of the input element.                                                                                                                                                 | `boolean` | `undefined`            |
 | `disabled`           | `disabled`      | The disabled attribute can be set to keep a user from clicking on the input.                                                                                                                                                                                  | `boolean` | `undefined`            |
-| `indeterminate`      | `indeterminate` | The indeterminate attribute is a boolean attribute. When specified, the element is is displayed in an indeterminate state (neither checked, nor unchecked).                                                                                                   | `boolean` | `undefined`            |
+| `indeterminate`      | `indeterminate` | The indeterminate attribute is a boolean attribute. When specified, the element is displayed in an indeterminate state (neither checked, nor unchecked).                                                                                                   | `boolean` | `undefined`            |
 | `input_id`           | `input_id`      | The input_id of a labelable form-related element in the same document as the label element. The first element in the document with an id matching the value of the for attribute is the labeled control for this label element, if it is a labelable element. | `string`  | `'checkbox-' + uuid()` |
 | `label` _(required)_ | `label`         | The label attribute specifies the caption of the input.                                                                                                                                                                                                       | `string`  | `undefined`            |
 | `name` _(required)_  | `name`          | The name content attribute gives the name of the form control, as used in form submission and in the form element's elements object. If the attribute is specified, its value must not be the empty string.                                                   | `string`  | `undefined`            |
diff --git a/packages/db-ui-elements-stencil/src/components/db-checkbox/stories/db-checkbox.intro.stories.mdx b/packages/db-ui-elements-stencil/src/components/db-checkbox/stories/db-checkbox.intro.stories.mdx
index fef7741a88..1f9e28062c 100644
--- a/packages/db-ui-elements-stencil/src/components/db-checkbox/stories/db-checkbox.intro.stories.mdx
+++ b/packages/db-ui-elements-stencil/src/components/db-checkbox/stories/db-checkbox.intro.stories.mdx
@@ -31,4 +31,16 @@ Make checkbox look like in an indeterminate state by adding the 'indeterminate'
 
 Alternatively, one can directly call `<db-checkbox>.setIndeterminate(boolean)` on the web component to set the state indeterminate state of the checkbox via JavaScript.
 
+<db-headline variant="2">visually hide the label</db-headline>
+
+> A label for a form control helps everyone better understand its purpose. In some cases, the purpose may be clear enough from the context when the content is rendered visually. The label can be hidden visually, though it still needs to be provided within the code to support other forms of presentation and interaction, such as for screen reader and speech input users.
+
+source: <https://www.w3.org/WAI/tutorials/forms/labels/#hiding-label-text>
+
+You could set the attribute `label-hidden="true"` for the rare case that you would want to visually hide the textual label for a textarea element.
+
+<Canvas>
+<db-checkbox label="Checkbox" name="checkbox-name" label-hidden="true"></db-checkbox>
+</Canvas>
+
 <Readme />

From 2d1e79ff6d55a68fb98bab203038e49d533ed92f Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com>
Date: Thu, 30 Nov 2023 12:07:28 +0100
Subject: [PATCH 02/14] Update db-checkbox.tsx

---
 .../src/components/db-checkbox/db-checkbox.tsx                  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/db-ui-elements-stencil/src/components/db-checkbox/db-checkbox.tsx b/packages/db-ui-elements-stencil/src/components/db-checkbox/db-checkbox.tsx
index 0980f8990c..9e343db5ca 100644
--- a/packages/db-ui-elements-stencil/src/components/db-checkbox/db-checkbox.tsx
+++ b/packages/db-ui-elements-stencil/src/components/db-checkbox/db-checkbox.tsx
@@ -57,7 +57,7 @@ export class DbCheckbox {
   @Prop({ reflect: false }) indeterminate: boolean;
 
   /**
-   * The label-hidden attribute is a boolean attribute. When specified, the elements label visually hidden (it's important to still keep it displayed for accessibility reasons).
+   * The label-hidden attribute is a boolean attribute. When specified, the elements label gets visually hidden (it's important to still keep it displayed for accessibility reasons).
    */
   @Prop({ reflect: false }) labelHidden: boolean;
 

From f61f596d5e82c4bb30a4ff96249d8dca13a936b3 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com>
Date: Thu, 30 Nov 2023 12:09:52 +0100
Subject: [PATCH 03/14] Update db-checkbox.intro.stories.mdx

---
 .../db-checkbox/stories/db-checkbox.intro.stories.mdx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/db-ui-elements-stencil/src/components/db-checkbox/stories/db-checkbox.intro.stories.mdx b/packages/db-ui-elements-stencil/src/components/db-checkbox/stories/db-checkbox.intro.stories.mdx
index 1f9e28062c..354e20992a 100644
--- a/packages/db-ui-elements-stencil/src/components/db-checkbox/stories/db-checkbox.intro.stories.mdx
+++ b/packages/db-ui-elements-stencil/src/components/db-checkbox/stories/db-checkbox.intro.stories.mdx
@@ -37,7 +37,7 @@ Alternatively, one can directly call `<db-checkbox>.setIndeterminate(boolean)` o
 
 source: <https://www.w3.org/WAI/tutorials/forms/labels/#hiding-label-text>
 
-You could set the attribute `label-hidden="true"` for the rare case that you would want to visually hide the textual label for a textarea element.
+You could set the attribute `label-hidden="true"` for the rare case that you would want to visually hide the textual label for a checkbox element.
 
 <Canvas>
 <db-checkbox label="Checkbox" name="checkbox-name" label-hidden="true"></db-checkbox>

From 41c6fad006dd4082b4db255df843f0738d36b7f4 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Thu, 11 Jan 2024 16:14:19 +0100
Subject: [PATCH 04/14] refactor: regenerated package lock files

---
 .../package-lock.json                         | 24 +++++++++----------
 .../angular-lts-showcase/package-lock.json    | 24 +++++++++----------
 .../playground-showcase/package-lock.json     |  6 ++---
 showcase/react-showcase/package-lock.json     |  6 ++---
 showcase/vue-showcase/package-lock.json       |  2 +-
 5 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/showcase/angular-lts-minus-1-showcase/package-lock.json b/showcase/angular-lts-minus-1-showcase/package-lock.json
index 6a42ffbb2c..68eebb2c5d 100644
--- a/showcase/angular-lts-minus-1-showcase/package-lock.json
+++ b/showcase/angular-lts-minus-1-showcase/package-lock.json
@@ -39,7 +39,7 @@
       }
     },
     "../../node_modules/@db-ui/core": {
-      "version": "2.14.1",
+      "version": "2.15.0",
       "license": "Apache-2.0",
       "dependencies": {
         "@csstools/normalize.css": "^12.0.0",
@@ -47,7 +47,7 @@
       },
       "devDependencies": {
         "@babel/cli": "^7.23.4",
-        "@babel/preset-env": "^7.23.3",
+        "@babel/preset-env": "^7.23.6",
         "@commitlint/cli": "^18.4.3",
         "@commitlint/config-conventional": "^18.4.3",
         "@mfranzke/plugin-node-uiextension": "^1.0.0",
@@ -59,26 +59,26 @@
         "autoprefixer": "^10.4.16",
         "backstopjs": "^6.2.2",
         "cpr": "^3.0.1",
-        "cssnano": "^6.0.1",
+        "cssnano": "^6.0.2",
         "details-element-polyfill": "^2.4.0",
         "dialog-polyfill": "^0.5.6",
         "dotenv": "^16.3.1",
         "find-versions-cli": "^4.0.0",
-        "html-validate": "^8.7.3",
+        "html-validate": "^8.7.4",
         "html5-boilerplate": "^8.0.0",
         "husky": "^8.0.3",
         "iframe-resizer": "^4.3.9",
-        "lint-staged": "^15.1.0",
-        "markdownlint-cli": "^0.37.0",
-        "nodemon": "^3.0.1",
+        "lint-staged": "^15.2.0",
+        "markdownlint-cli": "^0.38.0",
+        "nodemon": "^3.0.2",
         "npm-run-all": "^4.1.5",
         "pa11y-ci": "^3.1.0",
         "plugin-node-patternlab-inline-remote-assets": "^0.2.0",
-        "postcss": "^8.4.31",
-        "postcss-cli": "^10.1.0",
+        "postcss": "^8.4.32",
+        "postcss-cli": "^11.0.0",
         "postcss-focus": "^7.0.0",
         "postcss-list-style-safari-fix": "^1.0.0",
-        "prettier": "^3.1.0",
+        "prettier": "^3.1.1",
         "rimraf": "^5.0.5",
         "sass": "^1.69.5",
         "start-server-and-test": "^2.0.3",
@@ -111,13 +111,13 @@
         "@rollup/plugin-json": "6.1.0",
         "@rollup/plugin-node-resolve": "15.2.3",
         "@types/jest": "27.4.1",
-        "@types/node": "20.10.4",
+        "@types/node": "20.11.0",
         "bs-logger": "0.2.6",
         "dependency-graph": "1.0.0",
         "injection-js": "2.4.0",
         "is-reference": "3.0.2",
         "jest": "29.6.2",
-        "jest-preset-angular": "13.1.4",
+        "jest-preset-angular": "13.1.5",
         "lodash.memoize": "4.1.2",
         "ng-packagr": "15.2.2",
         "zone.js": "~0.13.3"
diff --git a/showcase/angular-lts-showcase/package-lock.json b/showcase/angular-lts-showcase/package-lock.json
index 7efc68bc80..b9cf5b8f08 100644
--- a/showcase/angular-lts-showcase/package-lock.json
+++ b/showcase/angular-lts-showcase/package-lock.json
@@ -38,7 +38,7 @@
       }
     },
     "../../node_modules/@db-ui/core": {
-      "version": "2.14.1",
+      "version": "2.15.0",
       "license": "Apache-2.0",
       "dependencies": {
         "@csstools/normalize.css": "^12.0.0",
@@ -46,7 +46,7 @@
       },
       "devDependencies": {
         "@babel/cli": "^7.23.4",
-        "@babel/preset-env": "^7.23.3",
+        "@babel/preset-env": "^7.23.6",
         "@commitlint/cli": "^18.4.3",
         "@commitlint/config-conventional": "^18.4.3",
         "@mfranzke/plugin-node-uiextension": "^1.0.0",
@@ -58,26 +58,26 @@
         "autoprefixer": "^10.4.16",
         "backstopjs": "^6.2.2",
         "cpr": "^3.0.1",
-        "cssnano": "^6.0.1",
+        "cssnano": "^6.0.2",
         "details-element-polyfill": "^2.4.0",
         "dialog-polyfill": "^0.5.6",
         "dotenv": "^16.3.1",
         "find-versions-cli": "^4.0.0",
-        "html-validate": "^8.7.3",
+        "html-validate": "^8.7.4",
         "html5-boilerplate": "^8.0.0",
         "husky": "^8.0.3",
         "iframe-resizer": "^4.3.9",
-        "lint-staged": "^15.1.0",
-        "markdownlint-cli": "^0.37.0",
-        "nodemon": "^3.0.1",
+        "lint-staged": "^15.2.0",
+        "markdownlint-cli": "^0.38.0",
+        "nodemon": "^3.0.2",
         "npm-run-all": "^4.1.5",
         "pa11y-ci": "^3.1.0",
         "plugin-node-patternlab-inline-remote-assets": "^0.2.0",
-        "postcss": "^8.4.31",
-        "postcss-cli": "^10.1.0",
+        "postcss": "^8.4.32",
+        "postcss-cli": "^11.0.0",
         "postcss-focus": "^7.0.0",
         "postcss-list-style-safari-fix": "^1.0.0",
-        "prettier": "^3.1.0",
+        "prettier": "^3.1.1",
         "rimraf": "^5.0.5",
         "sass": "^1.69.5",
         "start-server-and-test": "^2.0.3",
@@ -110,13 +110,13 @@
         "@rollup/plugin-json": "6.1.0",
         "@rollup/plugin-node-resolve": "15.2.3",
         "@types/jest": "27.4.1",
-        "@types/node": "20.10.4",
+        "@types/node": "20.11.0",
         "bs-logger": "0.2.6",
         "dependency-graph": "1.0.0",
         "injection-js": "2.4.0",
         "is-reference": "3.0.2",
         "jest": "29.6.2",
-        "jest-preset-angular": "13.1.4",
+        "jest-preset-angular": "13.1.5",
         "lodash.memoize": "4.1.2",
         "ng-packagr": "15.2.2",
         "zone.js": "~0.13.3"
diff --git a/showcase/playground-showcase/package-lock.json b/showcase/playground-showcase/package-lock.json
index b24907163e..04476e01ad 100644
--- a/showcase/playground-showcase/package-lock.json
+++ b/showcase/playground-showcase/package-lock.json
@@ -30,12 +30,12 @@
       "version": "0.0.0",
       "license": "Apache-2.0",
       "devDependencies": {
-        "@types/react-dom": "17.0.11",
+        "@types/react-dom": "18.2.18",
         "jest": "27.5.1",
         "react": "17.0.2",
-        "react-dom": "17.0.2",
+        "react-dom": "18.2.0",
         "rimraf": "5.0.5",
-        "rollup": "3.21.5",
+        "rollup": "4.9.4",
         "rollup-plugin-node-resolve": "5.2.0"
       }
     },
diff --git a/showcase/react-showcase/package-lock.json b/showcase/react-showcase/package-lock.json
index 3ef2fc5c47..4505ed9718 100644
--- a/showcase/react-showcase/package-lock.json
+++ b/showcase/react-showcase/package-lock.json
@@ -23,12 +23,12 @@
       "version": "0.0.0",
       "license": "Apache-2.0",
       "devDependencies": {
-        "@types/react-dom": "17.0.11",
+        "@types/react-dom": "18.2.18",
         "jest": "27.5.1",
         "react": "17.0.2",
-        "react-dom": "17.0.2",
+        "react-dom": "18.2.0",
         "rimraf": "5.0.5",
-        "rollup": "3.21.5",
+        "rollup": "4.9.4",
         "rollup-plugin-node-resolve": "5.2.0"
       }
     },
diff --git a/showcase/vue-showcase/package-lock.json b/showcase/vue-showcase/package-lock.json
index 5b12e0caba..ea86a18b02 100644
--- a/showcase/vue-showcase/package-lock.json
+++ b/showcase/vue-showcase/package-lock.json
@@ -31,7 +31,7 @@
         "@vue/test-utils": "2.0.0-rc.18",
         "jest": "27.5.1",
         "rimraf": "5.0.5",
-        "rollup": "3.21.5",
+        "rollup": "4.9.4",
         "rollup-plugin-node-resolve": "5.2.0",
         "vue": "3.2.47"
       }

From af2a669227a12b98ae019ccaa930661ccfbfecf6 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Thu, 11 Jan 2024 16:15:07 +0100
Subject: [PATCH 05/14] feat: added attribute

---
 .../src/components/db-checkbox/readme.md      |  9 ++++++-
 .../src/components/db-input/db-input.tsx      |  6 +++++
 .../src/components/db-input/readme.md         |  1 +
 .../src/components/db-radio/db-radio.tsx      | 11 +++++++-
 .../src/components/db-radio/readme.md         | 21 ++++++++--------
 .../src/components/db-select/db-select.tsx    | 11 +++++++-
 .../src/components/db-select/readme.md        | 25 ++++++++++---------
 .../components/db-textarea/db-textarea.tsx    | 11 +++++++-
 .../src/components/db-textarea/readme.md      |  1 +
 9 files changed, 70 insertions(+), 26 deletions(-)

diff --git a/packages/db-ui-elements-stencil/src/components/db-checkbox/readme.md b/packages/db-ui-elements-stencil/src/components/db-checkbox/readme.md
index 5debc5fbb0..074f97885c 100644
--- a/packages/db-ui-elements-stencil/src/components/db-checkbox/readme.md
+++ b/packages/db-ui-elements-stencil/src/components/db-checkbox/readme.md
@@ -12,9 +12,10 @@
 | `autofocus`          | `autofocus`     | The autofocus content attribute allows the author to indicate that a control is to be focused as soon as the page is loaded, allowing the user to just start typing without having to manually focus the main control.                                        | `boolean` | `undefined`            |
 | `checked`            | `checked`       | The checked content attribute is a boolean attribute that gives the default checkedness of the input element.                                                                                                                                                 | `boolean` | `undefined`            |
 | `disabled`           | `disabled`      | The disabled attribute can be set to keep a user from clicking on the input.                                                                                                                                                                                  | `boolean` | `undefined`            |
-| `indeterminate`      | `indeterminate` | The indeterminate attribute is a boolean attribute. When specified, the element is displayed in an indeterminate state (neither checked, nor unchecked).                                                                                                   | `boolean` | `undefined`            |
+| `indeterminate`      | `indeterminate` | The indeterminate attribute is a boolean attribute. When specified, the element is displayed in an indeterminate state (neither checked, nor unchecked).                                                                                                      | `boolean` | `undefined`            |
 | `input_id`           | `input_id`      | The input_id of a labelable form-related element in the same document as the label element. The first element in the document with an id matching the value of the for attribute is the labeled control for this label element, if it is a labelable element. | `string`  | `'checkbox-' + uuid()` |
 | `label` _(required)_ | `label`         | The label attribute specifies the caption of the input.                                                                                                                                                                                                       | `string`  | `undefined`            |
+| `labelHidden`        | `label-hidden`  | The label-hidden attribute is a boolean attribute. When specified, the elements label gets visually hidden (it's important to still keep it displayed for accessibility reasons).                                                                             | `boolean` | `undefined`            |
 | `name` _(required)_  | `name`          | The name content attribute gives the name of the form control, as used in form submission and in the form element's elements object. If the attribute is specified, its value must not be the empty string.                                                   | `string`  | `undefined`            |
 | `required`           | `required`      | The required attribute is a boolean attribute. When specified, the element is required.                                                                                                                                                                       | `boolean` | `undefined`            |
 | `value`              | `value`         | The value content attribute gives the default value of the input element.                                                                                                                                                                                     | `string`  | `undefined`            |
@@ -33,6 +34,12 @@
 
 Method that acceps a boolean and sets the indeterminate state of the checkbox accordingly.
 
+#### Parameters
+
+| Name   | Type      | Description |
+| ------ | --------- | ----------- |
+| `bool` | `boolean` |             |
+
 #### Returns
 
 Type: `Promise<void>`
diff --git a/packages/db-ui-elements-stencil/src/components/db-input/db-input.tsx b/packages/db-ui-elements-stencil/src/components/db-input/db-input.tsx
index b804443a08..65cd67a6c2 100644
--- a/packages/db-ui-elements-stencil/src/components/db-input/db-input.tsx
+++ b/packages/db-ui-elements-stencil/src/components/db-input/db-input.tsx
@@ -135,6 +135,11 @@ export class DbInput {
     | 'solid'
     | 'outline' = 'semitransparent';
 
+  /**
+   * The label-hidden attribute is a boolean attribute. When specified, the elements label gets visually hidden (it's important to still keep it displayed for accessibility reasons).
+   */
+  @Prop({ reflect: false }) labelHidden: boolean;
+
   private handleChange(event) {
     this.dbChange.emit(event);
   }
@@ -180,6 +185,7 @@ export class DbInput {
           htmlFor={this.input_id}
           aria-hidden="true"
           id={this.input_id + '-label'}
+          data-hidden-label={this.labelHidden}
         >
           {this.label}
         </label>
diff --git a/packages/db-ui-elements-stencil/src/components/db-input/readme.md b/packages/db-ui-elements-stencil/src/components/db-input/readme.md
index 6c697d8c42..e194933d3d 100644
--- a/packages/db-ui-elements-stencil/src/components/db-input/readme.md
+++ b/packages/db-ui-elements-stencil/src/components/db-input/readme.md
@@ -18,6 +18,7 @@
 | `disabled`           | `disabled`     | The disabled attribute can be set to keep a user from clicking on the input.                                                                                                                                                                                               | `boolean`                                              | `false`             |
 | `input_id`           | `input_id`     | The input_id of a labelable form-related element in the same document as the label element. The first element in the document with an id matching the value of the for attribute is the labeled control for this label element, if it is a labelable element.              | `string`                                               | `'input-' + uuid()` |
 | `label` _(required)_ | `label`        | The label attribute specifies the caption of the input.                                                                                                                                                                                                                    | `string`                                               | `undefined`         |
+| `labelHidden`        | `label-hidden` | The label-hidden attribute is a boolean attribute. When specified, the elements label gets visually hidden (it's important to still keep it displayed for accessibility reasons).                                                                                          | `boolean`                                              | `undefined`         |
 | `list`               | `list`         | The list attribute is used to identify an element that lists predefined options suggested to the user.                                                                                                                                                                     | `string`                                               | `undefined`         |
 | `max`                | `max`          | The max attribute specifies the maximum value that is sufficient for this input.                                                                                                                                                                                           | `number`                                               | `undefined`         |
 | `maxlength`          | `maxlength`    | /* The maxlength attribute, controlled by a dirty value flag, declares a limit on the number of characters a user can input.                                                                                                                                               | `number`                                               | `undefined`         |
diff --git a/packages/db-ui-elements-stencil/src/components/db-radio/db-radio.tsx b/packages/db-ui-elements-stencil/src/components/db-radio/db-radio.tsx
index 09ff5c0921..d520a03184 100644
--- a/packages/db-ui-elements-stencil/src/components/db-radio/db-radio.tsx
+++ b/packages/db-ui-elements-stencil/src/components/db-radio/db-radio.tsx
@@ -47,6 +47,11 @@ export class DbRadio {
    */
   @Prop({ reflect: true }) value: string;
 
+  /**
+   * The label-hidden attribute is a boolean attribute. When specified, the elements label gets visually hidden (it's important to still keep it displayed for accessibility reasons).
+   */
+  @Prop({ reflect: false }) labelHidden: boolean;
+
   private handleChange(event) {
     this.dbChange.emit(event);
   }
@@ -72,7 +77,11 @@ export class DbRadio {
           onChange={(event) => this.handleChange(event)}
         />
 
-        <label class="elm-label" htmlFor={this.input_id}>
+        <label
+          class="elm-label"
+          htmlFor={this.input_id}
+          data-hidden-label={this.labelHidden}
+        >
           {this.label}
         </label>
       </Host>
diff --git a/packages/db-ui-elements-stencil/src/components/db-radio/readme.md b/packages/db-ui-elements-stencil/src/components/db-radio/readme.md
index b7a9664ba1..1217292ef2 100644
--- a/packages/db-ui-elements-stencil/src/components/db-radio/readme.md
+++ b/packages/db-ui-elements-stencil/src/components/db-radio/readme.md
@@ -7,16 +7,17 @@
 
 ## Properties
 
-| Property             | Attribute   | Description                                                                                                                                                                                                                                                   | Type      | Default             |
-| -------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------------------- |
-| `autofocus`          | `autofocus` | The autofocus content attribute allows the author to indicate that a control is to be focused as soon as the page is loaded, allowing the user to just start typing without having to manually focus the main control.                                        | `boolean` | `undefined`         |
-| `checked`            | `checked`   | The checked content attribute is a boolean attribute that gives the default checkedness of the input element.                                                                                                                                                 | `boolean` | `undefined`         |
-| `disabled`           | `disabled`  | The disabled attribute can be set to keep a user from clicking on the input.                                                                                                                                                                                  | `boolean` | `undefined`         |
-| `input_id`           | `input_id`  | The input_id of a labelable form-related element in the same document as the label element. The first element in the document with an id matching the value of the for attribute is the labeled control for this label element, if it is a labelable element. | `string`  | `'radio-' + uuid()` |
-| `label` _(required)_ | `label`     | The label attribute specifies the caption of the input.                                                                                                                                                                                                       | `string`  | `undefined`         |
-| `name` _(required)_  | `name`      | The name content attribute gives the name of the form control, as used in form submission and in the form element's elements object. If the attribute is specified, its value must not be the empty string.                                                   | `string`  | `undefined`         |
-| `required`           | `required`  | The required attribute is a boolean attribute. When specified, the element is required.                                                                                                                                                                       | `boolean` | `undefined`         |
-| `value`              | `value`     | The value content attribute gives the default value of the input element.                                                                                                                                                                                     | `string`  | `undefined`         |
+| Property             | Attribute      | Description                                                                                                                                                                                                                                                   | Type      | Default             |
+| -------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------------------- |
+| `autofocus`          | `autofocus`    | The autofocus content attribute allows the author to indicate that a control is to be focused as soon as the page is loaded, allowing the user to just start typing without having to manually focus the main control.                                        | `boolean` | `undefined`         |
+| `checked`            | `checked`      | The checked content attribute is a boolean attribute that gives the default checkedness of the input element.                                                                                                                                                 | `boolean` | `undefined`         |
+| `disabled`           | `disabled`     | The disabled attribute can be set to keep a user from clicking on the input.                                                                                                                                                                                  | `boolean` | `undefined`         |
+| `input_id`           | `input_id`     | The input_id of a labelable form-related element in the same document as the label element. The first element in the document with an id matching the value of the for attribute is the labeled control for this label element, if it is a labelable element. | `string`  | `'radio-' + uuid()` |
+| `label` _(required)_ | `label`        | The label attribute specifies the caption of the input.                                                                                                                                                                                                       | `string`  | `undefined`         |
+| `labelHidden`        | `label-hidden` | The label-hidden attribute is a boolean attribute. When specified, the elements label gets visually hidden (it's important to still keep it displayed for accessibility reasons).                                                                             | `boolean` | `undefined`         |
+| `name` _(required)_  | `name`         | The name content attribute gives the name of the form control, as used in form submission and in the form element's elements object. If the attribute is specified, its value must not be the empty string.                                                   | `string`  | `undefined`         |
+| `required`           | `required`     | The required attribute is a boolean attribute. When specified, the element is required.                                                                                                                                                                       | `boolean` | `undefined`         |
+| `value`              | `value`        | The value content attribute gives the default value of the input element.                                                                                                                                                                                     | `string`  | `undefined`         |
 
 
 ## Events
diff --git a/packages/db-ui-elements-stencil/src/components/db-select/db-select.tsx b/packages/db-ui-elements-stencil/src/components/db-select/db-select.tsx
index c019f9d8e4..75061487b4 100644
--- a/packages/db-ui-elements-stencil/src/components/db-select/db-select.tsx
+++ b/packages/db-ui-elements-stencil/src/components/db-select/db-select.tsx
@@ -61,6 +61,11 @@ export class DbSelect {
     | 'solid'
     | 'outline' = 'semitransparent';
 
+  /**
+   * The label-hidden attribute is a boolean attribute. When specified, the elements label gets visually hidden (it's important to still keep it displayed for accessibility reasons).
+   */
+  @Prop({ reflect: false }) labelHidden: boolean;
+
   private handleChange(event) {
     this.value = event.target.value;
     this.dbChange.emit(event);
@@ -94,7 +99,11 @@ export class DbSelect {
           <slot />
         </select>
 
-        <label class="elm-label" htmlFor={this.input_id}>
+        <label
+          class="elm-label"
+          htmlFor={this.input_id}
+          data-hidden-label={this.labelHidden}
+        >
           {this.label}
         </label>
       </Host>
diff --git a/packages/db-ui-elements-stencil/src/components/db-select/readme.md b/packages/db-ui-elements-stencil/src/components/db-select/readme.md
index 2d881e4159..215e95a4ba 100644
--- a/packages/db-ui-elements-stencil/src/components/db-select/readme.md
+++ b/packages/db-ui-elements-stencil/src/components/db-select/readme.md
@@ -7,18 +7,19 @@
 
 ## Properties
 
-| Property             | Attribute     | Description                                                                                                                                                                                                                                                                                                                                            | Type                                                   | Default              |
-| -------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------ | -------------------- |
-| `ariainvalid`        | `ariainvalid` | The ariainvalid attribute is used to indicate that the value entered into an input field does not conform to the format expected by the application.                                                                                                                                                                                                   | `boolean`                                              | `false`              |
-| `disabled`           | `disabled`    | The disabled attribute can be set to keep a user from clicking on the select.                                                                                                                                                                                                                                                                          | `boolean`                                              | `false`              |
-| `input_id`           | `input_id`    | The input_id of a labelable form-related element in the same document as the label element. The first element in the document with an id matching the value of the for attribute is the labeled control for this label element, if it is a labelable element.                                                                                          | `string`                                               | `'select-' + uuid()` |
-| `label` _(required)_ | `label`       | The label attribute specifies the caption of the selectbox.                                                                                                                                                                                                                                                                                            | `string`                                               | `undefined`          |
-| `multiple`           | `multiple`    | If the multiple attribute is present, then the select element represents a control for selecting zero or more options from the list of options. If the attribute is absent, then the select element represents a control for selecting a single option from the list of options.                                                                       | `boolean`                                              | `false`              |
-| `name` _(required)_  | `name`        | The name attribute gives the name of the form control, as used in form submission and in the form element's elements object. If the attribute is specified, its value must not be the empty string.                                                                                                                                                    | `string`                                               | `undefined`          |
-| `required`           | `required`    | When the required attribute specified, the user will be required to select a value before submitting the form.                                                                                                                                                                                                                                         | `boolean`                                              | `false`              |
-| `size`               | `size`        | The size attribute gives the number of options to show to the user. The size attribute, if specified, must have a value that is a valid non-negative integer greater than zero. If the multiple attribute is present, then the size attribute's default value is 4. If the multiple attribute is absent, then the size attribute's default value is 1. | `number`                                               | `undefined`          |
-| `value`              | `value`       | The value property is to receive results from the native element. Use 'this.value' to process the expected value when onchange is used.                                                                                                                                                                                                                | `string`                                               | `undefined`          |
-| `variant`            | `variant`     | The variant attribute specifies a visual expression of a select.                                                                                                                                                                                                                                                                                       | `"outline" \| "semitransparent" \| "solid" \| "white"` | `'semitransparent'`  |
+| Property             | Attribute      | Description                                                                                                                                                                                                                                                                                                                                            | Type                                                   | Default              |
+| -------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------ | -------------------- |
+| `ariainvalid`        | `ariainvalid`  | The ariainvalid attribute is used to indicate that the value entered into an input field does not conform to the format expected by the application.                                                                                                                                                                                                   | `boolean`                                              | `false`              |
+| `disabled`           | `disabled`     | The disabled attribute can be set to keep a user from clicking on the select.                                                                                                                                                                                                                                                                          | `boolean`                                              | `false`              |
+| `input_id`           | `input_id`     | The input_id of a labelable form-related element in the same document as the label element. The first element in the document with an id matching the value of the for attribute is the labeled control for this label element, if it is a labelable element.                                                                                          | `string`                                               | `'select-' + uuid()` |
+| `label` _(required)_ | `label`        | The label attribute specifies the caption of the selectbox.                                                                                                                                                                                                                                                                                            | `string`                                               | `undefined`          |
+| `labelHidden`        | `label-hidden` | The label-hidden attribute is a boolean attribute. When specified, the elements label gets visually hidden (it's important to still keep it displayed for accessibility reasons).                                                                                                                                                                      | `boolean`                                              | `undefined`          |
+| `multiple`           | `multiple`     | If the multiple attribute is present, then the select element represents a control for selecting zero or more options from the list of options. If the attribute is absent, then the select element represents a control for selecting a single option from the list of options.                                                                       | `boolean`                                              | `false`              |
+| `name` _(required)_  | `name`         | The name attribute gives the name of the form control, as used in form submission and in the form element's elements object. If the attribute is specified, its value must not be the empty string.                                                                                                                                                    | `string`                                               | `undefined`          |
+| `required`           | `required`     | When the required attribute specified, the user will be required to select a value before submitting the form.                                                                                                                                                                                                                                         | `boolean`                                              | `false`              |
+| `size`               | `size`         | The size attribute gives the number of options to show to the user. The size attribute, if specified, must have a value that is a valid non-negative integer greater than zero. If the multiple attribute is present, then the size attribute's default value is 4. If the multiple attribute is absent, then the size attribute's default value is 1. | `number`                                               | `undefined`          |
+| `value`              | `value`        | The value property is to receive results from the native element. Use 'this.value' to process the expected value when onchange is used.                                                                                                                                                                                                                | `string`                                               | `undefined`          |
+| `variant`            | `variant`      | The variant attribute specifies a visual expression of a select.                                                                                                                                                                                                                                                                                       | `"outline" \| "semitransparent" \| "solid" \| "white"` | `'semitransparent'`  |
 
 
 ## Events
diff --git a/packages/db-ui-elements-stencil/src/components/db-textarea/db-textarea.tsx b/packages/db-ui-elements-stencil/src/components/db-textarea/db-textarea.tsx
index e72f8e75cb..b68f1baff0 100644
--- a/packages/db-ui-elements-stencil/src/components/db-textarea/db-textarea.tsx
+++ b/packages/db-ui-elements-stencil/src/components/db-textarea/db-textarea.tsx
@@ -112,6 +112,11 @@ export class DbTextarea {
    */
   @Prop({ reflect: true }) value: string;
 
+  /**
+   * The label-hidden attribute is a boolean attribute. When specified, the elements label gets visually hidden (it's important to still keep it displayed for accessibility reasons).
+   */
+  @Prop({ reflect: false }) labelHidden: boolean;
+
   private handleChange(event) {
     this.dbChange.emit(event);
     this.value = event.target?.value;
@@ -125,7 +130,11 @@ export class DbTextarea {
   render() {
     return (
       <Host>
-        <label class="elm-label" htmlFor={this.input_id}>
+        <label
+          class="elm-label"
+          htmlFor={this.input_id}
+          data-hidden-label={this.labelHidden}
+        >
           {this.label}
         </label>
 
diff --git a/packages/db-ui-elements-stencil/src/components/db-textarea/readme.md b/packages/db-ui-elements-stencil/src/components/db-textarea/readme.md
index 94beab41ca..577ace4ee2 100644
--- a/packages/db-ui-elements-stencil/src/components/db-textarea/readme.md
+++ b/packages/db-ui-elements-stencil/src/components/db-textarea/readme.md
@@ -18,6 +18,7 @@
 | `disabled`           | `disabled`     | The disabled attribute can be set to keep a user from clicking on the input.                                                                                                                                                                                               | `boolean`                                              | `undefined`            |
 | `input_id`           | `input_id`     | The input_id of a labelable form-related element in the same document as the label element. The first element in the document with an id matching the value of the for attribute is the labeled control for this label element, if it is a labelable element.              | `string`                                               | `'textarea-' + uuid()` |
 | `label` _(required)_ | `label`        | The label attribute specifies the caption of the input.                                                                                                                                                                                                                    | `string`                                               | `undefined`            |
+| `labelHidden`        | `label-hidden` | The label-hidden attribute is a boolean attribute. When specified, the elements label gets visually hidden (it's important to still keep it displayed for accessibility reasons).                                                                                          | `boolean`                                              | `undefined`            |
 | `maxlength`          | `maxlength`    | /* The maxlength attribute, controlled by a dirty value flag, declares a limit on the number of characters a user can input.                                                                                                                                               | `number`                                               | `undefined`            |
 | `minlength`          | `minlength`    | /* The minlength attribute, when it applies, is a form control minlength attribute.                                                                                                                                                                                        | `number`                                               | `undefined`            |
 | `name` _(required)_  | `name`         | The name content attribute gives the name of the form control, as used in form submission and in the form element's elements object. If the attribute is specified, its value must not be the empty string.                                                                | `string`                                               | `undefined`            |

From b79bc7daed04307afe9fc0e40b78960a9ae31c36 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Thu, 11 Jan 2024 16:22:28 +0100
Subject: [PATCH 06/14] docs: added further documentation

---
 .../db-input/stories/db-input.intro.stories.mdx   | 11 +++++++++++
 .../db-radio/stories/db-radio.intro.stories.mdx   | 11 +++++++++++
 .../db-select/stories/db-select.intro.stories.mdx | 15 +++++++++++++++
 .../stories/db-textarea.intro.stories.mdx         | 11 +++++++++++
 4 files changed, 48 insertions(+)

diff --git a/packages/db-ui-elements-stencil/src/components/db-input/stories/db-input.intro.stories.mdx b/packages/db-ui-elements-stencil/src/components/db-input/stories/db-input.intro.stories.mdx
index eda4243688..6dfa49274a 100644
--- a/packages/db-ui-elements-stencil/src/components/db-input/stories/db-input.intro.stories.mdx
+++ b/packages/db-ui-elements-stencil/src/components/db-input/stories/db-input.intro.stories.mdx
@@ -130,4 +130,15 @@ The list attribute connects the input with a set of options that represent prede
   </db-input>
 </Canvas>
 
+<db-headline variant="2">visually hide the label</db-headline>
+
+> A label for a form control helps everyone better understand its purpose. In some cases, the purpose may be clear enough from the context when the content is rendered visually. The label can be hidden visually, though it still needs to be provided within the code to support other forms of presentation and interaction, such as for screen reader and speech input users.
+source: <https://www.w3.org/WAI/tutorials/forms/labels/#hiding-label-text>
+
+You could set the attribute `label-hidden="true"` for the rare case that you would want to visually hide the textual label for a input element.
+
+<Canvas>
+<db-input label="Semitransparent" name="input-name" label-hidden="true"></db-input>
+</Canvas>
+
 <Readme />
diff --git a/packages/db-ui-elements-stencil/src/components/db-radio/stories/db-radio.intro.stories.mdx b/packages/db-ui-elements-stencil/src/components/db-radio/stories/db-radio.intro.stories.mdx
index 9251b7fd9f..2d69131ff3 100644
--- a/packages/db-ui-elements-stencil/src/components/db-radio/stories/db-radio.intro.stories.mdx
+++ b/packages/db-ui-elements-stencil/src/components/db-radio/stories/db-radio.intro.stories.mdx
@@ -22,4 +22,15 @@ Make radios look inactive by adding the disabled boolean attribute to any &lt;db
   <db-radio label="Radio" name="radio-name" disabled></db-radio>
 </Canvas>
 
+<db-headline variant="2">visually hide the label</db-headline>
+
+> A label for a form control helps everyone better understand its purpose. In some cases, the purpose may be clear enough from the context when the content is rendered visually. The label can be hidden visually, though it still needs to be provided within the code to support other forms of presentation and interaction, such as for screen reader and speech input users.
+source: <https://www.w3.org/WAI/tutorials/forms/labels/#hiding-label-text>
+
+You could set the attribute `label-hidden="true"` for the rare case that you would want to visually hide the textual label for a radio element.
+
+<Canvas>
+<db-radio label="Radio-01" name="radio-name" value="radio-01" label-hidden="true"></db-radio>
+</Canvas>
+
 <Readme />
diff --git a/packages/db-ui-elements-stencil/src/components/db-select/stories/db-select.intro.stories.mdx b/packages/db-ui-elements-stencil/src/components/db-select/stories/db-select.intro.stories.mdx
index 1ede5e944d..7448dac2c3 100644
--- a/packages/db-ui-elements-stencil/src/components/db-select/stories/db-select.intro.stories.mdx
+++ b/packages/db-ui-elements-stencil/src/components/db-select/stories/db-select.intro.stories.mdx
@@ -73,4 +73,19 @@ The HTML &lt;optgroup&gt; element creates a grouping of options within a select
 </db-select>
 </Canvas>
 
+<db-headline variant="2">visually hide the label</db-headline>
+
+> A label for a form control helps everyone better understand its purpose. In some cases, the purpose may be clear enough from the context when the content is rendered visually. The label can be hidden visually, though it still needs to be provided within the code to support other forms of presentation and interaction, such as for screen reader and speech input users.
+source: <https://www.w3.org/WAI/tutorials/forms/labels/#hiding-label-text>
+
+You could set the attribute `label-hidden="true"` for the rare case that you would want to visually hide the textual label for a select element.
+
+<Canvas>
+<db-select label="Semitransparent" name="select-name-semitransparent" label-hidden="true">
+  <option selected>Option 1</option>
+  <option>Option 2</option>
+  <option>Option 3</option>
+</db-select>
+</Canvas>
+
 <Readme />
diff --git a/packages/db-ui-elements-stencil/src/components/db-textarea/stories/db-textarea.intro.stories.mdx b/packages/db-ui-elements-stencil/src/components/db-textarea/stories/db-textarea.intro.stories.mdx
index 3f8b1ca1f8..628ba971a3 100644
--- a/packages/db-ui-elements-stencil/src/components/db-textarea/stories/db-textarea.intro.stories.mdx
+++ b/packages/db-ui-elements-stencil/src/components/db-textarea/stories/db-textarea.intro.stories.mdx
@@ -63,4 +63,15 @@ Make textareas look inactive by adding the disabled boolean attribute to any &lt
   ></db-textarea>
 </Canvas>
 
+<db-headline variant="2">visually hide the label</db-headline>
+
+> A label for a form control helps everyone better understand its purpose. In some cases, the purpose may be clear enough from the context when the content is rendered visually. The label can be hidden visually, though it still needs to be provided within the code to support other forms of presentation and interaction, such as for screen reader and speech input users.
+source: <https://www.w3.org/WAI/tutorials/forms/labels/#hiding-label-text>
+
+You could set the attribute `label-hidden="true"` for the rare case that you would want to visually hide the textual label for a checkbox element.
+
+<Canvas>
+<db-textarea label="Semitransparent" name="textarea-name" label-hidden="true"></db-textarea>
+</Canvas>
+
 <Readme />

From 7accaa1da77e077799c541ebfa7bd88f08f4011f Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com>
Date: Thu, 11 Jan 2024 16:26:38 +0100
Subject: [PATCH 07/14] Update db-textarea.intro.stories.mdx

---
 .../db-textarea/stories/db-textarea.intro.stories.mdx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/db-ui-elements-stencil/src/components/db-textarea/stories/db-textarea.intro.stories.mdx b/packages/db-ui-elements-stencil/src/components/db-textarea/stories/db-textarea.intro.stories.mdx
index 628ba971a3..f293abeb45 100644
--- a/packages/db-ui-elements-stencil/src/components/db-textarea/stories/db-textarea.intro.stories.mdx
+++ b/packages/db-ui-elements-stencil/src/components/db-textarea/stories/db-textarea.intro.stories.mdx
@@ -68,7 +68,7 @@ Make textareas look inactive by adding the disabled boolean attribute to any &lt
 > A label for a form control helps everyone better understand its purpose. In some cases, the purpose may be clear enough from the context when the content is rendered visually. The label can be hidden visually, though it still needs to be provided within the code to support other forms of presentation and interaction, such as for screen reader and speech input users.
 source: <https://www.w3.org/WAI/tutorials/forms/labels/#hiding-label-text>
 
-You could set the attribute `label-hidden="true"` for the rare case that you would want to visually hide the textual label for a checkbox element.
+You could set the attribute `label-hidden="true"` for the rare case that you would want to visually hide the textual label for a textarea element.
 
 <Canvas>
 <db-textarea label="Semitransparent" name="textarea-name" label-hidden="true"></db-textarea>

From 2450c29e9d51b556b14752bfb8c706b29f60a283 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Fri, 12 Jan 2024 14:08:53 +0100
Subject: [PATCH 08/14] refactor: corrected these attributes aspects

---
 .../src/components/db-checkbox/db-checkbox.tsx                  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/db-ui-elements-stencil/src/components/db-checkbox/db-checkbox.tsx b/packages/db-ui-elements-stencil/src/components/db-checkbox/db-checkbox.tsx
index 9e343db5ca..792031f49d 100644
--- a/packages/db-ui-elements-stencil/src/components/db-checkbox/db-checkbox.tsx
+++ b/packages/db-ui-elements-stencil/src/components/db-checkbox/db-checkbox.tsx
@@ -59,7 +59,7 @@ export class DbCheckbox {
   /**
    * The label-hidden attribute is a boolean attribute. When specified, the elements label gets visually hidden (it's important to still keep it displayed for accessibility reasons).
    */
-  @Prop({ reflect: false }) labelHidden: boolean;
+  @Prop({ reflect: true }) labelHidden: string;
 
   /**
    * Method that acceps a boolean and sets the indeterminate state of the checkbox accordingly.

From 7767b9c7a36bfbd5a1cfb2481ec6d9baab5ea32b Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Fri, 12 Jan 2024 14:29:16 +0100
Subject: [PATCH 09/14] chore: "typo"

---
 .../src/components/db-checkbox/db-checkbox.tsx                  | 2 +-
 .../db-ui-elements-stencil/src/components/db-input/db-input.tsx | 2 +-
 .../db-ui-elements-stencil/src/components/db-radio/db-radio.tsx | 2 +-
 .../src/components/db-select/db-select.tsx                      | 2 +-
 .../src/components/db-textarea/db-textarea.tsx                  | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/db-ui-elements-stencil/src/components/db-checkbox/db-checkbox.tsx b/packages/db-ui-elements-stencil/src/components/db-checkbox/db-checkbox.tsx
index 792031f49d..dc6a22f2f2 100644
--- a/packages/db-ui-elements-stencil/src/components/db-checkbox/db-checkbox.tsx
+++ b/packages/db-ui-elements-stencil/src/components/db-checkbox/db-checkbox.tsx
@@ -99,7 +99,7 @@ export class DbCheckbox {
         <label
           class="elm-label"
           htmlFor={this.input_id}
-          data-hidden-label={this.labelHidden}
+          data-label-hidden={this.labelHidden}
         >
           {this.label}
         </label>
diff --git a/packages/db-ui-elements-stencil/src/components/db-input/db-input.tsx b/packages/db-ui-elements-stencil/src/components/db-input/db-input.tsx
index 65cd67a6c2..1d7e82efa2 100644
--- a/packages/db-ui-elements-stencil/src/components/db-input/db-input.tsx
+++ b/packages/db-ui-elements-stencil/src/components/db-input/db-input.tsx
@@ -185,7 +185,7 @@ export class DbInput {
           htmlFor={this.input_id}
           aria-hidden="true"
           id={this.input_id + '-label'}
-          data-hidden-label={this.labelHidden}
+          data-label-hidden={this.labelHidden}
         >
           {this.label}
         </label>
diff --git a/packages/db-ui-elements-stencil/src/components/db-radio/db-radio.tsx b/packages/db-ui-elements-stencil/src/components/db-radio/db-radio.tsx
index d520a03184..904a3a567d 100644
--- a/packages/db-ui-elements-stencil/src/components/db-radio/db-radio.tsx
+++ b/packages/db-ui-elements-stencil/src/components/db-radio/db-radio.tsx
@@ -80,7 +80,7 @@ export class DbRadio {
         <label
           class="elm-label"
           htmlFor={this.input_id}
-          data-hidden-label={this.labelHidden}
+          data-label-hidden={this.labelHidden}
         >
           {this.label}
         </label>
diff --git a/packages/db-ui-elements-stencil/src/components/db-select/db-select.tsx b/packages/db-ui-elements-stencil/src/components/db-select/db-select.tsx
index 75061487b4..338b2c3645 100644
--- a/packages/db-ui-elements-stencil/src/components/db-select/db-select.tsx
+++ b/packages/db-ui-elements-stencil/src/components/db-select/db-select.tsx
@@ -102,7 +102,7 @@ export class DbSelect {
         <label
           class="elm-label"
           htmlFor={this.input_id}
-          data-hidden-label={this.labelHidden}
+          data-label-hidden={this.labelHidden}
         >
           {this.label}
         </label>
diff --git a/packages/db-ui-elements-stencil/src/components/db-textarea/db-textarea.tsx b/packages/db-ui-elements-stencil/src/components/db-textarea/db-textarea.tsx
index b68f1baff0..00028f1877 100644
--- a/packages/db-ui-elements-stencil/src/components/db-textarea/db-textarea.tsx
+++ b/packages/db-ui-elements-stencil/src/components/db-textarea/db-textarea.tsx
@@ -133,7 +133,7 @@ export class DbTextarea {
         <label
           class="elm-label"
           htmlFor={this.input_id}
-          data-hidden-label={this.labelHidden}
+          data-label-hidden={this.labelHidden}
         >
           {this.label}
         </label>

From 6dfd3f3d0afe396ee55f626e4070b1087c9df013 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Fri, 12 Jan 2024 14:50:28 +0100
Subject: [PATCH 10/14] refactor: corrected these attributes aspects

---
 .../db-ui-elements-stencil/src/components/db-input/db-input.tsx | 2 +-
 .../db-ui-elements-stencil/src/components/db-radio/db-radio.tsx | 2 +-
 .../src/components/db-select/db-select.tsx                      | 2 +-
 .../src/components/db-textarea/db-textarea.tsx                  | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/db-ui-elements-stencil/src/components/db-input/db-input.tsx b/packages/db-ui-elements-stencil/src/components/db-input/db-input.tsx
index 1d7e82efa2..175685482f 100644
--- a/packages/db-ui-elements-stencil/src/components/db-input/db-input.tsx
+++ b/packages/db-ui-elements-stencil/src/components/db-input/db-input.tsx
@@ -138,7 +138,7 @@ export class DbInput {
   /**
    * The label-hidden attribute is a boolean attribute. When specified, the elements label gets visually hidden (it's important to still keep it displayed for accessibility reasons).
    */
-  @Prop({ reflect: false }) labelHidden: boolean;
+  @Prop({ reflect: true }) labelHidden: string;
 
   private handleChange(event) {
     this.dbChange.emit(event);
diff --git a/packages/db-ui-elements-stencil/src/components/db-radio/db-radio.tsx b/packages/db-ui-elements-stencil/src/components/db-radio/db-radio.tsx
index 904a3a567d..614739c93e 100644
--- a/packages/db-ui-elements-stencil/src/components/db-radio/db-radio.tsx
+++ b/packages/db-ui-elements-stencil/src/components/db-radio/db-radio.tsx
@@ -50,7 +50,7 @@ export class DbRadio {
   /**
    * The label-hidden attribute is a boolean attribute. When specified, the elements label gets visually hidden (it's important to still keep it displayed for accessibility reasons).
    */
-  @Prop({ reflect: false }) labelHidden: boolean;
+  @Prop({ reflect: true }) labelHidden: string;
 
   private handleChange(event) {
     this.dbChange.emit(event);
diff --git a/packages/db-ui-elements-stencil/src/components/db-select/db-select.tsx b/packages/db-ui-elements-stencil/src/components/db-select/db-select.tsx
index 338b2c3645..06f229d350 100644
--- a/packages/db-ui-elements-stencil/src/components/db-select/db-select.tsx
+++ b/packages/db-ui-elements-stencil/src/components/db-select/db-select.tsx
@@ -64,7 +64,7 @@ export class DbSelect {
   /**
    * The label-hidden attribute is a boolean attribute. When specified, the elements label gets visually hidden (it's important to still keep it displayed for accessibility reasons).
    */
-  @Prop({ reflect: false }) labelHidden: boolean;
+  @Prop({ reflect: true }) labelHidden: string;
 
   private handleChange(event) {
     this.value = event.target.value;
diff --git a/packages/db-ui-elements-stencil/src/components/db-textarea/db-textarea.tsx b/packages/db-ui-elements-stencil/src/components/db-textarea/db-textarea.tsx
index 00028f1877..50b58c9abe 100644
--- a/packages/db-ui-elements-stencil/src/components/db-textarea/db-textarea.tsx
+++ b/packages/db-ui-elements-stencil/src/components/db-textarea/db-textarea.tsx
@@ -115,7 +115,7 @@ export class DbTextarea {
   /**
    * The label-hidden attribute is a boolean attribute. When specified, the elements label gets visually hidden (it's important to still keep it displayed for accessibility reasons).
    */
-  @Prop({ reflect: false }) labelHidden: boolean;
+  @Prop({ reflect: true }) labelHidden: string;
 
   private handleChange(event) {
     this.dbChange.emit(event);

From 94e2f1f564afc43ebb80c5aeb27000805ce65178 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Fri, 12 Jan 2024 14:54:08 +0100
Subject: [PATCH 11/14] docs: updated readme

---
 .../db-ui-elements-stencil/src/components/db-card/readme.md     | 2 +-
 .../db-ui-elements-stencil/src/components/db-checkbox/readme.md | 2 +-
 .../db-ui-elements-stencil/src/components/db-input/readme.md    | 2 +-
 .../db-ui-elements-stencil/src/components/db-link/readme.md     | 2 +-
 .../db-ui-elements-stencil/src/components/db-radio/readme.md    | 2 +-
 .../db-ui-elements-stencil/src/components/db-select/readme.md   | 2 +-
 .../db-ui-elements-stencil/src/components/db-textarea/readme.md | 2 +-
 7 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/db-ui-elements-stencil/src/components/db-card/readme.md b/packages/db-ui-elements-stencil/src/components/db-card/readme.md
index d42f8cd02f..37544e6ad7 100644
--- a/packages/db-ui-elements-stencil/src/components/db-card/readme.md
+++ b/packages/db-ui-elements-stencil/src/components/db-card/readme.md
@@ -12,7 +12,7 @@
 | `alt`                    | `alt`               | The alt attribute for the image.                                                                                                       | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined`              |
 | `content`                | `content`           | The content represents the content of the card. It's optional and you can use slot for custom tags.                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined`              |
 | `header`                 | `header`            | The header represents the title of the card. It's optional and you can use slot for custom tags.                                       | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined`              |
-| `illustration`           | `illustration`      | The illustration which will show a predefined svg. -Development: enum can be generated with /scripts/illustration-generator-           | `"mask" \| "location" \| "error" \| "information" \| "search" \| "green" \| "wifi" \| "broken" \| "calendar" \| "compass" \| "heart" \| "chat" \| "buggy" \| "coffee-cup" \| "restaurant" \| "home" \| "timetable" \| "bicycle" \| "car" \| "local-train" \| "alarm-clock" \| "blizzard" \| "bus" \| "christmas" \| "clock-moving" \| "construction-sign" \| "construction-worker" \| "customer-feedback" \| "db-clock" \| "db-comfort-checkin" \| "db-ticket-shop" \| "db-ticket-vending-machine" \| "db-trainstation-with-train" \| "db-trainstation" \| "db-travel-center" \| "db-video-travel-center" \| "delayed" \| "der-kleine-ice" \| "diamond" \| "disruptions" \| "distance" \| "ffp2-mask-with-sign" \| "ffp2-mask" \| "fokus" \| "gaming-no-wire" \| "gaming" \| "green-energy" \| "handshake" \| "handwashing" \| "hashtag" \| "itinerary" \| "kiosk" \| "laptop" \| "lost-and-found" \| "luggage" \| "mini-store" \| "mobileticket-brand" \| "mobileticket-feature" \| "movie" \| "news" \| "newsletter" \| "newspaper" \| "no-handshaking" \| "onlineshop-brand" \| "onlineshop-feature" \| "onlineticket-brand" \| "onlineticket-feature" \| "passenger-rights" \| "podcast" \| "poi-berlin-copy" \| "poi-berlin" \| "savings" \| "scan-ticket-printout" \| "self-driving" \| "show-ticket" \| "single-entry" \| "smartphone" \| "sport" \| "suitcase" \| "tablet" \| "thunderstorm" \| "tickets" \| "tips" \| "transportation-advertising" \| "whats-schmutzig"` | `undefined`              |
+| `illustration`           | `illustration`      | The illustration which will show a predefined svg. -Development: enum can be generated with /scripts/illustration-generator-           | `"error" \| "mask" \| "location" \| "alarm-clock" \| "bicycle" \| "blizzard" \| "broken" \| "buggy" \| "bus" \| "calendar" \| "car" \| "chat" \| "christmas" \| "clock-moving" \| "coffee-cup" \| "compass" \| "construction-sign" \| "construction-worker" \| "customer-feedback" \| "db-clock" \| "db-comfort-checkin" \| "db-ticket-shop" \| "db-ticket-vending-machine" \| "db-trainstation-with-train" \| "db-trainstation" \| "db-travel-center" \| "db-video-travel-center" \| "delayed" \| "der-kleine-ice" \| "diamond" \| "disruptions" \| "distance" \| "ffp2-mask-with-sign" \| "ffp2-mask" \| "fokus" \| "gaming-no-wire" \| "gaming" \| "green-energy" \| "green" \| "handshake" \| "handwashing" \| "hashtag" \| "heart" \| "home" \| "information" \| "itinerary" \| "kiosk" \| "laptop" \| "local-train" \| "lost-and-found" \| "luggage" \| "mini-store" \| "mobileticket-brand" \| "mobileticket-feature" \| "movie" \| "news" \| "newsletter" \| "newspaper" \| "no-handshaking" \| "onlineshop-brand" \| "onlineshop-feature" \| "onlineticket-brand" \| "onlineticket-feature" \| "passenger-rights" \| "podcast" \| "poi-berlin-copy" \| "poi-berlin" \| "restaurant" \| "savings" \| "scan-ticket-printout" \| "search" \| "self-driving" \| "show-ticket" \| "single-entry" \| "smartphone" \| "sport" \| "suitcase" \| "tablet" \| "thunderstorm" \| "tickets" \| "timetable" \| "tips" \| "transportation-advertising" \| "whats-schmutzig" \| "wifi"` | `undefined`              |
 | `image`                  | `image`             | The prop image can be used instead of illustration to show a custom img.                                                               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined`              |
 | `uiCoreIllustrationPath` | `illustration-path` | The illustration-path defines the path to DB UI Core illustrations. If you want to use other/custom images use the image prop instead. | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `'./icons/illustrative'` |
 | `variant`                | `variant`           | The variant which is banner or title.                                                                                                  | `"banner" \| "title"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `'banner'`               |
diff --git a/packages/db-ui-elements-stencil/src/components/db-checkbox/readme.md b/packages/db-ui-elements-stencil/src/components/db-checkbox/readme.md
index 074f97885c..e0292d58ab 100644
--- a/packages/db-ui-elements-stencil/src/components/db-checkbox/readme.md
+++ b/packages/db-ui-elements-stencil/src/components/db-checkbox/readme.md
@@ -15,7 +15,7 @@
 | `indeterminate`      | `indeterminate` | The indeterminate attribute is a boolean attribute. When specified, the element is displayed in an indeterminate state (neither checked, nor unchecked).                                                                                                      | `boolean` | `undefined`            |
 | `input_id`           | `input_id`      | The input_id of a labelable form-related element in the same document as the label element. The first element in the document with an id matching the value of the for attribute is the labeled control for this label element, if it is a labelable element. | `string`  | `'checkbox-' + uuid()` |
 | `label` _(required)_ | `label`         | The label attribute specifies the caption of the input.                                                                                                                                                                                                       | `string`  | `undefined`            |
-| `labelHidden`        | `label-hidden`  | The label-hidden attribute is a boolean attribute. When specified, the elements label gets visually hidden (it's important to still keep it displayed for accessibility reasons).                                                                             | `boolean` | `undefined`            |
+| `labelHidden`        | `label-hidden`  | The label-hidden attribute is a boolean attribute. When specified, the elements label gets visually hidden (it's important to still keep it displayed for accessibility reasons).                                                                             | `string`  | `undefined`            |
 | `name` _(required)_  | `name`          | The name content attribute gives the name of the form control, as used in form submission and in the form element's elements object. If the attribute is specified, its value must not be the empty string.                                                   | `string`  | `undefined`            |
 | `required`           | `required`      | The required attribute is a boolean attribute. When specified, the element is required.                                                                                                                                                                       | `boolean` | `undefined`            |
 | `value`              | `value`         | The value content attribute gives the default value of the input element.                                                                                                                                                                                     | `string`  | `undefined`            |
diff --git a/packages/db-ui-elements-stencil/src/components/db-input/readme.md b/packages/db-ui-elements-stencil/src/components/db-input/readme.md
index e194933d3d..03a86aea88 100644
--- a/packages/db-ui-elements-stencil/src/components/db-input/readme.md
+++ b/packages/db-ui-elements-stencil/src/components/db-input/readme.md
@@ -18,7 +18,7 @@
 | `disabled`           | `disabled`     | The disabled attribute can be set to keep a user from clicking on the input.                                                                                                                                                                                               | `boolean`                                              | `false`             |
 | `input_id`           | `input_id`     | The input_id of a labelable form-related element in the same document as the label element. The first element in the document with an id matching the value of the for attribute is the labeled control for this label element, if it is a labelable element.              | `string`                                               | `'input-' + uuid()` |
 | `label` _(required)_ | `label`        | The label attribute specifies the caption of the input.                                                                                                                                                                                                                    | `string`                                               | `undefined`         |
-| `labelHidden`        | `label-hidden` | The label-hidden attribute is a boolean attribute. When specified, the elements label gets visually hidden (it's important to still keep it displayed for accessibility reasons).                                                                                          | `boolean`                                              | `undefined`         |
+| `labelHidden`        | `label-hidden` | The label-hidden attribute is a boolean attribute. When specified, the elements label gets visually hidden (it's important to still keep it displayed for accessibility reasons).                                                                                          | `string`                                               | `undefined`         |
 | `list`               | `list`         | The list attribute is used to identify an element that lists predefined options suggested to the user.                                                                                                                                                                     | `string`                                               | `undefined`         |
 | `max`                | `max`          | The max attribute specifies the maximum value that is sufficient for this input.                                                                                                                                                                                           | `number`                                               | `undefined`         |
 | `maxlength`          | `maxlength`    | /* The maxlength attribute, controlled by a dirty value flag, declares a limit on the number of characters a user can input.                                                                                                                                               | `number`                                               | `undefined`         |
diff --git a/packages/db-ui-elements-stencil/src/components/db-link/readme.md b/packages/db-ui-elements-stencil/src/components/db-link/readme.md
index a6e50e5762..936994377e 100644
--- a/packages/db-ui-elements-stencil/src/components/db-link/readme.md
+++ b/packages/db-ui-elements-stencil/src/components/db-link/readme.md
@@ -16,7 +16,7 @@
 | `iconVariant` | `icon-variant` | The variant attribute specifies the style and size of an icon.                                                                                                                                                                                                                                              | `"16-filled" \| "16-outline" \| "20-filled" \| "20-outline" \| "24-filled" \| "24-outline" \| "32-filled" \| "32-outline" \| "48-filled" \| "48-outline" \| "64-filled" \| "64-outline"`                                                                                                   | `'24-outline'` |
 | `icononly`    | `icononly`     | Define the text next to the icon specified via the icon Property to get hidden.                                                                                                                                                                                                                             | `boolean`                                                                                                                                                                                                                                                                                  | `undefined`    |
 | `media`       | `media`        | The media attribute describes for which media the target document was designed. The value must be a valid media query. The default, if the media attribute is omitted, is "all".                                                                                                                            | `string`                                                                                                                                                                                                                                                                                   | `undefined`    |
-| `rel`         | `rel`          | The rel attribute controls what kinds of links the elements create. The attribue's value must be a set of space-separated tokens. The allowed keywords and their meanings are defined below.                                                                                                                | `"section" \| "start" \| "help" \| "search" \| "contents" \| "prefetch" \| "bookmark" \| "copyright" \| "alternate" \| "appendix" \| "author" \| "chapter" \| "glossary" \| "index" \| "license" \| "next" \| "nofollow" \| "noopener" \| "noreferrer" \| "prev" \| "subsection" \| "tag"` | `undefined`    |
+| `rel`         | `rel`          | The rel attribute controls what kinds of links the elements create. The attribue's value must be a set of space-separated tokens. The allowed keywords and their meanings are defined below.                                                                                                                | `"help" \| "section" \| "start" \| "search" \| "alternate" \| "appendix" \| "author" \| "bookmark" \| "chapter" \| "contents" \| "copyright" \| "glossary" \| "index" \| "license" \| "next" \| "nofollow" \| "noopener" \| "noreferrer" \| "prefetch" \| "prev" \| "subsection" \| "tag"` | `undefined`    |
 | `target`      | `target`       | The target attribute gives the name of the browsing context that will be used. User agents use this name when following hyperlinks.                                                                                                                                                                         | `"_blank" \| "_parent" \| "_self" \| "_top"`                                                                                                                                                                                                                                               | `undefined`    |
 | `text`        | `text`         | The text attribute can be used to set the text inside the anchor tag without slot.                                                                                                                                                                                                                          | `string`                                                                                                                                                                                                                                                                                   | `undefined`    |
 | `type`        | `type`         | The type attribute, if present, gives the MIME type of the linked resource. The value must be a valid MIME type. User agents must not consider the type attribute authoritative — upon fetching the resource, user agents must not use metadata included in the link to the resource to determine its type. | `string`                                                                                                                                                                                                                                                                                   | `undefined`    |
diff --git a/packages/db-ui-elements-stencil/src/components/db-radio/readme.md b/packages/db-ui-elements-stencil/src/components/db-radio/readme.md
index 1217292ef2..68bc93ace4 100644
--- a/packages/db-ui-elements-stencil/src/components/db-radio/readme.md
+++ b/packages/db-ui-elements-stencil/src/components/db-radio/readme.md
@@ -14,7 +14,7 @@
 | `disabled`           | `disabled`     | The disabled attribute can be set to keep a user from clicking on the input.                                                                                                                                                                                  | `boolean` | `undefined`         |
 | `input_id`           | `input_id`     | The input_id of a labelable form-related element in the same document as the label element. The first element in the document with an id matching the value of the for attribute is the labeled control for this label element, if it is a labelable element. | `string`  | `'radio-' + uuid()` |
 | `label` _(required)_ | `label`        | The label attribute specifies the caption of the input.                                                                                                                                                                                                       | `string`  | `undefined`         |
-| `labelHidden`        | `label-hidden` | The label-hidden attribute is a boolean attribute. When specified, the elements label gets visually hidden (it's important to still keep it displayed for accessibility reasons).                                                                             | `boolean` | `undefined`         |
+| `labelHidden`        | `label-hidden` | The label-hidden attribute is a boolean attribute. When specified, the elements label gets visually hidden (it's important to still keep it displayed for accessibility reasons).                                                                             | `string`  | `undefined`         |
 | `name` _(required)_  | `name`         | The name content attribute gives the name of the form control, as used in form submission and in the form element's elements object. If the attribute is specified, its value must not be the empty string.                                                   | `string`  | `undefined`         |
 | `required`           | `required`     | The required attribute is a boolean attribute. When specified, the element is required.                                                                                                                                                                       | `boolean` | `undefined`         |
 | `value`              | `value`        | The value content attribute gives the default value of the input element.                                                                                                                                                                                     | `string`  | `undefined`         |
diff --git a/packages/db-ui-elements-stencil/src/components/db-select/readme.md b/packages/db-ui-elements-stencil/src/components/db-select/readme.md
index 215e95a4ba..225b5a4e70 100644
--- a/packages/db-ui-elements-stencil/src/components/db-select/readme.md
+++ b/packages/db-ui-elements-stencil/src/components/db-select/readme.md
@@ -13,7 +13,7 @@
 | `disabled`           | `disabled`     | The disabled attribute can be set to keep a user from clicking on the select.                                                                                                                                                                                                                                                                          | `boolean`                                              | `false`              |
 | `input_id`           | `input_id`     | The input_id of a labelable form-related element in the same document as the label element. The first element in the document with an id matching the value of the for attribute is the labeled control for this label element, if it is a labelable element.                                                                                          | `string`                                               | `'select-' + uuid()` |
 | `label` _(required)_ | `label`        | The label attribute specifies the caption of the selectbox.                                                                                                                                                                                                                                                                                            | `string`                                               | `undefined`          |
-| `labelHidden`        | `label-hidden` | The label-hidden attribute is a boolean attribute. When specified, the elements label gets visually hidden (it's important to still keep it displayed for accessibility reasons).                                                                                                                                                                      | `boolean`                                              | `undefined`          |
+| `labelHidden`        | `label-hidden` | The label-hidden attribute is a boolean attribute. When specified, the elements label gets visually hidden (it's important to still keep it displayed for accessibility reasons).                                                                                                                                                                      | `string`                                               | `undefined`          |
 | `multiple`           | `multiple`     | If the multiple attribute is present, then the select element represents a control for selecting zero or more options from the list of options. If the attribute is absent, then the select element represents a control for selecting a single option from the list of options.                                                                       | `boolean`                                              | `false`              |
 | `name` _(required)_  | `name`         | The name attribute gives the name of the form control, as used in form submission and in the form element's elements object. If the attribute is specified, its value must not be the empty string.                                                                                                                                                    | `string`                                               | `undefined`          |
 | `required`           | `required`     | When the required attribute specified, the user will be required to select a value before submitting the form.                                                                                                                                                                                                                                         | `boolean`                                              | `false`              |
diff --git a/packages/db-ui-elements-stencil/src/components/db-textarea/readme.md b/packages/db-ui-elements-stencil/src/components/db-textarea/readme.md
index 577ace4ee2..277e2dab5d 100644
--- a/packages/db-ui-elements-stencil/src/components/db-textarea/readme.md
+++ b/packages/db-ui-elements-stencil/src/components/db-textarea/readme.md
@@ -18,7 +18,7 @@
 | `disabled`           | `disabled`     | The disabled attribute can be set to keep a user from clicking on the input.                                                                                                                                                                                               | `boolean`                                              | `undefined`            |
 | `input_id`           | `input_id`     | The input_id of a labelable form-related element in the same document as the label element. The first element in the document with an id matching the value of the for attribute is the labeled control for this label element, if it is a labelable element.              | `string`                                               | `'textarea-' + uuid()` |
 | `label` _(required)_ | `label`        | The label attribute specifies the caption of the input.                                                                                                                                                                                                                    | `string`                                               | `undefined`            |
-| `labelHidden`        | `label-hidden` | The label-hidden attribute is a boolean attribute. When specified, the elements label gets visually hidden (it's important to still keep it displayed for accessibility reasons).                                                                                          | `boolean`                                              | `undefined`            |
+| `labelHidden`        | `label-hidden` | The label-hidden attribute is a boolean attribute. When specified, the elements label gets visually hidden (it's important to still keep it displayed for accessibility reasons).                                                                                          | `string`                                               | `undefined`            |
 | `maxlength`          | `maxlength`    | /* The maxlength attribute, controlled by a dirty value flag, declares a limit on the number of characters a user can input.                                                                                                                                               | `number`                                               | `undefined`            |
 | `minlength`          | `minlength`    | /* The minlength attribute, when it applies, is a form control minlength attribute.                                                                                                                                                                                        | `number`                                               | `undefined`            |
 | `name` _(required)_  | `name`         | The name content attribute gives the name of the form control, as used in form submission and in the form element's elements object. If the attribute is specified, its value must not be the empty string.                                                                | `string`                                               | `undefined`            |

From 6298e99b4095c46192b571960a0ed05e00f03019 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Thu, 18 Jan 2024 17:05:14 +0100
Subject: [PATCH 12/14] refactor: added the new property to storybook story

---
 .../components/db-checkbox/stories/db-checkbox.demo.stories.ts | 3 +++
 .../src/components/db-input/stories/db-input.demo.stories.ts   | 3 +++
 .../src/components/db-radio/stories/db-radio.demo.stories.ts   | 3 +++
 .../src/components/db-select/stories/db-select.demo.stories.ts | 3 +++
 .../components/db-textarea/stories/db-textarea.demo.stories.ts | 3 +++
 5 files changed, 15 insertions(+)

diff --git a/packages/db-ui-elements-stencil/src/components/db-checkbox/stories/db-checkbox.demo.stories.ts b/packages/db-ui-elements-stencil/src/components/db-checkbox/stories/db-checkbox.demo.stories.ts
index 674b8f8249..93b45ad655 100644
--- a/packages/db-ui-elements-stencil/src/components/db-checkbox/stories/db-checkbox.demo.stories.ts
+++ b/packages/db-ui-elements-stencil/src/components/db-checkbox/stories/db-checkbox.demo.stories.ts
@@ -27,6 +27,9 @@ export default {
     },
     value: {
       control: 'text'
+    },
+    labelHidden: {
+      control: 'boolean'
     }
   }
 };
diff --git a/packages/db-ui-elements-stencil/src/components/db-input/stories/db-input.demo.stories.ts b/packages/db-ui-elements-stencil/src/components/db-input/stories/db-input.demo.stories.ts
index 0b26cf1b07..fc1d4563bb 100644
--- a/packages/db-ui-elements-stencil/src/components/db-input/stories/db-input.demo.stories.ts
+++ b/packages/db-ui-elements-stencil/src/components/db-input/stories/db-input.demo.stories.ts
@@ -65,6 +65,9 @@ export default {
     },
     value: {
       control: 'text'
+    },
+    labelHidden: {
+      control: 'boolean'
     }
   }
 };
diff --git a/packages/db-ui-elements-stencil/src/components/db-radio/stories/db-radio.demo.stories.ts b/packages/db-ui-elements-stencil/src/components/db-radio/stories/db-radio.demo.stories.ts
index 46b028182d..c636543ebf 100644
--- a/packages/db-ui-elements-stencil/src/components/db-radio/stories/db-radio.demo.stories.ts
+++ b/packages/db-ui-elements-stencil/src/components/db-radio/stories/db-radio.demo.stories.ts
@@ -27,6 +27,9 @@ export default {
     },
     value: {
       control: 'text'
+    },
+    labelHidden: {
+      control: 'boolean'
     }
   }
 };
diff --git a/packages/db-ui-elements-stencil/src/components/db-select/stories/db-select.demo.stories.ts b/packages/db-ui-elements-stencil/src/components/db-select/stories/db-select.demo.stories.ts
index 1bc6412453..01158ca758 100644
--- a/packages/db-ui-elements-stencil/src/components/db-select/stories/db-select.demo.stories.ts
+++ b/packages/db-ui-elements-stencil/src/components/db-select/stories/db-select.demo.stories.ts
@@ -34,6 +34,9 @@ export default {
     },
     size: {
       control: 'number'
+    },
+    labelHidden: {
+      control: 'boolean'
     }
   }
 };
diff --git a/packages/db-ui-elements-stencil/src/components/db-textarea/stories/db-textarea.demo.stories.ts b/packages/db-ui-elements-stencil/src/components/db-textarea/stories/db-textarea.demo.stories.ts
index ac3347fb97..872d23d19e 100644
--- a/packages/db-ui-elements-stencil/src/components/db-textarea/stories/db-textarea.demo.stories.ts
+++ b/packages/db-ui-elements-stencil/src/components/db-textarea/stories/db-textarea.demo.stories.ts
@@ -62,6 +62,9 @@ export default {
         type: 'select'
       },
       defaultValue: ''
+    },
+    labelHidden: {
+      control: 'boolean'
     }
   }
 };

From 6cf57a832211be5462e3518d969bbd62b0dd0cd7 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Thu, 18 Jan 2024 17:14:03 +0100
Subject: [PATCH 13/14] refactor: added the new property to storybook story

---
 .../db-checkbox/stories/db-checkbox.demo.stories.ts         | 6 ++++--
 .../components/db-input/stories/db-input.demo.stories.ts    | 6 ++++--
 .../components/db-radio/stories/db-radio.demo.stories.ts    | 6 ++++--
 .../components/db-select/stories/db-select.demo.stories.ts  | 6 ++++--
 .../db-textarea/stories/db-textarea.demo.stories.ts         | 6 ++++--
 5 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/packages/db-ui-elements-stencil/src/components/db-checkbox/stories/db-checkbox.demo.stories.ts b/packages/db-ui-elements-stencil/src/components/db-checkbox/stories/db-checkbox.demo.stories.ts
index 93b45ad655..8715db286f 100644
--- a/packages/db-ui-elements-stencil/src/components/db-checkbox/stories/db-checkbox.demo.stories.ts
+++ b/packages/db-ui-elements-stencil/src/components/db-checkbox/stories/db-checkbox.demo.stories.ts
@@ -41,7 +41,8 @@ export const LiveDemo = ({
   label,
   name,
   required,
-  value
+  value,
+  labelHidden
 }) => {
   return `<db-checkbox
     ${autofocus ? 'autofocus=' + autofocus : ''}
@@ -50,5 +51,6 @@ export const LiveDemo = ({
     ${label ? 'label=' + label : ''}
     ${name ? 'name=' + name : ''}
     ${required ? 'required=' + required : ''}
-    ${value ? 'value=' + value : ''}></db-checkbox>`;
+    ${value ? 'value=' + value : ''}
+    ${labelHidden ? 'label-hidden=' + labelHidden : ''}></db-checkbox>`;
 };
diff --git a/packages/db-ui-elements-stencil/src/components/db-input/stories/db-input.demo.stories.ts b/packages/db-ui-elements-stencil/src/components/db-input/stories/db-input.demo.stories.ts
index fc1d4563bb..190cda33e2 100644
--- a/packages/db-ui-elements-stencil/src/components/db-input/stories/db-input.demo.stories.ts
+++ b/packages/db-ui-elements-stencil/src/components/db-input/stories/db-input.demo.stories.ts
@@ -89,7 +89,8 @@ export const LiveDemo = ({
   readonly,
   required,
   size,
-  value
+  value,
+  labelHidden
 }) => {
   return `<db-input
         ${ariainvalid ? 'ariainvalid=' + ariainvalid : ''}
@@ -108,5 +109,6 @@ export const LiveDemo = ({
         ${readonly ? 'readonly=' + readonly : ''}
         ${required ? 'required=' + required : ''}
         ${size ? 'size=' + size : ''}
-        ${value ? 'value=' + value : ''}></db-input>`;
+        ${value ? 'value=' + value : ''}
+        ${labelHidden ? 'label-hidden=' + labelHidden : ''}></db-input>`;
 };
diff --git a/packages/db-ui-elements-stencil/src/components/db-radio/stories/db-radio.demo.stories.ts b/packages/db-ui-elements-stencil/src/components/db-radio/stories/db-radio.demo.stories.ts
index c636543ebf..825179bce5 100644
--- a/packages/db-ui-elements-stencil/src/components/db-radio/stories/db-radio.demo.stories.ts
+++ b/packages/db-ui-elements-stencil/src/components/db-radio/stories/db-radio.demo.stories.ts
@@ -41,7 +41,8 @@ export const LiveDemo = ({
   label,
   name,
   required,
-  value
+  value,
+  labelHidden
 }) => {
   return `<db-radio
       ${autofocus ? 'autofocus=' + autofocus : ''}
@@ -50,5 +51,6 @@ export const LiveDemo = ({
       ${label ? 'label=' + label : ''}
       ${name ? 'name=' + name : ''}
       ${required ? 'required=' + required : ''}
-      ${value ? 'value=' + value : ''}></db-radio>`;
+      ${value ? 'value=' + value : ''}
+      ${labelHidden ? 'label-hidden=' + labelHidden : ''}></db-radio>`;
 };
diff --git a/packages/db-ui-elements-stencil/src/components/db-select/stories/db-select.demo.stories.ts b/packages/db-ui-elements-stencil/src/components/db-select/stories/db-select.demo.stories.ts
index 01158ca758..e9f4f536c5 100644
--- a/packages/db-ui-elements-stencil/src/components/db-select/stories/db-select.demo.stories.ts
+++ b/packages/db-ui-elements-stencil/src/components/db-select/stories/db-select.demo.stories.ts
@@ -49,7 +49,8 @@ export const LiveDemo = ({
   multiple,
   name,
   required,
-  size
+  size,
+  labelHidden
 }) => {
   return `<db-select
   ${ariainvalid ? 'ariainvalid=' + ariainvalid : ''}
@@ -59,7 +60,8 @@ export const LiveDemo = ({
   ${multiple ? 'multiple=' + multiple : ''}
   ${name ? 'name=' + name : ''}
   ${required ? 'required=' + required : ''}
-  ${size ? 'size=' + size : ''}>
+  ${size ? 'size=' + size : ''}
+  ${labelHidden ? 'label-hidden=' + labelHidden : ''}>
     <option selected>Option 1</option>
     <option>Option 2</option>
     <option>Option 3</option>
diff --git a/packages/db-ui-elements-stencil/src/components/db-textarea/stories/db-textarea.demo.stories.ts b/packages/db-ui-elements-stencil/src/components/db-textarea/stories/db-textarea.demo.stories.ts
index 872d23d19e..658d107555 100644
--- a/packages/db-ui-elements-stencil/src/components/db-textarea/stories/db-textarea.demo.stories.ts
+++ b/packages/db-ui-elements-stencil/src/components/db-textarea/stories/db-textarea.demo.stories.ts
@@ -85,7 +85,8 @@ export const LiveDemo = ({
   readonly,
   required,
   rows,
-  wrap
+  wrap,
+  labelHidden
 }) => {
   return `<db-textarea
         ${ariainvalid ? 'autocomplete=' + ariainvalid : ''}
@@ -103,5 +104,6 @@ export const LiveDemo = ({
         ${readonly ? 'readonly=' + readonly : ''}
         ${required ? 'required=' + required : ''}
         ${rows ? 'rows=' + rows : ''}
-        ${wrap ? 'wrap=' + wrap : ''}></db-textarea>`;
+        ${wrap ? 'wrap=' + wrap : ''}
+        ${labelHidden ? 'label-hidden=' + labelHidden : ''}></db-textarea>`;
 };

From 769f8d2f29a9be5013c4cc67294ff885844d9817 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Tue, 23 Jan 2024 10:57:42 +0100
Subject: [PATCH 14/14] refactor: updated readme files

---
 .../db-ui-elements-stencil/src/components/db-card/readme.md     | 2 +-
 .../db-ui-elements-stencil/src/components/db-link/readme.md     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/db-ui-elements-stencil/src/components/db-card/readme.md b/packages/db-ui-elements-stencil/src/components/db-card/readme.md
index 6494b55665..d42f8cd02f 100644
--- a/packages/db-ui-elements-stencil/src/components/db-card/readme.md
+++ b/packages/db-ui-elements-stencil/src/components/db-card/readme.md
@@ -12,7 +12,7 @@
 | `alt`                    | `alt`               | The alt attribute for the image.                                                                                                       | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined`              |
 | `content`                | `content`           | The content represents the content of the card. It's optional and you can use slot for custom tags.                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined`              |
 | `header`                 | `header`            | The header represents the title of the card. It's optional and you can use slot for custom tags.                                       | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined`              |
-| `illustration`           | `illustration`      | The illustration which will show a predefined svg. -Development: enum can be generated with /scripts/illustration-generator-           | `"alarm-clock" \| "bicycle" \| "blizzard" \| "broken" \| "buggy" \| "bus" \| "calendar" \| "car" \| "chat" \| "christmas" \| "clock-moving" \| "coffee-cup" \| "compass" \| "construction-sign" \| "construction-worker" \| "customer-feedback" \| "db-clock" \| "db-comfort-checkin" \| "db-ticket-shop" \| "db-ticket-vending-machine" \| "db-trainstation-with-train" \| "db-trainstation" \| "db-travel-center" \| "db-video-travel-center" \| "delayed" \| "der-kleine-ice" \| "diamond" \| "disruptions" \| "distance" \| "error" \| "ffp2-mask-with-sign" \| "ffp2-mask" \| "fokus" \| "gaming-no-wire" \| "gaming" \| "green-energy" \| "green" \| "handshake" \| "handwashing" \| "hashtag" \| "heart" \| "home" \| "information" \| "itinerary" \| "kiosk" \| "laptop" \| "local-train" \| "location" \| "lost-and-found" \| "luggage" \| "mask" \| "mini-store" \| "mobileticket-brand" \| "mobileticket-feature" \| "movie" \| "news" \| "newsletter" \| "newspaper" \| "no-handshaking" \| "onlineshop-brand" \| "onlineshop-feature" \| "onlineticket-brand" \| "onlineticket-feature" \| "passenger-rights" \| "podcast" \| "poi-berlin-copy" \| "poi-berlin" \| "restaurant" \| "savings" \| "scan-ticket-printout" \| "search" \| "self-driving" \| "show-ticket" \| "single-entry" \| "smartphone" \| "sport" \| "suitcase" \| "tablet" \| "thunderstorm" \| "tickets" \| "timetable" \| "tips" \| "transportation-advertising" \| "whats-schmutzig" \| "wifi"` | `undefined`              |
+| `illustration`           | `illustration`      | The illustration which will show a predefined svg. -Development: enum can be generated with /scripts/illustration-generator-           | `"mask" \| "location" \| "error" \| "information" \| "search" \| "green" \| "wifi" \| "broken" \| "calendar" \| "compass" \| "heart" \| "chat" \| "buggy" \| "coffee-cup" \| "restaurant" \| "home" \| "timetable" \| "bicycle" \| "car" \| "local-train" \| "alarm-clock" \| "blizzard" \| "bus" \| "christmas" \| "clock-moving" \| "construction-sign" \| "construction-worker" \| "customer-feedback" \| "db-clock" \| "db-comfort-checkin" \| "db-ticket-shop" \| "db-ticket-vending-machine" \| "db-trainstation-with-train" \| "db-trainstation" \| "db-travel-center" \| "db-video-travel-center" \| "delayed" \| "der-kleine-ice" \| "diamond" \| "disruptions" \| "distance" \| "ffp2-mask-with-sign" \| "ffp2-mask" \| "fokus" \| "gaming-no-wire" \| "gaming" \| "green-energy" \| "handshake" \| "handwashing" \| "hashtag" \| "itinerary" \| "kiosk" \| "laptop" \| "lost-and-found" \| "luggage" \| "mini-store" \| "mobileticket-brand" \| "mobileticket-feature" \| "movie" \| "news" \| "newsletter" \| "newspaper" \| "no-handshaking" \| "onlineshop-brand" \| "onlineshop-feature" \| "onlineticket-brand" \| "onlineticket-feature" \| "passenger-rights" \| "podcast" \| "poi-berlin-copy" \| "poi-berlin" \| "savings" \| "scan-ticket-printout" \| "self-driving" \| "show-ticket" \| "single-entry" \| "smartphone" \| "sport" \| "suitcase" \| "tablet" \| "thunderstorm" \| "tickets" \| "tips" \| "transportation-advertising" \| "whats-schmutzig"` | `undefined`              |
 | `image`                  | `image`             | The prop image can be used instead of illustration to show a custom img.                                                               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined`              |
 | `uiCoreIllustrationPath` | `illustration-path` | The illustration-path defines the path to DB UI Core illustrations. If you want to use other/custom images use the image prop instead. | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `'./icons/illustrative'` |
 | `variant`                | `variant`           | The variant which is banner or title.                                                                                                  | `"banner" \| "title"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `'banner'`               |
diff --git a/packages/db-ui-elements-stencil/src/components/db-link/readme.md b/packages/db-ui-elements-stencil/src/components/db-link/readme.md
index b81eea3c2c..9c80730fb8 100644
--- a/packages/db-ui-elements-stencil/src/components/db-link/readme.md
+++ b/packages/db-ui-elements-stencil/src/components/db-link/readme.md
@@ -16,7 +16,7 @@
 | `iconVariant` | `icon-variant` | The variant attribute specifies the style and size of an icon.                                                                                                                                                                                                                                              | `"16-filled" \| "16-outline" \| "20-filled" \| "20-outline" \| "24-filled" \| "24-outline" \| "32-filled" \| "32-outline" \| "48-filled" \| "48-outline" \| "64-filled" \| "64-outline"`                                                                                                   | `'24-outline'` |
 | `icononly`    | `icononly`     | Define the text next to the icon specified via the icon Property to get hidden.                                                                                                                                                                                                                             | `boolean`                                                                                                                                                                                                                                                                                  | `undefined`    |
 | `media`       | `media`        | The media attribute describes for which media the target document was designed. The value must be a valid media query. The default, if the media attribute is omitted, is "all".                                                                                                                            | `string`                                                                                                                                                                                                                                                                                   | `undefined`    |
-| `rel`         | `rel`          | The rel attribute controls what kinds of links the elements create. The attribue's value must be a set of space-separated tokens. The allowed keywords and their meanings are defined below.                                                                                                                | `"search" \| "alternate" \| "appendix" \| "author" \| "bookmark" \| "chapter" \| "contents" \| "copyright" \| "glossary" \| "help" \| "index" \| "license" \| "next" \| "nofollow" \| "noopener" \| "noreferrer" \| "prefetch" \| "prev" \| "section" \| "start" \| "subsection" \| "tag"` | `undefined`    |
+| `rel`         | `rel`          | The rel attribute controls what kinds of links the elements create. The attribue's value must be a set of space-separated tokens. The allowed keywords and their meanings are defined below.                                                                                                                | `"section" \| "start" \| "help" \| "search" \| "contents" \| "prefetch" \| "tag" \| "bookmark" \| "copyright" \| "alternate" \| "appendix" \| "author" \| "chapter" \| "glossary" \| "index" \| "license" \| "next" \| "nofollow" \| "noopener" \| "noreferrer" \| "prev" \| "subsection"` | `undefined`    |
 | `target`      | `target`       | The target attribute gives the name of the browsing context that will be used. User agents use this name when following hyperlinks.                                                                                                                                                                         | `"_blank" \| "_parent" \| "_self" \| "_top"`                                                                                                                                                                                                                                               | `undefined`    |
 | `text`        | `text`         | The text attribute can be used to set the text inside the anchor tag without slot.                                                                                                                                                                                                                          | `string`                                                                                                                                                                                                                                                                                   | `undefined`    |
 | `type`        | `type`         | The type attribute, if present, gives the MIME type of the linked resource. The value must be a valid MIME type. User agents must not consider the type attribute authoritative — upon fetching the resource, user agents must not use metadata included in the link to the resource to determine its type. | `string`                                                                                                                                                                                                                                                                                   | `undefined`    |