From 990f372bf9bcfb0e096f3b044e3e4696b8677593 Mon Sep 17 00:00:00 2001
From: Myrta Sakellariou <myrta.sakellariou@gmail.com>
Date: Tue, 29 Apr 2025 19:32:07 +0200
Subject: [PATCH 01/26] chore(documentation): investigate cross-component
 referencing

---
 packages/components/src/components.d.ts       | 71 +++++++++++++++++++
 .../post-test-form/post-test-form.scss        |  1 +
 .../post-test-form/post-test-form.tsx         | 34 +++++++++
 .../src/components/post-test-form/readme.md   | 33 +++++++++
 .../post-test-input/post-test-input.scss      |  1 +
 .../post-test-input/post-test-input.tsx       | 23 ++++++
 .../src/components/post-test-input/readme.md  | 30 ++++++++
 .../post-test-label/post-test-label.scss      |  1 +
 .../post-test-label/post-test-label.tsx       | 23 ++++++
 .../src/components/post-test-label/readme.md  | 30 ++++++++
 packages/components/src/index.html            |  1 +
 .../src/stories/guidelines/ccr/ccr.docs.mdx   |  8 +++
 .../src/stories/guidelines/ccr/ccr.stories.ts | 16 +++++
 13 files changed, 272 insertions(+)
 create mode 100644 packages/components/src/components/post-test-form/post-test-form.scss
 create mode 100644 packages/components/src/components/post-test-form/post-test-form.tsx
 create mode 100644 packages/components/src/components/post-test-form/readme.md
 create mode 100644 packages/components/src/components/post-test-input/post-test-input.scss
 create mode 100644 packages/components/src/components/post-test-input/post-test-input.tsx
 create mode 100644 packages/components/src/components/post-test-input/readme.md
 create mode 100644 packages/components/src/components/post-test-label/post-test-label.scss
 create mode 100644 packages/components/src/components/post-test-label/post-test-label.tsx
 create mode 100644 packages/components/src/components/post-test-label/readme.md
 create mode 100644 packages/documentation/src/stories/guidelines/ccr/ccr.docs.mdx
 create mode 100644 packages/documentation/src/stories/guidelines/ccr/ccr.stories.ts

diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
index 24d0efacf7..1f0604ccff 100644
--- a/packages/components/src/components.d.ts
+++ b/packages/components/src/components.d.ts
@@ -464,6 +464,28 @@ export namespace Components {
          */
         "variant": 'white' | 'info' | 'success' | 'error' | 'warning' | 'yellow';
     }
+    interface PostTestForm {
+        /**
+          * Defines the id
+         */
+        "theId"?: string;
+        /**
+          * Defines the id2
+         */
+        "theId2"?: string;
+    }
+    interface PostTestInput {
+        /**
+          * Defines the inputId
+         */
+        "inputId"?: string;
+    }
+    interface PostTestLabel {
+        /**
+          * Defines the for
+         */
+        "for"?: string;
+    }
     interface PostTogglebutton {
         /**
           * If `true`, the button is in the "on" state, otherwise it is in the "off" state.
@@ -859,6 +881,24 @@ declare global {
         prototype: HTMLPostTagElement;
         new (): HTMLPostTagElement;
     };
+    interface HTMLPostTestFormElement extends Components.PostTestForm, HTMLStencilElement {
+    }
+    var HTMLPostTestFormElement: {
+        prototype: HTMLPostTestFormElement;
+        new (): HTMLPostTestFormElement;
+    };
+    interface HTMLPostTestInputElement extends Components.PostTestInput, HTMLStencilElement {
+    }
+    var HTMLPostTestInputElement: {
+        prototype: HTMLPostTestInputElement;
+        new (): HTMLPostTestInputElement;
+    };
+    interface HTMLPostTestLabelElement extends Components.PostTestLabel, HTMLStencilElement {
+    }
+    var HTMLPostTestLabelElement: {
+        prototype: HTMLPostTestLabelElement;
+        new (): HTMLPostTestLabelElement;
+    };
     interface HTMLPostTogglebuttonElement extends Components.PostTogglebutton, HTMLStencilElement {
     }
     var HTMLPostTogglebuttonElement: {
@@ -905,6 +945,9 @@ declare global {
         "post-tab-panel": HTMLPostTabPanelElement;
         "post-tabs": HTMLPostTabsElement;
         "post-tag": HTMLPostTagElement;
+        "post-test-form": HTMLPostTestFormElement;
+        "post-test-input": HTMLPostTestInputElement;
+        "post-test-label": HTMLPostTestLabelElement;
         "post-togglebutton": HTMLPostTogglebuttonElement;
         "post-tooltip": HTMLPostTooltipElement;
     }
@@ -1303,6 +1346,28 @@ declare namespace LocalJSX {
          */
         "variant"?: 'white' | 'info' | 'success' | 'error' | 'warning' | 'yellow';
     }
+    interface PostTestForm {
+        /**
+          * Defines the id
+         */
+        "theId"?: string;
+        /**
+          * Defines the id2
+         */
+        "theId2"?: string;
+    }
+    interface PostTestInput {
+        /**
+          * Defines the inputId
+         */
+        "inputId"?: string;
+    }
+    interface PostTestLabel {
+        /**
+          * Defines the for
+         */
+        "for"?: string;
+    }
     interface PostTogglebutton {
         /**
           * If `true`, the button is in the "on" state, otherwise it is in the "off" state.
@@ -1357,6 +1422,9 @@ declare namespace LocalJSX {
         "post-tab-panel": PostTabPanel;
         "post-tabs": PostTabs;
         "post-tag": PostTag;
+        "post-test-form": PostTestForm;
+        "post-test-input": PostTestInput;
+        "post-test-label": PostTestLabel;
         "post-togglebutton": PostTogglebutton;
         "post-tooltip": PostTooltip;
     }
@@ -1404,6 +1472,9 @@ declare module "@stencil/core" {
             "post-tab-panel": LocalJSX.PostTabPanel & JSXBase.HTMLAttributes<HTMLPostTabPanelElement>;
             "post-tabs": LocalJSX.PostTabs & JSXBase.HTMLAttributes<HTMLPostTabsElement>;
             "post-tag": LocalJSX.PostTag & JSXBase.HTMLAttributes<HTMLPostTagElement>;
+            "post-test-form": LocalJSX.PostTestForm & JSXBase.HTMLAttributes<HTMLPostTestFormElement>;
+            "post-test-input": LocalJSX.PostTestInput & JSXBase.HTMLAttributes<HTMLPostTestInputElement>;
+            "post-test-label": LocalJSX.PostTestLabel & JSXBase.HTMLAttributes<HTMLPostTestLabelElement>;
             "post-togglebutton": LocalJSX.PostTogglebutton & JSXBase.HTMLAttributes<HTMLPostTogglebuttonElement>;
             "post-tooltip": LocalJSX.PostTooltip & JSXBase.HTMLAttributes<HTMLPostTooltipElement>;
         }
diff --git a/packages/components/src/components/post-test-form/post-test-form.scss b/packages/components/src/components/post-test-form/post-test-form.scss
new file mode 100644
index 0000000000..4cd9a272da
--- /dev/null
+++ b/packages/components/src/components/post-test-form/post-test-form.scss
@@ -0,0 +1 @@
+@use '@swisspost/design-system-styles/core' as post;
diff --git a/packages/components/src/components/post-test-form/post-test-form.tsx b/packages/components/src/components/post-test-form/post-test-form.tsx
new file mode 100644
index 0000000000..5be2601253
--- /dev/null
+++ b/packages/components/src/components/post-test-form/post-test-form.tsx
@@ -0,0 +1,34 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+import { version } from '@root/package.json';
+
+@Component({
+  tag: 'post-test-form',
+  styleUrl: 'post-test-form.scss',
+  shadow: true,
+})
+export class PostTestForm {
+  /**
+   * Defines the id
+   */
+  @Prop() theId?: string;
+
+  /**
+   * Defines the id2
+   */
+  @Prop() theId2?: string;
+
+  render() {
+    return (
+      <Host data-version={version}>
+        <post-test-input inputId={this.theId}></post-test-input>
+        <post-test-label for={this.theId}></post-test-label>
+        <div class="form-floating">
+          <input class="form-control" id={this.theId2} value="Parent ShadowDOM" />
+          <label class="form-label" htmlFor={this.theId2}>
+            Parent ShadowDOM
+          </label>
+        </div>
+      </Host>
+    );
+  }
+}
diff --git a/packages/components/src/components/post-test-form/readme.md b/packages/components/src/components/post-test-form/readme.md
new file mode 100644
index 0000000000..9e0cc1031c
--- /dev/null
+++ b/packages/components/src/components/post-test-form/readme.md
@@ -0,0 +1,33 @@
+# post-test-form
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property | Attribute  | Description     | Type     | Default     |
+| -------- | ---------- | --------------- | -------- | ----------- |
+| `theId`  | `the-id`   | Defines the id  | `string` | `undefined` |
+| `theId2` | `the-id-2` | Defines the id2 | `string` | `undefined` |
+
+
+## Dependencies
+
+### Depends on
+
+- [post-test-input](../post-test-input)
+- [post-test-label](../post-test-label)
+
+### Graph
+```mermaid
+graph TD;
+  post-test-form --> post-test-input
+  post-test-form --> post-test-label
+  style post-test-form fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/components/src/components/post-test-input/post-test-input.scss b/packages/components/src/components/post-test-input/post-test-input.scss
new file mode 100644
index 0000000000..4cd9a272da
--- /dev/null
+++ b/packages/components/src/components/post-test-input/post-test-input.scss
@@ -0,0 +1 @@
+@use '@swisspost/design-system-styles/core' as post;
diff --git a/packages/components/src/components/post-test-input/post-test-input.tsx b/packages/components/src/components/post-test-input/post-test-input.tsx
new file mode 100644
index 0000000000..aa49f88221
--- /dev/null
+++ b/packages/components/src/components/post-test-input/post-test-input.tsx
@@ -0,0 +1,23 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+import { version } from '@root/package.json';
+
+@Component({
+  tag: 'post-test-input',
+  styleUrl: 'post-test-input.scss',
+  shadow: true,
+})
+export class PostTestInput {
+  /**
+   * Defines the inputId
+   */
+  @Prop() inputId?: string;
+
+  render() {
+    return (
+      <Host data-version={version}>
+        <input type="text" id={this.inputId} value="Input ShadowDOM"></input>
+        <slot></slot>
+      </Host>
+    );
+  }
+}
diff --git a/packages/components/src/components/post-test-input/readme.md b/packages/components/src/components/post-test-input/readme.md
new file mode 100644
index 0000000000..95c6d6d3d2
--- /dev/null
+++ b/packages/components/src/components/post-test-input/readme.md
@@ -0,0 +1,30 @@
+# post-test-input
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property  | Attribute  | Description         | Type     | Default     |
+| --------- | ---------- | ------------------- | -------- | ----------- |
+| `inputId` | `input-id` | Defines the inputId | `string` | `undefined` |
+
+
+## Dependencies
+
+### Used by
+
+ - [post-test-form](../post-test-form)
+
+### Graph
+```mermaid
+graph TD;
+  post-test-form --> post-test-input
+  style post-test-input fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/components/src/components/post-test-label/post-test-label.scss b/packages/components/src/components/post-test-label/post-test-label.scss
new file mode 100644
index 0000000000..4cd9a272da
--- /dev/null
+++ b/packages/components/src/components/post-test-label/post-test-label.scss
@@ -0,0 +1 @@
+@use '@swisspost/design-system-styles/core' as post;
diff --git a/packages/components/src/components/post-test-label/post-test-label.tsx b/packages/components/src/components/post-test-label/post-test-label.tsx
new file mode 100644
index 0000000000..05a0d03041
--- /dev/null
+++ b/packages/components/src/components/post-test-label/post-test-label.tsx
@@ -0,0 +1,23 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+import { version } from '@root/package.json';
+
+@Component({
+  tag: 'post-test-label',
+  styleUrl: 'post-test-label.scss',
+  shadow: true,
+})
+export class PostTestLabel {
+  /**
+   * Defines the for
+   */
+  @Prop() for?: string;
+
+  render() {
+    return (
+      <Host data-version={version}>
+        <label htmlFor={this.for}>Label ShadowDOM</label>
+        <slot></slot>
+      </Host>
+    );
+  }
+}
diff --git a/packages/components/src/components/post-test-label/readme.md b/packages/components/src/components/post-test-label/readme.md
new file mode 100644
index 0000000000..f083cd1caf
--- /dev/null
+++ b/packages/components/src/components/post-test-label/readme.md
@@ -0,0 +1,30 @@
+# post-avatar
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property | Attribute | Description     | Type     | Default     |
+| -------- | --------- | --------------- | -------- | ----------- |
+| `for`    | `for`     | Defines the for | `string` | `undefined` |
+
+
+## Dependencies
+
+### Used by
+
+ - [post-test-form](../post-test-form)
+
+### Graph
+```mermaid
+graph TD;
+  post-test-form --> post-test-label
+  style post-test-label fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/components/src/index.html b/packages/components/src/index.html
index f64c03976c..3358a60d0a 100644
--- a/packages/components/src/index.html
+++ b/packages/components/src/index.html
@@ -178,5 +178,6 @@ <h1>Components package playground</h1>
       <option value="compact">Post compact</option>
     </select>
     <hr />
+    <post-test-form the-id="12345" the-id2="67890"> </post-test-form>
   </body>
 </html>
diff --git a/packages/documentation/src/stories/guidelines/ccr/ccr.docs.mdx b/packages/documentation/src/stories/guidelines/ccr/ccr.docs.mdx
new file mode 100644
index 0000000000..975f56bd1c
--- /dev/null
+++ b/packages/documentation/src/stories/guidelines/ccr/ccr.docs.mdx
@@ -0,0 +1,8 @@
+import { Meta, Canvas } from '@storybook/blocks';
+import * as CCR from './ccr.stories';
+
+<Meta of={CCR} />
+
+# Cross Component Referencing
+
+## for/id `<post-megadropdown>`, `<post-tooltip>`
diff --git a/packages/documentation/src/stories/guidelines/ccr/ccr.stories.ts b/packages/documentation/src/stories/guidelines/ccr/ccr.stories.ts
new file mode 100644
index 0000000000..03cbba90e8
--- /dev/null
+++ b/packages/documentation/src/stories/guidelines/ccr/ccr.stories.ts
@@ -0,0 +1,16 @@
+import { StoryObj } from '@storybook/web-components';
+import { MetaExtended } from '@root/types';
+
+const meta: MetaExtended = {
+  id: '76ade552-2c03-4d6d-9dce-28daa340f7d3',
+  title: 'Guidelines/Cross Component Referencing',
+  parameters: {
+    badges: [],
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};

From 3f6d8327ebd8d9170fd723edc9baec204edc9b93 Mon Sep 17 00:00:00 2001
From: Myrta Sakellariou <myrta.sakellariou@gmail.com>
Date: Mon, 5 May 2025 14:14:38 +0200
Subject: [PATCH 02/26] documenting examples

---
 packages/components/src/components.d.ts       | 124 ++++++++++++--
 .../post-test-example/post-test-example.scss  |   1 +
 .../post-test-example/post-test-example.tsx   |  24 +++
 .../components/post-test-example/readme.md    |  17 ++
 .../post-test-example2.scss                   |   1 +
 .../post-test-example2/post-test-example2.tsx |  66 ++++++++
 .../components/post-test-example2/readme.md   |  19 +++
 .../post-test-example3.scss                   |   1 +
 .../post-test-example3/post-test-example3.tsx |  60 +++++++
 .../components/post-test-example3/readme.md   |  19 +++
 .../post-test-form/post-test-form.scss        |   1 -
 .../post-test-form/post-test-form.tsx         |  34 ----
 .../src/components/post-test-form/readme.md   |  33 ----
 .../post-test-input/post-test-input.scss      |   2 +-
 .../post-test-input/post-test-input.tsx       |  51 +++++-
 .../src/components/post-test-input/readme.md  |  21 +--
 .../post-test-label/post-test-label.scss      |   2 +-
 .../post-test-label/post-test-label.tsx       |  30 +++-
 .../src/components/post-test-label/readme.md  |  21 +--
 .../src/stories/guidelines/ccr/ccr.docs.mdx   | 106 +++++++++++-
 .../src/stories/guidelines/ccr/ccr.stories.ts | 160 +++++++++++++++++-
 .../stories/guidelines/ccr/ccr.styles.scss    |   0
 .../guidelines/ccr/example0.sample.html       |   5 +
 .../guidelines/ccr/example1.sample.html       |   5 +
 .../guidelines/ccr/example2.sample.html       |   7 +
 .../guidelines/ccr/example3.sample.html       |   7 +
 .../guidelines/ccr/example4.sample.html       |   6 +
 .../guidelines/ccr/example5.sample.html       |   7 +
 .../guidelines/ccr/example6.sample.html       |   8 +
 29 files changed, 715 insertions(+), 123 deletions(-)
 create mode 100644 packages/components/src/components/post-test-example/post-test-example.scss
 create mode 100644 packages/components/src/components/post-test-example/post-test-example.tsx
 create mode 100644 packages/components/src/components/post-test-example/readme.md
 create mode 100644 packages/components/src/components/post-test-example2/post-test-example2.scss
 create mode 100644 packages/components/src/components/post-test-example2/post-test-example2.tsx
 create mode 100644 packages/components/src/components/post-test-example2/readme.md
 create mode 100644 packages/components/src/components/post-test-example3/post-test-example3.scss
 create mode 100644 packages/components/src/components/post-test-example3/post-test-example3.tsx
 create mode 100644 packages/components/src/components/post-test-example3/readme.md
 delete mode 100644 packages/components/src/components/post-test-form/post-test-form.scss
 delete mode 100644 packages/components/src/components/post-test-form/post-test-form.tsx
 delete mode 100644 packages/components/src/components/post-test-form/readme.md
 create mode 100644 packages/documentation/src/stories/guidelines/ccr/ccr.styles.scss
 create mode 100644 packages/documentation/src/stories/guidelines/ccr/example0.sample.html
 create mode 100644 packages/documentation/src/stories/guidelines/ccr/example1.sample.html
 create mode 100644 packages/documentation/src/stories/guidelines/ccr/example2.sample.html
 create mode 100644 packages/documentation/src/stories/guidelines/ccr/example3.sample.html
 create mode 100644 packages/documentation/src/stories/guidelines/ccr/example4.sample.html
 create mode 100644 packages/documentation/src/stories/guidelines/ccr/example5.sample.html
 create mode 100644 packages/documentation/src/stories/guidelines/ccr/example6.sample.html

diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
index 1f0604ccff..3a329be517 100644
--- a/packages/components/src/components.d.ts
+++ b/packages/components/src/components.d.ts
@@ -464,27 +464,67 @@ export namespace Components {
          */
         "variant": 'white' | 'info' | 'success' | 'error' | 'warning' | 'yellow';
     }
-    interface PostTestForm {
+    interface PostTestExample {
+        /**
+          * Defines the id
+         */
+        "theId"?: string;
+    }
+    interface PostTestExample2 {
+        /**
+          * Defines the text of the retrieved label
+         */
+        "foundLabelText"?: string;
+        /**
+          * Defines the id
+         */
+        "theId"?: string;
+        /**
+          * Defines the selected workaround
+         */
+        "workaround"?: string;
+    }
+    interface PostTestExample3 {
+        /**
+          * Defines the text of the retrieved label
+         */
+        "foundLabelText"?: string;
         /**
           * Defines the id
          */
         "theId"?: string;
         /**
-          * Defines the id2
+          * Defines the selected workaround
          */
-        "theId2"?: string;
+        "workaround"?: string;
     }
     interface PostTestInput {
+        /**
+          * Defines the selected workaround
+         */
+        "foundLabelText"?: string;
         /**
           * Defines the inputId
          */
         "inputId"?: string;
+        /**
+          * Defines the selected workaround
+         */
+        "workaround"?: string;
     }
     interface PostTestLabel {
         /**
           * Defines the for
          */
         "for"?: string;
+        /**
+          * Defines the label text
+         */
+        "labelText": string;
+        /**
+          * Defines the selected workaround
+         */
+        "workaround"?: string;
     }
     interface PostTogglebutton {
         /**
@@ -881,11 +921,23 @@ declare global {
         prototype: HTMLPostTagElement;
         new (): HTMLPostTagElement;
     };
-    interface HTMLPostTestFormElement extends Components.PostTestForm, HTMLStencilElement {
+    interface HTMLPostTestExampleElement extends Components.PostTestExample, HTMLStencilElement {
+    }
+    var HTMLPostTestExampleElement: {
+        prototype: HTMLPostTestExampleElement;
+        new (): HTMLPostTestExampleElement;
+    };
+    interface HTMLPostTestExample2Element extends Components.PostTestExample2, HTMLStencilElement {
     }
-    var HTMLPostTestFormElement: {
-        prototype: HTMLPostTestFormElement;
-        new (): HTMLPostTestFormElement;
+    var HTMLPostTestExample2Element: {
+        prototype: HTMLPostTestExample2Element;
+        new (): HTMLPostTestExample2Element;
+    };
+    interface HTMLPostTestExample3Element extends Components.PostTestExample3, HTMLStencilElement {
+    }
+    var HTMLPostTestExample3Element: {
+        prototype: HTMLPostTestExample3Element;
+        new (): HTMLPostTestExample3Element;
     };
     interface HTMLPostTestInputElement extends Components.PostTestInput, HTMLStencilElement {
     }
@@ -945,7 +997,9 @@ declare global {
         "post-tab-panel": HTMLPostTabPanelElement;
         "post-tabs": HTMLPostTabsElement;
         "post-tag": HTMLPostTagElement;
-        "post-test-form": HTMLPostTestFormElement;
+        "post-test-example": HTMLPostTestExampleElement;
+        "post-test-example2": HTMLPostTestExample2Element;
+        "post-test-example3": HTMLPostTestExample3Element;
         "post-test-input": HTMLPostTestInputElement;
         "post-test-label": HTMLPostTestLabelElement;
         "post-togglebutton": HTMLPostTogglebuttonElement;
@@ -1346,27 +1400,67 @@ declare namespace LocalJSX {
          */
         "variant"?: 'white' | 'info' | 'success' | 'error' | 'warning' | 'yellow';
     }
-    interface PostTestForm {
+    interface PostTestExample {
+        /**
+          * Defines the id
+         */
+        "theId"?: string;
+    }
+    interface PostTestExample2 {
+        /**
+          * Defines the text of the retrieved label
+         */
+        "foundLabelText"?: string;
+        /**
+          * Defines the id
+         */
+        "theId"?: string;
+        /**
+          * Defines the selected workaround
+         */
+        "workaround"?: string;
+    }
+    interface PostTestExample3 {
+        /**
+          * Defines the text of the retrieved label
+         */
+        "foundLabelText"?: string;
         /**
           * Defines the id
          */
         "theId"?: string;
         /**
-          * Defines the id2
+          * Defines the selected workaround
          */
-        "theId2"?: string;
+        "workaround"?: string;
     }
     interface PostTestInput {
+        /**
+          * Defines the selected workaround
+         */
+        "foundLabelText"?: string;
         /**
           * Defines the inputId
          */
         "inputId"?: string;
+        /**
+          * Defines the selected workaround
+         */
+        "workaround"?: string;
     }
     interface PostTestLabel {
         /**
           * Defines the for
          */
         "for"?: string;
+        /**
+          * Defines the label text
+         */
+        "labelText"?: string;
+        /**
+          * Defines the selected workaround
+         */
+        "workaround"?: string;
     }
     interface PostTogglebutton {
         /**
@@ -1422,7 +1516,9 @@ declare namespace LocalJSX {
         "post-tab-panel": PostTabPanel;
         "post-tabs": PostTabs;
         "post-tag": PostTag;
-        "post-test-form": PostTestForm;
+        "post-test-example": PostTestExample;
+        "post-test-example2": PostTestExample2;
+        "post-test-example3": PostTestExample3;
         "post-test-input": PostTestInput;
         "post-test-label": PostTestLabel;
         "post-togglebutton": PostTogglebutton;
@@ -1472,7 +1568,9 @@ declare module "@stencil/core" {
             "post-tab-panel": LocalJSX.PostTabPanel & JSXBase.HTMLAttributes<HTMLPostTabPanelElement>;
             "post-tabs": LocalJSX.PostTabs & JSXBase.HTMLAttributes<HTMLPostTabsElement>;
             "post-tag": LocalJSX.PostTag & JSXBase.HTMLAttributes<HTMLPostTagElement>;
-            "post-test-form": LocalJSX.PostTestForm & JSXBase.HTMLAttributes<HTMLPostTestFormElement>;
+            "post-test-example": LocalJSX.PostTestExample & JSXBase.HTMLAttributes<HTMLPostTestExampleElement>;
+            "post-test-example2": LocalJSX.PostTestExample2 & JSXBase.HTMLAttributes<HTMLPostTestExample2Element>;
+            "post-test-example3": LocalJSX.PostTestExample3 & JSXBase.HTMLAttributes<HTMLPostTestExample3Element>;
             "post-test-input": LocalJSX.PostTestInput & JSXBase.HTMLAttributes<HTMLPostTestInputElement>;
             "post-test-label": LocalJSX.PostTestLabel & JSXBase.HTMLAttributes<HTMLPostTestLabelElement>;
             "post-togglebutton": LocalJSX.PostTogglebutton & JSXBase.HTMLAttributes<HTMLPostTogglebuttonElement>;
diff --git a/packages/components/src/components/post-test-example/post-test-example.scss b/packages/components/src/components/post-test-example/post-test-example.scss
new file mode 100644
index 0000000000..28612a51ef
--- /dev/null
+++ b/packages/components/src/components/post-test-example/post-test-example.scss
@@ -0,0 +1 @@
+@use '@swisspost/design-system-styles/post-default.scss';
diff --git a/packages/components/src/components/post-test-example/post-test-example.tsx b/packages/components/src/components/post-test-example/post-test-example.tsx
new file mode 100644
index 0000000000..093f159b3f
--- /dev/null
+++ b/packages/components/src/components/post-test-example/post-test-example.tsx
@@ -0,0 +1,24 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+import { version } from '@root/package.json';
+
+@Component({
+  tag: 'post-test-example',
+  styleUrl: 'post-test-example.scss',
+  shadow: true,
+})
+export class PostTestExample {
+  /**
+   * Defines the id
+   */
+  @Prop() theId?: string;
+
+  render() {
+    return (
+      // Shadow DOM - Same Shadow DOM
+      <Host data-version={version}>
+        <input id={this.theId} value="" placeholder="Placeholder" />
+        <label htmlFor={this.theId}>Label Text</label>
+      </Host>
+    );
+  }
+}
diff --git a/packages/components/src/components/post-test-example/readme.md b/packages/components/src/components/post-test-example/readme.md
new file mode 100644
index 0000000000..4126c2f6b3
--- /dev/null
+++ b/packages/components/src/components/post-test-example/readme.md
@@ -0,0 +1,17 @@
+# post-test-form
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property | Attribute | Description    | Type     | Default     |
+| -------- | --------- | -------------- | -------- | ----------- |
+| `theId`  | `the-id`  | Defines the id | `string` | `undefined` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/components/src/components/post-test-example2/post-test-example2.scss b/packages/components/src/components/post-test-example2/post-test-example2.scss
new file mode 100644
index 0000000000..28612a51ef
--- /dev/null
+++ b/packages/components/src/components/post-test-example2/post-test-example2.scss
@@ -0,0 +1 @@
+@use '@swisspost/design-system-styles/post-default.scss';
diff --git a/packages/components/src/components/post-test-example2/post-test-example2.tsx b/packages/components/src/components/post-test-example2/post-test-example2.tsx
new file mode 100644
index 0000000000..2d7dbfc01c
--- /dev/null
+++ b/packages/components/src/components/post-test-example2/post-test-example2.tsx
@@ -0,0 +1,66 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+import { version } from '@root/package.json';
+
+declare interface HTMLInputElementPlus extends HTMLInputElement {
+  ariaLabelledByElements: Element | Element[] | null;
+}
+
+@Component({
+  tag: 'post-test-example2',
+  styleUrl: 'post-test-example2.scss',
+  shadow: true,
+})
+export class PostTestExample2 {
+  /**
+   * Defines the id
+   */
+  @Prop() theId?: string;
+
+  /**
+   * Defines the selected workaround
+   */
+  @Prop() workaround?: string;
+
+  /**
+   * Defines the text of the retrieved label
+   */
+  @Prop() foundLabelText?: string;
+
+  private updateWorkaround() {
+    const lightDOMLabel = document.querySelector(`label[for="${this.theId}"]`);
+
+    if (this.workaround == 'ariamixin') {
+      const customElement = document.querySelector(`post-test-example2[the-id="${this.theId}"]`);
+      const internalInput = customElement.shadowRoot.querySelector('input') as HTMLInputElementPlus;
+      internalInput.ariaLabelledByElements = [lightDOMLabel];
+    }
+    if (this.workaround == 'arialabel') {
+      const lightDOMLabel = document.querySelector(`label[for="${this.theId}"]`);
+      if (lightDOMLabel) {
+        this.foundLabelText = lightDOMLabel.textContent;
+      }
+    }
+  }
+  componentDidLoad() {
+    this.updateWorkaround();
+  }
+
+  componentDidUpdate() {
+    this.updateWorkaround();
+  }
+
+  render() {
+    return (
+      //Slotted Content - Shadow DOM (since slotted content is in the Light DOM)
+      <Host data-version={version}>
+        <input
+          id={this.theId}
+          value=""
+          placeholder="Placeholder"
+          aria-label={this.workaround == 'arialabel' ? this.foundLabelText : ''}
+        />
+        <slot></slot>
+      </Host>
+    );
+  }
+}
diff --git a/packages/components/src/components/post-test-example2/readme.md b/packages/components/src/components/post-test-example2/readme.md
new file mode 100644
index 0000000000..40a871a653
--- /dev/null
+++ b/packages/components/src/components/post-test-example2/readme.md
@@ -0,0 +1,19 @@
+# post-test-form
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property         | Attribute          | Description                             | Type     | Default     |
+| ---------------- | ------------------ | --------------------------------------- | -------- | ----------- |
+| `foundLabelText` | `found-label-text` | Defines the text of the retrieved label | `string` | `undefined` |
+| `theId`          | `the-id`           | Defines the id                          | `string` | `undefined` |
+| `workaround`     | `workaround`       | Defines the selected workaround         | `string` | `undefined` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/components/src/components/post-test-example3/post-test-example3.scss b/packages/components/src/components/post-test-example3/post-test-example3.scss
new file mode 100644
index 0000000000..28612a51ef
--- /dev/null
+++ b/packages/components/src/components/post-test-example3/post-test-example3.scss
@@ -0,0 +1 @@
+@use '@swisspost/design-system-styles/post-default.scss';
diff --git a/packages/components/src/components/post-test-example3/post-test-example3.tsx b/packages/components/src/components/post-test-example3/post-test-example3.tsx
new file mode 100644
index 0000000000..372e29d998
--- /dev/null
+++ b/packages/components/src/components/post-test-example3/post-test-example3.tsx
@@ -0,0 +1,60 @@
+import { Component, h, Host, Prop, Element } from '@stencil/core';
+import { version } from '@root/package.json';
+
+@Component({
+  tag: 'post-test-example3',
+  styleUrl: 'post-test-example3.scss',
+  shadow: true,
+})
+export class PostTestExample3 {
+  @Element() host: HTMLPostTestExample3Element;
+
+  /**
+   * Defines the id
+   */
+  @Prop() theId?: string;
+
+  /**
+   * Defines the selected workaround
+   */
+  @Prop() workaround?: string;
+
+  /**
+   * Defines the text of the retrieved label
+   */
+  @Prop() foundLabelText?: string;
+
+  private setAriaLabel() {
+    const selector = `#${this.theId}`;
+    const targetInput = document.querySelector(selector);
+
+    const lightDOMLabel = this.host.shadowRoot.querySelector(`label[for="${this.theId}"]`);
+
+    if (lightDOMLabel) {
+      this.foundLabelText = lightDOMLabel.textContent;
+    }
+    if (this.workaround == 'arialabel') {
+      targetInput.setAttribute('aria-label', this.foundLabelText);
+    } else {
+      targetInput.removeAttribute('aria-label');
+    }
+  }
+
+  componentDidLoad() {
+    this.setAriaLabel();
+  }
+
+  componentDidUpdate() {
+    this.setAriaLabel();
+  }
+
+  render() {
+    return (
+      // Shadow DOM - Light DOM
+      <Host data-version={version}>
+        <label htmlFor={this.theId}>Label Text</label>
+        <slot></slot>
+      </Host>
+    );
+  }
+}
diff --git a/packages/components/src/components/post-test-example3/readme.md b/packages/components/src/components/post-test-example3/readme.md
new file mode 100644
index 0000000000..40a871a653
--- /dev/null
+++ b/packages/components/src/components/post-test-example3/readme.md
@@ -0,0 +1,19 @@
+# post-test-form
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property         | Attribute          | Description                             | Type     | Default     |
+| ---------------- | ------------------ | --------------------------------------- | -------- | ----------- |
+| `foundLabelText` | `found-label-text` | Defines the text of the retrieved label | `string` | `undefined` |
+| `theId`          | `the-id`           | Defines the id                          | `string` | `undefined` |
+| `workaround`     | `workaround`       | Defines the selected workaround         | `string` | `undefined` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/components/src/components/post-test-form/post-test-form.scss b/packages/components/src/components/post-test-form/post-test-form.scss
deleted file mode 100644
index 4cd9a272da..0000000000
--- a/packages/components/src/components/post-test-form/post-test-form.scss
+++ /dev/null
@@ -1 +0,0 @@
-@use '@swisspost/design-system-styles/core' as post;
diff --git a/packages/components/src/components/post-test-form/post-test-form.tsx b/packages/components/src/components/post-test-form/post-test-form.tsx
deleted file mode 100644
index 5be2601253..0000000000
--- a/packages/components/src/components/post-test-form/post-test-form.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Component, h, Host, Prop } from '@stencil/core';
-import { version } from '@root/package.json';
-
-@Component({
-  tag: 'post-test-form',
-  styleUrl: 'post-test-form.scss',
-  shadow: true,
-})
-export class PostTestForm {
-  /**
-   * Defines the id
-   */
-  @Prop() theId?: string;
-
-  /**
-   * Defines the id2
-   */
-  @Prop() theId2?: string;
-
-  render() {
-    return (
-      <Host data-version={version}>
-        <post-test-input inputId={this.theId}></post-test-input>
-        <post-test-label for={this.theId}></post-test-label>
-        <div class="form-floating">
-          <input class="form-control" id={this.theId2} value="Parent ShadowDOM" />
-          <label class="form-label" htmlFor={this.theId2}>
-            Parent ShadowDOM
-          </label>
-        </div>
-      </Host>
-    );
-  }
-}
diff --git a/packages/components/src/components/post-test-form/readme.md b/packages/components/src/components/post-test-form/readme.md
deleted file mode 100644
index 9e0cc1031c..0000000000
--- a/packages/components/src/components/post-test-form/readme.md
+++ /dev/null
@@ -1,33 +0,0 @@
-# post-test-form
-
-
-
-<!-- Auto Generated Below -->
-
-
-## Properties
-
-| Property | Attribute  | Description     | Type     | Default     |
-| -------- | ---------- | --------------- | -------- | ----------- |
-| `theId`  | `the-id`   | Defines the id  | `string` | `undefined` |
-| `theId2` | `the-id-2` | Defines the id2 | `string` | `undefined` |
-
-
-## Dependencies
-
-### Depends on
-
-- [post-test-input](../post-test-input)
-- [post-test-label](../post-test-label)
-
-### Graph
-```mermaid
-graph TD;
-  post-test-form --> post-test-input
-  post-test-form --> post-test-label
-  style post-test-form fill:#f9f,stroke:#333,stroke-width:4px
-```
-
-----------------------------------------------
-
-*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/components/src/components/post-test-input/post-test-input.scss b/packages/components/src/components/post-test-input/post-test-input.scss
index 4cd9a272da..28612a51ef 100644
--- a/packages/components/src/components/post-test-input/post-test-input.scss
+++ b/packages/components/src/components/post-test-input/post-test-input.scss
@@ -1 +1 @@
-@use '@swisspost/design-system-styles/core' as post;
+@use '@swisspost/design-system-styles/post-default.scss';
diff --git a/packages/components/src/components/post-test-input/post-test-input.tsx b/packages/components/src/components/post-test-input/post-test-input.tsx
index aa49f88221..76f3d4fe88 100644
--- a/packages/components/src/components/post-test-input/post-test-input.tsx
+++ b/packages/components/src/components/post-test-input/post-test-input.tsx
@@ -1,21 +1,68 @@
-import { Component, h, Host, Prop } from '@stencil/core';
+import { Component, h, Host, Prop, Element } from '@stencil/core';
 import { version } from '@root/package.json';
 
+declare interface HTMLInputElementPlus extends HTMLInputElement {
+  ariaLabelledByElements: Element | Element[] | null;
+}
+
 @Component({
   tag: 'post-test-input',
   styleUrl: 'post-test-input.scss',
   shadow: true,
 })
 export class PostTestInput {
+  @Element() host: HTMLPostTestInputElement;
   /**
    * Defines the inputId
    */
   @Prop() inputId?: string;
 
+  /**
+   * Defines the selected workaround
+   */
+  @Prop() workaround?: string;
+
+  /**
+   * Defines the selected workaround
+   */
+  @Prop() foundLabelText?: string;
+
+  private updateWorkaround() {
+    const lightDOMLabel = document.querySelector(`label[for="${this.inputId}"]`);
+    const customElement = document.querySelector(`post-test-input[input-id="${this.inputId}"]`);
+    const internalInput = customElement.shadowRoot.querySelector('input') as HTMLInputElementPlus;
+    if (this.workaround == 'ariamixin') {
+      internalInput.ariaLabelledByElements = [lightDOMLabel];
+    } else {
+      internalInput.ariaLabelledByElements = null;
+    }
+    if (this.workaround == 'arialabel') {
+      const lightDOMLabel = document.querySelector(`label[for="${this.inputId}"]`);
+      console.log(lightDOMLabel);
+      if (lightDOMLabel) {
+        this.foundLabelText = lightDOMLabel.textContent;
+      }
+    }
+  }
+
+  componentDidLoad() {
+    this.updateWorkaround();
+  }
+
+  componentDidUpdate() {
+    this.updateWorkaround();
+  }
+
   render() {
     return (
       <Host data-version={version}>
-        <input type="text" id={this.inputId} value="Input ShadowDOM"></input>
+        <input
+          type="text"
+          id={this.inputId}
+          value=""
+          placeholder="Placeholder"
+          aria-label={this.workaround == 'arialabel' ? this.foundLabelText : ''}
+        ></input>
         <slot></slot>
       </Host>
     );
diff --git a/packages/components/src/components/post-test-input/readme.md b/packages/components/src/components/post-test-input/readme.md
index 95c6d6d3d2..563058ba43 100644
--- a/packages/components/src/components/post-test-input/readme.md
+++ b/packages/components/src/components/post-test-input/readme.md
@@ -7,24 +7,13 @@
 
 ## Properties
 
-| Property  | Attribute  | Description         | Type     | Default     |
-| --------- | ---------- | ------------------- | -------- | ----------- |
-| `inputId` | `input-id` | Defines the inputId | `string` | `undefined` |
+| Property         | Attribute          | Description                     | Type     | Default     |
+| ---------------- | ------------------ | ------------------------------- | -------- | ----------- |
+| `foundLabelText` | `found-label-text` | Defines the selected workaround | `string` | `undefined` |
+| `inputId`        | `input-id`         | Defines the inputId             | `string` | `undefined` |
+| `workaround`     | `workaround`       | Defines the selected workaround | `string` | `undefined` |
 
 
-## Dependencies
-
-### Used by
-
- - [post-test-form](../post-test-form)
-
-### Graph
-```mermaid
-graph TD;
-  post-test-form --> post-test-input
-  style post-test-input fill:#f9f,stroke:#333,stroke-width:4px
-```
-
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/components/src/components/post-test-label/post-test-label.scss b/packages/components/src/components/post-test-label/post-test-label.scss
index 4cd9a272da..28612a51ef 100644
--- a/packages/components/src/components/post-test-label/post-test-label.scss
+++ b/packages/components/src/components/post-test-label/post-test-label.scss
@@ -1 +1 @@
-@use '@swisspost/design-system-styles/core' as post;
+@use '@swisspost/design-system-styles/post-default.scss';
diff --git a/packages/components/src/components/post-test-label/post-test-label.tsx b/packages/components/src/components/post-test-label/post-test-label.tsx
index 05a0d03041..e1685988ee 100644
--- a/packages/components/src/components/post-test-label/post-test-label.tsx
+++ b/packages/components/src/components/post-test-label/post-test-label.tsx
@@ -12,10 +12,38 @@ export class PostTestLabel {
    */
   @Prop() for?: string;
 
+  /**
+   * Defines the label text
+   */
+  @Prop() labelText: string;
+
+  /**
+   * Defines the selected workaround
+   */
+  @Prop() workaround?: string;
+
+  private setAriaLabel() {
+    const selector = `#${this.for}`;
+    const targetInput = document.querySelector(selector);
+    if (this.workaround == 'arialabel') {
+      targetInput.setAttribute('aria-label', this.labelText);
+    } else {
+      targetInput.removeAttribute('aria-label');
+    }
+  }
+
+  componentDidLoad() {
+    this.setAriaLabel();
+  }
+
+  componentDidUpdate() {
+    this.setAriaLabel();
+  }
+
   render() {
     return (
       <Host data-version={version}>
-        <label htmlFor={this.for}>Label ShadowDOM</label>
+        <label htmlFor={this.for}>{this.labelText}</label>
         <slot></slot>
       </Host>
     );
diff --git a/packages/components/src/components/post-test-label/readme.md b/packages/components/src/components/post-test-label/readme.md
index f083cd1caf..b0336611a0 100644
--- a/packages/components/src/components/post-test-label/readme.md
+++ b/packages/components/src/components/post-test-label/readme.md
@@ -7,24 +7,13 @@
 
 ## Properties
 
-| Property | Attribute | Description     | Type     | Default     |
-| -------- | --------- | --------------- | -------- | ----------- |
-| `for`    | `for`     | Defines the for | `string` | `undefined` |
+| Property     | Attribute    | Description                     | Type     | Default     |
+| ------------ | ------------ | ------------------------------- | -------- | ----------- |
+| `for`        | `for`        | Defines the for                 | `string` | `undefined` |
+| `labelText`  | `label-text` | Defines the label text          | `string` | `undefined` |
+| `workaround` | `workaround` | Defines the selected workaround | `string` | `undefined` |
 
 
-## Dependencies
-
-### Used by
-
- - [post-test-form](../post-test-form)
-
-### Graph
-```mermaid
-graph TD;
-  post-test-form --> post-test-label
-  style post-test-label fill:#f9f,stroke:#333,stroke-width:4px
-```
-
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/documentation/src/stories/guidelines/ccr/ccr.docs.mdx b/packages/documentation/src/stories/guidelines/ccr/ccr.docs.mdx
index 975f56bd1c..cfcd3db631 100644
--- a/packages/documentation/src/stories/guidelines/ccr/ccr.docs.mdx
+++ b/packages/documentation/src/stories/guidelines/ccr/ccr.docs.mdx
@@ -1,8 +1,108 @@
-import { Meta, Canvas } from '@storybook/blocks';
+import { Meta, Canvas, Source, Controls } from '@storybook/blocks';
 import * as CCR from './ccr.stories';
+import example0 from './example0.sample.html?raw';
+import example1 from './example1.sample.html?raw';
+import example2 from './example2.sample.html?raw';
+import example3 from './example3.sample.html?raw';
+import example4 from './example4.sample.html?raw';
+import example5 from './example5.sample.html?raw';
+import example6 from './example6.sample.html?raw';
+import './ccr.styles.scss';
 
 <Meta of={CCR} />
 
-# Cross Component Referencing
+# Cross Component Referencing Cases
 
-## for/id `<post-megadropdown>`, `<post-tooltip>`
+## 1. `for`/ `id`
+
+#### I. Referencing Within the Same DOM Tree
+
+<ul>
+<li>Light DOM → Light DOM</li>
+<Canvas of={CCR.ExampleHTML} />
+<b>Rendered Code Example</b>
+<Source code={example0} language="html" />
+
+<li>Shadow DOM → Same Shadow DOM</li>
+<Canvas of={CCR.Example1} />
+<b>Rendered Code Example</b>
+<Source code={example1} language="html" />
+</ul>
+
+#### II. Referencing From Outside a Shadow DOM Into That Shadow DOM
+
+<ul>
+  <li>Light DOM → Shadow DOM</li>
+  <Canvas of={CCR.Example2} sourceState="shown" />
+  <div className="hide-col-default">
+    <Controls of={CCR.Example2} />
+  </div>
+  <b>Rendered Code Example</b>
+  <Source code={example2} language="html" />
+  <li>Slotted Content → Shadow DOM</li>
+  <Canvas of={CCR.Example3} />
+  <div className="hide-col-default">
+    <Controls of={CCR.Example3} />
+  </div>
+  <Source code={example3} language="html" />
+</ul>
+
+<h5>→ Workarounds</h5>
+
+<ul>
+  <li>Stick to the light and set the `shadow:false`.</li>
+  <li>
+    Use the `ariaLabelledByElements`: This has limited coverage  (<a href="https://caniuse.com/mdn-api_element_arialabelledbyelements"> ariaLabelledByElements Usage</a>) and works only if the referencing element is in the light DOM and the referenced element in the shadowDom.
+  </li>
+    <li>Use `aria-label` with the label text directly on the `<input>` element. </li>
+</ul>
+
+### III. Referencing From Inside a Shadow DOM Out to the Light DOM
+
+<ul>
+  <li>Shadow DOM → Light DOM</li>
+  <Canvas of={CCR.Example4} />
+  <div className="hide-col-default">
+    <Controls of={CCR.Example4} />
+  </div>
+  <Source code={example4} language="html" />
+  <li>Shadow DOM → Slotted Content</li>
+  <Canvas of={CCR.Example5} />
+  <div className="hide-col-default">
+    <Controls of={CCR.Example5} />
+  </div>
+  <Source code={example5} language="html" />
+</ul>
+
+<h5>→ Workarounds</h5>
+
+<ul>
+  <li>Stick to the light and set the `shadow:false`. </li>
+    <li>Use `aria-label` with the label text directly on the `<input>` element.</li>
+</ul>
+
+### IV. Referencing From One Shadow DOM To Another Shadow DOM
+
+<ul>
+  <li>Shadow DOM → Other Shadow DOM</li>
+  <Canvas of={CCR.Example6} />
+  <div className="hide-col-default">
+    <Controls of={CCR.Example6} />
+  </div>
+  <Source code={example6} language="html" />
+</ul>
+
+<h5>→ Workarounds</h5>
+
+<ul>
+  <li>Set both components to `shadow:false`. </li>
+   <li>Use `aria-label` with the label text directly on the `<input>` element.</li>
+</ul>
+
+## 2. `aria-labelledby`
+
+## 3. `aria-describedby`
+
+## 4. `aria-controls`
+
+## 3. `role`
diff --git a/packages/documentation/src/stories/guidelines/ccr/ccr.stories.ts b/packages/documentation/src/stories/guidelines/ccr/ccr.stories.ts
index 03cbba90e8..db67b56250 100644
--- a/packages/documentation/src/stories/guidelines/ccr/ccr.stories.ts
+++ b/packages/documentation/src/stories/guidelines/ccr/ccr.stories.ts
@@ -1,5 +1,6 @@
-import { StoryObj } from '@storybook/web-components';
+import { StoryObj, Args } from '@storybook/web-components';
 import { MetaExtended } from '@root/types';
+import { html } from 'lit';
 
 const meta: MetaExtended = {
   id: '76ade552-2c03-4d6d-9dce-28daa340f7d3',
@@ -13,4 +14,159 @@ export default meta;
 
 type Story = StoryObj;
 
-export const Default: Story = {};
+export const ExampleHTML: Story = {
+  render: () => html`
+    <div class="form-floating">
+      <input class="form-control" id="test0" value="" placeholder="Placeholder" />
+      <label class="form-label" for="test0">Label Text</label>
+    </div>
+  `,
+};
+
+export const Example1: Story = {
+  render: () => html` <post-test-example the-id="test1"></post-test-example> `,
+};
+
+export const Example2: Story = {
+  argTypes: {
+    label: {
+      name: 'Label Text',
+      control: {
+        type: 'text',
+      },
+    },
+    workaround: {
+      name: 'Workaround',
+      control: {
+        type: 'radio',
+      },
+      options: ['none', 'ariamixin', 'arialabel'],
+    },
+  },
+  args: {
+    workaround: 'none',
+    label: 'Label Text',
+  },
+  render: (args: Args) => html`
+    <post-test-input
+      input-id="test2"
+      workaround="${args.workaround}"
+      label-text=${args.label}
+    ></post-test-input>
+    <label for="test2"> ${args.label}</label>
+  `,
+};
+
+export const Example3: Story = {
+  argTypes: {
+    label: {
+      name: 'Label Text',
+      control: {
+        type: 'text',
+      },
+    },
+    workaround: {
+      name: 'Workaround',
+      control: {
+        type: 'radio',
+      },
+      options: ['none', 'ariamixin', 'arialabel'],
+    },
+  },
+  args: {
+    workaround: 'none',
+    label: 'Label Text',
+  },
+  render: (args: Args) => html`
+    <post-test-example2 the-id="test3" workaround="${args.workaround}" label-text=${args.label}>
+      <label for="test3"> ${args.label} </label>
+    </post-test-example2>
+  `,
+};
+
+export const Example4: Story = {
+  argTypes: {
+    label: {
+      name: 'Label Text',
+      control: {
+        type: 'text',
+      },
+    },
+    workaround: {
+      name: 'Workaround',
+      control: {
+        type: 'radio',
+      },
+      options: ['none', 'arialabel'],
+    },
+  },
+  args: {
+    workaround: 'none',
+    label: 'Label Text',
+  },
+  render: (args: Args) => html`
+    <post-test-label
+      for="test4"
+      workaround="${args.workaround}"
+      label-text=${args.label}
+    ></post-test-label>
+    <input id="test4" value="" placeholder="Placeholder" />
+  `,
+};
+
+export const Example5: Story = {
+  argTypes: {
+    label: {
+      name: 'Label Text',
+      control: {
+        type: 'text',
+      },
+    },
+    workaround: {
+      name: 'Workaround',
+      control: {
+        type: 'radio',
+      },
+      options: ['none', 'arialabel'],
+    },
+  },
+  args: {
+    workaround: 'none',
+    label: 'Label Text',
+  },
+  render: (args: Args) => html` <post-test-example3
+    the-id="test5"
+    workaround="${args.workaround}"
+    label-text=${args.label}
+  >
+    <input id="test5" value="" placeholder="Placeholder" />
+  </post-test-example3>`,
+};
+
+export const Example6: Story = {
+  argTypes: {
+    label: {
+      name: 'Label Text',
+      control: {
+        type: 'text',
+      },
+    },
+    workaround: {
+      name: 'Workaround',
+      control: {
+        type: 'radio',
+      },
+      options: ['none', 'arialabel'],
+    },
+  },
+  args: {
+    workaround: 'none',
+    label: 'Label Text',
+  },
+  render: (args: Args) => html`<post-test-input
+      input-id="test6"
+      label-text=${args.label}
+      workaround="${args.workaround}"
+    ></post-test-input>
+    <post-test-label for="test6"></post-test-label>`,
+};
diff --git a/packages/documentation/src/stories/guidelines/ccr/ccr.styles.scss b/packages/documentation/src/stories/guidelines/ccr/ccr.styles.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/documentation/src/stories/guidelines/ccr/example0.sample.html b/packages/documentation/src/stories/guidelines/ccr/example0.sample.html
new file mode 100644
index 0000000000..0dbf07a414
--- /dev/null
+++ b/packages/documentation/src/stories/guidelines/ccr/example0.sample.html
@@ -0,0 +1,5 @@
+<!-- light DOM -->
+<div class="form-floating">
+  <input class="form-control" id="refId" value="" placeholder="Placeholder" />
+  <label class="form-label" for="refId"> Label Text </label>
+</div>
diff --git a/packages/documentation/src/stories/guidelines/ccr/example1.sample.html b/packages/documentation/src/stories/guidelines/ccr/example1.sample.html
new file mode 100644
index 0000000000..2354f16ca1
--- /dev/null
+++ b/packages/documentation/src/stories/guidelines/ccr/example1.sample.html
@@ -0,0 +1,5 @@
+<post-test-component the-id="refId" data-version="9.0.0-next.36" data-hydrated="">
+  <!-- #shadow-root -->
+    <input id="refId" placeholder="Placeholder"></input>
+    <label for="refId">Label Text</label>
+</post-test-component>
diff --git a/packages/documentation/src/stories/guidelines/ccr/example2.sample.html b/packages/documentation/src/stories/guidelines/ccr/example2.sample.html
new file mode 100644
index 0000000000..628c4bd668
--- /dev/null
+++ b/packages/documentation/src/stories/guidelines/ccr/example2.sample.html
@@ -0,0 +1,7 @@
+<post-test-input input-id="refId" data-version="9.0.0-next.36" data-hydrated="">
+  <!-- #shadow-root -->
+    <input type="text" id="refId" placeholder="Placeholder" /></input>
+</post-test-input>
+<!-- light DOM -->
+ <label for="refId"> Label Text</label>
+
diff --git a/packages/documentation/src/stories/guidelines/ccr/example3.sample.html b/packages/documentation/src/stories/guidelines/ccr/example3.sample.html
new file mode 100644
index 0000000000..67b7655817
--- /dev/null
+++ b/packages/documentation/src/stories/guidelines/ccr/example3.sample.html
@@ -0,0 +1,7 @@
+<post-test-component the-id="refId" data-version="9.0.0-next.36" data-hydrated="">
+  <!-- #shadow-root -->
+      <input id="refId" placeholder="Placeholder"> </input>
+      <slot><!-- Slot Content --></slot>
+  <!-- Slot Content -->
+  <label for="refId"> Label Text </label>
+</post-test-component>
diff --git a/packages/documentation/src/stories/guidelines/ccr/example4.sample.html b/packages/documentation/src/stories/guidelines/ccr/example4.sample.html
new file mode 100644
index 0000000000..38201e361a
--- /dev/null
+++ b/packages/documentation/src/stories/guidelines/ccr/example4.sample.html
@@ -0,0 +1,6 @@
+<post-test-label for="refId" data-version="9.0.0-next.36" data-hydrated="">
+  <!-- #shadow-root -->
+  <label for="refId">Label Text</label>
+</post-test-label>
+<!-- light DOM -->
+<input id="refId" value="" placeholder="Placeholder" />
diff --git a/packages/documentation/src/stories/guidelines/ccr/example5.sample.html b/packages/documentation/src/stories/guidelines/ccr/example5.sample.html
new file mode 100644
index 0000000000..ba20cb48f7
--- /dev/null
+++ b/packages/documentation/src/stories/guidelines/ccr/example5.sample.html
@@ -0,0 +1,7 @@
+<post-test-component the-id="refId" data-version="9.0.0-next.36" data-hydrated="">
+  <!-- #shadow-root -->
+      <label for="refId">Label Text</label>
+      <slot><!-- Slot Content --></slot>
+  <!-- Slot Content -->
+  <input id="refId" value="" placeholder="Placeholder"></input>
+</post-test-component>
diff --git a/packages/documentation/src/stories/guidelines/ccr/example6.sample.html b/packages/documentation/src/stories/guidelines/ccr/example6.sample.html
new file mode 100644
index 0000000000..729201d54c
--- /dev/null
+++ b/packages/documentation/src/stories/guidelines/ccr/example6.sample.html
@@ -0,0 +1,8 @@
+<post-test-input input-id="refId" data-version="9.0.0-next.36" data-hydrated="">
+  <!-- #shadow-root -->
+  <input type="text" id="refId" placeholder="Placeholder"></input>
+</post-test-input>
+<post-test-label for="refId" data-version="9.0.0-next.36" data-hydrated="">
+  <!-- #shadow-root -->
+  <label for="refId">Label Text</label>
+</post-test-label>
\ No newline at end of file

From 7e6e7d2f5c90aeaa2d8613add51a1afa86222525 Mon Sep 17 00:00:00 2001
From: Myrta Sakellariou <myrta.sakellariou@gmail.com>
Date: Thu, 8 May 2025 13:20:53 +0200
Subject: [PATCH 03/26] more investigation

---
 packages/components/src/components.d.ts       | 182 +++++++++---------
 .../src/components/post-icon/readme.md        |   2 +
 .../post-test-button.scss}                    |   0
 .../post-test-button.tsx}                     |  13 +-
 .../readme.md                                 |  13 ++
 .../post-test-example2/post-test-example2.tsx |  66 -------
 .../components/post-test-example2/readme.md   |  19 --
 .../post-test-example3/post-test-example3.tsx |  60 ------
 .../components/post-test-example3/readme.md   |  19 --
 .../post-test-input/post-test-input.tsx       |  70 -------
 .../src/components/post-test-input/readme.md  |  19 --
 .../post-test-label/post-test-label.tsx       |  33 +---
 .../src/components/post-test-label/readme.md  |   8 +-
 .../post-test-span.scss}                      |   0
 .../post-test-span/post-test-span.tsx         |  60 ++++++
 .../src/components/post-test-span/readme.md   |  20 ++
 .../post-test-target.scss}                    |   0
 .../post-test-target/post-test-target.tsx     |  58 ++++++
 .../src/components/post-test-target/readme.md |  16 ++
 .../post-test-target2.scss}                   |   0
 .../post-test-target2/post-test-target2.tsx   |  50 +++++
 .../components/post-test-target2/readme.md    |  15 ++
 .../post-test-target3/post-test-target3.scss  |   1 +
 .../post-test-target3/post-test-target3.tsx   |  20 ++
 .../components/post-test-target3/readme.md    |   8 +
 .../post-test-target4/post-test-target4.scss  |   1 +
 .../post-test-target4/post-test-target4.tsx   |  52 +++++
 .../components/post-test-target4/readme.md    |   8 +
 packages/components/src/index.html            |   3 +-
 .../ccr/arialabelled/arialabelled.docs.mdx    |  54 ++++++
 .../ccr/arialabelled/arialabelled.stories.ts  |  47 +++++
 .../src/stories/guidelines/ccr/ccr.docs.mdx   | 108 -----------
 .../src/stories/guidelines/ccr/ccr.stories.ts | 172 -----------------
 .../stories/guidelines/ccr/ccr.styles.scss    |   0
 .../guidelines/ccr/example0.sample.html       |   5 -
 .../guidelines/ccr/example1.sample.html       |   5 -
 .../guidelines/ccr/example2.sample.html       |   7 -
 .../guidelines/ccr/example3.sample.html       |   7 -
 .../guidelines/ccr/example4.sample.html       |   6 -
 .../guidelines/ccr/example5.sample.html       |   7 -
 .../guidelines/ccr/example6.sample.html       |   8 -
 .../guidelines/ccr/forid/forid.docs.mdx       |  98 ++++++++++
 .../guidelines/ccr/forid/forid.stories.ts     | 109 +++++++++++
 43 files changed, 739 insertions(+), 710 deletions(-)
 rename packages/components/src/components/{post-test-example/post-test-example.scss => post-test-button/post-test-button.scss} (100%)
 rename packages/components/src/components/{post-test-example/post-test-example.tsx => post-test-button/post-test-button.tsx} (52%)
 rename packages/components/src/components/{post-test-example => post-test-button}/readme.md (65%)
 delete mode 100644 packages/components/src/components/post-test-example2/post-test-example2.tsx
 delete mode 100644 packages/components/src/components/post-test-example2/readme.md
 delete mode 100644 packages/components/src/components/post-test-example3/post-test-example3.tsx
 delete mode 100644 packages/components/src/components/post-test-example3/readme.md
 delete mode 100644 packages/components/src/components/post-test-input/post-test-input.tsx
 delete mode 100644 packages/components/src/components/post-test-input/readme.md
 rename packages/components/src/components/{post-test-example2/post-test-example2.scss => post-test-span/post-test-span.scss} (100%)
 create mode 100644 packages/components/src/components/post-test-span/post-test-span.tsx
 create mode 100644 packages/components/src/components/post-test-span/readme.md
 rename packages/components/src/components/{post-test-example3/post-test-example3.scss => post-test-target/post-test-target.scss} (100%)
 create mode 100644 packages/components/src/components/post-test-target/post-test-target.tsx
 create mode 100644 packages/components/src/components/post-test-target/readme.md
 rename packages/components/src/components/{post-test-input/post-test-input.scss => post-test-target2/post-test-target2.scss} (100%)
 create mode 100644 packages/components/src/components/post-test-target2/post-test-target2.tsx
 create mode 100644 packages/components/src/components/post-test-target2/readme.md
 create mode 100644 packages/components/src/components/post-test-target3/post-test-target3.scss
 create mode 100644 packages/components/src/components/post-test-target3/post-test-target3.tsx
 create mode 100644 packages/components/src/components/post-test-target3/readme.md
 create mode 100644 packages/components/src/components/post-test-target4/post-test-target4.scss
 create mode 100644 packages/components/src/components/post-test-target4/post-test-target4.tsx
 create mode 100644 packages/components/src/components/post-test-target4/readme.md
 create mode 100644 packages/documentation/src/stories/guidelines/ccr/arialabelled/arialabelled.docs.mdx
 create mode 100644 packages/documentation/src/stories/guidelines/ccr/arialabelled/arialabelled.stories.ts
 delete mode 100644 packages/documentation/src/stories/guidelines/ccr/ccr.docs.mdx
 delete mode 100644 packages/documentation/src/stories/guidelines/ccr/ccr.stories.ts
 delete mode 100644 packages/documentation/src/stories/guidelines/ccr/ccr.styles.scss
 delete mode 100644 packages/documentation/src/stories/guidelines/ccr/example0.sample.html
 delete mode 100644 packages/documentation/src/stories/guidelines/ccr/example1.sample.html
 delete mode 100644 packages/documentation/src/stories/guidelines/ccr/example2.sample.html
 delete mode 100644 packages/documentation/src/stories/guidelines/ccr/example3.sample.html
 delete mode 100644 packages/documentation/src/stories/guidelines/ccr/example4.sample.html
 delete mode 100644 packages/documentation/src/stories/guidelines/ccr/example5.sample.html
 delete mode 100644 packages/documentation/src/stories/guidelines/ccr/example6.sample.html
 create mode 100644 packages/documentation/src/stories/guidelines/ccr/forid/forid.docs.mdx
 create mode 100644 packages/documentation/src/stories/guidelines/ccr/forid/forid.stories.ts

diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
index 3a329be517..e5e47cebc4 100644
--- a/packages/components/src/components.d.ts
+++ b/packages/components/src/components.d.ts
@@ -464,68 +464,56 @@ export namespace Components {
          */
         "variant": 'white' | 'info' | 'success' | 'error' | 'warning' | 'yellow';
     }
-    interface PostTestExample {
+    interface PostTestButton {
         /**
           * Defines the id
          */
         "theId"?: string;
     }
-    interface PostTestExample2 {
+    interface PostTestLabel {
         /**
-          * Defines the text of the retrieved label
+          * Defines the for
          */
-        "foundLabelText"?: string;
+        "for"?: string;
+    }
+    interface PostTestSpan {
         /**
-          * Defines the id
+          * Defines the id of the button to reference
          */
-        "theId"?: string;
+        "btnId": string;
         /**
-          * Defines the selected workaround
-         */
-        "workaround"?: string;
-    }
-    interface PostTestExample3 {
-        /**
-          * Defines the text of the retrieved label
+          * Defines the label text
          */
-        "foundLabelText"?: string;
+        "labelText": string;
         /**
-          * Defines the id
+          * Defines the spanId
          */
-        "theId"?: string;
+        "spanId"?: string;
         /**
           * Defines the selected workaround
          */
         "workaround"?: string;
     }
-    interface PostTestInput {
+    interface PostTestTarget {
         /**
           * Defines the selected workaround
          */
-        "foundLabelText"?: string;
-        /**
-          * Defines the inputId
-         */
-        "inputId"?: string;
+        "ariaLabelledbyId"?: string;
         /**
           * Defines the selected workaround
          */
         "workaround"?: string;
     }
-    interface PostTestLabel {
-        /**
-          * Defines the for
-         */
-        "for"?: string;
-        /**
-          * Defines the label text
-         */
-        "labelText": string;
+    interface PostTestTarget2 {
         /**
           * Defines the selected workaround
          */
         "workaround"?: string;
     }
+    interface PostTestTarget3 {
+    }
+    interface PostTestTarget4 {
+    }
     interface PostTogglebutton {
         /**
           * If `true`, the button is in the "on" state, otherwise it is in the "off" state.
@@ -921,35 +909,47 @@ declare global {
         prototype: HTMLPostTagElement;
         new (): HTMLPostTagElement;
     };
-    interface HTMLPostTestExampleElement extends Components.PostTestExample, HTMLStencilElement {
+    interface HTMLPostTestButtonElement extends Components.PostTestButton, HTMLStencilElement {
     }
-    var HTMLPostTestExampleElement: {
-        prototype: HTMLPostTestExampleElement;
-        new (): HTMLPostTestExampleElement;
+    var HTMLPostTestButtonElement: {
+        prototype: HTMLPostTestButtonElement;
+        new (): HTMLPostTestButtonElement;
     };
-    interface HTMLPostTestExample2Element extends Components.PostTestExample2, HTMLStencilElement {
+    interface HTMLPostTestLabelElement extends Components.PostTestLabel, HTMLStencilElement {
     }
-    var HTMLPostTestExample2Element: {
-        prototype: HTMLPostTestExample2Element;
-        new (): HTMLPostTestExample2Element;
+    var HTMLPostTestLabelElement: {
+        prototype: HTMLPostTestLabelElement;
+        new (): HTMLPostTestLabelElement;
     };
-    interface HTMLPostTestExample3Element extends Components.PostTestExample3, HTMLStencilElement {
+    interface HTMLPostTestSpanElement extends Components.PostTestSpan, HTMLStencilElement {
     }
-    var HTMLPostTestExample3Element: {
-        prototype: HTMLPostTestExample3Element;
-        new (): HTMLPostTestExample3Element;
+    var HTMLPostTestSpanElement: {
+        prototype: HTMLPostTestSpanElement;
+        new (): HTMLPostTestSpanElement;
     };
-    interface HTMLPostTestInputElement extends Components.PostTestInput, HTMLStencilElement {
+    interface HTMLPostTestTargetElement extends Components.PostTestTarget, HTMLStencilElement {
     }
-    var HTMLPostTestInputElement: {
-        prototype: HTMLPostTestInputElement;
-        new (): HTMLPostTestInputElement;
+    var HTMLPostTestTargetElement: {
+        prototype: HTMLPostTestTargetElement;
+        new (): HTMLPostTestTargetElement;
     };
-    interface HTMLPostTestLabelElement extends Components.PostTestLabel, HTMLStencilElement {
+    interface HTMLPostTestTarget2Element extends Components.PostTestTarget2, HTMLStencilElement {
     }
-    var HTMLPostTestLabelElement: {
-        prototype: HTMLPostTestLabelElement;
-        new (): HTMLPostTestLabelElement;
+    var HTMLPostTestTarget2Element: {
+        prototype: HTMLPostTestTarget2Element;
+        new (): HTMLPostTestTarget2Element;
+    };
+    interface HTMLPostTestTarget3Element extends Components.PostTestTarget3, HTMLStencilElement {
+    }
+    var HTMLPostTestTarget3Element: {
+        prototype: HTMLPostTestTarget3Element;
+        new (): HTMLPostTestTarget3Element;
+    };
+    interface HTMLPostTestTarget4Element extends Components.PostTestTarget4, HTMLStencilElement {
+    }
+    var HTMLPostTestTarget4Element: {
+        prototype: HTMLPostTestTarget4Element;
+        new (): HTMLPostTestTarget4Element;
     };
     interface HTMLPostTogglebuttonElement extends Components.PostTogglebutton, HTMLStencilElement {
     }
@@ -997,11 +997,13 @@ declare global {
         "post-tab-panel": HTMLPostTabPanelElement;
         "post-tabs": HTMLPostTabsElement;
         "post-tag": HTMLPostTagElement;
-        "post-test-example": HTMLPostTestExampleElement;
-        "post-test-example2": HTMLPostTestExample2Element;
-        "post-test-example3": HTMLPostTestExample3Element;
-        "post-test-input": HTMLPostTestInputElement;
+        "post-test-button": HTMLPostTestButtonElement;
         "post-test-label": HTMLPostTestLabelElement;
+        "post-test-span": HTMLPostTestSpanElement;
+        "post-test-target": HTMLPostTestTargetElement;
+        "post-test-target2": HTMLPostTestTarget2Element;
+        "post-test-target3": HTMLPostTestTarget3Element;
+        "post-test-target4": HTMLPostTestTarget4Element;
         "post-togglebutton": HTMLPostTogglebuttonElement;
         "post-tooltip": HTMLPostTooltipElement;
     }
@@ -1400,68 +1402,56 @@ declare namespace LocalJSX {
          */
         "variant"?: 'white' | 'info' | 'success' | 'error' | 'warning' | 'yellow';
     }
-    interface PostTestExample {
+    interface PostTestButton {
         /**
           * Defines the id
          */
         "theId"?: string;
     }
-    interface PostTestExample2 {
-        /**
-          * Defines the text of the retrieved label
-         */
-        "foundLabelText"?: string;
+    interface PostTestLabel {
         /**
-          * Defines the id
+          * Defines the for
          */
-        "theId"?: string;
+        "for"?: string;
+    }
+    interface PostTestSpan {
         /**
-          * Defines the selected workaround
+          * Defines the id of the button to reference
          */
-        "workaround"?: string;
-    }
-    interface PostTestExample3 {
+        "btnId"?: string;
         /**
-          * Defines the text of the retrieved label
+          * Defines the label text
          */
-        "foundLabelText"?: string;
+        "labelText"?: string;
         /**
-          * Defines the id
+          * Defines the spanId
          */
-        "theId"?: string;
+        "spanId"?: string;
         /**
           * Defines the selected workaround
          */
         "workaround"?: string;
     }
-    interface PostTestInput {
+    interface PostTestTarget {
         /**
           * Defines the selected workaround
          */
-        "foundLabelText"?: string;
-        /**
-          * Defines the inputId
-         */
-        "inputId"?: string;
+        "ariaLabelledbyId"?: string;
         /**
           * Defines the selected workaround
          */
         "workaround"?: string;
     }
-    interface PostTestLabel {
-        /**
-          * Defines the for
-         */
-        "for"?: string;
-        /**
-          * Defines the label text
-         */
-        "labelText"?: string;
+    interface PostTestTarget2 {
         /**
           * Defines the selected workaround
          */
         "workaround"?: string;
     }
+    interface PostTestTarget3 {
+    }
+    interface PostTestTarget4 {
+    }
     interface PostTogglebutton {
         /**
           * If `true`, the button is in the "on" state, otherwise it is in the "off" state.
@@ -1516,11 +1506,13 @@ declare namespace LocalJSX {
         "post-tab-panel": PostTabPanel;
         "post-tabs": PostTabs;
         "post-tag": PostTag;
-        "post-test-example": PostTestExample;
-        "post-test-example2": PostTestExample2;
-        "post-test-example3": PostTestExample3;
-        "post-test-input": PostTestInput;
+        "post-test-button": PostTestButton;
         "post-test-label": PostTestLabel;
+        "post-test-span": PostTestSpan;
+        "post-test-target": PostTestTarget;
+        "post-test-target2": PostTestTarget2;
+        "post-test-target3": PostTestTarget3;
+        "post-test-target4": PostTestTarget4;
         "post-togglebutton": PostTogglebutton;
         "post-tooltip": PostTooltip;
     }
@@ -1568,11 +1560,13 @@ declare module "@stencil/core" {
             "post-tab-panel": LocalJSX.PostTabPanel & JSXBase.HTMLAttributes<HTMLPostTabPanelElement>;
             "post-tabs": LocalJSX.PostTabs & JSXBase.HTMLAttributes<HTMLPostTabsElement>;
             "post-tag": LocalJSX.PostTag & JSXBase.HTMLAttributes<HTMLPostTagElement>;
-            "post-test-example": LocalJSX.PostTestExample & JSXBase.HTMLAttributes<HTMLPostTestExampleElement>;
-            "post-test-example2": LocalJSX.PostTestExample2 & JSXBase.HTMLAttributes<HTMLPostTestExample2Element>;
-            "post-test-example3": LocalJSX.PostTestExample3 & JSXBase.HTMLAttributes<HTMLPostTestExample3Element>;
-            "post-test-input": LocalJSX.PostTestInput & JSXBase.HTMLAttributes<HTMLPostTestInputElement>;
+            "post-test-button": LocalJSX.PostTestButton & JSXBase.HTMLAttributes<HTMLPostTestButtonElement>;
             "post-test-label": LocalJSX.PostTestLabel & JSXBase.HTMLAttributes<HTMLPostTestLabelElement>;
+            "post-test-span": LocalJSX.PostTestSpan & JSXBase.HTMLAttributes<HTMLPostTestSpanElement>;
+            "post-test-target": LocalJSX.PostTestTarget & JSXBase.HTMLAttributes<HTMLPostTestTargetElement>;
+            "post-test-target2": LocalJSX.PostTestTarget2 & JSXBase.HTMLAttributes<HTMLPostTestTarget2Element>;
+            "post-test-target3": LocalJSX.PostTestTarget3 & JSXBase.HTMLAttributes<HTMLPostTestTarget3Element>;
+            "post-test-target4": LocalJSX.PostTestTarget4 & JSXBase.HTMLAttributes<HTMLPostTestTarget4Element>;
             "post-togglebutton": LocalJSX.PostTogglebutton & JSXBase.HTMLAttributes<HTMLPostTogglebuttonElement>;
             "post-tooltip": LocalJSX.PostTooltip & JSXBase.HTMLAttributes<HTMLPostTooltipElement>;
         }
diff --git a/packages/components/src/components/post-icon/readme.md b/packages/components/src/components/post-icon/readme.md
index cef5d0a101..d637583c24 100644
--- a/packages/components/src/components/post-icon/readme.md
+++ b/packages/components/src/components/post-icon/readme.md
@@ -33,6 +33,7 @@ some content
  - [post-mainnavigation](../post-mainnavigation)
  - [post-rating](../post-rating)
  - [post-tag](../post-tag)
+ - [post-test-button](../post-test-button)
 
 ### Graph
 ```mermaid
@@ -48,6 +49,7 @@ graph TD;
   post-mainnavigation --> post-icon
   post-rating --> post-icon
   post-tag --> post-icon
+  post-test-button --> post-icon
   style post-icon fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
diff --git a/packages/components/src/components/post-test-example/post-test-example.scss b/packages/components/src/components/post-test-button/post-test-button.scss
similarity index 100%
rename from packages/components/src/components/post-test-example/post-test-example.scss
rename to packages/components/src/components/post-test-button/post-test-button.scss
diff --git a/packages/components/src/components/post-test-example/post-test-example.tsx b/packages/components/src/components/post-test-button/post-test-button.tsx
similarity index 52%
rename from packages/components/src/components/post-test-example/post-test-example.tsx
rename to packages/components/src/components/post-test-button/post-test-button.tsx
index 093f159b3f..c484d3cb02 100644
--- a/packages/components/src/components/post-test-example/post-test-example.tsx
+++ b/packages/components/src/components/post-test-button/post-test-button.tsx
@@ -2,11 +2,11 @@ import { Component, h, Host, Prop } from '@stencil/core';
 import { version } from '@root/package.json';
 
 @Component({
-  tag: 'post-test-example',
-  styleUrl: 'post-test-example.scss',
+  tag: 'post-test-button',
+  styleUrl: 'post-test-button.scss',
   shadow: true,
 })
-export class PostTestExample {
+export class PostTestButton {
   /**
    * Defines the id
    */
@@ -15,9 +15,10 @@ export class PostTestExample {
   render() {
     return (
       // Shadow DOM - Same Shadow DOM
-      <Host data-version={version}>
-        <input id={this.theId} value="" placeholder="Placeholder" />
-        <label htmlFor={this.theId}>Label Text</label>
+      <Host data-version={version} class="btn btn-primary" role="button" tabindex="0">
+        <div>
+          <post-icon name="1022"></post-icon>
+        </div>
       </Host>
     );
   }
diff --git a/packages/components/src/components/post-test-example/readme.md b/packages/components/src/components/post-test-button/readme.md
similarity index 65%
rename from packages/components/src/components/post-test-example/readme.md
rename to packages/components/src/components/post-test-button/readme.md
index 4126c2f6b3..40b31cca52 100644
--- a/packages/components/src/components/post-test-example/readme.md
+++ b/packages/components/src/components/post-test-button/readme.md
@@ -12,6 +12,19 @@
 | `theId`  | `the-id`  | Defines the id | `string` | `undefined` |
 
 
+## Dependencies
+
+### Depends on
+
+- [post-icon](../post-icon)
+
+### Graph
+```mermaid
+graph TD;
+  post-test-button --> post-icon
+  style post-test-button fill:#f9f,stroke:#333,stroke-width:4px
+```
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/components/src/components/post-test-example2/post-test-example2.tsx b/packages/components/src/components/post-test-example2/post-test-example2.tsx
deleted file mode 100644
index 2d7dbfc01c..0000000000
--- a/packages/components/src/components/post-test-example2/post-test-example2.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { Component, h, Host, Prop } from '@stencil/core';
-import { version } from '@root/package.json';
-
-declare interface HTMLInputElementPlus extends HTMLInputElement {
-  ariaLabelledByElements: Element | Element[] | null;
-}
-
-@Component({
-  tag: 'post-test-example2',
-  styleUrl: 'post-test-example2.scss',
-  shadow: true,
-})
-export class PostTestExample2 {
-  /**
-   * Defines the id
-   */
-  @Prop() theId?: string;
-
-  /**
-   * Defines the selected workaround
-   */
-  @Prop() workaround?: string;
-
-  /**
-   * Defines the text of the retrieved label
-   */
-  @Prop() foundLabelText?: string;
-
-  private updateWorkaround() {
-    const lightDOMLabel = document.querySelector(`label[for="${this.theId}"]`);
-
-    if (this.workaround == 'ariamixin') {
-      const customElement = document.querySelector(`post-test-example2[the-id="${this.theId}"]`);
-      const internalInput = customElement.shadowRoot.querySelector('input') as HTMLInputElementPlus;
-      internalInput.ariaLabelledByElements = [lightDOMLabel];
-    }
-    if (this.workaround == 'arialabel') {
-      const lightDOMLabel = document.querySelector(`label[for="${this.theId}"]`);
-      if (lightDOMLabel) {
-        this.foundLabelText = lightDOMLabel.textContent;
-      }
-    }
-  }
-  componentDidLoad() {
-    this.updateWorkaround();
-  }
-
-  componentDidUpdate() {
-    this.updateWorkaround();
-  }
-
-  render() {
-    return (
-      //Slotted Content - Shadow DOM (since slotted content is in the Light DOM)
-      <Host data-version={version}>
-        <input
-          id={this.theId}
-          value=""
-          placeholder="Placeholder"
-          aria-label={this.workaround == 'arialabel' ? this.foundLabelText : ''}
-        />
-        <slot></slot>
-      </Host>
-    );
-  }
-}
diff --git a/packages/components/src/components/post-test-example2/readme.md b/packages/components/src/components/post-test-example2/readme.md
deleted file mode 100644
index 40a871a653..0000000000
--- a/packages/components/src/components/post-test-example2/readme.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# post-test-form
-
-
-
-<!-- Auto Generated Below -->
-
-
-## Properties
-
-| Property         | Attribute          | Description                             | Type     | Default     |
-| ---------------- | ------------------ | --------------------------------------- | -------- | ----------- |
-| `foundLabelText` | `found-label-text` | Defines the text of the retrieved label | `string` | `undefined` |
-| `theId`          | `the-id`           | Defines the id                          | `string` | `undefined` |
-| `workaround`     | `workaround`       | Defines the selected workaround         | `string` | `undefined` |
-
-
-----------------------------------------------
-
-*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/components/src/components/post-test-example3/post-test-example3.tsx b/packages/components/src/components/post-test-example3/post-test-example3.tsx
deleted file mode 100644
index 372e29d998..0000000000
--- a/packages/components/src/components/post-test-example3/post-test-example3.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { Component, h, Host, Prop, Element } from '@stencil/core';
-import { version } from '@root/package.json';
-
-@Component({
-  tag: 'post-test-example3',
-  styleUrl: 'post-test-example3.scss',
-  shadow: true,
-})
-export class PostTestExample3 {
-  @Element() host: HTMLPostTestExample3Element;
-
-  /**
-   * Defines the id
-   */
-  @Prop() theId?: string;
-
-  /**
-   * Defines the selected workaround
-   */
-  @Prop() workaround?: string;
-
-  /**
-   * Defines the text of the retrieved label
-   */
-  @Prop() foundLabelText?: string;
-
-  private setAriaLabel() {
-    const selector = `#${this.theId}`;
-    const targetInput = document.querySelector(selector);
-
-    const lightDOMLabel = this.host.shadowRoot.querySelector(`label[for="${this.theId}"]`);
-
-    if (lightDOMLabel) {
-      this.foundLabelText = lightDOMLabel.textContent;
-    }
-    if (this.workaround == 'arialabel') {
-      targetInput.setAttribute('aria-label', this.foundLabelText);
-    } else {
-      targetInput.removeAttribute('aria-label');
-    }
-  }
-
-  componentDidLoad() {
-    this.setAriaLabel();
-  }
-
-  componentDidUpdate() {
-    this.setAriaLabel();
-  }
-
-  render() {
-    return (
-      // Shadow DOM - Light DOM
-      <Host data-version={version}>
-        <label htmlFor={this.theId}>Label Text</label>
-        <slot></slot>
-      </Host>
-    );
-  }
-}
diff --git a/packages/components/src/components/post-test-example3/readme.md b/packages/components/src/components/post-test-example3/readme.md
deleted file mode 100644
index 40a871a653..0000000000
--- a/packages/components/src/components/post-test-example3/readme.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# post-test-form
-
-
-
-<!-- Auto Generated Below -->
-
-
-## Properties
-
-| Property         | Attribute          | Description                             | Type     | Default     |
-| ---------------- | ------------------ | --------------------------------------- | -------- | ----------- |
-| `foundLabelText` | `found-label-text` | Defines the text of the retrieved label | `string` | `undefined` |
-| `theId`          | `the-id`           | Defines the id                          | `string` | `undefined` |
-| `workaround`     | `workaround`       | Defines the selected workaround         | `string` | `undefined` |
-
-
-----------------------------------------------
-
-*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/components/src/components/post-test-input/post-test-input.tsx b/packages/components/src/components/post-test-input/post-test-input.tsx
deleted file mode 100644
index 76f3d4fe88..0000000000
--- a/packages/components/src/components/post-test-input/post-test-input.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { Component, h, Host, Prop, Element } from '@stencil/core';
-import { version } from '@root/package.json';
-
-declare interface HTMLInputElementPlus extends HTMLInputElement {
-  ariaLabelledByElements: Element | Element[] | null;
-}
-
-@Component({
-  tag: 'post-test-input',
-  styleUrl: 'post-test-input.scss',
-  shadow: true,
-})
-export class PostTestInput {
-  @Element() host: HTMLPostTestInputElement;
-  /**
-   * Defines the inputId
-   */
-  @Prop() inputId?: string;
-
-  /**
-   * Defines the selected workaround
-   */
-  @Prop() workaround?: string;
-
-  /**
-   * Defines the selected workaround
-   */
-  @Prop() foundLabelText?: string;
-
-  private updateWorkaround() {
-    const lightDOMLabel = document.querySelector(`label[for="${this.inputId}"]`);
-    const customElement = document.querySelector(`post-test-input[input-id="${this.inputId}"]`);
-    const internalInput = customElement.shadowRoot.querySelector('input') as HTMLInputElementPlus;
-    if (this.workaround == 'ariamixin') {
-      internalInput.ariaLabelledByElements = [lightDOMLabel];
-    } else {
-      internalInput.ariaLabelledByElements = null;
-    }
-    if (this.workaround == 'arialabel') {
-      const lightDOMLabel = document.querySelector(`label[for="${this.inputId}"]`);
-      console.log(lightDOMLabel);
-      if (lightDOMLabel) {
-        this.foundLabelText = lightDOMLabel.textContent;
-      }
-    }
-  }
-
-  componentDidLoad() {
-    this.updateWorkaround();
-  }
-
-  componentDidUpdate() {
-    this.updateWorkaround();
-  }
-
-  render() {
-    return (
-      <Host data-version={version}>
-        <input
-          type="text"
-          id={this.inputId}
-          value=""
-          placeholder="Placeholder"
-          aria-label={this.workaround == 'arialabel' ? this.foundLabelText : ''}
-        ></input>
-        <slot></slot>
-      </Host>
-    );
-  }
-}
diff --git a/packages/components/src/components/post-test-input/readme.md b/packages/components/src/components/post-test-input/readme.md
deleted file mode 100644
index 563058ba43..0000000000
--- a/packages/components/src/components/post-test-input/readme.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# post-test-input
-
-
-
-<!-- Auto Generated Below -->
-
-
-## Properties
-
-| Property         | Attribute          | Description                     | Type     | Default     |
-| ---------------- | ------------------ | ------------------------------- | -------- | ----------- |
-| `foundLabelText` | `found-label-text` | Defines the selected workaround | `string` | `undefined` |
-| `inputId`        | `input-id`         | Defines the inputId             | `string` | `undefined` |
-| `workaround`     | `workaround`       | Defines the selected workaround | `string` | `undefined` |
-
-
-----------------------------------------------
-
-*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/components/src/components/post-test-label/post-test-label.tsx b/packages/components/src/components/post-test-label/post-test-label.tsx
index e1685988ee..aced83c574 100644
--- a/packages/components/src/components/post-test-label/post-test-label.tsx
+++ b/packages/components/src/components/post-test-label/post-test-label.tsx
@@ -12,38 +12,19 @@ export class PostTestLabel {
    */
   @Prop() for?: string;
 
-  /**
-   * Defines the label text
-   */
-  @Prop() labelText: string;
-
-  /**
-   * Defines the selected workaround
-   */
-  @Prop() workaround?: string;
-
-  private setAriaLabel() {
-    const selector = `#${this.for}`;
-    const targetInput = document.querySelector(selector);
-    if (this.workaround == 'arialabel') {
-      targetInput.setAttribute('aria-label', this.labelText);
-    } else {
-      targetInput.removeAttribute('aria-label');
-    }
-  }
+  private internalEl: HTMLElement | undefined;
 
   componentDidLoad() {
-    this.setAriaLabel();
-  }
-
-  componentDidUpdate() {
-    this.setAriaLabel();
+    const targetEl = document.querySelector('#' + this.for);
+    targetEl.ariaLabelledByElements = [this.internalEl];
   }
 
   render() {
     return (
-      <Host data-version={version}>
-        <label htmlFor={this.for}>{this.labelText}</label>
+      <Host data-version={version} for={this.for}>
+        <label ref={el => (this.internalEl = el as HTMLElement)} id={this.for} htmlFor={this.for}>
+          My Text
+        </label>
         <slot></slot>
       </Host>
     );
diff --git a/packages/components/src/components/post-test-label/readme.md b/packages/components/src/components/post-test-label/readme.md
index b0336611a0..cd4d27a38b 100644
--- a/packages/components/src/components/post-test-label/readme.md
+++ b/packages/components/src/components/post-test-label/readme.md
@@ -7,11 +7,9 @@
 
 ## Properties
 
-| Property     | Attribute    | Description                     | Type     | Default     |
-| ------------ | ------------ | ------------------------------- | -------- | ----------- |
-| `for`        | `for`        | Defines the for                 | `string` | `undefined` |
-| `labelText`  | `label-text` | Defines the label text          | `string` | `undefined` |
-| `workaround` | `workaround` | Defines the selected workaround | `string` | `undefined` |
+| Property | Attribute | Description     | Type     | Default     |
+| -------- | --------- | --------------- | -------- | ----------- |
+| `for`    | `for`     | Defines the for | `string` | `undefined` |
 
 
 ----------------------------------------------
diff --git a/packages/components/src/components/post-test-example2/post-test-example2.scss b/packages/components/src/components/post-test-span/post-test-span.scss
similarity index 100%
rename from packages/components/src/components/post-test-example2/post-test-example2.scss
rename to packages/components/src/components/post-test-span/post-test-span.scss
diff --git a/packages/components/src/components/post-test-span/post-test-span.tsx b/packages/components/src/components/post-test-span/post-test-span.tsx
new file mode 100644
index 0000000000..14c7e74450
--- /dev/null
+++ b/packages/components/src/components/post-test-span/post-test-span.tsx
@@ -0,0 +1,60 @@
+import { Component, h, Host, Prop, Element } from '@stencil/core';
+import { version } from '@root/package.json';
+
+@Component({
+  tag: 'post-test-span',
+  styleUrl: 'post-test-span.scss',
+  shadow: true,
+})
+export class PostTestSpan {
+  @Element() host: HTMLPostTestSpanElement;
+
+  /**
+   * Defines the spanId
+   */
+  @Prop() spanId?: string;
+
+  /**
+   * Defines the label text
+   */
+  @Prop() labelText: string;
+
+  /**
+   * Defines the id of the button to reference
+   */
+  @Prop() btnId: string;
+
+  /**
+   * Defines the selected workaround
+   */
+  @Prop() workaround?: string;
+
+  private setAriaLabel() {
+    const selector = `#${this.btnId}`;
+    const targetInput = document.querySelector(selector);
+    if (targetInput) {
+      if (this.workaround == 'arialabel') {
+        targetInput.setAttribute('aria-label-text', this.labelText);
+      } else {
+        targetInput.removeAttribute('aria-label-text');
+      }
+    }
+  }
+
+  componentWillLoad() {
+    this.setAriaLabel();
+  }
+
+  componentDidUpdate() {
+    this.setAriaLabel();
+  }
+
+  render() {
+    return (
+      <Host data-version={version} for={this.spanId}>
+        <span id={this.spanId}>{this.labelText}</span>
+        <slot></slot>
+      </Host>
+    );
+  }
+}
diff --git a/packages/components/src/components/post-test-span/readme.md b/packages/components/src/components/post-test-span/readme.md
new file mode 100644
index 0000000000..0e09377b1e
--- /dev/null
+++ b/packages/components/src/components/post-test-span/readme.md
@@ -0,0 +1,20 @@
+# post-avatar
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property     | Attribute    | Description                               | Type     | Default     |
+| ------------ | ------------ | ----------------------------------------- | -------- | ----------- |
+| `btnId`      | `btn-id`     | Defines the id of the button to reference | `string` | `undefined` |
+| `labelText`  | `label-text` | Defines the label text                    | `string` | `undefined` |
+| `spanId`     | `span-id`    | Defines the spanId                        | `string` | `undefined` |
+| `workaround` | `workaround` | Defines the selected workaround           | `string` | `undefined` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/components/src/components/post-test-example3/post-test-example3.scss b/packages/components/src/components/post-test-target/post-test-target.scss
similarity index 100%
rename from packages/components/src/components/post-test-example3/post-test-example3.scss
rename to packages/components/src/components/post-test-target/post-test-target.scss
diff --git a/packages/components/src/components/post-test-target/post-test-target.tsx b/packages/components/src/components/post-test-target/post-test-target.tsx
new file mode 100644
index 0000000000..d5b395eaec
--- /dev/null
+++ b/packages/components/src/components/post-test-target/post-test-target.tsx
@@ -0,0 +1,58 @@
+// This provides a type declaration merge to include the ariaLabelledByElements
+// property on the Element interface
+
+declare global {
+  interface Element {
+    ariaLabelledByElements: Element[];
+  }
+}
+
+import { Component, h, Host, Prop, Element } from '@stencil/core';
+import { version } from '@root/package.json';
+
+@Component({
+  tag: 'post-test-target',
+  styleUrl: 'post-test-target.scss',
+  shadow: true,
+})
+export class PostTestTarget {
+  @Element() host: HTMLPostTestTargetElement;
+
+  private internalEl: HTMLElement | undefined;
+  /**
+   * Defines the selected workaround
+   */
+  @Prop() workaround?: string;
+
+  /**
+   * Defines the selected workaround
+   */
+  @Prop() ariaLabelledbyId?: string;
+
+  private setAriaLabelledByElements() {
+    const labelEl = document.querySelector(`[for=${this.ariaLabelledbyId}]`);
+    if (this.workaround == 'ariamixin') {
+      this.internalEl.ariaLabelledByElements = [labelEl];
+    } else {
+      this.internalEl.ariaLabelledByElements = [];
+    }
+  }
+
+  componentDidLoad() {
+    this.setAriaLabelledByElements();
+  }
+
+  componentDidUpdate() {
+    this.setAriaLabelledByElements();
+  }
+
+  render() {
+    return (
+      <Host data-version={version}>
+        {/* This could be <input>, <button>, <input>, <select>, <textarea>, <meter>, <object>, <output>, <progress>, or form-associated Custom Elements*/}
+        <input ref={el => (this.internalEl = el as HTMLElement)}></input>
+        <slot></slot>
+      </Host>
+    );
+  }
+}
diff --git a/packages/components/src/components/post-test-target/readme.md b/packages/components/src/components/post-test-target/readme.md
new file mode 100644
index 0000000000..fa6cfa8eb4
--- /dev/null
+++ b/packages/components/src/components/post-test-target/readme.md
@@ -0,0 +1,16 @@
+# post-test-target
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property           | Attribute            | Description                     | Type     | Default     |
+| ------------------ | -------------------- | ------------------------------- | -------- | ----------- |
+| `ariaLabelledbyId` | `aria-labelledby-id` | Defines the selected workaround | `string` | `undefined` |
+| `workaround`       | `workaround`         | Defines the selected workaround | `string` | `undefined` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/components/src/components/post-test-input/post-test-input.scss b/packages/components/src/components/post-test-target2/post-test-target2.scss
similarity index 100%
rename from packages/components/src/components/post-test-input/post-test-input.scss
rename to packages/components/src/components/post-test-target2/post-test-target2.scss
diff --git a/packages/components/src/components/post-test-target2/post-test-target2.tsx b/packages/components/src/components/post-test-target2/post-test-target2.tsx
new file mode 100644
index 0000000000..505ecb9e4a
--- /dev/null
+++ b/packages/components/src/components/post-test-target2/post-test-target2.tsx
@@ -0,0 +1,50 @@
+import { Component, h, Host, Prop, Element } from '@stencil/core';
+import { version } from '@root/package.json';
+
+@Component({
+  tag: 'post-test-target2',
+  styleUrl: 'post-test-target2.scss',
+  shadow: true,
+})
+export class PostTestTarget2 {
+  @Element() host: HTMLPostTestTarget2Element;
+
+  private slotEl: HTMLSlotElement | undefined;
+  private internalEl: HTMLElement | undefined;
+
+  /**
+   * Defines the selected workaround
+   */
+  @Prop() workaround?: string;
+
+  private setupInputLabelingFromSlot() {
+    if (this.slotEl && this.internalEl && this.workaround == 'ariamixin') {
+      const assignedElements = this.slotEl.assignedElements({ flatten: true });
+      const labelElement = assignedElements.find(el => el.tagName === 'LABEL');
+
+      if (labelElement) {
+        this.internalEl.ariaLabelledByElements = [labelElement];
+      }
+    } else {
+      this.internalEl.ariaLabelledByElements = [];
+    }
+  }
+
+  componentDidLoad() {
+    this.setupInputLabelingFromSlot();
+  }
+
+  componentDidUpdate() {
+    this.setupInputLabelingFromSlot();
+  }
+
+  render() {
+    return (
+      <Host data-version={version}>
+        {/* This could be <input>, <button>, <input>, <select>, <textarea>, <meter>, <object>, <output>, <progress>, or form-associated Custom Elements*/}
+        <slot name="label-slot" ref={el => (this.slotEl = el as HTMLSlotElement)}></slot>
+        <input ref={el => (this.internalEl = el as HTMLElement)}></input>
+      </Host>
+    );
+  }
+}
diff --git a/packages/components/src/components/post-test-target2/readme.md b/packages/components/src/components/post-test-target2/readme.md
new file mode 100644
index 0000000000..466fdb9d1a
--- /dev/null
+++ b/packages/components/src/components/post-test-target2/readme.md
@@ -0,0 +1,15 @@
+# post-test-target
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property     | Attribute    | Description                     | Type     | Default     |
+| ------------ | ------------ | ------------------------------- | -------- | ----------- |
+| `workaround` | `workaround` | Defines the selected workaround | `string` | `undefined` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/components/src/components/post-test-target3/post-test-target3.scss b/packages/components/src/components/post-test-target3/post-test-target3.scss
new file mode 100644
index 0000000000..28612a51ef
--- /dev/null
+++ b/packages/components/src/components/post-test-target3/post-test-target3.scss
@@ -0,0 +1 @@
+@use '@swisspost/design-system-styles/post-default.scss';
diff --git a/packages/components/src/components/post-test-target3/post-test-target3.tsx b/packages/components/src/components/post-test-target3/post-test-target3.tsx
new file mode 100644
index 0000000000..5ff8f7d8fc
--- /dev/null
+++ b/packages/components/src/components/post-test-target3/post-test-target3.tsx
@@ -0,0 +1,20 @@
+import { Component, h, Host, Element } from '@stencil/core';
+import { version } from '@root/package.json';
+
+@Component({
+  tag: 'post-test-target3',
+  styleUrl: 'post-test-target3.scss',
+  shadow: true,
+})
+export class PostTestTarget3 {
+  @Element() host: HTMLPostTestTarget3Element;
+
+  render() {
+    return (
+      <Host data-version={version}>
+        <slot name="label-slot"></slot>
+        <input></input>
+      </Host>
+    );
+  }
+}
diff --git a/packages/components/src/components/post-test-target3/readme.md b/packages/components/src/components/post-test-target3/readme.md
new file mode 100644
index 0000000000..4dcdc1f7fe
--- /dev/null
+++ b/packages/components/src/components/post-test-target3/readme.md
@@ -0,0 +1,8 @@
+# post-test-target
+
+<!-- Auto Generated Below -->
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/components/src/components/post-test-target4/post-test-target4.scss b/packages/components/src/components/post-test-target4/post-test-target4.scss
new file mode 100644
index 0000000000..28612a51ef
--- /dev/null
+++ b/packages/components/src/components/post-test-target4/post-test-target4.scss
@@ -0,0 +1 @@
+@use '@swisspost/design-system-styles/post-default.scss';
diff --git a/packages/components/src/components/post-test-target4/post-test-target4.tsx b/packages/components/src/components/post-test-target4/post-test-target4.tsx
new file mode 100644
index 0000000000..71ad83e7f9
--- /dev/null
+++ b/packages/components/src/components/post-test-target4/post-test-target4.tsx
@@ -0,0 +1,52 @@
+import { Component, h, Host, Element, AttachInternals } from '@stencil/core';
+import { version } from '@root/package.json';
+
+declare global {
+  interface ElementInternals {
+    ariaLabelledByElements: Element;
+  }
+}
+
+@Component({
+  tag: 'post-test-target4',
+  styleUrl: 'post-test-target4.scss',
+  shadow: true,
+  formAssociated: true,
+})
+export class PostTestTarget4 {
+  @Element() host: HTMLPostTestTarget4Element;
+
+  @AttachInternals() internals!: ElementInternals;
+
+  /**
+   * Handles input events from the internal native input.
+   * Updates the component's state and sets the form value
+   * using ElementInternals.
+   * @param event The input event
+   */
+
+  componentDidLoad() {
+    // Get a reference to the slot element
+    const slotElement = this.host.shadowRoot?.querySelector('slot[name="label-slot"]');
+
+    if (slotElement instanceof HTMLSlotElement) {
+      // Get the elements assigned to the slot
+      const assignedElements = slotElement.assignedElements();
+
+      // Assuming the first assigned element is the label
+      const labelElement = assignedElements[0];
+
+      if (labelElement) {
+        this.internals.ariaLabelledByElements = labelElement;
+      }
+    }
+  }
+  render() {
+    return (
+      <Host data-version={version}>
+        <slot name="label-slot"></slot>
+        <input></input>
+      </Host>
+    );
+  }
+}
diff --git a/packages/components/src/components/post-test-target4/readme.md b/packages/components/src/components/post-test-target4/readme.md
new file mode 100644
index 0000000000..4dcdc1f7fe
--- /dev/null
+++ b/packages/components/src/components/post-test-target4/readme.md
@@ -0,0 +1,8 @@
+# post-test-target
+
+<!-- Auto Generated Below -->
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/components/src/index.html b/packages/components/src/index.html
index 3358a60d0a..344decc01e 100644
--- a/packages/components/src/index.html
+++ b/packages/components/src/index.html
@@ -178,6 +178,7 @@ <h1>Components package playground</h1>
       <option value="compact">Post compact</option>
     </select>
     <hr />
-    <post-test-form the-id="12345" the-id2="67890"> </post-test-form>
+    <post-test-target input-id="test2" workaround="ariamixin"></post-test-target>
+    <label for="test2"> test testst</label>
   </body>
 </html>
diff --git a/packages/documentation/src/stories/guidelines/ccr/arialabelled/arialabelled.docs.mdx b/packages/documentation/src/stories/guidelines/ccr/arialabelled/arialabelled.docs.mdx
new file mode 100644
index 0000000000..4fe4a8772e
--- /dev/null
+++ b/packages/documentation/src/stories/guidelines/ccr/arialabelled/arialabelled.docs.mdx
@@ -0,0 +1,54 @@
+import { Meta, Canvas, Source, Controls } from '@storybook/blocks';
+import * as CCR from './arialabelled.stories';
+
+<Meta of={CCR} />
+
+# Cross Component Referencing Cases
+
+## 2. `aria-labelledby`/ `id`
+
+#### I. Referencing Within the Same DOM Tree ✔️
+
+<ul>
+  <li>Light DOM → Light DOM</li>
+  <Canvas of={CCR.ExampleHTML} />
+</ul>
+
+#### II. Referencing From Outside a Shadow DOM Into That Shadow DOM ❌
+
+This works only if `aria-labelledby=""`, `role=""` and `tabindex="0"` are set on the host.
+
+<ul>
+  <li>Light DOM → Shadow DOM</li>
+  <Canvas of={CCR.Example2} />
+  <div className="hide-col-default">
+    <Controls of={CCR.Example2} />
+  </div>
+</ul>
+
+#### III. Referencing From Inside a Shadow DOM Out to the Light DOM ❌
+
+This works only if the relevant `id=""` is set on the host element.
+The referencing component can include anything. All visible text inside the referencing component will be read by NVDA.
+
+<ul>
+  <li>Shadow DOM → Light DOM</li>
+
+    <Canvas of={CCR.Example3} />
+
+  <div className="hide-col-default">
+    <Controls of={CCR.Example3} />
+  </div>
+</ul>
+
+#### IV. Referencing From One Shadow DOM To Another Shadow DOM
+
+<ul>
+  <li>Shadow DOM → Other Shadow DOM</li>
+
+<Canvas of={CCR.Example4} />
+
+  <div className="hide-col-default">
+    <Controls of={CCR.Example4} />
+  </div>
+</ul>
diff --git a/packages/documentation/src/stories/guidelines/ccr/arialabelled/arialabelled.stories.ts b/packages/documentation/src/stories/guidelines/ccr/arialabelled/arialabelled.stories.ts
new file mode 100644
index 0000000000..7d6c73e603
--- /dev/null
+++ b/packages/documentation/src/stories/guidelines/ccr/arialabelled/arialabelled.stories.ts
@@ -0,0 +1,47 @@
+import { StoryObj } from '@storybook/web-components';
+import { MetaExtended } from '@root/types';
+import { html } from 'lit';
+
+const meta: MetaExtended = {
+  id: '76ade552-2c03-4d6d-9dce-28daa340f7d4',
+  title: 'Guidelines/Cross Component Referencing/2.AriaLabelledBy-id',
+  parameters: {
+    badges: [],
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const ExampleHTML: Story = {
+  render: () => html`
+    <span id="id_1">My Text</span>
+    <div class="btn btn-primary" aria-labelledby="id_1" role="button" tabindex="0">
+      <post-icon name="1022"></post-icon>
+    </div>
+  `,
+};
+
+export const Example2: Story = {
+  render: () => html`
+    <span id="id_2">My Text</span>
+    <post-test-button></post-test-button>
+  `,
+};
+
+export const Example3: Story = {
+  render: () => html`
+    <post-test-span span-id="id_3" label-text="My Text"></post-test-span>
+    <div class="btn btn-primary" aria-labelledby="id_3" role="textbox" tabindex="0">
+      <post-icon name="1022"></post-icon>
+    </div>
+  `,
+};
+
+export const Example4: Story = {
+  render: () => html`
+    <post-test-span span-id="id_4" label-text="My Text"></post-test-span>
+    <post-test-button aria-labelledby="id_4"></post-test-button>
+  `,
+};
diff --git a/packages/documentation/src/stories/guidelines/ccr/ccr.docs.mdx b/packages/documentation/src/stories/guidelines/ccr/ccr.docs.mdx
deleted file mode 100644
index cfcd3db631..0000000000
--- a/packages/documentation/src/stories/guidelines/ccr/ccr.docs.mdx
+++ /dev/null
@@ -1,108 +0,0 @@
-import { Meta, Canvas, Source, Controls } from '@storybook/blocks';
-import * as CCR from './ccr.stories';
-import example0 from './example0.sample.html?raw';
-import example1 from './example1.sample.html?raw';
-import example2 from './example2.sample.html?raw';
-import example3 from './example3.sample.html?raw';
-import example4 from './example4.sample.html?raw';
-import example5 from './example5.sample.html?raw';
-import example6 from './example6.sample.html?raw';
-import './ccr.styles.scss';
-
-<Meta of={CCR} />
-
-# Cross Component Referencing Cases
-
-## 1. `for`/ `id`
-
-#### I. Referencing Within the Same DOM Tree
-
-<ul>
-<li>Light DOM → Light DOM</li>
-<Canvas of={CCR.ExampleHTML} />
-<b>Rendered Code Example</b>
-<Source code={example0} language="html" />
-
-<li>Shadow DOM → Same Shadow DOM</li>
-<Canvas of={CCR.Example1} />
-<b>Rendered Code Example</b>
-<Source code={example1} language="html" />
-</ul>
-
-#### II. Referencing From Outside a Shadow DOM Into That Shadow DOM
-
-<ul>
-  <li>Light DOM → Shadow DOM</li>
-  <Canvas of={CCR.Example2} sourceState="shown" />
-  <div className="hide-col-default">
-    <Controls of={CCR.Example2} />
-  </div>
-  <b>Rendered Code Example</b>
-  <Source code={example2} language="html" />
-  <li>Slotted Content → Shadow DOM</li>
-  <Canvas of={CCR.Example3} />
-  <div className="hide-col-default">
-    <Controls of={CCR.Example3} />
-  </div>
-  <Source code={example3} language="html" />
-</ul>
-
-<h5>→ Workarounds</h5>
-
-<ul>
-  <li>Stick to the light and set the `shadow:false`.</li>
-  <li>
-    Use the `ariaLabelledByElements`: This has limited coverage  (<a href="https://caniuse.com/mdn-api_element_arialabelledbyelements"> ariaLabelledByElements Usage</a>) and works only if the referencing element is in the light DOM and the referenced element in the shadowDom.
-  </li>
-    <li>Use `aria-label` with the label text directly on the `<input>` element. </li>
-</ul>
-
-### III. Referencing From Inside a Shadow DOM Out to the Light DOM
-
-<ul>
-  <li>Shadow DOM → Light DOM</li>
-  <Canvas of={CCR.Example4} />
-  <div className="hide-col-default">
-    <Controls of={CCR.Example4} />
-  </div>
-  <Source code={example4} language="html" />
-  <li>Shadow DOM → Slotted Content</li>
-  <Canvas of={CCR.Example5} />
-  <div className="hide-col-default">
-    <Controls of={CCR.Example5} />
-  </div>
-  <Source code={example5} language="html" />
-</ul>
-
-<h5>→ Workarounds</h5>
-
-<ul>
-  <li>Stick to the light and set the `shadow:false`. </li>
-    <li>Use `aria-label` with the label text directly on the `<input>` element.</li>
-</ul>
-
-### IV. Referencing From One Shadow DOM To Another Shadow DOM
-
-<ul>
-  <li>Shadow DOM → Other Shadow DOM</li>
-  <Canvas of={CCR.Example6} />
-  <div className="hide-col-default">
-    <Controls of={CCR.Example6} />
-  </div>
-  <Source code={example6} language="html" />
-</ul>
-
-<h5>→ Workarounds</h5>
-
-<ul>
-  <li>Set both components to `shadow:false`. </li>
-   <li>Use `aria-label` with the label text directly on the `<input>` element.</li>
-</ul>
-
-## 2. `aria-labelledby`
-
-## 3. `aria-describedby`
-
-## 4. `aria-controls`
-
-## 3. `role`
diff --git a/packages/documentation/src/stories/guidelines/ccr/ccr.stories.ts b/packages/documentation/src/stories/guidelines/ccr/ccr.stories.ts
deleted file mode 100644
index db67b56250..0000000000
--- a/packages/documentation/src/stories/guidelines/ccr/ccr.stories.ts
+++ /dev/null
@@ -1,172 +0,0 @@
-import { StoryObj, Args } from '@storybook/web-components';
-import { MetaExtended } from '@root/types';
-import { html } from 'lit';
-
-const meta: MetaExtended = {
-  id: '76ade552-2c03-4d6d-9dce-28daa340f7d3',
-  title: 'Guidelines/Cross Component Referencing',
-  parameters: {
-    badges: [],
-  },
-};
-
-export default meta;
-
-type Story = StoryObj;
-
-export const ExampleHTML: Story = {
-  render: () => html`
-    <div class="form-floating">
-      <input class="form-control" id="test0" value="" placeholder="Placeholder" />
-      <label class="form-label" for="test0">Label Text</label>
-    </div>
-  `,
-};
-
-export const Example1: Story = {
-  render: () => html` <post-test-example the-id="test1"></post-test-example> `,
-};
-
-export const Example2: Story = {
-  argTypes: {
-    label: {
-      name: 'Label Text',
-      control: {
-        type: 'text',
-      },
-    },
-    workaround: {
-      name: 'Workaround',
-      control: {
-        type: 'radio',
-      },
-      options: ['none', 'ariamixin', 'arialabel'],
-    },
-  },
-  args: {
-    workaround: 'none',
-    label: 'Label Text',
-  },
-  render: (args: Args) => html`
-    <post-test-input
-      input-id="test2"
-      workaround="${args.workaround}"
-      label-text=${args.label}
-    ></post-test-input>
-    <label for="test2"> ${args.label}</label>
-  `,
-};
-
-export const Example3: Story = {
-  argTypes: {
-    label: {
-      name: 'Label Text',
-      control: {
-        type: 'text',
-      },
-    },
-    workaround: {
-      name: 'Workaround',
-      control: {
-        type: 'radio',
-      },
-      options: ['none', 'ariamixin', 'arialabel'],
-    },
-  },
-  args: {
-    workaround: 'none',
-    label: 'Label Text',
-  },
-  render: (args: Args) => html`
-    <post-test-example2 the-id="test3" workaround="${args.workaround}" label-text=${args.label}>
-      <label for="test3"> ${args.label} </label>
-    </post-test-example2>
-  `,
-};
-
-export const Example4: Story = {
-  argTypes: {
-    label: {
-      name: 'Label Text',
-      control: {
-        type: 'text',
-      },
-    },
-    workaround: {
-      name: 'Workaround',
-      control: {
-        type: 'radio',
-      },
-      options: ['none', 'arialabel'],
-    },
-  },
-  args: {
-    workaround: 'none',
-    label: 'Label Text',
-  },
-  render: (args: Args) => html`
-    <post-test-label
-      for="test4"
-      workaround="${args.workaround}"
-      label-text=${args.label}
-    ></post-test-label>
-    <input id="test4" value="" placeholder="Placeholder" />
-  `,
-};
-
-export const Example5: Story = {
-  argTypes: {
-    label: {
-      name: 'Label Text',
-      control: {
-        type: 'text',
-      },
-    },
-    workaround: {
-      name: 'Workaround',
-      control: {
-        type: 'radio',
-      },
-      options: ['none', 'arialabel'],
-    },
-  },
-  args: {
-    workaround: 'none',
-    label: 'Label Text',
-  },
-  render: (args: Args) => html` <post-test-example3
-    the-id="test5"
-    workaround="${args.workaround}"
-    label-text=${args.label}
-  >
-    <input id="test5" value="" placeholder="Placeholder" />
-  </post-test-example3>`,
-};
-
-export const Example6: Story = {
-  argTypes: {
-    label: {
-      name: 'Label Text',
-      control: {
-        type: 'text',
-      },
-    },
-    workaround: {
-      name: 'Workaround',
-      control: {
-        type: 'radio',
-      },
-      options: ['none', 'arialabel'],
-    },
-  },
-  args: {
-    workaround: 'none',
-    label: 'Label Text',
-  },
-  render: (args: Args) => html`<post-test-input
-      input-id="test6"
-      label-text=${args.label}
-      workaround="${args.workaround}"
-    ></post-test-input>
-    <post-test-label for="test6"></post-test-label>`,
-};
diff --git a/packages/documentation/src/stories/guidelines/ccr/ccr.styles.scss b/packages/documentation/src/stories/guidelines/ccr/ccr.styles.scss
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/packages/documentation/src/stories/guidelines/ccr/example0.sample.html b/packages/documentation/src/stories/guidelines/ccr/example0.sample.html
deleted file mode 100644
index 0dbf07a414..0000000000
--- a/packages/documentation/src/stories/guidelines/ccr/example0.sample.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<!-- light DOM -->
-<div class="form-floating">
-  <input class="form-control" id="refId" value="" placeholder="Placeholder" />
-  <label class="form-label" for="refId"> Label Text </label>
-</div>
diff --git a/packages/documentation/src/stories/guidelines/ccr/example1.sample.html b/packages/documentation/src/stories/guidelines/ccr/example1.sample.html
deleted file mode 100644
index 2354f16ca1..0000000000
--- a/packages/documentation/src/stories/guidelines/ccr/example1.sample.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<post-test-component the-id="refId" data-version="9.0.0-next.36" data-hydrated="">
-  <!-- #shadow-root -->
-    <input id="refId" placeholder="Placeholder"></input>
-    <label for="refId">Label Text</label>
-</post-test-component>
diff --git a/packages/documentation/src/stories/guidelines/ccr/example2.sample.html b/packages/documentation/src/stories/guidelines/ccr/example2.sample.html
deleted file mode 100644
index 628c4bd668..0000000000
--- a/packages/documentation/src/stories/guidelines/ccr/example2.sample.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<post-test-input input-id="refId" data-version="9.0.0-next.36" data-hydrated="">
-  <!-- #shadow-root -->
-    <input type="text" id="refId" placeholder="Placeholder" /></input>
-</post-test-input>
-<!-- light DOM -->
- <label for="refId"> Label Text</label>
-
diff --git a/packages/documentation/src/stories/guidelines/ccr/example3.sample.html b/packages/documentation/src/stories/guidelines/ccr/example3.sample.html
deleted file mode 100644
index 67b7655817..0000000000
--- a/packages/documentation/src/stories/guidelines/ccr/example3.sample.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<post-test-component the-id="refId" data-version="9.0.0-next.36" data-hydrated="">
-  <!-- #shadow-root -->
-      <input id="refId" placeholder="Placeholder"> </input>
-      <slot><!-- Slot Content --></slot>
-  <!-- Slot Content -->
-  <label for="refId"> Label Text </label>
-</post-test-component>
diff --git a/packages/documentation/src/stories/guidelines/ccr/example4.sample.html b/packages/documentation/src/stories/guidelines/ccr/example4.sample.html
deleted file mode 100644
index 38201e361a..0000000000
--- a/packages/documentation/src/stories/guidelines/ccr/example4.sample.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<post-test-label for="refId" data-version="9.0.0-next.36" data-hydrated="">
-  <!-- #shadow-root -->
-  <label for="refId">Label Text</label>
-</post-test-label>
-<!-- light DOM -->
-<input id="refId" value="" placeholder="Placeholder" />
diff --git a/packages/documentation/src/stories/guidelines/ccr/example5.sample.html b/packages/documentation/src/stories/guidelines/ccr/example5.sample.html
deleted file mode 100644
index ba20cb48f7..0000000000
--- a/packages/documentation/src/stories/guidelines/ccr/example5.sample.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<post-test-component the-id="refId" data-version="9.0.0-next.36" data-hydrated="">
-  <!-- #shadow-root -->
-      <label for="refId">Label Text</label>
-      <slot><!-- Slot Content --></slot>
-  <!-- Slot Content -->
-  <input id="refId" value="" placeholder="Placeholder"></input>
-</post-test-component>
diff --git a/packages/documentation/src/stories/guidelines/ccr/example6.sample.html b/packages/documentation/src/stories/guidelines/ccr/example6.sample.html
deleted file mode 100644
index 729201d54c..0000000000
--- a/packages/documentation/src/stories/guidelines/ccr/example6.sample.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<post-test-input input-id="refId" data-version="9.0.0-next.36" data-hydrated="">
-  <!-- #shadow-root -->
-  <input type="text" id="refId" placeholder="Placeholder"></input>
-</post-test-input>
-<post-test-label for="refId" data-version="9.0.0-next.36" data-hydrated="">
-  <!-- #shadow-root -->
-  <label for="refId">Label Text</label>
-</post-test-label>
\ No newline at end of file
diff --git a/packages/documentation/src/stories/guidelines/ccr/forid/forid.docs.mdx b/packages/documentation/src/stories/guidelines/ccr/forid/forid.docs.mdx
new file mode 100644
index 0000000000..27a724082a
--- /dev/null
+++ b/packages/documentation/src/stories/guidelines/ccr/forid/forid.docs.mdx
@@ -0,0 +1,98 @@
+import { Meta, Canvas, Source, Controls } from '@storybook/blocks';
+import * as CCR from './forid.stories';
+
+<Meta of={CCR} />
+
+# Cross Component Referencing Cases
+
+## 1. `for`/ `id`
+
+#### I. Referencing Within the Same DOM Tree ✔️
+
+<ul>
+  <li>Light DOM → Light DOM</li>
+  <li>Shadow DOM → Same Shadow DOM</li>
+</ul>
+
+<Canvas of={CCR.ExampleHTML} />
+
+#### II.Referencing From Outside a Shadow DOM Into That Shadow DOM ❌
+
+<ul>
+  <li>Light DOM → Shadow DOM</li>
+</ul>
+
+The Aria Mixin workaround is to set the relationship using the `ariaLabelledByElements` property on the element on componentDidLoad/Update.
+
+<Canvas of={CCR.Example2} />
+<div className="hide-col-default">
+  <Controls of={CCR.Example2} />
+</div>
+
+<ul>
+  <li>Slotted Content → Shadow DOM</li>
+</ul>
+
+The Aria Mixin works also here. It is recommended that the referencing element is slotted.
+
+<Canvas of={CCR.Example3} />
+<div className="hide-col-default">
+  <Controls of={CCR.Example3} />
+</div>
+
+<h6>Workaround for SSR Components</h6>
+`aria-labelledby` is set directly on the host with `role=""`. This sets the Accessible Name, but NVDA
+does not always announce it.*
+
+Directly setting `aria-labelledby` on the host.
+
+<Canvas of={CCR.Example5} />
+<div className="hide-col-default">
+  <Controls of={CCR.Example5} />
+</div>
+
+Setting `aria-labelledby` via `ElementInternals`.
+
+<Canvas of={CCR.Example7} />
+<div className="hide-col-default">
+  <Controls of={CCR.Example7} />
+</div>
+
+#### III.Referencing From Inside a Shadow DOM Out to the Light DOM ❌
+
+<ul>
+  <li>Shadow DOM → Light DOM</li>
+</ul>
+
+<Canvas of={CCR.Example4} />
+<div className="hide-col-default">
+  <Controls of={CCR.Example4} />
+</div>
+
+The Aria Mixin does not work in this case.
+
+A solution is to programmatically add the id (from the for) on the host element.
+
+Other option is `aria-labelledby` set directly on the host with role="".
+This sets the Accessible Name, but NVDA does not always announce it.
+
+No other workaround found for this case.
+
+#### IV.Referencing From a Shadow DOM Out to another Shadow DOM ❌
+
+<ul>
+  <li>Shadow DOM → Other Shadow DOM</li>
+</ul>
+
+<Canvas of={CCR.Example6} />
+<div className="hide-col-default">
+  <Controls of={CCR.Example6} />
+</div>
+
+The Aria Mixin does not work in this case.
+
+A solution would be to programmatically add the id (get it from the for?) on the host element.
+This will only work if the `aria-labelledby` set directly on the host.
+This sets the Accessible Name, but NVDA does not always announce it.
+
+No other workaround found for this case.
diff --git a/packages/documentation/src/stories/guidelines/ccr/forid/forid.stories.ts b/packages/documentation/src/stories/guidelines/ccr/forid/forid.stories.ts
new file mode 100644
index 0000000000..e2b052e792
--- /dev/null
+++ b/packages/documentation/src/stories/guidelines/ccr/forid/forid.stories.ts
@@ -0,0 +1,109 @@
+import { StoryObj, Args } from '@storybook/web-components';
+import { MetaExtended } from '@root/types';
+import { html } from 'lit';
+
+const meta: MetaExtended = {
+  id: '76ade552-2c03-4d6d-9dce-28daa340f7d3',
+  title: 'Guidelines/Cross Component Referencing/1.For-id',
+  parameters: {
+    badges: [],
+  },
+
+  decorators: [story => html`<div style="width:300px;height:60px;display:block">${story()}</div>`],
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const ExampleHTML: Story = {
+  render: () => html`
+    <label for="id_0">My Text</label>
+    <input id="id_0"></input>
+  `,
+};
+
+export const Example2: Story = {
+  argTypes: {
+    workaround: {
+      name: 'Workaround',
+      control: {
+        type: 'radio',
+      },
+      options: ['none', 'ariamixin'],
+    },
+  },
+  args: {
+    workaround: 'none',
+  },
+  render: (args: Args) => html`
+    <label for="id_1">My Text</label>
+    <post-test-target workaround="${args.workaround}" aria-labelledby-id="id_1"></post-test-target>
+  `,
+};
+
+export const Example3: Story = {
+  argTypes: {
+    workaround: {
+      name: 'Workaround',
+      control: {
+        type: 'radio',
+      },
+      options: ['none', 'ariamixin'],
+    },
+  },
+  args: {
+    workaround: 'none',
+  },
+  render: (args: Args) => html`
+    <post-test-target2 workaround="${args.workaround}">
+      <label slot="label-slot">My Text</label></post-test-target2
+    >
+  `,
+};
+
+// ssr workaround 1
+export const Example5: Story = {
+  render: () => html`
+    <post-test-target3 aria-labelledby="id_5" role="textbox" tabindex="0">
+      <label id="id_5" slot="label-slot">My Text</label>
+      >
+    </post-test-target3>
+  `,
+};
+
+// ssr workaround 2
+export const Example7: Story = {
+  render: () => html`
+    <post-test-target4 aria-labelledby="id_7">
+      <label id="id_7" slot="label-slot">My Text</label>
+      >
+    </post-test-target4>
+  `,
+};
+
+export const Example4: Story = {
+  argTypes: {
+    workaround: {
+      name: 'Workaround',
+      control: {
+        type: 'radio',
+      },
+      options: ['none', 'ariamixin (not working)'],
+    },
+  },
+  args: {
+    workaround: 'none',
+  },
+  render: (args: Args) => html`
+    <post-test-label workaround="${args.workaround}" for="id_4" id="id_4"> </post-test-label>
+    <input aria-labelledby="id_4"></input>
+  `,
+};
+
+export const Example6: Story = {
+  render: () => html`
+    <post-test-label id="id_6"></post-test-label>
+    <post-test-target3 aria-labelledby="id_6" role="button"></post-test-target3>
+  `,
+};

From 78ea0e6da52d28ede76a3eac4d469c4a535d1117 Mon Sep 17 00:00:00 2001
From: Myrta Sakellariou <myrta.sakellariou@gmail.com>
Date: Mon, 12 May 2025 08:28:10 +0200
Subject: [PATCH 04/26] add examples

---
 packages/components/src/components.d.ts       | 135 +++++++++++++++++-
 .../src/components/post-icon/readme.md        |   4 +
 .../post-test-button/post-test-button.tsx     |  19 ++-
 .../src/components/post-test-button/readme.md |   7 +-
 .../post-test-button2/post-test-button2.scss  |   1 +
 .../post-test-button2/post-test-button2.tsx   |  64 +++++++++
 .../components/post-test-button2/readme.md    |  32 +++++
 .../post-test-button3/post-test-button3.scss  |   1 +
 .../post-test-button3/post-test-button3.tsx   |  73 ++++++++++
 .../components/post-test-button3/readme.md    |  32 +++++
 .../post-test-span/post-test-span.tsx         |   4 +-
 .../post-test-span2/post-test-span2.scss      |   1 +
 .../post-test-span2/post-test-span2.tsx       |  60 ++++++++
 .../src/components/post-test-span2/readme.md  |  20 +++
 .../post-test-target/post-test-target.tsx     |   3 +-
 .../post-test-target2/post-test-target2.tsx   |   2 +-
 .../post-test-target3/post-test-target3.tsx   |   4 +-
 .../post-test-target4/post-test-target4.tsx   |  18 +--
 packages/components/src/index.html            |   2 +-
 .../ccr/ariacontrols/ariacontrols.docs.mdx    |  94 ++++++++++++
 .../ccr/ariacontrols/ariacontrols.stories.ts  | 105 ++++++++++++++
 .../ccr/ariadescribed/ariadescribed.docs.mdx  |  94 ++++++++++++
 .../ariadescribed/ariadescribed.stories.ts    | 104 ++++++++++++++
 .../ccr/arialabelled/arialabelled.docs.mdx    |  86 ++++++++---
 .../ccr/arialabelled/arialabelled.stories.ts  |  77 ++++++++--
 .../guidelines/ccr/forid/forid.docs.mdx       |  86 ++++++-----
 .../guidelines/ccr/forid/forid.stories.ts     |  26 ++--
 .../stories/guidelines/ccr/role/role.docs.mdx |  94 ++++++++++++
 .../guidelines/ccr/role/role.stories.ts       | 109 ++++++++++++++
 29 files changed, 1243 insertions(+), 114 deletions(-)
 create mode 100644 packages/components/src/components/post-test-button2/post-test-button2.scss
 create mode 100644 packages/components/src/components/post-test-button2/post-test-button2.tsx
 create mode 100644 packages/components/src/components/post-test-button2/readme.md
 create mode 100644 packages/components/src/components/post-test-button3/post-test-button3.scss
 create mode 100644 packages/components/src/components/post-test-button3/post-test-button3.tsx
 create mode 100644 packages/components/src/components/post-test-button3/readme.md
 create mode 100644 packages/components/src/components/post-test-span2/post-test-span2.scss
 create mode 100644 packages/components/src/components/post-test-span2/post-test-span2.tsx
 create mode 100644 packages/components/src/components/post-test-span2/readme.md
 create mode 100644 packages/documentation/src/stories/guidelines/ccr/ariacontrols/ariacontrols.docs.mdx
 create mode 100644 packages/documentation/src/stories/guidelines/ccr/ariacontrols/ariacontrols.stories.ts
 create mode 100644 packages/documentation/src/stories/guidelines/ccr/ariadescribed/ariadescribed.docs.mdx
 create mode 100644 packages/documentation/src/stories/guidelines/ccr/ariadescribed/ariadescribed.stories.ts
 create mode 100644 packages/documentation/src/stories/guidelines/ccr/role/role.docs.mdx
 create mode 100644 packages/documentation/src/stories/guidelines/ccr/role/role.stories.ts

diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
index e5e47cebc4..0a33af2b69 100644
--- a/packages/components/src/components.d.ts
+++ b/packages/components/src/components.d.ts
@@ -466,9 +466,41 @@ export namespace Components {
     }
     interface PostTestButton {
         /**
-          * Defines the id
+          * Defines the ariaDescribedbyId
          */
-        "theId"?: string;
+        "ariaDescribedbyId"?: string;
+        /**
+          * Defines the ariaLabelledbyId
+         */
+        "ariaLabelledbyId"?: string;
+    }
+    interface PostTestButton2 {
+        /**
+          * Defines the selected ariaDescribedbyId
+         */
+        "ariaDescribedbyId"?: string;
+        /**
+          * Defines the selected ariaLabelledbyId
+         */
+        "ariaLabelledbyId"?: string;
+        /**
+          * Defines the selected workaround
+         */
+        "workaround"?: string;
+    }
+    interface PostTestButton3 {
+        /**
+          * Defines the ariaDescribedbyId
+         */
+        "ariaDescribedbyId"?: string;
+        /**
+          * Defines the ariaLabelledbyId
+         */
+        "ariaLabelledbyId"?: string;
+        /**
+          * Defines the selected workaround
+         */
+        "workaround"?: string;
     }
     interface PostTestLabel {
         /**
@@ -494,6 +526,24 @@ export namespace Components {
          */
         "workaround"?: string;
     }
+    interface PostTestSpan2 {
+        /**
+          * Defines the id of the button to reference
+         */
+        "btnId": string;
+        /**
+          * Defines the label text
+         */
+        "labelText": string;
+        /**
+          * Defines the spanId
+         */
+        "spanId"?: string;
+        /**
+          * Defines the selected workaround
+         */
+        "workaround"?: string;
+    }
     interface PostTestTarget {
         /**
           * Defines the selected workaround
@@ -915,6 +965,18 @@ declare global {
         prototype: HTMLPostTestButtonElement;
         new (): HTMLPostTestButtonElement;
     };
+    interface HTMLPostTestButton2Element extends Components.PostTestButton2, HTMLStencilElement {
+    }
+    var HTMLPostTestButton2Element: {
+        prototype: HTMLPostTestButton2Element;
+        new (): HTMLPostTestButton2Element;
+    };
+    interface HTMLPostTestButton3Element extends Components.PostTestButton3, HTMLStencilElement {
+    }
+    var HTMLPostTestButton3Element: {
+        prototype: HTMLPostTestButton3Element;
+        new (): HTMLPostTestButton3Element;
+    };
     interface HTMLPostTestLabelElement extends Components.PostTestLabel, HTMLStencilElement {
     }
     var HTMLPostTestLabelElement: {
@@ -927,6 +989,12 @@ declare global {
         prototype: HTMLPostTestSpanElement;
         new (): HTMLPostTestSpanElement;
     };
+    interface HTMLPostTestSpan2Element extends Components.PostTestSpan2, HTMLStencilElement {
+    }
+    var HTMLPostTestSpan2Element: {
+        prototype: HTMLPostTestSpan2Element;
+        new (): HTMLPostTestSpan2Element;
+    };
     interface HTMLPostTestTargetElement extends Components.PostTestTarget, HTMLStencilElement {
     }
     var HTMLPostTestTargetElement: {
@@ -998,8 +1066,11 @@ declare global {
         "post-tabs": HTMLPostTabsElement;
         "post-tag": HTMLPostTagElement;
         "post-test-button": HTMLPostTestButtonElement;
+        "post-test-button2": HTMLPostTestButton2Element;
+        "post-test-button3": HTMLPostTestButton3Element;
         "post-test-label": HTMLPostTestLabelElement;
         "post-test-span": HTMLPostTestSpanElement;
+        "post-test-span2": HTMLPostTestSpan2Element;
         "post-test-target": HTMLPostTestTargetElement;
         "post-test-target2": HTMLPostTestTarget2Element;
         "post-test-target3": HTMLPostTestTarget3Element;
@@ -1404,9 +1475,41 @@ declare namespace LocalJSX {
     }
     interface PostTestButton {
         /**
-          * Defines the id
+          * Defines the ariaDescribedbyId
+         */
+        "ariaDescribedbyId"?: string;
+        /**
+          * Defines the ariaLabelledbyId
+         */
+        "ariaLabelledbyId"?: string;
+    }
+    interface PostTestButton2 {
+        /**
+          * Defines the selected ariaDescribedbyId
+         */
+        "ariaDescribedbyId"?: string;
+        /**
+          * Defines the selected ariaLabelledbyId
          */
-        "theId"?: string;
+        "ariaLabelledbyId"?: string;
+        /**
+          * Defines the selected workaround
+         */
+        "workaround"?: string;
+    }
+    interface PostTestButton3 {
+        /**
+          * Defines the ariaDescribedbyId
+         */
+        "ariaDescribedbyId"?: string;
+        /**
+          * Defines the ariaLabelledbyId
+         */
+        "ariaLabelledbyId"?: string;
+        /**
+          * Defines the selected workaround
+         */
+        "workaround"?: string;
     }
     interface PostTestLabel {
         /**
@@ -1432,6 +1535,24 @@ declare namespace LocalJSX {
          */
         "workaround"?: string;
     }
+    interface PostTestSpan2 {
+        /**
+          * Defines the id of the button to reference
+         */
+        "btnId"?: string;
+        /**
+          * Defines the label text
+         */
+        "labelText"?: string;
+        /**
+          * Defines the spanId
+         */
+        "spanId"?: string;
+        /**
+          * Defines the selected workaround
+         */
+        "workaround"?: string;
+    }
     interface PostTestTarget {
         /**
           * Defines the selected workaround
@@ -1507,8 +1628,11 @@ declare namespace LocalJSX {
         "post-tabs": PostTabs;
         "post-tag": PostTag;
         "post-test-button": PostTestButton;
+        "post-test-button2": PostTestButton2;
+        "post-test-button3": PostTestButton3;
         "post-test-label": PostTestLabel;
         "post-test-span": PostTestSpan;
+        "post-test-span2": PostTestSpan2;
         "post-test-target": PostTestTarget;
         "post-test-target2": PostTestTarget2;
         "post-test-target3": PostTestTarget3;
@@ -1561,8 +1685,11 @@ declare module "@stencil/core" {
             "post-tabs": LocalJSX.PostTabs & JSXBase.HTMLAttributes<HTMLPostTabsElement>;
             "post-tag": LocalJSX.PostTag & JSXBase.HTMLAttributes<HTMLPostTagElement>;
             "post-test-button": LocalJSX.PostTestButton & JSXBase.HTMLAttributes<HTMLPostTestButtonElement>;
+            "post-test-button2": LocalJSX.PostTestButton2 & JSXBase.HTMLAttributes<HTMLPostTestButton2Element>;
+            "post-test-button3": LocalJSX.PostTestButton3 & JSXBase.HTMLAttributes<HTMLPostTestButton3Element>;
             "post-test-label": LocalJSX.PostTestLabel & JSXBase.HTMLAttributes<HTMLPostTestLabelElement>;
             "post-test-span": LocalJSX.PostTestSpan & JSXBase.HTMLAttributes<HTMLPostTestSpanElement>;
+            "post-test-span2": LocalJSX.PostTestSpan2 & JSXBase.HTMLAttributes<HTMLPostTestSpan2Element>;
             "post-test-target": LocalJSX.PostTestTarget & JSXBase.HTMLAttributes<HTMLPostTestTargetElement>;
             "post-test-target2": LocalJSX.PostTestTarget2 & JSXBase.HTMLAttributes<HTMLPostTestTarget2Element>;
             "post-test-target3": LocalJSX.PostTestTarget3 & JSXBase.HTMLAttributes<HTMLPostTestTarget3Element>;
diff --git a/packages/components/src/components/post-icon/readme.md b/packages/components/src/components/post-icon/readme.md
index d637583c24..de2350dc5f 100644
--- a/packages/components/src/components/post-icon/readme.md
+++ b/packages/components/src/components/post-icon/readme.md
@@ -34,6 +34,8 @@ some content
  - [post-rating](../post-rating)
  - [post-tag](../post-tag)
  - [post-test-button](../post-test-button)
+ - [post-test-button2](../post-test-button2)
+ - [post-test-button3](../post-test-button3)
 
 ### Graph
 ```mermaid
@@ -50,6 +52,8 @@ graph TD;
   post-rating --> post-icon
   post-tag --> post-icon
   post-test-button --> post-icon
+  post-test-button2 --> post-icon
+  post-test-button3 --> post-icon
   style post-icon fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
diff --git a/packages/components/src/components/post-test-button/post-test-button.tsx b/packages/components/src/components/post-test-button/post-test-button.tsx
index c484d3cb02..7a041203e1 100644
--- a/packages/components/src/components/post-test-button/post-test-button.tsx
+++ b/packages/components/src/components/post-test-button/post-test-button.tsx
@@ -8,14 +8,27 @@ import { version } from '@root/package.json';
 })
 export class PostTestButton {
   /**
-   * Defines the id
+   * Defines the ariaLabelledbyId
    */
-  @Prop() theId?: string;
+  @Prop() ariaLabelledbyId?: string;
+
+  /**
+   * Defines the ariaDescribedbyId
+   */
+  @Prop() ariaDescribedbyId?: string;
 
   render() {
     return (
       // Shadow DOM - Same Shadow DOM
-      <Host data-version={version} class="btn btn-primary" role="button" tabindex="0">
+      <Host
+        data-version={version}
+        class="btn btn-primary"
+        role="button"
+        tabindex="0"
+        aria-labelledby={this.ariaLabelledbyId}
+        aria-describedby={this.ariaDescribedbyId}
+      >
+        <slot name="label-slot"></slot>
         <div>
           <post-icon name="1022"></post-icon>
         </div>
diff --git a/packages/components/src/components/post-test-button/readme.md b/packages/components/src/components/post-test-button/readme.md
index 40b31cca52..bea8f1a65f 100644
--- a/packages/components/src/components/post-test-button/readme.md
+++ b/packages/components/src/components/post-test-button/readme.md
@@ -7,9 +7,10 @@
 
 ## Properties
 
-| Property | Attribute | Description    | Type     | Default     |
-| -------- | --------- | -------------- | -------- | ----------- |
-| `theId`  | `the-id`  | Defines the id | `string` | `undefined` |
+| Property            | Attribute             | Description                   | Type     | Default     |
+| ------------------- | --------------------- | ----------------------------- | -------- | ----------- |
+| `ariaDescribedbyId` | `aria-describedby-id` | Defines the ariaDescribedbyId | `string` | `undefined` |
+| `ariaLabelledbyId`  | `aria-labelledby-id`  | Defines the ariaLabelledbyId  | `string` | `undefined` |
 
 
 ## Dependencies
diff --git a/packages/components/src/components/post-test-button2/post-test-button2.scss b/packages/components/src/components/post-test-button2/post-test-button2.scss
new file mode 100644
index 0000000000..28612a51ef
--- /dev/null
+++ b/packages/components/src/components/post-test-button2/post-test-button2.scss
@@ -0,0 +1 @@
+@use '@swisspost/design-system-styles/post-default.scss';
diff --git a/packages/components/src/components/post-test-button2/post-test-button2.tsx b/packages/components/src/components/post-test-button2/post-test-button2.tsx
new file mode 100644
index 0000000000..41214f27da
--- /dev/null
+++ b/packages/components/src/components/post-test-button2/post-test-button2.tsx
@@ -0,0 +1,64 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+import { version } from '@root/package.json';
+
+@Component({
+  tag: 'post-test-button2',
+  styleUrl: 'post-test-button2.scss',
+  shadow: { delegatesFocus: true },
+})
+export class PostTestButton2 {
+  private internalEl: HTMLElement | undefined;
+  /**
+   * Defines the selected workaround
+   */
+  @Prop() workaround?: string;
+
+  /**
+   * Defines the selected ariaLabelledbyId
+   */
+  @Prop() ariaLabelledbyId?: string;
+
+  /**
+   * Defines the selected ariaDescribedbyId
+   */
+  @Prop() ariaDescribedbyId?: string;
+
+  private setProperties() {
+    if (this.internalEl) {
+      const arialabelEl = document.querySelector(`[id=${this.ariaLabelledbyId}]`);
+      const ariadescEl = document.querySelector(`[id=${this.ariaDescribedbyId}]`);
+
+      if (this.workaround == 'ariaLabelledByElements') {
+        this.internalEl.ariaLabelledByElements = [arialabelEl];
+      } else {
+        this.internalEl.ariaLabelledByElements = [];
+      }
+
+      if (this.workaround == 'ariaDescribedByElements') {
+        this.internalEl.ariaDescribedByElements = [ariadescEl];
+      } else {
+        this.internalEl.ariaDescribedByElements = [];
+      }
+    }
+  }
+
+  componentDidLoad() {
+    this.setProperties();
+  }
+
+  componentDidUpdate() {
+    this.setProperties();
+  }
+
+  render() {
+    return (
+      // Shadow DOM - Same Shadow DOM
+      <Host data-version={version} class="btn btn-primary">
+        <slot name="label-slot"></slot>
+        <div ref={el => (this.internalEl = el as HTMLElement)} role="button" tabindex="0">
+          <post-icon name="1022"></post-icon>
+        </div>
+      </Host>
+    );
+  }
+}
diff --git a/packages/components/src/components/post-test-button2/readme.md b/packages/components/src/components/post-test-button2/readme.md
new file mode 100644
index 0000000000..65e6e303cd
--- /dev/null
+++ b/packages/components/src/components/post-test-button2/readme.md
@@ -0,0 +1,32 @@
+# post-test-form
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property            | Attribute             | Description                            | Type     | Default     |
+| ------------------- | --------------------- | -------------------------------------- | -------- | ----------- |
+| `ariaDescribedbyId` | `aria-describedby-id` | Defines the selected ariaDescribedbyId | `string` | `undefined` |
+| `ariaLabelledbyId`  | `aria-labelledby-id`  | Defines the selected ariaLabelledbyId  | `string` | `undefined` |
+| `workaround`        | `workaround`          | Defines the selected workaround        | `string` | `undefined` |
+
+
+## Dependencies
+
+### Depends on
+
+- [post-icon](../post-icon)
+
+### Graph
+```mermaid
+graph TD;
+  post-test-button2 --> post-icon
+  style post-test-button2 fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/components/src/components/post-test-button3/post-test-button3.scss b/packages/components/src/components/post-test-button3/post-test-button3.scss
new file mode 100644
index 0000000000..28612a51ef
--- /dev/null
+++ b/packages/components/src/components/post-test-button3/post-test-button3.scss
@@ -0,0 +1 @@
+@use '@swisspost/design-system-styles/post-default.scss';
diff --git a/packages/components/src/components/post-test-button3/post-test-button3.tsx b/packages/components/src/components/post-test-button3/post-test-button3.tsx
new file mode 100644
index 0000000000..bffaf66e0a
--- /dev/null
+++ b/packages/components/src/components/post-test-button3/post-test-button3.tsx
@@ -0,0 +1,73 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+import { version } from '@root/package.json';
+
+@Component({
+  tag: 'post-test-button3',
+  styleUrl: 'post-test-button3.scss',
+  shadow: true,
+})
+export class PostTestButton3 {
+  /**
+   * Defines the ariaLabelledbyId
+   */
+  @Prop() ariaLabelledbyId?: string;
+
+  /**
+   * Defines the ariaDescribedbyId
+   */
+  @Prop() ariaDescribedbyId?: string;
+
+  private slotEl: HTMLSlotElement | undefined;
+  private internalEl: HTMLElement | undefined;
+
+  /**
+   * Defines the selected workaround
+   */
+  @Prop() workaround?: string;
+
+  private setProperties() {
+    if (this.slotEl && this.internalEl) {
+      if (this.workaround == 'ariaLabelledByElements') {
+        const assignedElements = this.slotEl.assignedElements({ flatten: true });
+        const labelElement = assignedElements[0];
+        console.log(labelElement);
+        if (labelElement) {
+          this.internalEl.ariaLabelledByElements = [labelElement];
+        } else {
+          this.internalEl.ariaLabelledByElements = [];
+        }
+      }
+
+      if (this.workaround == 'ariaDescribedByElements') {
+        const assignedElements = this.slotEl.assignedElements({ flatten: true });
+        const descElement = assignedElements[0];
+
+        if (descElement) {
+          this.internalEl.ariaDescribedByElements = [descElement];
+        } else {
+          this.internalEl.ariaDescribedByElements = [];
+        }
+      }
+    }
+  }
+
+  componentDidLoad() {
+    this.setProperties();
+  }
+
+  componentDidUpdate() {
+    this.setProperties();
+  }
+
+  render() {
+    return (
+      // Shadow DOM - Same Shadow DOM
+      <Host data-version={version} class="btn btn-primary">
+        <slot name="label-slot" ref={el => (this.slotEl = el as HTMLSlotElement)}></slot>
+        <div ref={el => (this.internalEl = el as HTMLElement)} role="button" tabindex="0">
+          <post-icon name="1022"></post-icon>
+        </div>
+      </Host>
+    );
+  }
+}
diff --git a/packages/components/src/components/post-test-button3/readme.md b/packages/components/src/components/post-test-button3/readme.md
new file mode 100644
index 0000000000..b544f2a785
--- /dev/null
+++ b/packages/components/src/components/post-test-button3/readme.md
@@ -0,0 +1,32 @@
+# post-test-form
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property            | Attribute             | Description                     | Type     | Default     |
+| ------------------- | --------------------- | ------------------------------- | -------- | ----------- |
+| `ariaDescribedbyId` | `aria-describedby-id` | Defines the ariaDescribedbyId   | `string` | `undefined` |
+| `ariaLabelledbyId`  | `aria-labelledby-id`  | Defines the ariaLabelledbyId    | `string` | `undefined` |
+| `workaround`        | `workaround`          | Defines the selected workaround | `string` | `undefined` |
+
+
+## Dependencies
+
+### Depends on
+
+- [post-icon](../post-icon)
+
+### Graph
+```mermaid
+graph TD;
+  post-test-button3 --> post-icon
+  style post-test-button3 fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/components/src/components/post-test-span/post-test-span.tsx b/packages/components/src/components/post-test-span/post-test-span.tsx
index 14c7e74450..015c9fa63d 100644
--- a/packages/components/src/components/post-test-span/post-test-span.tsx
+++ b/packages/components/src/components/post-test-span/post-test-span.tsx
@@ -51,8 +51,8 @@ export class PostTestSpan {
 
   render() {
     return (
-      <Host data-version={version} for={this.spanId}>
-        <span id={this.spanId}>{this.labelText}</span>
+      <Host data-version={version}>
+        <span>My Text</span>
         <slot></slot>
       </Host>
     );
diff --git a/packages/components/src/components/post-test-span2/post-test-span2.scss b/packages/components/src/components/post-test-span2/post-test-span2.scss
new file mode 100644
index 0000000000..28612a51ef
--- /dev/null
+++ b/packages/components/src/components/post-test-span2/post-test-span2.scss
@@ -0,0 +1 @@
+@use '@swisspost/design-system-styles/post-default.scss';
diff --git a/packages/components/src/components/post-test-span2/post-test-span2.tsx b/packages/components/src/components/post-test-span2/post-test-span2.tsx
new file mode 100644
index 0000000000..fda6cb7133
--- /dev/null
+++ b/packages/components/src/components/post-test-span2/post-test-span2.tsx
@@ -0,0 +1,60 @@
+import { Component, h, Host, Prop, Element } from '@stencil/core';
+import { version } from '@root/package.json';
+
+@Component({
+  tag: 'post-test-span2',
+  styleUrl: 'post-test-span2.scss',
+  shadow: true,
+})
+export class PostTestSpan2 {
+  @Element() host: HTMLPostTestSpan2Element;
+
+  /**
+   * Defines the spanId
+   */
+  @Prop() spanId?: string;
+
+  /**
+   * Defines the label text
+   */
+  @Prop() labelText: string;
+
+  /**
+   * Defines the id of the button to reference
+   */
+  @Prop() btnId: string;
+
+  /**
+   * Defines the selected workaround
+   */
+  @Prop() workaround?: string;
+
+  private setAriaLabel() {
+    const selector = `#${this.btnId}`;
+    const targetInput = document.querySelector(selector);
+    if (targetInput) {
+      if (this.workaround == 'arialabel') {
+        targetInput.setAttribute('aria-label-text', this.labelText);
+      } else {
+        targetInput.removeAttribute('aria-label-text');
+      }
+    }
+  }
+
+  componentWillLoad() {
+    this.setAriaLabel();
+  }
+
+  componentDidUpdate() {
+    this.setAriaLabel();
+  }
+
+  render() {
+    return (
+      <Host data-version={version}>
+        <span>My Text</span>
+        <slot></slot>
+      </Host>
+    );
+  }
+}
diff --git a/packages/components/src/components/post-test-span2/readme.md b/packages/components/src/components/post-test-span2/readme.md
new file mode 100644
index 0000000000..0e09377b1e
--- /dev/null
+++ b/packages/components/src/components/post-test-span2/readme.md
@@ -0,0 +1,20 @@
+# post-avatar
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property     | Attribute    | Description                               | Type     | Default     |
+| ------------ | ------------ | ----------------------------------------- | -------- | ----------- |
+| `btnId`      | `btn-id`     | Defines the id of the button to reference | `string` | `undefined` |
+| `labelText`  | `label-text` | Defines the label text                    | `string` | `undefined` |
+| `spanId`     | `span-id`    | Defines the spanId                        | `string` | `undefined` |
+| `workaround` | `workaround` | Defines the selected workaround           | `string` | `undefined` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/components/src/components/post-test-target/post-test-target.tsx b/packages/components/src/components/post-test-target/post-test-target.tsx
index d5b395eaec..4cb68e8359 100644
--- a/packages/components/src/components/post-test-target/post-test-target.tsx
+++ b/packages/components/src/components/post-test-target/post-test-target.tsx
@@ -4,6 +4,7 @@
 declare global {
   interface Element {
     ariaLabelledByElements: Element[];
+    ariaDescribedByElements: Element[];
   }
 }
 
@@ -31,7 +32,7 @@ export class PostTestTarget {
 
   private setAriaLabelledByElements() {
     const labelEl = document.querySelector(`[for=${this.ariaLabelledbyId}]`);
-    if (this.workaround == 'ariamixin') {
+    if (this.workaround == 'ariaLabelledByElements') {
       this.internalEl.ariaLabelledByElements = [labelEl];
     } else {
       this.internalEl.ariaLabelledByElements = [];
diff --git a/packages/components/src/components/post-test-target2/post-test-target2.tsx b/packages/components/src/components/post-test-target2/post-test-target2.tsx
index 505ecb9e4a..d9ccabd250 100644
--- a/packages/components/src/components/post-test-target2/post-test-target2.tsx
+++ b/packages/components/src/components/post-test-target2/post-test-target2.tsx
@@ -18,7 +18,7 @@ export class PostTestTarget2 {
   @Prop() workaround?: string;
 
   private setupInputLabelingFromSlot() {
-    if (this.slotEl && this.internalEl && this.workaround == 'ariamixin') {
+    if (this.slotEl && this.internalEl && this.workaround == 'ariaLabelledByElements') {
       const assignedElements = this.slotEl.assignedElements({ flatten: true });
       const labelElement = assignedElements.find(el => el.tagName === 'LABEL');
 
diff --git a/packages/components/src/components/post-test-target3/post-test-target3.tsx b/packages/components/src/components/post-test-target3/post-test-target3.tsx
index 5ff8f7d8fc..7472e6389e 100644
--- a/packages/components/src/components/post-test-target3/post-test-target3.tsx
+++ b/packages/components/src/components/post-test-target3/post-test-target3.tsx
@@ -11,9 +11,9 @@ export class PostTestTarget3 {
 
   render() {
     return (
-      <Host data-version={version}>
+      <Host data-version={version} tabindex="0" role="textbox">
         <slot name="label-slot"></slot>
-        <input></input>
+        <div class="border">I am not a real input, just a div with border...</div>
       </Host>
     );
   }
diff --git a/packages/components/src/components/post-test-target4/post-test-target4.tsx b/packages/components/src/components/post-test-target4/post-test-target4.tsx
index 71ad83e7f9..a6e938cc9e 100644
--- a/packages/components/src/components/post-test-target4/post-test-target4.tsx
+++ b/packages/components/src/components/post-test-target4/post-test-target4.tsx
@@ -4,6 +4,7 @@ import { version } from '@root/package.json';
 declare global {
   interface ElementInternals {
     ariaLabelledByElements: Element;
+    ariaDescribedByElements: Element[];
   }
 }
 
@@ -18,24 +19,11 @@ export class PostTestTarget4 {
 
   @AttachInternals() internals!: ElementInternals;
 
-  /**
-   * Handles input events from the internal native input.
-   * Updates the component's state and sets the form value
-   * using ElementInternals.
-   * @param event The input event
-   */
-
   componentDidLoad() {
-    // Get a reference to the slot element
     const slotElement = this.host.shadowRoot?.querySelector('slot[name="label-slot"]');
-
     if (slotElement instanceof HTMLSlotElement) {
-      // Get the elements assigned to the slot
       const assignedElements = slotElement.assignedElements();
-
-      // Assuming the first assigned element is the label
       const labelElement = assignedElements[0];
-
       if (labelElement) {
         this.internals.ariaLabelledByElements = labelElement;
       }
@@ -43,9 +31,9 @@ export class PostTestTarget4 {
   }
   render() {
     return (
-      <Host data-version={version}>
+      <Host data-version={version} role="textbox" tabindex="0">
         <slot name="label-slot"></slot>
-        <input></input>
+        <div class="border">I am not a real input, just a div with border...</div>
       </Host>
     );
   }
diff --git a/packages/components/src/index.html b/packages/components/src/index.html
index 344decc01e..aeb9419a07 100644
--- a/packages/components/src/index.html
+++ b/packages/components/src/index.html
@@ -178,7 +178,7 @@ <h1>Components package playground</h1>
       <option value="compact">Post compact</option>
     </select>
     <hr />
-    <post-test-target input-id="test2" workaround="ariamixin"></post-test-target>
+    <post-test-target input-id="test2" workaround="ariaLabelledByElements"></post-test-target>
     <label for="test2"> test testst</label>
   </body>
 </html>
diff --git a/packages/documentation/src/stories/guidelines/ccr/ariacontrols/ariacontrols.docs.mdx b/packages/documentation/src/stories/guidelines/ccr/ariacontrols/ariacontrols.docs.mdx
new file mode 100644
index 0000000000..8aba89b10e
--- /dev/null
+++ b/packages/documentation/src/stories/guidelines/ccr/ariacontrols/ariacontrols.docs.mdx
@@ -0,0 +1,94 @@
+import { Meta, Canvas, Source, Controls } from '@storybook/blocks';
+import * as CCR from './ariacontrols.stories';
+
+<Meta of={CCR} />
+
+# Cross Component Referencing Cases
+
+## 4. `aria-controls`/ `id`
+
+### I. Referencing Within the Same DOM Tree ✔️
+
+<ul>
+  <li>Light DOM → Light DOM</li>
+
+</ul>
+  <Canvas of={CCR.ExampleHTML} sourceState="shown" />
+<p className="lead">
+  In the Light DOM, `aria-describedby` is used to give an element its accessible name by referencing
+  the id of another element or multiple elements that contain the desired text.
+</p>
+<p>
+  This is useful when a simple text label isn't directly associated or when the name needs to be
+  combined from different pieces of text.
+</p>
+
+### II. Referencing From Outside a Shadow DOM Into That Shadow DOM ❌
+
+<ul>
+  <li>Light DOM → Shadow DOM</li>
+  <li>Slotted Content → Shadow DOM</li>
+</ul>
+
+Standard `aria-describedby` <b>cannot reference elements located inside a Shadow DOM</b> from outside of it. This is because IDs inside a Shadow DOM are encapsulated and not accessible from the Light DOM or other Shadow DOMs.
+
+##### Possible Workarounds
+
+###### 1. `Element:ariaDescribedByElements` (Non SSR compatible: to be tested)
+
+<b>Light DOM → Shadow DOM Example</b>
+<Canvas of={CCR.Example2} sourceState="shown" />
+<div className="hide-col-default">
+  <Controls of={CCR.Example2} />
+</div>
+
+<b>Slotted Content → Shadow DOM Example</b>
+<Canvas of={CCR.Example3} sourceState="shown" />
+<div className="hide-col-default">
+  <Controls of={CCR.Example3} />
+</div>
+
+###### 2. Set `aria-describedby`on the host (for SSR Components: to be tested)
+
+An option is to set the following attributes directly on the host of the target component:
+
+<ul>
+  <li> the `aria-describedby`</li>
+  <li> a semantic `role` (e.g. `textbox`, `button`)</li>
+  <li> `tabindex="0"`</li>
+</ul>
+
+<b>Light DOM → Shadow DOM Example</b>
+<Canvas of={CCR.Example4} sourceState="shown" />
+
+<b>Slotted Content → Shadow DOM Example</b>
+<Canvas of={CCR.Example5} sourceState="shown" />
+
+### III. Referencing From Inside a Shadow DOM Out to the Light DOM ❌
+
+<ul>
+  <li>Shadow DOM → Light DOM</li>
+  <li>Shadow DOM → Slotted Content</li>
+</ul>
+
+Similarly to the previous case, <b>referencing an element located outside a Shadow DOM from an element inside that Shadow DOM using standard `aria-describedby` is not possible</b>. The strong encapsulation of the Shadow DOM prevents elements within it from directly accessing and referencing the IDs of elements in the Light DOM.
+
+##### Possible Workaround
+
+An option is to set the `id` directly on the host of the referencing element. Please note that, in this case all the visible text inside the referencing component will be assigned as the Accessible Name of the target element.
+
+<Canvas of={CCR.Example6} sourceState="shown" />
+
+##### IV. Referencing From One Shadow DOM To Another Shadow DOM
+
+<ul>
+  <li>Shadow DOM → Other Shadow DOM</li>
+</ul>
+
+Referencing an element located inside <b>one Shadow DOM</b> from an element located inside a <b>different, separate Shadow DOM</b> using standard `aria-describedby` <b>is also not possible</b>. Similar to the other cross-boundary scenarios, the IDs are scoped within their respective Shadow DOMs.
+
+##### Possible Workaround
+
+In this case, in order for the relationship to work, the referencing element must have the `id` directly set on its host (see workaround of case III) and the target element must have the `aria-describedby`, `role` and `tabindex="0"` set on its host (see workaround of case II).
+
+<Canvas of={CCR.Example7} sourceState="shown" />
diff --git a/packages/documentation/src/stories/guidelines/ccr/ariacontrols/ariacontrols.stories.ts b/packages/documentation/src/stories/guidelines/ccr/ariacontrols/ariacontrols.stories.ts
new file mode 100644
index 0000000000..fa1b30141a
--- /dev/null
+++ b/packages/documentation/src/stories/guidelines/ccr/ariacontrols/ariacontrols.stories.ts
@@ -0,0 +1,105 @@
+import { StoryObj, Args } from '@storybook/web-components';
+import { MetaExtended } from '@root/types';
+import { html } from 'lit';
+
+const meta: MetaExtended = {
+  id: '76ade552-2c03-4d6d-9dce-28daa346f3g3',
+  title: 'Guidelines/Crossing the Shadow DOM/4.AriaControls',
+  parameters: {
+    badges: [],
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+// Case: Standard Light DOM to Light DOM
+export const ExampleHTML: Story = {
+  render: () => html`
+    <div aria-controls="id_1" role="tab" tabindex="0">Control Element 1</div>
+    <div id="id_1" role="tabpanel">Controlled Content 1</div>
+    <div aria-controls="id_2" role="tab" tabindex="0">Control Element 2</div>
+    <div id="id_2" role="tabpanel">Controlled Content 2</div>
+  `,
+};
+
+// Case: Referencing from Shadow DOM (Host Attribute) to Light DOM (Element) workaround setting programmatically the relevant Element property
+export const Example2: Story = {
+  argTypes: {
+    workaround: {
+      name: 'Workaround',
+      control: {
+        type: 'radio',
+      },
+      options: ['none', 'ariaControlsElements'],
+    },
+  },
+  args: {
+    workaround: 'none',
+  },
+  render: (args: Args) => html`
+    <post-test-button2
+      aria-controls-id="controlled_id_2"
+      workaround="${args.workaround}"
+    ></post-test-button2>
+    <span id="controlled_id_2">Controlled Element 2</span>
+  `,
+};
+
+// Case: Referencing from Shadow DOM (Host Attribute) to Slotted Content (Element) workaround setting programmatically the relevant Element property
+export const Example3: Story = {
+  argTypes: {
+    workaround: {
+      name: 'Workaround',
+      control: {
+        type: 'radio',
+      },
+      options: ['none', 'ariaControlsElements'], // Adjusted option name for clarity
+    },
+  },
+  args: {
+    workaround: 'none',
+  },
+  render: (args: Args) => html`
+    <post-test-button3 workaround="${args.workaround}">
+      <span slot="control-slot" id="controlled_id_3">Controlled Element 3 (Slotted)</span>
+    </post-test-button3>
+  `,
+};
+
+// Case: Referencing from Shadow DOM (Host Attribute) to Light DOM (Element) workaround with aria-controls directly set on host
+export const Example4: Story = {
+  render: () => html`
+    <post-test-button aria-controls-id="controlled_id_4">Control Element</post-test-button>
+    <span id="controlled_id_4">Controlled Element 4</span>
+  `,
+};
+
+// Case: Referencing from Shadow Dom to Slotted Content (Light DOM) workaround with aria-controls directly set on host
+export const Example5: Story = {
+  render: () => html`
+    <post-test-button aria-controls-id="controlled_id_5">
+      <span slot="control-slot" id="controlled_id_5">Controlled Element 5 (Slotted)</span>
+    </post-test-button>
+  `,
+};
+
+// Case: Standard Light DOM to Shadow DOM
+export const Example6: Story = {
+  render: () => html`
+    <div class="btn btn-primary" aria-controls="controlled_id_6" role="button" tabindex="0">
+      <post-icon name="1022"></post-icon>
+      Control Element
+    </div>
+    <post-test-span2></post-test-span2>
+  `,
+};
+
+// Case: Shadow DOM to other Shadow Dom workaround
+export const Example7: Story = {
+  render: () => html`
+    <post-test-span2 id="controlled_id_7_host"></post-test-span2>
+    <post-test-button aria-controls="controlled_id_7"></post-test-button>
+  `,
+};
diff --git a/packages/documentation/src/stories/guidelines/ccr/ariadescribed/ariadescribed.docs.mdx b/packages/documentation/src/stories/guidelines/ccr/ariadescribed/ariadescribed.docs.mdx
new file mode 100644
index 0000000000..95e295b176
--- /dev/null
+++ b/packages/documentation/src/stories/guidelines/ccr/ariadescribed/ariadescribed.docs.mdx
@@ -0,0 +1,94 @@
+import { Meta, Canvas, Source, Controls } from '@storybook/blocks';
+import * as CCR from './ariadescribed.stories';
+
+<Meta of={CCR} />
+
+# Cross Component Referencing Cases
+
+## 3. `aria-describedby`/ `id`
+
+### I. Referencing Within the Same DOM Tree ✔️
+
+<ul>
+  <li>Light DOM → Light DOM</li>
+
+</ul>
+  <Canvas of={CCR.ExampleHTML} sourceState="shown" />
+<p className="lead">
+  In the Light DOM, `aria-describedby` is used to give an element its accessible name by referencing
+  the id of another element or multiple elements that contain the desired text.
+</p>
+<p>
+  This is useful when a simple text label isn't directly associated or when the name needs to be
+  combined from different pieces of text.
+</p>
+
+### II. Referencing From Outside a Shadow DOM Into That Shadow DOM ❌
+
+<ul>
+  <li>Light DOM → Shadow DOM</li>
+  <li>Slotted Content → Shadow DOM</li>
+</ul>
+
+Standard `aria-describedby` <b>cannot reference elements located inside a Shadow DOM</b> from outside of it. This is because IDs inside a Shadow DOM are encapsulated and not accessible from the Light DOM or other Shadow DOMs.
+
+##### Possible Workarounds
+
+###### 1. `Element:ariaDescribedByElements` (Non SSR compatible: to be tested)
+
+<b>Light DOM → Shadow DOM Example</b>
+<Canvas of={CCR.Example2} sourceState="shown" />
+<div className="hide-col-default">
+  <Controls of={CCR.Example2} />
+</div>
+
+<b>Slotted Content → Shadow DOM Example</b>
+<Canvas of={CCR.Example3} sourceState="shown" />
+<div className="hide-col-default">
+  <Controls of={CCR.Example3} />
+</div>
+
+###### 2. Set `aria-describedby`on the host (for SSR Components: to be tested)
+
+An option is to set the following attributes directly on the host of the target component:
+
+<ul>
+  <li> the `aria-describedby`</li>
+  <li> a semantic `role` (e.g. `textbox`, `button`)</li>
+  <li> `tabindex="0"`</li>
+</ul>
+
+<b>Light DOM → Shadow DOM Example</b>
+<Canvas of={CCR.Example4} sourceState="shown" />
+
+<b>Slotted Content → Shadow DOM Example</b>
+<Canvas of={CCR.Example5} sourceState="shown" />
+
+### III. Referencing From Inside a Shadow DOM Out to the Light DOM ❌
+
+<ul>
+  <li>Shadow DOM → Light DOM</li>
+  <li>Shadow DOM → Slotted Content</li>
+</ul>
+
+Similarly to the previous case, <b>referencing an element located outside a Shadow DOM from an element inside that Shadow DOM using standard `aria-describedby` is not possible</b>. The strong encapsulation of the Shadow DOM prevents elements within it from directly accessing and referencing the IDs of elements in the Light DOM.
+
+##### Possible Workaround
+
+An option is to set the `id` directly on the host of the referencing element. Please note that, in this case all the visible text inside the referencing component will be assigned as the Accessible Name of the target element.
+
+<Canvas of={CCR.Example6} sourceState="shown" />
+
+##### IV. Referencing From One Shadow DOM To Another Shadow DOM
+
+<ul>
+  <li>Shadow DOM → Other Shadow DOM</li>
+</ul>
+
+Referencing an element located inside <b>one Shadow DOM</b> from an element located inside a <b>different, separate Shadow DOM</b> using standard `aria-describedby` <b>is also not possible</b>. Similar to the other cross-boundary scenarios, the IDs are scoped within their respective Shadow DOMs.
+
+##### Possible Workaround
+
+In this case, in order for the relationship to work, the referencing element must have the `id` directly set on its host (see workaround of case III) and the target element must have the `aria-describedby`, `role` and `tabindex="0"` set on its host (see workaround of case II).
+
+<Canvas of={CCR.Example7} sourceState="shown" />
diff --git a/packages/documentation/src/stories/guidelines/ccr/ariadescribed/ariadescribed.stories.ts b/packages/documentation/src/stories/guidelines/ccr/ariadescribed/ariadescribed.stories.ts
new file mode 100644
index 0000000000..66dd91da75
--- /dev/null
+++ b/packages/documentation/src/stories/guidelines/ccr/ariadescribed/ariadescribed.stories.ts
@@ -0,0 +1,104 @@
+import { StoryObj, Args } from '@storybook/web-components';
+import { MetaExtended } from '@root/types';
+import { html } from 'lit';
+
+const meta: MetaExtended = {
+  id: '76ade552-2c03-4d6d-9dce-28daa340f3g6',
+  title: 'Guidelines/Crossing the Shadow DOM/3.AriaDescribedBy',
+  parameters: {
+    badges: [],
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+// Case: Standard Light DOM to Light DOM
+export const ExampleHTML: Story = {
+  render: () => html`
+    <div class="btn btn-primary" aria-describedby="id_1" role="button" tabindex="0">
+      <post-icon name="1022"></post-icon>
+    </div>
+    <span id="id_1">My Description</span>
+  `,
+};
+
+// Case: Referencing from Shadow DOM (Host Attribute) to Light DOM (Element) workaround setting programmatically the relevant Element property
+export const Example2: Story = {
+  argTypes: {
+    workaround: {
+      name: 'Workaround',
+      control: {
+        type: 'radio',
+      },
+      options: ['none', 'ariaDescribedByElements'],
+    },
+  },
+  args: {
+    workaround: 'none',
+  },
+  render: (args: Args) => html`
+    <post-test-button2
+      aria-describedby-id="id_2"
+      workaround="${args.workaround}"
+    ></post-test-button2>
+    <span id="id_2">My Description</span>
+  `,
+};
+
+// Case: Referencing from Shadow DOM (Host Attribute) to Slotted Content (Element) workaround setting programmatically the relevant Element property
+export const Example3: Story = {
+  argTypes: {
+    workaround: {
+      name: 'Workaround',
+      control: {
+        type: 'radio',
+      },
+      options: ['none', 'ariaDescribedByElements'],
+    },
+  },
+  args: {
+    workaround: 'none',
+  },
+  render: (args: Args) => html`
+    <post-test-button3 workaround="${args.workaround}"
+      ><span slot="label-slot">My Description</span></post-test-button3
+    >
+  `,
+};
+
+// Case: Referencing from Shadow Dom to Light DOM workaround with aria-describedby directly set on host
+export const Example4: Story = {
+  render: () => html`
+    <post-test-button aria-describedby-id="id_4"></post-test-button>
+    <span id="id_4">My Description</span>
+  `,
+};
+
+// Case: Referencing from Shadow Dom to Slotted Content (Light DOM) workaround with aria-describedby directly set on host
+export const Example5: Story = {
+  render: () => html`
+    <post-test-button aria-describedby-id="id_5"
+      ><span slot="label-slot" id="id_5">My Description</span>
+    </post-test-button>
+  `,
+};
+
+// Case: Standard Light DOM to Shadow DOM workaround
+export const Example6: Story = {
+  render: () => html`
+    <div class="btn btn-primary" aria-describedby="id_6" role="button" tabindex="0">
+      <post-icon name="1022"></post-icon>
+    </div>
+    <post-test-span2 id="id_6"></post-test-span2>
+  `,
+};
+
+// Case: Shadow DOM to other Shadow Dom workaround
+export const Example7: Story = {
+  render: () => html`
+    <post-test-span2 id="id_7"></post-test-span2>
+    <post-test-button aria-describedby="id_7"></post-test-button>
+  `,
+};
diff --git a/packages/documentation/src/stories/guidelines/ccr/arialabelled/arialabelled.docs.mdx b/packages/documentation/src/stories/guidelines/ccr/arialabelled/arialabelled.docs.mdx
index 4fe4a8772e..bc724eb5ca 100644
--- a/packages/documentation/src/stories/guidelines/ccr/arialabelled/arialabelled.docs.mdx
+++ b/packages/documentation/src/stories/guidelines/ccr/arialabelled/arialabelled.docs.mdx
@@ -7,48 +7,88 @@ import * as CCR from './arialabelled.stories';
 
 ## 2. `aria-labelledby`/ `id`
 
-#### I. Referencing Within the Same DOM Tree ✔️
+### I. Referencing Within the Same DOM Tree ✔️
 
 <ul>
   <li>Light DOM → Light DOM</li>
-  <Canvas of={CCR.ExampleHTML} />
+
+</ul>
+  <Canvas of={CCR.ExampleHTML} sourceState="shown" />
+<p className="lead">
+  In the Light DOM, `aria-labelledby` is used to give an element its accessible name by referencing
+  the id of another element or multiple elements that contain the desired text.
+</p>
+<p>
+  This is useful when a simple text label isn't directly associated or when the name needs to be
+  combined from different pieces of text.
+</p>
+
+### II. Referencing From Outside a Shadow DOM Into That Shadow DOM ❌
+
+<ul>
+  <li>Light DOM → Shadow DOM</li>
+  <li>Slotted Content → Shadow DOM</li>
 </ul>
 
-#### II. Referencing From Outside a Shadow DOM Into That Shadow DOM ❌
+Standard `aria-labelledby` <b>cannot reference elements located inside a Shadow DOM</b> from outside of it. This is because IDs inside a Shadow DOM are encapsulated and not accessible from the Light DOM or other Shadow DOMs.
+
+##### Possible Workarounds
+
+###### 1. `Element:ariaLabelledByElements` (Non SSR compatible: to be tested)
+
+<b>Light DOM → Shadow DOM Example</b>
+<Canvas of={CCR.Example2} sourceState="shown" />
+<div className="hide-col-default">
+  <Controls of={CCR.Example2} />
+</div>
+
+<b>Slotted Content → Shadow DOM Example</b>
+<Canvas of={CCR.Example3} sourceState="shown" />
+<div className="hide-col-default">
+  <Controls of={CCR.Example3} />
+</div>
+
+###### 2. Set `aria-labelledby`on the host (for SSR Components: to be tested)
 
-This works only if `aria-labelledby=""`, `role=""` and `tabindex="0"` are set on the host.
+An option is to set the following attributes directly on the host of the target component:
 
 <ul>
-  <li>Light DOM → Shadow DOM</li>
-  <Canvas of={CCR.Example2} />
-  <div className="hide-col-default">
-    <Controls of={CCR.Example2} />
-  </div>
+  <li> the `aria-labelledby`</li>
+  <li> a semantic `role` (e.g. `textbox`, `button`)</li>
+  <li> `tabindex="0"`</li>
 </ul>
 
-#### III. Referencing From Inside a Shadow DOM Out to the Light DOM ❌
+<b>Light DOM → Shadow DOM Example</b>
+<Canvas of={CCR.Example4} sourceState="shown" />
+
+<b>Slotted Content → Shadow DOM Example</b>
+<Canvas of={CCR.Example5} sourceState="shown" />
 
-This works only if the relevant `id=""` is set on the host element.
-The referencing component can include anything. All visible text inside the referencing component will be read by NVDA.
+### III. Referencing From Inside a Shadow DOM Out to the Light DOM ❌
 
 <ul>
   <li>Shadow DOM → Light DOM</li>
+  <li>Shadow DOM → Slotted Content</li>
+</ul>
 
-    <Canvas of={CCR.Example3} />
+Similarly to the previous case, <b>referencing an element located outside a Shadow DOM from an element inside that Shadow DOM using standard `aria-labelledby` is not possible</b>. The strong encapsulation of the Shadow DOM prevents elements within it from directly accessing and referencing the IDs of elements in the Light DOM.
 
-  <div className="hide-col-default">
-    <Controls of={CCR.Example3} />
-  </div>
-</ul>
+##### Possible Workaround
+
+An option is to set the `id` directly on the host of the referencing element. Please note that, in this case all the visible text inside the referencing component will be assigned as the Accessible Name of the target element.
 
-#### IV. Referencing From One Shadow DOM To Another Shadow DOM
+<Canvas of={CCR.Example6} sourceState="shown" />
+
+##### IV. Referencing From One Shadow DOM To Another Shadow DOM
 
 <ul>
   <li>Shadow DOM → Other Shadow DOM</li>
+</ul>
 
-<Canvas of={CCR.Example4} />
+Referencing an element located inside <b>one Shadow DOM</b> from an element located inside a <b>different, separate Shadow DOM</b> using standard `aria-labelledby` <b>is also not possible</b>. Similar to the other cross-boundary scenarios, the IDs are scoped within their respective Shadow DOMs.
 
-  <div className="hide-col-default">
-    <Controls of={CCR.Example4} />
-  </div>
-</ul>
+##### Possible Workaround
+
+In this case, in order for the relationship to work, the referencing element must have the `id` directly set on its host (see workaround of case III) and the target element must have the `aria-labelledby`, `role` and `tabindex="0"` set on its host (see workaround of case II).
+
+<Canvas of={CCR.Example7} sourceState="shown" />
diff --git a/packages/documentation/src/stories/guidelines/ccr/arialabelled/arialabelled.stories.ts b/packages/documentation/src/stories/guidelines/ccr/arialabelled/arialabelled.stories.ts
index 7d6c73e603..18be574691 100644
--- a/packages/documentation/src/stories/guidelines/ccr/arialabelled/arialabelled.stories.ts
+++ b/packages/documentation/src/stories/guidelines/ccr/arialabelled/arialabelled.stories.ts
@@ -1,10 +1,10 @@
-import { StoryObj } from '@storybook/web-components';
+import { StoryObj, Args } from '@storybook/web-components';
 import { MetaExtended } from '@root/types';
 import { html } from 'lit';
 
 const meta: MetaExtended = {
-  id: '76ade552-2c03-4d6d-9dce-28daa340f7d4',
-  title: 'Guidelines/Cross Component Referencing/2.AriaLabelledBy-id',
+  id: '76ade552-2c03-4d6d-9dce-28daa340f7d5',
+  title: 'Guidelines/Crossing the Shadow DOM/2.AriaLabelledBy',
   parameters: {
     badges: [],
   },
@@ -14,6 +14,7 @@ export default meta;
 
 type Story = StoryObj;
 
+// Case: Standard Light DOM to Light DOM
 export const ExampleHTML: Story = {
   render: () => html`
     <span id="id_1">My Text</span>
@@ -23,25 +24,81 @@ export const ExampleHTML: Story = {
   `,
 };
 
+// Case: Referencing from Shadow DOM (Host Attribute) to Light DOM (Element) workaround setting programmatically the relevant Element property
 export const Example2: Story = {
-  render: () => html`
+  argTypes: {
+    workaround: {
+      name: 'Workaround',
+      control: {
+        type: 'radio',
+      },
+      options: ['none', 'ariaLabelledByElements'],
+    },
+  },
+  args: {
+    workaround: 'none',
+  },
+  render: (args: Args) => html`
     <span id="id_2">My Text</span>
-    <post-test-button></post-test-button>
+    <post-test-button2
+      aria-labelledby-id="id_2"
+      workaround="${args.workaround}"
+    ></post-test-button2>
   `,
 };
 
+// Case: Referencing from Shadow DOM (Host Attribute) to Slotted Content (Element) workaround setting programmatically the relevant Element property
 export const Example3: Story = {
+  argTypes: {
+    workaround: {
+      name: 'Workaround',
+      control: {
+        type: 'radio',
+      },
+      options: ['none', 'ariaLabelledByElements'],
+    },
+  },
+  args: {
+    workaround: 'none',
+  },
+  render: (args: Args) => html`
+    <post-test-button3 workaround="${args.workaround}"
+      ><span slot="label-slot">My Text</span></post-test-button3
+    >
+  `,
+};
+
+// Case: Referencing from Shadow Dom to the Light DOM workaround with aria-labelledby directly set on host
+export const Example4: Story = {
   render: () => html`
-    <post-test-span span-id="id_3" label-text="My Text"></post-test-span>
-    <div class="btn btn-primary" aria-labelledby="id_3" role="textbox" tabindex="0">
+    <span id="id_4">My Text</span>
+    <post-test-button aria-labelledby-id="id_4"></post-test-button>
+  `,
+};
+
+// Case: Referencing from Shadow Dom to Slotted Content (Light) DOM workaround with aria-labelledby directly set on host
+export const Example5: Story = {
+  render: () => html`
+    <post-test-button aria-labelledby-id="id_5"
+      ><span slot="label-slot" id="id_5">My Text</span></post-test-button
+    >
+  `,
+};
+
+// Case: Standard Light DOM to Shadow DOM workaround
+export const Example6: Story = {
+  render: () => html`
+    <post-test-span id="id_6"></post-test-span>
+    <div class="btn btn-primary" aria-labelledby="id_6" role="button" tabindex="0">
       <post-icon name="1022"></post-icon>
     </div>
   `,
 };
 
-export const Example4: Story = {
+// Case: Shadow DOM to other Shadow Dom workaround
+export const Example7: Story = {
   render: () => html`
-    <post-test-span span-id="id_4" label-text="My Text"></post-test-span>
-    <post-test-button aria-labelledby="id_4"></post-test-button>
+    <post-test-span id="id_7"></post-test-span>
+    <post-test-button aria-labelledby="id_7"></post-test-button>
   `,
 };
diff --git a/packages/documentation/src/stories/guidelines/ccr/forid/forid.docs.mdx b/packages/documentation/src/stories/guidelines/ccr/forid/forid.docs.mdx
index 27a724082a..b11719ee9f 100644
--- a/packages/documentation/src/stories/guidelines/ccr/forid/forid.docs.mdx
+++ b/packages/documentation/src/stories/guidelines/ccr/forid/forid.docs.mdx
@@ -3,96 +3,104 @@ import * as CCR from './forid.stories';
 
 <Meta of={CCR} />
 
-# Cross Component Referencing Cases
+# Crossing the Shadow Dom
 
 ## 1. `for`/ `id`
 
-#### I. Referencing Within the Same DOM Tree ✔️
+### I. Referencing Within the Same DOM Tree ✔️
 
 <ul>
   <li>Light DOM → Light DOM</li>
   <li>Shadow DOM → Same Shadow DOM</li>
 </ul>
 
-<Canvas of={CCR.ExampleHTML} />
+<p className="lead">The native HTML `for`/`id` relationship is a fundamental way to connect a `<label>` element to a form control (such as `<input>`, `<select>`, `<textarea>`, etc. or even to a custom form-associated control) within the same document structure (same DOM tree).</p> 
+<p>This connection is established by setting the for attribute on the `<label>` to match the `id` attribute of the form control it describes. </p>
+<p>This relationship is crucial for accessibility, as it allows assistive technologies like screen readers to correctly associate and announce the label text when focus is placed on the associated input field, thereby making forms understandable and navigable.</p>
 
-#### II.Referencing From Outside a Shadow DOM Into That Shadow DOM ❌
+<Canvas of={CCR.ExampleHTML} sourceState="shown" />
+
+### II. Referencing From Outside a Shadow DOM Into That Shadow DOM ❌
 
 <ul>
   <li>Light DOM → Shadow DOM</li>
+  <li>Slotted Content → Shadow DOM</li>
 </ul>
 
-The Aria Mixin workaround is to set the relationship using the `ariaLabelledByElements` property on the element on componentDidLoad/Update.
+<p>When the referencing element (e.g. `<label for="...">`) is in the Light DOM and the target element is inside a Shadow DOM, the `for` attribute <b>cannot reference elements inside the Shadow DOM</b> using the standard id mechanism.</p>
+
+##### Possible Workarounds
+
+###### 1. `Element:ariaLabelledByElements` (Non SSR compatible: to be tested)
+
+Define programmatically the `ariaLabelledByElements` property of the element. This solution creates the relationship without the use of an `id`.
 
-<Canvas of={CCR.Example2} />
+<b>Light DOM → Shadow DOM Example</b>
+<Canvas of={CCR.Example2} sourceState="shown" />
 <div className="hide-col-default">
   <Controls of={CCR.Example2} />
 </div>
 
-<ul>
-  <li>Slotted Content → Shadow DOM</li>
-</ul>
-
-The Aria Mixin works also here. It is recommended that the referencing element is slotted.
-
-<Canvas of={CCR.Example3} />
+<b>Slotted Content → Shadow DOM Example</b>
+<Canvas of={CCR.Example3} sourceState="shown" />
 <div className="hide-col-default">
   <Controls of={CCR.Example3} />
 </div>
 
-<h6>Workaround for SSR Components</h6>
-`aria-labelledby` is set directly on the host with `role=""`. This sets the Accessible Name, but NVDA
-does not always announce it.*
+###### 2. Set `aria-labelledby`on the host (for SSR Components : to be tested)
+
+This solution involves setting the `aria-labelledby` directly on the host. In order for this solution to work, the host must have a set `role=""` along with `tabindex="0"`.
+This defines the label text as the Accessible Name of the component, but NVDA does not announce it when an interactive element (e.g. an `<input>`) exists inside the component.
 
 Directly setting `aria-labelledby` on the host.
 
-<Canvas of={CCR.Example5} />
+<Canvas of={CCR.Example5} sourceState="shown" />
 <div className="hide-col-default">
   <Controls of={CCR.Example5} />
 </div>
 
 Setting `aria-labelledby` via `ElementInternals`.
 
-<Canvas of={CCR.Example7} />
+<Canvas of={CCR.Example7} sourceState="shown" />
 <div className="hide-col-default">
   <Controls of={CCR.Example7} />
 </div>
 
-#### III.Referencing From Inside a Shadow DOM Out to the Light DOM ❌
+### III. Referencing From Inside a Shadow DOM Out to the Light DOM ❌
 
 <ul>
   <li>Shadow DOM → Light DOM</li>
+  <li>Shadow DOM → Slotted Content</li>
 </ul>
+<p>
+  A `for` attribute on an element inside a Shadow DOM{' '}
+  <b>cannot be used to reference the id of an element outside that Shadow DOM</b> (in the Light DOM
+  or an ancestor Shadow DOM). The way the HTML for attribute resolves an id is strictly limited to
+  the element's shadow-including tree.
+</p>
 
-<Canvas of={CCR.Example4} />
-<div className="hide-col-default">
-  <Controls of={CCR.Example4} />
-</div>
+<Canvas of={CCR.Example4} sourceState="shown" />
 
-The Aria Mixin does not work in this case.
+##### Possible Workaround
 
-A solution is to programmatically add the id (from the for) on the host element.
+The `Element:ariaLabelledByElements` does not work in this case.
 
-Other option is `aria-labelledby` set directly on the host with role="".
-This sets the Accessible Name, but NVDA does not always announce it.
+An alternative is to directly add an `id` on the host of the referencing element and an `aria-labelledby`on the target element.
 
-No other workaround found for this case.
-
-#### IV.Referencing From a Shadow DOM Out to another Shadow DOM ❌
+### IV.Referencing From a Shadow DOM Out to another Shadow DOM ❌
 
 <ul>
   <li>Shadow DOM → Other Shadow DOM</li>
 </ul>
 
-<Canvas of={CCR.Example6} />
-<div className="hide-col-default">
-  <Controls of={CCR.Example6} />
-</div>
+##### Possible Workaround
 
-The Aria Mixin does not work in this case.
+The `Element:ariaLabelledByElements` does not work in this case.
 
-A solution would be to programmatically add the id (get it from the for?) on the host element.
-This will only work if the `aria-labelledby` set directly on the host.
-This sets the Accessible Name, but NVDA does not always announce it.
+An alternative would be to combine workarounds for cases II and III.
+This involves setting an `id` on the host of the referencing element and an `aria-labelledby` directly on the host of the target element along with `role=""` and `tabindex="0"`. Same limitation applies as in case II: the label text is defined as the Accessible Name of the component, but NVDA does not announce if an interactive element (e.g. an `<input>`) exists inside the target component.
 
-No other workaround found for this case.
+<Canvas of={CCR.Example6} sourceState="shown" />
+<div className="hide-col-default">
+  <Controls of={CCR.Example6} />
+</div>
diff --git a/packages/documentation/src/stories/guidelines/ccr/forid/forid.stories.ts b/packages/documentation/src/stories/guidelines/ccr/forid/forid.stories.ts
index e2b052e792..49a52676fb 100644
--- a/packages/documentation/src/stories/guidelines/ccr/forid/forid.stories.ts
+++ b/packages/documentation/src/stories/guidelines/ccr/forid/forid.stories.ts
@@ -4,7 +4,7 @@ import { html } from 'lit';
 
 const meta: MetaExtended = {
   id: '76ade552-2c03-4d6d-9dce-28daa340f7d3',
-  title: 'Guidelines/Cross Component Referencing/1.For-id',
+  title: 'Guidelines/Crossing the Shadow DOM/1.For',
   parameters: {
     badges: [],
   },
@@ -16,13 +16,16 @@ export default meta;
 
 type Story = StoryObj;
 
+// Case: Standard Light DOM to Light DOM
 export const ExampleHTML: Story = {
   render: () => html`
+  
     <label for="id_0">My Text</label>
     <input id="id_0"></input>
   `,
 };
 
+// Case: Referencing from Shadow DOM (Host Attribute) to Light DOM (Element) workaround setting programmatically the relevant Element property
 export const Example2: Story = {
   argTypes: {
     workaround: {
@@ -30,7 +33,7 @@ export const Example2: Story = {
       control: {
         type: 'radio',
       },
-      options: ['none', 'ariamixin'],
+      options: ['none', 'ariaLabelledByElements'],
     },
   },
   args: {
@@ -42,6 +45,8 @@ export const Example2: Story = {
   `,
 };
 
+// Case: Referencing from Shadow DOM (Host Attribute) to Slotted Content (Element) workaround setting programmatically the relevant Element property
+
 export const Example3: Story = {
   argTypes: {
     workaround: {
@@ -49,7 +54,7 @@ export const Example3: Story = {
       control: {
         type: 'radio',
       },
-      options: ['none', 'ariamixin'],
+      options: ['none', 'ariaLabelledByElements'],
     },
   },
   args: {
@@ -62,26 +67,25 @@ export const Example3: Story = {
   `,
 };
 
-// ssr workaround 1
+// Case: Referencing from Shadow Dom to Light DOM workaround with aria-labelledby directly set on host
 export const Example5: Story = {
   render: () => html`
-    <post-test-target3 aria-labelledby="id_5" role="textbox" tabindex="0">
+    <post-test-target3 aria-labelledby="id_5">
       <label id="id_5" slot="label-slot">My Text</label>
-      >
     </post-test-target3>
   `,
 };
 
-// ssr workaround 2
+// Case: Referencing from Shadow Dom to Slotted Content (Light) DOM workaround with aria-labelledby directly set on host
 export const Example7: Story = {
   render: () => html`
     <post-test-target4 aria-labelledby="id_7">
       <label id="id_7" slot="label-slot">My Text</label>
-      >
     </post-test-target4>
   `,
 };
 
+// Case: Standard Light DOM to Shadow DOM workaround
 export const Example4: Story = {
   argTypes: {
     workaround: {
@@ -89,7 +93,7 @@ export const Example4: Story = {
       control: {
         type: 'radio',
       },
-      options: ['none', 'ariamixin (not working)'],
+      options: ['none', 'ariaLabelledByElements (not working)'],
     },
   },
   args: {
@@ -101,9 +105,11 @@ export const Example4: Story = {
   `,
 };
 
+// Case: Shadow DOM to other Shadow Dom workaround
+
 export const Example6: Story = {
   render: () => html`
     <post-test-label id="id_6"></post-test-label>
-    <post-test-target3 aria-labelledby="id_6" role="button"></post-test-target3>
+    <post-test-target3 aria-labelledby="id_6"></post-test-target3>
   `,
 };
diff --git a/packages/documentation/src/stories/guidelines/ccr/role/role.docs.mdx b/packages/documentation/src/stories/guidelines/ccr/role/role.docs.mdx
new file mode 100644
index 0000000000..423499b89b
--- /dev/null
+++ b/packages/documentation/src/stories/guidelines/ccr/role/role.docs.mdx
@@ -0,0 +1,94 @@
+import { Meta, Canvas, Source, Controls } from '@storybook/blocks';
+import * as CCR from './role.stories';
+
+<Meta of={CCR} />
+
+# Cross Component Referencing Cases
+
+## 3. `role`
+
+### I. Referencing Within the Same DOM Tree ✔️
+
+<ul>
+  <li>Light DOM → Light DOM</li>
+
+</ul>
+  <Canvas of={CCR.ExampleHTML} sourceState="shown" />
+<p className="lead">
+  In the Light DOM, `aria-describedby` is used to give an element its accessible name by referencing
+  the id of another element or multiple elements that contain the desired text.
+</p>
+<p>
+  This is useful when a simple text label isn't directly associated or when the name needs to be
+  combined from different pieces of text.
+</p>
+
+### II. Referencing From Outside a Shadow DOM Into That Shadow DOM ❌
+
+<ul>
+  <li>Light DOM → Shadow DOM</li>
+  <li>Slotted Content → Shadow DOM</li>
+</ul>
+
+Standard `aria-describedby` <b>cannot reference elements located inside a Shadow DOM</b> from outside of it. This is because IDs inside a Shadow DOM are encapsulated and not accessible from the Light DOM or other Shadow DOMs.
+
+##### Possible Workarounds
+
+###### 1. `Element:ariaDescribedByElements` (Non SSR compatible: to be tested)
+
+<b>Light DOM → Shadow DOM Example</b>
+<Canvas of={CCR.Example2} sourceState="shown" />
+<div className="hide-col-default">
+  <Controls of={CCR.Example2} />
+</div>
+
+<b>Slotted Content → Shadow DOM Example</b>
+<Canvas of={CCR.Example3} sourceState="shown" />
+<div className="hide-col-default">
+  <Controls of={CCR.Example3} />
+</div>
+
+###### 2. Set `aria-describedby`on the host (for SSR Components: to be tested)
+
+An option is to set the following attributes directly on the host of the target component:
+
+<ul>
+  <li> the `aria-describedby`</li>
+  <li> a semantic `role` (e.g. `textbox`, `button`)</li>
+  <li> `tabindex="0"`</li>
+</ul>
+
+<b>Light DOM → Shadow DOM Example</b>
+<Canvas of={CCR.Example4} sourceState="shown" />
+
+<b>Slotted Content → Shadow DOM Example</b>
+<Canvas of={CCR.Example5} sourceState="shown" />
+
+### III. Referencing From Inside a Shadow DOM Out to the Light DOM ❌
+
+<ul>
+  <li>Shadow DOM → Light DOM</li>
+  <li>Shadow DOM → Slotted Content</li>
+</ul>
+
+Similarly to the previous case, <b>referencing an element located outside a Shadow DOM from an element inside that Shadow DOM using standard `aria-describedby` is not possible</b>. The strong encapsulation of the Shadow DOM prevents elements within it from directly accessing and referencing the IDs of elements in the Light DOM.
+
+##### Possible Workaround
+
+An option is to set the `id` directly on the host of the referencing element. Please note that, in this case all the visible text inside the referencing component will be assigned as the Accessible Name of the target element.
+
+<Canvas of={CCR.Example6} sourceState="shown" />
+
+##### IV. Referencing From One Shadow DOM To Another Shadow DOM
+
+<ul>
+  <li>Shadow DOM → Other Shadow DOM</li>
+</ul>
+
+Referencing an element located inside <b>one Shadow DOM</b> from an element located inside a <b>different, separate Shadow DOM</b> using standard `aria-describedby` <b>is also not possible</b>. Similar to the other cross-boundary scenarios, the IDs are scoped within their respective Shadow DOMs.
+
+##### Possible Workaround
+
+In this case, in order for the relationship to work, the referencing element must have the `id` directly set on its host (see workaround of case III) and the target element must have the `aria-describedby`, `role` and `tabindex="0"` set on its host (see workaround of case II).
+
+<Canvas of={CCR.Example7} sourceState="shown" />
diff --git a/packages/documentation/src/stories/guidelines/ccr/role/role.stories.ts b/packages/documentation/src/stories/guidelines/ccr/role/role.stories.ts
new file mode 100644
index 0000000000..080d1118cd
--- /dev/null
+++ b/packages/documentation/src/stories/guidelines/ccr/role/role.stories.ts
@@ -0,0 +1,109 @@
+import { StoryObj, Args } from '@storybook/web-components';
+import { MetaExtended } from '@root/types';
+import { html } from 'lit';
+
+const meta: MetaExtended = {
+  id: '76ade552-2c03-4d6d-9dce-28daa346f456',
+  title: 'Guidelines/Crossing the Shadow DOM/6.AriaRoles',
+  parameters: {
+    badges: [],
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+// Case: Standard Light DOM to Light DOM
+export const ExampleHTML: Story = {
+  render: () => html`
+    <div tabindex="0">
+      <div id="list_label_id">List Label</div>
+      <div role="list">
+        <div role="listitem">item 1</div>
+        <div role="listitem">item 2</div>
+        <div role="listitem">item 3</div>
+      </div>
+    </div>
+  `,
+};
+
+// Case: Referencing from Shadow DOM (Host Attribute) to Light DOM (Element) workaround setting programmatically the relevant Element property
+export const Example2: Story = {
+  argTypes: {
+    workaround: {
+      name: 'Workaround',
+      control: {
+        type: 'radio',
+      },
+      options: ['none', 'ariaControlsElements'],
+    },
+  },
+  args: {
+    workaround: 'none',
+  },
+  render: (args: Args) => html`
+    <post-test-button2
+      aria-controls-id="controlled_id_2"
+      workaround="${args.workaround}"
+    ></post-test-button2>
+    <span id="controlled_id_2">Controlled Element 2</span>
+  `,
+};
+
+// Case: Referencing from Shadow DOM (Host Attribute) to Slotted Content (Element) workaround setting programmatically the relevant Element property
+export const Example3: Story = {
+  argTypes: {
+    workaround: {
+      name: 'Workaround',
+      control: {
+        type: 'radio',
+      },
+      options: ['none', 'ariaControlsElements'], // Adjusted option name for clarity
+    },
+  },
+  args: {
+    workaround: 'none',
+  },
+  render: (args: Args) => html`
+    <post-test-button3 workaround="${args.workaround}">
+      <span slot="control-slot" id="controlled_id_3">Controlled Element 3 (Slotted)</span>
+    </post-test-button3>
+  `,
+};
+
+// Case: Referencing from Shadow DOM (Host Attribute) to Light DOM (Element) workaround with aria-controls directly set on host
+export const Example4: Story = {
+  render: () => html`
+    <post-test-button aria-controls-id="controlled_id_4">Control Element</post-test-button>
+    <span id="controlled_id_4">Controlled Element 4</span>
+  `,
+};
+
+// Case: Referencing from Shadow Dom to Slotted Content (Light DOM) workaround with aria-controls directly set on host
+export const Example5: Story = {
+  render: () => html`
+    <post-test-button aria-controls-id="controlled_id_5">
+      <span slot="control-slot" id="controlled_id_5">Controlled Element 5 (Slotted)</span>
+    </post-test-button>
+  `,
+};
+
+// Case: Standard Light DOM to Shadow DOM
+export const Example6: Story = {
+  render: () => html`
+    <div class="btn btn-primary" aria-controls="controlled_id_6" role="button" tabindex="0">
+      <post-icon name="1022"></post-icon>
+      Control Element
+    </div>
+    <post-test-span2></post-test-span2>
+  `,
+};
+
+// Case: Shadow DOM to other Shadow Dom workaround
+export const Example7: Story = {
+  render: () => html`
+    <post-test-span2 id="controlled_id_7_host"></post-test-span2>
+    <post-test-button aria-controls="controlled_id_7"></post-test-button>
+  `,
+};

From 6c7f1b2668a6c645fc2c3073b047d025b88066c9 Mon Sep 17 00:00:00 2001
From: Myrta Sakellariou <myrta.sakellariou@gmail.com>
Date: Tue, 20 May 2025 16:35:11 +0200
Subject: [PATCH 05/26] aria controls and aria roles

---
 packages/components/src/components.d.ts       |  91 ++++++++++++++
 .../post-test-button-control.scss             |   1 +
 .../post-test-button-control.tsx              |  42 +++++++
 .../post-test-button-control/readme.md        |  10 ++
 .../post-test-button2/post-test-button2.tsx   |   2 +-
 .../post-test-div/post-test-div.scss          |   1 +
 .../post-test-div/post-test-div.tsx           |  16 +++
 .../src/components/post-test-div/readme.md    |  10 ++
 .../post-test-list-2/post-test-list-2.scss    |   1 +
 .../post-test-list-2/post-test-list-2.tsx     |  21 ++++
 .../src/components/post-test-list-2/readme.md |  23 ++++
 .../post-test-list-item-group-2.scss          |   1 +
 .../post-test-list-item-group-2.tsx           |  19 +++
 .../post-test-list-item-group-2/readme.md     |  10 ++
 .../post-test-list-item-group.scss            |   1 +
 .../post-test-list-item-group.tsx             |  16 +++
 .../post-test-list-item-group/readme.md       |  10 ++
 .../post-test-list-item.scss                  |   1 +
 .../post-test-list-item.tsx                   |  18 +++
 .../components/post-test-list-item/readme.md  |  23 ++++
 .../post-test-list/post-test-list.scss        |   1 +
 .../post-test-list/post-test-list.tsx         |  18 +++
 .../src/components/post-test-list/readme.md   |  10 ++
 .../ccr/ariacontrols/ariacontrols.docs.mdx    |  64 +++-------
 .../ccr/ariacontrols/ariacontrols.stories.ts  |  59 ++++-----
 .../ccr/ariadescribed/ariadescribed.docs.mdx  |  15 +--
 .../ccr/arialabelled/arialabelled.docs.mdx    |  13 +-
 .../guidelines/ccr/forid/forid.docs.mdx       |   8 +-
 .../stories/guidelines/ccr/role/role.docs.mdx |  93 +++++---------
 .../guidelines/ccr/role/role.stories.ts       | 115 +++++++-----------
 30 files changed, 482 insertions(+), 231 deletions(-)
 create mode 100644 packages/components/src/components/post-test-button-control/post-test-button-control.scss
 create mode 100644 packages/components/src/components/post-test-button-control/post-test-button-control.tsx
 create mode 100644 packages/components/src/components/post-test-button-control/readme.md
 create mode 100644 packages/components/src/components/post-test-div/post-test-div.scss
 create mode 100644 packages/components/src/components/post-test-div/post-test-div.tsx
 create mode 100644 packages/components/src/components/post-test-div/readme.md
 create mode 100644 packages/components/src/components/post-test-list-2/post-test-list-2.scss
 create mode 100644 packages/components/src/components/post-test-list-2/post-test-list-2.tsx
 create mode 100644 packages/components/src/components/post-test-list-2/readme.md
 create mode 100644 packages/components/src/components/post-test-list-item-group-2/post-test-list-item-group-2.scss
 create mode 100644 packages/components/src/components/post-test-list-item-group-2/post-test-list-item-group-2.tsx
 create mode 100644 packages/components/src/components/post-test-list-item-group-2/readme.md
 create mode 100644 packages/components/src/components/post-test-list-item-group/post-test-list-item-group.scss
 create mode 100644 packages/components/src/components/post-test-list-item-group/post-test-list-item-group.tsx
 create mode 100644 packages/components/src/components/post-test-list-item-group/readme.md
 create mode 100644 packages/components/src/components/post-test-list-item/post-test-list-item.scss
 create mode 100644 packages/components/src/components/post-test-list-item/post-test-list-item.tsx
 create mode 100644 packages/components/src/components/post-test-list-item/readme.md
 create mode 100644 packages/components/src/components/post-test-list/post-test-list.scss
 create mode 100644 packages/components/src/components/post-test-list/post-test-list.tsx
 create mode 100644 packages/components/src/components/post-test-list/readme.md

diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
index 0a33af2b69..b9e973b93d 100644
--- a/packages/components/src/components.d.ts
+++ b/packages/components/src/components.d.ts
@@ -474,6 +474,8 @@ export namespace Components {
          */
         "ariaLabelledbyId"?: string;
     }
+    interface PostTestButtonControl {
+    }
     interface PostTestButton2 {
         /**
           * Defines the selected ariaDescribedbyId
@@ -502,12 +504,24 @@ export namespace Components {
          */
         "workaround"?: string;
     }
+    interface PostTestDiv {
+    }
     interface PostTestLabel {
         /**
           * Defines the for
          */
         "for"?: string;
     }
+    interface PostTestList {
+    }
+    interface PostTestList2 {
+    }
+    interface PostTestListItem {
+    }
+    interface PostTestListItemGroup {
+    }
+    interface PostTestListItemGroup2 {
+    }
     interface PostTestSpan {
         /**
           * Defines the id of the button to reference
@@ -965,6 +979,12 @@ declare global {
         prototype: HTMLPostTestButtonElement;
         new (): HTMLPostTestButtonElement;
     };
+    interface HTMLPostTestButtonControlElement extends Components.PostTestButtonControl, HTMLStencilElement {
+    }
+    var HTMLPostTestButtonControlElement: {
+        prototype: HTMLPostTestButtonControlElement;
+        new (): HTMLPostTestButtonControlElement;
+    };
     interface HTMLPostTestButton2Element extends Components.PostTestButton2, HTMLStencilElement {
     }
     var HTMLPostTestButton2Element: {
@@ -977,12 +997,48 @@ declare global {
         prototype: HTMLPostTestButton3Element;
         new (): HTMLPostTestButton3Element;
     };
+    interface HTMLPostTestDivElement extends Components.PostTestDiv, HTMLStencilElement {
+    }
+    var HTMLPostTestDivElement: {
+        prototype: HTMLPostTestDivElement;
+        new (): HTMLPostTestDivElement;
+    };
     interface HTMLPostTestLabelElement extends Components.PostTestLabel, HTMLStencilElement {
     }
     var HTMLPostTestLabelElement: {
         prototype: HTMLPostTestLabelElement;
         new (): HTMLPostTestLabelElement;
     };
+    interface HTMLPostTestListElement extends Components.PostTestList, HTMLStencilElement {
+    }
+    var HTMLPostTestListElement: {
+        prototype: HTMLPostTestListElement;
+        new (): HTMLPostTestListElement;
+    };
+    interface HTMLPostTestList2Element extends Components.PostTestList2, HTMLStencilElement {
+    }
+    var HTMLPostTestList2Element: {
+        prototype: HTMLPostTestList2Element;
+        new (): HTMLPostTestList2Element;
+    };
+    interface HTMLPostTestListItemElement extends Components.PostTestListItem, HTMLStencilElement {
+    }
+    var HTMLPostTestListItemElement: {
+        prototype: HTMLPostTestListItemElement;
+        new (): HTMLPostTestListItemElement;
+    };
+    interface HTMLPostTestListItemGroupElement extends Components.PostTestListItemGroup, HTMLStencilElement {
+    }
+    var HTMLPostTestListItemGroupElement: {
+        prototype: HTMLPostTestListItemGroupElement;
+        new (): HTMLPostTestListItemGroupElement;
+    };
+    interface HTMLPostTestListItemGroup2Element extends Components.PostTestListItemGroup2, HTMLStencilElement {
+    }
+    var HTMLPostTestListItemGroup2Element: {
+        prototype: HTMLPostTestListItemGroup2Element;
+        new (): HTMLPostTestListItemGroup2Element;
+    };
     interface HTMLPostTestSpanElement extends Components.PostTestSpan, HTMLStencilElement {
     }
     var HTMLPostTestSpanElement: {
@@ -1066,9 +1122,16 @@ declare global {
         "post-tabs": HTMLPostTabsElement;
         "post-tag": HTMLPostTagElement;
         "post-test-button": HTMLPostTestButtonElement;
+        "post-test-button-control": HTMLPostTestButtonControlElement;
         "post-test-button2": HTMLPostTestButton2Element;
         "post-test-button3": HTMLPostTestButton3Element;
+        "post-test-div": HTMLPostTestDivElement;
         "post-test-label": HTMLPostTestLabelElement;
+        "post-test-list": HTMLPostTestListElement;
+        "post-test-list-2": HTMLPostTestList2Element;
+        "post-test-list-item": HTMLPostTestListItemElement;
+        "post-test-list-item-group": HTMLPostTestListItemGroupElement;
+        "post-test-list-item-group-2": HTMLPostTestListItemGroup2Element;
         "post-test-span": HTMLPostTestSpanElement;
         "post-test-span2": HTMLPostTestSpan2Element;
         "post-test-target": HTMLPostTestTargetElement;
@@ -1483,6 +1546,8 @@ declare namespace LocalJSX {
          */
         "ariaLabelledbyId"?: string;
     }
+    interface PostTestButtonControl {
+    }
     interface PostTestButton2 {
         /**
           * Defines the selected ariaDescribedbyId
@@ -1511,12 +1576,24 @@ declare namespace LocalJSX {
          */
         "workaround"?: string;
     }
+    interface PostTestDiv {
+    }
     interface PostTestLabel {
         /**
           * Defines the for
          */
         "for"?: string;
     }
+    interface PostTestList {
+    }
+    interface PostTestList2 {
+    }
+    interface PostTestListItem {
+    }
+    interface PostTestListItemGroup {
+    }
+    interface PostTestListItemGroup2 {
+    }
     interface PostTestSpan {
         /**
           * Defines the id of the button to reference
@@ -1628,9 +1705,16 @@ declare namespace LocalJSX {
         "post-tabs": PostTabs;
         "post-tag": PostTag;
         "post-test-button": PostTestButton;
+        "post-test-button-control": PostTestButtonControl;
         "post-test-button2": PostTestButton2;
         "post-test-button3": PostTestButton3;
+        "post-test-div": PostTestDiv;
         "post-test-label": PostTestLabel;
+        "post-test-list": PostTestList;
+        "post-test-list-2": PostTestList2;
+        "post-test-list-item": PostTestListItem;
+        "post-test-list-item-group": PostTestListItemGroup;
+        "post-test-list-item-group-2": PostTestListItemGroup2;
         "post-test-span": PostTestSpan;
         "post-test-span2": PostTestSpan2;
         "post-test-target": PostTestTarget;
@@ -1685,9 +1769,16 @@ declare module "@stencil/core" {
             "post-tabs": LocalJSX.PostTabs & JSXBase.HTMLAttributes<HTMLPostTabsElement>;
             "post-tag": LocalJSX.PostTag & JSXBase.HTMLAttributes<HTMLPostTagElement>;
             "post-test-button": LocalJSX.PostTestButton & JSXBase.HTMLAttributes<HTMLPostTestButtonElement>;
+            "post-test-button-control": LocalJSX.PostTestButtonControl & JSXBase.HTMLAttributes<HTMLPostTestButtonControlElement>;
             "post-test-button2": LocalJSX.PostTestButton2 & JSXBase.HTMLAttributes<HTMLPostTestButton2Element>;
             "post-test-button3": LocalJSX.PostTestButton3 & JSXBase.HTMLAttributes<HTMLPostTestButton3Element>;
+            "post-test-div": LocalJSX.PostTestDiv & JSXBase.HTMLAttributes<HTMLPostTestDivElement>;
             "post-test-label": LocalJSX.PostTestLabel & JSXBase.HTMLAttributes<HTMLPostTestLabelElement>;
+            "post-test-list": LocalJSX.PostTestList & JSXBase.HTMLAttributes<HTMLPostTestListElement>;
+            "post-test-list-2": LocalJSX.PostTestList2 & JSXBase.HTMLAttributes<HTMLPostTestList2Element>;
+            "post-test-list-item": LocalJSX.PostTestListItem & JSXBase.HTMLAttributes<HTMLPostTestListItemElement>;
+            "post-test-list-item-group": LocalJSX.PostTestListItemGroup & JSXBase.HTMLAttributes<HTMLPostTestListItemGroupElement>;
+            "post-test-list-item-group-2": LocalJSX.PostTestListItemGroup2 & JSXBase.HTMLAttributes<HTMLPostTestListItemGroup2Element>;
             "post-test-span": LocalJSX.PostTestSpan & JSXBase.HTMLAttributes<HTMLPostTestSpanElement>;
             "post-test-span2": LocalJSX.PostTestSpan2 & JSXBase.HTMLAttributes<HTMLPostTestSpan2Element>;
             "post-test-target": LocalJSX.PostTestTarget & JSXBase.HTMLAttributes<HTMLPostTestTargetElement>;
diff --git a/packages/components/src/components/post-test-button-control/post-test-button-control.scss b/packages/components/src/components/post-test-button-control/post-test-button-control.scss
new file mode 100644
index 0000000000..28612a51ef
--- /dev/null
+++ b/packages/components/src/components/post-test-button-control/post-test-button-control.scss
@@ -0,0 +1 @@
+@use '@swisspost/design-system-styles/post-default.scss';
diff --git a/packages/components/src/components/post-test-button-control/post-test-button-control.tsx b/packages/components/src/components/post-test-button-control/post-test-button-control.tsx
new file mode 100644
index 0000000000..ad44e02206
--- /dev/null
+++ b/packages/components/src/components/post-test-button-control/post-test-button-control.tsx
@@ -0,0 +1,42 @@
+import { Component, h, Host, Element } from '@stencil/core';
+
+@Component({
+  tag: 'post-test-button-control',
+  styleUrl: 'post-test-button-control.scss',
+  shadow: true,
+})
+export class PostTestButtonControl {
+  @Element() hostEl: HTMLPostTestButtonControlElement;
+  private internalEl: HTMLElement;
+
+  private readonly handleToggleClick = () => {
+    if (this.hostEl && this.internalEl) {
+      const timestamp = Date.now();
+      this.internalEl.innerHTML = `<p>Controlled Text shown at ${timestamp}.</p>`;
+    }
+  };
+
+  render() {
+    return (
+      <Host
+        role="button"
+        tabindex="0"
+        aria-expanded="false"
+        aria-controls="text2"
+        onClick={this.handleToggleClick}
+      >
+        Toggle Text
+        <div
+          class="btn btn-primary"
+          aria-live="assertive"
+          id="text2"
+          ref={el => {
+            if (el) this.internalEl = el as HTMLElement;
+          }}
+        >
+          <p>Controlled Text shown at xxxxxxxxxxx.</p>
+        </div>
+      </Host>
+    );
+  }
+}
diff --git a/packages/components/src/components/post-test-button-control/readme.md b/packages/components/src/components/post-test-button-control/readme.md
new file mode 100644
index 0000000000..1e8ac9feb3
--- /dev/null
+++ b/packages/components/src/components/post-test-button-control/readme.md
@@ -0,0 +1,10 @@
+# post-test-form
+
+
+
+<!-- Auto Generated Below -->
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/components/src/components/post-test-button2/post-test-button2.tsx b/packages/components/src/components/post-test-button2/post-test-button2.tsx
index 41214f27da..757148dafb 100644
--- a/packages/components/src/components/post-test-button2/post-test-button2.tsx
+++ b/packages/components/src/components/post-test-button2/post-test-button2.tsx
@@ -7,7 +7,7 @@ import { version } from '@root/package.json';
   shadow: { delegatesFocus: true },
 })
 export class PostTestButton2 {
-  private internalEl: HTMLElement | undefined;
+  private internalEl: HTMLElement;
   /**
    * Defines the selected workaround
    */
diff --git a/packages/components/src/components/post-test-div/post-test-div.scss b/packages/components/src/components/post-test-div/post-test-div.scss
new file mode 100644
index 0000000000..28612a51ef
--- /dev/null
+++ b/packages/components/src/components/post-test-div/post-test-div.scss
@@ -0,0 +1 @@
+@use '@swisspost/design-system-styles/post-default.scss';
diff --git a/packages/components/src/components/post-test-div/post-test-div.tsx b/packages/components/src/components/post-test-div/post-test-div.tsx
new file mode 100644
index 0000000000..a056cc0ac1
--- /dev/null
+++ b/packages/components/src/components/post-test-div/post-test-div.tsx
@@ -0,0 +1,16 @@
+import { Component, h, Host } from '@stencil/core';
+
+@Component({
+  tag: 'post-test-div',
+  styleUrl: 'post-test-div.scss',
+  shadow: true,
+})
+export class PostTestDiv {
+  render() {
+    return (
+      <Host role="list" tabindex="0">
+        <slot name="list-items"></slot>
+      </Host>
+    );
+  }
+}
diff --git a/packages/components/src/components/post-test-div/readme.md b/packages/components/src/components/post-test-div/readme.md
new file mode 100644
index 0000000000..1e8ac9feb3
--- /dev/null
+++ b/packages/components/src/components/post-test-div/readme.md
@@ -0,0 +1,10 @@
+# post-test-form
+
+
+
+<!-- Auto Generated Below -->
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/components/src/components/post-test-list-2/post-test-list-2.scss b/packages/components/src/components/post-test-list-2/post-test-list-2.scss
new file mode 100644
index 0000000000..28612a51ef
--- /dev/null
+++ b/packages/components/src/components/post-test-list-2/post-test-list-2.scss
@@ -0,0 +1 @@
+@use '@swisspost/design-system-styles/post-default.scss';
diff --git a/packages/components/src/components/post-test-list-2/post-test-list-2.tsx b/packages/components/src/components/post-test-list-2/post-test-list-2.tsx
new file mode 100644
index 0000000000..d7eb4be7b3
--- /dev/null
+++ b/packages/components/src/components/post-test-list-2/post-test-list-2.tsx
@@ -0,0 +1,21 @@
+import { Component, h, Host } from '@stencil/core';
+
+@Component({
+  tag: 'post-test-list-2',
+  styleUrl: 'post-test-list-2.scss',
+  shadow: true,
+})
+export class PostTestList2 {
+  render() {
+    return (
+      <Host>
+        <div role="list" tabindex="0">
+          <post-test-list-item>item 1</post-test-list-item>
+          <post-test-list-item>item 2</post-test-list-item>
+          <post-test-list-item>item 3</post-test-list-item>
+          <slot></slot>
+        </div>
+      </Host>
+    );
+  }
+}
diff --git a/packages/components/src/components/post-test-list-2/readme.md b/packages/components/src/components/post-test-list-2/readme.md
new file mode 100644
index 0000000000..1900059dc9
--- /dev/null
+++ b/packages/components/src/components/post-test-list-2/readme.md
@@ -0,0 +1,23 @@
+# post-test-form
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Dependencies
+
+### Depends on
+
+- [post-test-list-item](../post-test-list-item)
+
+### Graph
+```mermaid
+graph TD;
+  post-test-list-2 --> post-test-list-item
+  style post-test-list-2 fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/components/src/components/post-test-list-item-group-2/post-test-list-item-group-2.scss b/packages/components/src/components/post-test-list-item-group-2/post-test-list-item-group-2.scss
new file mode 100644
index 0000000000..28612a51ef
--- /dev/null
+++ b/packages/components/src/components/post-test-list-item-group-2/post-test-list-item-group-2.scss
@@ -0,0 +1 @@
+@use '@swisspost/design-system-styles/post-default.scss';
diff --git a/packages/components/src/components/post-test-list-item-group-2/post-test-list-item-group-2.tsx b/packages/components/src/components/post-test-list-item-group-2/post-test-list-item-group-2.tsx
new file mode 100644
index 0000000000..3eb8e0f0a0
--- /dev/null
+++ b/packages/components/src/components/post-test-list-item-group-2/post-test-list-item-group-2.tsx
@@ -0,0 +1,19 @@
+import { Component, h, Host } from '@stencil/core';
+
+@Component({
+  tag: 'post-test-list-item-group-2',
+  styleUrl: 'post-test-list-item-group-2.scss',
+  shadow: true,
+})
+export class PostTestListItemGroup2 {
+  render() {
+    return (
+      <Host>
+        <slot name="list-parent"></slot>
+        <div role="listitem">item 1</div>
+        <div role="listitem">item 2</div>
+        <div role="listitem">item 3</div>
+      </Host>
+    );
+  }
+}
diff --git a/packages/components/src/components/post-test-list-item-group-2/readme.md b/packages/components/src/components/post-test-list-item-group-2/readme.md
new file mode 100644
index 0000000000..1e8ac9feb3
--- /dev/null
+++ b/packages/components/src/components/post-test-list-item-group-2/readme.md
@@ -0,0 +1,10 @@
+# post-test-form
+
+
+
+<!-- Auto Generated Below -->
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/components/src/components/post-test-list-item-group/post-test-list-item-group.scss b/packages/components/src/components/post-test-list-item-group/post-test-list-item-group.scss
new file mode 100644
index 0000000000..28612a51ef
--- /dev/null
+++ b/packages/components/src/components/post-test-list-item-group/post-test-list-item-group.scss
@@ -0,0 +1 @@
+@use '@swisspost/design-system-styles/post-default.scss';
diff --git a/packages/components/src/components/post-test-list-item-group/post-test-list-item-group.tsx b/packages/components/src/components/post-test-list-item-group/post-test-list-item-group.tsx
new file mode 100644
index 0000000000..d2a52a7b40
--- /dev/null
+++ b/packages/components/src/components/post-test-list-item-group/post-test-list-item-group.tsx
@@ -0,0 +1,16 @@
+import { Component, h, Host } from '@stencil/core';
+
+@Component({
+  tag: 'post-test-list-item-group',
+  styleUrl: 'post-test-list-item-group.scss',
+  shadow: true,
+})
+export class PostTestListItemGroup {
+  render() {
+    return (
+      <Host>
+        <slot name="post-list-item"></slot>
+      </Host>
+    );
+  }
+}
diff --git a/packages/components/src/components/post-test-list-item-group/readme.md b/packages/components/src/components/post-test-list-item-group/readme.md
new file mode 100644
index 0000000000..1e8ac9feb3
--- /dev/null
+++ b/packages/components/src/components/post-test-list-item-group/readme.md
@@ -0,0 +1,10 @@
+# post-test-form
+
+
+
+<!-- Auto Generated Below -->
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/components/src/components/post-test-list-item/post-test-list-item.scss b/packages/components/src/components/post-test-list-item/post-test-list-item.scss
new file mode 100644
index 0000000000..28612a51ef
--- /dev/null
+++ b/packages/components/src/components/post-test-list-item/post-test-list-item.scss
@@ -0,0 +1 @@
+@use '@swisspost/design-system-styles/post-default.scss';
diff --git a/packages/components/src/components/post-test-list-item/post-test-list-item.tsx b/packages/components/src/components/post-test-list-item/post-test-list-item.tsx
new file mode 100644
index 0000000000..5e1ca1961c
--- /dev/null
+++ b/packages/components/src/components/post-test-list-item/post-test-list-item.tsx
@@ -0,0 +1,18 @@
+import { Component, h, Host } from '@stencil/core';
+
+@Component({
+  tag: 'post-test-list-item',
+  styleUrl: 'post-test-list-item.scss',
+  shadow: true,
+})
+export class PostTestListItem {
+  render() {
+    return (
+      <Host>
+        <div role="listitem">
+          <slot></slot>
+        </div>
+      </Host>
+    );
+  }
+}
diff --git a/packages/components/src/components/post-test-list-item/readme.md b/packages/components/src/components/post-test-list-item/readme.md
new file mode 100644
index 0000000000..97c7c2045d
--- /dev/null
+++ b/packages/components/src/components/post-test-list-item/readme.md
@@ -0,0 +1,23 @@
+# post-test-form
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Dependencies
+
+### Used by
+
+ - [post-test-list-2](../post-test-list-2)
+
+### Graph
+```mermaid
+graph TD;
+  post-test-list-2 --> post-test-list-item
+  style post-test-list-item fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/components/src/components/post-test-list/post-test-list.scss b/packages/components/src/components/post-test-list/post-test-list.scss
new file mode 100644
index 0000000000..28612a51ef
--- /dev/null
+++ b/packages/components/src/components/post-test-list/post-test-list.scss
@@ -0,0 +1 @@
+@use '@swisspost/design-system-styles/post-default.scss';
diff --git a/packages/components/src/components/post-test-list/post-test-list.tsx b/packages/components/src/components/post-test-list/post-test-list.tsx
new file mode 100644
index 0000000000..ceeb3f4088
--- /dev/null
+++ b/packages/components/src/components/post-test-list/post-test-list.tsx
@@ -0,0 +1,18 @@
+import { Component, h, Host } from '@stencil/core';
+
+@Component({
+  tag: 'post-test-list',
+  styleUrl: 'post-test-list.scss',
+  shadow: true,
+})
+export class PostTestList {
+  render() {
+    return (
+      <Host>
+        <div role="list" tabindex="0">
+          <slot name="post-list-item"></slot>
+        </div>
+      </Host>
+    );
+  }
+}
diff --git a/packages/components/src/components/post-test-list/readme.md b/packages/components/src/components/post-test-list/readme.md
new file mode 100644
index 0000000000..1e8ac9feb3
--- /dev/null
+++ b/packages/components/src/components/post-test-list/readme.md
@@ -0,0 +1,10 @@
+# post-test-form
+
+
+
+<!-- Auto Generated Below -->
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/documentation/src/stories/guidelines/ccr/ariacontrols/ariacontrols.docs.mdx b/packages/documentation/src/stories/guidelines/ccr/ariacontrols/ariacontrols.docs.mdx
index 8aba89b10e..a7ef98ba76 100644
--- a/packages/documentation/src/stories/guidelines/ccr/ariacontrols/ariacontrols.docs.mdx
+++ b/packages/documentation/src/stories/guidelines/ccr/ariacontrols/ariacontrols.docs.mdx
@@ -9,37 +9,37 @@ import * as CCR from './ariacontrols.stories';
 
 ### I. Referencing Within the Same DOM Tree ✔️
 
+<p className="lead">
+  In the Light DOM, `aria-controls` is used to indicate that an element controls the visibility or interaction of another element, by referencing its `id`. 
+</p>
+<p>
+  This creates an accessibility relationship, helping assistive technologies understand the interaction between the trigger and the controlled content.
+</p>
 <ul>
   <li>Light DOM → Light DOM</li>
 
 </ul>
   <Canvas of={CCR.ExampleHTML} sourceState="shown" />
-<p className="lead">
-  In the Light DOM, `aria-describedby` is used to give an element its accessible name by referencing
-  the id of another element or multiple elements that contain the desired text.
-</p>
-<p>
-  This is useful when a simple text label isn't directly associated or when the name needs to be
-  combined from different pieces of text.
-</p>
 
-### II. Referencing From Outside a Shadow DOM Into That Shadow DOM ❌
+### II. Referencing From the LightDOM Into That Shadow DOM ❌
 
 <ul>
   <li>Light DOM → Shadow DOM</li>
   <li>Slotted Content → Shadow DOM</li>
 </ul>
 
-Standard `aria-describedby` <b>cannot reference elements located inside a Shadow DOM</b> from outside of it. This is because IDs inside a Shadow DOM are encapsulated and not accessible from the Light DOM or other Shadow DOMs.
+<Canvas of={CCR.Example2} sourceState="shown" />
+
+The `aria-controls` attribute cannot reference elements inside a Shadow DOM from the Light DOM. This is because IDs inside Shadow roots are encapsulated and inaccessible across boundaries, preventing valid accessibility relationships.
 
 ##### Possible Workarounds
 
-###### 1. `Element:ariaDescribedByElements` (Non SSR compatible: to be tested)
+###### 1. `Element:ariaControlsElements`
 
 <b>Light DOM → Shadow DOM Example</b>
-<Canvas of={CCR.Example2} sourceState="shown" />
+<Canvas of={CCR.Example3} sourceState="shown" />
 <div className="hide-col-default">
-  <Controls of={CCR.Example2} />
+  <Controls of={CCR.Example3} />
 </div>
 
 <b>Slotted Content → Shadow DOM Example</b>
@@ -48,22 +48,6 @@ Standard `aria-describedby` <b>cannot reference elements located inside a Shadow
   <Controls of={CCR.Example3} />
 </div>
 
-###### 2. Set `aria-describedby`on the host (for SSR Components: to be tested)
-
-An option is to set the following attributes directly on the host of the target component:
-
-<ul>
-  <li> the `aria-describedby`</li>
-  <li> a semantic `role` (e.g. `textbox`, `button`)</li>
-  <li> `tabindex="0"`</li>
-</ul>
-
-<b>Light DOM → Shadow DOM Example</b>
-<Canvas of={CCR.Example4} sourceState="shown" />
-
-<b>Slotted Content → Shadow DOM Example</b>
-<Canvas of={CCR.Example5} sourceState="shown" />
-
 ### III. Referencing From Inside a Shadow DOM Out to the Light DOM ❌
 
 <ul>
@@ -71,24 +55,4 @@ An option is to set the following attributes directly on the host of the target
   <li>Shadow DOM → Slotted Content</li>
 </ul>
 
-Similarly to the previous case, <b>referencing an element located outside a Shadow DOM from an element inside that Shadow DOM using standard `aria-describedby` is not possible</b>. The strong encapsulation of the Shadow DOM prevents elements within it from directly accessing and referencing the IDs of elements in the Light DOM.
-
-##### Possible Workaround
-
-An option is to set the `id` directly on the host of the referencing element. Please note that, in this case all the visible text inside the referencing component will be assigned as the Accessible Name of the target element.
-
-<Canvas of={CCR.Example6} sourceState="shown" />
-
-##### IV. Referencing From One Shadow DOM To Another Shadow DOM
-
-<ul>
-  <li>Shadow DOM → Other Shadow DOM</li>
-</ul>
-
-Referencing an element located inside <b>one Shadow DOM</b> from an element located inside a <b>different, separate Shadow DOM</b> using standard `aria-describedby` <b>is also not possible</b>. Similar to the other cross-boundary scenarios, the IDs are scoped within their respective Shadow DOMs.
-
-##### Possible Workaround
-
-In this case, in order for the relationship to work, the referencing element must have the `id` directly set on its host (see workaround of case III) and the target element must have the `aria-describedby`, `role` and `tabindex="0"` set on its host (see workaround of case II).
-
-<Canvas of={CCR.Example7} sourceState="shown" />
+### III. Referencing From a Shadow DOM to another Shadow DOM ❌
diff --git a/packages/documentation/src/stories/guidelines/ccr/ariacontrols/ariacontrols.stories.ts b/packages/documentation/src/stories/guidelines/ccr/ariacontrols/ariacontrols.stories.ts
index fa1b30141a..8b5b8f0621 100644
--- a/packages/documentation/src/stories/guidelines/ccr/ariacontrols/ariacontrols.stories.ts
+++ b/packages/documentation/src/stories/guidelines/ccr/ariacontrols/ariacontrols.stories.ts
@@ -15,39 +15,42 @@ export default meta;
 type Story = StoryObj;
 
 // Case: Standard Light DOM to Light DOM
-export const ExampleHTML: Story = {
-  render: () => html`
-    <div aria-controls="id_1" role="tab" tabindex="0">Control Element 1</div>
-    <div id="id_1" role="tabpanel">Controlled Content 1</div>
-    <div aria-controls="id_2" role="tab" tabindex="0">Control Element 2</div>
-    <div id="id_2" role="tabpanel">Controlled Content 2</div>
-  `,
+function handleToggleClick(toggleId: string, textId: string): void {
+  const toggle = document.getElementById(toggleId);
+  const text = document.getElementById(textId);
+  if (toggle && text) {
+    const timestamp = Date.now(); // or use a counter
+    text.innerHTML = `<p>Controlled Text shown at ${timestamp}.</p>`;
+  }
+}
+
+export const ExampleHTML = () => {
+  return html`
+    <button
+      class="btn btn-primary"
+      id="toggle"
+      aria-controls="text"
+      @click=${() => handleToggleClick('toggle', 'text')}
+    >
+      Toggle Text
+    </button>
+    <div id="text" aria-live="polite">
+      <p>Controlled Text shown at xxxxxxxxxxx.</p>
+    </div>
+  `;
 };
 
-// Case: Referencing from Shadow DOM (Host Attribute) to Light DOM (Element) workaround setting programmatically the relevant Element property
+// Case: Referencing from Shadow DOM (Host Attribute) to Light DOM (Element)
+
 export const Example2: Story = {
-  argTypes: {
-    workaround: {
-      name: 'Workaround',
-      control: {
-        type: 'radio',
-      },
-      options: ['none', 'ariaControlsElements'],
-    },
-  },
-  args: {
-    workaround: 'none',
-  },
-  render: (args: Args) => html`
-    <post-test-button2
-      aria-controls-id="controlled_id_2"
-      workaround="${args.workaround}"
-    ></post-test-button2>
-    <span id="controlled_id_2">Controlled Element 2</span>
+  render: () => html`
+    <post-test-button-control id="toggle2" aria-controls="text2">
+      Toggle Text
+    </post-test-button-control>
   `,
 };
 
-// Case: Referencing from Shadow DOM (Host Attribute) to Slotted Content (Element) workaround setting programmatically the relevant Element property
+// Case: Referencing from Shadow DOM (Host Attribute) to Slotted Text (Element)
 export const Example3: Story = {
   argTypes: {
     workaround: {
@@ -76,7 +79,7 @@ export const Example4: Story = {
   `,
 };
 
-// Case: Referencing from Shadow Dom to Slotted Content (Light DOM) workaround with aria-controls directly set on host
+// Case: Referencing from Shadow Dom to Slotted Text (Light DOM) workaround with aria-controls directly set on host
 export const Example5: Story = {
   render: () => html`
     <post-test-button aria-controls-id="controlled_id_5">
diff --git a/packages/documentation/src/stories/guidelines/ccr/ariadescribed/ariadescribed.docs.mdx b/packages/documentation/src/stories/guidelines/ccr/ariadescribed/ariadescribed.docs.mdx
index 95e295b176..dec4c3c2ed 100644
--- a/packages/documentation/src/stories/guidelines/ccr/ariadescribed/ariadescribed.docs.mdx
+++ b/packages/documentation/src/stories/guidelines/ccr/ariadescribed/ariadescribed.docs.mdx
@@ -7,13 +7,6 @@ import * as CCR from './ariadescribed.stories';
 
 ## 3. `aria-describedby`/ `id`
 
-### I. Referencing Within the Same DOM Tree ✔️
-
-<ul>
-  <li>Light DOM → Light DOM</li>
-
-</ul>
-  <Canvas of={CCR.ExampleHTML} sourceState="shown" />
 <p className="lead">
   In the Light DOM, `aria-describedby` is used to give an element its accessible name by referencing
   the id of another element or multiple elements that contain the desired text.
@@ -23,6 +16,14 @@ import * as CCR from './ariadescribed.stories';
   combined from different pieces of text.
 </p>
 
+### I. Referencing Within the Same DOM Tree ✔️
+
+<ul>
+  <li>Light DOM → Light DOM</li>
+
+</ul>
+  <Canvas of={CCR.ExampleHTML} sourceState="shown" />
+
 ### II. Referencing From Outside a Shadow DOM Into That Shadow DOM ❌
 
 <ul>
diff --git a/packages/documentation/src/stories/guidelines/ccr/arialabelled/arialabelled.docs.mdx b/packages/documentation/src/stories/guidelines/ccr/arialabelled/arialabelled.docs.mdx
index bc724eb5ca..51e1dfce4a 100644
--- a/packages/documentation/src/stories/guidelines/ccr/arialabelled/arialabelled.docs.mdx
+++ b/packages/documentation/src/stories/guidelines/ccr/arialabelled/arialabelled.docs.mdx
@@ -7,13 +7,6 @@ import * as CCR from './arialabelled.stories';
 
 ## 2. `aria-labelledby`/ `id`
 
-### I. Referencing Within the Same DOM Tree ✔️
-
-<ul>
-  <li>Light DOM → Light DOM</li>
-
-</ul>
-  <Canvas of={CCR.ExampleHTML} sourceState="shown" />
 <p className="lead">
   In the Light DOM, `aria-labelledby` is used to give an element its accessible name by referencing
   the id of another element or multiple elements that contain the desired text.
@@ -22,7 +15,13 @@ import * as CCR from './arialabelled.stories';
   This is useful when a simple text label isn't directly associated or when the name needs to be
   combined from different pieces of text.
 </p>
+### I. Referencing Within the Same DOM Tree ✔️
+
+<ul>
+  <li>Light DOM → Light DOM</li>
 
+</ul>
+  <Canvas of={CCR.ExampleHTML} sourceState="shown" />
 ### II. Referencing From Outside a Shadow DOM Into That Shadow DOM ❌
 
 <ul>
diff --git a/packages/documentation/src/stories/guidelines/ccr/forid/forid.docs.mdx b/packages/documentation/src/stories/guidelines/ccr/forid/forid.docs.mdx
index b11719ee9f..85db2be136 100644
--- a/packages/documentation/src/stories/guidelines/ccr/forid/forid.docs.mdx
+++ b/packages/documentation/src/stories/guidelines/ccr/forid/forid.docs.mdx
@@ -7,6 +7,10 @@ import * as CCR from './forid.stories';
 
 ## 1. `for`/ `id`
 
+<p className="lead">The native HTML `for`/`id` relationship is a fundamental way to connect a `<label>` element to a form control (such as `<input>`, `<select>`, `<textarea>`, etc. or even to a custom form-associated control) within the same document structure (same DOM tree).</p> 
+<p>This connection is established by setting the for attribute on the `<label>` to match the `id` attribute of the form control it describes. </p>
+<p>This relationship is crucial for accessibility, as it allows assistive technologies like screen readers to correctly associate and announce the label text when focus is placed on the associated input field, thereby making forms understandable and navigable.</p>
+
 ### I. Referencing Within the Same DOM Tree ✔️
 
 <ul>
@@ -14,10 +18,6 @@ import * as CCR from './forid.stories';
   <li>Shadow DOM → Same Shadow DOM</li>
 </ul>
 
-<p className="lead">The native HTML `for`/`id` relationship is a fundamental way to connect a `<label>` element to a form control (such as `<input>`, `<select>`, `<textarea>`, etc. or even to a custom form-associated control) within the same document structure (same DOM tree).</p> 
-<p>This connection is established by setting the for attribute on the `<label>` to match the `id` attribute of the form control it describes. </p>
-<p>This relationship is crucial for accessibility, as it allows assistive technologies like screen readers to correctly associate and announce the label text when focus is placed on the associated input field, thereby making forms understandable and navigable.</p>
-
 <Canvas of={CCR.ExampleHTML} sourceState="shown" />
 
 ### II. Referencing From Outside a Shadow DOM Into That Shadow DOM ❌
diff --git a/packages/documentation/src/stories/guidelines/ccr/role/role.docs.mdx b/packages/documentation/src/stories/guidelines/ccr/role/role.docs.mdx
index 423499b89b..772f3e1404 100644
--- a/packages/documentation/src/stories/guidelines/ccr/role/role.docs.mdx
+++ b/packages/documentation/src/stories/guidelines/ccr/role/role.docs.mdx
@@ -7,88 +7,57 @@ import * as CCR from './role.stories';
 
 ## 3. `role`
 
-### I. Referencing Within the Same DOM Tree ✔️
-
-<ul>
-  <li>Light DOM → Light DOM</li>
-
-</ul>
-  <Canvas of={CCR.ExampleHTML} sourceState="shown" />
 <p className="lead">
-  In the Light DOM, `aria-describedby` is used to give an element its accessible name by referencing
-  the id of another element or multiple elements that contain the desired text.
+  The `role` attribute defines the purpose of a web element (e.g. `role="menu"`, `role="tab"`,
+  `role="dialog"`, `role="accordion"`, etc.) for assistive technologies like screen readers.
 </p>
+
 <p>
-  This is useful when a simple text label isn't directly associated or when the name needs to be
-  combined from different pieces of text.
+  While native HTML elements have implicit roles, the role attribute adds meaning to non-semantic
+  elements like `div` or `span` when used for custom interactive components.
 </p>
 
-### II. Referencing From Outside a Shadow DOM Into That Shadow DOM ❌
+### I. All Within the Same DOM Tree ✔️
 
 <ul>
-  <li>Light DOM → Shadow DOM</li>
-  <li>Slotted Content → Shadow DOM</li>
+  <li>Basic HTML Example</li>
 </ul>
-
-Standard `aria-describedby` <b>cannot reference elements located inside a Shadow DOM</b> from outside of it. This is because IDs inside a Shadow DOM are encapsulated and not accessible from the Light DOM or other Shadow DOMs.
-
-##### Possible Workarounds
-
-###### 1. `Element:ariaDescribedByElements` (Non SSR compatible: to be tested)
-
-<b>Light DOM → Shadow DOM Example</b>
-<Canvas of={CCR.Example2} sourceState="shown" />
-<div className="hide-col-default">
-  <Controls of={CCR.Example2} />
-</div>
-
-<b>Slotted Content → Shadow DOM Example</b>
-<Canvas of={CCR.Example3} sourceState="shown" />
-<div className="hide-col-default">
-  <Controls of={CCR.Example3} />
-</div>
-
-###### 2. Set `aria-describedby`on the host (for SSR Components: to be tested)
-
-An option is to set the following attributes directly on the host of the target component:
-
+<Canvas of={CCR.ExampleHTML} sourceState="shown" />
 <ul>
-  <li> the `aria-describedby`</li>
-  <li> a semantic `role` (e.g. `textbox`, `button`)</li>
-  <li> `tabindex="0"`</li>
+  <li>Light DOM → Component with Slotted Children</li>
 </ul>
-
-<b>Light DOM → Shadow DOM Example</b>
-<Canvas of={CCR.Example4} sourceState="shown" />
-
-<b>Slotted Content → Shadow DOM Example</b>
-<Canvas of={CCR.Example5} sourceState="shown" />
-
-### III. Referencing From Inside a Shadow DOM Out to the Light DOM ❌
+<Canvas of={CCR.Example1a} sourceState="shown" />
 
 <ul>
-  <li>Shadow DOM → Light DOM</li>
-  <li>Shadow DOM → Slotted Content</li>
+  <li> Component host → Same Component Slotted Children</li>
 </ul>
+<Canvas of={CCR.Example1b} sourceState="shown" />
 
-Similarly to the previous case, <b>referencing an element located outside a Shadow DOM from an element inside that Shadow DOM using standard `aria-describedby` is not possible</b>. The strong encapsulation of the Shadow DOM prevents elements within it from directly accessing and referencing the IDs of elements in the Light DOM.
+### II. Parent in the Light DOM - Children Into That Shadow DOM
 
-##### Possible Workaround
-
-An option is to set the `id` directly on the host of the referencing element. Please note that, in this case all the visible text inside the referencing component will be assigned as the Accessible Name of the target element.
-
-<Canvas of={CCR.Example6} sourceState="shown" />
+<ul>
+  <li>Light DOM → Shadow DOM ❓</li>
+  <Canvas of={CCR.Example2a} sourceState="shown" />
+</ul>
+<ul>
+  <li>Slotted Parent → Shadow DOM ❌</li>
+  <Canvas of={CCR.Example2b} sourceState="shown" />
+</ul>
+Light DOM elements with an ARIA parent role cannot be associated to children elements with the
+respective ARIA child roles across the Shadow DOM.
 
-##### IV. Referencing From One Shadow DOM To Another Shadow DOM
+### III. Parent in the Shadow DOM - Children Out to the Light DOM ✔️
 
 <ul>
-  <li>Shadow DOM → Other Shadow DOM</li>
+  <li>Shadow DOM → Light DOM </li>
 </ul>
 
-Referencing an element located inside <b>one Shadow DOM</b> from an element located inside a <b>different, separate Shadow DOM</b> using standard `aria-describedby` <b>is also not possible</b>. Similar to the other cross-boundary scenarios, the IDs are scoped within their respective Shadow DOMs.
+<Canvas of={CCR.Example3} sourceState="shown" />
 
-##### Possible Workaround
+### IV. Referencing From One Shadow DOM To Another Shadow DOM ✔️
 
-In this case, in order for the relationship to work, the referencing element must have the `id` directly set on its host (see workaround of case III) and the target element must have the `aria-describedby`, `role` and `tabindex="0"` set on its host (see workaround of case II).
+<ul>
+  <li>Shadow DOM → Other nested Shadow DOM</li>
+</ul>
 
-<Canvas of={CCR.Example7} sourceState="shown" />
+<Canvas of={CCR.Example4} sourceState="shown" />
diff --git a/packages/documentation/src/stories/guidelines/ccr/role/role.stories.ts b/packages/documentation/src/stories/guidelines/ccr/role/role.stories.ts
index 080d1118cd..bf1609eb8c 100644
--- a/packages/documentation/src/stories/guidelines/ccr/role/role.stories.ts
+++ b/packages/documentation/src/stories/guidelines/ccr/role/role.stories.ts
@@ -1,4 +1,4 @@
-import { StoryObj, Args } from '@storybook/web-components';
+import { StoryObj } from '@storybook/web-components';
 import { MetaExtended } from '@root/types';
 import { html } from 'lit';
 
@@ -17,93 +17,64 @@ type Story = StoryObj;
 // Case: Standard Light DOM to Light DOM
 export const ExampleHTML: Story = {
   render: () => html`
-    <div tabindex="0">
-      <div id="list_label_id">List Label</div>
-      <div role="list">
-        <div role="listitem">item 1</div>
-        <div role="listitem">item 2</div>
-        <div role="listitem">item 3</div>
-      </div>
+    <div role="list" tabindex="0">
+      <div role="listitem">item 1</div>
+      <div role="listitem">item 2</div>
+      <div role="listitem">item 3</div>
     </div>
   `,
 };
 
-// Case: Referencing from Shadow DOM (Host Attribute) to Light DOM (Element) workaround setting programmatically the relevant Element property
-export const Example2: Story = {
-  argTypes: {
-    workaround: {
-      name: 'Workaround',
-      control: {
-        type: 'radio',
-      },
-      options: ['none', 'ariaControlsElements'],
-    },
-  },
-  args: {
-    workaround: 'none',
-  },
-  render: (args: Args) => html`
-    <post-test-button2
-      aria-controls-id="controlled_id_2"
-      workaround="${args.workaround}"
-    ></post-test-button2>
-    <span id="controlled_id_2">Controlled Element 2</span>
+// Case: Light Dom to child components with Slotted content
+export const Example1a: Story = {
+  render: () => html`
+    <div role="list" tabindex="0">
+      <post-test-list-item-group>
+        <div slot="post-list-item" role="listitem">item 1</div>
+        <div slot="post-list-item" role="listitem">item 2</div>
+        <div slot="post-list-item" role="listitem">item 3</div>
+      </post-test-list-item-group>
+    </div>
   `,
 };
 
-// Case: Referencing from Shadow DOM (Host Attribute) to Slotted Content (Element) workaround setting programmatically the relevant Element property
-export const Example3: Story = {
-  argTypes: {
-    workaround: {
-      name: 'Workaround',
-      control: {
-        type: 'radio',
-      },
-      options: ['none', 'ariaControlsElements'], // Adjusted option name for clarity
-    },
-  },
-  args: {
-    workaround: 'none',
-  },
-  render: (args: Args) => html`
-    <post-test-button3 workaround="${args.workaround}">
-      <span slot="control-slot" id="controlled_id_3">Controlled Element 3 (Slotted)</span>
-    </post-test-button3>
+// Case: Parent in the Light - children with Slotted content same component
+export const Example1b: Story = {
+  render: () => html`
+    <post-test-list-item-group role="list" tabindex="0">
+      <div slot="post-list-item" role="listitem">item 1</div>
+      <div slot="post-list-item" role="listitem">item 2</div>
+      <div slot="post-list-item" role="listitem">item 3</div>
+    </post-test-list-item-group>
   `,
 };
 
-// Case: Referencing from Shadow DOM (Host Attribute) to Light DOM (Element) workaround with aria-controls directly set on host
-export const Example4: Story = {
-  render: () => html`
-    <post-test-button aria-controls-id="controlled_id_4">Control Element</post-test-button>
-    <span id="controlled_id_4">Controlled Element 4</span>
-  `,
+// Case: Parent in the Light (Component host) -> Children in the ShadowDOM
+export const Example2a: Story = {
+  render: () =>
+    html` <post-test-list-item-group-2 role="list" tabindex="0"></post-test-list-item-group-2> `,
 };
 
-// Case: Referencing from Shadow Dom to Slotted Content (Light DOM) workaround with aria-controls directly set on host
-export const Example5: Story = {
-  render: () => html`
-    <post-test-button aria-controls-id="controlled_id_5">
-      <span slot="control-slot" id="controlled_id_5">Controlled Element 5 (Slotted)</span>
-    </post-test-button>
-  `,
+// Case: Parent in Light (slotted content) - Children in the ShadowDOM
+export const Example2b: Story = {
+  render: () =>
+    html`<post-test-list-item-group-2 tabindex="0"
+      ><div slot="list-parent" role="list"></div>
+    </post-test-list-item-group-2> `,
 };
 
-// Case: Standard Light DOM to Shadow DOM
-export const Example6: Story = {
+// Case: Parent in the Shadow - Children in the Light
+export const Example3: Story = {
   render: () => html`
-    <div class="btn btn-primary" aria-controls="controlled_id_6" role="button" tabindex="0">
-      <post-icon name="1022"></post-icon>
-      Control Element
-    </div>
-    <post-test-span2></post-test-span2>
+    <post-test-list>
+      <div role="listitem" slot="post-list-item">item 1</div>
+      <div role="listitem" slot="post-list-item">item 2</div>
+      <div role="listitem" slot="post-list-item">item 3</div>
+    </post-test-list>
   `,
 };
 
-// Case: Shadow DOM to other Shadow Dom workaround
-export const Example7: Story = {
-  render: () => html`
-    <post-test-span2 id="controlled_id_7_host"></post-test-span2>
-    <post-test-button aria-controls="controlled_id_7"></post-test-button>
-  `,
+// Case: Referencing from Shadow DOM (Host Attribute) to Slotted Content (Element)
+export const Example4: Story = {
+  render: () => html`<post-test-list-2></post-test-list-2> `,
 };

From d2ed38eac8f7a8b33a41530bcf569299934d8f94 Mon Sep 17 00:00:00 2001
From: Myrta Sakellariou <myrta.sakellariou@gmail.com>
Date: Mon, 26 May 2025 10:57:08 +0200
Subject: [PATCH 06/26] update

---
 packages/components/src/components.d.ts       |  37 +++++
 .../post-test-button-control.tsx              |  54 +++++--
 .../post-test-button-control/readme.md        |   8 +
 .../post-test-button-control2.scss            |   1 +
 .../post-test-button-control2.tsx             |  34 +++++
 .../post-test-button-control2/readme.md       |  17 +++
 .../ccr/ariacontrols/ariacontrols.docs.mdx    |  56 +++++--
 .../ccr/ariacontrols/ariacontrols.stories.ts  |  61 ++++++--
 .../ccr/ariadescribed/ariadescribed.docs.mdx  |   8 +-
 .../ccr/arialabelled/arialabelled.docs.mdx    |   8 +-
 .../guidelines/ccr/forid/forid.docs.mdx       |   6 +-
 .../stories/guidelines/ccr/role/role.docs.mdx |   8 +-
 packages/styles/src/components/button.scss    | 144 +++++++++---------
 .../styles/src/components/form-textarea.scss  |   3 +-
 14 files changed, 321 insertions(+), 124 deletions(-)
 create mode 100644 packages/components/src/components/post-test-button-control2/post-test-button-control2.scss
 create mode 100644 packages/components/src/components/post-test-button-control2/post-test-button-control2.tsx
 create mode 100644 packages/components/src/components/post-test-button-control2/readme.md

diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
index b9e973b93d..3c1d8201cb 100644
--- a/packages/components/src/components.d.ts
+++ b/packages/components/src/components.d.ts
@@ -475,6 +475,20 @@ export namespace Components {
         "ariaLabelledbyId"?: string;
     }
     interface PostTestButtonControl {
+        /**
+          * Defines the ariaContols id
+         */
+        "ariaControlsId"?: string;
+        /**
+          * Defines the selected workaround
+         */
+        "workaround"?: string;
+    }
+    interface PostTestButtonControl2 {
+        /**
+          * Defines the selected workaround
+         */
+        "workaround"?: string;
     }
     interface PostTestButton2 {
         /**
@@ -985,6 +999,12 @@ declare global {
         prototype: HTMLPostTestButtonControlElement;
         new (): HTMLPostTestButtonControlElement;
     };
+    interface HTMLPostTestButtonControl2Element extends Components.PostTestButtonControl2, HTMLStencilElement {
+    }
+    var HTMLPostTestButtonControl2Element: {
+        prototype: HTMLPostTestButtonControl2Element;
+        new (): HTMLPostTestButtonControl2Element;
+    };
     interface HTMLPostTestButton2Element extends Components.PostTestButton2, HTMLStencilElement {
     }
     var HTMLPostTestButton2Element: {
@@ -1123,6 +1143,7 @@ declare global {
         "post-tag": HTMLPostTagElement;
         "post-test-button": HTMLPostTestButtonElement;
         "post-test-button-control": HTMLPostTestButtonControlElement;
+        "post-test-button-control2": HTMLPostTestButtonControl2Element;
         "post-test-button2": HTMLPostTestButton2Element;
         "post-test-button3": HTMLPostTestButton3Element;
         "post-test-div": HTMLPostTestDivElement;
@@ -1547,6 +1568,20 @@ declare namespace LocalJSX {
         "ariaLabelledbyId"?: string;
     }
     interface PostTestButtonControl {
+        /**
+          * Defines the ariaContols id
+         */
+        "ariaControlsId"?: string;
+        /**
+          * Defines the selected workaround
+         */
+        "workaround"?: string;
+    }
+    interface PostTestButtonControl2 {
+        /**
+          * Defines the selected workaround
+         */
+        "workaround"?: string;
     }
     interface PostTestButton2 {
         /**
@@ -1706,6 +1741,7 @@ declare namespace LocalJSX {
         "post-tag": PostTag;
         "post-test-button": PostTestButton;
         "post-test-button-control": PostTestButtonControl;
+        "post-test-button-control2": PostTestButtonControl2;
         "post-test-button2": PostTestButton2;
         "post-test-button3": PostTestButton3;
         "post-test-div": PostTestDiv;
@@ -1770,6 +1806,7 @@ declare module "@stencil/core" {
             "post-tag": LocalJSX.PostTag & JSXBase.HTMLAttributes<HTMLPostTagElement>;
             "post-test-button": LocalJSX.PostTestButton & JSXBase.HTMLAttributes<HTMLPostTestButtonElement>;
             "post-test-button-control": LocalJSX.PostTestButtonControl & JSXBase.HTMLAttributes<HTMLPostTestButtonControlElement>;
+            "post-test-button-control2": LocalJSX.PostTestButtonControl2 & JSXBase.HTMLAttributes<HTMLPostTestButtonControl2Element>;
             "post-test-button2": LocalJSX.PostTestButton2 & JSXBase.HTMLAttributes<HTMLPostTestButton2Element>;
             "post-test-button3": LocalJSX.PostTestButton3 & JSXBase.HTMLAttributes<HTMLPostTestButton3Element>;
             "post-test-div": LocalJSX.PostTestDiv & JSXBase.HTMLAttributes<HTMLPostTestDivElement>;
diff --git a/packages/components/src/components/post-test-button-control/post-test-button-control.tsx b/packages/components/src/components/post-test-button-control/post-test-button-control.tsx
index ad44e02206..2789e17166 100644
--- a/packages/components/src/components/post-test-button-control/post-test-button-control.tsx
+++ b/packages/components/src/components/post-test-button-control/post-test-button-control.tsx
@@ -1,4 +1,10 @@
-import { Component, h, Host, Element } from '@stencil/core';
+import { Component, h, Host, Element, Prop } from '@stencil/core';
+
+declare global {
+  interface Element {
+    ariaControlsElements: Element[];
+  }
+}
 
 @Component({
   tag: 'post-test-button-control',
@@ -6,30 +12,54 @@ import { Component, h, Host, Element } from '@stencil/core';
   shadow: true,
 })
 export class PostTestButtonControl {
-  @Element() hostEl: HTMLPostTestButtonControlElement;
+  @Element() host: HTMLPostTestButtonControlElement;
+
   private internalEl: HTMLElement;
 
   private readonly handleToggleClick = () => {
-    if (this.hostEl && this.internalEl) {
+    if (this.host && this.internalEl) {
       const timestamp = Date.now();
       this.internalEl.innerHTML = `<p>Controlled Text shown at ${timestamp}.</p>`;
     }
   };
 
+  /**
+   * Defines the selected workaround
+   */
+  @Prop() workaround?: string;
+
+  /**
+   * Defines the ariaContols id
+   */
+  @Prop() ariaControlsId?: string;
+
+  private setProperties() {
+    if (this.host) {
+      if (this.workaround == 'ariaControlsElements') {
+        console.log(this.internalEl);
+        this.host.ariaControlsElements = [this.internalEl];
+        console.log(this.host.ariaControlsElements);
+      } else {
+        this.host.ariaControlsElements = [];
+      }
+    }
+  }
+
+  componentWillLoad() {
+    this.setProperties();
+  }
+
+  componentDidUpdate() {
+    this.setProperties();
+  }
+
   render() {
     return (
-      <Host
-        role="button"
-        tabindex="0"
-        aria-expanded="false"
-        aria-controls="text2"
-        onClick={this.handleToggleClick}
-      >
+      <Host role="button" tabindex="0" onClick={this.handleToggleClick}>
         Toggle Text
         <div
-          class="btn btn-primary"
           aria-live="assertive"
-          id="text2"
+          id={this.workaround === 'none' ? this.ariaControlsId : ''}
           ref={el => {
             if (el) this.internalEl = el as HTMLElement;
           }}
diff --git a/packages/components/src/components/post-test-button-control/readme.md b/packages/components/src/components/post-test-button-control/readme.md
index 1e8ac9feb3..8ff2a3881f 100644
--- a/packages/components/src/components/post-test-button-control/readme.md
+++ b/packages/components/src/components/post-test-button-control/readme.md
@@ -5,6 +5,14 @@
 <!-- Auto Generated Below -->
 
 
+## Properties
+
+| Property         | Attribute          | Description                     | Type     | Default     |
+| ---------------- | ------------------ | ------------------------------- | -------- | ----------- |
+| `ariaControlsId` | `aria-controls-id` | Defines the ariaContols id      | `string` | `undefined` |
+| `workaround`     | `workaround`       | Defines the selected workaround | `string` | `undefined` |
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/components/src/components/post-test-button-control2/post-test-button-control2.scss b/packages/components/src/components/post-test-button-control2/post-test-button-control2.scss
new file mode 100644
index 0000000000..28612a51ef
--- /dev/null
+++ b/packages/components/src/components/post-test-button-control2/post-test-button-control2.scss
@@ -0,0 +1 @@
+@use '@swisspost/design-system-styles/post-default.scss';
diff --git a/packages/components/src/components/post-test-button-control2/post-test-button-control2.tsx b/packages/components/src/components/post-test-button-control2/post-test-button-control2.tsx
new file mode 100644
index 0000000000..3057185513
--- /dev/null
+++ b/packages/components/src/components/post-test-button-control2/post-test-button-control2.tsx
@@ -0,0 +1,34 @@
+import { Component, h, Host, Element, Prop } from '@stencil/core';
+
+@Component({
+  tag: 'post-test-button-control2',
+  styleUrl: 'post-test-button-control2.scss',
+  shadow: true,
+})
+export class PostTestButtonControl {
+  @Element() hostEl: HTMLPostTestButtonControl2Element;
+  // private internalEl: HTMLElement;
+
+  // private readonly handleToggleClick = () => {
+  //   if (this.hostEl && this.internalEl) {
+  //     const timestamp = Date.now();
+  //     this.internalEl.innerHTML = `<p>Controlled Text shown at ${timestamp}.</p>`;
+  //   }
+  // };
+
+  /**
+   * Defines the selected workaround
+   */
+  @Prop() workaround?: string;
+
+  render() {
+    return (
+      <Host>
+        Toggle Text
+        <div role="button" tabindex="0" aria-live="assertive" id="text2">
+          <p>Controlled Text shown at xxxxxxxxxxx.</p>
+        </div>
+      </Host>
+    );
+  }
+}
diff --git a/packages/components/src/components/post-test-button-control2/readme.md b/packages/components/src/components/post-test-button-control2/readme.md
new file mode 100644
index 0000000000..61fe1287b1
--- /dev/null
+++ b/packages/components/src/components/post-test-button-control2/readme.md
@@ -0,0 +1,17 @@
+# post-test-form
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property     | Attribute    | Description                     | Type     | Default     |
+| ------------ | ------------ | ------------------------------- | -------- | ----------- |
+| `workaround` | `workaround` | Defines the selected workaround | `string` | `undefined` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/documentation/src/stories/guidelines/ccr/ariacontrols/ariacontrols.docs.mdx b/packages/documentation/src/stories/guidelines/ccr/ariacontrols/ariacontrols.docs.mdx
index a7ef98ba76..e16184c51b 100644
--- a/packages/documentation/src/stories/guidelines/ccr/ariacontrols/ariacontrols.docs.mdx
+++ b/packages/documentation/src/stories/guidelines/ccr/ariacontrols/ariacontrols.docs.mdx
@@ -9,12 +9,12 @@ import * as CCR from './ariacontrols.stories';
 
 ### I. Referencing Within the Same DOM Tree ✔️
 
-<p className="lead">
+<div className="lead">
   In the Light DOM, `aria-controls` is used to indicate that an element controls the visibility or interaction of another element, by referencing its `id`. 
-</p>
-<p>
+</div>
+<div>
   This creates an accessibility relationship, helping assistive technologies understand the interaction between the trigger and the controlled content.
-</p>
+</div>
 <ul>
   <li>Light DOM → Light DOM</li>
 
@@ -28,8 +28,6 @@ import * as CCR from './ariacontrols.stories';
   <li>Slotted Content → Shadow DOM</li>
 </ul>
 
-<Canvas of={CCR.Example2} sourceState="shown" />
-
 The `aria-controls` attribute cannot reference elements inside a Shadow DOM from the Light DOM. This is because IDs inside Shadow roots are encapsulated and inaccessible across boundaries, preventing valid accessibility relationships.
 
 ##### Possible Workarounds
@@ -37,17 +35,33 @@ The `aria-controls` attribute cannot reference elements inside a Shadow DOM from
 ###### 1. `Element:ariaControlsElements`
 
 <b>Light DOM → Shadow DOM Example</b>
-<Canvas of={CCR.Example3} sourceState="shown" />
+<Canvas of={CCR.Example2a} sourceState="shown" />
 <div className="hide-col-default">
-  <Controls of={CCR.Example3} />
+  <Controls of={CCR.Example2a} />
 </div>
 
 <b>Slotted Content → Shadow DOM Example</b>
-<Canvas of={CCR.Example3} sourceState="shown" />
+<Canvas of={CCR.Example2b} sourceState="shown" />
 <div className="hide-col-default">
-  <Controls of={CCR.Example3} />
+  <Controls of={CCR.Example2b} />
 </div>
 
+###### 2. Set `aria-labelledby`on the host (for SSR Components: to be tested)
+
+An option is to set the following attributes directly on the host of the target component:
+
+<ul>
+  <li> the `aria-labelledby`</li>
+  <li> a semantic `role` (e.g. `textbox`, `button`)</li>
+  <li> `tabindex="0"`</li>
+</ul>
+
+<b>Light DOM → Shadow DOM Example</b>
+<Canvas of={CCR.Example2b} sourceState="shown" />
+
+<b>Slotted Content → Shadow DOM Example</b>
+<Canvas of={CCR.Example2b} sourceState="shown" />
+
 ### III. Referencing From Inside a Shadow DOM Out to the Light DOM ❌
 
 <ul>
@@ -55,4 +69,24 @@ The `aria-controls` attribute cannot reference elements inside a Shadow DOM from
   <li>Shadow DOM → Slotted Content</li>
 </ul>
 
-### III. Referencing From a Shadow DOM to another Shadow DOM ❌
+Similarly to the previous case, <b>referencing an element located outside a Shadow DOM from an element inside that Shadow DOM using standard `aria-labelledby` is not possible</b>. The strong encapsulation of the Shadow DOM prevents elements within it from directly accessing and referencing the IDs of elements in the Light DOM.
+
+##### Possible Workaround
+
+An option is to set the `id` directly on the host of the referencing element. Please note that, in this case all the visible text inside the referencing component will be assigned as the Accessible Name of the target element.
+
+<Canvas of={CCR.Example2b} sourceState="shown" />
+
+##### IV. Referencing From One Shadow DOM To Another Shadow DOM
+
+<ul>
+  <li>Shadow DOM → Other Shadow DOM</li>
+</ul>
+
+what happens
+
+##### Possible Workaround
+
+workaround text
+
+<Canvas of={CCR.Example2b} sourceState="shown" />
diff --git a/packages/documentation/src/stories/guidelines/ccr/ariacontrols/ariacontrols.stories.ts b/packages/documentation/src/stories/guidelines/ccr/ariacontrols/ariacontrols.stories.ts
index 8b5b8f0621..3009ebf4f2 100644
--- a/packages/documentation/src/stories/guidelines/ccr/ariacontrols/ariacontrols.stories.ts
+++ b/packages/documentation/src/stories/guidelines/ccr/ariacontrols/ariacontrols.stories.ts
@@ -26,12 +26,7 @@ function handleToggleClick(toggleId: string, textId: string): void {
 
 export const ExampleHTML = () => {
   return html`
-    <button
-      class="btn btn-primary"
-      id="toggle"
-      aria-controls="text"
-      @click=${() => handleToggleClick('toggle', 'text')}
-    >
+    <button id="toggle" aria-controls="text" @click=${() => handleToggleClick('toggle', 'text')}>
       Toggle Text
     </button>
     <div id="text" aria-live="polite">
@@ -42,14 +37,54 @@ export const ExampleHTML = () => {
 
 // Case: Referencing from Shadow DOM (Host Attribute) to Light DOM (Element)
 
-export const Example2: Story = {
-  render: () => html`
-    <post-test-button-control id="toggle2" aria-controls="text2">
+export const Example2a: Story = {
+  argTypes: {
+    workaround: {
+      name: 'Workaround',
+      control: {
+        type: 'radio',
+      },
+      options: ['none', 'ariaControlsElements'],
+    },
+  },
+  args: {
+    workaround: 'none',
+  },
+  render: (args: Args) => html`
+    <post-test-button-control workaround="${args.workaround}" aria-controls-id="id_2">
       Toggle Text
     </post-test-button-control>
   `,
 };
 
+export const Example2b: Story = {
+  argTypes: {
+    workaround: {
+      name: 'Workaround',
+      control: {
+        type: 'radio',
+      },
+      options: ['none', 'ariaControlsElements'],
+    },
+  },
+  args: {
+    workaround: 'none',
+  },
+  render: () => html`
+    <post-test-button-control2 id="toggle3"
+      ><div
+        slot="control-slot"
+        role="button"
+        tabindex="0"
+        aria-expanded="false"
+        aria-controls="text3"
+      >
+        Toggle Text
+      </div>
+    </post-test-button-control2>
+  `,
+};
+
 // Case: Referencing from Shadow DOM (Host Attribute) to Slotted Text (Element)
 export const Example3: Story = {
   argTypes: {
@@ -58,16 +93,16 @@ export const Example3: Story = {
       control: {
         type: 'radio',
       },
-      options: ['none', 'ariaControlsElements'], // Adjusted option name for clarity
+      options: ['none', 'ariaControlsElements'],
     },
   },
   args: {
     workaround: 'none',
   },
   render: (args: Args) => html`
-    <post-test-button3 workaround="${args.workaround}">
-      <span slot="control-slot" id="controlled_id_3">Controlled Element 3 (Slotted)</span>
-    </post-test-button3>
+    <post-test-button-control workaround="${args.workaround}" id="toggle2" aria-controls="text2">
+      Toggle Text
+    </post-test-button-control>
   `,
 };
 
diff --git a/packages/documentation/src/stories/guidelines/ccr/ariadescribed/ariadescribed.docs.mdx b/packages/documentation/src/stories/guidelines/ccr/ariadescribed/ariadescribed.docs.mdx
index dec4c3c2ed..1f14a19745 100644
--- a/packages/documentation/src/stories/guidelines/ccr/ariadescribed/ariadescribed.docs.mdx
+++ b/packages/documentation/src/stories/guidelines/ccr/ariadescribed/ariadescribed.docs.mdx
@@ -7,14 +7,14 @@ import * as CCR from './ariadescribed.stories';
 
 ## 3. `aria-describedby`/ `id`
 
-<p className="lead">
+<div className="lead">
   In the Light DOM, `aria-describedby` is used to give an element its accessible name by referencing
   the id of another element or multiple elements that contain the desired text.
-</p>
-<p>
+</div>
+<div>
   This is useful when a simple text label isn't directly associated or when the name needs to be
   combined from different pieces of text.
-</p>
+</div>
 
 ### I. Referencing Within the Same DOM Tree ✔️
 
diff --git a/packages/documentation/src/stories/guidelines/ccr/arialabelled/arialabelled.docs.mdx b/packages/documentation/src/stories/guidelines/ccr/arialabelled/arialabelled.docs.mdx
index 51e1dfce4a..660808d977 100644
--- a/packages/documentation/src/stories/guidelines/ccr/arialabelled/arialabelled.docs.mdx
+++ b/packages/documentation/src/stories/guidelines/ccr/arialabelled/arialabelled.docs.mdx
@@ -7,14 +7,14 @@ import * as CCR from './arialabelled.stories';
 
 ## 2. `aria-labelledby`/ `id`
 
-<p className="lead">
+<div className="lead">
   In the Light DOM, `aria-labelledby` is used to give an element its accessible name by referencing
   the id of another element or multiple elements that contain the desired text.
-</p>
-<p>
+</div>
+<div>
   This is useful when a simple text label isn't directly associated or when the name needs to be
   combined from different pieces of text.
-</p>
+</div>
 ### I. Referencing Within the Same DOM Tree ✔️
 
 <ul>
diff --git a/packages/documentation/src/stories/guidelines/ccr/forid/forid.docs.mdx b/packages/documentation/src/stories/guidelines/ccr/forid/forid.docs.mdx
index 85db2be136..aa17a42d46 100644
--- a/packages/documentation/src/stories/guidelines/ccr/forid/forid.docs.mdx
+++ b/packages/documentation/src/stories/guidelines/ccr/forid/forid.docs.mdx
@@ -7,9 +7,9 @@ import * as CCR from './forid.stories';
 
 ## 1. `for`/ `id`
 
-<p className="lead">The native HTML `for`/`id` relationship is a fundamental way to connect a `<label>` element to a form control (such as `<input>`, `<select>`, `<textarea>`, etc. or even to a custom form-associated control) within the same document structure (same DOM tree).</p> 
-<p>This connection is established by setting the for attribute on the `<label>` to match the `id` attribute of the form control it describes. </p>
-<p>This relationship is crucial for accessibility, as it allows assistive technologies like screen readers to correctly associate and announce the label text when focus is placed on the associated input field, thereby making forms understandable and navigable.</p>
+<div className="lead">The native HTML `for`/`id` relationship is a fundamental way to connect a `<label>` element to a form control (such as `<input>`, `<select>`, `<textarea>`, etc. or even to a custom form-associated control) within the same document structure (same DOM tree).</div> 
+<div>This connection is established by setting the for attribute on the `<label>` to match the `id` attribute of the form control it describes. </div>
+<div>This relationship is crucial for accessibility, as it allows assistive technologies like screen readers to correctly associate and announce the label text when focus is placed on the associated input field, thereby making forms understandable and navigable.</div>
 
 ### I. Referencing Within the Same DOM Tree ✔️
 
diff --git a/packages/documentation/src/stories/guidelines/ccr/role/role.docs.mdx b/packages/documentation/src/stories/guidelines/ccr/role/role.docs.mdx
index 772f3e1404..38b847fdfe 100644
--- a/packages/documentation/src/stories/guidelines/ccr/role/role.docs.mdx
+++ b/packages/documentation/src/stories/guidelines/ccr/role/role.docs.mdx
@@ -7,15 +7,15 @@ import * as CCR from './role.stories';
 
 ## 3. `role`
 
-<p className="lead">
+<div className="lead">
   The `role` attribute defines the purpose of a web element (e.g. `role="menu"`, `role="tab"`,
   `role="dialog"`, `role="accordion"`, etc.) for assistive technologies like screen readers.
-</p>
+</div>
 
-<p>
+<div>
   While native HTML elements have implicit roles, the role attribute adds meaning to non-semantic
   elements like `div` or `span` when used for custom interactive components.
-</p>
+</div>
 
 ### I. All Within the Same DOM Tree ✔️
 
diff --git a/packages/styles/src/components/button.scss b/packages/styles/src/components/button.scss
index 93937d3207..aed10f8032 100644
--- a/packages/styles/src/components/button.scss
+++ b/packages/styles/src/components/button.scss
@@ -21,98 +21,100 @@
 
 tokens.$default-map: components.$post-button;
 
-.btn {
-  // Resets
-  display: inline-flex;
-  position: relative;
-  align-items: center;
-  justify-content: center;
-  max-width: 100%;
-  overflow: hidden;
-  transition: button.$btn-transition;
-  border-width: tokens.get('button-border-width');
-  border-style: solid;
-  border-radius: tokens.get('button-border-radius-round');
-  background-color: transparent;
-  box-shadow: none;
-  font-family: inherit;
-  font-weight: tokens.get('button-label-font-weight');
-  text-decoration: none;
-  white-space: nowrap; // Long content should never break in buttons
-
-  &:hover {
+:host {
+  .btn {
+    // Resets
+    display: inline-flex;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    max-width: 100%;
+    overflow: hidden;
+    transition: button.$btn-transition;
+    border-width: tokens.get('button-border-width');
+    border-style: solid;
+    border-radius: tokens.get('button-border-radius-round');
+    background-color: transparent;
+    box-shadow: none;
+    font-family: inherit;
+    font-weight: tokens.get('button-label-font-weight');
     text-decoration: none;
-  }
-
-  @include button-mx.button-size();
+    white-space: nowrap; // Long content should never break in buttons
 
-  &:disabled {
-    border-style: tokens.get('button-border-style-disabled');
-  }
+    &:hover {
+      text-decoration: none;
+    }
 
-  @include utilities.focus-style;
+    @include button-mx.button-size();
 
-  @include utilities.high-contrast-mode() {
-    &:is(a) {
-      color: LinkText;
-      border: unset;
+    &:disabled {
+      border-style: tokens.get('button-border-style-disabled');
     }
 
-    &:is(button) {
-      background-color: ButtonFace !important;
-      border: 1px solid ButtonBorder !important;
-    }
+    @include utilities.focus-style;
 
-    &:not(:disabled, .disabled) {
-      &:is(button):hover {
-        background-color: Highlight !important;
+    @include utilities.high-contrast-mode() {
+      &:is(a) {
+        color: LinkText;
+        border: unset;
+      }
+
+      &:is(button) {
+        background-color: ButtonFace !important;
+        border: 1px solid ButtonBorder !important;
+      }
 
-        > post-icon {
-          color: HighlightText !important;
+      &:not(:disabled, .disabled) {
+        &:is(button):hover {
+          background-color: Highlight !important;
+
+          > post-icon {
+            color: HighlightText !important;
+          }
         }
       }
     }
   }
-}
 
-// Type variants
-@each $variant in button.$btn-variants {
-  .btn-#{$variant} {
-    $color: if($variant == 'default', 'secondary', if($variant == 'link', 'tertiary', $variant));
+  // Type variants
+  @each $variant in button.$btn-variants {
+    .btn-#{$variant} {
+      $color: if($variant == 'default', 'secondary', if($variant == 'link', 'tertiary', $variant));
 
-    @if ($variant != 'link' and $variant != 'tertiary') {
-      box-shadow: tokens.get('button-elevation');
-    }
+      @if ($variant != 'link' and $variant != 'tertiary') {
+        box-shadow: tokens.get('button-elevation');
+      }
 
-    @include button-mx.button-variant-def('enabled', $color);
+      @include button-mx.button-variant-def('enabled', $color);
 
-    &:disabled {
-      @include button-mx.button-variant-def('disabled', $color);
-    }
+      &:disabled {
+        @include button-mx.button-variant-def('disabled', $color);
+      }
 
-    @include utilities.not-disabled-hover() {
-      @include button-mx.button-variant-def('hover', $color);
+      @include utilities.not-disabled-hover() {
+        @include button-mx.button-variant-def('hover', $color);
+      }
     }
   }
-}
 
-// Size variants, default is md
-@each $size in button.$btn-non-default-sizes {
-  .btn-#{$size} {
-    @include button-mx.button-size($size);
+  // Size variants, default is md
+  @each $size in button.$btn-non-default-sizes {
+    .btn-#{$size} {
+      @include button-mx.button-size($size);
+    }
   }
-}
 
-.btn-link {
-  text-decoration: tokens.get('link-decoration', elements.$post-link);
-  border: 0 none;
-  border-radius: tokens.get('link-border-radius', elements.$post-link);
-  min-height: 0;
-  font-size: inherit;
-  font-weight: inherit;
-  padding: 0;
-
-  &:hover {
-    color: tokens.get('link-hover-fg', elements.$post-link);
+  .btn-link {
+    text-decoration: tokens.get('link-decoration', elements.$post-link);
+    border: 0 none;
+    border-radius: tokens.get('link-border-radius', elements.$post-link);
+    min-height: 0;
+    font-size: inherit;
+    font-weight: inherit;
+    padding: 0;
+
+    &:hover {
+      color: tokens.get('link-hover-fg', elements.$post-link);
+    }
   }
 }
diff --git a/packages/styles/src/components/form-textarea.scss b/packages/styles/src/components/form-textarea.scss
index a82cfcaf61..b6f82ed57f 100644
--- a/packages/styles/src/components/form-textarea.scss
+++ b/packages/styles/src/components/form-textarea.scss
@@ -13,8 +13,7 @@ textarea.form-control {
   width: 100%;
   appearance: none; // Fix appearance for date inputs in Safari
   background-clip: padding-box;
-  border: tokens.get('textarea-border-width') tokens.get('textarea-border-style-enabled')
-    tokens.get('textarea-enabled-border');
+  border: 2px tokens.get('textarea-border-style-enabled') tokens.get('textarea-enabled-border');
   position: relative;
   border-radius: tokens.get('textarea-border-radius');
   background-color: tokens.get('textarea-enabled-bg');

From 89a00dd266ddf54411eca524af11fed28e5b4dab Mon Sep 17 00:00:00 2001
From: Myrta Sakellariou <myrta.sakellariou@gmail.com>
Date: Tue, 3 Jun 2025 09:49:33 +0200
Subject: [PATCH 07/26] merge error fix

---
 packages/styles/src/components/button.scss | 59 +++++++++++-----------
 1 file changed, 29 insertions(+), 30 deletions(-)

diff --git a/packages/styles/src/components/button.scss b/packages/styles/src/components/button.scss
index d14118c5ac..c352a7116e 100644
--- a/packages/styles/src/components/button.scss
+++ b/packages/styles/src/components/button.scss
@@ -25,45 +25,44 @@ tokens.$default-map: components.$post-button;
   @extend %btn;
 }
 
-  // Type variants
-  @each $variant in button.$btn-variants {
-    .btn-#{$variant} {
-      $color: if($variant == 'default', 'secondary', if($variant == 'link', 'tertiary', $variant));
+// Type variants
+@each $variant in button.$btn-variants {
+  .btn-#{$variant} {
+    $color: if($variant == 'default', 'secondary', if($variant == 'link', 'tertiary', $variant));
 
-      @if ($variant != 'link' and $variant != 'tertiary') {
-        box-shadow: tokens.get('button-elevation');
-      }
+    @if ($variant != 'link' and $variant != 'tertiary') {
+      box-shadow: tokens.get('button-elevation');
+    }
 
-      @include button-mx.button-variant-def('enabled', $color);
+    @include button-mx.button-variant-def('enabled', $color);
 
-      &:disabled {
-        @include button-mx.button-variant-def('disabled', $color);
-      }
+    &:disabled {
+      @include button-mx.button-variant-def('disabled', $color);
+    }
 
-      @include utilities.not-disabled-hover() {
-        @include button-mx.button-variant-def('hover', $color);
-      }
+    @include utilities.not-disabled-hover() {
+      @include button-mx.button-variant-def('hover', $color);
     }
   }
+}
 
-  // Size variants, default is md
-  @each $size in button.$btn-non-default-sizes {
-    .btn-#{$size} {
-      @include button-mx.button-size($size);
-    }
+// Size variants, default is md
+@each $size in button.$btn-non-default-sizes {
+  .btn-#{$size} {
+    @include button-mx.button-size($size);
   }
+}
 
-  .btn-link {
-    text-decoration: tokens.get('link-decoration', elements.$post-link);
-    border: 0 none;
-    border-radius: tokens.get('link-border-radius', elements.$post-link);
-    min-height: 0;
-    font-size: inherit;
-    font-weight: inherit;
-    padding: 0;
+.btn-link {
+  text-decoration: tokens.get('link-decoration', elements.$post-link);
+  border: 0 none;
+  border-radius: tokens.get('link-border-radius', elements.$post-link);
+  min-height: 0;
+  font-size: inherit;
+  font-weight: inherit;
+  padding: 0;
 
-    &:hover {
-      color: tokens.get('link-hover-fg', elements.$post-link);
-    }
+  &:hover {
+    color: tokens.get('link-hover-fg', elements.$post-link);
   }
 }

From c936ed53cb4c93b195ad018c0cbb321f8ff93ea1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= <oliver.schuerch@post.ch>
Date: Wed, 11 Jun 2025 13:05:53 +0200
Subject: [PATCH 08/26] refactor(styles): generate not-defined selectors by
 using the components/src/components/ subfolder names (#5165)

---
 .changeset/old-teachers-deliver.md            | 14 +++++
 packages/components-angular/package.json      |  6 +-
 .../projects/components/package.json          |  5 ++
 .../consumer-app/src/app/app.module.ts        |  2 +-
 .../projects/consumer-app/src/styles.scss     |  1 +
 packages/components-react/package.json        |  7 ++-
 packages/components/.gitignore                |  1 +
 .../__snapshots__/prebuild.spec.ts.snap       | 15 +++++
 packages/components/eslint.config.mjs         |  9 ++-
 packages/components/package.json              | 20 +++++--
 packages/components/prebuild.spec.ts          | 31 ++++++++++
 packages/components/prebuild.ts               | 35 +++++++++++
 packages/components/src/index.html            |  1 +
 packages/components/src/styles/index.scss     |  1 +
 .../src/styles/utilities/index.scss           |  1 +
 .../src/styles/utilities/not-defined.scss     |  7 +++
 packages/components/stencil.config.ts         |  1 +
 packages/components/tsconfig.eslint.json      |  2 +-
 packages/components/tsconfig.json             | 10 +++-
 packages/documentation/.storybook/main.ts     |  4 ++
 .../.storybook/preview-head.html              |  1 +
 .../angular-app-css-global.sample.css         |  1 +
 .../components-angular.docs.mdx               |  8 +++
 .../components-react.docs.mdx                 |  8 +++
 .../react-app-css-global.sample.css           |  1 +
 .../components-css-global.sample.css          |  1 +
 .../packages/components/components.docs.mdx   |  8 +++
 .../nextjs-integration/src/app/layout.tsx     |  4 +-
 packages/styles/.gitignore                    |  1 -
 packages/styles/gulpfile.js                   | 59 ++-----------------
 .../src/templates/_not-defined.template.scss  |  8 ---
 packages/styles/src/utilities/index.scss      |  1 -
 pnpm-lock.yaml                                | 54 ++++++++++-------
 33 files changed, 230 insertions(+), 98 deletions(-)
 create mode 100644 .changeset/old-teachers-deliver.md
 create mode 100644 packages/components/__snapshots__/prebuild.spec.ts.snap
 create mode 100644 packages/components/prebuild.spec.ts
 create mode 100644 packages/components/prebuild.ts
 create mode 100644 packages/components/src/styles/index.scss
 create mode 100644 packages/components/src/styles/utilities/index.scss
 create mode 100644 packages/components/src/styles/utilities/not-defined.scss
 create mode 100644 packages/documentation/src/stories/packages/components-angular/angular-app-css-global.sample.css
 create mode 100644 packages/documentation/src/stories/packages/components-react/react-app-css-global.sample.css
 create mode 100644 packages/documentation/src/stories/packages/components/components-css-global.sample.css
 delete mode 100644 packages/styles/src/templates/_not-defined.template.scss

diff --git a/.changeset/old-teachers-deliver.md b/.changeset/old-teachers-deliver.md
new file mode 100644
index 0000000000..efa14d6e0e
--- /dev/null
+++ b/.changeset/old-teachers-deliver.md
@@ -0,0 +1,14 @@
+---
+'@swisspost/design-system-styles': major
+'@swisspost/design-system-components-angular': major
+'@swisspost/design-system-components-react': major
+'@swisspost/design-system-components': major
+---
+
+Moved the file responsible for preventing flashes of unstyled content for components from the styles to the components package. The flashes occur when non-hydrated components are rendered before JavaScript has loaded on a client. These styles hide the non-hydrated component, preventing the flash.
+
+**Changes:**
+Removed: `@swispost/design-system-styles/components/not-defined.(scss|css)`
+Added: `@swisspost/design-system-components/post-components/post-components.css`
+Added: `@swisspost/design-system-components-angular/post-components.css`
+Added: `@swisspost/design-system-components-react/post-components.css`
diff --git a/packages/components-angular/package.json b/packages/components-angular/package.json
index b472273b24..6d3cd8510c 100644
--- a/packages/components-angular/package.json
+++ b/packages/components-angular/package.json
@@ -16,11 +16,13 @@
   "scripts": {
     "start": "ng serve --port 9210",
     "build": "pnpm clean && ng build components",
+    "postbuild": "pnpm copy:styles:dist",
     "clean": "rimraf dist .angular",
     "e2e": "ng e2e --watch=false",
     "e2e:watch": "ng e2e",
     "lint": "ng lint",
-    "lint:fix": "ng lint --fix"
+    "lint:fix": "ng lint --fix",
+    "copy:styles:dist": "copyfiles -f projects/components/src/lib/stencil-generated/post-components.css dist/components/"
   },
   "dependencies": {
     "@angular/animations": "19.2.0",
@@ -38,12 +40,14 @@
     "zone.js": "0.15.0"
   },
   "devDependencies": {
+    "@swisspost/design-system-components-angular": "workspace:10.0.0-next.38",
     "@angular-devkit/build-angular": "19.2.0",
     "@angular/cli": "19.2.0",
     "@angular/compiler-cli": "19.2.0",
     "@cypress/schematic": "2.5.2",
     "@eslint/js": "9.18.0",
     "angular-eslint": "19.1.0",
+    "copyfiles": "2.4.1",
     "cypress": "14.3.2",
     "eslint": "^9.15.0",
     "globals": "16.0.0",
diff --git a/packages/components-angular/projects/components/package.json b/packages/components-angular/projects/components/package.json
index a656cdee4f..5c7c235f05 100644
--- a/packages/components-angular/projects/components/package.json
+++ b/packages/components-angular/projects/components/package.json
@@ -17,6 +17,11 @@
     "access": "public",
     "linkDirectory": true
   },
+  "exports": {
+    "./post-components.css": {
+      "css": "./post-components.css"
+    }
+  },
   "dependencies": {
     "@swisspost/design-system-components": "workspace:10.0.0-next.38",
     "tslib": "2.8.1"
diff --git a/packages/components-angular/projects/consumer-app/src/app/app.module.ts b/packages/components-angular/projects/consumer-app/src/app/app.module.ts
index 063d25fddb..e28efa75f7 100644
--- a/packages/components-angular/projects/consumer-app/src/app/app.module.ts
+++ b/packages/components-angular/projects/consumer-app/src/app/app.module.ts
@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 import { BrowserModule } from '@angular/platform-browser';
 import { AppRoutingModule } from './app-routing.module';
 import { FormsModule } from '@angular/forms';
-import { PostComponentsModule } from 'components';
+import { PostComponentsModule } from '@swisspost/design-system-components-angular';
 
 import { AppComponent } from './app.component';
 import { HomeComponent } from './routes/home/home.component';
diff --git a/packages/components-angular/projects/consumer-app/src/styles.scss b/packages/components-angular/projects/consumer-app/src/styles.scss
index 28612a51ef..146ecfde32 100644
--- a/packages/components-angular/projects/consumer-app/src/styles.scss
+++ b/packages/components-angular/projects/consumer-app/src/styles.scss
@@ -1 +1,2 @@
+@use '@swisspost/design-system-components-angular/post-components.css';
 @use '@swisspost/design-system-styles/post-default.scss';
diff --git a/packages/components-react/package.json b/packages/components-react/package.json
index 2819295834..f526be315b 100644
--- a/packages/components-react/package.json
+++ b/packages/components-react/package.json
@@ -23,10 +23,12 @@
   "main": "dist/index.js",
   "types": "dist/types/index.d.ts",
   "scripts": {
-    "build": "pnpm run clean && tsc -p .",
+    "build": "pnpm clean && tsc -p .",
+    "postbuild": "pnpm copy:styles:dist",
     "clean": "rimraf dist",
     "lint": "eslint",
-    "lint:fix": "eslint --fix"
+    "lint:fix": "eslint --fix",
+    "copy:styles:dist": "copyfiles -f src/components/stencil-generated/post-components.css dist/"
   },
   "dependencies": {
     "@swisspost/design-system-components": "workspace:10.0.0-next.38"
@@ -37,6 +39,7 @@
     "@types/node": "22.10.5",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.5",
+    "copyfiles": "2.4.1",
     "eslint": "9.18.0",
     "eslint-plugin-react": "7.37.4",
     "globals": "16.0.0",
diff --git a/packages/components/.gitignore b/packages/components/.gitignore
index 525a40df67..07e6dfcf35 100644
--- a/packages/components/.gitignore
+++ b/packages/components/.gitignore
@@ -20,6 +20,7 @@ log.txt
 .sass-cache/
 .versions/
 node_modules/
+src/styles/generated/
 $RECYCLE.BIN/
 
 .DS_Store
diff --git a/packages/components/__snapshots__/prebuild.spec.ts.snap b/packages/components/__snapshots__/prebuild.spec.ts.snap
new file mode 100644
index 0000000000..c75021c36d
--- /dev/null
+++ b/packages/components/__snapshots__/prebuild.spec.ts.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`prebuild should read out component folders 1`] = `
+"$component-names: (
+  folder_name_with_different_notation,
+  post-123-component,
+  post-accordion,
+  post-avatar,
+  post-back-to-tlop,
+  post-breadcrumbs,
+  post-breadcrumbs-item,
+  some-other-folder
+);
+"
+`;
diff --git a/packages/components/eslint.config.mjs b/packages/components/eslint.config.mjs
index d40bb48f08..4f87b50441 100644
--- a/packages/components/eslint.config.mjs
+++ b/packages/components/eslint.config.mjs
@@ -19,7 +19,14 @@ const compatStencilCommunityRecommendedRules = fixupConfigRules(
 export default [
   {
     name: 'post/global/ignores',
-    ignores: ['dist/*', 'loader/*', 'loaders/*', 'www/*', 'stencil.config.ts'],
+    ignores: [
+      'prebuild.ts',
+      'dist/*',
+      'loader/*',
+      'loaders/*',
+      'www/*',
+      'stencil.config.ts',
+    ],
   },
   {
     name: 'post/defaults',
diff --git a/packages/components/package.json b/packages/components/package.json
index 469be21deb..fcffb9bc86 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -29,18 +29,24 @@
   "collection:main": "dist/collection/index.js",
   "unpkg": "dist/post-components/post-components.esm.js",
   "scripts": {
-    "play": "stencil build --dev --port 9200 --serve --watch --docs --docs-readme",
-    "start": "stencil build --dev --watch --docs --docs-readme",
-    "build": "pnpm clean && stencil build --docs-readme",
-    "clean": "rimraf dist hydrate loader loaders www ../components-react/src/components/stencil-generated/ ../components-angular/projects/components/src/lib/stencil-generated/",
+    "play": "pnpm prebuild:script && stencil build --dev --port 9200 --serve --watch --docs --docs-readme",
+    "start": "pnpm prebuild:script && stencil build --dev --watch --docs --docs-readme",
+    "prebuild": "pnpm clean && pnpm prebuild:script",
+    "build": "stencil build --docs-readme",
+    "postbuild": "pnpm copy:styles:components-react & pnpm copy:styles:components-angular",
+    "clean": "rimraf dist hydrate loader loaders www src/styles/generated ../components-react/src/components/stencil-generated/ ../components-angular/projects/components/src/lib/stencil-generated/",
     "unit": "stencil test --spec",
     "unit:watch": "stencil test --spec --watchAll --silent",
+    "unit:updatesnapshot": "stencil test --spec --updateSnapshot",
     "e2e": "cypress run --browser chrome",
     "e2e:watch": "cypress open",
     "e2e:ci": "xvfb-run -a cypress run --browser chrome",
     "lint": "eslint",
     "lint:fix": "eslint --fix",
-    "generate": "stencil generate"
+    "generate": "stencil generate",
+    "prebuild:script": "ts-node prebuild.ts",
+    "copy:styles:components-react": "copyfiles -f www/build/post-components.css ../components-react/src/components/stencil-generated/",
+    "copy:styles:components-angular": "copyfiles -f www/build/post-components.css ../components-angular/projects/components/src/lib/stencil-generated/"
   },
   "dependencies": {
     "@floating-ui/dom": "1.7.0",
@@ -62,20 +68,24 @@
     "@stencil/react-output-target": "0.5.3",
     "@stencil/sass": "3.0.12",
     "@types/jest": "29.5.14",
+    "@types/mock-fs": "4.13.4",
     "@types/node": "22.10.5",
     "@typescript-eslint/parser": "7.18.0",
     "bootstrap": "5.3.3",
+    "copyfiles": "2.4.1",
     "cypress": "14.3.2",
     "cypress-axe": "1.5.0",
     "cypress-storybook": "1.0.0",
     "eslint": "9.18.0",
     "eslint-plugin-react": "7.37.4",
     "globals": "16.0.0",
+    "mock-fs": "5.5.0",
     "rimraf": "6.0.1",
     "rollup-plugin-postcss": "4.0.2",
     "sass": "1.78.0",
     "throttle-debounce": "5.0.2",
     "ts-jest": "29.2.5",
+    "ts-node": "10.9.2",
     "typescript": "5.8.3",
     "typescript-eslint": "8.20.0",
     "eslint-plugin-cypress": "4.2.0"
diff --git a/packages/components/prebuild.spec.ts b/packages/components/prebuild.spec.ts
new file mode 100644
index 0000000000..76de55d8c0
--- /dev/null
+++ b/packages/components/prebuild.spec.ts
@@ -0,0 +1,31 @@
+import fs from 'fs';
+import mockFs from 'mock-fs';
+import { createComponentNamesScssMap } from './prebuild';
+
+describe('prebuild', () => {
+  it('should read out component folders', () => {
+    mockFs({
+      'src/components': {
+        'post-accordion': {},
+        'post-avatar': {},
+        'post-back-to-tlop': {},
+        'post-breadcrumbs': {},
+        'post-breadcrumbs-item': {},
+        'post-123-component': {},
+        'some-other-folder': {},
+        'folder_name_with_different_notation': {},
+      },
+      'src/styles/generated': {},
+    });
+
+    createComponentNamesScssMap();
+    const componentNamesScssMap = fs.readFileSync(
+      'src/styles/generated/component-names.scss',
+      'utf8',
+    );
+
+    mockFs.restore();
+
+    expect(componentNamesScssMap).toMatchSnapshot();
+  });
+});
diff --git a/packages/components/prebuild.ts b/packages/components/prebuild.ts
new file mode 100644
index 0000000000..295d5922fc
--- /dev/null
+++ b/packages/components/prebuild.ts
@@ -0,0 +1,35 @@
+import fs from 'fs';
+import path from 'path';
+
+export function createComponentNamesScssMap() {
+  // Define the source and output paths
+  const SOURCE_PATH: string[] = [path.resolve('src/components')];
+  const OUTPUT_PATH: string = path.resolve('src/styles/generated');
+
+  // Process component names
+  const webComponentNames: string[] = SOURCE_PATH.reduce((names: string[], srcPath: string) => {
+    if (fs.existsSync(srcPath)) {
+      const componentNames: string[] = fs.readdirSync(srcPath);
+      const camelCaseNames: string[] = componentNames.map((name: string) =>
+        name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase(),
+      );
+      names.push(...camelCaseNames);
+    }
+    return names;
+  }, []);
+
+  // Generate the SCSS output
+  const output: string = `$component-names: (\n  ${webComponentNames.join(',\n  ')}\n);\n`;
+
+  // Ensure the output directory exists
+  fs.mkdirSync(OUTPUT_PATH, { recursive: true });
+
+  // Write the SCSS file
+  fs.writeFileSync(`${OUTPUT_PATH}/component-names.scss`, output, 'utf8');
+}
+
+function prebuild() {
+  createComponentNamesScssMap();
+}
+
+prebuild();
diff --git a/packages/components/src/index.html b/packages/components/src/index.html
index bb66225e69..ea59018f9d 100644
--- a/packages/components/src/index.html
+++ b/packages/components/src/index.html
@@ -9,6 +9,7 @@
     <meta name="design-system-settings" data-post-icon-base="/assets/icons" />
     <title>Stencil Component Starter</title>
 
+    <link id="components-global-styles" rel="stylesheet" href="/build/post-components.css" />
     <link id="tokens" rel="stylesheet" href="/assets/css/post-tokens-default.css" />
     <link id="palette" rel="stylesheet" href="/assets/css/post-palettes.css" />
     <link rel="stylesheet" href="/assets/css/index.css" />
diff --git a/packages/components/src/styles/index.scss b/packages/components/src/styles/index.scss
new file mode 100644
index 0000000000..5e1fadc193
--- /dev/null
+++ b/packages/components/src/styles/index.scss
@@ -0,0 +1 @@
+@use './utilities/index.scss';
diff --git a/packages/components/src/styles/utilities/index.scss b/packages/components/src/styles/utilities/index.scss
new file mode 100644
index 0000000000..0825c59eea
--- /dev/null
+++ b/packages/components/src/styles/utilities/index.scss
@@ -0,0 +1 @@
+@use './not-defined.scss';
diff --git a/packages/components/src/styles/utilities/not-defined.scss b/packages/components/src/styles/utilities/not-defined.scss
new file mode 100644
index 0000000000..21236d341a
--- /dev/null
+++ b/packages/components/src/styles/utilities/not-defined.scss
@@ -0,0 +1,7 @@
+/* Components rendered on the client-side only, need to be invisible, as long as they match the css selector :not(:defined), so they are not showing up, before they got hydrated. */
+@use 'sass:list';
+@use '../generated/component-names' as *;
+
+:where(#{$component-names}):not([data-hydrated], :defined) {
+  visibility: hidden;
+}
diff --git a/packages/components/stencil.config.ts b/packages/components/stencil.config.ts
index 21ebebd277..b3c5e1464a 100644
--- a/packages/components/stencil.config.ts
+++ b/packages/components/stencil.config.ts
@@ -9,6 +9,7 @@ export const config: Config = {
   namespace: 'post-components',
   buildDist: true,
   sourceMap: false,
+  globalStyle: 'src/styles/index.scss',
   validatePrimaryPackageOutputTarget: true,
   hydratedFlag: {
     name: 'data-hydrated',
diff --git a/packages/components/tsconfig.eslint.json b/packages/components/tsconfig.eslint.json
index e7ad088bcd..348d5f7f33 100644
--- a/packages/components/tsconfig.eslint.json
+++ b/packages/components/tsconfig.eslint.json
@@ -3,5 +3,5 @@
   "compilerOptions": {
     "noEmit": true
   },
-  "include": [".config/*", "cypress", "src", "types"]
+  "include": ["prebuild.ts", "prebuild.spec.ts", ".config/*", "cypress", "src", "types"]
 }
diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json
index 542a1999df..32229cd9cf 100644
--- a/packages/components/tsconfig.json
+++ b/packages/components/tsconfig.json
@@ -1,5 +1,13 @@
 {
+  "ts-node": {
+    "compilerOptions": {
+      "module": "node16",
+      "moduleResolution": "node16"
+    },
+    "include": ["prebuild.ts"],
+  },
   "compilerOptions": {
+    "types": ["node", "jest", "mock-fs"],
     "paths": {
       "@/*": ["./src/*"],
       "@root/*": ["./*"]
@@ -20,6 +28,6 @@
     "resolveJsonModule": true,
     "skipLibCheck": true
   },
-  "include": [".config/*", "src", "types"],
+  "include": ["prebuild.ts", "prebuild.spec.ts", ".config/*", "src", "types"],
   "exclude": ["node_modules"]
 }
diff --git a/packages/documentation/.storybook/main.ts b/packages/documentation/.storybook/main.ts
index 40dacbc1a1..4feff7fe6e 100644
--- a/packages/documentation/.storybook/main.ts
+++ b/packages/documentation/.storybook/main.ts
@@ -66,6 +66,10 @@ const config: StorybookConfig = {
       from: '../node_modules/@swisspost/design-system-styles',
       to: '/styles',
     },
+    {
+      from: '../node_modules/@swisspost/design-system-components/www/build',
+      to: '/components',
+    },
     {
       from: '../node_modules/@swisspost/design-system-icons/public/post-icons',
       to: '/post-icons',
diff --git a/packages/documentation/.storybook/preview-head.html b/packages/documentation/.storybook/preview-head.html
index ac53a04d85..2e7f9cac76 100644
--- a/packages/documentation/.storybook/preview-head.html
+++ b/packages/documentation/.storybook/preview-head.html
@@ -9,6 +9,7 @@
 <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
 <link rel="manifest" href="/site.webmanifest" />
 <link rel="stylesheet" href="/styles/post-default.css" />
+<link rel="stylesheet" href="/components/post-components.css" />
 
 <meta name="design-system-settings" data-post-icon-base="/post-icons" />
 <meta
diff --git a/packages/documentation/src/stories/packages/components-angular/angular-app-css-global.sample.css b/packages/documentation/src/stories/packages/components-angular/angular-app-css-global.sample.css
new file mode 100644
index 0000000000..70e3d48c9d
--- /dev/null
+++ b/packages/documentation/src/stories/packages/components-angular/angular-app-css-global.sample.css
@@ -0,0 +1 @@
+@use '@swisspost/design-system-components-angular/post-components.css';
\ No newline at end of file
diff --git a/packages/documentation/src/stories/packages/components-angular/components-angular.docs.mdx b/packages/documentation/src/stories/packages/components-angular/components-angular.docs.mdx
index d4cd90d172..91b3a7cd27 100644
--- a/packages/documentation/src/stories/packages/components-angular/components-angular.docs.mdx
+++ b/packages/documentation/src/stories/packages/components-angular/components-angular.docs.mdx
@@ -2,6 +2,7 @@ import { Meta, Source } from '@storybook/blocks';
 import * as PackageStories from './components-angular.stories';
 import AngularAppModuleSample from './angular-app-module.sample.ts?raw';
 import AngularAppComponentSample from './angular-app-component.sample.html?raw';
+import SampleCssGlobal from './angular-app-css-global.sample.css?raw';
 import changelog from '@/../../components-angular/projects/components/CHANGELOG.md?raw';
 import PackageDocs from '@/shared/packages-docs-layout.mdx';
 
@@ -56,6 +57,13 @@ import PackageDocs from '@/shared/packages-docs-layout.mdx';
 
   ## Usage
 
+  Import the packages global styles. They are required for the components to work properly.
+
+  <Source
+    code={SampleCssGlobal}
+    language="scss"
+  />
+
   Importing the components to your project.
 
   <Source code={AngularAppModuleSample} language="typescript" />
diff --git a/packages/documentation/src/stories/packages/components-react/components-react.docs.mdx b/packages/documentation/src/stories/packages/components-react/components-react.docs.mdx
index da09c8c646..fcfdb82622 100644
--- a/packages/documentation/src/stories/packages/components-react/components-react.docs.mdx
+++ b/packages/documentation/src/stories/packages/components-react/components-react.docs.mdx
@@ -1,6 +1,7 @@
 import { Meta, Source } from '@storybook/blocks';
 import * as PackageStories from './components-react.stories';
 import ReactAppModuleSample from './react-app-module.sample.ts?raw';
+import SampleCssGlobal from './react-app-css-global.sample.css?raw';
 import changelog from '@/../../components-react/CHANGELOG.md?raw';
 import PackageDocs from '@/shared/packages-docs-layout.mdx';
 
@@ -42,6 +43,13 @@ import PackageDocs from '@/shared/packages-docs-layout.mdx';
 
 ## Usage
 
+Import the packages global styles. They are required for the components to work properly.
+
+<Source
+  code={SampleCssGlobal}
+  language="scss"
+/>
+
 Importing the components to your project.
 
 <Source code={ReactAppModuleSample} language="typescript" />
diff --git a/packages/documentation/src/stories/packages/components-react/react-app-css-global.sample.css b/packages/documentation/src/stories/packages/components-react/react-app-css-global.sample.css
new file mode 100644
index 0000000000..1ed6ae8353
--- /dev/null
+++ b/packages/documentation/src/stories/packages/components-react/react-app-css-global.sample.css
@@ -0,0 +1 @@
+@use '@swisspost/design-system-components-react/dist/post-components.css';
\ No newline at end of file
diff --git a/packages/documentation/src/stories/packages/components/components-css-global.sample.css b/packages/documentation/src/stories/packages/components/components-css-global.sample.css
new file mode 100644
index 0000000000..0bf7b2d4c4
--- /dev/null
+++ b/packages/documentation/src/stories/packages/components/components-css-global.sample.css
@@ -0,0 +1 @@
+@use '@swisspost/design-system-components/dist/post-components.css';
\ No newline at end of file
diff --git a/packages/documentation/src/stories/packages/components/components.docs.mdx b/packages/documentation/src/stories/packages/components/components.docs.mdx
index 88af868fe7..7e6ac5ccd3 100644
--- a/packages/documentation/src/stories/packages/components/components.docs.mdx
+++ b/packages/documentation/src/stories/packages/components/components.docs.mdx
@@ -5,6 +5,7 @@ import SampleCdnLazyLoadedAll from './components-cdn-lazy-loaded-all.sample.html
 import SampleCdnLazyLoadedSpecific from './components-cdn-lazy-loaded-specific.sample.html?raw';
 import SampleJsAll from './components-js-all.sample?raw';
 import SampleJsSpecific from './components-js-specific.sample?raw';
+import SampleCssGlobal from './components-css-global.sample.css?raw';
 import changelog from '@/../../components/CHANGELOG.md?raw';
 import PackageDocs from '@/shared/packages-docs-layout.mdx';
 
@@ -30,6 +31,13 @@ import PackageDocs from '@/shared/packages-docs-layout.mdx';
 
   ## Usage
 
+  Import the packages global styles. They are required for the components to work properly.
+
+  <Source
+    code={SampleCssGlobal}
+    language="scss"
+  />
+
   Import all or only specific components into your entry file (e.g. `main.js`, `app.js`, ...).
 
   <Source
diff --git a/packages/nextjs-integration/src/app/layout.tsx b/packages/nextjs-integration/src/app/layout.tsx
index de77763976..dd181b22b6 100644
--- a/packages/nextjs-integration/src/app/layout.tsx
+++ b/packages/nextjs-integration/src/app/layout.tsx
@@ -1,8 +1,10 @@
 import type { Metadata } from 'next';
-import '@swisspost/design-system-styles/index.scss';
 import HeaderSettingScript from './header-settings';
 import './internet-header';
 
+import '@swisspost/design-system-components-react/dist/post-components.css';
+import '@swisspost/design-system-styles/index.scss';
+
 export const metadata: Metadata = {
   title: 'Create Next App',
   description: 'Generated by create next app',
diff --git a/packages/styles/.gitignore b/packages/styles/.gitignore
index ac6035b0ab..a2a3d99d2d 100644
--- a/packages/styles/.gitignore
+++ b/packages/styles/.gitignore
@@ -9,7 +9,6 @@ npm-debug.log
 *.code-workspace
 stylelint-report.txt
 storybook-static
-src/utilities/_not-defined.scss
 src/utilities/_env-variables.scss
 
 # Mac OSX Finder files.
diff --git a/packages/styles/gulpfile.js b/packages/styles/gulpfile.js
index d8fc5ea930..01906e15f1 100644
--- a/packages/styles/gulpfile.js
+++ b/packages/styles/gulpfile.js
@@ -117,11 +117,7 @@ gulp.task('prebuild-env-vars', done => {
 
   const content = `$post-icon-version: '${version}';\n`;
 
-  fs.writeFileSync(
-    path.join(__dirname, 'src/utilities/_env-variables.scss'),
-    content,
-    'utf8'
-  );
+  fs.writeFileSync(path.join(__dirname, 'src/utilities/_env-variables.scss'), content, 'utf8');
 
   done();
 });
@@ -179,47 +175,6 @@ gulp.task(
   }),
 );
 
-/**
- * Get all available components names from the components package and add them to the scss file (packages\styles\src\utilities\_not-defined.scss) which sets initial visibility to hidden (for unregistered state).
- */
-
-gulp.task('generate-not-defined-components-scss', done => {
-  const filePath = path.join(__dirname, '../components/src/index.ts');
-  fs.readFile(filePath, 'utf8', (err, data) => {
-    if (err) {
-      done(err);
-      return;
-    }
-
-    const kebabCaseNames = Array.from(
-      data.matchAll(/export \{ (\w+) \} from/g),
-      m => '    ' + m[1].replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase(),
-    ).join(',\n');
-
-    const templatePath = path.join(__dirname, 'src/templates/_not-defined.template.scss');
-    fs.readFile(templatePath, 'utf8', (err, data) => {
-      if (err) {
-        console.error('Error reading template file:', err);
-        done(err);
-        return;
-      }
-      const result = data.replace('/* WEB_COMPONENT_NAMES */', kebabCaseNames);
-
-      const outputPath = path.join(__dirname, 'src/utilities/_not-defined.scss');
-      fs.writeFile(outputPath, result, 'utf8', err => {
-        if (err) {
-          console.error('Error writing output file:', err);
-          done(err);
-          return;
-        }
-
-        console.log('Output file generated successfully.');
-        done();
-      });
-    });
-  });
-});
-
 /**
  * Watch task for scss development
  */
@@ -238,14 +193,8 @@ exports.default = gulp.task(
   gulp.series(
     'prebuild-env-vars',
     gulp.parallel(
-      gulp.series(
-        'generate-not-defined-components-scss',
-        'map-icons',
-        'copy',
-        'autoprefixer',
-        'transform-package-json',
-      ),
+      gulp.series('map-icons', 'copy', 'autoprefixer', 'transform-package-json'),
       gulp.series('temporarily-copy-token-files', 'sass'),
-    )
+    ),
   ),
-);
\ No newline at end of file
+);
diff --git a/packages/styles/src/templates/_not-defined.template.scss b/packages/styles/src/templates/_not-defined.template.scss
deleted file mode 100644
index aa65d1ef3b..0000000000
--- a/packages/styles/src/templates/_not-defined.template.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-/*
-  Initial visibility of the components is set to hidden to prevent 'flickering' effect due to stencil js/scss delay.
-*/
-:where(
-    /* WEB_COMPONENT_NAMES */
-  ):not([data-hydrated]) {
-  visibility: hidden;
-}
diff --git a/packages/styles/src/utilities/index.scss b/packages/styles/src/utilities/index.scss
index 5da056c143..a3fe91fe92 100644
--- a/packages/styles/src/utilities/index.scss
+++ b/packages/styles/src/utilities/index.scss
@@ -6,7 +6,6 @@
 
 @use './mixins' as *;
 @use './variables' as *;
-@use './not-defined' as *;
 
 @each $breakpoint, $device-size in breakpoints.$grid-breakpoints {
   @include media.min($device-size) {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d35e404a61..2ded713ca7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -110,6 +110,9 @@ importers:
       '@types/jest':
         specifier: 29.5.14
         version: 29.5.14
+      '@types/mock-fs':
+        specifier: 4.13.4
+        version: 4.13.4
       '@types/node':
         specifier: 22.10.5
         version: 22.10.5
@@ -119,6 +122,9 @@ importers:
       bootstrap:
         specifier: 5.3.3
         version: 5.3.3(@popperjs/core@2.11.8)
+      copyfiles:
+        specifier: 2.4.1
+        version: 2.4.1
       cypress:
         specifier: 14.3.2
         version: 14.3.2
@@ -140,6 +146,9 @@ importers:
       globals:
         specifier: 16.0.0
         version: 16.0.0
+      mock-fs:
+        specifier: 5.5.0
+        version: 5.5.0
       rimraf:
         specifier: 6.0.1
         version: 6.0.1
@@ -155,6 +164,9 @@ importers:
       ts-jest:
         specifier: 29.2.5
         version: 29.2.5(@babel/core@7.26.9)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.9))(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(typescript@5.8.3)
+      ts-node:
+        specifier: 10.9.2
+        version: 10.9.2(@types/node@22.10.5)(typescript@5.8.3)
       typescript:
         specifier: 5.8.3
         version: 5.8.3
@@ -219,9 +231,15 @@ importers:
       '@eslint/js':
         specifier: 9.18.0
         version: 9.18.0
+      '@swisspost/design-system-components-angular':
+        specifier: workspace:10.0.0-next.38
+        version: link:dist/components
       angular-eslint:
         specifier: 19.1.0
         version: 19.1.0(chokidar@4.0.1)(eslint@9.18.0(jiti@2.4.2))(typescript-eslint@8.16.0(eslint@9.18.0(jiti@2.4.2))(typescript@5.8.3))(typescript@5.8.3)
+      copyfiles:
+        specifier: 2.4.1
+        version: 2.4.1
       cypress:
         specifier: 14.3.2
         version: 14.3.2
@@ -299,6 +317,9 @@ importers:
       '@types/react-dom':
         specifier: 18.3.5
         version: 18.3.5(@types/react@18.3.3)
+      copyfiles:
+        specifier: 2.4.1
+        version: 2.4.1
       eslint:
         specifier: 9.18.0
         version: 9.18.0(jiti@2.4.2)
@@ -4892,11 +4913,6 @@ packages:
     engines: {node: '>=0.4.0'}
     hasBin: true
 
-  acorn@8.11.3:
-    resolution: {integrity: sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==}
-    engines: {node: '>=0.4.0'}
-    hasBin: true
-
   acorn@8.14.0:
     resolution: {integrity: sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==}
     engines: {node: '>=0.4.0'}
@@ -11846,7 +11862,7 @@ snapshots:
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@angular-devkit/architect': 0.1902.0(chokidar@4.0.1)
-      '@angular-devkit/build-webpack': 0.1902.0(chokidar@4.0.1)(webpack-dev-server@5.2.0(webpack@5.98.0))(webpack@5.98.0(esbuild@0.25.0))
+      '@angular-devkit/build-webpack': 0.1902.0(chokidar@4.0.1)(webpack-dev-server@5.2.0(webpack@5.98.0(esbuild@0.25.0)))(webpack@5.98.0(esbuild@0.25.0))
       '@angular-devkit/core': 19.2.0(chokidar@4.0.1)
       '@angular/build': 19.2.0(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.1)(zone.js@0.15.0)))(typescript@5.8.3))(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.1)(zone.js@0.15.0)))(@types/node@22.10.5)(chokidar@4.0.1)(jiti@2.4.2)(karma@6.4.4)(less@4.2.2)(ng-packagr@19.2.0(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.1)(zone.js@0.15.0)))(typescript@5.8.3))(tailwindcss@3.4.17(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(tslib@2.8.1)(typescript@5.8.3))(postcss@8.5.2)(sass-embedded@1.81.0)(tailwindcss@3.4.17(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(terser@5.39.0)(typescript@5.8.3)(yaml@2.7.0)
       '@angular/compiler-cli': 19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.1)(zone.js@0.15.0)))(typescript@5.8.3)
@@ -11897,8 +11913,8 @@ snapshots:
       tslib: 2.8.1
       typescript: 5.8.3
       webpack: 5.98.0(esbuild@0.25.0)
-      webpack-dev-middleware: 7.4.2(webpack@5.98.0)
-      webpack-dev-server: 5.2.0(webpack@5.98.0)
+      webpack-dev-middleware: 7.4.2(webpack@5.98.0(esbuild@0.25.0))
+      webpack-dev-server: 5.2.0(webpack@5.98.0(esbuild@0.25.0))
       webpack-merge: 6.0.1
       webpack-subresource-integrity: 5.1.0(webpack@5.98.0(esbuild@0.25.0))
     optionalDependencies:
@@ -11935,7 +11951,7 @@ snapshots:
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@angular-devkit/architect': 0.1902.0(chokidar@4.0.1)
-      '@angular-devkit/build-webpack': 0.1902.0(chokidar@4.0.1)(webpack-dev-server@5.2.0(webpack@5.98.0))(webpack@5.98.0(esbuild@0.25.0))
+      '@angular-devkit/build-webpack': 0.1902.0(chokidar@4.0.1)(webpack-dev-server@5.2.0(webpack@5.98.0(esbuild@0.25.0)))(webpack@5.98.0(esbuild@0.25.0))
       '@angular-devkit/core': 19.2.0(chokidar@4.0.1)
       '@angular/build': 19.2.0(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.1)(zone.js@0.15.0)))(typescript@5.8.3))(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.1)(zone.js@0.15.0)))(@types/node@22.10.5)(chokidar@4.0.1)(jiti@2.4.2)(karma@6.4.4)(less@4.2.2)(ng-packagr@19.2.0(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.1)(zone.js@0.15.0)))(typescript@5.8.3))(tailwindcss@3.4.17(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(tslib@2.8.1)(typescript@5.8.3))(postcss@8.5.2)(sass-embedded@1.81.0)(tailwindcss@3.4.17(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(terser@5.39.0)(typescript@5.8.3)(yaml@2.7.0)
       '@angular/compiler-cli': 19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.1)(zone.js@0.15.0)))(typescript@5.8.3)
@@ -11986,8 +12002,8 @@ snapshots:
       tslib: 2.8.1
       typescript: 5.8.3
       webpack: 5.98.0(esbuild@0.25.0)
-      webpack-dev-middleware: 7.4.2(webpack@5.98.0)
-      webpack-dev-server: 5.2.0(webpack@5.98.0)
+      webpack-dev-middleware: 7.4.2(webpack@5.98.0(esbuild@0.25.0))
+      webpack-dev-server: 5.2.0(webpack@5.98.0(esbuild@0.25.0))
       webpack-merge: 6.0.1
       webpack-subresource-integrity: 5.1.0(webpack@5.98.0(esbuild@0.25.0))
     optionalDependencies:
@@ -12020,12 +12036,12 @@ snapshots:
       - webpack-cli
       - yaml
 
-  '@angular-devkit/build-webpack@0.1902.0(chokidar@4.0.1)(webpack-dev-server@5.2.0(webpack@5.98.0))(webpack@5.98.0(esbuild@0.25.0))':
+  '@angular-devkit/build-webpack@0.1902.0(chokidar@4.0.1)(webpack-dev-server@5.2.0(webpack@5.98.0(esbuild@0.25.0)))(webpack@5.98.0(esbuild@0.25.0))':
     dependencies:
       '@angular-devkit/architect': 0.1902.0(chokidar@4.0.1)
       rxjs: 7.8.1
       webpack: 5.98.0(esbuild@0.25.0)
-      webpack-dev-server: 5.2.0(webpack@5.98.0)
+      webpack-dev-server: 5.2.0(webpack@5.98.0(esbuild@0.25.0))
     transitivePeerDependencies:
       - chokidar
 
@@ -16213,8 +16229,6 @@ snapshots:
 
   acorn@6.4.2: {}
 
-  acorn@8.11.3: {}
-
   acorn@8.14.0: {}
 
   adjust-sourcemap-loader@4.0.0:
@@ -19962,7 +19976,7 @@ snapshots:
   jsdom@20.0.3:
     dependencies:
       abab: 2.0.6
-      acorn: 8.11.3
+      acorn: 8.14.0
       acorn-globals: 7.0.1
       cssom: 0.5.0
       cssstyle: 2.3.0
@@ -23736,7 +23750,7 @@ snapshots:
       '@tsconfig/node14': 1.0.3
       '@tsconfig/node16': 1.0.4
       '@types/node': 22.10.5
-      acorn: 8.11.3
+      acorn: 8.14.0
       acorn-walk: 8.2.0
       arg: 4.1.3
       create-require: 1.1.1
@@ -24274,7 +24288,7 @@ snapshots:
 
   webidl-conversions@7.0.0: {}
 
-  webpack-dev-middleware@7.4.2(webpack@5.98.0):
+  webpack-dev-middleware@7.4.2(webpack@5.98.0(esbuild@0.25.0)):
     dependencies:
       colorette: 2.0.20
       memfs: 4.9.3
@@ -24285,7 +24299,7 @@ snapshots:
     optionalDependencies:
       webpack: 5.98.0(esbuild@0.25.0)
 
-  webpack-dev-server@5.2.0(webpack@5.98.0):
+  webpack-dev-server@5.2.0(webpack@5.98.0(esbuild@0.25.0)):
     dependencies:
       '@types/bonjour': 3.5.13
       '@types/connect-history-api-fallback': 1.5.4
@@ -24312,7 +24326,7 @@ snapshots:
       serve-index: 1.9.1
       sockjs: 0.3.24
       spdy: 4.0.2
-      webpack-dev-middleware: 7.4.2(webpack@5.98.0)
+      webpack-dev-middleware: 7.4.2(webpack@5.98.0(esbuild@0.25.0))
       ws: 8.18.0
     optionalDependencies:
       webpack: 5.98.0(esbuild@0.25.0)

From d3e3b68fe2b50214091877e38952861ebae2be2c Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Wed, 11 Jun 2025 13:49:20 +0200
Subject: [PATCH 09/26] chore(deps): update actions/checkout digest to 09d2aca
 (#5608)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This PR contains the following updates:

| Package | Type | Update | Change |
|---|---|---|---|
| actions/checkout | action | digest | `85e6279` -> `09d2aca` |

---

> [!WARNING]
> Some dependencies could not be looked up. Check the Dependency
Dashboard for more information.

---

### Configuration

📅 **Schedule**: Branch creation - "before 4am on the first day of the
month" in timezone Europe/Zurich, Automerge - At any time (no schedule
defined).

🚦 **Automerge**: Disabled by config. Please merge this manually once you
are satisfied.

♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the
rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about this update
again.

---

- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check
this box

---

This PR was generated by [Mend Renovate](https://mend.io/renovate/).
View the [repository job
log](https://developer.mend.io/github/swisspost/design-system).

<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0MC40OC41IiwidXBkYXRlZEluVmVyIjoiNDAuNDguNSIsInRhcmdldEJyYW5jaCI6Im1haW4iLCJsYWJlbHMiOlsi4puT77iPIGRlcGVuZGVuY2llcyJdfQ==-->

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 .github/workflows/build-documentation.yaml   |  2 +-
 .github/workflows/build-tokens.yaml          |  2 +-
 .github/workflows/create-token-pr.yaml       |  2 +-
 .github/workflows/deploy-demo.yaml           |  2 +-
 .github/workflows/deploy-documentation.yaml  |  2 +-
 .github/workflows/dry-run-publish.yaml       |  2 +-
 .github/workflows/e2e-tests.yaml             |  2 +-
 .github/workflows/fetch-icons-v8.yaml        |  2 +-
 .github/workflows/fetch-icons.yaml           |  2 +-
 .github/workflows/lint.yaml                  |  2 +-
 .github/workflows/release-documentation.yaml |  4 ++--
 .github/workflows/release.yaml               | 12 ++++++------
 .github/workflows/snapshot-tests.yaml        |  2 +-
 .github/workflows/sonar-analysis.yaml        |  2 +-
 .github/workflows/unit-tests.yaml            |  2 +-
 15 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/.github/workflows/build-documentation.yaml b/.github/workflows/build-documentation.yaml
index 2cf37f02e9..34916b8188 100644
--- a/.github/workflows/build-documentation.yaml
+++ b/.github/workflows/build-documentation.yaml
@@ -26,7 +26,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@85e6279cec87321a52edac9c87bce653a07cf6c2
+        uses: actions/checkout@09d2acae674a48949e3602304ab46fd20ae0c42f
 
       - name: Setup
         uses: ./.github/actions/setup-pnpm
diff --git a/.github/workflows/build-tokens.yaml b/.github/workflows/build-tokens.yaml
index b156ad7097..d5642d88da 100644
--- a/.github/workflows/build-tokens.yaml
+++ b/.github/workflows/build-tokens.yaml
@@ -14,7 +14,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@85e6279cec87321a52edac9c87bce653a07cf6c2
+        uses: actions/checkout@09d2acae674a48949e3602304ab46fd20ae0c42f
 
       - name: Setup
         uses: ./.github/actions/setup-pnpm
diff --git a/.github/workflows/create-token-pr.yaml b/.github/workflows/create-token-pr.yaml
index 973db9a2ed..4309074a8e 100644
--- a/.github/workflows/create-token-pr.yaml
+++ b/.github/workflows/create-token-pr.yaml
@@ -20,7 +20,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@85e6279cec87321a52edac9c87bce653a07cf6c2
+        uses: actions/checkout@09d2acae674a48949e3602304ab46fd20ae0c42f
         with:
           fetch-depth: 0
           token: ${{ secrets.SWISSPOSTDEVS_ACCESS_TOKEN }}
diff --git a/.github/workflows/deploy-demo.yaml b/.github/workflows/deploy-demo.yaml
index 3ae088a4c5..a9b391f792 100644
--- a/.github/workflows/deploy-demo.yaml
+++ b/.github/workflows/deploy-demo.yaml
@@ -25,7 +25,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@85e6279cec87321a52edac9c87bce653a07cf6c2
+        uses: actions/checkout@09d2acae674a48949e3602304ab46fd20ae0c42f
         with:
           ref: ${{ github.event.workflow_run.head_branch }}
 
diff --git a/.github/workflows/deploy-documentation.yaml b/.github/workflows/deploy-documentation.yaml
index 9227cb4442..8ff01ba42a 100644
--- a/.github/workflows/deploy-documentation.yaml
+++ b/.github/workflows/deploy-documentation.yaml
@@ -16,7 +16,7 @@ jobs:
     if: ${{ github.event.workflow_run.event == 'pull_request' && github.event.workflow_run.conclusion == 'success' }}
     steps:
       - name: Checkout
-        uses: actions/checkout@85e6279cec87321a52edac9c87bce653a07cf6c2
+        uses: actions/checkout@09d2acae674a48949e3602304ab46fd20ae0c42f
 
       - name: Setup pnpm & node
         uses: ./.github/actions/setup-pnpm
diff --git a/.github/workflows/dry-run-publish.yaml b/.github/workflows/dry-run-publish.yaml
index 3e0df4d60a..089d1e67e7 100644
--- a/.github/workflows/dry-run-publish.yaml
+++ b/.github/workflows/dry-run-publish.yaml
@@ -14,7 +14,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout branch
-        uses: actions/checkout@85e6279cec87321a52edac9c87bce653a07cf6c2
+        uses: actions/checkout@09d2acae674a48949e3602304ab46fd20ae0c42f
 
       - name: Setup Node & pnpm
         uses: ./.github/actions/setup-pnpm
diff --git a/.github/workflows/e2e-tests.yaml b/.github/workflows/e2e-tests.yaml
index 3501a8d06f..8e4a16d75b 100644
--- a/.github/workflows/e2e-tests.yaml
+++ b/.github/workflows/e2e-tests.yaml
@@ -19,7 +19,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@85e6279cec87321a52edac9c87bce653a07cf6c2
+        uses: actions/checkout@09d2acae674a48949e3602304ab46fd20ae0c42f
         with:
           fetch-depth: 0
 
diff --git a/.github/workflows/fetch-icons-v8.yaml b/.github/workflows/fetch-icons-v8.yaml
index 22c2aa6806..c13a6c9379 100644
--- a/.github/workflows/fetch-icons-v8.yaml
+++ b/.github/workflows/fetch-icons-v8.yaml
@@ -36,7 +36,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@85e6279cec87321a52edac9c87bce653a07cf6c2
+        uses: actions/checkout@09d2acae674a48949e3602304ab46fd20ae0c42f
         with:
           fetch-depth: 0
 
diff --git a/.github/workflows/fetch-icons.yaml b/.github/workflows/fetch-icons.yaml
index 71e24cbc2e..4eee525cd8 100644
--- a/.github/workflows/fetch-icons.yaml
+++ b/.github/workflows/fetch-icons.yaml
@@ -36,7 +36,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@85e6279cec87321a52edac9c87bce653a07cf6c2
+        uses: actions/checkout@09d2acae674a48949e3602304ab46fd20ae0c42f
         with:
           fetch-depth: 0
 
diff --git a/.github/workflows/lint.yaml b/.github/workflows/lint.yaml
index f82888b59b..202eb8e86d 100644
--- a/.github/workflows/lint.yaml
+++ b/.github/workflows/lint.yaml
@@ -17,7 +17,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@85e6279cec87321a52edac9c87bce653a07cf6c2
+        uses: actions/checkout@09d2acae674a48949e3602304ab46fd20ae0c42f
         with:
           fetch-depth: 0
 
diff --git a/.github/workflows/release-documentation.yaml b/.github/workflows/release-documentation.yaml
index 30cb280e30..dc718d452c 100644
--- a/.github/workflows/release-documentation.yaml
+++ b/.github/workflows/release-documentation.yaml
@@ -20,7 +20,7 @@ jobs:
       changed: ${{ steps.check.outputs.changed }}
     steps:
       - name: Checkout
-        uses: actions/checkout@85e6279cec87321a52edac9c87bce653a07cf6c2
+        uses: actions/checkout@09d2acae674a48949e3602304ab46fd20ae0c42f
 
       - name: Detect Version Change
         id: check
@@ -49,7 +49,7 @@ jobs:
     if: needs.detect-version-change.outputs.changed == 'true'
     steps:
       - name: Checkout
-        uses: actions/checkout@85e6279cec87321a52edac9c87bce653a07cf6c2
+        uses: actions/checkout@09d2acae674a48949e3602304ab46fd20ae0c42f
 
       - name: Setup pnpm & node
         uses: ./.github/actions/setup-pnpm
diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml
index ec9fc209a4..78912e3efb 100644
--- a/.github/workflows/release.yaml
+++ b/.github/workflows/release.yaml
@@ -19,7 +19,7 @@ jobs:
     steps:
       # Checkout the Branch which was pushed ('main' or 'release/v*')
       - name: Checkout
-        uses: actions/checkout@85e6279cec87321a52edac9c87bce653a07cf6c2
+        uses: actions/checkout@09d2acae674a48949e3602304ab46fd20ae0c42f
 
       - name: Setup Node & pnpm
         uses: ./.github/actions/setup-pnpm
@@ -81,7 +81,7 @@ jobs:
     steps:
       # Checkout the Branch which has been pushed ('main' or 'release/v*')
       - name: Checkout
-        uses: actions/checkout@85e6279cec87321a52edac9c87bce653a07cf6c2
+        uses: actions/checkout@09d2acae674a48949e3602304ab46fd20ae0c42f
 
       - name: Setup Node & pnpm
         uses: ./.github/actions/setup-pnpm
@@ -166,7 +166,7 @@ jobs:
 
       - name: Checkout previous Major Version
         if: fromJSON(steps.release-data-pre.outputs.result).isMajor == true
-        uses: actions/checkout@85e6279cec87321a52edac9c87bce653a07cf6c2
+        uses: actions/checkout@09d2acae674a48949e3602304ab46fd20ae0c42f
         with:
           ref: ${{ steps.release-branch-exists.outputs.exists == 'true' && fromJSON(steps.release-data-pre.outputs.result).branchName || steps.previous-major-version.outputs.tagName }}
 
@@ -234,7 +234,7 @@ jobs:
     steps:
       # Checkout the changeset Branch
       - name: Checkout
-        uses: actions/checkout@85e6279cec87321a52edac9c87bce653a07cf6c2
+        uses: actions/checkout@09d2acae674a48949e3602304ab46fd20ae0c42f
         with:
           token: ${{ secrets.SWISSPOSTDEVS_ACCESS_TOKEN }}
           ref: changeset-release/main
@@ -344,7 +344,7 @@ jobs:
     steps:
       # Checkout the commit with the release.old.version tag (e.g. @swisspost/design-system-styles@5.3.2)
       - name: Checkout
-        uses: actions/checkout@85e6279cec87321a52edac9c87bce653a07cf6c2
+        uses: actions/checkout@09d2acae674a48949e3602304ab46fd20ae0c42f
         with:
           token: ${{ secrets.SWISSPOSTDEVS_ACCESS_TOKEN }}
           ref: ${{ fromJSON(needs.collect-release-data.outputs.release-data).tagName }}
@@ -476,7 +476,7 @@ jobs:
     if: github.ref_name == 'main' && (needs.collect-release-data.outputs.release-branch-exists == 'true' || needs.collect-release-data.outputs.release-changeset-branch-exists == 'true') && fromJSON(needs.collect-release-data.outputs.release-data) != null && fromJSON(needs.collect-release-data.outputs.release-data).isMajor == false
     steps:
       - name: Checkout
-        uses: actions/checkout@85e6279cec87321a52edac9c87bce653a07cf6c2
+        uses: actions/checkout@09d2acae674a48949e3602304ab46fd20ae0c42f
         with:
           token: ${{ secrets.SWISSPOSTDEVS_ACCESS_TOKEN }}
 
diff --git a/.github/workflows/snapshot-tests.yaml b/.github/workflows/snapshot-tests.yaml
index 8cddb978d7..0a01089311 100644
--- a/.github/workflows/snapshot-tests.yaml
+++ b/.github/workflows/snapshot-tests.yaml
@@ -19,7 +19,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@85e6279cec87321a52edac9c87bce653a07cf6c2
+        uses: actions/checkout@09d2acae674a48949e3602304ab46fd20ae0c42f
         with:
           fetch-depth: 0
 
diff --git a/.github/workflows/sonar-analysis.yaml b/.github/workflows/sonar-analysis.yaml
index 33dd0998c8..1e0b976f1c 100644
--- a/.github/workflows/sonar-analysis.yaml
+++ b/.github/workflows/sonar-analysis.yaml
@@ -25,7 +25,7 @@ jobs:
     name: SonarCloud
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@85e6279cec87321a52edac9c87bce653a07cf6c2
+      - uses: actions/checkout@09d2acae674a48949e3602304ab46fd20ae0c42f
         with:
           fetch-depth: 0 # Shallow clones should be disabled for a better relevancy of analysis
 
diff --git a/.github/workflows/unit-tests.yaml b/.github/workflows/unit-tests.yaml
index dde7a98f6c..b6d17cee04 100644
--- a/.github/workflows/unit-tests.yaml
+++ b/.github/workflows/unit-tests.yaml
@@ -18,7 +18,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@85e6279cec87321a52edac9c87bce653a07cf6c2
+        uses: actions/checkout@09d2acae674a48949e3602304ab46fd20ae0c42f
         with:
           fetch-depth: 0
 

From 5fbf233365f716dec3812be1a08900cb26d331a9 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Wed, 11 Jun 2025 13:50:46 +0200
Subject: [PATCH 10/26] chore(deps): update changesets/action digest to 04d574e
 (#5610)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This PR contains the following updates:

| Package | Type | Update | Change |
|---|---|---|---|
| changesets/action | action | digest | `06245a4` -> `04d574e` |

---

> [!WARNING]
> Some dependencies could not be looked up. Check the Dependency
Dashboard for more information.

---

### Configuration

📅 **Schedule**: Branch creation - "before 4am on the first day of the
month" in timezone Europe/Zurich, Automerge - At any time (no schedule
defined).

🚦 **Automerge**: Disabled by config. Please merge this manually once you
are satisfied.

♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the
rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about this update
again.

---

- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check
this box

---

This PR was generated by [Mend Renovate](https://mend.io/renovate/).
View the [repository job
log](https://developer.mend.io/github/swisspost/design-system).

<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0MC40OC41IiwidXBkYXRlZEluVmVyIjoiNDAuNDguNSIsInRhcmdldEJyYW5jaCI6Im1haW4iLCJsYWJlbHMiOlsi4puT77iPIGRlcGVuZGVuY2llcyJdfQ==-->

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 .github/workflows/release.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml
index 78912e3efb..7d83c38abd 100644
--- a/.github/workflows/release.yaml
+++ b/.github/workflows/release.yaml
@@ -39,7 +39,7 @@ jobs:
       #  - no new changesets (the preview PR got merged into github.ref branch): publish packages
       - name: Changeset Magic
         id: changesets
-        uses: changesets/action@06245a4e0a36c064a573d4150030f5ec548e4fcc
+        uses: changesets/action@04d574e831923498156e0b2b93152878063203a3
         env:
           GITHUB_TOKEN: ${{ secrets.SWISSPOSTDEVS_ACCESS_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

From 8d726e22ff78b51319f786f8dc762c01d8ccbd89 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Wed, 11 Jun 2025 13:51:15 +0200
Subject: [PATCH 11/26] chore(deps): update dawidd6/action-download-artifact
 digest to 9b54a0a (#5611)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This PR contains the following updates:

| Package | Type | Update | Change |
|---|---|---|---|
| dawidd6/action-download-artifact | action | digest | `07ab29f` ->
`9b54a0a` |

---

> [!WARNING]
> Some dependencies could not be looked up. Check the Dependency
Dashboard for more information.

---

### Configuration

📅 **Schedule**: Branch creation - "before 4am on the first day of the
month" in timezone Europe/Zurich, Automerge - At any time (no schedule
defined).

🚦 **Automerge**: Disabled by config. Please merge this manually once you
are satisfied.

♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the
rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about this update
again.

---

- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check
this box

---

This PR was generated by [Mend Renovate](https://mend.io/renovate/).
View the [repository job
log](https://developer.mend.io/github/swisspost/design-system).

<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0MC40OC41IiwidXBkYXRlZEluVmVyIjoiNDAuNDguNSIsInRhcmdldEJyYW5jaCI6Im1haW4iLCJsYWJlbHMiOlsi4puT77iPIGRlcGVuZGVuY2llcyJdfQ==-->

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 .github/actions/artifact-download/action.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/actions/artifact-download/action.yaml b/.github/actions/artifact-download/action.yaml
index 848cfdfdf3..fd42bda095 100644
--- a/.github/actions/artifact-download/action.yaml
+++ b/.github/actions/artifact-download/action.yaml
@@ -36,7 +36,7 @@ runs:
       run: mkdir -p ${{ runner.temp }}/artifact_download
 
     - name: Download artifact
-      uses: dawidd6/action-download-artifact@07ab29fd4a977ae4d2b275087cf67563dfdf0295
+      uses: dawidd6/action-download-artifact@9b54a0a70c3d482a3d96da8a2f9fc08d0209c9ae
       with:
         name: ${{ inputs.name }}
         run_id: ${{ github.event.workflow_run.id }}

From 76543d2219651989c8abb9a288f437af8568de15 Mon Sep 17 00:00:00 2001
From: Alona Zherdetska <138328641+alionazherdetska@users.noreply.github.com>
Date: Wed, 11 Jun 2025 14:07:02 +0200
Subject: [PATCH 12/26] fix(styles): fixed `post-tooltip` text overflow by
 implementing proper word wrapping and updating width constraints (#5544)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 📄 Description

- Updated `max-width` from 200px to 280px for better content
accommodation
- Implemented proper word breaking for content that exceeds container
width

---

## 📝 Checklist

- ✅ My code follows the style guidelines of this project
- 🛠️ I have performed a self-review of my own code
- 📄 I have made corresponding changes to the documentation
- ⚠️ My changes generate no new warnings or errors
- 🧪 I have added tests that prove my fix is effective or that my feature
works
- ✔️ New and existing unit tests pass locally with my changes

Co-authored-by: Alona <alona.zherdetska@post.ch>
---
 .changeset/angry-trams-stick.md                              | 5 +++++
 .../components/src/components/post-tooltip/post-tooltip.scss | 4 +++-
 2 files changed, 8 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/angry-trams-stick.md

diff --git a/.changeset/angry-trams-stick.md b/.changeset/angry-trams-stick.md
new file mode 100644
index 0000000000..ba86cfae58
--- /dev/null
+++ b/.changeset/angry-trams-stick.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Fixed `post-tooltip` text overflow by implementing proper word wrapping and updating width constraints. Tooltips now break correctly within a maximum width of 280px, preventing text from bleeding outside container boundaries.
diff --git a/packages/components/src/components/post-tooltip/post-tooltip.scss b/packages/components/src/components/post-tooltip/post-tooltip.scss
index 6341410aca..2a3cf12b05 100644
--- a/packages/components/src/components/post-tooltip/post-tooltip.scss
+++ b/packages/components/src/components/post-tooltip/post-tooltip.scss
@@ -29,7 +29,9 @@ post-popovercontainer {
 
   & > div {
     padding: tokens.get('utility-gap-4') tokens.get('utility-gap-8');
-    max-width: 200px;
+    max-width: 280px;
     min-height: 32px;
+    word-wrap: break-word;
+    white-space: normal;
   }
 }

From 3e0398eb052cd9c7649dfcddb3286c70ee2e6270 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Wed, 11 Jun 2025 14:59:43 +0200
Subject: [PATCH 13/26] chore(deps): update actions/github-script digest to
 f28e40c (#5559)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Oliver Schürch <oliver.schuerch@post.ch>
---
 .../preview/message/create/action.yaml        |  2 +-
 .../preview/message/update/action.yaml        |  2 +-
 .github/actions/setup-pnpm/action.yaml        |  2 +-
 .github/workflows/deploy-documentation.yaml   |  4 ++--
 .github/workflows/fetch-icons.yaml            |  6 ++---
 .github/workflows/release-documentation.yaml  |  6 ++---
 .github/workflows/release.yaml                | 24 +++++++++----------
 .github/workflows/sonar-analysis.yaml         |  2 +-
 8 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/.github/actions/preview/message/create/action.yaml b/.github/actions/preview/message/create/action.yaml
index 0ae0241933..88cb2dd4c7 100644
--- a/.github/actions/preview/message/create/action.yaml
+++ b/.github/actions/preview/message/create/action.yaml
@@ -12,7 +12,7 @@ inputs:
 runs:
   using: composite
   steps:
-    - uses: actions/github-script@e7aeb8c663f696059ebb5f9ab1425ed2ef511bdb
+    - uses: actions/github-script@f28e40c7f34bde8b3046d885e986cb6290c5673b
       env:
         ISSUE_NUMBER: ${{ inputs.issue-number }}
       with:
diff --git a/.github/actions/preview/message/update/action.yaml b/.github/actions/preview/message/update/action.yaml
index 29b53ed313..10fc428a84 100644
--- a/.github/actions/preview/message/update/action.yaml
+++ b/.github/actions/preview/message/update/action.yaml
@@ -15,7 +15,7 @@ inputs:
 runs:
   using: composite
   steps:
-    - uses: actions/github-script@e7aeb8c663f696059ebb5f9ab1425ed2ef511bdb
+    - uses: actions/github-script@f28e40c7f34bde8b3046d885e986cb6290c5673b
       env:
         ISSUE_NUMBER: ${{ inputs.issue-number }}
         PREVIEW_URL: ${{ inputs.preview-url }}
diff --git a/.github/actions/setup-pnpm/action.yaml b/.github/actions/setup-pnpm/action.yaml
index bc7ff5dbf9..c5660d55a0 100644
--- a/.github/actions/setup-pnpm/action.yaml
+++ b/.github/actions/setup-pnpm/action.yaml
@@ -31,7 +31,7 @@ runs:
   steps:
     - name: Detect wanted version
       id: wanted-versions
-      uses: actions/github-script@e7aeb8c663f696059ebb5f9ab1425ed2ef511bdb
+      uses: actions/github-script@f28e40c7f34bde8b3046d885e986cb6290c5673b
       with:
         script: |
           const fs = require('fs')
diff --git a/.github/workflows/deploy-documentation.yaml b/.github/workflows/deploy-documentation.yaml
index 8ff01ba42a..a448454847 100644
--- a/.github/workflows/deploy-documentation.yaml
+++ b/.github/workflows/deploy-documentation.yaml
@@ -39,7 +39,7 @@ jobs:
 
       - name: Get netlify config
         id: netlify-config
-        uses: actions/github-script@e7aeb8c663f696059ebb5f9ab1425ed2ef511bdb
+        uses: actions/github-script@f28e40c7f34bde8b3046d885e986cb6290c5673b
         with:
           script: |
             const fs = require('fs')
@@ -68,7 +68,7 @@ jobs:
 
       - name: Create Summary
         id: summary
-        uses: actions/github-script@e7aeb8c663f696059ebb5f9ab1425ed2ef511bdb
+        uses: actions/github-script@f28e40c7f34bde8b3046d885e986cb6290c5673b
         with:
           script: |
             return `# Deployed Documentation Preview
diff --git a/.github/workflows/fetch-icons.yaml b/.github/workflows/fetch-icons.yaml
index 4eee525cd8..c3ddc73552 100644
--- a/.github/workflows/fetch-icons.yaml
+++ b/.github/workflows/fetch-icons.yaml
@@ -91,7 +91,7 @@ jobs:
 
       - name: Get Changed Icons
         id: changed-icons
-        uses: actions/github-script@e7aeb8c663f696059ebb5f9ab1425ed2ef511bdb
+        uses: actions/github-script@f28e40c7f34bde8b3046d885e986cb6290c5673b
         env:
           ADDED_FILES: ${{ steps.changed-files.outputs.added_files }}
           MODIFIED_FILES: ${{ steps.changed-files.outputs.modified_files }}
@@ -105,7 +105,7 @@ jobs:
 
       - name: Create Changeset
         if: steps.changed-files.outputs.any_modified != 'false'
-        uses: actions/github-script@e7aeb8c663f696059ebb5f9ab1425ed2ef511bdb
+        uses: actions/github-script@f28e40c7f34bde8b3046d885e986cb6290c5673b
         env:
           DATE: ${{ steps.current-date.outputs.date }}
           ICON_CHANGES: ${{ steps.changed-icons.outputs.result }}
@@ -124,7 +124,7 @@ jobs:
       - name: Write PR Body
         id: pr-body
         if: steps.changed-files.outputs.any_modified != 'false'
-        uses: actions/github-script@e7aeb8c663f696059ebb5f9ab1425ed2ef511bdb
+        uses: actions/github-script@f28e40c7f34bde8b3046d885e986cb6290c5673b
         env:
           PR_BODY_FILE: pr-body.md
           ICON_CHANGES: ${{ steps.changed-icons.outputs.result }}
diff --git a/.github/workflows/release-documentation.yaml b/.github/workflows/release-documentation.yaml
index dc718d452c..b4f2edc749 100644
--- a/.github/workflows/release-documentation.yaml
+++ b/.github/workflows/release-documentation.yaml
@@ -32,7 +32,7 @@ jobs:
 
       - name: Create Summary
         id: summary
-        uses: actions/github-script@e7aeb8c663f696059ebb5f9ab1425ed2ef511bdb
+        uses: actions/github-script@f28e40c7f34bde8b3046d885e986cb6290c5673b
         with:
           script: |
             return `# Version Change Detection
@@ -65,7 +65,7 @@ jobs:
 
       - name: Get Netlify Config
         id: netlify-config
-        uses: actions/github-script@e7aeb8c663f696059ebb5f9ab1425ed2ef511bdb
+        uses: actions/github-script@f28e40c7f34bde8b3046d885e986cb6290c5673b
         with:
           script: |
             const fs = require('fs')
@@ -82,7 +82,7 @@ jobs:
 
       - name: Create Summary
         id: summary
-        uses: actions/github-script@e7aeb8c663f696059ebb5f9ab1425ed2ef511bdb
+        uses: actions/github-script@f28e40c7f34bde8b3046d885e986cb6290c5673b
         with:
           script: |
             return `# Deployed Documentation
diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml
index 7d83c38abd..321aab044a 100644
--- a/.github/workflows/release.yaml
+++ b/.github/workflows/release.yaml
@@ -51,7 +51,7 @@ jobs:
 
       - name: Create Summary
         id: summary
-        uses: actions/github-script@e7aeb8c663f696059ebb5f9ab1425ed2ef511bdb
+        uses: actions/github-script@f28e40c7f34bde8b3046d885e986cb6290c5673b
         env:
           PUBLISHED: ${{ steps.changesets.outputs.published }}
           PUBLISHED_PACKAGES: ${{ steps.changesets.outputs.publishedPackages }}
@@ -97,7 +97,7 @@ jobs:
       # Read the status Files and collect release data on the @swisspost/design-system-styles package
       - name: Prepare Release Data
         id: release-data-pre
-        uses: actions/github-script@e7aeb8c663f696059ebb5f9ab1425ed2ef511bdb
+        uses: actions/github-script@f28e40c7f34bde8b3046d885e986cb6290c5673b
         with:
           script: |
             const fs = require('fs')
@@ -176,7 +176,7 @@ jobs:
 
       - name: Finalize Release Data
         id: release-data
-        uses: actions/github-script@e7aeb8c663f696059ebb5f9ab1425ed2ef511bdb
+        uses: actions/github-script@f28e40c7f34bde8b3046d885e986cb6290c5673b
         with:
           script: |
             const fs = require('fs')
@@ -198,7 +198,7 @@ jobs:
 
       - name: Create Summary
         id: summary
-        uses: actions/github-script@e7aeb8c663f696059ebb5f9ab1425ed2ef511bdb
+        uses: actions/github-script@f28e40c7f34bde8b3046d885e986cb6290c5673b
         env:
           REF_NAME: ${{ github.ref_name }}
           RELEASE_DATA: ${{ steps.release-data.outputs.result }}
@@ -248,7 +248,7 @@ jobs:
       - name: Update or create Documentation _redirects
         id: update-redirects
         if: fromJSON(needs.collect-release-data.outputs.release-data).isMajor == true
-        uses: actions/github-script@e7aeb8c663f696059ebb5f9ab1425ed2ef511bdb
+        uses: actions/github-script@f28e40c7f34bde8b3046d885e986cb6290c5673b
         with:
           script: |
             const fs = require('fs')
@@ -270,7 +270,7 @@ jobs:
             return true
 
       - name: Update Documentation versions.json
-        uses: actions/github-script@e7aeb8c663f696059ebb5f9ab1425ed2ef511bdb
+        uses: actions/github-script@f28e40c7f34bde8b3046d885e986cb6290c5673b
         with:
           script: |
             const fs = require('fs')
@@ -312,7 +312,7 @@ jobs:
 
       - name: Create Summary
         id: summary
-        uses: actions/github-script@e7aeb8c663f696059ebb5f9ab1425ed2ef511bdb
+        uses: actions/github-script@f28e40c7f34bde8b3046d885e986cb6290c5673b
         env:
           REF_NAME: ${{ github.ref_name }}
           RELEASE_DATA: ${{ needs.collect-release-data.outputs.release-data }}
@@ -350,7 +350,7 @@ jobs:
           ref: ${{ fromJSON(needs.collect-release-data.outputs.release-data).tagName }}
 
       - name: Add distribution tag for old major version
-        uses: actions/github-script@e7aeb8c663f696059ebb5f9ab1425ed2ef511bdb
+        uses: actions/github-script@f28e40c7f34bde8b3046d885e986cb6290c5673b
         with:
           script: |
             const fs = require('fs')
@@ -410,7 +410,7 @@ jobs:
           netlify deploy --filter @swisspost/design-system-documentation --dir packages/documentation/storybook-static --prod
 
       - name: Update Changeset config.json
-        uses: actions/github-script@e7aeb8c663f696059ebb5f9ab1425ed2ef511bdb
+        uses: actions/github-script@f28e40c7f34bde8b3046d885e986cb6290c5673b
         with:
           script: |
             const fs = require('fs')
@@ -424,7 +424,7 @@ jobs:
             }, null, 2) + '\n')
 
       - name: Update Documentation netlify.config.json
-        uses: actions/github-script@e7aeb8c663f696059ebb5f9ab1425ed2ef511bdb
+        uses: actions/github-script@f28e40c7f34bde8b3046d885e986cb6290c5673b
         with:
           script: |
             const fs = require('fs')
@@ -448,7 +448,7 @@ jobs:
 
       - name: Create Summary
         id: summary
-        uses: actions/github-script@e7aeb8c663f696059ebb5f9ab1425ed2ef511bdb
+        uses: actions/github-script@f28e40c7f34bde8b3046d885e986cb6290c5673b
         env:
           RELEASE_DATA: ${{ needs.collect-release-data.outputs.release-data }}
         with:
@@ -490,7 +490,7 @@ jobs:
 
       - name: Create Summary
         id: summary
-        uses: actions/github-script@e7aeb8c663f696059ebb5f9ab1425ed2ef511bdb
+        uses: actions/github-script@f28e40c7f34bde8b3046d885e986cb6290c5673b
         env:
           RELEASE_DATA: ${{ needs.collect-release-data.outputs.release-data }}
         with:
diff --git a/.github/workflows/sonar-analysis.yaml b/.github/workflows/sonar-analysis.yaml
index 1e0b976f1c..3b93c9a79c 100644
--- a/.github/workflows/sonar-analysis.yaml
+++ b/.github/workflows/sonar-analysis.yaml
@@ -57,7 +57,7 @@ jobs:
 
       - name: Create skipped analysis notice
         if: steps.check_token.outputs.sonar_skipped == 'true' && github.event_name == 'pull_request'
-        uses: actions/github-script@e7aeb8c663f696059ebb5f9ab1425ed2ef511bdb
+        uses: actions/github-script@f28e40c7f34bde8b3046d885e986cb6290c5673b
         with:
           script: |
             github.rest.checks.create({

From 8cffd833a61c05e6b9134c6c2b21ee3410a2d8bb Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Wed, 11 Jun 2025 15:00:41 +0200
Subject: [PATCH 14/26] chore(deps): update actions/stale digest to f78de97
 (#5560)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 .github/workflows/stale.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/stale.yaml b/.github/workflows/stale.yaml
index ff64cf84e3..78344d801f 100644
--- a/.github/workflows/stale.yaml
+++ b/.github/workflows/stale.yaml
@@ -10,7 +10,7 @@ jobs:
   stale:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/stale@5bef64f19d7facfb25b37b414482c7164d639639
+      - uses: actions/stale@f78de9780efb7a789cf4745957fa3374cbb94fd5
         with:
           days-before-stale: 90
           days-before-close: -1

From 0f43dca2ce9887aea40c19802dc31ac6225978fa Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Wed, 11 Jun 2025 15:01:25 +0200
Subject: [PATCH 15/26] chore(deps): update actions/upload-artifact digest to
 6027e3d (#5561)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 .github/actions/artifact-upload/action.yaml | 2 +-
 .github/workflows/e2e-tests.yaml            | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/actions/artifact-upload/action.yaml b/.github/actions/artifact-upload/action.yaml
index 8712a5dc74..280b0c492c 100644
--- a/.github/actions/artifact-upload/action.yaml
+++ b/.github/actions/artifact-upload/action.yaml
@@ -47,7 +47,7 @@ runs:
       run: cd ${{ inputs.folder }} && zip artifacts.zip . -r
 
     - name: Upload artifacts
-      uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02
+      uses: actions/upload-artifact@6027e3dd177782cd8ab9af838c04fd81a07f1d47
       with:
         name: ${{ inputs.name }}
         path: ${{ inputs.folder }}/artifacts.zip
diff --git a/.github/workflows/e2e-tests.yaml b/.github/workflows/e2e-tests.yaml
index 8e4a16d75b..a703287cf0 100644
--- a/.github/workflows/e2e-tests.yaml
+++ b/.github/workflows/e2e-tests.yaml
@@ -51,7 +51,7 @@ jobs:
         run: pnpm e2e:ci
 
       - name: Upload screenshots
-        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02
+        uses: actions/upload-artifact@6027e3dd177782cd8ab9af838c04fd81a07f1d47
         if: failure()
         with:
           name: cypress-snapshots

From 0e2a13ed23626eb43fd33781d712c87c5a73422f Mon Sep 17 00:00:00 2001
From: Alona Zherdetska <138328641+alionazherdetska@users.noreply.github.com>
Date: Wed, 11 Jun 2025 15:06:30 +0200
Subject: [PATCH 16/26] fix(styles): floating labels appear above mobile
 navigation menu on IOS devices/Chrome (#5550)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 📄Bug
Floating labels from form inputs remain visible above the mobile
navigation menu on iOS devices in Chrome browsers, breaking the expected
visual hierarchy and potentially obscuring menu content.

🛠️ To Reproduce
Steps to reproduce the behavior:

- Go to https://www.swisspost-cargo.com/ch-en/help-and-contact on an
iPhone
- Start filling up the input fields (at least 2)
- Open the mobile navigation menu
- The floating labels are displayed above the menu

## Device
Iphone15

## PR description

Adjusted z-index hierarchy to ensure proper layering: increased
`post-header` components z-indexes by 1 on mobile and tablet devices to
maintain correct stacking order during iOS's automatic zoom behavior on
form inputs.

## 🚀 Demo


![5312478682767551920](https://github.com/user-attachments/assets/dde9a2cf-cf52-4354-98ea-80fb332d8481)

## 📝 Checklist

- ✅ My code follows the style guidelines of this project
- 🛠️ I have performed a self-review of my own code
- 📄 I have made corresponding changes to the documentation
- ⚠️ My changes generate no new warnings or errors
- 🧪 I have added tests that prove my fix is effective or that my feature
works
- ✔️ New and existing unit tests pass locally with my changes

---------

Co-authored-by: Alona <alona.zherdetska@post.ch>
---
 .changeset/soft-women-show.md                               | 5 +++++
 .../components/src/components/post-header/post-header.scss  | 6 +++---
 .../components/post-mainnavigation/post-mainnavigation.scss | 4 ++++
 .../post-megadropdown-trigger.scss                          | 4 ++++
 .../src/components/post-megadropdown/post-megadropdown.scss | 2 +-
 packages/styles/src/components/form-input.scss              | 2 +-
 6 files changed, 18 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/soft-women-show.md

diff --git a/.changeset/soft-women-show.md b/.changeset/soft-women-show.md
new file mode 100644
index 0000000000..82d7f2719b
--- /dev/null
+++ b/.changeset/soft-women-show.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Fixed an issue on iOS Chrome where floating labels would appear above the mobile navigation menu after users interacted with multiple form inputs, by increasing the z-index hierarchy for `post-header` components on mobile and tablet devices to ensure proper layering and maintain the navigation menu's top-level priority.
diff --git a/packages/components/src/components/post-header/post-header.scss b/packages/components/src/components/post-header/post-header.scss
index 039dbae0cf..38ac40808a 100644
--- a/packages/components/src/components/post-header/post-header.scss
+++ b/packages/components/src/components/post-header/post-header.scss
@@ -62,7 +62,7 @@
   height: var(--post-global-header-height);
 
   @include media.max(lg) {
-    z-index: 3;
+    z-index: 4;
     inset-block-start: 0;
   }
 
@@ -154,7 +154,7 @@
   }
 
   @include media.max(lg) {
-    z-index: 2;
+    z-index: 3;
     inset-block-start: var(--post-global-header-height);
     padding-block: 8px;
 
@@ -214,7 +214,7 @@
 @include media.max(lg) {
   .navigation {
     position: sticky;
-    z-index: 1;
+    z-index: 2;
     inset-inline: 0;
     inset-block-start: var(--post-header-height);
   }
diff --git a/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss b/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss
index 41dcdc869f..0aee1769cd 100644
--- a/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss
+++ b/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss
@@ -135,6 +135,10 @@ post-mainnavigation {
         font-size: 16px;
         z-index: 4;
 
+        @include media.max(lg) {
+          z-index: 5;
+        }
+
         .nav-el-active {
           font-weight: 700;
           text-align: center;
diff --git a/packages/components/src/components/post-megadropdown-trigger/post-megadropdown-trigger.scss b/packages/components/src/components/post-megadropdown-trigger/post-megadropdown-trigger.scss
index 8b226944e6..ecf3c4a394 100644
--- a/packages/components/src/components/post-megadropdown-trigger/post-megadropdown-trigger.scss
+++ b/packages/components/src/components/post-megadropdown-trigger/post-megadropdown-trigger.scss
@@ -4,4 +4,8 @@ post-megadropdown-trigger {
   width: 100%;
   position: relative;
   z-index: 3;
+
+  @include media.max(lg) {
+    z-index: 4;
+  }
 }
diff --git a/packages/components/src/components/post-megadropdown/post-megadropdown.scss b/packages/components/src/components/post-megadropdown/post-megadropdown.scss
index 018cfd4aac..fa5929c40b 100644
--- a/packages/components/src/components/post-megadropdown/post-megadropdown.scss
+++ b/packages/components/src/components/post-megadropdown/post-megadropdown.scss
@@ -70,7 +70,7 @@
   }
 
   @include media.max(lg) {
-    z-index: 4;
+    z-index: 5;
     position: fixed;
     inset-block-start: var(--post-header-navigation-current-inset);
     inset-inline: 0;
diff --git a/packages/styles/src/components/form-input.scss b/packages/styles/src/components/form-input.scss
index 999b0abde5..d857d4f0fc 100644
--- a/packages/styles/src/components/form-input.scss
+++ b/packages/styles/src/components/form-input.scss
@@ -219,7 +219,7 @@ input.form-control {
     top: calc(tokens.get('input-sizing-height') / 2);
     transform: translateY(-50%);
     right: tokens.get('input-validation-icon-position-inline-end');
-    z-index: 2;
+    z-index: 1;
     pointer-events: none;
     @include icon-mx.post-icon(
       $name: 'warning-solid',

From 8e734ddac10d37a5c6343d9c960cc9bc3acd8ede Mon Sep 17 00:00:00 2001
From: Myrta Sakellariou <myrta.sakellariou@gmail.com>
Date: Wed, 11 Jun 2025 15:43:40 +0200
Subject: [PATCH 17/26] feat(documentation): add first level hidden section for
 accessibility practices

---
 packages/documentation/.storybook/manager.ts          | 1 +
 packages/documentation/.storybook/preview.ts          | 3 +++
 packages/documentation/.storybook/styles/manager.scss | 5 ++++-
 3 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/documentation/.storybook/manager.ts b/packages/documentation/.storybook/manager.ts
index c52ce3e90d..c700327037 100644
--- a/packages/documentation/.storybook/manager.ts
+++ b/packages/documentation/.storybook/manager.ts
@@ -20,6 +20,7 @@ addons.setConfig({
       'utilities',
       'templates',
       'guidelines',
+      'accessibility-practices',
     ],
   },
 
diff --git a/packages/documentation/.storybook/preview.ts b/packages/documentation/.storybook/preview.ts
index 2366b05aa1..13c6af166e 100644
--- a/packages/documentation/.storybook/preview.ts
+++ b/packages/documentation/.storybook/preview.ts
@@ -65,6 +65,9 @@ const preview: Preview = {
           // Category - Guidelines
           'Guidelines',
 
+          // Category - Accessibility (INTERNAL ONLY)
+          'Accessibility Practices',
+
           // Category - Misc
           'Misc',
           ['Mission', 'Design Principles', 'Migration'],
diff --git a/packages/documentation/.storybook/styles/manager.scss b/packages/documentation/.storybook/styles/manager.scss
index 74817c5858..01029b249d 100644
--- a/packages/documentation/.storybook/styles/manager.scss
+++ b/packages/documentation/.storybook/styles/manager.scss
@@ -112,7 +112,10 @@
 
   #misc,
   [data-item-id^='health'],
-  :is(#raw-components, [data-parent-id='raw-components']):where([data-env='production'] *) {
+  :is(#raw-components, [data-parent-id='raw-components']):where([data-env='production'] *),
+  :is(#accessibility-practices, [data-parent-id='accessibility-practices']):where(
+      [data-env='production'] *
+    ) {
     display: none;
   }
 

From ffc770110ffb83762488fb38dbdec62a31e1097b Mon Sep 17 00:00:00 2001
From: Myrta Sakellariou <myrta.sakellariou@gmail.com>
Date: Thu, 12 Jun 2025 07:16:51 +0200
Subject: [PATCH 18/26] move and rename files

---
 .../aria-controls/aria-controls.docs.mdx}       | 17 +++++++++--------
 .../aria-controls/aria-controls.stories.ts}     |  3 ++-
 .../aria-described-by.docs.mdx}                 |  6 ++----
 .../aria-described-by.stories.ts}               |  3 ++-
 .../aria-labelled-by/aria-labelled-by.docs.mdx} |  6 ++----
 .../aria-labelled-by.stories.ts}                |  3 ++-
 .../aria-roles/list-role/list-role.docs.mdx}    |  6 ++----
 .../aria-roles/list-role/list-role.stories.ts}  |  3 ++-
 .../crossing-the-shadow-dom/for/for.docs.mdx}   |  6 +++---
 .../crossing-the-shadow-dom/for/for.stories.ts} |  3 ++-
 10 files changed, 28 insertions(+), 28 deletions(-)
 rename packages/documentation/src/stories/{guidelines/ccr/ariacontrols/ariacontrols.docs.mdx => accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-controls/aria-controls.docs.mdx} (90%)
 rename packages/documentation/src/stories/{guidelines/ccr/ariacontrols/ariacontrols.stories.ts => accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-controls/aria-controls.stories.ts} (96%)
 rename packages/documentation/src/stories/{guidelines/ccr/ariadescribed/ariadescribed.docs.mdx => accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-described-by/aria-described-by.docs.mdx} (96%)
 rename packages/documentation/src/stories/{guidelines/ccr/ariadescribed/ariadescribed.stories.ts => accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-described-by/aria-described-by.stories.ts} (95%)
 rename packages/documentation/src/stories/{guidelines/ccr/arialabelled/arialabelled.docs.mdx => accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-labelled-by/aria-labelled-by.docs.mdx} (96%)
 rename packages/documentation/src/stories/{guidelines/ccr/arialabelled/arialabelled.stories.ts => accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-labelled-by/aria-labelled-by.stories.ts} (95%)
 rename packages/documentation/src/stories/{guidelines/ccr/role/role.docs.mdx => accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-roles/list-role/list-role.docs.mdx} (94%)
 rename packages/documentation/src/stories/{guidelines/ccr/role/role.stories.ts => accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-roles/list-role/list-role.stories.ts} (94%)
 rename packages/documentation/src/stories/{guidelines/ccr/forid/forid.docs.mdx => accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/for/for.docs.mdx} (98%)
 rename packages/documentation/src/stories/{guidelines/ccr/forid/forid.stories.ts => accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/for/for.stories.ts} (95%)

diff --git a/packages/documentation/src/stories/guidelines/ccr/ariacontrols/ariacontrols.docs.mdx b/packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-controls/aria-controls.docs.mdx
similarity index 90%
rename from packages/documentation/src/stories/guidelines/ccr/ariacontrols/ariacontrols.docs.mdx
rename to packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-controls/aria-controls.docs.mdx
index e16184c51b..3d96e96d8f 100644
--- a/packages/documentation/src/stories/guidelines/ccr/ariacontrols/ariacontrols.docs.mdx
+++ b/packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-controls/aria-controls.docs.mdx
@@ -1,20 +1,21 @@
 import { Meta, Canvas, Source, Controls } from '@storybook/blocks';
-import * as CCR from './ariacontrols.stories';
+import * as CCR from './aria-controls.stories';
 
 <Meta of={CCR} />
 
-# Cross Component Referencing Cases
-
-## 4. `aria-controls`/ `id`
-
-### I. Referencing Within the Same DOM Tree ✔️
+# Aria-Controls
 
 <div className="lead">
-  In the Light DOM, `aria-controls` is used to indicate that an element controls the visibility or interaction of another element, by referencing its `id`. 
+  In the Light DOM, `aria-controls` is used to indicate that an element controls the visibility or
+  interaction of another element, by referencing its `id`.
 </div>
 <div>
-  This creates an accessibility relationship, helping assistive technologies understand the interaction between the trigger and the controlled content.
+  This creates an accessibility relationship, helping assistive technologies understand the
+  interaction between the trigger and the controlled content.
 </div>
+
+### I. Referencing Within the Same DOM Tree ✔️
+
 <ul>
   <li>Light DOM → Light DOM</li>
 
diff --git a/packages/documentation/src/stories/guidelines/ccr/ariacontrols/ariacontrols.stories.ts b/packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-controls/aria-controls.stories.ts
similarity index 96%
rename from packages/documentation/src/stories/guidelines/ccr/ariacontrols/ariacontrols.stories.ts
rename to packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-controls/aria-controls.stories.ts
index 3009ebf4f2..1bfa398805 100644
--- a/packages/documentation/src/stories/guidelines/ccr/ariacontrols/ariacontrols.stories.ts
+++ b/packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-controls/aria-controls.stories.ts
@@ -4,7 +4,8 @@ import { html } from 'lit';
 
 const meta: MetaExtended = {
   id: '76ade552-2c03-4d6d-9dce-28daa346f3g3',
-  title: 'Guidelines/Crossing the Shadow DOM/4.AriaControls',
+  title:
+    'Accessibility Practices/Foundational Structure And Semantics/Reference Relationships/Crossing The Shadow Dom/Aria-Controls',
   parameters: {
     badges: [],
   },
diff --git a/packages/documentation/src/stories/guidelines/ccr/ariadescribed/ariadescribed.docs.mdx b/packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-described-by/aria-described-by.docs.mdx
similarity index 96%
rename from packages/documentation/src/stories/guidelines/ccr/ariadescribed/ariadescribed.docs.mdx
rename to packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-described-by/aria-described-by.docs.mdx
index 1f14a19745..dcd238dd22 100644
--- a/packages/documentation/src/stories/guidelines/ccr/ariadescribed/ariadescribed.docs.mdx
+++ b/packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-described-by/aria-described-by.docs.mdx
@@ -1,11 +1,9 @@
 import { Meta, Canvas, Source, Controls } from '@storybook/blocks';
-import * as CCR from './ariadescribed.stories';
+import * as CCR from './aria-described-by.stories';
 
 <Meta of={CCR} />
 
-# Cross Component Referencing Cases
-
-## 3. `aria-describedby`/ `id`
+# Aria-Describedby
 
 <div className="lead">
   In the Light DOM, `aria-describedby` is used to give an element its accessible name by referencing
diff --git a/packages/documentation/src/stories/guidelines/ccr/ariadescribed/ariadescribed.stories.ts b/packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-described-by/aria-described-by.stories.ts
similarity index 95%
rename from packages/documentation/src/stories/guidelines/ccr/ariadescribed/ariadescribed.stories.ts
rename to packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-described-by/aria-described-by.stories.ts
index 66dd91da75..0761636f49 100644
--- a/packages/documentation/src/stories/guidelines/ccr/ariadescribed/ariadescribed.stories.ts
+++ b/packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-described-by/aria-described-by.stories.ts
@@ -4,7 +4,8 @@ import { html } from 'lit';
 
 const meta: MetaExtended = {
   id: '76ade552-2c03-4d6d-9dce-28daa340f3g6',
-  title: 'Guidelines/Crossing the Shadow DOM/3.AriaDescribedBy',
+  title:
+    'Accessibility Practices/Foundational Structure And Semantics/Reference Relationships/Crossing The Shadow Dom/Aria-DescribedBy',
   parameters: {
     badges: [],
   },
diff --git a/packages/documentation/src/stories/guidelines/ccr/arialabelled/arialabelled.docs.mdx b/packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-labelled-by/aria-labelled-by.docs.mdx
similarity index 96%
rename from packages/documentation/src/stories/guidelines/ccr/arialabelled/arialabelled.docs.mdx
rename to packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-labelled-by/aria-labelled-by.docs.mdx
index 660808d977..b0635d1cfa 100644
--- a/packages/documentation/src/stories/guidelines/ccr/arialabelled/arialabelled.docs.mdx
+++ b/packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-labelled-by/aria-labelled-by.docs.mdx
@@ -1,11 +1,9 @@
 import { Meta, Canvas, Source, Controls } from '@storybook/blocks';
-import * as CCR from './arialabelled.stories';
+import * as CCR from './aria-labelled-by.stories';
 
 <Meta of={CCR} />
 
-# Cross Component Referencing Cases
-
-## 2. `aria-labelledby`/ `id`
+# Aria-Labelledby
 
 <div className="lead">
   In the Light DOM, `aria-labelledby` is used to give an element its accessible name by referencing
diff --git a/packages/documentation/src/stories/guidelines/ccr/arialabelled/arialabelled.stories.ts b/packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-labelled-by/aria-labelled-by.stories.ts
similarity index 95%
rename from packages/documentation/src/stories/guidelines/ccr/arialabelled/arialabelled.stories.ts
rename to packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-labelled-by/aria-labelled-by.stories.ts
index 18be574691..5af88a2f35 100644
--- a/packages/documentation/src/stories/guidelines/ccr/arialabelled/arialabelled.stories.ts
+++ b/packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-labelled-by/aria-labelled-by.stories.ts
@@ -4,7 +4,8 @@ import { html } from 'lit';
 
 const meta: MetaExtended = {
   id: '76ade552-2c03-4d6d-9dce-28daa340f7d5',
-  title: 'Guidelines/Crossing the Shadow DOM/2.AriaLabelledBy',
+  title:
+    'Accessibility Practices/Foundational Structure And Semantics/Reference Relationships/Crossing The Shadow Dom/Aria-LabelledBy',
   parameters: {
     badges: [],
   },
diff --git a/packages/documentation/src/stories/guidelines/ccr/role/role.docs.mdx b/packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-roles/list-role/list-role.docs.mdx
similarity index 94%
rename from packages/documentation/src/stories/guidelines/ccr/role/role.docs.mdx
rename to packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-roles/list-role/list-role.docs.mdx
index 38b847fdfe..8cca546c29 100644
--- a/packages/documentation/src/stories/guidelines/ccr/role/role.docs.mdx
+++ b/packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-roles/list-role/list-role.docs.mdx
@@ -1,11 +1,9 @@
 import { Meta, Canvas, Source, Controls } from '@storybook/blocks';
-import * as CCR from './role.stories';
+import * as CCR from './list-role.stories';
 
 <Meta of={CCR} />
 
-# Cross Component Referencing Cases
-
-## 3. `role`
+# role="list"
 
 <div className="lead">
   The `role` attribute defines the purpose of a web element (e.g. `role="menu"`, `role="tab"`,
diff --git a/packages/documentation/src/stories/guidelines/ccr/role/role.stories.ts b/packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-roles/list-role/list-role.stories.ts
similarity index 94%
rename from packages/documentation/src/stories/guidelines/ccr/role/role.stories.ts
rename to packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-roles/list-role/list-role.stories.ts
index bf1609eb8c..f3f60e905e 100644
--- a/packages/documentation/src/stories/guidelines/ccr/role/role.stories.ts
+++ b/packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-roles/list-role/list-role.stories.ts
@@ -4,7 +4,8 @@ import { html } from 'lit';
 
 const meta: MetaExtended = {
   id: '76ade552-2c03-4d6d-9dce-28daa346f456',
-  title: 'Guidelines/Crossing the Shadow DOM/6.AriaRoles',
+  title:
+    'Accessibility Practices/Foundational Structure And Semantics/Reference Relationships/Crossing The Shadow Dom/Aria-Roles/List Role',
   parameters: {
     badges: [],
   },
diff --git a/packages/documentation/src/stories/guidelines/ccr/forid/forid.docs.mdx b/packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/for/for.docs.mdx
similarity index 98%
rename from packages/documentation/src/stories/guidelines/ccr/forid/forid.docs.mdx
rename to packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/for/for.docs.mdx
index aa17a42d46..ff70e5dd22 100644
--- a/packages/documentation/src/stories/guidelines/ccr/forid/forid.docs.mdx
+++ b/packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/for/for.docs.mdx
@@ -1,11 +1,11 @@
 import { Meta, Canvas, Source, Controls } from '@storybook/blocks';
-import * as CCR from './forid.stories';
+import * as CCR from './for.stories';
 
 <Meta of={CCR} />
 
-# Crossing the Shadow Dom
+# for
 
-## 1. `for`/ `id`
+##
 
 <div className="lead">The native HTML `for`/`id` relationship is a fundamental way to connect a `<label>` element to a form control (such as `<input>`, `<select>`, `<textarea>`, etc. or even to a custom form-associated control) within the same document structure (same DOM tree).</div> 
 <div>This connection is established by setting the for attribute on the `<label>` to match the `id` attribute of the form control it describes. </div>
diff --git a/packages/documentation/src/stories/guidelines/ccr/forid/forid.stories.ts b/packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/for/for.stories.ts
similarity index 95%
rename from packages/documentation/src/stories/guidelines/ccr/forid/forid.stories.ts
rename to packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/for/for.stories.ts
index 49a52676fb..294ea426f3 100644
--- a/packages/documentation/src/stories/guidelines/ccr/forid/forid.stories.ts
+++ b/packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/for/for.stories.ts
@@ -4,7 +4,8 @@ import { html } from 'lit';
 
 const meta: MetaExtended = {
   id: '76ade552-2c03-4d6d-9dce-28daa340f7d3',
-  title: 'Guidelines/Crossing the Shadow DOM/1.For',
+  title:
+    'Accessibility Practices/Foundational Structure And Semantics/Reference Relationships/Crossing The Shadow Dom/For',
   parameters: {
     badges: [],
   },

From 41faa7aea7fdb84941934e0d9d3e208548c9d3fd Mon Sep 17 00:00:00 2001
From: Myrta Sakellariou <66249294+myrta2302@users.noreply.github.com>
Date: Thu, 12 Jun 2025 07:23:55 +0200
Subject: [PATCH 19/26] chore(components): set `<post-tooltip>` to
 `display:contents` to avoid interfering with layout (#5574)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 📄 Description

This PR sets the display of `<post-tooltip>` to `display: contents` to
ensure it does not cause any layout shifts.

## 📝 Checklist

- ✅ My code follows the style guidelines of this project
- 🛠️ I have performed a self-review of my own code
- 📄 I have made corresponding changes to the documentation
- ⚠️ My changes generate no new warnings or errors
- ✔️ New and existing unit tests pass locally with my changes
---
 .changeset/purple-cooks-carry.md                             | 5 +++++
 .../components/src/components/post-tooltip/post-tooltip.scss | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/purple-cooks-carry.md

diff --git a/.changeset/purple-cooks-carry.md b/.changeset/purple-cooks-carry.md
new file mode 100644
index 0000000000..751bd042f2
--- /dev/null
+++ b/.changeset/purple-cooks-carry.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Set `<post-tooltip>` to `display: contents` to avoid affecting document layout.
diff --git a/packages/components/src/components/post-tooltip/post-tooltip.scss b/packages/components/src/components/post-tooltip/post-tooltip.scss
index 2a3cf12b05..de0c827eaa 100644
--- a/packages/components/src/components/post-tooltip/post-tooltip.scss
+++ b/packages/components/src/components/post-tooltip/post-tooltip.scss
@@ -13,7 +13,7 @@ tokens.$default-map: utilities.$post-spacing;
 }
 
 :host([open]) {
-  display: block;
+  display: contents;
 }
 
 post-popovercontainer {

From c2beffc64800e0a7e29fa8a248fa303ced3fc661 Mon Sep 17 00:00:00 2001
From: Myrta Sakellariou <66249294+myrta2302@users.noreply.github.com>
Date: Thu, 12 Jun 2025 07:24:44 +0200
Subject: [PATCH 20/26] chore(styles): adjust textarea floating label top
 position to fix subpixel gap at 125% scaling (#5547)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 📄 Description

This PR adjusts textarea floating label top position to prevent text
from appearing between label and border on Windows at 125% scaling.

## 📝 Checklist

- ✅ My code follows the style guidelines of this project
- 🛠️ I have performed a self-review of my own code
- ⚠️ My changes generate no new warnings or errors
- ✔️ New and existing unit tests pass locally with my changes
---
 .changeset/two-clubs-laugh.md                     | 5 +++++
 packages/styles/src/components/form-textarea.scss | 7 +++++++
 2 files changed, 12 insertions(+)
 create mode 100644 .changeset/two-clubs-laugh.md

diff --git a/.changeset/two-clubs-laugh.md b/.changeset/two-clubs-laugh.md
new file mode 100644
index 0000000000..bda0feb9ad
--- /dev/null
+++ b/.changeset/two-clubs-laugh.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Adjusted label top position to prevent text from appearing between label and border on Windows at 125% scaling.
diff --git a/packages/styles/src/components/form-textarea.scss b/packages/styles/src/components/form-textarea.scss
index 3f3faf6f26..2dc27f2b8a 100644
--- a/packages/styles/src/components/form-textarea.scss
+++ b/packages/styles/src/components/form-textarea.scss
@@ -123,6 +123,13 @@ textarea.form-control {
       padding-block-start 0.2s ease-in-out,
       font-size 0.2s ease-in-out;
     background-color: tokens.get('textarea-enabled-bg');
+
+    /* Fixes subpixel rendering gap at 125% OS scaling
+   Prevents the half-pixel of the upper text line from appearing between
+   the textarea border and floating label when Windows display scaling is set to 125% */
+    @media (min-resolution: 1.25dppx) and (max-resolution: 1.49dppx) {
+      top: calc(tokens.get('textarea-border-width') / 1.25);
+    }
   }
 
   > textarea.form-control {

From faa18ed26da0c4abbc1a111a64fdd0bd080accef Mon Sep 17 00:00:00 2001
From: Myrta Sakellariou <66249294+myrta2302@users.noreply.github.com>
Date: Thu, 12 Jun 2025 08:26:28 +0200
Subject: [PATCH 21/26] chore(documentation): post header with custom logo link
 (#5171)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 📄 Description

This PR adds a new page 'Header with Custom Logo Link' under Guidelines,
on how to use post-header logo with a custom link wrapper.

## 📝 Checklist

- ✅ My code follows the style guidelines of this project
- 🛠️ I have performed a self-review of my own code
- 📄 I have made corresponding changes to the documentation
- ⚠️ My changes generate no new warnings or errors
- ✔️ New and existing unit tests pass locally with my changes

---------

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
Co-authored-by: Oliver Schürch <oliver.schuerch@post.ch>
---
 .changeset/fifty-roses-visit.md               |   5 +
 .../stories/foundations/logo/logo.docs.mdx    |   4 +
 .../code.sample.ts                            |  29 +++
 .../framework-selector.tsx                    | 237 ++++++++++++++++++
 .../header-with-custom-logo-link.docs.mdx     |  29 +++
 .../header-with-custom-logo-link.stories.ts   |  13 +
 pnpm-lock.yaml                                |   2 -
 7 files changed, 317 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/fifty-roses-visit.md
 create mode 100644 packages/documentation/src/stories/guidelines/header with custom logo link/code.sample.ts
 create mode 100644 packages/documentation/src/stories/guidelines/header with custom logo link/framework-selector.tsx
 create mode 100644 packages/documentation/src/stories/guidelines/header with custom logo link/header-with-custom-logo-link.docs.mdx
 create mode 100644 packages/documentation/src/stories/guidelines/header with custom logo link/header-with-custom-logo-link.stories.ts

diff --git a/.changeset/fifty-roses-visit.md b/.changeset/fifty-roses-visit.md
new file mode 100644
index 0000000000..6cfb4b69d1
--- /dev/null
+++ b/.changeset/fifty-roses-visit.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Added a new page 'Header with Custom Logo Link' under Guidelines, on how to use post-header logo with a custom link wrapper.
diff --git a/packages/documentation/src/stories/foundations/logo/logo.docs.mdx b/packages/documentation/src/stories/foundations/logo/logo.docs.mdx
index bb94f86ff0..e1525081f7 100644
--- a/packages/documentation/src/stories/foundations/logo/logo.docs.mdx
+++ b/packages/documentation/src/stories/foundations/logo/logo.docs.mdx
@@ -36,3 +36,7 @@ You can use the logo as a link by setting its `url` property.
 Ensure that the descriptive text clearly indicates the destination the user will be redirected to after clicking the logo.
 
 <Canvas of={logoStories.Link} />
+
+#### Custom Link
+
+For client-side routing applications, a custom link component can be implemented; refer to the <a href="/?path=/docs/cb34361c-7d3f-4c21-bb9c-874c73e82579--docs">guidelines</a> for details.
diff --git a/packages/documentation/src/stories/guidelines/header with custom logo link/code.sample.ts b/packages/documentation/src/stories/guidelines/header with custom logo link/code.sample.ts
new file mode 100644
index 0000000000..e411920036
--- /dev/null
+++ b/packages/documentation/src/stories/guidelines/header with custom logo link/code.sample.ts	
@@ -0,0 +1,29 @@
+export const firstStep = `
+
+<!-- Angular -->
+<post-logo>Homepage</post-logo>
+
+<!-- React & Next.js -->
+<PostLogo>Homepage</PostLogo>
+`;
+
+export const secondStep = `
+<!-- Angular -->
+<a routerLink="#"><post-logo>Homepage</post-logo></a>
+
+<!-- React -->
+<Link to="#"><PostLogo>Homepage</PostLogo></Link>
+
+<!-- Next.js -->
+<Link href="#"><PostLogo>Homepage</PostLogo></Link>
+`;
+export const thirdStep = `
+<!-- Angular -->
+<a routerLink="#" slot="post-logo"><post-logo>Homepage</post-logo></a>
+
+<!-- React -->
+<Link to="#" slot="post-logo"><PostLogo>Homepage</PostLogo></Link>
+
+<!-- Next.js -->
+<Link href="#" slot="post-logo"><PostLogo>Homepage</PostLogo></Link>
+`;
diff --git a/packages/documentation/src/stories/guidelines/header with custom logo link/framework-selector.tsx b/packages/documentation/src/stories/guidelines/header with custom logo link/framework-selector.tsx
new file mode 100644
index 0000000000..5cd17fa111
--- /dev/null
+++ b/packages/documentation/src/stories/guidelines/header with custom logo link/framework-selector.tsx	
@@ -0,0 +1,237 @@
+import { useState } from 'react';
+import { Source } from '@storybook/addon-docs';
+
+const code = `
+<post-header>
+
+  <!-- Logo -->
+  {{logoLink}}
+
+  <!-- Meta navigation -->
+  <ul class="list-inline" slot="meta-navigation">
+    <li><a href="#">Jobs</a></li>
+    <li><a href="#">Über uns</a></li>
+  </ul>
+
+  <!-- Menu button mobile -->
+  <post-togglebutton slot="post-togglebutton">
+    <span class="visually-hidden-sm">Menu</span>
+    <post-icon aria-hidden="true" name="burger" data-showwhen="untoggled"></post-icon>
+    <post-icon aria-hidden="true" name="closex" data-showwhen="toggled"></post-icon>
+  </post-togglebutton>
+
+  <!-- Language switch -->
+  <post-language-switch
+    caption="Change the language"
+    description="The currently selected language is English."
+    variant="list"
+    name="language-switch-example"
+    slot="post-language-switch">
+    <post-language-option active="false" code="de" name="Deutsch">de</post-language-option>
+    <post-language-option active="false" code="fr" name="French">fr</post-language-option>
+    <post-language-option active="false" code="it" name="Italiano">it</post-language-option>
+    <post-language-option active="true" code="en" name="English">en</post-language-option>
+  </post-language-switch>
+
+  <!-- Application title (optional) -->
+  <h1 slot="title">Application title</h1>
+
+  <!-- Custom content (optional) -->
+  <ul class="list-inline">
+    <li>
+      <a href="#">
+        <span class="visually-hidden-sm">Search</span>
+        <post-icon aria-hidden="true" name="search"></post-icon>
+      </a>
+    </li>
+    <li>
+      <a href="#">
+        <span class="visually-hidden-sm">Login</span>
+        <post-icon aria-hidden="true" name="login"></post-icon>
+      </a>
+    </li>
+  </ul>
+
+  <!-- Main navigation -->
+  <post-mainnavigation caption="Hauptnavigation">
+    <button type="button" slot="back-button" class="btn btn-sm btn-tertiary">
+      <post-icon aria-hidden="true" name="arrowright"></post-icon> Back
+    </button>
+    <post-list title-hidden="">
+      <h2>Main Navigation</h2>
+      <!-- Link only level 1 -->
+      <post-list-item slot="post-list-item"><a href="#">Briefe</a></post-list-item>
+      <post-list-item slot="post-list-item"><a href="#">Pakete</a></post-list-item>
+
+      <!-- Level 1 with megadropdown -->
+      <post-list-item slot="post-list-item">
+        <post-megadropdown-trigger for="briefe">Briefe</post-megadropdown-trigger>
+        <post-megadropdown id="briefe">
+          <button slot="back-button" class="btn btn-tertiary px-0 btn-sm">
+            <post-icon name="arrowright"></post-icon>
+            Back
+          </button>
+          <post-closebutton slot="close-button">Schliessen</post-closebutton>
+          <h2 slot="megadropdown-title">Briefe title</h2>
+          <post-list>
+            <h3>Briefe senden</h3>
+            <post-list-item slot="post-list-item"><a href="#">Briefe Schweiz</a></post-list-item>
+            <post-list-item slot="post-list-item"
+              ><a href="#">Kleinwaren Ausland</a></post-list-item
+            >
+            <post-list-item slot="post-list-item"><a href="#">Waren Ausland</a></post-list-item>
+            <post-list-item slot="post-list-item"><a href="#">Express und Kurier</a></post-list-item>
+          </post-list>
+          <post-list>
+            <h3><a href="#">Schritt für Schritt</a></h3>
+            <post-list-item slot="post-list-item"><a href="#">Pakete Schweiz</a></post-list-item>
+            <post-list-item slot="post-list-item"
+              ><a href="#">Kleinwaren Ausland</a></post-list-item
+            >
+            <post-list-item slot="post-list-item"><a href="#">Waren Ausland</a></post-list-item>
+            <post-list-item slot="post-list-item"><a href="#">Express und Kurier</a></post-list-item>
+          </post-list>
+        </post-megadropdown>
+      </post-list-item>
+      <post-list-item slot="post-list-item">
+        <post-megadropdown-trigger for="pakete">Pakete</post-megadropdown-trigger>
+        <post-megadropdown id="pakete">
+          <button slot="back-button" class="btn btn-tertiary px-0 btn-sm">
+            <post-icon name="arrowright"></post-icon>
+            Back
+          </button>
+          <post-closebutton slot="close-button">Schliessen</post-closebutton>
+          <h2 slot="megadropdown-title">Pakete title</h2>
+          <post-list>
+            <h3>Pakete senden</h3>
+            <post-list-item slot="post-list-item"><a href="#">Pakete Schweiz</a></post-list-item>
+            <post-list-item slot="post-list-item"
+              ><a href="#">Kleinwaren Ausland</a></post-list-item
+            >
+            <post-list-item slot="post-list-item"><a href="#">Waren Ausland</a></post-list-item>
+            <post-list-item slot="post-list-item"><a href="#">Express und Kurier</a></post-list-item>
+          </post-list>
+          <post-list>
+            <h3><a href="#">Schritt für Schritt</a></h3>
+            <post-list-item slot="post-list-item"><a href="#">Pakete Schweiz</a></post-list-item>
+            <post-list-item slot="post-list-item"
+              ><a href="#">Kleinwaren Ausland</a></post-list-item
+            >
+            <post-list-item slot="post-list-item"><a href="#">Waren Ausland</a></post-list-item>
+            <post-list-item slot="post-list-item"><a href="#">Express und Kurier</a></post-list-item>
+          </post-list>
+        </post-megadropdown>
+      </post-list-item>
+    </post-list>
+  </post-mainnavigation>
+</post-header>
+`;
+
+const extractPostTags = (html: string): string[] => {
+  // Match full tag names like <post-list-item> and </post-list-item>, excluding the '/'
+  const postTagRegex = /<\/?post-[a-zA-Z0-9-]+/g;
+  const matches = html.match(postTagRegex);
+  const uniqueTags = new Set(
+    matches
+      ? matches.map(tag =>
+          tag
+            .replace(/(^\/|\/$)/g, '')
+            .slice(1)
+            .replace(/[^a-zA-Z0-9-]/g, ''),
+        )
+      : [],
+  );
+  return Array.from(uniqueTags);
+};
+
+const toPascalCase = (tag: string): string => {
+  return tag
+    .split('-')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join('');
+};
+
+const replaceTagsWithPascalCase = (html: string): string => {
+  const tags = extractPostTags(html);
+  const tagPairs = tags.map(tag => [tag, toPascalCase(tag)]);
+
+  tagPairs.forEach(([originalTag, pascalTag]) => {
+    const regex = new RegExp(`(<\\/?${originalTag})(\\s|>)`, 'g');
+    html = html.replace(regex, match => {
+      let result;
+      if (match.startsWith('</')) {
+        result = `</${pascalTag}${match.endsWith('>') ? '>' : ' '}`;
+      } else {
+        result = `<${pascalTag}${match.endsWith('>') ? '>' : ' '}`;
+      }
+
+      return result;
+    });
+  });
+  return html;
+};
+
+const htmlToJsx = (code: string): string => {
+  const updatedHtml = replaceTagsWithPascalCase(code)
+    .replace(/\bclass\b/g, 'className')
+    .replace(/\bfor\b/g, 'htmlFor')
+    .replace(/<a href="/g, '<Link to="')
+    .replace(/<\/a>/g, '</Link>');
+  return updatedHtml;
+};
+
+const jsxCode = htmlToJsx(code);
+const nextjsCode = htmlToJsx(code).replace(/to="/g, 'href="');
+
+const angularLink = `<a routerLink="#" slot="post-logo"><post-logo>Homepage</post-logo></a>`;
+const reactLink = `<Link to="#" slot="post-logo"><PostLogo>Homepage</PostLogo></Link>`;
+const nextJsLink = `<Link href="#" slot="post-logo"><PostLogo>Homepage</PostLogo></Link>`;
+
+const injectLogoLink = (html: string, logoLink: string) => {
+  return html.replace('{{logoLink}}', logoLink);
+};
+
+const angularExample = injectLogoLink(code, angularLink);
+const reactExample = injectLogoLink(jsxCode, reactLink);
+const nextJsExample = injectLogoLink(nextjsCode, nextJsLink);
+
+const ExampleComponent = () => {
+  const [framework, setFramework] = useState('angular');
+
+  const getExampleCode = () => {
+    switch (framework) {
+      case 'angular':
+        return angularExample;
+      case 'react':
+        return reactExample;
+      case 'nextjs':
+        return nextJsExample;
+      default:
+        return angularExample;
+    }
+  };
+
+  return (
+    <div>
+      <div className="form-floating">
+        <select
+          className="form-select"
+          id="framework-label"
+          onChange={e => setFramework(e.target.value)}
+        >
+          <option value="angular">Angular</option>
+          <option value="react">React</option>
+          <option value="nextjs">Next.js</option>
+        </select>
+        <label className="form-label" htmlFor="framework-label">
+          Select a js framework:
+        </label>
+      </div>
+      <div className="mt-24">
+        <Source code={getExampleCode()} language="html" />
+      </div>
+    </div>
+  );
+};
+
+export default ExampleComponent;
diff --git a/packages/documentation/src/stories/guidelines/header with custom logo link/header-with-custom-logo-link.docs.mdx b/packages/documentation/src/stories/guidelines/header with custom logo link/header-with-custom-logo-link.docs.mdx
new file mode 100644
index 0000000000..2574f99a36
--- /dev/null
+++ b/packages/documentation/src/stories/guidelines/header with custom logo link/header-with-custom-logo-link.docs.mdx	
@@ -0,0 +1,29 @@
+import { Meta, Source } from '@storybook/blocks';
+import * as HeaderWithCustomLogoLink from './header-with-custom-logo-link.stories';
+import FrameworkSelector from './framework-selector';
+import * as logoCode from './code.sample';
+
+<Meta of={HeaderWithCustomLogoLink} />
+
+# Header with Custom Logo Link
+
+For client-side routing applications, such as those built with Angular, React, Next.js, etc., the `<post-header>` logo component, `<post-logo>`, can be adapted to fit the specific framework in use. This customization leverages client-side routing to prevent a full page reload when the logo is clicked, ensuring a smoother user experience. To achieve this, the `<post-logo>` component must be wrapped with a custom link wrapper that handles the routing logic according to the utilized framework.
+
+## Steps to use `post-logo` with a Custom Link
+
+<div className="fw-bold"> 1. Start by using the `<post-logo>` without a `url` prop:</div> When implementing a custom link, ensure the `<post-logo>` component does not have the `url` prop set, since this is intended only for rendering a standard HTML link.
+
+<Source code={logoCode.firstStep} language="html" />
+
+<div className="fw-bold">2. Implement a Custom Link Wrapper around the `<post-logo>`:</div> Develop a custom link wrapper that encapsulates the `<post-logo>` component. This wrapper should manage the routing logic in accordance with the framework being used.
+
+<Source code={logoCode.secondStep} language="html" />
+
+<div className="fw-bold">3. Add the `slot="post-logo"` attribute to the Custom Link Wrapper:</div>
+To ensure the `<post-logo>` component functions correctly within the header, the `post-logo` slot must be assigned to the link wrapper.
+
+<Source code={logoCode.thirdStep} language="html" />
+
+## Post Header Full Example
+
+<FrameworkSelector />
diff --git a/packages/documentation/src/stories/guidelines/header with custom logo link/header-with-custom-logo-link.stories.ts b/packages/documentation/src/stories/guidelines/header with custom logo link/header-with-custom-logo-link.stories.ts
new file mode 100644
index 0000000000..d14076c708
--- /dev/null
+++ b/packages/documentation/src/stories/guidelines/header with custom logo link/header-with-custom-logo-link.stories.ts	
@@ -0,0 +1,13 @@
+import { StoryObj } from '@storybook/web-components';
+import { MetaExtended } from '@root/types';
+
+const meta: MetaExtended = {
+  id: 'cb34361c-7d3f-4c21-bb9c-874c73e82579',
+  title: 'Guidelines/Header with Custom Logo Link',
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2ded713ca7..c6588b3ae7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -18068,7 +18068,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
       - typescript
-
   eslint-plugin-jest@28.11.0(@typescript-eslint/eslint-plugin@8.22.0(@typescript-eslint/parser@7.18.0(eslint@9.18.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.18.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.18.0(jiti@2.4.2))(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(typescript@5.8.3):
     dependencies:
       '@typescript-eslint/utils': 8.22.0(eslint@9.18.0(jiti@2.4.2))(typescript@5.8.3)
@@ -23722,7 +23721,6 @@ snapshots:
       '@jest/transform': 29.7.0
       '@jest/types': 29.6.3
       babel-jest: 29.7.0(@babel/core@7.26.0)
-
   ts-jest@29.2.5(@babel/core@7.26.9)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.9))(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(typescript@5.8.3):
     dependencies:
       bs-logger: 0.2.6

From 922ea3336833faf11560b02888b09bb76921b790 Mon Sep 17 00:00:00 2001
From: Alona Zherdetska <138328641+alionazherdetska@users.noreply.github.com>
Date: Thu, 12 Jun 2025 10:19:45 +0200
Subject: [PATCH 22/26] chore(workflow): add validation logic for `deploy-demo`
 and `deploy-documentation` workflows (#5344)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- [x] Depends on #5343

Ticket:
https://github.com/orgs/swisspost/projects/3/views/11?pane=issue&itemId=105001281&issue=swisspost%7Cdesign-system%7C5191

## 📄 Description

Enhance deployment workflow security by:
- Validating issue numbers and netlify configs
- Sanitizing all user inputs before use
- Using safer scripting methods

## 🚀 Demo

If applicable, please add a screenshot or video to illustrate the
changes.

---

## 📝 Checklist

- ✅ My code follows the style guidelines of this project
- 🛠️ I have performed a self-review of my own code
- 📄 I have made corresponding changes to the documentation
- ⚠️ My changes generate no new warnings or errors
- 🧪 I have added tests that prove my fix is effective or that my feature
works
- ✔️ New and existing unit tests pass locally with my changes

---------

Co-authored-by: Alona <alona.zherdetska@post.ch>
---
 .github/workflows/deploy-demo.yaml          | 46 ++++++++++--
 .github/workflows/deploy-documentation.yaml | 82 +++++++++++++++------
 2 files changed, 99 insertions(+), 29 deletions(-)

diff --git a/.github/workflows/deploy-demo.yaml b/.github/workflows/deploy-demo.yaml
index a9b391f792..60e9f60e06 100644
--- a/.github/workflows/deploy-demo.yaml
+++ b/.github/workflows/deploy-demo.yaml
@@ -27,7 +27,7 @@ jobs:
       - name: Checkout
         uses: actions/checkout@09d2acae674a48949e3602304ab46fd20ae0c42f
         with:
-          ref: ${{ github.event.workflow_run.head_branch }}
+          ref: main
 
       - name: Setup
         uses: ./.github/actions/setup-pnpm
@@ -39,11 +39,34 @@ jobs:
           name: design-system-demo
           folder: build-output
 
+      - name: Validate issue number
+        id: validate
+        uses: actions/github-script@v6
+        with:
+          env:
+            RAW_ID: ${{ steps.build.outputs.id }}
+          script: |
+            const rawId = process.env.RAW_ID;
+            if (!/^\d{1,10}$/.test(rawId)) {
+              core.setFailed('Invalid issue number format - must be 1-10 digits');
+              return;
+            }
+            // Convert to number and validate range
+            const issueNumber = Number(rawId);
+            if (!Number.isInteger(issueNumber) || issueNumber <= 0) {
+              core.setFailed('Invalid issue number - must be a positive integer');
+              return;
+            }
+            
+            core.setOutput('safe_id', rawId);
+            core.setOutput('issue_number', issueNumber);
+
       - name: Deploy demo app to netlify
+        if: steps.validate.outcome == 'success'
         uses: swisspost/design-system/.github/actions/deploy-to-netlify@release/v8
         id: deploy
         with:
-          id: ${{ steps.build.outputs.id }}
+          id: ${{ steps.validate.outputs.safe_id }}
           netlify_auth_token: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           netlify_site_id: ${{ secrets.NETLIFY_SITE_ID }}
           netlify_site_url: swisspost-web-frontend.netlify.app
@@ -51,8 +74,19 @@ jobs:
           package_name: '@swisspost/design-system-demo'
 
       - name: Update preview message
-        uses: ./.github/actions/preview/message/update
+        if: steps.validate.outcome == 'success' && steps.deploy.outcome == 'success'
+        uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea
         with:
-          access-token: ${{ secrets.SWISSPOSTDEVS_ACCESS_TOKEN }}
-          issue-number: ${{ steps.build.outputs.id }}
-          preview-url: ${{ steps.deploy.outputs.preview-url }}
+          github-token: ${{ secrets.SWISSPOSTDEVS_ACCESS_TOKEN }}
+          env:
+            ISSUE_NUMBER: ${{ steps.validate.outputs.issue_number }}
+            PREVIEW_URL: ${{ steps.deploy.outputs.preview-url }}
+          script: |
+            const issueNumber = Number(process.env.ISSUE_NUMBER);
+            const previewUrl = process.env.PREVIEW_URL;
+            await github.rest.issues.createComment({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: issueNumber,
+              body: `✅ Preview deployment is ready!\n\n[Preview URL](${previewUrl})`
+            });
diff --git a/.github/workflows/deploy-documentation.yaml b/.github/workflows/deploy-documentation.yaml
index a448454847..312a751917 100644
--- a/.github/workflows/deploy-documentation.yaml
+++ b/.github/workflows/deploy-documentation.yaml
@@ -37,27 +37,67 @@ jobs:
           access-token: ${{ secrets.SWISSPOSTDEVS_ACCESS_TOKEN }}
           issue-number: ${{ steps.build.outputs.id }}
 
-      - name: Get netlify config
-        id: netlify-config
-        uses: actions/github-script@f28e40c7f34bde8b3046d885e986cb6290c5673b
-        with:
-          script: |
-            const fs = require('fs')
-            return JSON.parse(fs.readFileSync('./${{ steps.build.outputs.folder }}/netlify.config.json', 'utf8'))
+      - name: Get and validate netlify config
+        run: |
+          if [[ ! -f "${{ steps.build.outputs.folder }}/netlify.config.json" ]]; then
+              echo "Error: Netlify config file missing"
+              exit 1
+          fi
+          
+          node -e "
+          try {
+            const config = JSON.parse(process.env.CONFIG);
+            const { siteId, siteUrl } = config;
+            
+            // Check if required fields exist
+            if (!siteId || !siteUrl) {
+              console.error('Error: Missing siteId or siteUrl in netlify config');
+              process.exit(1);
+            }
+            
+            // Validate siteId format (alphanumeric and hyphens only)
+            if (!/^[a-zA-Z0-9-]+$/.test(siteId)) {
+              console.error('Error: Invalid site ID format. Must contain only letters, numbers, and hyphens.');
+              process.exit(1);
+            }
+            
+            // Validate siteUrl format (alphanumeric, dots, and hyphens only)
+            if (!/^[a-zA-Z0-9.-]+$/.test(siteUrl)) {
+              console.error('Error: Invalid site URL format. Must contain only letters, numbers, dots, and hyphens.');
+              process.exit(1);
+            }
+            
+          } catch (error) {
+            console.error(error.message);
+            process.exit(1);
+          }
+          " >> $GITHUB_ENV
+        env:
+          CONFIG: $(cat "${{ steps.build.outputs.folder }}/netlify.config.json")
 
       - name: Remove netlify.config.json from artifact folder
         run: rm ${{ steps.build.outputs.folder }}/netlify.config.json
 
+      - name: Create URL alias
+        env:
+          BUILD_ID: ${{ steps.build.outputs.id }}
+        run: |
+          url_alias=$(echo "preview-$BUILD_ID" | iconv -t ascii//TRANSLIT | sed -E 's/[~\^]+//g' | sed -E 's/[^a-zA-Z0-9]+/-/g' | sed -E 's/^-+\|-+$//g' | sed -E 's/^-+//g' | sed -E 's/-+$//g' | tr A-Z a-z)
+          echo "URL_ALIAS=$url_alias" >> $GITHUB_ENV
+          
+          preview_url="https://${url_alias}--${SITE_URL}"
+          echo "PREVIEW_URL=$preview_url" >> $GITHUB_ENV
+
       - name: Deploy Documentation Preview
         id: deploy
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
-          NETLIFY_SITE_ID: ${{ fromJSON(steps.netlify-config.outputs.result).siteId }}
-        # run command taken from https://gist.github.com/oneohthree/f528c7ae1e701ad990e6, shortened to 28 chars, prepended with build-number
+          NETLIFY_SITE_ID: ${{ env.SITE_ID }}
+          URL_ALIAS: ${{ env.URL_ALIAS }}
+          FOLDER: ${{ steps.build.outputs.folder }}
         run: |
-          url_alias=`echo "preview-${{ steps.build.outputs.id }}" | iconv -t ascii//TRANSLIT | sed -E 's/[~\^]+//g' | sed -E 's/[^a-zA-Z0-9]+/-/g' | sed -E 's/^-+\|-+$//g' | sed -E 's/^-+//g' | sed -E 's/-+$//g' | tr A-Z a-z`
-          echo "site-url=https://$url_alias--${{ fromJSON(steps.netlify-config.outputs.result).siteUrl }}" >> $GITHUB_OUTPUT
-          netlify deploy --filter @swisspost/design-system-documentation --dir ${{ steps.build.outputs.folder }} --alias $url_alias
+          netlify deploy --filter @swisspost/design-system-documentation --dir "$FOLDER" --alias "$URL_ALIAS"
+          echo "site-url=$PREVIEW_URL" >> $GITHUB_OUTPUT
 
       - name: Update preview message
         uses: ./.github/actions/preview/message/update
@@ -67,14 +107,10 @@ jobs:
           preview-url: ${{ steps.deploy.outputs.site-url }}
 
       - name: Create Summary
-        id: summary
-        uses: actions/github-script@f28e40c7f34bde8b3046d885e986cb6290c5673b
-        with:
-          script: |
-            return `# Deployed Documentation Preview
-            - SiteId: <code>${{ fromJSON(steps.netlify-config.outputs.result).siteId }}</code>
-            - SiteUrl: ${{ steps.deploy.outputs.site-url }}
-            `
-
-      - name: Output Summary
-        run: echo -e ${{ steps.summary.outputs.result }} >> $GITHUB_STEP_SUMMARY
+        env:
+          SITE_ID: ${{ env.SITE_ID }}
+          SITE_URL: ${{ steps.deploy.outputs.site-url }}
+        run: |
+          echo "# Deployed Documentation Preview" >> $GITHUB_STEP_SUMMARY
+          echo "- SiteId: <code>${SITE_ID}</code>" >> $GITHUB_STEP_SUMMARY
+          echo "- SiteUrl: ${SITE_URL}" >> $GITHUB_STEP_SUMMARY
\ No newline at end of file

From 1b25fe69a7ef85ca417645df79fdfff5326ed235 Mon Sep 17 00:00:00 2001
From: Myrta Sakellariou <myrta.sakellariou@gmail.com>
Date: Fri, 13 Jun 2025 14:21:34 +0200
Subject: [PATCH 23/26] delete not relevant files

---
 .../aria-controls/aria-controls.docs.mdx      |  93 -----------
 .../aria-controls/aria-controls.stories.ts    | 144 ------------------
 .../aria-described-by.docs.mdx                |  93 -----------
 .../aria-described-by.stories.ts              | 105 -------------
 .../aria-labelled-by.docs.mdx                 |  91 -----------
 .../aria-labelled-by.stories.ts               | 105 -------------
 .../aria-roles/list-role/list-role.docs.mdx   |  61 --------
 .../aria-roles/list-role/list-role.stories.ts |  81 ----------
 .../crossing-the-shadow-dom/for/for.docs.mdx  | 106 -------------
 .../for/for.stories.ts                        | 116 --------------
 .../styles/src/components/form-textarea.scss  |   3 +-
 11 files changed, 2 insertions(+), 996 deletions(-)
 delete mode 100644 packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-controls/aria-controls.docs.mdx
 delete mode 100644 packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-controls/aria-controls.stories.ts
 delete mode 100644 packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-described-by/aria-described-by.docs.mdx
 delete mode 100644 packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-described-by/aria-described-by.stories.ts
 delete mode 100644 packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-labelled-by/aria-labelled-by.docs.mdx
 delete mode 100644 packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-labelled-by/aria-labelled-by.stories.ts
 delete mode 100644 packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-roles/list-role/list-role.docs.mdx
 delete mode 100644 packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-roles/list-role/list-role.stories.ts
 delete mode 100644 packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/for/for.docs.mdx
 delete mode 100644 packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/for/for.stories.ts

diff --git a/packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-controls/aria-controls.docs.mdx b/packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-controls/aria-controls.docs.mdx
deleted file mode 100644
index 3d96e96d8f..0000000000
--- a/packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-controls/aria-controls.docs.mdx
+++ /dev/null
@@ -1,93 +0,0 @@
-import { Meta, Canvas, Source, Controls } from '@storybook/blocks';
-import * as CCR from './aria-controls.stories';
-
-<Meta of={CCR} />
-
-# Aria-Controls
-
-<div className="lead">
-  In the Light DOM, `aria-controls` is used to indicate that an element controls the visibility or
-  interaction of another element, by referencing its `id`.
-</div>
-<div>
-  This creates an accessibility relationship, helping assistive technologies understand the
-  interaction between the trigger and the controlled content.
-</div>
-
-### I. Referencing Within the Same DOM Tree ✔️
-
-<ul>
-  <li>Light DOM → Light DOM</li>
-
-</ul>
-  <Canvas of={CCR.ExampleHTML} sourceState="shown" />
-
-### II. Referencing From the LightDOM Into That Shadow DOM ❌
-
-<ul>
-  <li>Light DOM → Shadow DOM</li>
-  <li>Slotted Content → Shadow DOM</li>
-</ul>
-
-The `aria-controls` attribute cannot reference elements inside a Shadow DOM from the Light DOM. This is because IDs inside Shadow roots are encapsulated and inaccessible across boundaries, preventing valid accessibility relationships.
-
-##### Possible Workarounds
-
-###### 1. `Element:ariaControlsElements`
-
-<b>Light DOM → Shadow DOM Example</b>
-<Canvas of={CCR.Example2a} sourceState="shown" />
-<div className="hide-col-default">
-  <Controls of={CCR.Example2a} />
-</div>
-
-<b>Slotted Content → Shadow DOM Example</b>
-<Canvas of={CCR.Example2b} sourceState="shown" />
-<div className="hide-col-default">
-  <Controls of={CCR.Example2b} />
-</div>
-
-###### 2. Set `aria-labelledby`on the host (for SSR Components: to be tested)
-
-An option is to set the following attributes directly on the host of the target component:
-
-<ul>
-  <li> the `aria-labelledby`</li>
-  <li> a semantic `role` (e.g. `textbox`, `button`)</li>
-  <li> `tabindex="0"`</li>
-</ul>
-
-<b>Light DOM → Shadow DOM Example</b>
-<Canvas of={CCR.Example2b} sourceState="shown" />
-
-<b>Slotted Content → Shadow DOM Example</b>
-<Canvas of={CCR.Example2b} sourceState="shown" />
-
-### III. Referencing From Inside a Shadow DOM Out to the Light DOM ❌
-
-<ul>
-  <li>Shadow DOM → Light DOM</li>
-  <li>Shadow DOM → Slotted Content</li>
-</ul>
-
-Similarly to the previous case, <b>referencing an element located outside a Shadow DOM from an element inside that Shadow DOM using standard `aria-labelledby` is not possible</b>. The strong encapsulation of the Shadow DOM prevents elements within it from directly accessing and referencing the IDs of elements in the Light DOM.
-
-##### Possible Workaround
-
-An option is to set the `id` directly on the host of the referencing element. Please note that, in this case all the visible text inside the referencing component will be assigned as the Accessible Name of the target element.
-
-<Canvas of={CCR.Example2b} sourceState="shown" />
-
-##### IV. Referencing From One Shadow DOM To Another Shadow DOM
-
-<ul>
-  <li>Shadow DOM → Other Shadow DOM</li>
-</ul>
-
-what happens
-
-##### Possible Workaround
-
-workaround text
-
-<Canvas of={CCR.Example2b} sourceState="shown" />
diff --git a/packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-controls/aria-controls.stories.ts b/packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-controls/aria-controls.stories.ts
deleted file mode 100644
index 1bfa398805..0000000000
--- a/packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-controls/aria-controls.stories.ts
+++ /dev/null
@@ -1,144 +0,0 @@
-import { StoryObj, Args } from '@storybook/web-components';
-import { MetaExtended } from '@root/types';
-import { html } from 'lit';
-
-const meta: MetaExtended = {
-  id: '76ade552-2c03-4d6d-9dce-28daa346f3g3',
-  title:
-    'Accessibility Practices/Foundational Structure And Semantics/Reference Relationships/Crossing The Shadow Dom/Aria-Controls',
-  parameters: {
-    badges: [],
-  },
-};
-
-export default meta;
-
-type Story = StoryObj;
-
-// Case: Standard Light DOM to Light DOM
-function handleToggleClick(toggleId: string, textId: string): void {
-  const toggle = document.getElementById(toggleId);
-  const text = document.getElementById(textId);
-  if (toggle && text) {
-    const timestamp = Date.now(); // or use a counter
-    text.innerHTML = `<p>Controlled Text shown at ${timestamp}.</p>`;
-  }
-}
-
-export const ExampleHTML = () => {
-  return html`
-    <button id="toggle" aria-controls="text" @click=${() => handleToggleClick('toggle', 'text')}>
-      Toggle Text
-    </button>
-    <div id="text" aria-live="polite">
-      <p>Controlled Text shown at xxxxxxxxxxx.</p>
-    </div>
-  `;
-};
-
-// Case: Referencing from Shadow DOM (Host Attribute) to Light DOM (Element)
-
-export const Example2a: Story = {
-  argTypes: {
-    workaround: {
-      name: 'Workaround',
-      control: {
-        type: 'radio',
-      },
-      options: ['none', 'ariaControlsElements'],
-    },
-  },
-  args: {
-    workaround: 'none',
-  },
-  render: (args: Args) => html`
-    <post-test-button-control workaround="${args.workaround}" aria-controls-id="id_2">
-      Toggle Text
-    </post-test-button-control>
-  `,
-};
-
-export const Example2b: Story = {
-  argTypes: {
-    workaround: {
-      name: 'Workaround',
-      control: {
-        type: 'radio',
-      },
-      options: ['none', 'ariaControlsElements'],
-    },
-  },
-  args: {
-    workaround: 'none',
-  },
-  render: () => html`
-    <post-test-button-control2 id="toggle3"
-      ><div
-        slot="control-slot"
-        role="button"
-        tabindex="0"
-        aria-expanded="false"
-        aria-controls="text3"
-      >
-        Toggle Text
-      </div>
-    </post-test-button-control2>
-  `,
-};
-
-// Case: Referencing from Shadow DOM (Host Attribute) to Slotted Text (Element)
-export const Example3: Story = {
-  argTypes: {
-    workaround: {
-      name: 'Workaround',
-      control: {
-        type: 'radio',
-      },
-      options: ['none', 'ariaControlsElements'],
-    },
-  },
-  args: {
-    workaround: 'none',
-  },
-  render: (args: Args) => html`
-    <post-test-button-control workaround="${args.workaround}" id="toggle2" aria-controls="text2">
-      Toggle Text
-    </post-test-button-control>
-  `,
-};
-
-// Case: Referencing from Shadow DOM (Host Attribute) to Light DOM (Element) workaround with aria-controls directly set on host
-export const Example4: Story = {
-  render: () => html`
-    <post-test-button aria-controls-id="controlled_id_4">Control Element</post-test-button>
-    <span id="controlled_id_4">Controlled Element 4</span>
-  `,
-};
-
-// Case: Referencing from Shadow Dom to Slotted Text (Light DOM) workaround with aria-controls directly set on host
-export const Example5: Story = {
-  render: () => html`
-    <post-test-button aria-controls-id="controlled_id_5">
-      <span slot="control-slot" id="controlled_id_5">Controlled Element 5 (Slotted)</span>
-    </post-test-button>
-  `,
-};
-
-// Case: Standard Light DOM to Shadow DOM
-export const Example6: Story = {
-  render: () => html`
-    <div class="btn btn-primary" aria-controls="controlled_id_6" role="button" tabindex="0">
-      <post-icon name="1022"></post-icon>
-      Control Element
-    </div>
-    <post-test-span2></post-test-span2>
-  `,
-};
-
-// Case: Shadow DOM to other Shadow Dom workaround
-export const Example7: Story = {
-  render: () => html`
-    <post-test-span2 id="controlled_id_7_host"></post-test-span2>
-    <post-test-button aria-controls="controlled_id_7"></post-test-button>
-  `,
-};
diff --git a/packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-described-by/aria-described-by.docs.mdx b/packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-described-by/aria-described-by.docs.mdx
deleted file mode 100644
index dcd238dd22..0000000000
--- a/packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-described-by/aria-described-by.docs.mdx
+++ /dev/null
@@ -1,93 +0,0 @@
-import { Meta, Canvas, Source, Controls } from '@storybook/blocks';
-import * as CCR from './aria-described-by.stories';
-
-<Meta of={CCR} />
-
-# Aria-Describedby
-
-<div className="lead">
-  In the Light DOM, `aria-describedby` is used to give an element its accessible name by referencing
-  the id of another element or multiple elements that contain the desired text.
-</div>
-<div>
-  This is useful when a simple text label isn't directly associated or when the name needs to be
-  combined from different pieces of text.
-</div>
-
-### I. Referencing Within the Same DOM Tree ✔️
-
-<ul>
-  <li>Light DOM → Light DOM</li>
-
-</ul>
-  <Canvas of={CCR.ExampleHTML} sourceState="shown" />
-
-### II. Referencing From Outside a Shadow DOM Into That Shadow DOM ❌
-
-<ul>
-  <li>Light DOM → Shadow DOM</li>
-  <li>Slotted Content → Shadow DOM</li>
-</ul>
-
-Standard `aria-describedby` <b>cannot reference elements located inside a Shadow DOM</b> from outside of it. This is because IDs inside a Shadow DOM are encapsulated and not accessible from the Light DOM or other Shadow DOMs.
-
-##### Possible Workarounds
-
-###### 1. `Element:ariaDescribedByElements` (Non SSR compatible: to be tested)
-
-<b>Light DOM → Shadow DOM Example</b>
-<Canvas of={CCR.Example2} sourceState="shown" />
-<div className="hide-col-default">
-  <Controls of={CCR.Example2} />
-</div>
-
-<b>Slotted Content → Shadow DOM Example</b>
-<Canvas of={CCR.Example3} sourceState="shown" />
-<div className="hide-col-default">
-  <Controls of={CCR.Example3} />
-</div>
-
-###### 2. Set `aria-describedby`on the host (for SSR Components: to be tested)
-
-An option is to set the following attributes directly on the host of the target component:
-
-<ul>
-  <li> the `aria-describedby`</li>
-  <li> a semantic `role` (e.g. `textbox`, `button`)</li>
-  <li> `tabindex="0"`</li>
-</ul>
-
-<b>Light DOM → Shadow DOM Example</b>
-<Canvas of={CCR.Example4} sourceState="shown" />
-
-<b>Slotted Content → Shadow DOM Example</b>
-<Canvas of={CCR.Example5} sourceState="shown" />
-
-### III. Referencing From Inside a Shadow DOM Out to the Light DOM ❌
-
-<ul>
-  <li>Shadow DOM → Light DOM</li>
-  <li>Shadow DOM → Slotted Content</li>
-</ul>
-
-Similarly to the previous case, <b>referencing an element located outside a Shadow DOM from an element inside that Shadow DOM using standard `aria-describedby` is not possible</b>. The strong encapsulation of the Shadow DOM prevents elements within it from directly accessing and referencing the IDs of elements in the Light DOM.
-
-##### Possible Workaround
-
-An option is to set the `id` directly on the host of the referencing element. Please note that, in this case all the visible text inside the referencing component will be assigned as the Accessible Name of the target element.
-
-<Canvas of={CCR.Example6} sourceState="shown" />
-
-##### IV. Referencing From One Shadow DOM To Another Shadow DOM
-
-<ul>
-  <li>Shadow DOM → Other Shadow DOM</li>
-</ul>
-
-Referencing an element located inside <b>one Shadow DOM</b> from an element located inside a <b>different, separate Shadow DOM</b> using standard `aria-describedby` <b>is also not possible</b>. Similar to the other cross-boundary scenarios, the IDs are scoped within their respective Shadow DOMs.
-
-##### Possible Workaround
-
-In this case, in order for the relationship to work, the referencing element must have the `id` directly set on its host (see workaround of case III) and the target element must have the `aria-describedby`, `role` and `tabindex="0"` set on its host (see workaround of case II).
-
-<Canvas of={CCR.Example7} sourceState="shown" />
diff --git a/packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-described-by/aria-described-by.stories.ts b/packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-described-by/aria-described-by.stories.ts
deleted file mode 100644
index 0761636f49..0000000000
--- a/packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-described-by/aria-described-by.stories.ts
+++ /dev/null
@@ -1,105 +0,0 @@
-import { StoryObj, Args } from '@storybook/web-components';
-import { MetaExtended } from '@root/types';
-import { html } from 'lit';
-
-const meta: MetaExtended = {
-  id: '76ade552-2c03-4d6d-9dce-28daa340f3g6',
-  title:
-    'Accessibility Practices/Foundational Structure And Semantics/Reference Relationships/Crossing The Shadow Dom/Aria-DescribedBy',
-  parameters: {
-    badges: [],
-  },
-};
-
-export default meta;
-
-type Story = StoryObj;
-
-// Case: Standard Light DOM to Light DOM
-export const ExampleHTML: Story = {
-  render: () => html`
-    <div class="btn btn-primary" aria-describedby="id_1" role="button" tabindex="0">
-      <post-icon name="1022"></post-icon>
-    </div>
-    <span id="id_1">My Description</span>
-  `,
-};
-
-// Case: Referencing from Shadow DOM (Host Attribute) to Light DOM (Element) workaround setting programmatically the relevant Element property
-export const Example2: Story = {
-  argTypes: {
-    workaround: {
-      name: 'Workaround',
-      control: {
-        type: 'radio',
-      },
-      options: ['none', 'ariaDescribedByElements'],
-    },
-  },
-  args: {
-    workaround: 'none',
-  },
-  render: (args: Args) => html`
-    <post-test-button2
-      aria-describedby-id="id_2"
-      workaround="${args.workaround}"
-    ></post-test-button2>
-    <span id="id_2">My Description</span>
-  `,
-};
-
-// Case: Referencing from Shadow DOM (Host Attribute) to Slotted Content (Element) workaround setting programmatically the relevant Element property
-export const Example3: Story = {
-  argTypes: {
-    workaround: {
-      name: 'Workaround',
-      control: {
-        type: 'radio',
-      },
-      options: ['none', 'ariaDescribedByElements'],
-    },
-  },
-  args: {
-    workaround: 'none',
-  },
-  render: (args: Args) => html`
-    <post-test-button3 workaround="${args.workaround}"
-      ><span slot="label-slot">My Description</span></post-test-button3
-    >
-  `,
-};
-
-// Case: Referencing from Shadow Dom to Light DOM workaround with aria-describedby directly set on host
-export const Example4: Story = {
-  render: () => html`
-    <post-test-button aria-describedby-id="id_4"></post-test-button>
-    <span id="id_4">My Description</span>
-  `,
-};
-
-// Case: Referencing from Shadow Dom to Slotted Content (Light DOM) workaround with aria-describedby directly set on host
-export const Example5: Story = {
-  render: () => html`
-    <post-test-button aria-describedby-id="id_5"
-      ><span slot="label-slot" id="id_5">My Description</span>
-    </post-test-button>
-  `,
-};
-
-// Case: Standard Light DOM to Shadow DOM workaround
-export const Example6: Story = {
-  render: () => html`
-    <div class="btn btn-primary" aria-describedby="id_6" role="button" tabindex="0">
-      <post-icon name="1022"></post-icon>
-    </div>
-    <post-test-span2 id="id_6"></post-test-span2>
-  `,
-};
-
-// Case: Shadow DOM to other Shadow Dom workaround
-export const Example7: Story = {
-  render: () => html`
-    <post-test-span2 id="id_7"></post-test-span2>
-    <post-test-button aria-describedby="id_7"></post-test-button>
-  `,
-};
diff --git a/packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-labelled-by/aria-labelled-by.docs.mdx b/packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-labelled-by/aria-labelled-by.docs.mdx
deleted file mode 100644
index b0635d1cfa..0000000000
--- a/packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-labelled-by/aria-labelled-by.docs.mdx
+++ /dev/null
@@ -1,91 +0,0 @@
-import { Meta, Canvas, Source, Controls } from '@storybook/blocks';
-import * as CCR from './aria-labelled-by.stories';
-
-<Meta of={CCR} />
-
-# Aria-Labelledby
-
-<div className="lead">
-  In the Light DOM, `aria-labelledby` is used to give an element its accessible name by referencing
-  the id of another element or multiple elements that contain the desired text.
-</div>
-<div>
-  This is useful when a simple text label isn't directly associated or when the name needs to be
-  combined from different pieces of text.
-</div>
-### I. Referencing Within the Same DOM Tree ✔️
-
-<ul>
-  <li>Light DOM → Light DOM</li>
-
-</ul>
-  <Canvas of={CCR.ExampleHTML} sourceState="shown" />
-### II. Referencing From Outside a Shadow DOM Into That Shadow DOM ❌
-
-<ul>
-  <li>Light DOM → Shadow DOM</li>
-  <li>Slotted Content → Shadow DOM</li>
-</ul>
-
-Standard `aria-labelledby` <b>cannot reference elements located inside a Shadow DOM</b> from outside of it. This is because IDs inside a Shadow DOM are encapsulated and not accessible from the Light DOM or other Shadow DOMs.
-
-##### Possible Workarounds
-
-###### 1. `Element:ariaLabelledByElements` (Non SSR compatible: to be tested)
-
-<b>Light DOM → Shadow DOM Example</b>
-<Canvas of={CCR.Example2} sourceState="shown" />
-<div className="hide-col-default">
-  <Controls of={CCR.Example2} />
-</div>
-
-<b>Slotted Content → Shadow DOM Example</b>
-<Canvas of={CCR.Example3} sourceState="shown" />
-<div className="hide-col-default">
-  <Controls of={CCR.Example3} />
-</div>
-
-###### 2. Set `aria-labelledby`on the host (for SSR Components: to be tested)
-
-An option is to set the following attributes directly on the host of the target component:
-
-<ul>
-  <li> the `aria-labelledby`</li>
-  <li> a semantic `role` (e.g. `textbox`, `button`)</li>
-  <li> `tabindex="0"`</li>
-</ul>
-
-<b>Light DOM → Shadow DOM Example</b>
-<Canvas of={CCR.Example4} sourceState="shown" />
-
-<b>Slotted Content → Shadow DOM Example</b>
-<Canvas of={CCR.Example5} sourceState="shown" />
-
-### III. Referencing From Inside a Shadow DOM Out to the Light DOM ❌
-
-<ul>
-  <li>Shadow DOM → Light DOM</li>
-  <li>Shadow DOM → Slotted Content</li>
-</ul>
-
-Similarly to the previous case, <b>referencing an element located outside a Shadow DOM from an element inside that Shadow DOM using standard `aria-labelledby` is not possible</b>. The strong encapsulation of the Shadow DOM prevents elements within it from directly accessing and referencing the IDs of elements in the Light DOM.
-
-##### Possible Workaround
-
-An option is to set the `id` directly on the host of the referencing element. Please note that, in this case all the visible text inside the referencing component will be assigned as the Accessible Name of the target element.
-
-<Canvas of={CCR.Example6} sourceState="shown" />
-
-##### IV. Referencing From One Shadow DOM To Another Shadow DOM
-
-<ul>
-  <li>Shadow DOM → Other Shadow DOM</li>
-</ul>
-
-Referencing an element located inside <b>one Shadow DOM</b> from an element located inside a <b>different, separate Shadow DOM</b> using standard `aria-labelledby` <b>is also not possible</b>. Similar to the other cross-boundary scenarios, the IDs are scoped within their respective Shadow DOMs.
-
-##### Possible Workaround
-
-In this case, in order for the relationship to work, the referencing element must have the `id` directly set on its host (see workaround of case III) and the target element must have the `aria-labelledby`, `role` and `tabindex="0"` set on its host (see workaround of case II).
-
-<Canvas of={CCR.Example7} sourceState="shown" />
diff --git a/packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-labelled-by/aria-labelled-by.stories.ts b/packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-labelled-by/aria-labelled-by.stories.ts
deleted file mode 100644
index 5af88a2f35..0000000000
--- a/packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-labelled-by/aria-labelled-by.stories.ts
+++ /dev/null
@@ -1,105 +0,0 @@
-import { StoryObj, Args } from '@storybook/web-components';
-import { MetaExtended } from '@root/types';
-import { html } from 'lit';
-
-const meta: MetaExtended = {
-  id: '76ade552-2c03-4d6d-9dce-28daa340f7d5',
-  title:
-    'Accessibility Practices/Foundational Structure And Semantics/Reference Relationships/Crossing The Shadow Dom/Aria-LabelledBy',
-  parameters: {
-    badges: [],
-  },
-};
-
-export default meta;
-
-type Story = StoryObj;
-
-// Case: Standard Light DOM to Light DOM
-export const ExampleHTML: Story = {
-  render: () => html`
-    <span id="id_1">My Text</span>
-    <div class="btn btn-primary" aria-labelledby="id_1" role="button" tabindex="0">
-      <post-icon name="1022"></post-icon>
-    </div>
-  `,
-};
-
-// Case: Referencing from Shadow DOM (Host Attribute) to Light DOM (Element) workaround setting programmatically the relevant Element property
-export const Example2: Story = {
-  argTypes: {
-    workaround: {
-      name: 'Workaround',
-      control: {
-        type: 'radio',
-      },
-      options: ['none', 'ariaLabelledByElements'],
-    },
-  },
-  args: {
-    workaround: 'none',
-  },
-  render: (args: Args) => html`
-    <span id="id_2">My Text</span>
-    <post-test-button2
-      aria-labelledby-id="id_2"
-      workaround="${args.workaround}"
-    ></post-test-button2>
-  `,
-};
-
-// Case: Referencing from Shadow DOM (Host Attribute) to Slotted Content (Element) workaround setting programmatically the relevant Element property
-export const Example3: Story = {
-  argTypes: {
-    workaround: {
-      name: 'Workaround',
-      control: {
-        type: 'radio',
-      },
-      options: ['none', 'ariaLabelledByElements'],
-    },
-  },
-  args: {
-    workaround: 'none',
-  },
-  render: (args: Args) => html`
-    <post-test-button3 workaround="${args.workaround}"
-      ><span slot="label-slot">My Text</span></post-test-button3
-    >
-  `,
-};
-
-// Case: Referencing from Shadow Dom to the Light DOM workaround with aria-labelledby directly set on host
-export const Example4: Story = {
-  render: () => html`
-    <span id="id_4">My Text</span>
-    <post-test-button aria-labelledby-id="id_4"></post-test-button>
-  `,
-};
-
-// Case: Referencing from Shadow Dom to Slotted Content (Light) DOM workaround with aria-labelledby directly set on host
-export const Example5: Story = {
-  render: () => html`
-    <post-test-button aria-labelledby-id="id_5"
-      ><span slot="label-slot" id="id_5">My Text</span></post-test-button
-    >
-  `,
-};
-
-// Case: Standard Light DOM to Shadow DOM workaround
-export const Example6: Story = {
-  render: () => html`
-    <post-test-span id="id_6"></post-test-span>
-    <div class="btn btn-primary" aria-labelledby="id_6" role="button" tabindex="0">
-      <post-icon name="1022"></post-icon>
-    </div>
-  `,
-};
-
-// Case: Shadow DOM to other Shadow Dom workaround
-export const Example7: Story = {
-  render: () => html`
-    <post-test-span id="id_7"></post-test-span>
-    <post-test-button aria-labelledby="id_7"></post-test-button>
-  `,
-};
diff --git a/packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-roles/list-role/list-role.docs.mdx b/packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-roles/list-role/list-role.docs.mdx
deleted file mode 100644
index 8cca546c29..0000000000
--- a/packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-roles/list-role/list-role.docs.mdx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { Meta, Canvas, Source, Controls } from '@storybook/blocks';
-import * as CCR from './list-role.stories';
-
-<Meta of={CCR} />
-
-# role="list"
-
-<div className="lead">
-  The `role` attribute defines the purpose of a web element (e.g. `role="menu"`, `role="tab"`,
-  `role="dialog"`, `role="accordion"`, etc.) for assistive technologies like screen readers.
-</div>
-
-<div>
-  While native HTML elements have implicit roles, the role attribute adds meaning to non-semantic
-  elements like `div` or `span` when used for custom interactive components.
-</div>
-
-### I. All Within the Same DOM Tree ✔️
-
-<ul>
-  <li>Basic HTML Example</li>
-</ul>
-<Canvas of={CCR.ExampleHTML} sourceState="shown" />
-<ul>
-  <li>Light DOM → Component with Slotted Children</li>
-</ul>
-<Canvas of={CCR.Example1a} sourceState="shown" />
-
-<ul>
-  <li> Component host → Same Component Slotted Children</li>
-</ul>
-<Canvas of={CCR.Example1b} sourceState="shown" />
-
-### II. Parent in the Light DOM - Children Into That Shadow DOM
-
-<ul>
-  <li>Light DOM → Shadow DOM ❓</li>
-  <Canvas of={CCR.Example2a} sourceState="shown" />
-</ul>
-<ul>
-  <li>Slotted Parent → Shadow DOM ❌</li>
-  <Canvas of={CCR.Example2b} sourceState="shown" />
-</ul>
-Light DOM elements with an ARIA parent role cannot be associated to children elements with the
-respective ARIA child roles across the Shadow DOM.
-
-### III. Parent in the Shadow DOM - Children Out to the Light DOM ✔️
-
-<ul>
-  <li>Shadow DOM → Light DOM </li>
-</ul>
-
-<Canvas of={CCR.Example3} sourceState="shown" />
-
-### IV. Referencing From One Shadow DOM To Another Shadow DOM ✔️
-
-<ul>
-  <li>Shadow DOM → Other nested Shadow DOM</li>
-</ul>
-
-<Canvas of={CCR.Example4} sourceState="shown" />
diff --git a/packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-roles/list-role/list-role.stories.ts b/packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-roles/list-role/list-role.stories.ts
deleted file mode 100644
index f3f60e905e..0000000000
--- a/packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/aria-roles/list-role/list-role.stories.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import { StoryObj } from '@storybook/web-components';
-import { MetaExtended } from '@root/types';
-import { html } from 'lit';
-
-const meta: MetaExtended = {
-  id: '76ade552-2c03-4d6d-9dce-28daa346f456',
-  title:
-    'Accessibility Practices/Foundational Structure And Semantics/Reference Relationships/Crossing The Shadow Dom/Aria-Roles/List Role',
-  parameters: {
-    badges: [],
-  },
-};
-
-export default meta;
-
-type Story = StoryObj;
-
-// Case: Standard Light DOM to Light DOM
-export const ExampleHTML: Story = {
-  render: () => html`
-    <div role="list" tabindex="0">
-      <div role="listitem">item 1</div>
-      <div role="listitem">item 2</div>
-      <div role="listitem">item 3</div>
-    </div>
-  `,
-};
-
-// Case: Light Dom to child components with Slotted content
-export const Example1a: Story = {
-  render: () => html`
-    <div role="list" tabindex="0">
-      <post-test-list-item-group>
-        <div slot="post-list-item" role="listitem">item 1</div>
-        <div slot="post-list-item" role="listitem">item 2</div>
-        <div slot="post-list-item" role="listitem">item 3</div>
-      </post-test-list-item-group>
-    </div>
-  `,
-};
-
-// Case: Parent in the Light - children with Slotted content same component
-export const Example1b: Story = {
-  render: () => html`
-    <post-test-list-item-group role="list" tabindex="0">
-      <div slot="post-list-item" role="listitem">item 1</div>
-      <div slot="post-list-item" role="listitem">item 2</div>
-      <div slot="post-list-item" role="listitem">item 3</div>
-    </post-test-list-item-group>
-  `,
-};
-
-// Case: Parent in the Light (Component host) -> Children in the ShadowDOM
-export const Example2a: Story = {
-  render: () =>
-    html` <post-test-list-item-group-2 role="list" tabindex="0"></post-test-list-item-group-2> `,
-};
-
-// Case: Parent in Light (slotted content) - Children in the ShadowDOM
-export const Example2b: Story = {
-  render: () =>
-    html`<post-test-list-item-group-2 tabindex="0"
-      ><div slot="list-parent" role="list"></div>
-    </post-test-list-item-group-2> `,
-};
-
-// Case: Parent in the Shadow - Children in the Light
-export const Example3: Story = {
-  render: () => html`
-    <post-test-list>
-      <div role="listitem" slot="post-list-item">item 1</div>
-      <div role="listitem" slot="post-list-item">item 2</div>
-      <div role="listitem" slot="post-list-item">item 3</div>
-    </post-test-list>
-  `,
-};
-
-// Case: Referencing from Shadow DOM (Host Attribute) to Slotted Content (Element)
-export const Example4: Story = {
-  render: () => html`<post-test-list-2></post-test-list-2> `,
-};
diff --git a/packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/for/for.docs.mdx b/packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/for/for.docs.mdx
deleted file mode 100644
index ff70e5dd22..0000000000
--- a/packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/for/for.docs.mdx
+++ /dev/null
@@ -1,106 +0,0 @@
-import { Meta, Canvas, Source, Controls } from '@storybook/blocks';
-import * as CCR from './for.stories';
-
-<Meta of={CCR} />
-
-# for
-
-##
-
-<div className="lead">The native HTML `for`/`id` relationship is a fundamental way to connect a `<label>` element to a form control (such as `<input>`, `<select>`, `<textarea>`, etc. or even to a custom form-associated control) within the same document structure (same DOM tree).</div> 
-<div>This connection is established by setting the for attribute on the `<label>` to match the `id` attribute of the form control it describes. </div>
-<div>This relationship is crucial for accessibility, as it allows assistive technologies like screen readers to correctly associate and announce the label text when focus is placed on the associated input field, thereby making forms understandable and navigable.</div>
-
-### I. Referencing Within the Same DOM Tree ✔️
-
-<ul>
-  <li>Light DOM → Light DOM</li>
-  <li>Shadow DOM → Same Shadow DOM</li>
-</ul>
-
-<Canvas of={CCR.ExampleHTML} sourceState="shown" />
-
-### II. Referencing From Outside a Shadow DOM Into That Shadow DOM ❌
-
-<ul>
-  <li>Light DOM → Shadow DOM</li>
-  <li>Slotted Content → Shadow DOM</li>
-</ul>
-
-<p>When the referencing element (e.g. `<label for="...">`) is in the Light DOM and the target element is inside a Shadow DOM, the `for` attribute <b>cannot reference elements inside the Shadow DOM</b> using the standard id mechanism.</p>
-
-##### Possible Workarounds
-
-###### 1. `Element:ariaLabelledByElements` (Non SSR compatible: to be tested)
-
-Define programmatically the `ariaLabelledByElements` property of the element. This solution creates the relationship without the use of an `id`.
-
-<b>Light DOM → Shadow DOM Example</b>
-<Canvas of={CCR.Example2} sourceState="shown" />
-<div className="hide-col-default">
-  <Controls of={CCR.Example2} />
-</div>
-
-<b>Slotted Content → Shadow DOM Example</b>
-<Canvas of={CCR.Example3} sourceState="shown" />
-<div className="hide-col-default">
-  <Controls of={CCR.Example3} />
-</div>
-
-###### 2. Set `aria-labelledby`on the host (for SSR Components : to be tested)
-
-This solution involves setting the `aria-labelledby` directly on the host. In order for this solution to work, the host must have a set `role=""` along with `tabindex="0"`.
-This defines the label text as the Accessible Name of the component, but NVDA does not announce it when an interactive element (e.g. an `<input>`) exists inside the component.
-
-Directly setting `aria-labelledby` on the host.
-
-<Canvas of={CCR.Example5} sourceState="shown" />
-<div className="hide-col-default">
-  <Controls of={CCR.Example5} />
-</div>
-
-Setting `aria-labelledby` via `ElementInternals`.
-
-<Canvas of={CCR.Example7} sourceState="shown" />
-<div className="hide-col-default">
-  <Controls of={CCR.Example7} />
-</div>
-
-### III. Referencing From Inside a Shadow DOM Out to the Light DOM ❌
-
-<ul>
-  <li>Shadow DOM → Light DOM</li>
-  <li>Shadow DOM → Slotted Content</li>
-</ul>
-<p>
-  A `for` attribute on an element inside a Shadow DOM{' '}
-  <b>cannot be used to reference the id of an element outside that Shadow DOM</b> (in the Light DOM
-  or an ancestor Shadow DOM). The way the HTML for attribute resolves an id is strictly limited to
-  the element's shadow-including tree.
-</p>
-
-<Canvas of={CCR.Example4} sourceState="shown" />
-
-##### Possible Workaround
-
-The `Element:ariaLabelledByElements` does not work in this case.
-
-An alternative is to directly add an `id` on the host of the referencing element and an `aria-labelledby`on the target element.
-
-### IV.Referencing From a Shadow DOM Out to another Shadow DOM ❌
-
-<ul>
-  <li>Shadow DOM → Other Shadow DOM</li>
-</ul>
-
-##### Possible Workaround
-
-The `Element:ariaLabelledByElements` does not work in this case.
-
-An alternative would be to combine workarounds for cases II and III.
-This involves setting an `id` on the host of the referencing element and an `aria-labelledby` directly on the host of the target element along with `role=""` and `tabindex="0"`. Same limitation applies as in case II: the label text is defined as the Accessible Name of the component, but NVDA does not announce if an interactive element (e.g. an `<input>`) exists inside the target component.
-
-<Canvas of={CCR.Example6} sourceState="shown" />
-<div className="hide-col-default">
-  <Controls of={CCR.Example6} />
-</div>
diff --git a/packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/for/for.stories.ts b/packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/for/for.stories.ts
deleted file mode 100644
index 294ea426f3..0000000000
--- a/packages/documentation/src/stories/accessibility-practices/functional-structure-and-semantics/reference-relationships/crossing-the-shadow-dom/for/for.stories.ts
+++ /dev/null
@@ -1,116 +0,0 @@
-import { StoryObj, Args } from '@storybook/web-components';
-import { MetaExtended } from '@root/types';
-import { html } from 'lit';
-
-const meta: MetaExtended = {
-  id: '76ade552-2c03-4d6d-9dce-28daa340f7d3',
-  title:
-    'Accessibility Practices/Foundational Structure And Semantics/Reference Relationships/Crossing The Shadow Dom/For',
-  parameters: {
-    badges: [],
-  },
-
-  decorators: [story => html`<div style="width:300px;height:60px;display:block">${story()}</div>`],
-};
-
-export default meta;
-
-type Story = StoryObj;
-
-// Case: Standard Light DOM to Light DOM
-export const ExampleHTML: Story = {
-  render: () => html`
-  
-    <label for="id_0">My Text</label>
-    <input id="id_0"></input>
-  `,
-};
-
-// Case: Referencing from Shadow DOM (Host Attribute) to Light DOM (Element) workaround setting programmatically the relevant Element property
-export const Example2: Story = {
-  argTypes: {
-    workaround: {
-      name: 'Workaround',
-      control: {
-        type: 'radio',
-      },
-      options: ['none', 'ariaLabelledByElements'],
-    },
-  },
-  args: {
-    workaround: 'none',
-  },
-  render: (args: Args) => html`
-    <label for="id_1">My Text</label>
-    <post-test-target workaround="${args.workaround}" aria-labelledby-id="id_1"></post-test-target>
-  `,
-};
-
-// Case: Referencing from Shadow DOM (Host Attribute) to Slotted Content (Element) workaround setting programmatically the relevant Element property
-
-export const Example3: Story = {
-  argTypes: {
-    workaround: {
-      name: 'Workaround',
-      control: {
-        type: 'radio',
-      },
-      options: ['none', 'ariaLabelledByElements'],
-    },
-  },
-  args: {
-    workaround: 'none',
-  },
-  render: (args: Args) => html`
-    <post-test-target2 workaround="${args.workaround}">
-      <label slot="label-slot">My Text</label></post-test-target2
-    >
-  `,
-};
-
-// Case: Referencing from Shadow Dom to Light DOM workaround with aria-labelledby directly set on host
-export const Example5: Story = {
-  render: () => html`
-    <post-test-target3 aria-labelledby="id_5">
-      <label id="id_5" slot="label-slot">My Text</label>
-    </post-test-target3>
-  `,
-};
-
-// Case: Referencing from Shadow Dom to Slotted Content (Light) DOM workaround with aria-labelledby directly set on host
-export const Example7: Story = {
-  render: () => html`
-    <post-test-target4 aria-labelledby="id_7">
-      <label id="id_7" slot="label-slot">My Text</label>
-    </post-test-target4>
-  `,
-};
-
-// Case: Standard Light DOM to Shadow DOM workaround
-export const Example4: Story = {
-  argTypes: {
-    workaround: {
-      name: 'Workaround',
-      control: {
-        type: 'radio',
-      },
-      options: ['none', 'ariaLabelledByElements (not working)'],
-    },
-  },
-  args: {
-    workaround: 'none',
-  },
-  render: (args: Args) => html`
-    <post-test-label workaround="${args.workaround}" for="id_4" id="id_4"> </post-test-label>
-    <input aria-labelledby="id_4"></input>
-  `,
-};
-
-// Case: Shadow DOM to other Shadow Dom workaround
-
-export const Example6: Story = {
-  render: () => html`
-    <post-test-label id="id_6"></post-test-label>
-    <post-test-target3 aria-labelledby="id_6"></post-test-target3>
-  `,
-};
diff --git a/packages/styles/src/components/form-textarea.scss b/packages/styles/src/components/form-textarea.scss
index 50f0a65dec..2dc27f2b8a 100644
--- a/packages/styles/src/components/form-textarea.scss
+++ b/packages/styles/src/components/form-textarea.scss
@@ -13,7 +13,8 @@ textarea.form-control {
   width: 100%;
   appearance: none; // Fix appearance for date inputs in Safari
   background-clip: padding-box;
-  border: 2px tokens.get('textarea-border-style-enabled') tokens.get('textarea-enabled-border');
+  border: tokens.get('textarea-border-width') tokens.get('textarea-border-style-enabled')
+    tokens.get('textarea-enabled-border');
   position: relative;
   border-radius: tokens.get('textarea-border-radius');
   background-color: tokens.get('textarea-enabled-bg');

From 630fa381a6d5712697d1c83d0039dcd2261a4c88 Mon Sep 17 00:00:00 2001
From: Myrta Sakellariou <myrta.sakellariou@gmail.com>
Date: Fri, 13 Jun 2025 14:23:30 +0200
Subject: [PATCH 24/26] revert files

---
 packages/components/src/index.html           | 2 --
 packages/documentation/.storybook/manager.ts | 1 -
 packages/documentation/.storybook/preview.ts | 3 ---
 3 files changed, 6 deletions(-)

diff --git a/packages/components/src/index.html b/packages/components/src/index.html
index 83b6e98003..ea59018f9d 100644
--- a/packages/components/src/index.html
+++ b/packages/components/src/index.html
@@ -191,7 +191,5 @@ <h1>Components package playground</h1>
       <option value="compact">Post compact</option>
     </select>
     <hr />
-    <post-test-target input-id="test2" workaround="ariaLabelledByElements"></post-test-target>
-    <label for="test2"> test testst</label>
   </body>
 </html>
diff --git a/packages/documentation/.storybook/manager.ts b/packages/documentation/.storybook/manager.ts
index c700327037..c52ce3e90d 100644
--- a/packages/documentation/.storybook/manager.ts
+++ b/packages/documentation/.storybook/manager.ts
@@ -20,7 +20,6 @@ addons.setConfig({
       'utilities',
       'templates',
       'guidelines',
-      'accessibility-practices',
     ],
   },
 
diff --git a/packages/documentation/.storybook/preview.ts b/packages/documentation/.storybook/preview.ts
index 13c6af166e..2366b05aa1 100644
--- a/packages/documentation/.storybook/preview.ts
+++ b/packages/documentation/.storybook/preview.ts
@@ -65,9 +65,6 @@ const preview: Preview = {
           // Category - Guidelines
           'Guidelines',
 
-          // Category - Accessibility (INTERNAL ONLY)
-          'Accessibility Practices',
-
           // Category - Misc
           'Misc',
           ['Mission', 'Design Principles', 'Migration'],

From 97ee6e994cf2b19af865a950cf3fd91794c2ef5e Mon Sep 17 00:00:00 2001
From: Myrta Sakellariou <myrta.sakellariou@gmail.com>
Date: Fri, 13 Jun 2025 14:25:30 +0200
Subject: [PATCH 25/26] revert file

---
 packages/documentation/.storybook/styles/manager.scss | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/documentation/.storybook/styles/manager.scss b/packages/documentation/.storybook/styles/manager.scss
index 01029b249d..74817c5858 100644
--- a/packages/documentation/.storybook/styles/manager.scss
+++ b/packages/documentation/.storybook/styles/manager.scss
@@ -112,10 +112,7 @@
 
   #misc,
   [data-item-id^='health'],
-  :is(#raw-components, [data-parent-id='raw-components']):where([data-env='production'] *),
-  :is(#accessibility-practices, [data-parent-id='accessibility-practices']):where(
-      [data-env='production'] *
-    ) {
+  :is(#raw-components, [data-parent-id='raw-components']):where([data-env='production'] *) {
     display: none;
   }
 

From cde59b4f03a313e06955679bc082c45139598fe8 Mon Sep 17 00:00:00 2001
From: Myrta Sakellariou <myrta.sakellariou@gmail.com>
Date: Fri, 13 Jun 2025 14:31:28 +0200
Subject: [PATCH 26/26] delete obsolete component

---
 .../post-test-span2/post-test-span2.scss      |  1 -
 .../post-test-span2/post-test-span2.tsx       | 60 -------------------
 .../src/components/post-test-span2/readme.md  | 20 -------
 3 files changed, 81 deletions(-)
 delete mode 100644 packages/components/src/components/post-test-span2/post-test-span2.scss
 delete mode 100644 packages/components/src/components/post-test-span2/post-test-span2.tsx
 delete mode 100644 packages/components/src/components/post-test-span2/readme.md

diff --git a/packages/components/src/components/post-test-span2/post-test-span2.scss b/packages/components/src/components/post-test-span2/post-test-span2.scss
deleted file mode 100644
index 28612a51ef..0000000000
--- a/packages/components/src/components/post-test-span2/post-test-span2.scss
+++ /dev/null
@@ -1 +0,0 @@
-@use '@swisspost/design-system-styles/post-default.scss';
diff --git a/packages/components/src/components/post-test-span2/post-test-span2.tsx b/packages/components/src/components/post-test-span2/post-test-span2.tsx
deleted file mode 100644
index fda6cb7133..0000000000
--- a/packages/components/src/components/post-test-span2/post-test-span2.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { Component, h, Host, Prop, Element } from '@stencil/core';
-import { version } from '@root/package.json';
-
-@Component({
-  tag: 'post-test-span2',
-  styleUrl: 'post-test-span2.scss',
-  shadow: true,
-})
-export class PostTestSpan2 {
-  @Element() host: HTMLPostTestSpan2Element;
-
-  /**
-   * Defines the spanId
-   */
-  @Prop() spanId?: string;
-
-  /**
-   * Defines the label text
-   */
-  @Prop() labelText: string;
-
-  /**
-   * Defines the id of the button to reference
-   */
-  @Prop() btnId: string;
-
-  /**
-   * Defines the selected workaround
-   */
-  @Prop() workaround?: string;
-
-  private setAriaLabel() {
-    const selector = `#${this.btnId}`;
-    const targetInput = document.querySelector(selector);
-    if (targetInput) {
-      if (this.workaround == 'arialabel') {
-        targetInput.setAttribute('aria-label-text', this.labelText);
-      } else {
-        targetInput.removeAttribute('aria-label-text');
-      }
-    }
-  }
-
-  componentWillLoad() {
-    this.setAriaLabel();
-  }
-
-  componentDidUpdate() {
-    this.setAriaLabel();
-  }
-
-  render() {
-    return (
-      <Host data-version={version}>
-        <span>My Text</span>
-        <slot></slot>
-      </Host>
-    );
-  }
-}
diff --git a/packages/components/src/components/post-test-span2/readme.md b/packages/components/src/components/post-test-span2/readme.md
deleted file mode 100644
index 0e09377b1e..0000000000
--- a/packages/components/src/components/post-test-span2/readme.md
+++ /dev/null
@@ -1,20 +0,0 @@
-# post-avatar
-
-
-
-<!-- Auto Generated Below -->
-
-
-## Properties
-
-| Property     | Attribute    | Description                               | Type     | Default     |
-| ------------ | ------------ | ----------------------------------------- | -------- | ----------- |
-| `btnId`      | `btn-id`     | Defines the id of the button to reference | `string` | `undefined` |
-| `labelText`  | `label-text` | Defines the label text                    | `string` | `undefined` |
-| `spanId`     | `span-id`    | Defines the spanId                        | `string` | `undefined` |
-| `workaround` | `workaround` | Defines the selected workaround           | `string` | `undefined` |
-
-
-----------------------------------------------
-
-*Built with [StencilJS](https://stenciljs.com/)*