From 0ae0d789d553e77e81b596ce610ca780dbf7e257 Mon Sep 17 00:00:00 2001
From: oliverschuerch <oliver.schuerch@post.ch>
Date: Thu, 21 Mar 2024 15:14:22 +0100
Subject: [PATCH 1/5] feat(components): add content slot to card-control
 component

---
 .changeset/two-shrimps-argue.md               |  6 +++++
 .../post-card-control/post-card-control.scss  | 26 ++++++++++++-------
 .../post-card-control/post-card-control.tsx   | 12 ++++++++-
 .../components/post-card-control/readme.md    |  7 ++---
 .../card-control/card-control.docs.mdx        | 10 ++++++-
 .../card-control/card-control.stories.ts      | 23 ++++++++++++++--
 6 files changed, 68 insertions(+), 16 deletions(-)
 create mode 100644 .changeset/two-shrimps-argue.md

diff --git a/.changeset/two-shrimps-argue.md b/.changeset/two-shrimps-argue.md
new file mode 100644
index 0000000000..12c29d65b3
--- /dev/null
+++ b/.changeset/two-shrimps-argue.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-components': minor
+---
+
+Added the new named slot `content`, to allow the integration of custom HTML in the card-control component.
diff --git a/packages/components/src/components/post-card-control/post-card-control.scss b/packages/components/src/components/post-card-control/post-card-control.scss
index e2ba443d2a..7b48cbc396 100644
--- a/packages/components/src/components/post-card-control/post-card-control.scss
+++ b/packages/components/src/components/post-card-control/post-card-control.scss
@@ -22,7 +22,8 @@
   --post-card-control-input-bg: #{post.$white};
 
   flex-basis: 100%;
-  display: flex;
+  display: grid;
+  grid-template: 'checkbox label icon' 'checkbox content icon' / min-content auto min-content;
   gap: 0 post.$size-mini;
   padding: post.$size-regular;
   background-color: var(--post-card-control-bg);
@@ -34,7 +35,7 @@
   transition: background-color 100ms linear, border-color 100ms linear;
 
   .card-control--input {
-    flex: 0 0 auto;
+    grid-area: checkbox;
     margin: post.$size-micro 0;
     background-color: var(--post-card-control-input-bg);
     border-color: var(--post-card-control-input-border-color) !important;
@@ -46,21 +47,28 @@
     &:focus-visible {
       box-shadow: none;
     }
+  }
 
-    ~ .card-control--label {
-      flex-grow: 2;
-      margin: post.$size-micro 0;
-      color: inherit !important;
-      pointer-events: none;
-    }
+  .card-control--label {
+    grid-area: label;
+    margin: post.$size-micro 0;
+    padding: 0;
+    color: inherit !important;
+    pointer-events: none;
+    transition-duration: 100ms;
   }
 
   .card-control--description {
+    grid-area: label;
     font-size: 0.75rem;
   }
 
+  .card-control--content {
+    grid-area: content;
+  }
+
   .card-control--icon {
-    flex: 0 0 auto;
+    grid-area: icon;
     width: post.$size-big;
     height: post.$size-big;
     pointer-events: none;
diff --git a/packages/components/src/components/post-card-control/post-card-control.tsx b/packages/components/src/components/post-card-control/post-card-control.tsx
index dffe7f05f0..e97af3af90 100644
--- a/packages/components/src/components/post-card-control/post-card-control.tsx
+++ b/packages/components/src/components/post-card-control/post-card-control.tsx
@@ -26,6 +26,7 @@ let cardControlIds = 0;
 /**
  * @class PostCardControl - representing a stencil component
  *
+ * @slot content - Content to place in the named `description` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Block-level_contentt" target="_blank">block content</a>.<p className="alert alert-sm alert-warning">Even if it is generally possible, we do not recommend using interactive elements in this slot for accessibility reasons.</p>
  * @slot icon - Content to place in the named `icon` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Inline-level_content" target="_blank">inline content</a>.<br>It is only meant for <code>img</code> or <code>svg</code> elements and overrides the `icon` property.</p>
  */
 @Component({
@@ -367,6 +368,7 @@ export class PostCardControl {
             name={this.name}
             value={this.value}
             checked={this.checked}
+            aria-describedby={`${this.controlId}_label ${this.controlId}_content`}
             aria-disabled={this.disabled}
             aria-invalid={this.validity === 'false'}
             onClick={this.controlClickHandler}
@@ -377,7 +379,11 @@ export class PostCardControl {
             onKeyDown={this.controlKeyDownHandler}
           />
 
-          <label htmlFor={this.controlId} class="card-control--label form-check-label">
+          <label
+            id={`${this.controlId}_label`}
+            htmlFor={this.controlId}
+            class="card-control--label form-check-label"
+          >
             {this.label}
             {this.description ? (
               <div class="card-control--description">{this.description}</div>
@@ -387,6 +393,10 @@ export class PostCardControl {
           <div class="card-control--icon">
             <slot name="icon">{this.icon ? <post-icon name={this.icon}></post-icon> : null}</slot>
           </div>
+
+          <div id={`${this.controlId}_content`} class="card-control--content">
+            <slot name="content"></slot>
+          </div>
         </div>
       </Host>
     );
diff --git a/packages/components/src/components/post-card-control/readme.md b/packages/components/src/components/post-card-control/readme.md
index cd78493c3f..b666f4b6a9 100644
--- a/packages/components/src/components/post-card-control/readme.md
+++ b/packages/components/src/components/post-card-control/readme.md
@@ -54,9 +54,10 @@ Type: `Promise<void>`
 
 ## Slots
 
-| Slot     | Description                                                                                                                                                                                                                                                                                     |
-| -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `"icon"` | Content to place in the named `icon` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Inline-level_content" target="_blank">inline content</a>.<br>It is only meant for <code>img</code> or <code>svg</code> elements and overrides the `icon` property.</p> |
+| Slot        | Description                                                                                                                                                                                                                                                                                                                                                      |
+| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `"content"` | Content to place in the named `description` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Block-level_contentt" target="_blank">block content</a>.<p className="alert alert-sm alert-warning">Even if it is generally possible, we do not recommend using interactive elements in this slot for accessibility reasons.</p> |
+| `"icon"`    | Content to place in the named `icon` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Inline-level_content" target="_blank">inline content</a>.<br>It is only meant for <code>img</code> or <code>svg</code> elements and overrides the `icon` property.</p>                                                                  |
 
 
 ## Dependencies
diff --git a/packages/documentation/src/stories/components/card-control/card-control.docs.mdx b/packages/documentation/src/stories/components/card-control/card-control.docs.mdx
index 3e5470f7c3..26ddfb2b06 100644
--- a/packages/documentation/src/stories/components/card-control/card-control.docs.mdx
+++ b/packages/documentation/src/stories/components/card-control/card-control.docs.mdx
@@ -18,7 +18,7 @@ The `<post-card-control>` element is part of the `@swisspost/design-system-compo
 
 ## Examples
 
-### On dark background
+### Dark backgrounds
 
 <Canvas of={CardControlStories.DarkBackground}/>
 
@@ -35,6 +35,14 @@ If this is not enough, you can also use the named `icon` slot and add your very
 
 <Canvas of={CardControlStories.CustomIcon} />
 
+### Custom content
+
+If you need to add other content to the component, you can use the named slot `content` to do so.
+
+<div className="alert alert-md alert-warning">Even if it is generally possible, we do not recommend using interactive elements in this slot for accessibility reasons.</div>
+
+<Canvas of={CardControlStories.CustomContent} />
+
 ### Form Integration
 
 You can use the component directly in your forms, the control value will be available in the `FormData` of the surrounding `<form>` element, just as you are used to from native input elements.
diff --git a/packages/documentation/src/stories/components/card-control/card-control.stories.ts b/packages/documentation/src/stories/components/card-control/card-control.stories.ts
index 1a9effe8cd..726f160e67 100644
--- a/packages/documentation/src/stories/components/card-control/card-control.stories.ts
+++ b/packages/documentation/src/stories/components/card-control/card-control.stories.ts
@@ -25,6 +25,7 @@ const meta: MetaComponent = {
     'validity': 'null',
     'icon': '',
     'slots-icon': '',
+    'slots-content': '',
   },
   argTypes: {
     'type': {
@@ -53,6 +54,16 @@ const meta: MetaComponent = {
         },
       },
     },
+    'slots-icon': {
+      control: {
+        type: 'text',
+      },
+    },
+    'slots-content': {
+      control: {
+        type: 'text',
+      },
+    },
     'method-groupReset': {
       table: {
         disable: true,
@@ -69,7 +80,8 @@ export const Default: Story = {
   render: (args: Args) => {
     const [, updateArgs] = useArgs();
 
-    const icon = html`<span slot="icon">${unsafeHTML(args['slots-icon'])}</span> `;
+    const content = html`<div slot="content">${unsafeHTML(args['slots-content'])}</div>`;
+    const icon = html`<span slot="icon">${unsafeHTML(args['slots-icon'])}</span>`;
 
     return html`
       <post-card-control
@@ -86,7 +98,7 @@ export const Default: Story = {
         @input="${(e: any) => updateArgs({ checked: e.detail.state })}"
         @change="${(e: any) => updateArgs({ checked: e.detail.state })}"
       >
-        ${args['slots-icon'] ? icon : null}
+        ${args['slots-content'] ? content : null} ${args['slots-icon'] ? icon : null}
       </post-card-control>
     `;
   },
@@ -126,6 +138,13 @@ export const DarkBackground: Story = {
   render: Default.render,
 };
 
+export const CustomContent: Story = {
+  args: {
+    'slots-content': '<ul class="mb-0"><li>List item</li><li>List item</li><li>List item</li></ul>',
+  },
+  render: Default.render,
+};
+
 export const CustomIcon: Story = {
   args: {
     'slots-icon':

From db921d02718da289c0136f4c332f67c71f57dc6c Mon Sep 17 00:00:00 2001
From: oliverschuerch <oliver.schuerch@post.ch>
Date: Fri, 22 Mar 2024 11:03:25 +0100
Subject: [PATCH 2/5] chore: refactor the content slot to be the default slot
 in the card-control component

---
 .changeset/two-shrimps-argue.md                    |  2 +-
 .../post-card-control/post-card-control.tsx        |  6 +++---
 .../src/components/post-card-control/readme.md     |  8 ++++----
 .../components/card-control/card-control.docs.mdx  |  2 +-
 .../card-control/card-control.stories.ts           | 14 ++++++++------
 5 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/.changeset/two-shrimps-argue.md b/.changeset/two-shrimps-argue.md
index 12c29d65b3..46c20b0b0e 100644
--- a/.changeset/two-shrimps-argue.md
+++ b/.changeset/two-shrimps-argue.md
@@ -3,4 +3,4 @@
 '@swisspost/design-system-components': minor
 ---
 
-Added the new named slot `content`, to allow the integration of custom HTML in the card-control component.
+Added the new default slot, to allow the integration of custom HTML in the card-control component.
diff --git a/packages/components/src/components/post-card-control/post-card-control.tsx b/packages/components/src/components/post-card-control/post-card-control.tsx
index e97af3af90..d5a7a736e2 100644
--- a/packages/components/src/components/post-card-control/post-card-control.tsx
+++ b/packages/components/src/components/post-card-control/post-card-control.tsx
@@ -26,8 +26,8 @@ let cardControlIds = 0;
 /**
  * @class PostCardControl - representing a stencil component
  *
- * @slot content - Content to place in the named `description` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Block-level_contentt" target="_blank">block content</a>.<p className="alert alert-sm alert-warning">Even if it is generally possible, we do not recommend using interactive elements in this slot for accessibility reasons.</p>
- * @slot icon - Content to place in the named `icon` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Inline-level_content" target="_blank">inline content</a>.<br>It is only meant for <code>img</code> or <code>svg</code> elements and overrides the `icon` property.</p>
+ * @slot default - Content to place into the `default` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Block-level_contentt" target="_blank">block content</a>.<p className="alert alert-sm alert-warning">Even if it is generally possible, we do not recommend using interactive elements in this slot for accessibility reasons.</p>
+ * @slot icon - To insert a custom icon into the named `icon` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Inline-level_content" target="_blank">inline content</a>.<p className="alert alert-sm alert-info">It is only meant for <code>img</code> or <code>svg</code> elements and overrides the `icon` property.</p>
  */
 @Component({
   tag: 'post-card-control',
@@ -395,7 +395,7 @@ export class PostCardControl {
           </div>
 
           <div id={`${this.controlId}_content`} class="card-control--content">
-            <slot name="content"></slot>
+            <slot></slot>
           </div>
         </div>
       </Host>
diff --git a/packages/components/src/components/post-card-control/readme.md b/packages/components/src/components/post-card-control/readme.md
index b666f4b6a9..17d9e3a833 100644
--- a/packages/components/src/components/post-card-control/readme.md
+++ b/packages/components/src/components/post-card-control/readme.md
@@ -54,10 +54,10 @@ Type: `Promise<void>`
 
 ## Slots
 
-| Slot        | Description                                                                                                                                                                                                                                                                                                                                                      |
-| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `"content"` | Content to place in the named `description` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Block-level_contentt" target="_blank">block content</a>.<p className="alert alert-sm alert-warning">Even if it is generally possible, we do not recommend using interactive elements in this slot for accessibility reasons.</p> |
-| `"icon"`    | Content to place in the named `icon` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Inline-level_content" target="_blank">inline content</a>.<br>It is only meant for <code>img</code> or <code>svg</code> elements and overrides the `icon` property.</p>                                                                  |
+| Slot        | Description                                                                                                                                                                                                                                                                                                                                              |
+| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `"default"` | Content to place into the `default` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Block-level_contentt" target="_blank">block content</a>.<p className="alert alert-sm alert-warning">Even if it is generally possible, we do not recommend using interactive elements in this slot for accessibility reasons.</p> |
+| `"icon"`    | To insert a custom icon into the named `icon` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Inline-level_content" target="_blank">inline content</a>.<p className="alert alert-sm alert-info">It is only meant for <code>img</code> or <code>svg</code> elements and overrides the `icon` property.</p>            |
 
 
 ## Dependencies
diff --git a/packages/documentation/src/stories/components/card-control/card-control.docs.mdx b/packages/documentation/src/stories/components/card-control/card-control.docs.mdx
index 26ddfb2b06..1cccab4321 100644
--- a/packages/documentation/src/stories/components/card-control/card-control.docs.mdx
+++ b/packages/documentation/src/stories/components/card-control/card-control.docs.mdx
@@ -37,7 +37,7 @@ If this is not enough, you can also use the named `icon` slot and add your very
 
 ### Custom content
 
-If you need to add other content to the component, you can use the named slot `content` to do so.
+If you need to add other content to the component, you can use the default slot to do so.
 
 <div className="alert alert-md alert-warning">Even if it is generally possible, we do not recommend using interactive elements in this slot for accessibility reasons.</div>
 
diff --git a/packages/documentation/src/stories/components/card-control/card-control.stories.ts b/packages/documentation/src/stories/components/card-control/card-control.stories.ts
index 726f160e67..535849ec2a 100644
--- a/packages/documentation/src/stories/components/card-control/card-control.stories.ts
+++ b/packages/documentation/src/stories/components/card-control/card-control.stories.ts
@@ -24,8 +24,8 @@ const meta: MetaComponent = {
     'disabled': '',
     'validity': 'null',
     'icon': '',
+    'slots-default': '',
     'slots-icon': '',
-    'slots-content': '',
   },
   argTypes: {
     'type': {
@@ -54,12 +54,14 @@ const meta: MetaComponent = {
         },
       },
     },
-    'slots-icon': {
+    'slots-default': {
+      name: 'default',
       control: {
         type: 'text',
       },
     },
-    'slots-content': {
+    'slots-icon': {
+      name: 'icon',
       control: {
         type: 'text',
       },
@@ -80,7 +82,7 @@ export const Default: Story = {
   render: (args: Args) => {
     const [, updateArgs] = useArgs();
 
-    const content = html`<div slot="content">${unsafeHTML(args['slots-content'])}</div>`;
+    const content = html`${unsafeHTML(args['slots-default'])}`;
     const icon = html`<span slot="icon">${unsafeHTML(args['slots-icon'])}</span>`;
 
     return html`
@@ -98,7 +100,7 @@ export const Default: Story = {
         @input="${(e: any) => updateArgs({ checked: e.detail.state })}"
         @change="${(e: any) => updateArgs({ checked: e.detail.state })}"
       >
-        ${args['slots-content'] ? content : null} ${args['slots-icon'] ? icon : null}
+        ${args['slots-default'] ? content : null} ${args['slots-icon'] ? icon : null}
       </post-card-control>
     `;
   },
@@ -140,7 +142,7 @@ export const DarkBackground: Story = {
 
 export const CustomContent: Story = {
   args: {
-    'slots-content': '<ul class="mb-0"><li>List item</li><li>List item</li><li>List item</li></ul>',
+    'slots-default': '<ul class="mb-0"><li>List item</li><li>List item</li><li>List item</li></ul>',
   },
   render: Default.render,
 };

From 49334a4171960deebc267268128189e029230501 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= <oliver.schuerch@post.ch>
Date: Thu, 28 Mar 2024 09:22:51 +0100
Subject: [PATCH 3/5] Update
 packages/components/src/components/post-card-control/post-card-control.tsx

Co-authored-by: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com>
---
 .../src/components/post-card-control/post-card-control.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/components/post-card-control/post-card-control.tsx b/packages/components/src/components/post-card-control/post-card-control.tsx
index d5a7a736e2..36ebcae76e 100644
--- a/packages/components/src/components/post-card-control/post-card-control.tsx
+++ b/packages/components/src/components/post-card-control/post-card-control.tsx
@@ -26,7 +26,7 @@ let cardControlIds = 0;
 /**
  * @class PostCardControl - representing a stencil component
  *
- * @slot default - Content to place into the `default` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Block-level_contentt" target="_blank">block content</a>.<p className="alert alert-sm alert-warning">Even if it is generally possible, we do not recommend using interactive elements in this slot for accessibility reasons.</p>
+ * @slot default - Content to place into the `default` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Block-level_contentt" target="_blank">block content</a>.<p className="alert alert-sm alert-warning">Even if it is generally possible, we do not recommend using interactive elements in this slot because the background of the card control is clickable. This can lead to confusion when the hit box of nested interactive controls is not clearly separated from the background, is invalid HTML and click events bubbling up to the card control will unexpectedly toggle it if they're not captured. More info: <a href="https://accessibilityinsights.io/info-examples/web/nested-interactive/">https://accessibilityinsights.io/info-examples/web/nested-interactive/</a></p>
  * @slot icon - To insert a custom icon into the named `icon` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Inline-level_content" target="_blank">inline content</a>.<p className="alert alert-sm alert-info">It is only meant for <code>img</code> or <code>svg</code> elements and overrides the `icon` property.</p>
  */
 @Component({

From 7437ffb9de71b06d63aefa51126c35955c457db4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= <oliver.schuerch@post.ch>
Date: Thu, 28 Mar 2024 09:22:57 +0100
Subject: [PATCH 4/5] Update
 packages/documentation/src/stories/components/card-control/card-control.docs.mdx

Co-authored-by: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com>
---
 .../src/stories/components/card-control/card-control.docs.mdx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/documentation/src/stories/components/card-control/card-control.docs.mdx b/packages/documentation/src/stories/components/card-control/card-control.docs.mdx
index 1cccab4321..63dcd96a30 100644
--- a/packages/documentation/src/stories/components/card-control/card-control.docs.mdx
+++ b/packages/documentation/src/stories/components/card-control/card-control.docs.mdx
@@ -39,7 +39,7 @@ If this is not enough, you can also use the named `icon` slot and add your very
 
 If you need to add other content to the component, you can use the default slot to do so.
 
-<div className="alert alert-md alert-warning">Even if it is generally possible, we do not recommend using interactive elements in this slot for accessibility reasons.</div>
+<div className="alert alert-md alert-warning">Even if it is generally possible, we do not recommend using interactive elements in this slot. <p>Valid markup: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Block-level_contentt" target="_blank">block content</a>.<p className="alert alert-sm alert-warning">Even if it is generally possible, we do not recommend using interactive elements in this slot because the background of the card control is clickable. This can lead to confusion when the hit box of nested interactive controls is not clearly separated from the background, is invalid HTML and click events bubbling up to the card control will unexpectedly toggle it if they're not captured. More info: <a href="https://accessibilityinsights.io/info-examples/web/nested-interactive/">https://accessibilityinsights.io/info-examples/web/nested-interactive/</a></p></div>
 
 <Canvas of={CardControlStories.CustomContent} />
 

From 503d7307df52bbaa8c59148780ce526ea6867419 Mon Sep 17 00:00:00 2001
From: oliverschuerch <oliver.schuerch@post.ch>
Date: Thu, 28 Mar 2024 14:40:48 +0100
Subject: [PATCH 5/5] chore: update card-control default slot warning

---
 .../components/post-card-control/post-card-control.tsx    | 2 +-
 .../components/src/components/post-card-control/readme.md | 8 ++++----
 .../stories/components/card-control/card-control.docs.mdx | 5 ++++-
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/components/src/components/post-card-control/post-card-control.tsx b/packages/components/src/components/post-card-control/post-card-control.tsx
index 36ebcae76e..024df1c94c 100644
--- a/packages/components/src/components/post-card-control/post-card-control.tsx
+++ b/packages/components/src/components/post-card-control/post-card-control.tsx
@@ -26,7 +26,7 @@ let cardControlIds = 0;
 /**
  * @class PostCardControl - representing a stencil component
  *
- * @slot default - Content to place into the `default` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Block-level_contentt" target="_blank">block content</a>.<p className="alert alert-sm alert-warning">Even if it is generally possible, we do not recommend using interactive elements in this slot because the background of the card control is clickable. This can lead to confusion when the hit box of nested interactive controls is not clearly separated from the background, is invalid HTML and click events bubbling up to the card control will unexpectedly toggle it if they're not captured. More info: <a href="https://accessibilityinsights.io/info-examples/web/nested-interactive/">https://accessibilityinsights.io/info-examples/web/nested-interactive/</a></p>
+ * @slot default - Content to place into the `default` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Block-level_contentt" target="_blank">block content</a>.<p className="alert alert-sm alert-warning">Even if it is generally possible, we do not recommend using interactive elements in this slot because the background of the card control is clickable.<br/>This can lead to confusion when the hit box of nested interactive controls is not clearly separated from the background, is invalid HTML and click events bubbling up to the card control will unexpectedly toggle it if they're not captured.<br/>More info: <a href="https://accessibilityinsights.io/info-examples/web/nested-interactive/">https://accessibilityinsights.io/info-examples/web/nested-interactive/</a></p>
  * @slot icon - To insert a custom icon into the named `icon` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Inline-level_content" target="_blank">inline content</a>.<p className="alert alert-sm alert-info">It is only meant for <code>img</code> or <code>svg</code> elements and overrides the `icon` property.</p>
  */
 @Component({
diff --git a/packages/components/src/components/post-card-control/readme.md b/packages/components/src/components/post-card-control/readme.md
index 17d9e3a833..ba8708d175 100644
--- a/packages/components/src/components/post-card-control/readme.md
+++ b/packages/components/src/components/post-card-control/readme.md
@@ -54,10 +54,10 @@ Type: `Promise<void>`
 
 ## Slots
 
-| Slot        | Description                                                                                                                                                                                                                                                                                                                                              |
-| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `"default"` | Content to place into the `default` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Block-level_contentt" target="_blank">block content</a>.<p className="alert alert-sm alert-warning">Even if it is generally possible, we do not recommend using interactive elements in this slot for accessibility reasons.</p> |
-| `"icon"`    | To insert a custom icon into the named `icon` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Inline-level_content" target="_blank">inline content</a>.<p className="alert alert-sm alert-info">It is only meant for <code>img</code> or <code>svg</code> elements and overrides the `icon` property.</p>            |
+| Slot        | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `"default"` | Content to place into the `default` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Block-level_contentt" target="_blank">block content</a>.<p className="alert alert-sm alert-warning">Even if it is generally possible, we do not recommend using interactive elements in this slot because the background of the card control is clickable.<br/>This can lead to confusion when the hit box of nested interactive controls is not clearly separated from the background, is invalid HTML and click events bubbling up to the card control will unexpectedly toggle it if they're not captured.<br/>More info: <a href="https://accessibilityinsights.io/info-examples/web/nested-interactive/">https://accessibilityinsights.io/info-examples/web/nested-interactive/</a></p> |
+| `"icon"`    | To insert a custom icon into the named `icon` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Inline-level_content" target="_blank">inline content</a>.<p className="alert alert-sm alert-info">It is only meant for <code>img</code> or <code>svg</code> elements and overrides the `icon` property.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
 
 
 ## Dependencies
diff --git a/packages/documentation/src/stories/components/card-control/card-control.docs.mdx b/packages/documentation/src/stories/components/card-control/card-control.docs.mdx
index 63dcd96a30..f6b75fa922 100644
--- a/packages/documentation/src/stories/components/card-control/card-control.docs.mdx
+++ b/packages/documentation/src/stories/components/card-control/card-control.docs.mdx
@@ -39,7 +39,10 @@ If this is not enough, you can also use the named `icon` slot and add your very
 
 If you need to add other content to the component, you can use the default slot to do so.
 
-<div className="alert alert-md alert-warning">Even if it is generally possible, we do not recommend using interactive elements in this slot. <p>Valid markup: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Block-level_contentt" target="_blank">block content</a>.<p className="alert alert-sm alert-warning">Even if it is generally possible, we do not recommend using interactive elements in this slot because the background of the card control is clickable. This can lead to confusion when the hit box of nested interactive controls is not clearly separated from the background, is invalid HTML and click events bubbling up to the card control will unexpectedly toggle it if they're not captured. More info: <a href="https://accessibilityinsights.io/info-examples/web/nested-interactive/">https://accessibilityinsights.io/info-examples/web/nested-interactive/</a></p></div>
+<div className="alert alert-md alert-warning">
+  <p className="alert-heading">Even if it is generally possible, we do not recommend using interactive elements in this slot because the background of the card control is clickable.</p>
+  <p>This can lead to confusion when the hit box of nested interactive controls is not clearly separated from the background, is invalid HTML and click events bubbling up to the card control will unexpectedly toggle it if they're not captured. More info: <a href="https://accessibilityinsights.io/info-examples/web/nested-interactive/">https://accessibilityinsights.io/info-examples/web/nested-interactive/</a></p>
+</div>
 
 <Canvas of={CardControlStories.CustomContent} />