From cff70c22f989f1b36014f47661647b6a463e143e Mon Sep 17 00:00:00 2001
From: imagoiq <12294151+imagoiq@users.noreply.github.com>
Date: Mon, 5 Feb 2024 07:25:19 +0100
Subject: [PATCH 01/13] feat(documentation): Set id/permalink for stories

---
 .../components/accordion/accordion.stories.ts |  1 +
 .../alert/standard-html/alert.stories.ts      | 23 ++------
 .../alert/web-component/post-alert.stories.ts |  5 +-
 .../stories/components/badge/badge.stories.ts | 16 ++----
 .../blockquote/blockquote.stories.ts          |  1 +
 .../button-group/button-group.stories.ts      |  5 +-
 .../components/button/button.stories.ts       | 32 +++--------
 .../components/cards/card/card.stories.ts     | 49 ++++-------------
 .../product-card/product-card.stories.ts      | 19 +++----
 .../components/carousel/carousel.stories.ts   |  1 +
 .../collapsible/collapsible.stories.ts        |  5 +-
 .../datepicker/datepicker.stories.ts          |  1 +
 .../components/dropdown/dropdown.stories.ts   |  1 +
 .../forms/checkbox/checkbox.stories.ts        |  5 +-
 .../choice-card/checkbox-card.stories.ts      |  3 +-
 .../custom-select/custom-select.stories.ts    |  1 +
 .../forms/input-group/input-group.stories.ts  |  1 +
 .../components/forms/input/input.stories.ts   | 27 +++-------
 .../components/forms/radio/radio.stories.ts   | 17 ++----
 .../components/forms/range/range.stories.ts   | 29 +++-------
 .../components/forms/select/select.stories.ts | 54 ++++++++-----------
 .../components/forms/switch/switch.stories.ts | 20 ++-----
 .../forms/textarea/textarea.stories.ts        | 32 +++--------
 .../components/heading/heading.stories.ts     |  1 +
 .../icons/components/icon.stories.ts          | 14 ++---
 .../icons/getting-started.stories.ts          |  1 +
 .../search-icons/search-icons.stories.ts      |  1 +
 .../getting-started.stories.ts                |  1 +
 .../intranet-header.stories.ts                |  1 +
 .../stories/components/modal/modal.stories.ts |  1 +
 .../pagination/pagination.stories.ts          |  1 +
 .../components/popover/popover.stories.ts     |  7 +--
 .../progressbar/progressbar.stories.ts        |  1 +
 .../components/stepper/stepper.stories.ts     |  1 +
 .../stories/components/table/table.stories.ts |  5 +-
 .../stories/components/tabs/tabs.stories.ts   |  1 +
 .../timepicker/timepicker.stories.ts          |  1 +
 .../stories/components/toast/toast.stories.ts | 23 +++-----
 .../components/tooltip/tooltip.stories.ts     |  1 +
 .../topic-teaser/topic-teaser.stories.ts      |  9 +---
 .../components/typeahead/typeahead.stories.ts |  1 +
 .../accessibility/accessibility.stories.ts    |  1 +
 .../stories/foundation/color/color.stories.ts |  1 +
 .../foundation/elevation/elevation.stories.ts |  5 +-
 .../layout/breakpoints/breakpoints.stories.ts |  1 +
 .../layout/columns/columns.stories.ts         |  3 +-
 .../layout/containers/containers.stories.ts   |  1 +
 .../foundation/layout/grid/grid.stories.ts    |  3 +-
 .../typography/typography.stories.ts          |  1 +
 .../compatibility/compatibility.stories.ts    |  1 +
 .../components-angular/angular.stories.ts     |  1 +
 .../components/components.stories.ts          |  1 +
 .../getting-started/styles/styles.stories.ts  |  1 +
 .../documentation/src/stories/home.stories.ts |  1 +
 .../misc/changelog/changelog.stories.ts       |  1 +
 .../migration-guide.stories.ts                |  1 +
 .../stories/misc/versions/versions.stories.ts |  1 +
 .../stories/patterns/forms/forms.stories.ts   |  1 +
 .../background/background.stories.ts          |  5 +-
 .../utilities/common/common.stories.ts        |  1 +
 .../utilities/heading/heading.stories.ts      |  9 ++--
 .../stories/utilities/list/list.stories.ts    |  1 +
 .../utilities/sizing/sizing.stories.ts        |  1 +
 .../utilities/spacing/spacing.stories.ts      | 11 ++--
 .../stories/utilities/text/text.stories.ts    | 33 +++---------
 65 files changed, 173 insertions(+), 332 deletions(-)

diff --git a/packages/documentation/src/stories/components/accordion/accordion.stories.ts b/packages/documentation/src/stories/components/accordion/accordion.stories.ts
index d56f62c505..8943a19098 100644
--- a/packages/documentation/src/stories/components/accordion/accordion.stories.ts
+++ b/packages/documentation/src/stories/components/accordion/accordion.stories.ts
@@ -4,6 +4,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta<HTMLPostAccordionElement> = {
+  id: 'Components/Accordion',
   title: 'Components/Accordion',
   component: 'post-accordion',
   parameters: {
diff --git a/packages/documentation/src/stories/components/alert/standard-html/alert.stories.ts b/packages/documentation/src/stories/components/alert/standard-html/alert.stories.ts
index 20183055cb..ed1d063cd3 100644
--- a/packages/documentation/src/stories/components/alert/standard-html/alert.stories.ts
+++ b/packages/documentation/src/stories/components/alert/standard-html/alert.stories.ts
@@ -7,6 +7,7 @@ import { getAlertClasses } from './getAlertClasses';
 import { BADGE } from '../../../../../.storybook/constants';
 
 const meta: Meta = {
+  id: 'Components/Alert',
   title: 'Components/Alert',
   render: renderAlert,
   decorators: [externalControl],
@@ -122,9 +123,7 @@ function externalControl(story: StoryFn, { args, context }: StoryContext) {
     </a>
   `;
 
-  return html`
-    ${args.fixed ? button : nothing} ${story(args, context)}
-  `;
+  return html` ${args.fixed ? button : nothing} ${story(args, context)} `;
 }
 
 // RENDERER
@@ -133,11 +132,7 @@ function renderAlert(args: Args) {
   const classes = getAlertClasses(args);
 
   const content = html`
-    ${args.title
-      ? html`
-          <h4 class="alert-heading">${args.title}</h4>
-        `
-      : nothing}
+    ${args.title ? html` <h4 class="alert-heading">${args.title}</h4> ` : nothing}
     ${unsafeHTML(args.content)}
   `;
 
@@ -145,19 +140,11 @@ function renderAlert(args: Args) {
     <div class="${classes}" role="alert">
       ${
         /* Alert Icon */
-        args.icon
-          ? html`
-              <post-icon name=${args.icon}></post-icon>
-            `
-          : nothing
+        args.icon ? html` <post-icon name=${args.icon}></post-icon> ` : nothing
       }
       ${
         /* Alert Content */
-        args.action
-          ? html`
-              <div class="alert-content">${content}</div>
-            `
-          : content
+        args.action ? html` <div class="alert-content">${content}</div> ` : content
       }
       ${
         /* Alert Action Buttons */
diff --git a/packages/documentation/src/stories/components/alert/web-component/post-alert.stories.ts b/packages/documentation/src/stories/components/alert/web-component/post-alert.stories.ts
index 093bf62de6..48e84c9cef 100644
--- a/packages/documentation/src/stories/components/alert/web-component/post-alert.stories.ts
+++ b/packages/documentation/src/stories/components/alert/web-component/post-alert.stories.ts
@@ -4,6 +4,7 @@ import { BADGE } from '../../../../../.storybook/constants';
 import { spreadArgs } from '../../../../utils';
 
 const meta: Meta<HTMLPostAlertElement> = {
+  id: 'Components/Post Alert',
   title: 'Components/Post Alert',
   component: 'post-alert',
   render: renderAlert,
@@ -107,9 +108,7 @@ function externalControl(story: StoryFn, context: StoryContext) {
 
 // RENDERER
 function renderAlert(args: Partial<HTMLPostAlertElement>) {
-  return html`
-    <post-alert ${spreadArgs(args)}></post-alert>
-  `;
+  return html` <post-alert ${spreadArgs(args)}></post-alert> `;
 }
 
 // STORIES
diff --git a/packages/documentation/src/stories/components/badge/badge.stories.ts b/packages/documentation/src/stories/components/badge/badge.stories.ts
index 9358dc59c8..42ec2a1c18 100644
--- a/packages/documentation/src/stories/components/badge/badge.stories.ts
+++ b/packages/documentation/src/stories/components/badge/badge.stories.ts
@@ -5,6 +5,7 @@ import { BADGE } from '../../../../.storybook/constants';
 import { mapClasses } from '../../../utils';
 
 const meta: Meta = {
+  id: 'Components/Badge',
   title: 'Components/Badge',
   render: renderBadge,
   decorators: [externalControl],
@@ -120,20 +121,14 @@ function externalControl(story: any, { args }: StoryContext) {
     </a>
   `;
 
-  return html`
-    ${args.dismissed ? button : nothing} ${story()}
-  `;
+  return html` ${args.dismissed ? button : nothing} ${story()} `;
 }
 
 // RENDERER
 function getDefaultContent(args: Args) {
   return html`
     <span>${args.text}</span>
-    ${args.nestedBadge
-      ? html`
-          <span class="badge">10</span>
-        `
-      : nothing}
+    ${args.nestedBadge ? html` <span class="badge">10</span> ` : nothing}
   `;
 }
 
@@ -178,10 +173,7 @@ function getDismissButton(updateArgs: (args: Args) => void) {
 function renderBadge(args: Args, context: StoryContext) {
   const [_, updateArgs] = useArgs();
 
-  if (args.dismissed)
-    return html`
-      ${nothing}
-    `;
+  if (args.dismissed) return html` ${nothing} `;
 
   const isCheckable = args.interactionType === 'checkable';
   const isDismissible = args.interactionType === 'dismissible';
diff --git a/packages/documentation/src/stories/components/blockquote/blockquote.stories.ts b/packages/documentation/src/stories/components/blockquote/blockquote.stories.ts
index 81ce5a60f8..443bcf81ab 100644
--- a/packages/documentation/src/stories/components/blockquote/blockquote.stories.ts
+++ b/packages/documentation/src/stories/components/blockquote/blockquote.stories.ts
@@ -3,6 +3,7 @@ import { html, unsafeStatic } from 'lit/static-html.js';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
+  id: 'Components/Blockquote',
   title: 'Components/Blockquote',
   render: renderBlockquote,
   parameters: {
diff --git a/packages/documentation/src/stories/components/button-group/button-group.stories.ts b/packages/documentation/src/stories/components/button-group/button-group.stories.ts
index 778f06bb1b..a35beaab0d 100644
--- a/packages/documentation/src/stories/components/button-group/button-group.stories.ts
+++ b/packages/documentation/src/stories/components/button-group/button-group.stories.ts
@@ -4,6 +4,7 @@ import { useArgs } from '@storybook/preview-api';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
+  id: 'Components/Button Group',
   title: 'Components/Button Group',
   render: renderButtonGroup,
   parameters: {
@@ -195,9 +196,7 @@ function createButtonTemplate(args: Args, context: StoryContext, index: number)
       `;
     }
     case 'link':
-      return html`
-        <a href="#" class="${`btn ${args.size} btn-secondary`}">${label}</a>
-      `;
+      return html` <a href="#" class="${`btn ${args.size} btn-secondary`}">${label}</a> `;
     case 'button':
     default:
       return html`
diff --git a/packages/documentation/src/stories/components/button/button.stories.ts b/packages/documentation/src/stories/components/button/button.stories.ts
index 8d71fa88a2..27eebee95e 100644
--- a/packages/documentation/src/stories/components/button/button.stories.ts
+++ b/packages/documentation/src/stories/components/button/button.stories.ts
@@ -5,6 +5,7 @@ import { repeat } from 'lit/directives/repeat.js';
 import { BADGE } from '@geometricpanda/storybook-addon-badges';
 
 const meta: Meta = {
+  id: 'Components/Button',
   title: 'Components/Button',
   parameters: {
     badges: [BADGE.NEEDS_REVISION],
@@ -217,22 +218,12 @@ const Template = {
     const props = createProps(args, isAnimated);
 
     if (args.tag === 'input') {
-      return html`
-        <${tagName} ${spread(props)} />
-      `;
+      return html` <${tagName} ${spread(props)} /> `;
     } else {
-      const icon = html`
-        <post-icon aria-hidden="true" name="${args.icon}"></post-icon>
-      `;
-      const iconOnlyContent = html`
-        <span class="visually-hidden">${args.text}</span>
-      `;
-      const animatedContent = html`
-        <span>${args.text}</span>
-      `;
-      const text = html`
-        ${args.text}
-      `;
+      const icon = html` <post-icon aria-hidden="true" name="${args.icon}"></post-icon> `;
+      const iconOnlyContent = html` <span class="visually-hidden">${args.text}</span> `;
+      const animatedContent = html` <span>${args.text}</span> `;
+      const text = html` ${args.text} `;
 
       return html`
         <${tagName} ${spread(props)}>
@@ -271,11 +262,7 @@ export const Default: Story = {
 
 export const Inverted: Story = {
   ...Template,
-  decorators: [
-    (story: Function) => html`
-      <div class="p-3 bg-dark">${story()}</div>
-    `,
-  ],
+  decorators: [(story: Function) => html` <div class="p-3 bg-dark">${story()}</div> `],
 };
 
 const VariantsTemplate = {
@@ -285,10 +272,7 @@ const VariantsTemplate = {
     },
   },
   decorators: [
-    (story: Function) =>
-      html`
-        <div class="d-flex gap-small-r flex-wrap">${story()}</div>
-      `,
+    (story: Function) => html` <div class="d-flex gap-small-r flex-wrap">${story()}</div> `,
   ],
   render: (args: Args) =>
     html`
diff --git a/packages/documentation/src/stories/components/cards/card/card.stories.ts b/packages/documentation/src/stories/components/cards/card/card.stories.ts
index 99f675e3d4..8a25786a4e 100644
--- a/packages/documentation/src/stories/components/cards/card/card.stories.ts
+++ b/packages/documentation/src/stories/components/cards/card/card.stories.ts
@@ -5,6 +5,7 @@ import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { BADGE } from '../../../../../.storybook/constants';
 
 const meta: Meta = {
+  id: 'Components/Cards/Card',
   title: 'Components/Cards/Card',
   decorators: [clickBlocker, paddedContainer],
   parameters: {
@@ -201,15 +202,11 @@ export default meta;
 
 // DECORATORS
 function clickBlocker(story: any) {
-  return html`
-    <div @click=${(e: Event) => e.preventDefault()}>${story()}</div>
-  `;
+  return html` <div @click=${(e: Event) => e.preventDefault()}>${story()}</div> `;
 }
 
 function paddedContainer(story: any) {
-  return html`
-    <div class="p-mini">${story()}</div>
-  `;
+  return html` <div class="p-mini">${story()}</div> `;
 }
 
 function gridContainer(story: any) {
@@ -224,9 +221,7 @@ function gridContainer(story: any) {
 function getCardLinks() {
   return html`
     ${['Ligilo teksto', 'Pli da ligo'].map(
-      label => html`
-        <a class="card-link" href="#">${label}</a>
-      `,
+      label => html` <a class="card-link" href="#">${label}</a> `,
     )}
   `;
 }
@@ -244,16 +239,8 @@ function getCardBody({ customBody, content, action, showTitle, showSubtitle }: A
 
   return html`
     <div class="card-body">
-      ${showTitle
-        ? html`
-            <h5 class="card-title">Titulum</h5>
-          `
-        : nothing}
-      ${showSubtitle
-        ? html`
-            <h6 class="card-subtitle mb-2 text-muted">Sub Titulum</h6>
-          `
-        : nothing}
+      ${showTitle ? html` <h5 class="card-title">Titulum</h5> ` : nothing}
+      ${showSubtitle ? html` <h6 class="card-subtitle mb-2 text-muted">Sub Titulum</h6> ` : nothing}
       <p class="card-text">${content}</p>
       ${choose(
         action,
@@ -261,10 +248,7 @@ function getCardBody({ customBody, content, action, showTitle, showSubtitle }: A
           ['button', getCardButton],
           ['links', getCardLinks],
         ],
-        () =>
-          html`
-            ${nothing}
-          `,
+        () => html` ${nothing} `,
       )}
     </div>
   `;
@@ -274,9 +258,7 @@ function getCardListGroup() {
   return html`
     <ul class="list-group">
       ${['Ero', 'Dua ero', 'Alio ero'].map(
-        label => html`
-          <li class="list-group-item">${label}</li>
-        `,
+        label => html` <li class="list-group-item">${label}</li> `,
       )}
     </ul>
   `;
@@ -285,17 +267,13 @@ function getCardListGroup() {
 function getCardHeader({ customHeader }: Args) {
   if (customHeader) return unsafeHTML(customHeader);
 
-  return html`
-    <div class="card-header">Kapo Titulum</div>
-  `;
+  return html` <div class="card-header">Kapo Titulum</div> `;
 }
 
 function getCardFooter({ customFooter }: Args) {
   if (customFooter) return unsafeHTML(customFooter);
 
-  return html`
-    <div class="card-footer">Piedo Contentus momentus</div>
-  `;
+  return html` <div class="card-footer">Piedo Contentus momentus</div> `;
 }
 
 function getCardImage({ imagePosition }: Args) {
@@ -413,12 +391,7 @@ export const CardGroup: Story = {
 
     return html`
       <div class="card-group">
-        ${cardTexts.map(
-          text =>
-            html`
-              ${renderCard({ ...args, text })}
-            `,
-        )}
+        ${cardTexts.map(text => html` ${renderCard({ ...args, text })} `)}
       </div>
     `;
   },
diff --git a/packages/documentation/src/stories/components/cards/product-card/product-card.stories.ts b/packages/documentation/src/stories/components/cards/product-card/product-card.stories.ts
index ad83636f49..94f81094e9 100644
--- a/packages/documentation/src/stories/components/cards/product-card/product-card.stories.ts
+++ b/packages/documentation/src/stories/components/cards/product-card/product-card.stories.ts
@@ -4,6 +4,7 @@ import { nothing } from 'lit';
 import { BADGE } from '../../../../../.storybook/constants';
 
 const meta: Meta = {
+  id: 'Components/Cards/Product Card',
   title: 'Components/Cards/Product Card',
   decorators: [paddedContainer, clickBlocker],
   parameters: {
@@ -54,15 +55,11 @@ export default meta;
 
 // DECORATORS
 function clickBlocker(story: any) {
-  return html`
-    <div @click=${(e: Event) => e.preventDefault()}>${story()}</div>
-  `;
+  return html` <div @click=${(e: Event) => e.preventDefault()}>${story()}</div> `;
 }
 
 function paddedContainer(story: any) {
-  return html`
-    <div class="p-mini">${story()}</div>
-  `;
+  return html` <div class="p-mini">${story()}</div> `;
 }
 
 function gridContainer(story: any) {
@@ -85,9 +82,7 @@ function getTitle(args: Args) {
 function getText(args: Args) {
   if (!args.text) return nothing;
 
-  return html`
-    <p class="lead">${args.text}</p>
-  `;
+  return html` <p class="lead">${args.text}</p> `;
 }
 function renderProductCard(args: Args) {
   return html`
@@ -118,7 +113,9 @@ export const Groupped: Story = {
         ${renderProductCard({ ...args, title: `${args.title} 1`, text: 'Tre mallonga priskribo.' })}
       </div>
       <div class="col-12">${renderProductCard({ ...args, title: `${args.title} 2` })}</div>
-      <div class="col-12">${renderProductCard({ ...args, title: `${args.title} 3`, text: '' })}</div>
+      <div class="col-12">
+        ${renderProductCard({ ...args, title: `${args.title} 3`, text: '' })}
+      </div>
       <div class="col-12">${renderProductCard({ ...args, title: `${args.title} 4` })}</div>
       <div class="col-12">
         ${renderProductCard({
@@ -333,7 +330,7 @@ export const Multipart: Story = {
             nodes.forEach(node => {
               const group = node.getAttribute('data-sync-height-with');
               const groupHeight = heightByGroup.get(group);
-              
+
               node.style.height = 'auto';
               const nodeHeight = node.offsetHeight;
 
diff --git a/packages/documentation/src/stories/components/carousel/carousel.stories.ts b/packages/documentation/src/stories/components/carousel/carousel.stories.ts
index 3d35fd9441..941f50c709 100644
--- a/packages/documentation/src/stories/components/carousel/carousel.stories.ts
+++ b/packages/documentation/src/stories/components/carousel/carousel.stories.ts
@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/web-components';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
+  id: 'Components/Carousel',
   title: 'Components/Carousel',
   parameters: {
     badges: [BADGE.WEB_COMPONENT_CANDIDATE],
diff --git a/packages/documentation/src/stories/components/collapsible/collapsible.stories.ts b/packages/documentation/src/stories/components/collapsible/collapsible.stories.ts
index cde1122d25..98dff52bd8 100644
--- a/packages/documentation/src/stories/components/collapsible/collapsible.stories.ts
+++ b/packages/documentation/src/stories/components/collapsible/collapsible.stories.ts
@@ -4,6 +4,7 @@ import { BADGE } from '../../../../.storybook/constants';
 import { spreadArgs } from '../../../utils';
 
 const meta: Meta<HTMLPostCollapsibleElement> = {
+  id: 'Components/Collapsible',
   title: 'Components/Collapsible',
   component: 'post-collapsible',
   render: renderCollapsible,
@@ -64,9 +65,7 @@ function externalControls(story: StoryFn, context: StoryContext) {
 
 //RENDERER
 function renderCollapsible(args: Partial<HTMLPostCollapsibleElement>) {
-  return html`
-    <post-collapsible ${spreadArgs(args)}></post-collapsible>
-  `;
+  return html` <post-collapsible ${spreadArgs(args)}></post-collapsible> `;
 }
 
 // STORIES
diff --git a/packages/documentation/src/stories/components/datepicker/datepicker.stories.ts b/packages/documentation/src/stories/components/datepicker/datepicker.stories.ts
index ecc7f1a27c..a750dfbd0d 100644
--- a/packages/documentation/src/stories/components/datepicker/datepicker.stories.ts
+++ b/packages/documentation/src/stories/components/datepicker/datepicker.stories.ts
@@ -3,6 +3,7 @@ import { html } from 'lit';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
+  id: 'Components/Datepicker',
   title: 'Components/Datepicker',
   parameters: {
     badges: [BADGE.WEB_COMPONENT_CANDIDATE],
diff --git a/packages/documentation/src/stories/components/dropdown/dropdown.stories.ts b/packages/documentation/src/stories/components/dropdown/dropdown.stories.ts
index 9ef137d00a..90d1424e3c 100644
--- a/packages/documentation/src/stories/components/dropdown/dropdown.stories.ts
+++ b/packages/documentation/src/stories/components/dropdown/dropdown.stories.ts
@@ -2,6 +2,7 @@ import { Meta } from '@storybook/web-components';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
+  id: 'Components/Dropdown',
   title: 'Components/Dropdown',
   parameters: {
     badges: [BADGE.WEB_COMPONENT_CANDIDATE],
diff --git a/packages/documentation/src/stories/components/forms/checkbox/checkbox.stories.ts b/packages/documentation/src/stories/components/forms/checkbox/checkbox.stories.ts
index 1b48d5df46..763dd30988 100644
--- a/packages/documentation/src/stories/components/forms/checkbox/checkbox.stories.ts
+++ b/packages/documentation/src/stories/components/forms/checkbox/checkbox.stories.ts
@@ -6,6 +6,7 @@ import { BADGE } from '../../../../../.storybook/constants';
 import { mapClasses } from '../../../../utils';
 
 const meta: Meta = {
+  id: 'Components/Forms/Checkbox',
   title: 'Components/Forms/Checkbox',
   render: renderCheckbox,
   parameters: {
@@ -159,9 +160,7 @@ const VALIDATION_STATE_MAP: Record<string, undefined | boolean> = {
 };
 
 function getLabel({ label }: Args, { id }: StoryContext) {
-  return html`
-    <label for="${id}" class="form-check-label">${label}</label>
-  `;
+  return html` <label for="${id}" class="form-check-label">${label}</label> `;
 }
 
 function getValidationFeedback({ validation }: Args) {
diff --git a/packages/documentation/src/stories/components/forms/choice-card/checkbox-card.stories.ts b/packages/documentation/src/stories/components/forms/choice-card/checkbox-card.stories.ts
index 04e03c18e9..de470b7e5d 100644
--- a/packages/documentation/src/stories/components/forms/choice-card/checkbox-card.stories.ts
+++ b/packages/documentation/src/stories/components/forms/choice-card/checkbox-card.stories.ts
@@ -1,8 +1,9 @@
 import { BADGE } from '../../../../../.storybook/constants';
-import { choiceCardMeta, choiceCardDefault, choiceCardGroup } from './choice-card';
+import { choiceCardDefault, choiceCardGroup, choiceCardMeta } from './choice-card';
 
 export default {
   ...choiceCardMeta,
+  id: 'Components/Forms/Checkbox Card',
   title: 'Components/Forms/Checkbox Card',
   parameters: {
     badges: [BADGE.NEEDS_REVISION],
diff --git a/packages/documentation/src/stories/components/forms/custom-select/custom-select.stories.ts b/packages/documentation/src/stories/components/forms/custom-select/custom-select.stories.ts
index 5cd5b7e191..09cf309257 100644
--- a/packages/documentation/src/stories/components/forms/custom-select/custom-select.stories.ts
+++ b/packages/documentation/src/stories/components/forms/custom-select/custom-select.stories.ts
@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/web-components';
 import { BADGE } from '../../../../../.storybook/constants';
 
 const meta: Meta = {
+  id: 'Components/Forms/Custom-Select',
   title: 'Components/Forms/Custom-Select',
   parameters: {
     badges: [BADGE.DEPRECATED],
diff --git a/packages/documentation/src/stories/components/forms/input-group/input-group.stories.ts b/packages/documentation/src/stories/components/forms/input-group/input-group.stories.ts
index 7c2cd662d7..a6185264c1 100644
--- a/packages/documentation/src/stories/components/forms/input-group/input-group.stories.ts
+++ b/packages/documentation/src/stories/components/forms/input-group/input-group.stories.ts
@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/web-components';
 import { BADGE } from '../../../../../.storybook/constants';
 
 const meta: Meta = {
+  id: 'Components/Forms/Input Group',
   title: 'Components/Forms/Input Group',
   parameters: {
     badges: [BADGE.TODO],
diff --git a/packages/documentation/src/stories/components/forms/input/input.stories.ts b/packages/documentation/src/stories/components/forms/input/input.stories.ts
index b750710b8d..abef1ec865 100644
--- a/packages/documentation/src/stories/components/forms/input/input.stories.ts
+++ b/packages/documentation/src/stories/components/forms/input/input.stories.ts
@@ -9,6 +9,7 @@ const VALIDATION_STATE_MAP: Record<string, undefined | boolean> = {
 };
 
 const meta: Meta = {
+  id: 'Components/Forms/Input',
   title: 'Components/Forms/Input',
   render: render,
   parameters: {
@@ -199,9 +200,7 @@ function render(args: Args, context: StoryContext) {
 
   const useAriaLabel = !args.floatingLabel && args.hiddenLabel;
   const label: TemplateResult | null = !useAriaLabel
-    ? html`
-        <label for="${id}" class="form-label">${args.label}</label>
-      `
+    ? html` <label for="${id}" class="form-label">${args.label}</label> `
     : null;
 
   if (args.floatingLabel && !args.placeholder) {
@@ -209,21 +208,9 @@ function render(args: Args, context: StoryContext) {
   }
 
   const contextual: (TemplateResult | null)[] = [
-    args.validation === 'is-valid'
-      ? html`
-          <p class="valid-feedback">Ggranda sukceso!</p>
-        `
-      : null,
-    args.validation === 'is-invalid'
-      ? html`
-          <p class="invalid-feedback">Eraro okazis!</p>
-        `
-      : null,
-    args.hint !== ''
-      ? html`
-          <div class="form-text">${args.hint}</div>
-        `
-      : null,
+    args.validation === 'is-valid' ? html` <p class="valid-feedback">Ggranda sukceso!</p> ` : null,
+    args.validation === 'is-invalid' ? html` <p class="invalid-feedback">Eraro okazis!</p> ` : null,
+    args.hint !== '' ? html` <div class="form-text">${args.hint}</div> ` : null,
   ];
 
   const control: TemplateResult = html`
@@ -243,9 +230,7 @@ function render(args: Args, context: StoryContext) {
       <div class="form-floating">${[control, label, ...contextual].filter(el => el !== null)}</div>
     `;
   } else {
-    return html`
-      ${[label, control, ...contextual].filter(el => el !== null)}
-    `;
+    return html` ${[label, control, ...contextual].filter(el => el !== null)} `;
   }
 }
 
diff --git a/packages/documentation/src/stories/components/forms/radio/radio.stories.ts b/packages/documentation/src/stories/components/forms/radio/radio.stories.ts
index e947e62f6e..316c2cf18e 100644
--- a/packages/documentation/src/stories/components/forms/radio/radio.stories.ts
+++ b/packages/documentation/src/stories/components/forms/radio/radio.stories.ts
@@ -10,6 +10,7 @@ const VALIDATION_STATE_MAP: Record<string, undefined | boolean> = {
 };
 
 const meta: Meta = {
+  id: 'Components/Forms/Radio button',
   title: 'Components/Forms/Radio button',
   parameters: {
     controls: {
@@ -123,22 +124,12 @@ function render(args: Args, context: StoryContext) {
 
   const useAriaLabel = args.hiddenLabel;
   const label: TemplateResult | null = !useAriaLabel
-    ? html`
-        <label for="${id}" class="form-check-label">${args.label}</label>
-      `
+    ? html` <label for="${id}" class="form-check-label">${args.label}</label> `
     : null;
 
   const contextual: (TemplateResult | null)[] = [
-    args.validation === 'is-valid'
-      ? html`
-          <p class="valid-feedback">Ggranda sukceso!</p>
-        `
-      : null,
-    args.validation === 'is-invalid'
-      ? html`
-          <p class="invalid-feedback">Eraro okazis!</p>
-        `
-      : null,
+    args.validation === 'is-valid' ? html` <p class="valid-feedback">Ggranda sukceso!</p> ` : null,
+    args.validation === 'is-invalid' ? html` <p class="invalid-feedback">Eraro okazis!</p> ` : null,
   ];
 
   const control = html`
diff --git a/packages/documentation/src/stories/components/forms/range/range.stories.ts b/packages/documentation/src/stories/components/forms/range/range.stories.ts
index 4d68b0a02d..3f68edfdb6 100644
--- a/packages/documentation/src/stories/components/forms/range/range.stories.ts
+++ b/packages/documentation/src/stories/components/forms/range/range.stories.ts
@@ -12,6 +12,7 @@ const VALIDATION_STATE_MAP: Record<string, undefined | boolean> = {
 const ARROW_KEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
 
 const meta: Meta = {
+  id: 'Components/Forms/Range',
   title: 'Components/Forms/Range',
   render: render,
   parameters: {
@@ -170,22 +171,12 @@ function render(args: Args, context: StoryContext) {
 
   const useAriaLabel = args.hiddenLabel;
   const label: TemplateResult | null = !useAriaLabel
-    ? html`
-        <label class="form-label" for="${id}">${args.label}</label>
-      `
+    ? html` <label class="form-label" for="${id}">${args.label}</label> `
     : null;
 
   const contextual: (TemplateResult | null)[] = [
-    args.validation === 'is-valid'
-      ? html`
-          <p class="valid-feedback">Ggranda sukceso!</p>
-        `
-      : null,
-    args.validation === 'is-invalid'
-      ? html`
-          <p class="invalid-feedback">Eraro okazis!</p>
-        `
-      : null,
+    args.validation === 'is-valid' ? html` <p class="valid-feedback">Ggranda sukceso!</p> ` : null,
+    args.validation === 'is-invalid' ? html` <p class="invalid-feedback">Eraro okazis!</p> ` : null,
   ];
 
   const control: TemplateResult = html`
@@ -208,16 +199,12 @@ function render(args: Args, context: StoryContext) {
   let valueElement: TemplateResult | TemplateResult[] | null = null;
 
   if (args.showValue === 'text') {
-    valueElement = html`
-      <p class="form-text">${args.value}</p>
-    `;
+    valueElement = html` <p class="form-text">${args.value}</p> `;
   } else if (args.showValue === 'input') {
     const inputId = `${context.viewMode}_${context.name.replace(/\s/g, '-')}_ExampleRangeInput`;
 
     valueElement = [
-      html`
-        <label class="form-label visually-hidden" for="${inputId}">Range controller</label>
-      `,
+      html` <label class="form-label visually-hidden" for="${inputId}">Range controller</label> `,
       html`
         <input
           id="${inputId}"
@@ -241,9 +228,7 @@ function render(args: Args, context: StoryContext) {
       </div>
     `;
   } else {
-    return html`
-      ${[label, control, valueElement, ...contextual].filter(el => el !== null)}
-    `;
+    return html` ${[label, control, valueElement, ...contextual].filter(el => el !== null)} `;
   }
 }
 
diff --git a/packages/documentation/src/stories/components/forms/select/select.stories.ts b/packages/documentation/src/stories/components/forms/select/select.stories.ts
index 16ee308f2d..9a1d126aad 100644
--- a/packages/documentation/src/stories/components/forms/select/select.stories.ts
+++ b/packages/documentation/src/stories/components/forms/select/select.stories.ts
@@ -11,6 +11,7 @@ const VALIDATION_STATE_MAP: Record<string, undefined | boolean> = {
 };
 
 const meta: Meta = {
+  id: 'Components/Forms/Select',
   title: 'Components/Forms/Select',
   parameters: {
     badges: [BADGE.NEEDS_REVISION],
@@ -217,43 +218,27 @@ const Template: Story = {
       .join(' ');
     const useAriaLabel = !args.floatingLabel && args.hiddenLabel;
     const label = !useAriaLabel
-      ? html`
-          <label for="${id}" class="form-label">${args.label}</label>
-        `
+      ? html` <label for="${id}" class="form-label">${args.label}</label> `
       : null;
     const optionElements = Array.from({ length: args.options - 1 }, (_, i) => i + 2).map(
-      (key: number) => html`
-        <option value="valoro_${key}">Opcion ${key}</option>
-      `,
+      (key: number) => html` <option value="valoro_${key}">Opcion ${key}</option> `,
     );
     const options = [
       ...[
         args.floatingLabelPlaceholder
-          ? html`
-              <option></option>
-            `
-          : html`
-              <option>Elektu opcion...</option>
-            `,
+          ? html` <option></option> `
+          : html` <option>Elektu opcion...</option> `,
       ],
       ...optionElements,
     ];
     const contextuals = [
       args.validation === 'is-valid'
-        ? html`
-            <p class="valid-feedback">Ggranda sukceso!</p>
-          `
+        ? html` <p class="valid-feedback">Ggranda sukceso!</p> `
         : null,
       args.validation === 'is-invalid'
-        ? html`
-            <p class="invalid-feedback">Eraro okazis!</p>
-          `
-        : null,
-      args.hint !== ''
-        ? html`
-            <div class="form-text">${args.hint}</div>
-          `
+        ? html` <p class="invalid-feedback">Eraro okazis!</p> `
         : null,
+      args.hint !== '' ? html` <div class="form-text">${args.hint}</div> ` : null,
     ];
     const control = html`
       <select
@@ -270,13 +255,18 @@ const Template: Story = {
       >
         ${[
           options[0],
-          options.slice(1).map(
-            (option, index) => html`
-              <option value="valoro_${index + 1}" ?selected="${index === args.selectedOption - 2}">
-                Opcion ${index + 2}
-              </option>
-            `,
-          ),
+          options
+            .slice(1)
+            .map(
+              (option, index) => html`
+                <option
+                  value="valoro_${index + 1}"
+                  ?selected="${index === args.selectedOption - 2}"
+                >
+                  Opcion ${index + 2}
+                </option>
+              `,
+            ),
         ]}
       </select>
     `;
@@ -288,9 +278,7 @@ const Template: Story = {
         </div>
       `;
     } else {
-      return html`
-        ${[label, control, ...contextuals].filter(el => el !== null)}
-      `;
+      return html` ${[label, control, ...contextuals].filter(el => el !== null)} `;
     }
   },
 };
diff --git a/packages/documentation/src/stories/components/forms/switch/switch.stories.ts b/packages/documentation/src/stories/components/forms/switch/switch.stories.ts
index b5364f8d03..c7087f2a5c 100644
--- a/packages/documentation/src/stories/components/forms/switch/switch.stories.ts
+++ b/packages/documentation/src/stories/components/forms/switch/switch.stories.ts
@@ -6,6 +6,7 @@ import { BADGE } from '../../../../../.storybook/constants';
 import { mapClasses } from '../../../../utils';
 
 const meta: Meta = {
+  id: 'Components/Forms/Switch',
   title: 'Components/Forms/Switch',
   render: renderSwitch,
   parameters: {
@@ -94,12 +95,7 @@ const meta: Meta = {
       },
     },
   },
-  decorators: [
-    story =>
-      html`
-        <div class="pt-3">${story()}</div>
-      `,
-  ],
+  decorators: [story => html` <div class="pt-3">${story()}</div> `],
 };
 
 export default meta;
@@ -124,23 +120,17 @@ function renderSwitch(args: Args, context: StoryContext) {
   const useLabelAfter = !useAriaLabel && 'after' === args.labelPosition;
 
   const labelBefore = useLabelBefore
-    ? html`
-        <label for=${context.id} class="form-check-label order-first">${args.label}</label>
-      `
+    ? html` <label for=${context.id} class="form-check-label order-first">${args.label}</label> `
     : null;
 
   const labelAfter = useLabelAfter
-    ? html`
-        <label for=${context.id} class="form-check-label">${args.label}</label>
-      `
+    ? html` <label for=${context.id} class="form-check-label">${args.label}</label> `
     : null;
 
   const validationText = args.validation === 'is-valid' ? 'Ggranda sukceso!' : 'Eraro okazis!';
   const validationFeedback =
     args.validation !== 'null'
-      ? html`
-          <p class=${args.validation.split('-')[1] + '-feedback'}>${validationText}</p>
-        `
+      ? html` <p class=${args.validation.split('-')[1] + '-feedback'}>${validationText}</p> `
       : null;
 
   return html`
diff --git a/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts b/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts
index 389f96d498..2ceb1de06f 100644
--- a/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts
+++ b/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts
@@ -10,6 +10,7 @@ const VALIDATION_STATE_MAP: Record<string, undefined | boolean> = {
 };
 
 const meta: Meta = {
+  id: 'Components/Forms/Textarea',
   title: 'Components/Forms/Textarea',
   render: renderTextarea,
   parameters: {
@@ -160,34 +161,16 @@ function renderTextarea(args: Args, context: StoryContext) {
   });
   const useAriaLabel = !args.floatingLabel && args.hiddenLabel;
   const label = !useAriaLabel
-    ? html`
-        <label for=${id} class="form-label">
-          ${html`
-            ${args.label}
-          `}
-        </label>
-      `
+    ? html` <label for=${id} class="form-label"> ${html` ${args.label} `} </label> `
     : null;
   const contextuals = [
     args.validation === 'is-valid'
-      ? html`
-          <div class="valid-feedback">Ggranda sukceso!</div>
-        `
+      ? html` <div class="valid-feedback">Ggranda sukceso!</div> `
       : null,
     args.validation === 'is-invalid'
-      ? html`
-          <div class="invalid-feedback">Eraro okazis!</div>
-        `
-      : null,
-    args.hint !== ''
-      ? html`
-          <div class="form-text">
-            ${html`
-              ${args.hint}
-            `}
-          </div>
-        `
+      ? html` <div class="invalid-feedback">Eraro okazis!</div> `
       : null,
+    args.hint !== '' ? html` <div class="form-text">${html` ${args.hint} `}</div> ` : null,
   ];
   const control = html`
     <textarea
@@ -208,10 +191,7 @@ ${args.textInside ?? nothing}</textarea
     return html`
       <div class="form-floating">${[control, label, ...contextuals].filter(el => el !== null)}</div>
     `;
-  } else
-    return html`
-      ${[label, control, ...contextuals].filter(el => el !== null)}
-    `;
+  } else return html` ${[label, control, ...contextuals].filter(el => el !== null)} `;
 }
 
 export const Default: Story = {};
diff --git a/packages/documentation/src/stories/components/heading/heading.stories.ts b/packages/documentation/src/stories/components/heading/heading.stories.ts
index 043cb0ba64..dedb9728ce 100644
--- a/packages/documentation/src/stories/components/heading/heading.stories.ts
+++ b/packages/documentation/src/stories/components/heading/heading.stories.ts
@@ -3,6 +3,7 @@ import { html, unsafeStatic } from 'lit/static-html.js';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
+  id: 'Components/Heading',
   title: 'Components/Heading',
   parameters: {
     badges: [BADGE.NEEDS_REVISION],
diff --git a/packages/documentation/src/stories/components/icons/components/icon.stories.ts b/packages/documentation/src/stories/components/icons/components/icon.stories.ts
index 6f93b965b1..50830e7000 100644
--- a/packages/documentation/src/stories/components/icons/components/icon.stories.ts
+++ b/packages/documentation/src/stories/components/icons/components/icon.stories.ts
@@ -7,6 +7,7 @@ import { BADGE } from '../../../../../.storybook/constants';
 import { spreadArgs } from '../../../../utils';
 
 const meta: Meta = {
+  id: 'Components/Icons',
   title: 'Components/Icons/Icon Component',
   component: 'post-icon',
   parameters: {
@@ -52,10 +53,7 @@ const meta: Meta = {
       options: [null, 'cylon', 'cylon-vertical', 'spin', 'spin-reverse', 'fade', 'throb'],
     },
   },
-  render: args =>
-    html`
-      <post-icon ${spreadArgs(normalizeArgs(args))}></post-icon>
-    `,
+  render: args => html` <post-icon ${spreadArgs(normalizeArgs(args))}></post-icon> `,
 };
 
 function normalizeArgs(args: Args) {
@@ -70,17 +68,13 @@ const renderVariants = (
   return html`
     ${customAttrs.map(
       variantArgs =>
-        html`
-          <post-icon ${spread(normalizeArgs(args))} ${spread(variantArgs)}></post-icon>
-        `,
+        html` <post-icon ${spread(normalizeArgs(args))} ${spread(variantArgs)}></post-icon> `,
     )}
   `;
 };
 
 const generateDecorators = (story: any, className?: string) => {
-  return html`
-    <div class="${ifDefined(className)}" style="font-size: 32px">${story()}</div>
-  `;
+  return html` <div class="${ifDefined(className)}" style="font-size: 32px">${story()}</div> `;
 };
 
 export default meta;
diff --git a/packages/documentation/src/stories/components/icons/getting-started.stories.ts b/packages/documentation/src/stories/components/icons/getting-started.stories.ts
index eee6af4796..9ea86a7dc2 100644
--- a/packages/documentation/src/stories/components/icons/getting-started.stories.ts
+++ b/packages/documentation/src/stories/components/icons/getting-started.stories.ts
@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/web-components';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
+  id: 'Components/Icons/Getting Started',
   title: 'Components/Icons/Getting Started',
   parameters: {
     badges: [BADGE.NEEDS_REVISION],
diff --git a/packages/documentation/src/stories/components/icons/search-icons/search-icons.stories.ts b/packages/documentation/src/stories/components/icons/search-icons/search-icons.stories.ts
index dd6aa9a2e3..a27a2ce930 100644
--- a/packages/documentation/src/stories/components/icons/search-icons/search-icons.stories.ts
+++ b/packages/documentation/src/stories/components/icons/search-icons/search-icons.stories.ts
@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from '@storybook/web-components';
 
 const meta: Meta = {
+  id: 'Components/Icons/Search for Icons',
   title: 'Components/Icons/Search for Icons',
 };
 
diff --git a/packages/documentation/src/stories/components/internet-header/getting-started.stories.ts b/packages/documentation/src/stories/components/internet-header/getting-started.stories.ts
index 78e0c93f49..45a81ea0e5 100644
--- a/packages/documentation/src/stories/components/internet-header/getting-started.stories.ts
+++ b/packages/documentation/src/stories/components/internet-header/getting-started.stories.ts
@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/web-components';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
+  id: 'Components/Internet Header/Getting Started',
   title: 'Components/Internet Header/Getting Started',
   parameters: {
     badges: [BADGE.STABLE],
diff --git a/packages/documentation/src/stories/components/intranet-header/intranet-header.stories.ts b/packages/documentation/src/stories/components/intranet-header/intranet-header.stories.ts
index fde9a6f6f4..a2be222960 100644
--- a/packages/documentation/src/stories/components/intranet-header/intranet-header.stories.ts
+++ b/packages/documentation/src/stories/components/intranet-header/intranet-header.stories.ts
@@ -2,6 +2,7 @@ import { Meta } from '@storybook/web-components';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
+  id: 'Components/Intranet Header',
   title: 'Components/Intranet Header',
   parameters: {
     badges: [BADGE.NEEDS_REVISION],
diff --git a/packages/documentation/src/stories/components/modal/modal.stories.ts b/packages/documentation/src/stories/components/modal/modal.stories.ts
index 6fbaa261e6..2a6fb6095b 100644
--- a/packages/documentation/src/stories/components/modal/modal.stories.ts
+++ b/packages/documentation/src/stories/components/modal/modal.stories.ts
@@ -3,6 +3,7 @@ import { html } from 'lit';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
+  id: 'Components/Modal',
   title: 'Components/Modal',
   parameters: {
     badges: [BADGE.WEB_COMPONENT_CANDIDATE],
diff --git a/packages/documentation/src/stories/components/pagination/pagination.stories.ts b/packages/documentation/src/stories/components/pagination/pagination.stories.ts
index 80efda1ec3..e01e99935e 100644
--- a/packages/documentation/src/stories/components/pagination/pagination.stories.ts
+++ b/packages/documentation/src/stories/components/pagination/pagination.stories.ts
@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/web-components';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
+  id: 'Components/Pagination',
   title: 'Components/Pagination',
   parameters: {
     badges: [BADGE.WEB_COMPONENT_CANDIDATE],
diff --git a/packages/documentation/src/stories/components/popover/popover.stories.ts b/packages/documentation/src/stories/components/popover/popover.stories.ts
index 87d034b55a..4126cddc41 100644
--- a/packages/documentation/src/stories/components/popover/popover.stories.ts
+++ b/packages/documentation/src/stories/components/popover/popover.stories.ts
@@ -4,6 +4,7 @@ import { html } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 
 const meta: Meta = {
+  id: 'Components/Popover',
   title: 'Components/Popover',
   component: 'post-popover',
   parameters: {
@@ -94,11 +95,7 @@ function render(args: Args) {
       placement="${args.placement}"
       ?arrow="${args.arrow}"
     >
-      ${args.title
-        ? html`
-            <h2 class="h6">Optional title</h2>
-          `
-        : null}
+      ${args.title ? html` <h2 class="h6">Optional title</h2> ` : null}
       <p class="mb-0">${unsafeHTML(args.innerHtml)}</p>
     </post-popover>
   `;
diff --git a/packages/documentation/src/stories/components/progressbar/progressbar.stories.ts b/packages/documentation/src/stories/components/progressbar/progressbar.stories.ts
index b1126715b9..1b10fd0cc5 100644
--- a/packages/documentation/src/stories/components/progressbar/progressbar.stories.ts
+++ b/packages/documentation/src/stories/components/progressbar/progressbar.stories.ts
@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/web-components';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
+  id: 'Components/Progressbar',
   title: 'Components/Progressbar',
   parameters: {
     badges: [BADGE.WEB_COMPONENT_CANDIDATE],
diff --git a/packages/documentation/src/stories/components/stepper/stepper.stories.ts b/packages/documentation/src/stories/components/stepper/stepper.stories.ts
index f6dc11dabd..b1bce0272a 100644
--- a/packages/documentation/src/stories/components/stepper/stepper.stories.ts
+++ b/packages/documentation/src/stories/components/stepper/stepper.stories.ts
@@ -3,6 +3,7 @@ import { html } from 'lit';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
+  id: 'Components/Stepper',
   title: 'Components/Stepper',
   parameters: {
     badges: [BADGE.WEB_COMPONENT_CANDIDATE],
diff --git a/packages/documentation/src/stories/components/table/table.stories.ts b/packages/documentation/src/stories/components/table/table.stories.ts
index 5166c997f4..35b6538f46 100644
--- a/packages/documentation/src/stories/components/table/table.stories.ts
+++ b/packages/documentation/src/stories/components/table/table.stories.ts
@@ -3,6 +3,7 @@ import { html } from 'lit';
 import { mapClasses } from '../../../utils';
 
 const meta: Meta = {
+  id: 'Components/Table',
   title: 'Components/Table',
   render: renderTable,
   parameters: {},
@@ -131,7 +132,9 @@ function renderTable(args: Args) {
         </tr>
       </thead>
 
-      <tbody>${args.content}</tbody>
+      <tbody>
+        ${args.content}
+      </tbody>
     </table>
   `;
 }
diff --git a/packages/documentation/src/stories/components/tabs/tabs.stories.ts b/packages/documentation/src/stories/components/tabs/tabs.stories.ts
index a391f39149..a75980d1c8 100644
--- a/packages/documentation/src/stories/components/tabs/tabs.stories.ts
+++ b/packages/documentation/src/stories/components/tabs/tabs.stories.ts
@@ -4,6 +4,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta<HTMLPostTabsElement> = {
+  id: 'Components/Tabs',
   title: 'Components/Tabs',
   component: 'post-tabs',
   render: renderTabs,
diff --git a/packages/documentation/src/stories/components/timepicker/timepicker.stories.ts b/packages/documentation/src/stories/components/timepicker/timepicker.stories.ts
index bf0db20142..7d6d87b22f 100644
--- a/packages/documentation/src/stories/components/timepicker/timepicker.stories.ts
+++ b/packages/documentation/src/stories/components/timepicker/timepicker.stories.ts
@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/web-components';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
+  id: 'Components/Timepicker',
   title: 'Components/Timepicker',
   parameters: {
     badges: [BADGE.WEB_COMPONENT_CANDIDATE],
diff --git a/packages/documentation/src/stories/components/toast/toast.stories.ts b/packages/documentation/src/stories/components/toast/toast.stories.ts
index 61073b5edd..91be598bb9 100644
--- a/packages/documentation/src/stories/components/toast/toast.stories.ts
+++ b/packages/documentation/src/stories/components/toast/toast.stories.ts
@@ -4,6 +4,7 @@ import { html } from 'lit';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
+  id: 'Components/Toast',
   title: 'Components/Toast',
   parameters: {
     badges: [BADGE.NEEDS_REVISION],
@@ -283,9 +284,7 @@ const meta: Meta = {
           </div>
         `;
       } else {
-        return html`
-          ${story()}
-        `;
+        return html` ${story()} `;
       }
     },
   ],
@@ -346,17 +345,13 @@ function killAutoHideTimeout(timeoutStore: ReturnType<typeof setTimeout>[], args
 
 function getToastIcon(args: Args) {
   return !args.noIcon && args.icon !== 'null'
-    ? html`
-        <post-icon aria-hidden="true" name="${args.icon}"></post-icon>
-      `
+    ? html` <post-icon aria-hidden="true" name="${args.icon}"></post-icon> `
     : null;
 }
 
 function getDismissButton(args: Args, isFixed: boolean) {
   return args.dismissible || isFixed
-    ? html`
-        <button class="toast-close-button" aria-label="close"></button>
-      `
+    ? html` <button class="toast-close-button" aria-label="close"></button> `
     : null;
 }
 
@@ -400,19 +395,13 @@ function render(args: Args, context: StoryContext) {
     >
       ${toastIcon} ${dismissButton}
       <div class="toast-title">${args.title}</div>
-      ${args.content
-        ? html`
-            <div class="toast-message">${args.content}</div>
-          `
-        : null}
+      ${args.content ? html` <div class="toast-message">${args.content}</div> ` : null}
     </div>
   `;
 
   let wrappedContent;
   if (args.stacked) {
-    wrappedContent = html`
-      ${component} ${component}
-    `;
+    wrappedContent = html` ${component} ${component} `;
   } else if (isFixed) {
     if (args.show) {
       createAutoHideTimeout(timeoutStore, args, updateArgs);
diff --git a/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts b/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts
index 1ca15da3e8..65233b0c4e 100644
--- a/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts
+++ b/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts
@@ -6,6 +6,7 @@ import { useArgs } from '@storybook/preview-api';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
 const meta: Meta = {
+  id: 'Components/Tooltip',
   title: 'Components/Tooltip',
   component: 'post-tooltip',
   parameters: {
diff --git a/packages/documentation/src/stories/components/topic-teaser/topic-teaser.stories.ts b/packages/documentation/src/stories/components/topic-teaser/topic-teaser.stories.ts
index 8b69ba1dc0..aa32f637d6 100644
--- a/packages/documentation/src/stories/components/topic-teaser/topic-teaser.stories.ts
+++ b/packages/documentation/src/stories/components/topic-teaser/topic-teaser.stories.ts
@@ -4,6 +4,7 @@ import { BADGE } from '../../../../.storybook/constants';
 import { mapClasses } from '../../../utils';
 
 const meta: Meta = {
+  id: 'Components/Topic Teaser',
   title: 'Components/Topic Teaser',
   parameters: {
     badges: [BADGE.NEEDS_REVISION],
@@ -174,13 +175,7 @@ export const Default: Story = {
         <div class="container">
           <div class="topic-teaser-container ${args.backgroundColor}">
             <div class="row pt-huge-r">
-              ${args.alignment === 'null'
-                ? html`
-                    ${content}${image}
-                  `
-                : html`
-                    ${image}${content}
-                  `}
+              ${args.alignment === 'null' ? html` ${content}${image} ` : html` ${image}${content} `}
             </div>
           </div>
         </div>
diff --git a/packages/documentation/src/stories/components/typeahead/typeahead.stories.ts b/packages/documentation/src/stories/components/typeahead/typeahead.stories.ts
index a50fbac8df..901912098f 100644
--- a/packages/documentation/src/stories/components/typeahead/typeahead.stories.ts
+++ b/packages/documentation/src/stories/components/typeahead/typeahead.stories.ts
@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/web-components';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
+  id: 'Components/Typeahead',
   title: 'Components/Typeahead',
   parameters: {
     badges: [BADGE.WEB_COMPONENT_CANDIDATE],
diff --git a/packages/documentation/src/stories/foundation/accessibility/accessibility.stories.ts b/packages/documentation/src/stories/foundation/accessibility/accessibility.stories.ts
index edde30f568..23668fed74 100644
--- a/packages/documentation/src/stories/foundation/accessibility/accessibility.stories.ts
+++ b/packages/documentation/src/stories/foundation/accessibility/accessibility.stories.ts
@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/web-components';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
+  id: 'Accessibility',
   title: 'Foundations/Accessibility',
   parameters: {
     badges: [BADGE.TODO],
diff --git a/packages/documentation/src/stories/foundation/color/color.stories.ts b/packages/documentation/src/stories/foundation/color/color.stories.ts
index a0a4cb44a6..b83a78e65e 100644
--- a/packages/documentation/src/stories/foundation/color/color.stories.ts
+++ b/packages/documentation/src/stories/foundation/color/color.stories.ts
@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/web-components';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
+  id: 'Color',
   title: 'Foundations/Color',
   parameters: {
     badges: [BADGE.BETA, BADGE.NEEDS_REVISION],
diff --git a/packages/documentation/src/stories/foundation/elevation/elevation.stories.ts b/packages/documentation/src/stories/foundation/elevation/elevation.stories.ts
index ad34139be1..07489316d3 100644
--- a/packages/documentation/src/stories/foundation/elevation/elevation.stories.ts
+++ b/packages/documentation/src/stories/foundation/elevation/elevation.stories.ts
@@ -3,6 +3,7 @@ import { html } from 'lit';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
+  id: 'Elevation',
   title: 'Foundations/Elevation',
   parameters: {
     badges: [BADGE.NEEDS_REVISION],
@@ -15,7 +16,5 @@ type Story = StoryObj;
 
 export const Default: Story = {
   render: () =>
-    html`
-      <div class="w-50 rounded p-regular bg-aubergine elevation-5">I'm elevated!</div>
-    `,
+    html` <div class="w-50 rounded p-regular bg-aubergine elevation-5">I'm elevated!</div> `,
 };
diff --git a/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.stories.ts b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.stories.ts
index 8aa74e4e5d..f624492094 100644
--- a/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.stories.ts
+++ b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.stories.ts
@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/web-components';
 import { BADGE } from '../../../../../.storybook/constants';
 
 const meta: Meta = {
+  id: 'Layout/Breakpoints',
   title: 'Foundations/Layout/Breakpoints',
   parameters: {
     badges: [BADGE.NEEDS_REVISION],
diff --git a/packages/documentation/src/stories/foundation/layout/columns/columns.stories.ts b/packages/documentation/src/stories/foundation/layout/columns/columns.stories.ts
index 47c79c8c94..bd1a2a3b4f 100644
--- a/packages/documentation/src/stories/foundation/layout/columns/columns.stories.ts
+++ b/packages/documentation/src/stories/foundation/layout/columns/columns.stories.ts
@@ -1,8 +1,9 @@
-import type { Args, Meta, StoryFn, StoryObj, StoryContext } from '@storybook/web-components';
+import type { Args, Meta, StoryContext, StoryFn, StoryObj } from '@storybook/web-components';
 import { BADGE } from '../../../../../.storybook/constants';
 import { html, nothing } from 'lit';
 
 const meta: Meta = {
+  id: 'Layout/Columns',
   title: 'Foundations/Layout/Columns',
   parameters: {
     badges: [BADGE.NEEDS_REVISION],
diff --git a/packages/documentation/src/stories/foundation/layout/containers/containers.stories.ts b/packages/documentation/src/stories/foundation/layout/containers/containers.stories.ts
index 0544acac1f..619cbcc240 100644
--- a/packages/documentation/src/stories/foundation/layout/containers/containers.stories.ts
+++ b/packages/documentation/src/stories/foundation/layout/containers/containers.stories.ts
@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/web-components';
 import { BADGE } from '../../../../../.storybook/constants';
 
 const meta: Meta = {
+  id: 'Layout/Containers',
   title: 'Foundations/Layout/Containers',
   parameters: {
     badges: [BADGE.NEEDS_REVISION],
diff --git a/packages/documentation/src/stories/foundation/layout/grid/grid.stories.ts b/packages/documentation/src/stories/foundation/layout/grid/grid.stories.ts
index 34585ac825..af39ca9ab5 100644
--- a/packages/documentation/src/stories/foundation/layout/grid/grid.stories.ts
+++ b/packages/documentation/src/stories/foundation/layout/grid/grid.stories.ts
@@ -1,8 +1,9 @@
-import { Meta, StoryFn, StoryObj, StoryContext } from '@storybook/web-components';
+import { Meta, StoryContext, StoryFn, StoryObj } from '@storybook/web-components';
 import { BADGE } from '../../../../../.storybook/constants';
 import { html } from 'lit';
 
 const meta: Meta = {
+  id: 'Layout/Grid',
   title: 'Foundations/Layout/Grid',
   parameters: {
     badges: [BADGE.NEEDS_REVISION],
diff --git a/packages/documentation/src/stories/foundation/typography/typography.stories.ts b/packages/documentation/src/stories/foundation/typography/typography.stories.ts
index 9c9c77a13b..e63ee7aafb 100644
--- a/packages/documentation/src/stories/foundation/typography/typography.stories.ts
+++ b/packages/documentation/src/stories/foundation/typography/typography.stories.ts
@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/web-components';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
+  id: 'Typography',
   title: 'Foundations/Typography',
   parameters: {
     badges: [BADGE.BETA, BADGE.NEEDS_REVISION],
diff --git a/packages/documentation/src/stories/getting-started/compatibility/compatibility.stories.ts b/packages/documentation/src/stories/getting-started/compatibility/compatibility.stories.ts
index 63e2462935..0aaf5522cf 100644
--- a/packages/documentation/src/stories/getting-started/compatibility/compatibility.stories.ts
+++ b/packages/documentation/src/stories/getting-started/compatibility/compatibility.stories.ts
@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/web-components';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
+  id: 'Getting Started/Compatibility',
   title: 'Getting Started/Compatibility',
   parameters: {
     badges: [BADGE.NEEDS_REVISION],
diff --git a/packages/documentation/src/stories/getting-started/components-angular/angular.stories.ts b/packages/documentation/src/stories/getting-started/components-angular/angular.stories.ts
index 9ce2557e12..8fbe6a4637 100644
--- a/packages/documentation/src/stories/getting-started/components-angular/angular.stories.ts
+++ b/packages/documentation/src/stories/getting-started/components-angular/angular.stories.ts
@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/web-components';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
+  id: 'Getting Started/Components-Angular',
   title: 'Getting Started/Components-Angular',
   parameters: {
     badges: [BADGE.NEEDS_REVISION],
diff --git a/packages/documentation/src/stories/getting-started/components/components.stories.ts b/packages/documentation/src/stories/getting-started/components/components.stories.ts
index cacee53bdd..311b020720 100644
--- a/packages/documentation/src/stories/getting-started/components/components.stories.ts
+++ b/packages/documentation/src/stories/getting-started/components/components.stories.ts
@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/web-components';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
+  id: 'Getting Started/Components',
   title: 'Getting Started/Components',
   parameters: {
     badges: [BADGE.NEEDS_REVISION],
diff --git a/packages/documentation/src/stories/getting-started/styles/styles.stories.ts b/packages/documentation/src/stories/getting-started/styles/styles.stories.ts
index 27b5d70775..683e15d556 100644
--- a/packages/documentation/src/stories/getting-started/styles/styles.stories.ts
+++ b/packages/documentation/src/stories/getting-started/styles/styles.stories.ts
@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/web-components';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
+  id: 'Getting Started/Styles',
   title: 'Getting Started/Styles',
   parameters: {
     badges: [BADGE.NEEDS_REVISION],
diff --git a/packages/documentation/src/stories/home.stories.ts b/packages/documentation/src/stories/home.stories.ts
index 5e0e20b69c..cd486f068d 100644
--- a/packages/documentation/src/stories/home.stories.ts
+++ b/packages/documentation/src/stories/home.stories.ts
@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/web-components';
 import { BADGE } from '../../.storybook/constants';
 
 const meta: Meta = {
+  id: 'Home',
   title: 'Home',
   parameters: {
     badges: [BADGE.BETA, BADGE.NEEDS_REVISION],
diff --git a/packages/documentation/src/stories/misc/changelog/changelog.stories.ts b/packages/documentation/src/stories/misc/changelog/changelog.stories.ts
index 5ca0967d50..10b1fa4978 100644
--- a/packages/documentation/src/stories/misc/changelog/changelog.stories.ts
+++ b/packages/documentation/src/stories/misc/changelog/changelog.stories.ts
@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from '@storybook/web-components';
 
 const meta: Meta = {
+  id: 'Changelog',
   title: 'Misc/Changelog',
 };
 
diff --git a/packages/documentation/src/stories/misc/migration-guide/migration-guide.stories.ts b/packages/documentation/src/stories/misc/migration-guide/migration-guide.stories.ts
index e5b9156afd..763518d495 100644
--- a/packages/documentation/src/stories/misc/migration-guide/migration-guide.stories.ts
+++ b/packages/documentation/src/stories/misc/migration-guide/migration-guide.stories.ts
@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/web-components';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
+  id: 'Migration Guide',
   title: 'Misc/Migration Guide',
   parameters: {
     badges: [BADGE.TODO],
diff --git a/packages/documentation/src/stories/misc/versions/versions.stories.ts b/packages/documentation/src/stories/misc/versions/versions.stories.ts
index 8c363ab619..1bbab6e3f8 100644
--- a/packages/documentation/src/stories/misc/versions/versions.stories.ts
+++ b/packages/documentation/src/stories/misc/versions/versions.stories.ts
@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/web-components';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
+  id: 'Versions',
   title: 'Misc/Versions',
   parameters: {
     badges: [BADGE.NEEDS_REVISION],
diff --git a/packages/documentation/src/stories/patterns/forms/forms.stories.ts b/packages/documentation/src/stories/patterns/forms/forms.stories.ts
index fb31b4fe43..a9b46e951a 100644
--- a/packages/documentation/src/stories/patterns/forms/forms.stories.ts
+++ b/packages/documentation/src/stories/patterns/forms/forms.stories.ts
@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 
 const meta: Meta = {
+  id: 'Patterns/Forms',
   title: 'Patterns/Forms',
   parameters: {
     badges: [],
diff --git a/packages/documentation/src/stories/utilities/background/background.stories.ts b/packages/documentation/src/stories/utilities/background/background.stories.ts
index 9a29e55d45..b3ade596ac 100644
--- a/packages/documentation/src/stories/utilities/background/background.stories.ts
+++ b/packages/documentation/src/stories/utilities/background/background.stories.ts
@@ -3,6 +3,7 @@ import { html } from 'lit';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
+  id: 'Utilities/Background',
   title: 'Utilities/Background',
   parameters: {
     badges: [BADGE.TODO],
@@ -14,9 +15,7 @@ export default meta;
 type Story = StoryObj;
 
 export const ColoredBackground: Story = {
-  render: () => html`
-    <div class="bg-yellow p-3">Content</div>
-  `,
+  render: () => html` <div class="bg-yellow p-3">Content</div> `,
 };
 
 export const NestedBackgrounds: Story = {
diff --git a/packages/documentation/src/stories/utilities/common/common.stories.ts b/packages/documentation/src/stories/utilities/common/common.stories.ts
index 921f593fff..c71bd94c49 100644
--- a/packages/documentation/src/stories/utilities/common/common.stories.ts
+++ b/packages/documentation/src/stories/utilities/common/common.stories.ts
@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/web-components';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
+  id: 'Utilities/Common',
   title: 'Utilities/Common',
   parameters: {
     badges: [BADGE.TODO],
diff --git a/packages/documentation/src/stories/utilities/heading/heading.stories.ts b/packages/documentation/src/stories/utilities/heading/heading.stories.ts
index 4d14adc91f..8bc490dc9b 100644
--- a/packages/documentation/src/stories/utilities/heading/heading.stories.ts
+++ b/packages/documentation/src/stories/utilities/heading/heading.stories.ts
@@ -3,6 +3,7 @@ import { html } from 'lit';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
+  id: 'Utilities/Heading',
   title: 'Utilities/Heading',
   parameters: {
     badges: [BADGE.NEEDS_REVISION],
@@ -14,13 +15,9 @@ export default meta;
 type Story = StoryObj;
 
 export const OnAnHeadingElement: Story = {
-  render: () => html`
-    <h6 class="h3">Heading level 6 with h3 styles...</h6>
-  `,
+  render: () => html` <h6 class="h3">Heading level 6 with h3 styles...</h6> `,
 };
 
 export const OnAParagraphElement: Story = {
-  render: () => html`
-    <p class="h3">Paragraph with h3 styles...</p>
-  `,
+  render: () => html` <p class="h3">Paragraph with h3 styles...</p> `,
 };
diff --git a/packages/documentation/src/stories/utilities/list/list.stories.ts b/packages/documentation/src/stories/utilities/list/list.stories.ts
index 71edadcf10..ea731bd14d 100644
--- a/packages/documentation/src/stories/utilities/list/list.stories.ts
+++ b/packages/documentation/src/stories/utilities/list/list.stories.ts
@@ -3,6 +3,7 @@ import { html } from 'lit';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
+  id: 'Utilities/List',
   title: 'Utilities/List',
   parameters: {
     badges: [BADGE.TODO],
diff --git a/packages/documentation/src/stories/utilities/sizing/sizing.stories.ts b/packages/documentation/src/stories/utilities/sizing/sizing.stories.ts
index 875234b774..e0b00f4809 100644
--- a/packages/documentation/src/stories/utilities/sizing/sizing.stories.ts
+++ b/packages/documentation/src/stories/utilities/sizing/sizing.stories.ts
@@ -12,6 +12,7 @@ const sizeOptionsPercent = ['auto', '25', '50', '75', '100'];
 
 const meta: Meta = {
   render: renderSizing,
+  id: 'Utilities/Sizing',
   title: 'Utilities/Sizing',
   parameters: {
     badges: [BADGE.NEEDS_REVISION],
diff --git a/packages/documentation/src/stories/utilities/spacing/spacing.stories.ts b/packages/documentation/src/stories/utilities/spacing/spacing.stories.ts
index 6810e0e55c..8c85edcfb3 100644
--- a/packages/documentation/src/stories/utilities/spacing/spacing.stories.ts
+++ b/packages/documentation/src/stories/utilities/spacing/spacing.stories.ts
@@ -1,4 +1,4 @@
-import type { Args, Meta, StoryObj, StoryFn, StoryContext } from '@storybook/web-components';
+import type { Args, Meta, StoryContext, StoryFn, StoryObj } from '@storybook/web-components';
 import { BADGE } from '../../../../.storybook/constants';
 import { html } from 'lit/static-html.js';
 import './spacing.styles.scss';
@@ -20,6 +20,7 @@ const positionOptions = {
 };
 
 const meta: Meta = {
+  id: 'Utilities/Spacing',
   title: 'Utilities/Spacing',
   parameters: {
     badges: [BADGE.NEEDS_REVISION],
@@ -143,9 +144,7 @@ export const Default: Story = {
 
 export const responsiveExample: Story = {
   render: (args: Args) => {
-    return html`
-      <div class="h-bigger-giant w-bigger-giant p-regular p-lg-big"></div>
-    `;
+    return html` <div class="h-bigger-giant w-bigger-giant p-regular p-lg-big"></div> `;
   },
   decorators: [
     // everything in here will be visible in the example, but only the content coming from the `story` function will be shown in the code preview
@@ -163,9 +162,7 @@ export const responsiveExample: Story = {
 
 export const automaticResponsiveExample: Story = {
   render: (args: Args) => {
-    return html`
-      <div class="h-bigger-giant w-bigger-giant p-large-r"></div>
-    `;
+    return html` <div class="h-bigger-giant w-bigger-giant p-large-r"></div> `;
   },
   decorators: [
     (story: StoryFn, { args, context }: StoryContext) => html`
diff --git a/packages/documentation/src/stories/utilities/text/text.stories.ts b/packages/documentation/src/stories/utilities/text/text.stories.ts
index 716ecde558..2da6676f59 100644
--- a/packages/documentation/src/stories/utilities/text/text.stories.ts
+++ b/packages/documentation/src/stories/utilities/text/text.stories.ts
@@ -3,6 +3,7 @@ import { html } from 'lit';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
+  id: 'Utilities/Text',
   title: 'Utilities/Text',
   parameters: {
     badges: [BADGE.NEEDS_REVISION],
@@ -14,41 +15,27 @@ export default meta;
 type Story = StoryObj;
 
 export const FontFamily: Story = {
-  render: () => html`
-    <p class="font-sans-serif">This is sans serif text.</p>
-  `,
+  render: () => html` <p class="font-sans-serif">This is sans serif text.</p> `,
 };
 
 export const FontSize: Story = {
-  render: () => html`
-    <p class="fs-tiny">This is tiny text.</p>
-  `,
+  render: () => html` <p class="fs-tiny">This is tiny text.</p> `,
 };
 
 export const FontWeight: Story = {
-  render: () => html`
-    <p class="fw-bold">This is bold text.</p>
-  `,
+  render: () => html` <p class="fw-bold">This is bold text.</p> `,
 };
 
 export const FontStyle: Story = {
-  render: () => html`
-    <p class="fst-italic">This is italic text.</p>
-  `,
+  render: () => html` <p class="fst-italic">This is italic text.</p> `,
 };
 
 export const LineHeight: Story = {
-  render: () => html`
-    <p class="lh-1">This text has a line height equal to the font size.</p>
-  `,
+  render: () => html` <p class="lh-1">This text has a line height equal to the font size.</p> `,
 };
 
 export const TextColor: Story = {
-  decorators: [
-    story => html`
-      <div @click=${(e: Event) => e.preventDefault()}>${story()}</div>
-    `,
-  ],
+  decorators: [story => html` <div @click=${(e: Event) => e.preventDefault()}>${story()}</div> `],
   render: () => html`
     <p class="text-success">This is colored text.</p>
     <a href="#" class="link-warning">This is a colored link, it lightens on hover.</a>
@@ -56,11 +43,7 @@ export const TextColor: Story = {
 };
 
 export const TextColorReset: Story = {
-  decorators: [
-    story => html`
-      <div @click=${(e: Event) => e.preventDefault()}>${story()}</div>
-    `,
-  ],
+  decorators: [story => html` <div @click=${(e: Event) => e.preventDefault()}>${story()}</div> `],
   render: () => html`
     <p class="text-danger">
       This is colored text with a

From bad34f3e01572d008d520e13b287fc45d014dc42 Mon Sep 17 00:00:00 2001
From: imagoiq <12294151+imagoiq@users.noreply.github.com>
Date: Wed, 7 Feb 2024 11:09:23 +0100
Subject: [PATCH 02/13] Fix foundations links

---
 .../src/stories/components/button/button.docs.mdx        | 2 +-
 .../src/stories/components/button/button.stories.ts      | 2 +-
 .../src/stories/components/cards/card/card.docs.mdx      | 2 +-
 .../components/cards/product-card/product-card.docs.mdx  | 2 +-
 .../stories/components/forms/checkbox/checkbox.docs.mdx  | 2 +-
 .../components/forms/checkbox/checkbox.stories.ts        | 4 ++--
 .../stories/components/forms/choice-card/choice-card.ts  | 6 ++----
 .../src/stories/components/forms/input/input.stories.ts  | 4 ++--
 .../src/stories/components/forms/radio/radio.docs.mdx    | 2 +-
 .../src/stories/components/forms/radio/radio.stories.ts  | 4 ++--
 .../src/stories/components/forms/range/range.stories.ts  | 4 ++--
 .../stories/components/forms/select/select.stories.ts    | 4 ++--
 .../stories/components/forms/switch/switch.stories.ts    | 4 ++--
 .../components/forms/textarea/textarea.stories.ts        | 4 ++--
 .../src/stories/foundation/layout/grid/grid.blocks.tsx   | 2 +-
 .../src/stories/patterns/forms/forms.docs.mdx            | 9 ++++-----
 .../src/stories/utilities/background/background.docs.mdx | 2 +-
 .../src/stories/utilities/heading/heading.docs.mdx       | 2 +-
 .../src/stories/utilities/text/text.docs.mdx             | 2 +-
 19 files changed, 30 insertions(+), 33 deletions(-)

diff --git a/packages/documentation/src/stories/components/button/button.docs.mdx b/packages/documentation/src/stories/components/button/button.docs.mdx
index ae8caf1e23..7da172c25b 100644
--- a/packages/documentation/src/stories/components/button/button.docs.mdx
+++ b/packages/documentation/src/stories/components/button/button.docs.mdx
@@ -53,7 +53,7 @@ To achieve that, you can use classes in the format:
 
 For example, a button with classes `w-100 w-lg-auto` will use all available space only when the viewport size is smaller than `lg`.
 
-To learn more about breakpoints, see the <a href="/?path=/docs/foundations-layout-breakpoints--docs">Breakpoints documentation</a>.
+To learn more about breakpoints, see the <a href="/?path=/docs/layout-breakpoints--docs">Breakpoints documentation</a>.
 
 <Canvas of={ButtonStories.FullWidth} />
 
diff --git a/packages/documentation/src/stories/components/button/button.stories.ts b/packages/documentation/src/stories/components/button/button.stories.ts
index 27eebee95e..dced45d1ed 100644
--- a/packages/documentation/src/stories/components/button/button.stories.ts
+++ b/packages/documentation/src/stories/components/button/button.stories.ts
@@ -196,7 +196,7 @@ const meta: Meta = {
     disabled: {
       name: 'Disabled',
       description:
-        'When set to `true`, makes the component appear inactive and disables its functionality.<div className="mt-mini alert alert-info alert-sm">There are accessibility concerns with the disabled state.<br/>Please read our <a href="/?path=/docs/foundations-accessibility--docs#disabled-state">disabled state accessibility guide</a>.</div>',
+        'When set to `true`, makes the component appear inactive and disables its functionality.<div className="mt-mini alert alert-info alert-sm">There are accessibility concerns with the disabled state.<br/>Please read our <a href="/?path=/docs/accessibility--docs#disabled-state">disabled state accessibility guide</a>.</div>',
       control: {
         type: 'boolean',
       },
diff --git a/packages/documentation/src/stories/components/cards/card/card.docs.mdx b/packages/documentation/src/stories/components/cards/card/card.docs.mdx
index 32e000faac..7536e54b41 100644
--- a/packages/documentation/src/stories/components/cards/card/card.docs.mdx
+++ b/packages/documentation/src/stories/components/cards/card/card.docs.mdx
@@ -14,7 +14,7 @@ Built with flexbox, they offer easy alignment and mix well with other components
 
 They have no fixed width to start, so they’ll naturally fill the full width of its parent element.
 This is easily customizable using the grid for example,
-for more details read our [grid docs](/?path=/docs/foundations-layout-grid--docs).
+for more details read our [grid docs](/?path=/docs/layout-grid--docs).
 
 <Canvas sourceState="shown" of={CardStories.Default} />
 <div className="hide-col-default">
diff --git a/packages/documentation/src/stories/components/cards/product-card/product-card.docs.mdx b/packages/documentation/src/stories/components/cards/product-card/product-card.docs.mdx
index 190aad92aa..bc8bcf8d35 100644
--- a/packages/documentation/src/stories/components/cards/product-card/product-card.docs.mdx
+++ b/packages/documentation/src/stories/components/cards/product-card/product-card.docs.mdx
@@ -25,7 +25,7 @@ import ProductCardAngularSyncHeights from './product-card.sample.ts?raw';
 
 ### Product Card Group
 
-For organizing multiple product cards in a group, utilize the [grid system](/?path=/docs/foundations-layout-grid--docs).
+For organizing multiple product cards in a group, utilize the [grid system](/?path=/docs/layout-grid--docs).
 Ensure consistent height by applying the `.h-100` class to all product cards.
 
 <Canvas of={ProductCardStories.Groupped} />
diff --git a/packages/documentation/src/stories/components/forms/checkbox/checkbox.docs.mdx b/packages/documentation/src/stories/components/forms/checkbox/checkbox.docs.mdx
index 620caa6f88..49a841ccf4 100644
--- a/packages/documentation/src/stories/components/forms/checkbox/checkbox.docs.mdx
+++ b/packages/documentation/src/stories/components/forms/checkbox/checkbox.docs.mdx
@@ -59,7 +59,7 @@ To show the checkboxes inline, just add the `.form-check-inline` class to each o
   Don't forget to wrap your checkbox group in a `&lt;fieldset&gt;` that includes a `&lt;legend&gt;` element.
   You can then visually hide the legend using the `.visually-hidden` class.
 
-  Read more about that topic in our [accessibility docs](/?path=/docs/foundations-accessibility--docs).
+  Read more about that topic in our [accessibility docs](/?path=/docs/accessibility--docs).
 </div>
 
 <Canvas of={checkboxStories.Inline} />
diff --git a/packages/documentation/src/stories/components/forms/checkbox/checkbox.stories.ts b/packages/documentation/src/stories/components/forms/checkbox/checkbox.stories.ts
index 763dd30988..e25b7690a6 100644
--- a/packages/documentation/src/stories/components/forms/checkbox/checkbox.stories.ts
+++ b/packages/documentation/src/stories/components/forms/checkbox/checkbox.stories.ts
@@ -60,7 +60,7 @@ const meta: Meta = {
         'If `true`, the checkbox label is set via an `aria-label` attribute and is therefore not visible.' +
         '<span className="mt-mini alert alert-info alert-sm">' +
         'Shown or hidden, a label must always be defined.<br/>' +
-        'More details in our <a href="/?path=/docs/foundations-accessibility--docs">accessibility docs</a>.' +
+        'More details in our <a href="/?path=/docs/accessibility--docs">accessibility docs</a>.' +
         '</span>',
       control: {
         type: 'boolean',
@@ -106,7 +106,7 @@ const meta: Meta = {
         'If `true`, makes the checkbox appear inactive and disables its functionality.' +
         '<span className="mt-mini alert alert-info alert-sm">' +
         'There are accessibility concerns with the disabled state.<br/>' +
-        'More details in our <a href="/?path=/docs/foundations-accessibility--docs">accessibility docs</a>.' +
+        'More details in our <a href="/?path=/docs/accessibility--docs">accessibility docs</a>.' +
         '</span>',
       control: {
         type: 'boolean',
diff --git a/packages/documentation/src/stories/components/forms/choice-card/choice-card.ts b/packages/documentation/src/stories/components/forms/choice-card/choice-card.ts
index 9cdfe5c83a..1234f3067b 100644
--- a/packages/documentation/src/stories/components/forms/choice-card/choice-card.ts
+++ b/packages/documentation/src/stories/components/forms/choice-card/choice-card.ts
@@ -60,7 +60,7 @@ export const choiceCardMeta: Meta = {
     disabled: {
       name: 'Disabled',
       description:
-        'When set to `true`, disables the component\'s functionality and places it in a disabled state.<span className="mt-mini alert alert-info alert-sm">There are accessibility concerns with the disabled state.<br/>Please read our <a href="/?path=/docs/foundations-accessibility--docs#disabled-state">disabled state accessibility guide</a>.</span>',
+        'When set to `true`, disables the component\'s functionality and places it in a disabled state.<span className="mt-mini alert alert-info alert-sm">There are accessibility concerns with the disabled state.<br/>Please read our <a href="/?path=/docs/accessibility--docs#disabled-state">disabled state accessibility guide</a>.</span>',
       control: {
         type: 'boolean',
       },
@@ -164,9 +164,7 @@ export const choiceCardDefault = (args: Args) => {
     <br />
     <span class="font-size-12">${args.description}</span>
   `;
-  const icon = html`
-    <post-icon name="${args.icon}" aria-hidden="true"></post-icon>
-  `;
+  const icon = html` <post-icon name="${args.icon}" aria-hidden="true"></post-icon> `;
 
   // Firefox fallback for the :has selector
   const _handleInput = (e: InputEvent) => {
diff --git a/packages/documentation/src/stories/components/forms/input/input.stories.ts b/packages/documentation/src/stories/components/forms/input/input.stories.ts
index abef1ec865..3c7841e0f1 100644
--- a/packages/documentation/src/stories/components/forms/input/input.stories.ts
+++ b/packages/documentation/src/stories/components/forms/input/input.stories.ts
@@ -55,7 +55,7 @@ const meta: Meta = {
     hiddenLabel: {
       name: 'Hidden Label',
       description:
-        'Renders the component with or without a visible label.<span className="mt-mini alert alert-info alert-sm">There are accessibility concerns with hidden labels.<br/>Please read our <a href="/?path=/docs/foundations-accessibility--docs#labels">label accessibility guide</a>.</span>',
+        'Renders the component with or without a visible label.<span className="mt-mini alert alert-info alert-sm">There are accessibility concerns with hidden labels.<br/>Please read our <a href="/?path=/docs/accessibility--docs#labels">label accessibility guide</a>.</span>',
       if: {
         arg: 'floatingLabel',
         truthy: false,
@@ -155,7 +155,7 @@ const meta: Meta = {
     disabled: {
       name: 'Disabled',
       description:
-        'When set to `true`, disables the component\'s functionality and places it in a disabled state.<div className="mt-mini alert alert-info alert-sm">There are accessibility concerns with the disabled state.<br/>Please read our <a href="/?path=/docs/foundations-accessibility--docs#disabled-state">disabled state accessibility guide</a>.</div>',
+        'When set to `true`, disables the component\'s functionality and places it in a disabled state.<div className="mt-mini alert alert-info alert-sm">There are accessibility concerns with the disabled state.<br/>Please read our <a href="/?path=/docs/accessibility--docs#disabled-state">disabled state accessibility guide</a>.</div>',
       control: {
         type: 'boolean',
       },
diff --git a/packages/documentation/src/stories/components/forms/radio/radio.docs.mdx b/packages/documentation/src/stories/components/forms/radio/radio.docs.mdx
index 842dc98f50..14f506b096 100644
--- a/packages/documentation/src/stories/components/forms/radio/radio.docs.mdx
+++ b/packages/documentation/src/stories/components/forms/radio/radio.docs.mdx
@@ -43,7 +43,7 @@ To render a radio inline, simply add the class `.form-check-inline` to the `.for
   <code>&lt;legend&gt;</code> tag. This provides a label for your radio group.
   <br />
   For more information, read our{' '}
-  <a href="/?path=/docs/foundations-accessibility--docs#grouping">grouping accessibility guide</a>.
+  <a href="/?path=/docs/accessibility--docs#grouping">grouping accessibility guide</a>.
 </div>
 
 To visually hide the `<legend>` element, use the `.visually-hidden` class.
diff --git a/packages/documentation/src/stories/components/forms/radio/radio.stories.ts b/packages/documentation/src/stories/components/forms/radio/radio.stories.ts
index 247eb253bd..d02b83f822 100644
--- a/packages/documentation/src/stories/components/forms/radio/radio.stories.ts
+++ b/packages/documentation/src/stories/components/forms/radio/radio.stories.ts
@@ -51,7 +51,7 @@ const meta: Meta = {
     hiddenLabel: {
       name: 'Hidden Label',
       description:
-        'Renders the component with or without a visible label.<span className="mt-mini alert alert-info alert-sm">There are accessibility concerns with hidden labels.<br/>Please read our <a href="/?path=/docs/foundations-accessibility--docs#labels">label accessibility guide</a>.</span>',
+        'Renders the component with or without a visible label.<span className="mt-mini alert alert-info alert-sm">There are accessibility concerns with hidden labels.<br/>Please read our <a href="/?path=/docs/accessibility--docs#labels">label accessibility guide</a>.</span>',
       control: {
         type: 'boolean',
       },
@@ -87,7 +87,7 @@ const meta: Meta = {
     disabled: {
       name: 'Disabled',
       description:
-        'When set to `true`, disables the component\'s functionality and places it in a disabled state.<span className="mt-mini alert alert-info alert-sm">There are accessibility concerns with the disabled state.<br/>Please read our <a href="/?path=/docs/foundations-accessibility--docs#disabled-state">disabled state accessibility guide</a>.</span>',
+        'When set to `true`, disables the component\'s functionality and places it in a disabled state.<span className="mt-mini alert alert-info alert-sm">There are accessibility concerns with the disabled state.<br/>Please read our <a href="/?path=/docs/accessibility--docs#disabled-state">disabled state accessibility guide</a>.</span>',
       control: {
         type: 'boolean',
       },
diff --git a/packages/documentation/src/stories/components/forms/range/range.stories.ts b/packages/documentation/src/stories/components/forms/range/range.stories.ts
index 3f68edfdb6..8ac527d979 100644
--- a/packages/documentation/src/stories/components/forms/range/range.stories.ts
+++ b/packages/documentation/src/stories/components/forms/range/range.stories.ts
@@ -44,7 +44,7 @@ const meta: Meta = {
     hiddenLabel: {
       name: 'Hidden Label',
       description:
-        'Renders the component with or without a visible label.<span className="mt-mini alert alert-info alert-sm">There are accessibility concerns with hidden labels.<br/>Please read our <a href="/?path=/docs/foundations-accessibility--docs#labels">label accessibility guide</a>.</span>',
+        'Renders the component with or without a visible label.<span className="mt-mini alert alert-info alert-sm">There are accessibility concerns with hidden labels.<br/>Please read our <a href="/?path=/docs/accessibility--docs#labels">label accessibility guide</a>.</span>',
       control: {
         type: 'boolean',
       },
@@ -132,7 +132,7 @@ const meta: Meta = {
     disabled: {
       name: 'Disabled',
       description:
-        'When set to `true`, disables the component\'s functionality and places it in a disabled state.<span className="mt-mini alert alert-info alert-sm">There are accessibility concerns with the disabled state.<br/>Please read our <a href="/?path=/docs/foundations-accessibility--docs#disabled-state">disabled state accessibility guide</a>.</span>',
+        'When set to `true`, disables the component\'s functionality and places it in a disabled state.<span className="mt-mini alert alert-info alert-sm">There are accessibility concerns with the disabled state.<br/>Please read our <a href="/?path=/docs/accessibility--docs#disabled-state">disabled state accessibility guide</a>.</span>',
       control: {
         type: 'boolean',
       },
diff --git a/packages/documentation/src/stories/components/forms/select/select.stories.ts b/packages/documentation/src/stories/components/forms/select/select.stories.ts
index 9a1d126aad..e632be7474 100644
--- a/packages/documentation/src/stories/components/forms/select/select.stories.ts
+++ b/packages/documentation/src/stories/components/forms/select/select.stories.ts
@@ -54,7 +54,7 @@ const meta: Meta = {
     hiddenLabel: {
       name: 'Hidden Label',
       description:
-        'Renders the component with or without a visible label.<span className="mt-mini alert alert-info alert-sm">There are accessibility concerns with hidden labels.<br/>Please read our <a href="/?path=/docs/foundations-accessibility--docs#labels">label accessibility guide</a>.</span>',
+        'Renders the component with or without a visible label.<span className="mt-mini alert alert-info alert-sm">There are accessibility concerns with hidden labels.<br/>Please read our <a href="/?path=/docs/accessibility--docs#labels">label accessibility guide</a>.</span>',
       if: {
         arg: 'floatingLabel',
         truthy: false,
@@ -168,7 +168,7 @@ const meta: Meta = {
     disabled: {
       name: 'Disabled',
       description:
-        'When set to `true`, disables the component\'s functionality and places it in a disabled state.<span className="mt-mini alert alert-info alert-sm">There are accessibility issues with the disabled state.<br/>Please read our <a href="/?path=/docs/foundations-accessibility--docs#disabled-state">disabled state accessibility guide</a>.</span>',
+        'When set to `true`, disables the component\'s functionality and places it in a disabled state.<span className="mt-mini alert alert-info alert-sm">There are accessibility issues with the disabled state.<br/>Please read our <a href="/?path=/docs/accessibility--docs#disabled-state">disabled state accessibility guide</a>.</span>',
       control: {
         type: 'boolean',
       },
diff --git a/packages/documentation/src/stories/components/forms/switch/switch.stories.ts b/packages/documentation/src/stories/components/forms/switch/switch.stories.ts
index c7087f2a5c..f9bc9b8aae 100644
--- a/packages/documentation/src/stories/components/forms/switch/switch.stories.ts
+++ b/packages/documentation/src/stories/components/forms/switch/switch.stories.ts
@@ -49,7 +49,7 @@ const meta: Meta = {
     hiddenLabel: {
       name: 'Hidden Label',
       description:
-        'Renders the component with or without a visible label.<span className="mt-mini alert alert-info alert-sm">There are accessibility concerns with hidden labels.<br/>Please read our <a href="/?path=/docs/foundations-accessibility--docs#labels">label accessibility guide</a>.</span>',
+        'Renders the component with or without a visible label.<span className="mt-mini alert alert-info alert-sm">There are accessibility concerns with hidden labels.<br/>Please read our <a href="/?path=/docs/accessibility--docs#labels">label accessibility guide</a>.</span>',
       control: {
         type: 'boolean',
       },
@@ -70,7 +70,7 @@ const meta: Meta = {
     disabled: {
       name: 'Disabled',
       description:
-        'When set to `true`, disables the component\'s functionality and places it in a disabled state.<span className="mt-mini alert alert-info alert-sm">There are accessibility concerns with the disabled state.<br/>Please read our <a href="/?path=/docs/foundations-accessibility--docs#disabled-state">disabled state accessibility guide</a>.</span>',
+        'When set to `true`, disables the component\'s functionality and places it in a disabled state.<span className="mt-mini alert alert-info alert-sm">There are accessibility concerns with the disabled state.<br/>Please read our <a href="/?path=/docs/accessibility--docs#disabled-state">disabled state accessibility guide</a>.</span>',
       control: {
         type: 'boolean',
       },
diff --git a/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts b/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts
index 2a0701b0e4..9ef6138933 100644
--- a/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts
+++ b/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts
@@ -51,7 +51,7 @@ const meta: Meta = {
     hiddenLabel: {
       name: 'Hidden Label',
       description:
-        'Renders the component with or without a visible label.<span className="mt-mini alert alert-info alert-sm">There are accessibility concerns with hidden labels.<br/>Please read our <a href="/?path=/docs/foundations-accessibility--docs#labels">label accessibility guide</a>.</span>',
+        'Renders the component with or without a visible label.<span className="mt-mini alert alert-info alert-sm">There are accessibility concerns with hidden labels.<br/>Please read our <a href="/?path=/docs/accessibility--docs#labels">label accessibility guide</a>.</span>',
       if: {
         arg: 'floatingLabel',
         truthy: false,
@@ -121,7 +121,7 @@ const meta: Meta = {
     disabled: {
       name: 'Disabled',
       description:
-        'When set to `true`, disables the component\'s functionality and places it in a disabled state.<div className="mt-mini alert alert-info alert-sm">There are accessibility concerns with the disabled state.<br/>Please read our <a href="/?path=/docs/foundations-accessibility--docs#disabled-state">disabled state accessibility guide</a>.</div>',
+        'When set to `true`, disables the component\'s functionality and places it in a disabled state.<div className="mt-mini alert alert-info alert-sm">There are accessibility concerns with the disabled state.<br/>Please read our <a href="/?path=/docs/accessibility--docs#disabled-state">disabled state accessibility guide</a>.</div>',
       control: {
         type: 'boolean',
       },
diff --git a/packages/documentation/src/stories/foundation/layout/grid/grid.blocks.tsx b/packages/documentation/src/stories/foundation/layout/grid/grid.blocks.tsx
index a33a97a009..38ee14bd88 100644
--- a/packages/documentation/src/stories/foundation/layout/grid/grid.blocks.tsx
+++ b/packages/documentation/src/stories/foundation/layout/grid/grid.blocks.tsx
@@ -50,7 +50,7 @@ export const GridTable = () => (
     <tr>
       <th>Column ordering</th>
       <td colSpan={SCSS_VARIABLES['breakpoint-count']}>
-        <a href="/?path=/docs/foundations-layout-columns--docs">yes</a>
+        <a href="/?path=/docs/layout-columns--docs">yes</a>
       </td>
     </tr>
   </SpecTable>
diff --git a/packages/documentation/src/stories/patterns/forms/forms.docs.mdx b/packages/documentation/src/stories/patterns/forms/forms.docs.mdx
index bd37db8bf3..2081706354 100644
--- a/packages/documentation/src/stories/patterns/forms/forms.docs.mdx
+++ b/packages/documentation/src/stories/patterns/forms/forms.docs.mdx
@@ -1,6 +1,5 @@
 import { Canvas, Meta, Source } from '@storybook/blocks';
 import * as FormPatternsStories from './forms.stories';
-import LinkTo from '@storybook/addon-links/react';
 
 <Meta of={FormPatternsStories} />
 
@@ -35,11 +34,11 @@ If you want a form field to span the whole available width, you don't need a row
 only need those, if you want to place two things next to each other.
 
 Simply use `.row` and `.col` to have the width distributed evenly between all inputs.
-To make it responsive, you can add `.row-cols-*` classes to the row (see [Grid page](/?path=/docs/foundations-layout-grid--docs#row-columns)).
+To make it responsive, you can add `.row-cols-*` classes to the row (see [Grid page](/?path=/docs/layout-grid--docs#row-columns)).
 
 <Canvas of={FormPatternsStories.RowSimple} sourceState="shown" />
 
-For finer adjustment, you can also use the `.col-*` classes (see [Columns page](/?path=/docs/foundations-layout-columns--docs)) on your columns. For example for a 2/1 ratio, given that a row has twelve columns in total,
+For finer adjustment, you can also use the `.col-*` classes (see [Columns page](/?path=/docs/layout-columns--docs)) on your columns. For example for a 2/1 ratio, given that a row has twelve columns in total,
 just add `.col-8` and `.col-4` to you two columns respectively.
 
 <Canvas of={FormPatternsStories.ColSimple} sourceState="shown" />
@@ -78,9 +77,9 @@ adding and removing validation classes on the input:
 * The message needs the class `.invalid-feedback/.valid-feedback`
 * The form needs the class `.was-validated`. With this class you can manage when to display errors. Usually, errors should not be
 shown on untouched fields.
- 
+
  Or
- 
+
  The input field needs the class `.is-invalid/.is-valid`
 
 <Canvas of={FormPatternsStories.Validation} sourceState="shown" />
diff --git a/packages/documentation/src/stories/utilities/background/background.docs.mdx b/packages/documentation/src/stories/utilities/background/background.docs.mdx
index 1395d99a80..de897a4676 100644
--- a/packages/documentation/src/stories/utilities/background/background.docs.mdx
+++ b/packages/documentation/src/stories/utilities/background/background.docs.mdx
@@ -79,7 +79,7 @@ Change the background opacity simply by setting the CSS variable `--post-bg-opac
 <div className="alert alert-info alert-md">
   Low background opacity is not recommended as it can lead to poor contrast.
   It is then your responsibility to ensure that the contrast ratio between foreground and background is at least 4.5:1.
-  More information on that topic is available on our [accessibility docs](/?path=/docs/foundations-accessibility--docs).
+  More information on that topic is available on our [accessibility docs](/?path=/docs/accessibility--docs).
 </div>
 
 <Canvas of={BackgroundStories.TranslucentBackgrounds} sourceState='shown' />
diff --git a/packages/documentation/src/stories/utilities/heading/heading.docs.mdx b/packages/documentation/src/stories/utilities/heading/heading.docs.mdx
index c54a8f99ba..82b3c04a47 100644
--- a/packages/documentation/src/stories/utilities/heading/heading.docs.mdx
+++ b/packages/documentation/src/stories/utilities/heading/heading.docs.mdx
@@ -17,7 +17,7 @@ import * as HeadingStories from './heading.stories';
   heading utility classes to ensure that your header structure is semantically correct while
   conforming to design requirements.
 
-  Find more information on our [accessibility docs](/?path=/docs/foundations-accessibility--docs).
+  Find more information on our [accessibility docs](/?path=/docs/accessibility--docs).
 </div>
 
 ## Usage on Heading Elements
diff --git a/packages/documentation/src/stories/utilities/text/text.docs.mdx b/packages/documentation/src/stories/utilities/text/text.docs.mdx
index 5e93867bcb..4877cd2651 100644
--- a/packages/documentation/src/stories/utilities/text/text.docs.mdx
+++ b/packages/documentation/src/stories/utilities/text/text.docs.mdx
@@ -151,7 +151,7 @@ Easily realign text to components with text alignment classes.
 For `start`, `end`, and `center` alignment, responsive classes are available that use the same viewport breakpoints as the grid system.
 The responsive alignment classes have the following format: `text-{breakpoint}-{alighment}`.
 
-For more detailed informations about breakpoints read our [layout docs](/?path=/docs/foundations-layout-breakpoints--docs).
+For more detailed informations about breakpoints read our [layout docs](/?path=/docs/layout-breakpoints--docs).
 
 ### Wrapping
 

From f693a99f92fd5eb085a2e059393f4b48d37ec784 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20F=C3=BCrhoff?=
 <12294151+imagoiq@users.noreply.github.com>
Date: Thu, 8 Feb 2024 10:03:27 +0100
Subject: [PATCH 03/13] Update
 packages/documentation/src/stories/components/forms/custom-select/custom-select.stories.ts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com>
---
 .../components/forms/custom-select/custom-select.stories.ts     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/documentation/src/stories/components/forms/custom-select/custom-select.stories.ts b/packages/documentation/src/stories/components/forms/custom-select/custom-select.stories.ts
index 09cf309257..d06d38c6b7 100644
--- a/packages/documentation/src/stories/components/forms/custom-select/custom-select.stories.ts
+++ b/packages/documentation/src/stories/components/forms/custom-select/custom-select.stories.ts
@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/web-components';
 import { BADGE } from '../../../../../.storybook/constants';
 
 const meta: Meta = {
-  id: 'Components/Forms/Custom-Select',
+  id: 'Components/Forms/Custom Select',
   title: 'Components/Forms/Custom-Select',
   parameters: {
     badges: [BADGE.DEPRECATED],

From c9332ee08ab82c1af28539c83d249638d016499e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20F=C3=BCrhoff?=
 <12294151+imagoiq@users.noreply.github.com>
Date: Thu, 8 Feb 2024 10:03:35 +0100
Subject: [PATCH 04/13] Update
 packages/documentation/src/stories/components/forms/custom-select/custom-select.stories.ts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com>
---
 .../components/forms/custom-select/custom-select.stories.ts     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/documentation/src/stories/components/forms/custom-select/custom-select.stories.ts b/packages/documentation/src/stories/components/forms/custom-select/custom-select.stories.ts
index d06d38c6b7..685accd854 100644
--- a/packages/documentation/src/stories/components/forms/custom-select/custom-select.stories.ts
+++ b/packages/documentation/src/stories/components/forms/custom-select/custom-select.stories.ts
@@ -3,7 +3,7 @@ import { BADGE } from '../../../../../.storybook/constants';
 
 const meta: Meta = {
   id: 'Components/Forms/Custom Select',
-  title: 'Components/Forms/Custom-Select',
+  title: 'Components/Forms/Custom Select',
   parameters: {
     badges: [BADGE.DEPRECATED],
   },

From 680700054fba49536cc4d7a0f1704a551ee219db Mon Sep 17 00:00:00 2001
From: imagoiq <12294151+imagoiq@users.noreply.github.com>
Date: Thu, 8 Feb 2024 15:56:16 +0100
Subject: [PATCH 05/13] Fixed snapshots

---
 ...ries.tsx => accordion.snapshot.stories.ts} |  4 +++-
 .../alert/alert.snapshot.stories.ts           |  5 +++-
 .../badge/badge.snapshot.stories.ts           |  5 +++-
 .../blockquote/blockquote.snapshot.stories.ts |  4 +++-
 .../button-group.snapshot.stories.ts          |  4 +++-
 .../button/button.snapshot.stories.ts         |  4 +++-
 .../cards/card/card.snapshot.stories.ts       |  4 +++-
 .../product-card.snapshot.stories.ts          | 23 ++++++++-----------
 .../collapsible.snapshot.stories.ts           |  8 +++----
 .../checkbox/checkbox.snapshot.stories.ts     |  4 +++-
 .../choice-card.snapshot.stories.ts           | 10 ++++----
 .../forms/input/input.snapshot.stories.ts     |  8 +++----
 .../forms/radio/radio.snapshot.stories.ts     |  4 +++-
 .../forms/range/range.snapshot.stories.ts     |  4 +++-
 .../forms/select/select.snapshot.stories.ts   |  4 +++-
 .../forms/switch/switch.snapshot.stories.ts   |  8 +++----
 .../textarea/textarea.snapshot.stories.ts     |  8 +++----
 .../heading/heading.snapshot.stories.ts       |  4 +++-
 .../table/table.snapshot.stories.ts           |  4 +++-
 .../components/tabs/tabs.snapshot.stories.ts  |  4 +++-
 .../toast/toast.snapshot.stories.ts           |  4 +++-
 .../topic-teaser.snapshot.stories.ts          |  4 +++-
 22 files changed, 80 insertions(+), 51 deletions(-)
 rename packages/documentation/src/stories/components/accordion/{accordion.snapshot.stories.tsx => accordion.snapshot.stories.ts} (92%)

diff --git a/packages/documentation/src/stories/components/accordion/accordion.snapshot.stories.tsx b/packages/documentation/src/stories/components/accordion/accordion.snapshot.stories.ts
similarity index 92%
rename from packages/documentation/src/stories/components/accordion/accordion.snapshot.stories.tsx
rename to packages/documentation/src/stories/components/accordion/accordion.snapshot.stories.ts
index c38409c840..2699184f6f 100644
--- a/packages/documentation/src/stories/components/accordion/accordion.snapshot.stories.tsx
+++ b/packages/documentation/src/stories/components/accordion/accordion.snapshot.stories.ts
@@ -2,8 +2,10 @@ import type { StoryContext, StoryObj } from '@storybook/web-components';
 import meta, { Default } from './accordion.stories';
 import { html } from 'lit';
 
+const { id, ...metaWithoutId } = meta;
+
 export default {
-  ...meta,
+  ...metaWithoutId,
   title: 'Snapshots',
 };
 
diff --git a/packages/documentation/src/stories/components/alert/alert.snapshot.stories.ts b/packages/documentation/src/stories/components/alert/alert.snapshot.stories.ts
index 1456c4399b..52970d1111 100644
--- a/packages/documentation/src/stories/components/alert/alert.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/alert/alert.snapshot.stories.ts
@@ -4,9 +4,12 @@ import { spreadArgs, bombArgs } from '../../../utils';
 import alertMeta from './standard-html/alert.stories';
 import { getAlertClasses } from './standard-html/getAlertClasses';
 import { BADGE } from '../../../../.storybook/constants';
+import { choiceCardMeta } from '../forms/choice-card/choice-card';
+
+const { id, ...metaWithoutId } = alertMeta;
 
 export default {
-  ...alertMeta,
+  ...metaWithoutId,
   title: 'Snapshots',
   parameters: {
     badges: [BADGE.SINCE_V1],
diff --git a/packages/documentation/src/stories/components/badge/badge.snapshot.stories.ts b/packages/documentation/src/stories/components/badge/badge.snapshot.stories.ts
index cd4b4b125a..b1a4ecd5c4 100644
--- a/packages/documentation/src/stories/components/badge/badge.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/badge/badge.snapshot.stories.ts
@@ -2,9 +2,12 @@ import type { Args, StoryContext, StoryObj } from '@storybook/web-components';
 import meta from './badge.stories';
 import { html } from 'lit';
 import { bombArgs } from '../../../utils';
+import alertMeta from '../alert/standard-html/alert.stories';
+
+const { id, ...metaWithoutId } = meta;
 
 export default {
-  ...meta,
+  ...metaWithoutId,
   title: 'Snapshots',
 };
 
diff --git a/packages/documentation/src/stories/components/blockquote/blockquote.snapshot.stories.ts b/packages/documentation/src/stories/components/blockquote/blockquote.snapshot.stories.ts
index 80c97938ba..92ff9e0ad0 100644
--- a/packages/documentation/src/stories/components/blockquote/blockquote.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/blockquote/blockquote.snapshot.stories.ts
@@ -3,8 +3,10 @@ import meta from './blockquote.stories';
 import { html } from 'lit';
 import { bombArgs } from '../../../utils';
 
+const { id, ...metaWithoutId } = meta;
+
 export default {
-  ...meta,
+  ...metaWithoutId,
   title: 'Snapshots',
 };
 
diff --git a/packages/documentation/src/stories/components/button-group/button-group.snapshot.stories.ts b/packages/documentation/src/stories/components/button-group/button-group.snapshot.stories.ts
index d73f6d06f2..2419507aaf 100644
--- a/packages/documentation/src/stories/components/button-group/button-group.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/button-group/button-group.snapshot.stories.ts
@@ -3,8 +3,10 @@ import meta from './button-group.stories';
 import { html } from 'lit';
 import { bombArgs } from '../../../utils';
 
+const { id, ...metaWithoutId } = meta;
+
 export default {
-  ...meta,
+  ...metaWithoutId,
   title: 'Snapshots',
 };
 
diff --git a/packages/documentation/src/stories/components/button/button.snapshot.stories.ts b/packages/documentation/src/stories/components/button/button.snapshot.stories.ts
index f96d1210d9..b7586e3928 100644
--- a/packages/documentation/src/stories/components/button/button.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/button/button.snapshot.stories.ts
@@ -3,8 +3,10 @@ import meta, { Default, AccentColors, ContextualColors } from './button.stories'
 import { html } from 'lit';
 import { bombArgs } from '../../../utils';
 
+const { id, ...metaWithoutId } = meta;
+
 export default {
-  ...meta,
+  ...metaWithoutId,
   title: 'Snapshots',
 };
 
diff --git a/packages/documentation/src/stories/components/cards/card/card.snapshot.stories.ts b/packages/documentation/src/stories/components/cards/card/card.snapshot.stories.ts
index 2d233c067a..43afc1bf0c 100644
--- a/packages/documentation/src/stories/components/cards/card/card.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/cards/card/card.snapshot.stories.ts
@@ -3,8 +3,10 @@ import meta, { Default, CustomContent, CardGroup } from './card.stories';
 import { html } from 'lit';
 import { bombArgs } from '../../../../utils';
 
+const { id, ...metaWithoutId } = meta;
+
 export default {
-  ...meta,
+  ...metaWithoutId,
   title: 'Snapshots',
 };
 
diff --git a/packages/documentation/src/stories/components/cards/product-card/product-card.snapshot.stories.ts b/packages/documentation/src/stories/components/cards/product-card/product-card.snapshot.stories.ts
index 51ced8aeee..0ba0d37305 100644
--- a/packages/documentation/src/stories/components/cards/product-card/product-card.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/cards/product-card/product-card.snapshot.stories.ts
@@ -4,8 +4,10 @@ import { html } from 'lit';
 import { bombArgs } from '../../../../utils';
 import ProductCardSyncHeights from './product-card.sample.js?raw';
 
+const { id, ...metaWithoutId } = meta;
+
 export default {
-  ...meta,
+  ...metaWithoutId,
   title: 'Snapshots',
 };
 
@@ -21,24 +23,19 @@ export const ProductCard: Story = {
     ]
       // Map default template variants
       .map(argOverrides => {
-        const args: Partial<{[key: string]: string}> = { ...meta.args, ...argOverrides };
+        const args: Partial<{ [key: string]: string }> = { ...meta.args, ...argOverrides };
         args.title = `${args.title} (${args.level})`;
 
         return html`
-          <div class="col-12 mb-large">
-            ${Default.render && Default.render(args, context)}
-          </div>
+          <div class="col-12 mb-large">${Default.render && Default.render(args, context)}</div>
         `;
       });
 
     // Define custom template variants
-    const customTemplateVariants = [
-      Groupped,
-      Multipart
-    ]
+    const customTemplateVariants = [Groupped, Multipart]
       // Map custom template variants
       .map(
-        (story) => html`
+        story => html`
           <div class="mb-large">
             ${story.render && story.render({ ...meta.args, ...story.args }, context)}
           </div>
@@ -51,15 +48,13 @@ export const ProductCard: Story = {
         ${['white', 'dark'].map(
           bg => html`
             <div class=${'p-regular bg-' + bg}>
-              <div class="row row-cols-md-2 row-cols-xl-3">
-                ${defaultTemplateVariants}
-              </div>
+              <div class="row row-cols-md-2 row-cols-xl-3">${defaultTemplateVariants}</div>
               ${customTemplateVariants}
             </div>
           `,
         )}
         <script>
-          ${ProductCardSyncHeights}
+          ${ProductCardSyncHeights};
         </script>
       </div>
     `;
diff --git a/packages/documentation/src/stories/components/collapsible/collapsible.snapshot.stories.ts b/packages/documentation/src/stories/components/collapsible/collapsible.snapshot.stories.ts
index 0cb858346f..6758841bfb 100644
--- a/packages/documentation/src/stories/components/collapsible/collapsible.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/collapsible/collapsible.snapshot.stories.ts
@@ -4,8 +4,10 @@ import { bombArgs } from '../../../utils';
 
 import meta, { Default } from './collapsible.stories';
 
+const { id, ...metaWithoutId } = meta;
+
 export default {
-  ...meta,
+  ...metaWithoutId,
   decorators: [],
   title: 'Snapshots',
 };
@@ -28,9 +30,7 @@ export const collapsible: Story = {
     return html`
       <div>
         ${['white', 'dark'].map(
-          bg => html`
-            <div class=${'row bg-' + bg}>${templateVariants}</div>
-          `,
+          bg => html` <div class=${'row bg-' + bg}>${templateVariants}</div> `,
         )}
       </div>
     `;
diff --git a/packages/documentation/src/stories/components/forms/checkbox/checkbox.snapshot.stories.ts b/packages/documentation/src/stories/components/forms/checkbox/checkbox.snapshot.stories.ts
index 5c30be1ec9..469f304c6b 100644
--- a/packages/documentation/src/stories/components/forms/checkbox/checkbox.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/forms/checkbox/checkbox.snapshot.stories.ts
@@ -3,8 +3,10 @@ import meta, { Inline } from './checkbox.stories';
 import { html } from 'lit';
 import { bombArgs } from '../../../../utils';
 
+const { id, ...metaWithoutId } = meta;
+
 export default {
-  ...meta,
+  ...metaWithoutId,
   title: 'Snapshots',
 };
 
diff --git a/packages/documentation/src/stories/components/forms/choice-card/choice-card.snapshot.stories.ts b/packages/documentation/src/stories/components/forms/choice-card/choice-card.snapshot.stories.ts
index 9dc77a07d2..f2f5de0df8 100644
--- a/packages/documentation/src/stories/components/forms/choice-card/choice-card.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/forms/choice-card/choice-card.snapshot.stories.ts
@@ -2,9 +2,12 @@ import { bombArgs } from '../../../../utils';
 import { choiceCardMeta, choiceCardDefault } from './choice-card';
 import { StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
+import meta from '../../accordion/accordion.stories';
+
+const { id, ...metaWithoutId } = choiceCardMeta;
 
 export default {
-  ...choiceCardMeta,
+  ...metaWithoutId,
   title: 'Snapshots',
 };
 
@@ -29,10 +32,7 @@ export const ChoiceCard: StoryObj = {
           bg => html`
             <div class="${bg + ' row g-3'}">
               ${bombedArgs.map(
-                args =>
-                  html`
-                    <div class="col-sm-6">${choiceCardDefault(args)}</div>
-                  `,
+                args => html` <div class="col-sm-6">${choiceCardDefault(args)}</div> `,
               )}
             </div>
           `,
diff --git a/packages/documentation/src/stories/components/forms/input/input.snapshot.stories.ts b/packages/documentation/src/stories/components/forms/input/input.snapshot.stories.ts
index d7d17ef37a..6bd5e1ab2f 100644
--- a/packages/documentation/src/stories/components/forms/input/input.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/forms/input/input.snapshot.stories.ts
@@ -3,8 +3,10 @@ import meta from './input.stories';
 import { html } from 'lit';
 import { getCombinations, COMBINATIONS } from '../../../../utils/inputComponentsGetCombinations';
 
+const { id, ...metaWithoutId } = meta;
+
 export default {
-  ...meta,
+  ...metaWithoutId,
   title: 'Snapshots',
   render: renderInputSnapshot,
 };
@@ -65,9 +67,7 @@ function renderInputSnapshot(_args: Args, context: StoryContext) {
               )
               .map(
                 (args: Args) =>
-                  html`
-                    <div>${meta.render?.({ ...context.args, ...args }, context)}</div>
-                  `,
+                  html` <div>${meta.render?.({ ...context.args, ...args }, context)}</div> `,
               )}
           </div>
         `,
diff --git a/packages/documentation/src/stories/components/forms/radio/radio.snapshot.stories.ts b/packages/documentation/src/stories/components/forms/radio/radio.snapshot.stories.ts
index d401a44d4c..3bb00e796c 100644
--- a/packages/documentation/src/stories/components/forms/radio/radio.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/forms/radio/radio.snapshot.stories.ts
@@ -3,8 +3,10 @@ import meta from './radio.stories';
 import { html } from 'lit';
 import { bombArgs } from '../../../../utils';
 
+const { id, ...metaWithoutId } = meta;
+
 export default {
-  ...meta,
+  ...metaWithoutId,
   title: 'Snapshots',
 };
 
diff --git a/packages/documentation/src/stories/components/forms/range/range.snapshot.stories.ts b/packages/documentation/src/stories/components/forms/range/range.snapshot.stories.ts
index a1f0bf7c30..e1283982a7 100644
--- a/packages/documentation/src/stories/components/forms/range/range.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/forms/range/range.snapshot.stories.ts
@@ -3,8 +3,10 @@ import meta from './range.stories';
 import { html } from 'lit';
 import { bombArgs } from '../../../../utils';
 
+const { id, ...metaWithoutId } = meta;
+
 export default {
-  ...meta,
+  ...metaWithoutId,
   title: 'Snapshots',
 };
 
diff --git a/packages/documentation/src/stories/components/forms/select/select.snapshot.stories.ts b/packages/documentation/src/stories/components/forms/select/select.snapshot.stories.ts
index ed877711f8..5051576d45 100644
--- a/packages/documentation/src/stories/components/forms/select/select.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/forms/select/select.snapshot.stories.ts
@@ -3,8 +3,10 @@ import meta, { Default, FloatingLabel } from './select.stories';
 import { html } from 'lit';
 import { bombArgs } from '../../../../utils';
 
+const { id, ...metaWithoutId } = meta;
+
 export default {
-  ...meta,
+  ...metaWithoutId,
   title: 'Snapshots',
 };
 
diff --git a/packages/documentation/src/stories/components/forms/switch/switch.snapshot.stories.ts b/packages/documentation/src/stories/components/forms/switch/switch.snapshot.stories.ts
index 17c060b03e..0e72d7f8e4 100644
--- a/packages/documentation/src/stories/components/forms/switch/switch.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/forms/switch/switch.snapshot.stories.ts
@@ -3,8 +3,10 @@ import meta from './switch.stories';
 import { html } from 'lit';
 import { bombArgs } from '../../../../utils';
 
+const { id, ...metaWithoutId } = meta;
+
 export default {
-  ...meta,
+  ...metaWithoutId,
   title: 'Snapshots',
 };
 
@@ -32,9 +34,7 @@ export const Switch: Story = {
     return html`
       <div>
         ${['white', 'dark'].map(
-          bg => html`
-            <div class=${'row bg-' + bg}>${templateVariants}</div>
-          `,
+          bg => html` <div class=${'row bg-' + bg}>${templateVariants}</div> `,
         )}
       </div>
     `;
diff --git a/packages/documentation/src/stories/components/forms/textarea/textarea.snapshot.stories.ts b/packages/documentation/src/stories/components/forms/textarea/textarea.snapshot.stories.ts
index efb8f3bb7c..5c5a8e41a2 100644
--- a/packages/documentation/src/stories/components/forms/textarea/textarea.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/forms/textarea/textarea.snapshot.stories.ts
@@ -3,8 +3,10 @@ import meta from './textarea.stories';
 import { html } from 'lit';
 import { getCombinations, COMBINATIONS } from '../../../../utils/inputComponentsGetCombinations';
 
+const { id, ...metaWithoutId } = meta;
+
 export default {
-  ...meta,
+  ...metaWithoutId,
   title: 'Snapshots',
 };
 
@@ -59,9 +61,7 @@ export const Textarea: Story = {
               <h3>Floating Label</h3>
               ${getCombinations('floatingLabel', [true], combinations).map(
                 (args: Args) =>
-                  html`
-                    <div>${meta.render?.({ ...context.args, ...args }, context)}</div>
-                  `,
+                  html` <div>${meta.render?.({ ...context.args, ...args }, context)}</div> `,
               )}
             </div>
           `,
diff --git a/packages/documentation/src/stories/components/heading/heading.snapshot.stories.ts b/packages/documentation/src/stories/components/heading/heading.snapshot.stories.ts
index b2263ffc48..b324681a04 100644
--- a/packages/documentation/src/stories/components/heading/heading.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/heading/heading.snapshot.stories.ts
@@ -3,8 +3,10 @@ import meta, { Default } from './heading.stories';
 import { html } from 'lit';
 import { bombArgs } from '../../../utils';
 
+const { id, ...metaWithoutId } = meta;
+
 export default {
-  ...meta,
+  ...metaWithoutId,
   title: 'Snapshots',
 };
 
diff --git a/packages/documentation/src/stories/components/table/table.snapshot.stories.ts b/packages/documentation/src/stories/components/table/table.snapshot.stories.ts
index ac9c29432d..09bb0b43ab 100644
--- a/packages/documentation/src/stories/components/table/table.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/table/table.snapshot.stories.ts
@@ -3,8 +3,10 @@ import meta from './table.stories';
 import { html } from 'lit';
 import { bombArgs } from '../../../utils';
 
+const { id, ...metaWithoutId } = meta;
+
 export default {
-  ...meta,
+  ...metaWithoutId,
   title: 'Snapshots',
 };
 
diff --git a/packages/documentation/src/stories/components/tabs/tabs.snapshot.stories.ts b/packages/documentation/src/stories/components/tabs/tabs.snapshot.stories.ts
index 7ddf9123ad..240754c894 100644
--- a/packages/documentation/src/stories/components/tabs/tabs.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/tabs/tabs.snapshot.stories.ts
@@ -3,8 +3,10 @@ import meta from './tabs.stories';
 import { html } from 'lit';
 import { bombArgs } from '../../../utils';
 
+const { id, ...metaWithoutId } = meta;
+
 export default {
-  ...meta,
+  ...metaWithoutId,
   title: 'Snapshots',
 };
 
diff --git a/packages/documentation/src/stories/components/toast/toast.snapshot.stories.ts b/packages/documentation/src/stories/components/toast/toast.snapshot.stories.ts
index 2b727d9a1b..62430caa4b 100644
--- a/packages/documentation/src/stories/components/toast/toast.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/toast/toast.snapshot.stories.ts
@@ -3,8 +3,10 @@ import meta from './toast.stories';
 import { html } from 'lit';
 import { bombArgs } from '../../../utils';
 
+const { id, ...metaWithoutId } = meta;
+
 export default {
-  ...meta,
+  ...metaWithoutId,
   title: 'Snapshots',
 };
 
diff --git a/packages/documentation/src/stories/components/topic-teaser/topic-teaser.snapshot.stories.ts b/packages/documentation/src/stories/components/topic-teaser/topic-teaser.snapshot.stories.ts
index 732fe2586c..d9bbe79de9 100644
--- a/packages/documentation/src/stories/components/topic-teaser/topic-teaser.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/topic-teaser/topic-teaser.snapshot.stories.ts
@@ -3,8 +3,10 @@ import meta, { Default } from './topic-teaser.stories';
 import { html } from 'lit';
 import { bombArgs } from '../../../utils';
 
+const { id, ...metaWithoutId } = meta;
+
 export default {
-  ...meta,
+  ...metaWithoutId,
   title: 'Snapshots',
 };
 

From 6c276259386bfcdce5b65820cc303009e7d4581a Mon Sep 17 00:00:00 2001
From: imagoiq <12294151+imagoiq@users.noreply.github.com>
Date: Thu, 8 Feb 2024 16:11:26 +0100
Subject: [PATCH 06/13] Change id to uuid

---
 .../src/stories/components/accordion/accordion.stories.ts       | 2 +-
 .../src/stories/components/alert/standard-html/alert.stories.ts | 2 +-
 .../components/alert/web-component/post-alert.stories.ts        | 2 +-
 .../documentation/src/stories/components/badge/badge.stories.ts | 2 +-
 .../src/stories/components/blockquote/blockquote.stories.ts     | 2 +-
 .../src/stories/components/button-group/button-group.stories.ts | 2 +-
 .../src/stories/components/button/button.stories.ts             | 2 +-
 .../src/stories/components/cards/card/card.stories.ts           | 2 +-
 .../components/cards/product-card/product-card.stories.ts       | 2 +-
 .../src/stories/components/carousel/carousel.stories.ts         | 2 +-
 .../src/stories/components/collapsible/collapsible.stories.ts   | 2 +-
 .../src/stories/components/datepicker/datepicker.stories.ts     | 2 +-
 .../src/stories/components/dropdown/dropdown.stories.ts         | 2 +-
 .../src/stories/components/forms/checkbox/checkbox.stories.ts   | 2 +-
 .../components/forms/choice-card/checkbox-card.stories.ts       | 2 +-
 .../components/forms/custom-select/custom-select.stories.ts     | 2 +-
 .../stories/components/forms/input-group/input-group.stories.ts | 2 +-
 .../src/stories/components/forms/input/input.stories.ts         | 2 +-
 .../src/stories/components/forms/radio/radio.stories.ts         | 2 +-
 .../src/stories/components/forms/range/range.stories.ts         | 2 +-
 .../src/stories/components/forms/select/select.stories.ts       | 2 +-
 .../src/stories/components/forms/switch/switch.stories.ts       | 2 +-
 .../src/stories/components/forms/textarea/textarea.stories.ts   | 2 +-
 .../src/stories/components/heading/heading.stories.ts           | 2 +-
 .../src/stories/components/icons/components/icon.stories.ts     | 2 +-
 .../src/stories/components/icons/getting-started.stories.ts     | 2 +-
 .../components/icons/search-icons/search-icons.stories.ts       | 2 +-
 .../components/internet-header/getting-started.stories.ts       | 2 +-
 .../components/intranet-header/intranet-header.stories.ts       | 2 +-
 .../documentation/src/stories/components/modal/modal.stories.ts | 2 +-
 .../src/stories/components/pagination/pagination.stories.ts     | 2 +-
 .../src/stories/components/popover/popover.stories.ts           | 2 +-
 .../src/stories/components/progressbar/progressbar.stories.ts   | 2 +-
 .../src/stories/components/stepper/stepper.stories.ts           | 2 +-
 .../documentation/src/stories/components/table/table.stories.ts | 2 +-
 .../documentation/src/stories/components/tabs/tabs.stories.ts   | 2 +-
 .../src/stories/components/timepicker/timepicker.stories.ts     | 2 +-
 .../documentation/src/stories/components/toast/toast.stories.ts | 2 +-
 .../src/stories/components/tooltip/tooltip.stories.ts           | 2 +-
 .../src/stories/components/topic-teaser/topic-teaser.stories.ts | 2 +-
 .../src/stories/components/typeahead/typeahead.stories.ts       | 2 +-
 .../stories/foundation/accessibility/accessibility.stories.ts   | 2 +-
 .../documentation/src/stories/foundation/color/color.stories.ts | 2 +-
 .../src/stories/foundation/elevation/elevation.stories.ts       | 2 +-
 .../foundation/layout/breakpoints/breakpoints.stories.ts        | 2 +-
 .../src/stories/foundation/layout/columns/columns.stories.ts    | 2 +-
 .../stories/foundation/layout/containers/containers.stories.ts  | 2 +-
 .../src/stories/foundation/layout/grid/grid.stories.ts          | 2 +-
 .../src/stories/foundation/typography/typography.stories.ts     | 2 +-
 .../getting-started/compatibility/compatibility.stories.ts      | 2 +-
 .../getting-started/components-angular/angular.stories.ts       | 2 +-
 .../stories/getting-started/components/components.stories.ts    | 2 +-
 .../src/stories/getting-started/styles/styles.stories.ts        | 2 +-
 .../src/stories/misc/changelog/changelog.stories.ts             | 2 +-
 .../src/stories/misc/migration-guide/migration-guide.stories.ts | 2 +-
 .../documentation/src/stories/misc/versions/versions.stories.ts | 2 +-
 .../documentation/src/stories/patterns/forms/forms.stories.ts   | 2 +-
 .../src/stories/utilities/background/background.stories.ts      | 2 +-
 .../src/stories/utilities/common/common.stories.ts              | 2 +-
 .../src/stories/utilities/heading/heading.stories.ts            | 2 +-
 .../documentation/src/stories/utilities/list/list.stories.ts    | 2 +-
 .../src/stories/utilities/sizing/sizing.stories.ts              | 2 +-
 .../src/stories/utilities/spacing/spacing.stories.ts            | 2 +-
 .../documentation/src/stories/utilities/text/text.stories.ts    | 2 +-
 64 files changed, 64 insertions(+), 64 deletions(-)

diff --git a/packages/documentation/src/stories/components/accordion/accordion.stories.ts b/packages/documentation/src/stories/components/accordion/accordion.stories.ts
index 8943a19098..aa52523990 100644
--- a/packages/documentation/src/stories/components/accordion/accordion.stories.ts
+++ b/packages/documentation/src/stories/components/accordion/accordion.stories.ts
@@ -4,7 +4,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta<HTMLPostAccordionElement> = {
-  id: 'Components/Accordion',
+  id: '4d1b4185-e04d-494a-ab38-2b56c1778b0b',
   title: 'Components/Accordion',
   component: 'post-accordion',
   parameters: {
diff --git a/packages/documentation/src/stories/components/alert/standard-html/alert.stories.ts b/packages/documentation/src/stories/components/alert/standard-html/alert.stories.ts
index ed1d063cd3..802cb6604f 100644
--- a/packages/documentation/src/stories/components/alert/standard-html/alert.stories.ts
+++ b/packages/documentation/src/stories/components/alert/standard-html/alert.stories.ts
@@ -7,7 +7,7 @@ import { getAlertClasses } from './getAlertClasses';
 import { BADGE } from '../../../../../.storybook/constants';
 
 const meta: Meta = {
-  id: 'Components/Alert',
+  id: '105e67d8-31e9-4d0b-87ff-685aba31fd4c',
   title: 'Components/Alert',
   render: renderAlert,
   decorators: [externalControl],
diff --git a/packages/documentation/src/stories/components/alert/web-component/post-alert.stories.ts b/packages/documentation/src/stories/components/alert/web-component/post-alert.stories.ts
index 48e84c9cef..33216e09a1 100644
--- a/packages/documentation/src/stories/components/alert/web-component/post-alert.stories.ts
+++ b/packages/documentation/src/stories/components/alert/web-component/post-alert.stories.ts
@@ -4,7 +4,7 @@ import { BADGE } from '../../../../../.storybook/constants';
 import { spreadArgs } from '../../../../utils';
 
 const meta: Meta<HTMLPostAlertElement> = {
-  id: 'Components/Post Alert',
+  id: '8fd36823-966e-46a8-8432-a4439f6e208f',
   title: 'Components/Post Alert',
   component: 'post-alert',
   render: renderAlert,
diff --git a/packages/documentation/src/stories/components/badge/badge.stories.ts b/packages/documentation/src/stories/components/badge/badge.stories.ts
index 42ec2a1c18..310e1737b9 100644
--- a/packages/documentation/src/stories/components/badge/badge.stories.ts
+++ b/packages/documentation/src/stories/components/badge/badge.stories.ts
@@ -5,7 +5,7 @@ import { BADGE } from '../../../../.storybook/constants';
 import { mapClasses } from '../../../utils';
 
 const meta: Meta = {
-  id: 'Components/Badge',
+  id: 'bec68e8b-445e-4760-8bd7-1b9970206d8d',
   title: 'Components/Badge',
   render: renderBadge,
   decorators: [externalControl],
diff --git a/packages/documentation/src/stories/components/blockquote/blockquote.stories.ts b/packages/documentation/src/stories/components/blockquote/blockquote.stories.ts
index 443bcf81ab..bcacb713a3 100644
--- a/packages/documentation/src/stories/components/blockquote/blockquote.stories.ts
+++ b/packages/documentation/src/stories/components/blockquote/blockquote.stories.ts
@@ -3,7 +3,7 @@ import { html, unsafeStatic } from 'lit/static-html.js';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
-  id: 'Components/Blockquote',
+  id: 'a4c7d5fa-9f8d-4a95-820b-ae4ce9ab4f03',
   title: 'Components/Blockquote',
   render: renderBlockquote,
   parameters: {
diff --git a/packages/documentation/src/stories/components/button-group/button-group.stories.ts b/packages/documentation/src/stories/components/button-group/button-group.stories.ts
index d8c4965d7c..ef62a2c05f 100644
--- a/packages/documentation/src/stories/components/button-group/button-group.stories.ts
+++ b/packages/documentation/src/stories/components/button-group/button-group.stories.ts
@@ -4,7 +4,7 @@ import { useArgs } from '@storybook/preview-api';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
-  id: 'Components/Button Group',
+  id: '021d61aa-e039-4858-b4b9-b86a3e772811',
   title: 'Components/Button Group',
   render: renderButtonGroup,
   parameters: {
diff --git a/packages/documentation/src/stories/components/button/button.stories.ts b/packages/documentation/src/stories/components/button/button.stories.ts
index dced45d1ed..929db1e2f8 100644
--- a/packages/documentation/src/stories/components/button/button.stories.ts
+++ b/packages/documentation/src/stories/components/button/button.stories.ts
@@ -5,7 +5,7 @@ import { repeat } from 'lit/directives/repeat.js';
 import { BADGE } from '@geometricpanda/storybook-addon-badges';
 
 const meta: Meta = {
-  id: 'Components/Button',
+  id: 'eb78afcb-ce92-4990-94b6-6536d5ec6af4',
   title: 'Components/Button',
   parameters: {
     badges: [BADGE.NEEDS_REVISION],
diff --git a/packages/documentation/src/stories/components/cards/card/card.stories.ts b/packages/documentation/src/stories/components/cards/card/card.stories.ts
index 8a25786a4e..f91bc80a9f 100644
--- a/packages/documentation/src/stories/components/cards/card/card.stories.ts
+++ b/packages/documentation/src/stories/components/cards/card/card.stories.ts
@@ -5,7 +5,7 @@ import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { BADGE } from '../../../../../.storybook/constants';
 
 const meta: Meta = {
-  id: 'Components/Cards/Card',
+  id: '605c788d-3f75-4e6c-8498-be3d546843c2',
   title: 'Components/Cards/Card',
   decorators: [clickBlocker, paddedContainer],
   parameters: {
diff --git a/packages/documentation/src/stories/components/cards/product-card/product-card.stories.ts b/packages/documentation/src/stories/components/cards/product-card/product-card.stories.ts
index 94f81094e9..32a926b468 100644
--- a/packages/documentation/src/stories/components/cards/product-card/product-card.stories.ts
+++ b/packages/documentation/src/stories/components/cards/product-card/product-card.stories.ts
@@ -4,7 +4,7 @@ import { nothing } from 'lit';
 import { BADGE } from '../../../../../.storybook/constants';
 
 const meta: Meta = {
-  id: 'Components/Cards/Product Card',
+  id: 'b4800d9e-4837-4476-a327-bb4586eb7e97',
   title: 'Components/Cards/Product Card',
   decorators: [paddedContainer, clickBlocker],
   parameters: {
diff --git a/packages/documentation/src/stories/components/carousel/carousel.stories.ts b/packages/documentation/src/stories/components/carousel/carousel.stories.ts
index 941f50c709..c91ae33726 100644
--- a/packages/documentation/src/stories/components/carousel/carousel.stories.ts
+++ b/packages/documentation/src/stories/components/carousel/carousel.stories.ts
@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/web-components';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
-  id: 'Components/Carousel',
+  id: 'cb3ba4a2-1265-4a20-b184-b85443146efa',
   title: 'Components/Carousel',
   parameters: {
     badges: [BADGE.WEB_COMPONENT_CANDIDATE],
diff --git a/packages/documentation/src/stories/components/collapsible/collapsible.stories.ts b/packages/documentation/src/stories/components/collapsible/collapsible.stories.ts
index 98dff52bd8..52bf132834 100644
--- a/packages/documentation/src/stories/components/collapsible/collapsible.stories.ts
+++ b/packages/documentation/src/stories/components/collapsible/collapsible.stories.ts
@@ -4,7 +4,7 @@ import { BADGE } from '../../../../.storybook/constants';
 import { spreadArgs } from '../../../utils';
 
 const meta: Meta<HTMLPostCollapsibleElement> = {
-  id: 'Components/Collapsible',
+  id: '6a91848c-16ec-4a23-bc45-51c797b5b2c3',
   title: 'Components/Collapsible',
   component: 'post-collapsible',
   render: renderCollapsible,
diff --git a/packages/documentation/src/stories/components/datepicker/datepicker.stories.ts b/packages/documentation/src/stories/components/datepicker/datepicker.stories.ts
index a750dfbd0d..b34cf798f3 100644
--- a/packages/documentation/src/stories/components/datepicker/datepicker.stories.ts
+++ b/packages/documentation/src/stories/components/datepicker/datepicker.stories.ts
@@ -3,7 +3,7 @@ import { html } from 'lit';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
-  id: 'Components/Datepicker',
+  id: '6561b345-9d64-4f95-8ea6-2389586410bd',
   title: 'Components/Datepicker',
   parameters: {
     badges: [BADGE.WEB_COMPONENT_CANDIDATE],
diff --git a/packages/documentation/src/stories/components/dropdown/dropdown.stories.ts b/packages/documentation/src/stories/components/dropdown/dropdown.stories.ts
index 90d1424e3c..3521494ee7 100644
--- a/packages/documentation/src/stories/components/dropdown/dropdown.stories.ts
+++ b/packages/documentation/src/stories/components/dropdown/dropdown.stories.ts
@@ -2,7 +2,7 @@ import { Meta } from '@storybook/web-components';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
-  id: 'Components/Dropdown',
+  id: '63113d0a-6ceb-472c-ac6a-729404e862ca',
   title: 'Components/Dropdown',
   parameters: {
     badges: [BADGE.WEB_COMPONENT_CANDIDATE],
diff --git a/packages/documentation/src/stories/components/forms/checkbox/checkbox.stories.ts b/packages/documentation/src/stories/components/forms/checkbox/checkbox.stories.ts
index e25b7690a6..3056a704f2 100644
--- a/packages/documentation/src/stories/components/forms/checkbox/checkbox.stories.ts
+++ b/packages/documentation/src/stories/components/forms/checkbox/checkbox.stories.ts
@@ -6,7 +6,7 @@ import { BADGE } from '../../../../../.storybook/constants';
 import { mapClasses } from '../../../../utils';
 
 const meta: Meta = {
-  id: 'Components/Forms/Checkbox',
+  id: 'e6ecc86f-d148-413b-b796-614a89da54be',
   title: 'Components/Forms/Checkbox',
   render: renderCheckbox,
   parameters: {
diff --git a/packages/documentation/src/stories/components/forms/choice-card/checkbox-card.stories.ts b/packages/documentation/src/stories/components/forms/choice-card/checkbox-card.stories.ts
index de470b7e5d..993bc1b617 100644
--- a/packages/documentation/src/stories/components/forms/choice-card/checkbox-card.stories.ts
+++ b/packages/documentation/src/stories/components/forms/choice-card/checkbox-card.stories.ts
@@ -3,7 +3,7 @@ import { choiceCardDefault, choiceCardGroup, choiceCardMeta } from './choice-car
 
 export default {
   ...choiceCardMeta,
-  id: 'Components/Forms/Checkbox Card',
+  id: '9637bbae-0533-4522-89d4-c2732431c69b',
   title: 'Components/Forms/Checkbox Card',
   parameters: {
     badges: [BADGE.NEEDS_REVISION],
diff --git a/packages/documentation/src/stories/components/forms/custom-select/custom-select.stories.ts b/packages/documentation/src/stories/components/forms/custom-select/custom-select.stories.ts
index 685accd854..3efca4ab78 100644
--- a/packages/documentation/src/stories/components/forms/custom-select/custom-select.stories.ts
+++ b/packages/documentation/src/stories/components/forms/custom-select/custom-select.stories.ts
@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/web-components';
 import { BADGE } from '../../../../../.storybook/constants';
 
 const meta: Meta = {
-  id: 'Components/Forms/Custom Select',
+  id: 'e5a39d4f-4448-4398-9380-7c9fcae4a514',
   title: 'Components/Forms/Custom Select',
   parameters: {
     badges: [BADGE.DEPRECATED],
diff --git a/packages/documentation/src/stories/components/forms/input-group/input-group.stories.ts b/packages/documentation/src/stories/components/forms/input-group/input-group.stories.ts
index a6185264c1..4972ffcac2 100644
--- a/packages/documentation/src/stories/components/forms/input-group/input-group.stories.ts
+++ b/packages/documentation/src/stories/components/forms/input-group/input-group.stories.ts
@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/web-components';
 import { BADGE } from '../../../../../.storybook/constants';
 
 const meta: Meta = {
-  id: 'Components/Forms/Input Group',
+  id: 'ee81c495-343e-4053-ae36-cb282c9d1ff3',
   title: 'Components/Forms/Input Group',
   parameters: {
     badges: [BADGE.TODO],
diff --git a/packages/documentation/src/stories/components/forms/input/input.stories.ts b/packages/documentation/src/stories/components/forms/input/input.stories.ts
index 3c7841e0f1..f9c49b63c9 100644
--- a/packages/documentation/src/stories/components/forms/input/input.stories.ts
+++ b/packages/documentation/src/stories/components/forms/input/input.stories.ts
@@ -9,7 +9,7 @@ const VALIDATION_STATE_MAP: Record<string, undefined | boolean> = {
 };
 
 const meta: Meta = {
-  id: 'Components/Forms/Input',
+  id: '2df77c32-5e33-402e-bd2e-54d54271ce19',
   title: 'Components/Forms/Input',
   render: render,
   parameters: {
diff --git a/packages/documentation/src/stories/components/forms/radio/radio.stories.ts b/packages/documentation/src/stories/components/forms/radio/radio.stories.ts
index d02b83f822..fdbd8cc63d 100644
--- a/packages/documentation/src/stories/components/forms/radio/radio.stories.ts
+++ b/packages/documentation/src/stories/components/forms/radio/radio.stories.ts
@@ -10,7 +10,7 @@ const VALIDATION_STATE_MAP: Record<string, undefined | boolean> = {
 };
 
 const meta: Meta = {
-  id: 'Components/Forms/Radio button',
+  id: '151242aa-a074-4a55-a81c-db597c83cdad',
   title: 'Components/Forms/Radio button',
   parameters: {
     controls: {
diff --git a/packages/documentation/src/stories/components/forms/range/range.stories.ts b/packages/documentation/src/stories/components/forms/range/range.stories.ts
index 8ac527d979..fe0b3e2e9b 100644
--- a/packages/documentation/src/stories/components/forms/range/range.stories.ts
+++ b/packages/documentation/src/stories/components/forms/range/range.stories.ts
@@ -12,7 +12,7 @@ const VALIDATION_STATE_MAP: Record<string, undefined | boolean> = {
 const ARROW_KEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
 
 const meta: Meta = {
-  id: 'Components/Forms/Range',
+  id: '4c5a4537-d663-4d2b-9c49-17af95443696',
   title: 'Components/Forms/Range',
   render: render,
   parameters: {
diff --git a/packages/documentation/src/stories/components/forms/select/select.stories.ts b/packages/documentation/src/stories/components/forms/select/select.stories.ts
index e632be7474..03d89dfe9f 100644
--- a/packages/documentation/src/stories/components/forms/select/select.stories.ts
+++ b/packages/documentation/src/stories/components/forms/select/select.stories.ts
@@ -11,7 +11,7 @@ const VALIDATION_STATE_MAP: Record<string, undefined | boolean> = {
 };
 
 const meta: Meta = {
-  id: 'Components/Forms/Select',
+  id: 'bc251cd0-5173-463b-8729-586bb1bf1e1a',
   title: 'Components/Forms/Select',
   parameters: {
     badges: [BADGE.NEEDS_REVISION],
diff --git a/packages/documentation/src/stories/components/forms/switch/switch.stories.ts b/packages/documentation/src/stories/components/forms/switch/switch.stories.ts
index f9bc9b8aae..df956722e1 100644
--- a/packages/documentation/src/stories/components/forms/switch/switch.stories.ts
+++ b/packages/documentation/src/stories/components/forms/switch/switch.stories.ts
@@ -6,7 +6,7 @@ import { BADGE } from '../../../../../.storybook/constants';
 import { mapClasses } from '../../../../utils';
 
 const meta: Meta = {
-  id: 'Components/Forms/Switch',
+  id: '7fb639f8-86f6-4937-999c-4ee15f81643b',
   title: 'Components/Forms/Switch',
   render: renderSwitch,
   parameters: {
diff --git a/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts b/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts
index 9ef6138933..87e230da3d 100644
--- a/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts
+++ b/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts
@@ -10,7 +10,7 @@ const VALIDATION_STATE_MAP: Record<string, undefined | boolean> = {
 };
 
 const meta: Meta = {
-  id: 'Components/Forms/Textarea',
+  id: '152b7268-cce0-43d7-b931-41a57370f9a0',
   title: 'Components/Forms/Textarea',
   render: renderTextarea,
   parameters: {
diff --git a/packages/documentation/src/stories/components/heading/heading.stories.ts b/packages/documentation/src/stories/components/heading/heading.stories.ts
index dedb9728ce..8a9d99473b 100644
--- a/packages/documentation/src/stories/components/heading/heading.stories.ts
+++ b/packages/documentation/src/stories/components/heading/heading.stories.ts
@@ -3,7 +3,7 @@ import { html, unsafeStatic } from 'lit/static-html.js';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
-  id: 'Components/Heading',
+  id: '7ecd87f1-de96-4e39-a057-ba1798eb6959',
   title: 'Components/Heading',
   parameters: {
     badges: [BADGE.NEEDS_REVISION],
diff --git a/packages/documentation/src/stories/components/icons/components/icon.stories.ts b/packages/documentation/src/stories/components/icons/components/icon.stories.ts
index 50830e7000..c659175bac 100644
--- a/packages/documentation/src/stories/components/icons/components/icon.stories.ts
+++ b/packages/documentation/src/stories/components/icons/components/icon.stories.ts
@@ -7,7 +7,7 @@ import { BADGE } from '../../../../../.storybook/constants';
 import { spreadArgs } from '../../../../utils';
 
 const meta: Meta = {
-  id: 'Components/Icons',
+  id: '0dcfe3c0-bfc0-4107-b43b-7e9d825b805f',
   title: 'Components/Icons/Icon Component',
   component: 'post-icon',
   parameters: {
diff --git a/packages/documentation/src/stories/components/icons/getting-started.stories.ts b/packages/documentation/src/stories/components/icons/getting-started.stories.ts
index 9ea86a7dc2..c85e1d102a 100644
--- a/packages/documentation/src/stories/components/icons/getting-started.stories.ts
+++ b/packages/documentation/src/stories/components/icons/getting-started.stories.ts
@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/web-components';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
-  id: 'Components/Icons/Getting Started',
+  id: '40ed323b-9c1a-42ab-91ed-15f97f214608',
   title: 'Components/Icons/Getting Started',
   parameters: {
     badges: [BADGE.NEEDS_REVISION],
diff --git a/packages/documentation/src/stories/components/icons/search-icons/search-icons.stories.ts b/packages/documentation/src/stories/components/icons/search-icons/search-icons.stories.ts
index a27a2ce930..be179e6e5c 100644
--- a/packages/documentation/src/stories/components/icons/search-icons/search-icons.stories.ts
+++ b/packages/documentation/src/stories/components/icons/search-icons/search-icons.stories.ts
@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/web-components';
 
 const meta: Meta = {
-  id: 'Components/Icons/Search for Icons',
+  id: '5704bdc4-c5b5-45e6-b123-c54d01fce2f1',
   title: 'Components/Icons/Search for Icons',
 };
 
diff --git a/packages/documentation/src/stories/components/internet-header/getting-started.stories.ts b/packages/documentation/src/stories/components/internet-header/getting-started.stories.ts
index 45a81ea0e5..72364304e2 100644
--- a/packages/documentation/src/stories/components/internet-header/getting-started.stories.ts
+++ b/packages/documentation/src/stories/components/internet-header/getting-started.stories.ts
@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/web-components';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
-  id: 'Components/Internet Header/Getting Started',
+  id: '9b02bcb2-3b6a-4271-b550-675a62ff3890',
   title: 'Components/Internet Header/Getting Started',
   parameters: {
     badges: [BADGE.STABLE],
diff --git a/packages/documentation/src/stories/components/intranet-header/intranet-header.stories.ts b/packages/documentation/src/stories/components/intranet-header/intranet-header.stories.ts
index a2be222960..011920a66f 100644
--- a/packages/documentation/src/stories/components/intranet-header/intranet-header.stories.ts
+++ b/packages/documentation/src/stories/components/intranet-header/intranet-header.stories.ts
@@ -2,7 +2,7 @@ import { Meta } from '@storybook/web-components';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
-  id: 'Components/Intranet Header',
+  id: 'd59a459b-6f14-47c6-9f98-a36a3f79a6e3',
   title: 'Components/Intranet Header',
   parameters: {
     badges: [BADGE.NEEDS_REVISION],
diff --git a/packages/documentation/src/stories/components/modal/modal.stories.ts b/packages/documentation/src/stories/components/modal/modal.stories.ts
index 2a6fb6095b..f000bede92 100644
--- a/packages/documentation/src/stories/components/modal/modal.stories.ts
+++ b/packages/documentation/src/stories/components/modal/modal.stories.ts
@@ -3,7 +3,7 @@ import { html } from 'lit';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
-  id: 'Components/Modal',
+  id: '9a512414-84c5-473c-a7c8-a434eda9578d',
   title: 'Components/Modal',
   parameters: {
     badges: [BADGE.WEB_COMPONENT_CANDIDATE],
diff --git a/packages/documentation/src/stories/components/pagination/pagination.stories.ts b/packages/documentation/src/stories/components/pagination/pagination.stories.ts
index e01e99935e..b3543d0508 100644
--- a/packages/documentation/src/stories/components/pagination/pagination.stories.ts
+++ b/packages/documentation/src/stories/components/pagination/pagination.stories.ts
@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/web-components';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
-  id: 'Components/Pagination',
+  id: 'caa89695-5c39-4cb5-8e62-579d918cbd2f',
   title: 'Components/Pagination',
   parameters: {
     badges: [BADGE.WEB_COMPONENT_CANDIDATE],
diff --git a/packages/documentation/src/stories/components/popover/popover.stories.ts b/packages/documentation/src/stories/components/popover/popover.stories.ts
index 4126cddc41..e39617c19d 100644
--- a/packages/documentation/src/stories/components/popover/popover.stories.ts
+++ b/packages/documentation/src/stories/components/popover/popover.stories.ts
@@ -4,7 +4,7 @@ import { html } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 
 const meta: Meta = {
-  id: 'Components/Popover',
+  id: '9a636763-de2d-4f72-bc81-98daf10871f7',
   title: 'Components/Popover',
   component: 'post-popover',
   parameters: {
diff --git a/packages/documentation/src/stories/components/progressbar/progressbar.stories.ts b/packages/documentation/src/stories/components/progressbar/progressbar.stories.ts
index 1b10fd0cc5..c23fce6b50 100644
--- a/packages/documentation/src/stories/components/progressbar/progressbar.stories.ts
+++ b/packages/documentation/src/stories/components/progressbar/progressbar.stories.ts
@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/web-components';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
-  id: 'Components/Progressbar',
+  id: '446648d9-0360-4dec-a6f4-87f2f28b5f33',
   title: 'Components/Progressbar',
   parameters: {
     badges: [BADGE.WEB_COMPONENT_CANDIDATE],
diff --git a/packages/documentation/src/stories/components/stepper/stepper.stories.ts b/packages/documentation/src/stories/components/stepper/stepper.stories.ts
index b1bce0272a..543d9957ef 100644
--- a/packages/documentation/src/stories/components/stepper/stepper.stories.ts
+++ b/packages/documentation/src/stories/components/stepper/stepper.stories.ts
@@ -3,7 +3,7 @@ import { html } from 'lit';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
-  id: 'Components/Stepper',
+  id: '7dc546d9-e248-4d06-befe-3ad62fcd310f',
   title: 'Components/Stepper',
   parameters: {
     badges: [BADGE.WEB_COMPONENT_CANDIDATE],
diff --git a/packages/documentation/src/stories/components/table/table.stories.ts b/packages/documentation/src/stories/components/table/table.stories.ts
index 35b6538f46..8574b1a17d 100644
--- a/packages/documentation/src/stories/components/table/table.stories.ts
+++ b/packages/documentation/src/stories/components/table/table.stories.ts
@@ -3,7 +3,7 @@ import { html } from 'lit';
 import { mapClasses } from '../../../utils';
 
 const meta: Meta = {
-  id: 'Components/Table',
+  id: '81799516-470c-446b-a049-54946b6ccfca',
   title: 'Components/Table',
   render: renderTable,
   parameters: {},
diff --git a/packages/documentation/src/stories/components/tabs/tabs.stories.ts b/packages/documentation/src/stories/components/tabs/tabs.stories.ts
index a75980d1c8..1836dca2de 100644
--- a/packages/documentation/src/stories/components/tabs/tabs.stories.ts
+++ b/packages/documentation/src/stories/components/tabs/tabs.stories.ts
@@ -4,7 +4,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta<HTMLPostTabsElement> = {
-  id: 'Components/Tabs',
+  id: 'bb1291ca-4dbb-450c-a15f-596836d9f39e',
   title: 'Components/Tabs',
   component: 'post-tabs',
   render: renderTabs,
diff --git a/packages/documentation/src/stories/components/timepicker/timepicker.stories.ts b/packages/documentation/src/stories/components/timepicker/timepicker.stories.ts
index 7d6d87b22f..6b638ca7a8 100644
--- a/packages/documentation/src/stories/components/timepicker/timepicker.stories.ts
+++ b/packages/documentation/src/stories/components/timepicker/timepicker.stories.ts
@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/web-components';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
-  id: 'Components/Timepicker',
+  id: 'a4d9f996-6e77-4fad-bb19-40fad1bb7a1d',
   title: 'Components/Timepicker',
   parameters: {
     badges: [BADGE.WEB_COMPONENT_CANDIDATE],
diff --git a/packages/documentation/src/stories/components/toast/toast.stories.ts b/packages/documentation/src/stories/components/toast/toast.stories.ts
index 91be598bb9..2f271d548f 100644
--- a/packages/documentation/src/stories/components/toast/toast.stories.ts
+++ b/packages/documentation/src/stories/components/toast/toast.stories.ts
@@ -4,7 +4,7 @@ import { html } from 'lit';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
-  id: 'Components/Toast',
+  id: '825b65c9-7eaf-4e0a-9e20-5f5ed406726d',
   title: 'Components/Toast',
   parameters: {
     badges: [BADGE.NEEDS_REVISION],
diff --git a/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts b/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts
index 65233b0c4e..548f51078b 100644
--- a/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts
+++ b/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts
@@ -6,7 +6,7 @@ import { useArgs } from '@storybook/preview-api';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
 const meta: Meta = {
-  id: 'Components/Tooltip',
+  id: 'cd684d90-e7a7-41a9-8923-b1b72ad9b384',
   title: 'Components/Tooltip',
   component: 'post-tooltip',
   parameters: {
diff --git a/packages/documentation/src/stories/components/topic-teaser/topic-teaser.stories.ts b/packages/documentation/src/stories/components/topic-teaser/topic-teaser.stories.ts
index aa32f637d6..fef6498e12 100644
--- a/packages/documentation/src/stories/components/topic-teaser/topic-teaser.stories.ts
+++ b/packages/documentation/src/stories/components/topic-teaser/topic-teaser.stories.ts
@@ -4,7 +4,7 @@ import { BADGE } from '../../../../.storybook/constants';
 import { mapClasses } from '../../../utils';
 
 const meta: Meta = {
-  id: 'Components/Topic Teaser',
+  id: '2ffc7a53-c1aa-4ff5-b1e4-fa638591399c',
   title: 'Components/Topic Teaser',
   parameters: {
     badges: [BADGE.NEEDS_REVISION],
diff --git a/packages/documentation/src/stories/components/typeahead/typeahead.stories.ts b/packages/documentation/src/stories/components/typeahead/typeahead.stories.ts
index 901912098f..01e18d5583 100644
--- a/packages/documentation/src/stories/components/typeahead/typeahead.stories.ts
+++ b/packages/documentation/src/stories/components/typeahead/typeahead.stories.ts
@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/web-components';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
-  id: 'Components/Typeahead',
+  id: '0456901c-3713-4f1f-b592-1f4dbd65a500',
   title: 'Components/Typeahead',
   parameters: {
     badges: [BADGE.WEB_COMPONENT_CANDIDATE],
diff --git a/packages/documentation/src/stories/foundation/accessibility/accessibility.stories.ts b/packages/documentation/src/stories/foundation/accessibility/accessibility.stories.ts
index 23668fed74..55c7153cfd 100644
--- a/packages/documentation/src/stories/foundation/accessibility/accessibility.stories.ts
+++ b/packages/documentation/src/stories/foundation/accessibility/accessibility.stories.ts
@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/web-components';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
-  id: 'Accessibility',
+  id: '46da78e8-e83b-4ca1-aaf6-bbc662efef14',
   title: 'Foundations/Accessibility',
   parameters: {
     badges: [BADGE.TODO],
diff --git a/packages/documentation/src/stories/foundation/color/color.stories.ts b/packages/documentation/src/stories/foundation/color/color.stories.ts
index b83a78e65e..d66a9a6509 100644
--- a/packages/documentation/src/stories/foundation/color/color.stories.ts
+++ b/packages/documentation/src/stories/foundation/color/color.stories.ts
@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/web-components';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
-  id: 'Color',
+  id: 'e869afc1-3c50-4c20-a495-3d846f7a759e',
   title: 'Foundations/Color',
   parameters: {
     badges: [BADGE.BETA, BADGE.NEEDS_REVISION],
diff --git a/packages/documentation/src/stories/foundation/elevation/elevation.stories.ts b/packages/documentation/src/stories/foundation/elevation/elevation.stories.ts
index 07489316d3..53df4ac419 100644
--- a/packages/documentation/src/stories/foundation/elevation/elevation.stories.ts
+++ b/packages/documentation/src/stories/foundation/elevation/elevation.stories.ts
@@ -3,7 +3,7 @@ import { html } from 'lit';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
-  id: 'Elevation',
+  id: 'cfdf83ff-efa7-4b3c-ac91-6898c4f88701',
   title: 'Foundations/Elevation',
   parameters: {
     badges: [BADGE.NEEDS_REVISION],
diff --git a/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.stories.ts b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.stories.ts
index f624492094..f31c45680d 100644
--- a/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.stories.ts
+++ b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.stories.ts
@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/web-components';
 import { BADGE } from '../../../../../.storybook/constants';
 
 const meta: Meta = {
-  id: 'Layout/Breakpoints',
+  id: '20af6e2b-32b1-42ef-a187-b026aea7fe13',
   title: 'Foundations/Layout/Breakpoints',
   parameters: {
     badges: [BADGE.NEEDS_REVISION],
diff --git a/packages/documentation/src/stories/foundation/layout/columns/columns.stories.ts b/packages/documentation/src/stories/foundation/layout/columns/columns.stories.ts
index bd1a2a3b4f..7dab83e4cf 100644
--- a/packages/documentation/src/stories/foundation/layout/columns/columns.stories.ts
+++ b/packages/documentation/src/stories/foundation/layout/columns/columns.stories.ts
@@ -3,7 +3,7 @@ import { BADGE } from '../../../../../.storybook/constants';
 import { html, nothing } from 'lit';
 
 const meta: Meta = {
-  id: 'Layout/Columns',
+  id: 'cd70f48f-6308-4ec8-a8c6-982bd72c855c',
   title: 'Foundations/Layout/Columns',
   parameters: {
     badges: [BADGE.NEEDS_REVISION],
diff --git a/packages/documentation/src/stories/foundation/layout/containers/containers.stories.ts b/packages/documentation/src/stories/foundation/layout/containers/containers.stories.ts
index 619cbcc240..f14edeffc3 100644
--- a/packages/documentation/src/stories/foundation/layout/containers/containers.stories.ts
+++ b/packages/documentation/src/stories/foundation/layout/containers/containers.stories.ts
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/web-components';
 import { BADGE } from '../../../../../.storybook/constants';
 
 const meta: Meta = {
-  id: 'Layout/Containers',
+  id: 'a4ca9660-bb4a-4cc7-adfd-84767382ac03',
   title: 'Foundations/Layout/Containers',
   parameters: {
     badges: [BADGE.NEEDS_REVISION],
diff --git a/packages/documentation/src/stories/foundation/layout/grid/grid.stories.ts b/packages/documentation/src/stories/foundation/layout/grid/grid.stories.ts
index e513fb1998..6d31c36ac5 100644
--- a/packages/documentation/src/stories/foundation/layout/grid/grid.stories.ts
+++ b/packages/documentation/src/stories/foundation/layout/grid/grid.stories.ts
@@ -3,7 +3,7 @@ import { BADGE } from '../../../../../.storybook/constants';
 import { html } from 'lit';
 
 const meta: Meta = {
-  id: 'Layout/Grid',
+  id: '7240f2ef-216a-490e-9bd8-c0cef19f7b31',
   title: 'Foundations/Layout/Grid',
   parameters: {
     badges: [BADGE.NEEDS_REVISION],
diff --git a/packages/documentation/src/stories/foundation/typography/typography.stories.ts b/packages/documentation/src/stories/foundation/typography/typography.stories.ts
index e63ee7aafb..9027709d46 100644
--- a/packages/documentation/src/stories/foundation/typography/typography.stories.ts
+++ b/packages/documentation/src/stories/foundation/typography/typography.stories.ts
@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/web-components';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
-  id: 'Typography',
+  id: '677cfabf-dbf0-4de2-ad07-6d5bfb9e2375',
   title: 'Foundations/Typography',
   parameters: {
     badges: [BADGE.BETA, BADGE.NEEDS_REVISION],
diff --git a/packages/documentation/src/stories/getting-started/compatibility/compatibility.stories.ts b/packages/documentation/src/stories/getting-started/compatibility/compatibility.stories.ts
index 0aaf5522cf..f8229c21da 100644
--- a/packages/documentation/src/stories/getting-started/compatibility/compatibility.stories.ts
+++ b/packages/documentation/src/stories/getting-started/compatibility/compatibility.stories.ts
@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/web-components';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
-  id: 'Getting Started/Compatibility',
+  id: '829f6c45-5734-4d55-b290-2c8a86a07b67',
   title: 'Getting Started/Compatibility',
   parameters: {
     badges: [BADGE.NEEDS_REVISION],
diff --git a/packages/documentation/src/stories/getting-started/components-angular/angular.stories.ts b/packages/documentation/src/stories/getting-started/components-angular/angular.stories.ts
index 8fbe6a4637..5a85a25afc 100644
--- a/packages/documentation/src/stories/getting-started/components-angular/angular.stories.ts
+++ b/packages/documentation/src/stories/getting-started/components-angular/angular.stories.ts
@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/web-components';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
-  id: 'Getting Started/Components-Angular',
+  id: '833ef689-a573-40f5-a6a6-30a999b94733',
   title: 'Getting Started/Components-Angular',
   parameters: {
     badges: [BADGE.NEEDS_REVISION],
diff --git a/packages/documentation/src/stories/getting-started/components/components.stories.ts b/packages/documentation/src/stories/getting-started/components/components.stories.ts
index 311b020720..1a15879e29 100644
--- a/packages/documentation/src/stories/getting-started/components/components.stories.ts
+++ b/packages/documentation/src/stories/getting-started/components/components.stories.ts
@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/web-components';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
-  id: 'Getting Started/Components',
+  id: 'edfb619b-fda1-4570-bf25-20830303d483',
   title: 'Getting Started/Components',
   parameters: {
     badges: [BADGE.NEEDS_REVISION],
diff --git a/packages/documentation/src/stories/getting-started/styles/styles.stories.ts b/packages/documentation/src/stories/getting-started/styles/styles.stories.ts
index 683e15d556..93f1e12bfc 100644
--- a/packages/documentation/src/stories/getting-started/styles/styles.stories.ts
+++ b/packages/documentation/src/stories/getting-started/styles/styles.stories.ts
@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/web-components';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
-  id: 'Getting Started/Styles',
+  id: 'e53e2de8-0bbf-4f70-babc-074c5466f700',
   title: 'Getting Started/Styles',
   parameters: {
     badges: [BADGE.NEEDS_REVISION],
diff --git a/packages/documentation/src/stories/misc/changelog/changelog.stories.ts b/packages/documentation/src/stories/misc/changelog/changelog.stories.ts
index 10b1fa4978..b714365247 100644
--- a/packages/documentation/src/stories/misc/changelog/changelog.stories.ts
+++ b/packages/documentation/src/stories/misc/changelog/changelog.stories.ts
@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/web-components';
 
 const meta: Meta = {
-  id: 'Changelog',
+  id: 'a060be2f-7af4-46ba-b3a1-a14be624b3ee',
   title: 'Misc/Changelog',
 };
 
diff --git a/packages/documentation/src/stories/misc/migration-guide/migration-guide.stories.ts b/packages/documentation/src/stories/misc/migration-guide/migration-guide.stories.ts
index 763518d495..467344faf4 100644
--- a/packages/documentation/src/stories/misc/migration-guide/migration-guide.stories.ts
+++ b/packages/documentation/src/stories/misc/migration-guide/migration-guide.stories.ts
@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/web-components';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
-  id: 'Migration Guide',
+  id: 'c23b1d0b-76b3-4e38-aa76-b10c29bb873f',
   title: 'Misc/Migration Guide',
   parameters: {
     badges: [BADGE.TODO],
diff --git a/packages/documentation/src/stories/misc/versions/versions.stories.ts b/packages/documentation/src/stories/misc/versions/versions.stories.ts
index 1bbab6e3f8..3ac02b7ff8 100644
--- a/packages/documentation/src/stories/misc/versions/versions.stories.ts
+++ b/packages/documentation/src/stories/misc/versions/versions.stories.ts
@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/web-components';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
-  id: 'Versions',
+  id: '873b1271-a700-4b28-aefe-28bcc14fd85a',
   title: 'Misc/Versions',
   parameters: {
     badges: [BADGE.NEEDS_REVISION],
diff --git a/packages/documentation/src/stories/patterns/forms/forms.stories.ts b/packages/documentation/src/stories/patterns/forms/forms.stories.ts
index a9b46e951a..721a35f4a3 100644
--- a/packages/documentation/src/stories/patterns/forms/forms.stories.ts
+++ b/packages/documentation/src/stories/patterns/forms/forms.stories.ts
@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 
 const meta: Meta = {
-  id: 'Patterns/Forms',
+  id: 'd83829b2-7de2-48d2-be64-07a80c9caef3',
   title: 'Patterns/Forms',
   parameters: {
     badges: [],
diff --git a/packages/documentation/src/stories/utilities/background/background.stories.ts b/packages/documentation/src/stories/utilities/background/background.stories.ts
index b3ade596ac..cdb62624f1 100644
--- a/packages/documentation/src/stories/utilities/background/background.stories.ts
+++ b/packages/documentation/src/stories/utilities/background/background.stories.ts
@@ -3,7 +3,7 @@ import { html } from 'lit';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
-  id: 'Utilities/Background',
+  id: '60852fac-a861-4415-8276-bd38d68653bb',
   title: 'Utilities/Background',
   parameters: {
     badges: [BADGE.TODO],
diff --git a/packages/documentation/src/stories/utilities/common/common.stories.ts b/packages/documentation/src/stories/utilities/common/common.stories.ts
index c71bd94c49..5dabab5a79 100644
--- a/packages/documentation/src/stories/utilities/common/common.stories.ts
+++ b/packages/documentation/src/stories/utilities/common/common.stories.ts
@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/web-components';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
-  id: 'Utilities/Common',
+  id: '522f6347-78d4-4926-b39c-c131f3e1336e',
   title: 'Utilities/Common',
   parameters: {
     badges: [BADGE.TODO],
diff --git a/packages/documentation/src/stories/utilities/heading/heading.stories.ts b/packages/documentation/src/stories/utilities/heading/heading.stories.ts
index 8bc490dc9b..6b248a2ab6 100644
--- a/packages/documentation/src/stories/utilities/heading/heading.stories.ts
+++ b/packages/documentation/src/stories/utilities/heading/heading.stories.ts
@@ -3,7 +3,7 @@ import { html } from 'lit';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
-  id: 'Utilities/Heading',
+  id: '5f93ffae-2e01-4932-aae6-1673c6adf0cf',
   title: 'Utilities/Heading',
   parameters: {
     badges: [BADGE.NEEDS_REVISION],
diff --git a/packages/documentation/src/stories/utilities/list/list.stories.ts b/packages/documentation/src/stories/utilities/list/list.stories.ts
index ea731bd14d..362c49266a 100644
--- a/packages/documentation/src/stories/utilities/list/list.stories.ts
+++ b/packages/documentation/src/stories/utilities/list/list.stories.ts
@@ -3,7 +3,7 @@ import { html } from 'lit';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
-  id: 'Utilities/List',
+  id: 'e76192bb-b2eb-487a-b9c1-ef938bccdfc4',
   title: 'Utilities/List',
   parameters: {
     badges: [BADGE.TODO],
diff --git a/packages/documentation/src/stories/utilities/sizing/sizing.stories.ts b/packages/documentation/src/stories/utilities/sizing/sizing.stories.ts
index e0b00f4809..1d899915d2 100644
--- a/packages/documentation/src/stories/utilities/sizing/sizing.stories.ts
+++ b/packages/documentation/src/stories/utilities/sizing/sizing.stories.ts
@@ -12,7 +12,7 @@ const sizeOptionsPercent = ['auto', '25', '50', '75', '100'];
 
 const meta: Meta = {
   render: renderSizing,
-  id: 'Utilities/Sizing',
+  id: 'e728de1f-0d71-4317-8bb8-cbef0bf8d5db',
   title: 'Utilities/Sizing',
   parameters: {
     badges: [BADGE.NEEDS_REVISION],
diff --git a/packages/documentation/src/stories/utilities/spacing/spacing.stories.ts b/packages/documentation/src/stories/utilities/spacing/spacing.stories.ts
index 8c85edcfb3..d4cbc41e3d 100644
--- a/packages/documentation/src/stories/utilities/spacing/spacing.stories.ts
+++ b/packages/documentation/src/stories/utilities/spacing/spacing.stories.ts
@@ -20,7 +20,7 @@ const positionOptions = {
 };
 
 const meta: Meta = {
-  id: 'Utilities/Spacing',
+  id: 'facaacfd-18f1-49b4-80f1-a96680730fa0',
   title: 'Utilities/Spacing',
   parameters: {
     badges: [BADGE.NEEDS_REVISION],
diff --git a/packages/documentation/src/stories/utilities/text/text.stories.ts b/packages/documentation/src/stories/utilities/text/text.stories.ts
index 2da6676f59..11fe733402 100644
--- a/packages/documentation/src/stories/utilities/text/text.stories.ts
+++ b/packages/documentation/src/stories/utilities/text/text.stories.ts
@@ -3,7 +3,7 @@ import { html } from 'lit';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
-  id: 'Utilities/Text',
+  id: 'c55681df-4d21-469d-a5b3-c67686e7c104',
   title: 'Utilities/Text',
   parameters: {
     badges: [BADGE.NEEDS_REVISION],

From d1a8617bff6e07b722db12857773103f0fd1219b Mon Sep 17 00:00:00 2001
From: imagoiq <12294151+imagoiq@users.noreply.github.com>
Date: Thu, 8 Feb 2024 16:21:47 +0100
Subject: [PATCH 07/13] Fix links

---
 packages/documentation/src/shared/styles-package-import.mdx | 2 +-
 .../src/stories/components/alert/alert.docs.mdx             | 6 +++---
 .../stories/components/alert/standard-html/alert.stories.ts | 2 +-
 .../src/stories/components/button/button.docs.mdx           | 4 ++--
 .../src/stories/components/button/button.stories.ts         | 4 ++--
 .../src/stories/components/cards/card/card.docs.mdx         | 2 +-
 .../components/cards/product-card/product-card.docs.mdx     | 2 +-
 .../src/stories/components/forms/checkbox/checkbox.docs.mdx | 2 +-
 .../stories/components/forms/checkbox/checkbox.stories.ts   | 4 ++--
 .../src/stories/components/forms/choice-card/choice-card.ts | 2 +-
 .../src/stories/components/forms/input/input.stories.ts     | 4 ++--
 .../src/stories/components/forms/radio/radio.docs.mdx       | 2 +-
 .../src/stories/components/forms/radio/radio.stories.ts     | 4 ++--
 .../src/stories/components/forms/range/range.stories.ts     | 4 ++--
 .../src/stories/components/forms/select/select.stories.ts   | 4 ++--
 .../src/stories/components/forms/switch/switch.stories.ts   | 4 ++--
 .../stories/components/forms/textarea/textarea.stories.ts   | 4 ++--
 .../src/stories/components/heading/heading.docs.mdx         | 2 +-
 .../src/stories/components/icons/components/icon.docs.mdx   | 6 +++---
 .../src/stories/components/icons/getting-started.docs.mdx   | 4 ++--
 .../components/internet-header/migration-guide.docs.mdx     | 2 +-
 .../src/stories/components/popover/popover.docs.mdx         | 2 +-
 .../src/stories/components/toast/toast.docs.mdx             | 2 +-
 .../src/stories/components/toast/toast.stories.ts           | 2 +-
 .../src/stories/components/tooltip/tooltip.docs.mdx         | 2 +-
 .../src/stories/foundation/color/color.docs.mdx             | 2 +-
 .../src/stories/foundation/layout/grid/grid.blocks.tsx      | 2 +-
 .../src/stories/foundation/typography/typography.docs.mdx   | 6 +++---
 packages/documentation/src/stories/home.docs.mdx            | 2 +-
 .../documentation/src/stories/patterns/forms/forms.docs.mdx | 6 +++---
 .../src/stories/utilities/background/background.docs.mdx    | 2 +-
 .../src/stories/utilities/heading/heading.docs.mdx          | 2 +-
 .../src/stories/utilities/sizing/sizing.docs.mdx            | 3 +--
 .../src/stories/utilities/spacing/spacing.docs.mdx          | 2 +-
 .../documentation/src/stories/utilities/text/text.docs.mdx  | 4 ++--
 35 files changed, 54 insertions(+), 55 deletions(-)

diff --git a/packages/documentation/src/shared/styles-package-import.mdx b/packages/documentation/src/shared/styles-package-import.mdx
index 2300a89dd9..02671c8a21 100644
--- a/packages/documentation/src/shared/styles-package-import.mdx
+++ b/packages/documentation/src/shared/styles-package-import.mdx
@@ -5,7 +5,7 @@ import { getComponentStyleImports } from './styles-package-import-individual.sam
 
 <p>
   <small>*Make sure the `@swisspost/design-system-styles` package is already present in your project
-    or follow the [installation guidelines](http://localhost:9000/?path=/docs/getting-started-styles--docs).*</small>
+    or follow the [installation guidelines](http://localhost:9000/?path=/docs/e53e2de8-0bbf-4f70-babc-074c5466f700--docs).*</small>
 </p>
 
 To import all Design System styles:
diff --git a/packages/documentation/src/stories/components/alert/alert.docs.mdx b/packages/documentation/src/stories/components/alert/alert.docs.mdx
index 9991573597..0862bacd26 100644
--- a/packages/documentation/src/stories/components/alert/alert.docs.mdx
+++ b/packages/documentation/src/stories/components/alert/alert.docs.mdx
@@ -46,7 +46,7 @@ Alerts are intended to attract the user's attention without interrupting their o
 
       Alerts come with a preassigned icon based on their type.
       You have the option to customize this icon by using a `post-icon` element inside the alert.
-      For more information, read the [getting started with icons guide](/?path=/docs/components-icons-getting-started--docs).
+      For more information, read the [getting started with icons guide](/?path=/docs/40ed323b-9c1a-42ab-91ed-15f97f214608--docs).
 
       <Canvas of={AlertStories.CustomIcon} />
 
@@ -79,7 +79,7 @@ Alerts are intended to attract the user's attention without interrupting their o
       ## Installation
 
       The `<post-alert/>` element is part of the `@swisspost/design-system-components` package.
-      For more information, read the [getting started with components guide](/?path=/docs/getting-started-components--docs).
+      For more information, read the [getting started with components guide](/?path=/docs/edfb619b-fda1-4570-bf25-20830303d483--docs).
 
       ## Examples
 
@@ -97,7 +97,7 @@ Alerts are intended to attract the user's attention without interrupting their o
 
       Alerts come with a preassigned icon based on their type.
       You have the option to customize this icon by assigning the desired icon's name to the `icon` property of the alert.
-      Find the icon you need with the [icon search page](/?path=/docs/components-icons-search-for-icons--docs).
+      Find the icon you need with the [icon search page](/?path=/docs/5704bdc4-c5b5-45e6-b123-c54d01fce2f1--docs).
 
       <Canvas of={PostAlertStories.CustomIcon} />
 
diff --git a/packages/documentation/src/stories/components/alert/standard-html/alert.stories.ts b/packages/documentation/src/stories/components/alert/standard-html/alert.stories.ts
index 802cb6604f..e30a253577 100644
--- a/packages/documentation/src/stories/components/alert/standard-html/alert.stories.ts
+++ b/packages/documentation/src/stories/components/alert/standard-html/alert.stories.ts
@@ -64,7 +64,7 @@ const meta: Meta = {
         'The icon to display in the alert. By default, the icon depends on the alert type.' +
         '<span className="mt-mini alert alert-info alert-sm">' +
         'To use a custom icon, you must first ' +
-        '<a href="?path=/docs/components-icons-getting-started--docs">set up the icons in your project</a>' +
+        '<a href="?path=/docs/40ed323b-9c1a-42ab-91ed-15f97f214608--docs">set up the icons in your project</a>' +
         '.</span>',
       if: {
         arg: 'noIcon',
diff --git a/packages/documentation/src/stories/components/button/button.docs.mdx b/packages/documentation/src/stories/components/button/button.docs.mdx
index 7da172c25b..05ca6e677d 100644
--- a/packages/documentation/src/stories/components/button/button.docs.mdx
+++ b/packages/documentation/src/stories/components/button/button.docs.mdx
@@ -24,7 +24,7 @@ The following examples show the different characteristics of the component. Thes
 
 ### Inverted
 
-Inverted buttons don't need special classes anymore, just use any of the [background classes](/?path=/docs/utilities-background--docs) to set the background and you're done for the day.
+Inverted buttons don't need special classes anymore, just use any of the [background classes](/?path=/docs/60852fac-a861-4415-8276-bd38d68653bb--docs) to set the background and you're done for the day.
 
 <Canvas of={ButtonStories.Inverted} />
 
@@ -53,7 +53,7 @@ To achieve that, you can use classes in the format:
 
 For example, a button with classes `w-100 w-lg-auto` will use all available space only when the viewport size is smaller than `lg`.
 
-To learn more about breakpoints, see the <a href="/?path=/docs/layout-breakpoints--docs">Breakpoints documentation</a>.
+To learn more about breakpoints, see the <a href="/?path=/docs/20af6e2b-32b1-42ef-a187-b026aea7fe13--docs">Breakpoints documentation</a>.
 
 <Canvas of={ButtonStories.FullWidth} />
 
diff --git a/packages/documentation/src/stories/components/button/button.stories.ts b/packages/documentation/src/stories/components/button/button.stories.ts
index 929db1e2f8..4dd96e21ae 100644
--- a/packages/documentation/src/stories/components/button/button.stories.ts
+++ b/packages/documentation/src/stories/components/button/button.stories.ts
@@ -138,7 +138,7 @@ const meta: Meta = {
         'Defines a custom icon.' +
         '<span className="mt-mini alert alert-info alert-sm">' +
         'To use a custom icon, you must first ' +
-        '<a href="?path=/docs/components-icons-getting-started--docs">set up the icons in your project</a>' +
+        '<a href="?path=/docs/40ed323b-9c1a-42ab-91ed-15f97f214608--docs">set up the icons in your project</a>' +
         '.</span>',
       if: {
         arg: 'tag',
@@ -196,7 +196,7 @@ const meta: Meta = {
     disabled: {
       name: 'Disabled',
       description:
-        'When set to `true`, makes the component appear inactive and disables its functionality.<div className="mt-mini alert alert-info alert-sm">There are accessibility concerns with the disabled state.<br/>Please read our <a href="/?path=/docs/accessibility--docs#disabled-state">disabled state accessibility guide</a>.</div>',
+        'When set to `true`, makes the component appear inactive and disables its functionality.<div className="mt-mini alert alert-info alert-sm">There are accessibility concerns with the disabled state.<br/>Please read our <a href="/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs#disabled-state">disabled state accessibility guide</a>.</div>',
       control: {
         type: 'boolean',
       },
diff --git a/packages/documentation/src/stories/components/cards/card/card.docs.mdx b/packages/documentation/src/stories/components/cards/card/card.docs.mdx
index 7536e54b41..d3359f15e2 100644
--- a/packages/documentation/src/stories/components/cards/card/card.docs.mdx
+++ b/packages/documentation/src/stories/components/cards/card/card.docs.mdx
@@ -14,7 +14,7 @@ Built with flexbox, they offer easy alignment and mix well with other components
 
 They have no fixed width to start, so they’ll naturally fill the full width of its parent element.
 This is easily customizable using the grid for example,
-for more details read our [grid docs](/?path=/docs/layout-grid--docs).
+for more details read our [grid docs](/?path=/docs/7240f2ef-216a-490e-9bd8-c0cef19f7b31--docs).
 
 <Canvas sourceState="shown" of={CardStories.Default} />
 <div className="hide-col-default">
diff --git a/packages/documentation/src/stories/components/cards/product-card/product-card.docs.mdx b/packages/documentation/src/stories/components/cards/product-card/product-card.docs.mdx
index bc8bcf8d35..beb823389a 100644
--- a/packages/documentation/src/stories/components/cards/product-card/product-card.docs.mdx
+++ b/packages/documentation/src/stories/components/cards/product-card/product-card.docs.mdx
@@ -25,7 +25,7 @@ import ProductCardAngularSyncHeights from './product-card.sample.ts?raw';
 
 ### Product Card Group
 
-For organizing multiple product cards in a group, utilize the [grid system](/?path=/docs/layout-grid--docs).
+For organizing multiple product cards in a group, utilize the [grid system](/?path=/docs/7240f2ef-216a-490e-9bd8-c0cef19f7b31--docs).
 Ensure consistent height by applying the `.h-100` class to all product cards.
 
 <Canvas of={ProductCardStories.Groupped} />
diff --git a/packages/documentation/src/stories/components/forms/checkbox/checkbox.docs.mdx b/packages/documentation/src/stories/components/forms/checkbox/checkbox.docs.mdx
index 49a841ccf4..25b4b47008 100644
--- a/packages/documentation/src/stories/components/forms/checkbox/checkbox.docs.mdx
+++ b/packages/documentation/src/stories/components/forms/checkbox/checkbox.docs.mdx
@@ -59,7 +59,7 @@ To show the checkboxes inline, just add the `.form-check-inline` class to each o
   Don't forget to wrap your checkbox group in a `&lt;fieldset&gt;` that includes a `&lt;legend&gt;` element.
   You can then visually hide the legend using the `.visually-hidden` class.
 
-  Read more about that topic in our [accessibility docs](/?path=/docs/accessibility--docs).
+  Read more about that topic in our [accessibility docs](/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs).
 </div>
 
 <Canvas of={checkboxStories.Inline} />
diff --git a/packages/documentation/src/stories/components/forms/checkbox/checkbox.stories.ts b/packages/documentation/src/stories/components/forms/checkbox/checkbox.stories.ts
index 3056a704f2..146c9ddf3c 100644
--- a/packages/documentation/src/stories/components/forms/checkbox/checkbox.stories.ts
+++ b/packages/documentation/src/stories/components/forms/checkbox/checkbox.stories.ts
@@ -60,7 +60,7 @@ const meta: Meta = {
         'If `true`, the checkbox label is set via an `aria-label` attribute and is therefore not visible.' +
         '<span className="mt-mini alert alert-info alert-sm">' +
         'Shown or hidden, a label must always be defined.<br/>' +
-        'More details in our <a href="/?path=/docs/accessibility--docs">accessibility docs</a>.' +
+        'More details in our <a href="/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs">accessibility docs</a>.' +
         '</span>',
       control: {
         type: 'boolean',
@@ -106,7 +106,7 @@ const meta: Meta = {
         'If `true`, makes the checkbox appear inactive and disables its functionality.' +
         '<span className="mt-mini alert alert-info alert-sm">' +
         'There are accessibility concerns with the disabled state.<br/>' +
-        'More details in our <a href="/?path=/docs/accessibility--docs">accessibility docs</a>.' +
+        'More details in our <a href="/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs">accessibility docs</a>.' +
         '</span>',
       control: {
         type: 'boolean',
diff --git a/packages/documentation/src/stories/components/forms/choice-card/choice-card.ts b/packages/documentation/src/stories/components/forms/choice-card/choice-card.ts
index 1234f3067b..f5bc3b6392 100644
--- a/packages/documentation/src/stories/components/forms/choice-card/choice-card.ts
+++ b/packages/documentation/src/stories/components/forms/choice-card/choice-card.ts
@@ -60,7 +60,7 @@ export const choiceCardMeta: Meta = {
     disabled: {
       name: 'Disabled',
       description:
-        'When set to `true`, disables the component\'s functionality and places it in a disabled state.<span className="mt-mini alert alert-info alert-sm">There are accessibility concerns with the disabled state.<br/>Please read our <a href="/?path=/docs/accessibility--docs#disabled-state">disabled state accessibility guide</a>.</span>',
+        'When set to `true`, disables the component\'s functionality and places it in a disabled state.<span className="mt-mini alert alert-info alert-sm">There are accessibility concerns with the disabled state.<br/>Please read our <a href="/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs#disabled-state">disabled state accessibility guide</a>.</span>',
       control: {
         type: 'boolean',
       },
diff --git a/packages/documentation/src/stories/components/forms/input/input.stories.ts b/packages/documentation/src/stories/components/forms/input/input.stories.ts
index f9c49b63c9..621c92ba35 100644
--- a/packages/documentation/src/stories/components/forms/input/input.stories.ts
+++ b/packages/documentation/src/stories/components/forms/input/input.stories.ts
@@ -55,7 +55,7 @@ const meta: Meta = {
     hiddenLabel: {
       name: 'Hidden Label',
       description:
-        'Renders the component with or without a visible label.<span className="mt-mini alert alert-info alert-sm">There are accessibility concerns with hidden labels.<br/>Please read our <a href="/?path=/docs/accessibility--docs#labels">label accessibility guide</a>.</span>',
+        'Renders the component with or without a visible label.<span className="mt-mini alert alert-info alert-sm">There are accessibility concerns with hidden labels.<br/>Please read our <a href="/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs#labels">label accessibility guide</a>.</span>',
       if: {
         arg: 'floatingLabel',
         truthy: false,
@@ -155,7 +155,7 @@ const meta: Meta = {
     disabled: {
       name: 'Disabled',
       description:
-        'When set to `true`, disables the component\'s functionality and places it in a disabled state.<div className="mt-mini alert alert-info alert-sm">There are accessibility concerns with the disabled state.<br/>Please read our <a href="/?path=/docs/accessibility--docs#disabled-state">disabled state accessibility guide</a>.</div>',
+        'When set to `true`, disables the component\'s functionality and places it in a disabled state.<div className="mt-mini alert alert-info alert-sm">There are accessibility concerns with the disabled state.<br/>Please read our <a href="/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs#disabled-state">disabled state accessibility guide</a>.</div>',
       control: {
         type: 'boolean',
       },
diff --git a/packages/documentation/src/stories/components/forms/radio/radio.docs.mdx b/packages/documentation/src/stories/components/forms/radio/radio.docs.mdx
index 14f506b096..592aad44f5 100644
--- a/packages/documentation/src/stories/components/forms/radio/radio.docs.mdx
+++ b/packages/documentation/src/stories/components/forms/radio/radio.docs.mdx
@@ -43,7 +43,7 @@ To render a radio inline, simply add the class `.form-check-inline` to the `.for
   <code>&lt;legend&gt;</code> tag. This provides a label for your radio group.
   <br />
   For more information, read our{' '}
-  <a href="/?path=/docs/accessibility--docs#grouping">grouping accessibility guide</a>.
+  <a href="/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs#grouping">grouping accessibility guide</a>.
 </div>
 
 To visually hide the `<legend>` element, use the `.visually-hidden` class.
diff --git a/packages/documentation/src/stories/components/forms/radio/radio.stories.ts b/packages/documentation/src/stories/components/forms/radio/radio.stories.ts
index fdbd8cc63d..01b671572d 100644
--- a/packages/documentation/src/stories/components/forms/radio/radio.stories.ts
+++ b/packages/documentation/src/stories/components/forms/radio/radio.stories.ts
@@ -51,7 +51,7 @@ const meta: Meta = {
     hiddenLabel: {
       name: 'Hidden Label',
       description:
-        'Renders the component with or without a visible label.<span className="mt-mini alert alert-info alert-sm">There are accessibility concerns with hidden labels.<br/>Please read our <a href="/?path=/docs/accessibility--docs#labels">label accessibility guide</a>.</span>',
+        'Renders the component with or without a visible label.<span className="mt-mini alert alert-info alert-sm">There are accessibility concerns with hidden labels.<br/>Please read our <a href="/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs#labels">label accessibility guide</a>.</span>',
       control: {
         type: 'boolean',
       },
@@ -87,7 +87,7 @@ const meta: Meta = {
     disabled: {
       name: 'Disabled',
       description:
-        'When set to `true`, disables the component\'s functionality and places it in a disabled state.<span className="mt-mini alert alert-info alert-sm">There are accessibility concerns with the disabled state.<br/>Please read our <a href="/?path=/docs/accessibility--docs#disabled-state">disabled state accessibility guide</a>.</span>',
+        'When set to `true`, disables the component\'s functionality and places it in a disabled state.<span className="mt-mini alert alert-info alert-sm">There are accessibility concerns with the disabled state.<br/>Please read our <a href="/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs#disabled-state">disabled state accessibility guide</a>.</span>',
       control: {
         type: 'boolean',
       },
diff --git a/packages/documentation/src/stories/components/forms/range/range.stories.ts b/packages/documentation/src/stories/components/forms/range/range.stories.ts
index fe0b3e2e9b..20a0fca0e5 100644
--- a/packages/documentation/src/stories/components/forms/range/range.stories.ts
+++ b/packages/documentation/src/stories/components/forms/range/range.stories.ts
@@ -44,7 +44,7 @@ const meta: Meta = {
     hiddenLabel: {
       name: 'Hidden Label',
       description:
-        'Renders the component with or without a visible label.<span className="mt-mini alert alert-info alert-sm">There are accessibility concerns with hidden labels.<br/>Please read our <a href="/?path=/docs/accessibility--docs#labels">label accessibility guide</a>.</span>',
+        'Renders the component with or without a visible label.<span className="mt-mini alert alert-info alert-sm">There are accessibility concerns with hidden labels.<br/>Please read our <a href="/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs#labels">label accessibility guide</a>.</span>',
       control: {
         type: 'boolean',
       },
@@ -132,7 +132,7 @@ const meta: Meta = {
     disabled: {
       name: 'Disabled',
       description:
-        'When set to `true`, disables the component\'s functionality and places it in a disabled state.<span className="mt-mini alert alert-info alert-sm">There are accessibility concerns with the disabled state.<br/>Please read our <a href="/?path=/docs/accessibility--docs#disabled-state">disabled state accessibility guide</a>.</span>',
+        'When set to `true`, disables the component\'s functionality and places it in a disabled state.<span className="mt-mini alert alert-info alert-sm">There are accessibility concerns with the disabled state.<br/>Please read our <a href="/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs#disabled-state">disabled state accessibility guide</a>.</span>',
       control: {
         type: 'boolean',
       },
diff --git a/packages/documentation/src/stories/components/forms/select/select.stories.ts b/packages/documentation/src/stories/components/forms/select/select.stories.ts
index 03d89dfe9f..9a5bbc5d42 100644
--- a/packages/documentation/src/stories/components/forms/select/select.stories.ts
+++ b/packages/documentation/src/stories/components/forms/select/select.stories.ts
@@ -54,7 +54,7 @@ const meta: Meta = {
     hiddenLabel: {
       name: 'Hidden Label',
       description:
-        'Renders the component with or without a visible label.<span className="mt-mini alert alert-info alert-sm">There are accessibility concerns with hidden labels.<br/>Please read our <a href="/?path=/docs/accessibility--docs#labels">label accessibility guide</a>.</span>',
+        'Renders the component with or without a visible label.<span className="mt-mini alert alert-info alert-sm">There are accessibility concerns with hidden labels.<br/>Please read our <a href="/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs#labels">label accessibility guide</a>.</span>',
       if: {
         arg: 'floatingLabel',
         truthy: false,
@@ -168,7 +168,7 @@ const meta: Meta = {
     disabled: {
       name: 'Disabled',
       description:
-        'When set to `true`, disables the component\'s functionality and places it in a disabled state.<span className="mt-mini alert alert-info alert-sm">There are accessibility issues with the disabled state.<br/>Please read our <a href="/?path=/docs/accessibility--docs#disabled-state">disabled state accessibility guide</a>.</span>',
+        'When set to `true`, disables the component\'s functionality and places it in a disabled state.<span className="mt-mini alert alert-info alert-sm">There are accessibility issues with the disabled state.<br/>Please read our <a href="/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs#disabled-state">disabled state accessibility guide</a>.</span>',
       control: {
         type: 'boolean',
       },
diff --git a/packages/documentation/src/stories/components/forms/switch/switch.stories.ts b/packages/documentation/src/stories/components/forms/switch/switch.stories.ts
index df956722e1..8e931e54e6 100644
--- a/packages/documentation/src/stories/components/forms/switch/switch.stories.ts
+++ b/packages/documentation/src/stories/components/forms/switch/switch.stories.ts
@@ -49,7 +49,7 @@ const meta: Meta = {
     hiddenLabel: {
       name: 'Hidden Label',
       description:
-        'Renders the component with or without a visible label.<span className="mt-mini alert alert-info alert-sm">There are accessibility concerns with hidden labels.<br/>Please read our <a href="/?path=/docs/accessibility--docs#labels">label accessibility guide</a>.</span>',
+        'Renders the component with or without a visible label.<span className="mt-mini alert alert-info alert-sm">There are accessibility concerns with hidden labels.<br/>Please read our <a href="/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs#labels">label accessibility guide</a>.</span>',
       control: {
         type: 'boolean',
       },
@@ -70,7 +70,7 @@ const meta: Meta = {
     disabled: {
       name: 'Disabled',
       description:
-        'When set to `true`, disables the component\'s functionality and places it in a disabled state.<span className="mt-mini alert alert-info alert-sm">There are accessibility concerns with the disabled state.<br/>Please read our <a href="/?path=/docs/accessibility--docs#disabled-state">disabled state accessibility guide</a>.</span>',
+        'When set to `true`, disables the component\'s functionality and places it in a disabled state.<span className="mt-mini alert alert-info alert-sm">There are accessibility concerns with the disabled state.<br/>Please read our <a href="/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs#disabled-state">disabled state accessibility guide</a>.</span>',
       control: {
         type: 'boolean',
       },
diff --git a/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts b/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts
index 87e230da3d..cc744c9041 100644
--- a/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts
+++ b/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts
@@ -51,7 +51,7 @@ const meta: Meta = {
     hiddenLabel: {
       name: 'Hidden Label',
       description:
-        'Renders the component with or without a visible label.<span className="mt-mini alert alert-info alert-sm">There are accessibility concerns with hidden labels.<br/>Please read our <a href="/?path=/docs/accessibility--docs#labels">label accessibility guide</a>.</span>',
+        'Renders the component with or without a visible label.<span className="mt-mini alert alert-info alert-sm">There are accessibility concerns with hidden labels.<br/>Please read our <a href="/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs#labels">label accessibility guide</a>.</span>',
       if: {
         arg: 'floatingLabel',
         truthy: false,
@@ -121,7 +121,7 @@ const meta: Meta = {
     disabled: {
       name: 'Disabled',
       description:
-        'When set to `true`, disables the component\'s functionality and places it in a disabled state.<div className="mt-mini alert alert-info alert-sm">There are accessibility concerns with the disabled state.<br/>Please read our <a href="/?path=/docs/accessibility--docs#disabled-state">disabled state accessibility guide</a>.</div>',
+        'When set to `true`, disables the component\'s functionality and places it in a disabled state.<div className="mt-mini alert alert-info alert-sm">There are accessibility concerns with the disabled state.<br/>Please read our <a href="/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs#disabled-state">disabled state accessibility guide</a>.</div>',
       control: {
         type: 'boolean',
       },
diff --git a/packages/documentation/src/stories/components/heading/heading.docs.mdx b/packages/documentation/src/stories/components/heading/heading.docs.mdx
index 0d47c6f8c0..cb822e71af 100644
--- a/packages/documentation/src/stories/components/heading/heading.docs.mdx
+++ b/packages/documentation/src/stories/components/heading/heading.docs.mdx
@@ -12,7 +12,7 @@ import StylesPackageImport from '../../../shared/styles-package-import.mdx';
 
 All HTML headings are available, from `h1` the highest section level to `h6` the lowest.<br/>
 If you need to match the font styling of a heading but cannot use the associated HTML element,
-check out [heading utilities](/?path=/docs/utilities-heading--docs).
+check out [heading utilities](/?path=/docs/5f93ffae-2e01-4932-aae6-1673c6adf0cf--docs).
 
 <Canvas sourceState="shown" of={HeadingStories.Default} />
 <div className="hide-col-default">
diff --git a/packages/documentation/src/stories/components/icons/components/icon.docs.mdx b/packages/documentation/src/stories/components/icons/components/icon.docs.mdx
index 58e5930919..f405ad1794 100644
--- a/packages/documentation/src/stories/components/icons/components/icon.docs.mdx
+++ b/packages/documentation/src/stories/components/icons/components/icon.docs.mdx
@@ -16,7 +16,7 @@ import * as IconStories from './icon.stories';
 ### Color
 
 By default, icons inherit the current text color of their parent element.<br/>
-You can therefore colorize an icon using our [text color utilities](/?path=/docs/utilities-text--docs)
+You can therefore colorize an icon using our [text color utilities](/?path=/docs/c55681df-4d21-469d-a5b3-c67686e7c104--docs)
 or by setting the CSS directly through a style attribute or self-defined classes.
 
 <Canvas of={IconStories.Color} sourceState="shown" />
@@ -24,14 +24,14 @@ or by setting the CSS directly through a style attribute or self-defined classes
 ### Size
 
 Icons have a default `width` of `1em`, which means they will scale with the size of the current `font-size`.
-Therefore, you can manage the size of an icon using our [font-size utilities](/?path=/docs/utilities-text--docs)
+Therefore, you can manage the size of an icon using our [font-size utilities](/?path=/docs/c55681df-4d21-469d-a5b3-c67686e7c104--docs)
 or by setting the CSS directly through a style attribute or self-defined classes.
 
 <Canvas of={IconStories.Size} sourceState="shown" />
 
 ### Style
 
-With the use of our [border](#TODO),[background](/?path=/docs/utilities-background--docs)
+With the use of our [border](#TODO),[background](/?path=/docs/60852fac-a861-4415-8276-bd38d68653bb--docs)
 and [padding](#TODO) utilities, you can create various styling effects.
 
 <Canvas of={IconStories.Style} sourceState="shown" />
diff --git a/packages/documentation/src/stories/components/icons/getting-started.docs.mdx b/packages/documentation/src/stories/components/icons/getting-started.docs.mdx
index 8f96415ca0..c5c49f0788 100644
--- a/packages/documentation/src/stories/components/icons/getting-started.docs.mdx
+++ b/packages/documentation/src/stories/components/icons/getting-started.docs.mdx
@@ -32,11 +32,11 @@ The comprehensive collection of Swiss Post icons.
 <Source code={`npm install @swisspost/design-system-icons`} language="bash" />
 
 <div className="alert alert-info alert-md">
-  If you want to use our [icon component](/?path=/docs/components-icons-icon-component--docs) to
+  If you want to use our [icon component](/?path=/docs/0dcfe3c0-bfc0-4107-b43b-7e9d825b805f--docs) to
   render the icons (which we strongly recommend), you must also install the
   <strong>components</strong> package.
   <br />
-  To learn how to set up this package please read our [Components - Getting Started](/?path=/docs/getting-started-components--docs) page.
+  To learn how to set up this package please read our [Components - Getting Started](/?path=/docs/edfb619b-fda1-4570-bf25-20830303d483--docs) page.
 </div>
 
 ## Usage
diff --git a/packages/documentation/src/stories/components/internet-header/migration-guide.docs.mdx b/packages/documentation/src/stories/components/internet-header/migration-guide.docs.mdx
index 8bb75640bf..1c7612388f 100644
--- a/packages/documentation/src/stories/components/internet-header/migration-guide.docs.mdx
+++ b/packages/documentation/src/stories/components/internet-header/migration-guide.docs.mdx
@@ -71,7 +71,7 @@ There is a long list of [known jQuery vulnerabilities](https://security.snyk.io/
 
 ## 4. Install the new header
 
-Please refer to the [Internet Header installation instructions](/?path=/docs/components-internet-header-getting-started--docs) for an installation guide.
+Please refer to the [Internet Header installation instructions](/?path=/docs/9b02bcb2-3b6a-4271-b550-675a62ff3890--docs) for an installation guide.
 
 After installation, you're ready to add the new tags to your markup:
 
diff --git a/packages/documentation/src/stories/components/popover/popover.docs.mdx b/packages/documentation/src/stories/components/popover/popover.docs.mdx
index 697d3d3e23..d78044090a 100644
--- a/packages/documentation/src/stories/components/popover/popover.docs.mdx
+++ b/packages/documentation/src/stories/components/popover/popover.docs.mdx
@@ -15,5 +15,5 @@ import * as PopoverStories from './popover.stories';
 ## Installation
 
 <div>
-  The `<post-popover>` element is part of the `@swisspost/design-system-components` package. For more information, read the [getting started with components guide](/?path=/docs/getting-started-components--docs).
+  The `<post-popover>` element is part of the `@swisspost/design-system-components` package. For more information, read the [getting started with components guide](/?path=/docs/edfb619b-fda1-4570-bf25-20830303d483--docs).
 </div>
diff --git a/packages/documentation/src/stories/components/toast/toast.docs.mdx b/packages/documentation/src/stories/components/toast/toast.docs.mdx
index 6b576530e7..1a01a167c1 100644
--- a/packages/documentation/src/stories/components/toast/toast.docs.mdx
+++ b/packages/documentation/src/stories/components/toast/toast.docs.mdx
@@ -45,7 +45,7 @@ You can stack toasts by wrapping them in a `.toast-container`, which will vertic
 ## Accessibility
 
 Toasts are intended to be small interruptions to your visitors or users, so to help those with screen readers and similar assistive technologies, you should wrap your toasts in an `aria-live` region. Changes to live regions (such as injecting/updating a toast component) are automatically announced by screen readers without the need to move the user’s focus or interrupt in any way. Additionally, include `aria-atomic="true"` to ensure that the entire toast is always announced as a single (atomic) unit, rather than just announcing what changed (which could lead to problems if you only update part of the toast’s content, or if you show the same toast content later in time). If the information is important in the process, e.g. for a list of errors in a form, then use the
-[alert component](/?path=/docs/components-alert--docs) instead of the toast.
+[alert component](/?path=/docs/105e67d8-31e9-4d0b-87ff-685aba31fd4c--docs) instead of the toast.
 
 Note that the live region needs to be present in the markup before the toast is generated or updated. If you dynamically generate both at the same time and inject them into the page, they will generally not be announced by assistive technologies.
 
diff --git a/packages/documentation/src/stories/components/toast/toast.stories.ts b/packages/documentation/src/stories/components/toast/toast.stories.ts
index 2f271d548f..932fa624c7 100644
--- a/packages/documentation/src/stories/components/toast/toast.stories.ts
+++ b/packages/documentation/src/stories/components/toast/toast.stories.ts
@@ -86,7 +86,7 @@ const meta: Meta = {
         'Defines a custom icon.' +
         '<span className="mt-mini alert alert-info alert-sm">' +
         'To use a custom icon, you must first ' +
-        '<a href="?path=/docs/components-icons-getting-started--docs">set up the icons in your project</a>' +
+        '<a href="?path=/docs/40ed323b-9c1a-42ab-91ed-15f97f214608--docs">set up the icons in your project</a>' +
         '.</span>',
       if: {
         arg: 'noIcon',
diff --git a/packages/documentation/src/stories/components/tooltip/tooltip.docs.mdx b/packages/documentation/src/stories/components/tooltip/tooltip.docs.mdx
index c240ab5d9e..c3fc5cdec0 100644
--- a/packages/documentation/src/stories/components/tooltip/tooltip.docs.mdx
+++ b/packages/documentation/src/stories/components/tooltip/tooltip.docs.mdx
@@ -13,7 +13,7 @@ import * as TooltipStories from './tooltip.stories';
 ## Installation
 
 The `<post-tooltip>` element is part of the `@swisspost/design-system-components` package. For more information, read the
-[getting started with components guide](/?path=/docs/getting-started-components--docs).
+[getting started with components guide](/?path=/docs/edfb619b-fda1-4570-bf25-20830303d483--docs).
 
 ## Examples
 
diff --git a/packages/documentation/src/stories/foundation/color/color.docs.mdx b/packages/documentation/src/stories/foundation/color/color.docs.mdx
index efaf894019..ca7b1fde60 100644
--- a/packages/documentation/src/stories/foundation/color/color.docs.mdx
+++ b/packages/documentation/src/stories/foundation/color/color.docs.mdx
@@ -18,7 +18,7 @@ They theme our elements and components.
   For accessibility reasons, you should always make sure that your individually created color combinations are
   sufficiently contrasting. There may be a better solution than coloring elements individually.
 
-For example, use the [background utilities](/?path=/docs/utilities-background--docs) to get elements
+For example, use the [background utilities](/?path=/docs/60852fac-a861-4415-8276-bd38d68653bb--docs) to get elements
 with a specific background color and the best possible contrast color for its content.
 
 </div>
diff --git a/packages/documentation/src/stories/foundation/layout/grid/grid.blocks.tsx b/packages/documentation/src/stories/foundation/layout/grid/grid.blocks.tsx
index 38ee14bd88..39cc215324 100644
--- a/packages/documentation/src/stories/foundation/layout/grid/grid.blocks.tsx
+++ b/packages/documentation/src/stories/foundation/layout/grid/grid.blocks.tsx
@@ -50,7 +50,7 @@ export const GridTable = () => (
     <tr>
       <th>Column ordering</th>
       <td colSpan={SCSS_VARIABLES['breakpoint-count']}>
-        <a href="/?path=/docs/layout-columns--docs">yes</a>
+        <a href="/?path=/docs/cd70f48f-6308-4ec8-a8c6-982bd72c855c--docs">yes</a>
       </td>
     </tr>
   </SpecTable>
diff --git a/packages/documentation/src/stories/foundation/typography/typography.docs.mdx b/packages/documentation/src/stories/foundation/typography/typography.docs.mdx
index ddc9106a1c..cdef1995a1 100644
--- a/packages/documentation/src/stories/foundation/typography/typography.docs.mdx
+++ b/packages/documentation/src/stories/foundation/typography/typography.docs.mdx
@@ -20,7 +20,7 @@ import SampleStandalone from './typography-standalone.sample.css?raw';
 
 This page describes the typography basics of the design system.<br/>
 If you want to know how to adjust font-families, font-sizes, etc. in your code,
-please visit our [text utilities docs](/?path=/docs/utilities-text--docs).
+please visit our [text utilities docs](/?path=/docs/c55681df-4d21-469d-a5b3-c67686e7c104--docs).
 
 ## Font Families
 
@@ -79,7 +79,7 @@ The following sections show what specific elements look like.
 Sometimes the document heading structure requires you
 to use a heading tag that should look like another in order to maintain a consistency.
 In those cases you can use the heading helper classes `.h1` through `.h6`.<br/>
-For more details, read our [heading docs](/?path=/docs/components-heading--docs).
+For more details, read our [heading docs](/?path=/docs/5f93ffae-2e01-4932-aae6-1673c6adf0cf--docs).
 
 ### Paragraphs
 
@@ -98,4 +98,4 @@ For more details, read our [heading docs](/?path=/docs/components-heading--docs)
 <Lists />
 
 For more details how to change the look of lists,
-visit our [list utilities docs](/?path=/docs/utilities-list--docs).
+visit our [list utilities docs](/?path=/docs/e76192bb-b2eb-487a-b9c1-ef938bccdfc4--docs).
diff --git a/packages/documentation/src/stories/home.docs.mdx b/packages/documentation/src/stories/home.docs.mdx
index 29d3ff05b3..bd262a0484 100644
--- a/packages/documentation/src/stories/home.docs.mdx
+++ b/packages/documentation/src/stories/home.docs.mdx
@@ -18,7 +18,7 @@ import './home.styles.scss';
   </div>
   <div className="mt-regular mb-regular d-flex gap-mini flex-wrap justify-content-center">
     <div className="mt-big mb-regular w-100">
-      <a className="btn btn-primary btn-lg" href="/?path=/docs/getting-started-styles--docs">Get started</a>
+      <a className="btn btn-primary btn-lg" href="/?path=/docs/e53e2de8-0bbf-4f70-babc-074c5466f700--docs">Get started</a>
     </div>
     <a
       href="https://www.experience-hub.ch/document/2803"
diff --git a/packages/documentation/src/stories/patterns/forms/forms.docs.mdx b/packages/documentation/src/stories/patterns/forms/forms.docs.mdx
index 2081706354..ec93c946b3 100644
--- a/packages/documentation/src/stories/patterns/forms/forms.docs.mdx
+++ b/packages/documentation/src/stories/patterns/forms/forms.docs.mdx
@@ -24,7 +24,7 @@ next to the field.
 <Canvas of={FormPatternsStories.BasicInput} sourceState="shown" />
 
 ## Vertical spacing
-To add space between input, you can use [margin utilities](/?path=/docs/utilities-spacing--docs).
+To add space between input, you can use [margin utilities](/?path=/docs/facaacfd-18f1-49b4-80f1-a96680730fa0--docs).
 
 <Canvas of={FormPatternsStories.VerticalSpacing} sourceState="shown" />
 
@@ -34,11 +34,11 @@ If you want a form field to span the whole available width, you don't need a row
 only need those, if you want to place two things next to each other.
 
 Simply use `.row` and `.col` to have the width distributed evenly between all inputs.
-To make it responsive, you can add `.row-cols-*` classes to the row (see [Grid page](/?path=/docs/layout-grid--docs#row-columns)).
+To make it responsive, you can add `.row-cols-*` classes to the row (see [Grid page](/?path=/docs/7240f2ef-216a-490e-9bd8-c0cef19f7b31--docs#row-columns)).
 
 <Canvas of={FormPatternsStories.RowSimple} sourceState="shown" />
 
-For finer adjustment, you can also use the `.col-*` classes (see [Columns page](/?path=/docs/layout-columns--docs)) on your columns. For example for a 2/1 ratio, given that a row has twelve columns in total,
+For finer adjustment, you can also use the `.col-*` classes (see [Columns page](/?path=/docs/cd70f48f-6308-4ec8-a8c6-982bd72c855c--docs)) on your columns. For example for a 2/1 ratio, given that a row has twelve columns in total,
 just add `.col-8` and `.col-4` to you two columns respectively.
 
 <Canvas of={FormPatternsStories.ColSimple} sourceState="shown" />
diff --git a/packages/documentation/src/stories/utilities/background/background.docs.mdx b/packages/documentation/src/stories/utilities/background/background.docs.mdx
index de897a4676..377b27bad5 100644
--- a/packages/documentation/src/stories/utilities/background/background.docs.mdx
+++ b/packages/documentation/src/stories/utilities/background/background.docs.mdx
@@ -79,7 +79,7 @@ Change the background opacity simply by setting the CSS variable `--post-bg-opac
 <div className="alert alert-info alert-md">
   Low background opacity is not recommended as it can lead to poor contrast.
   It is then your responsibility to ensure that the contrast ratio between foreground and background is at least 4.5:1.
-  More information on that topic is available on our [accessibility docs](/?path=/docs/accessibility--docs).
+  More information on that topic is available on our [accessibility docs](/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs).
 </div>
 
 <Canvas of={BackgroundStories.TranslucentBackgrounds} sourceState='shown' />
diff --git a/packages/documentation/src/stories/utilities/heading/heading.docs.mdx b/packages/documentation/src/stories/utilities/heading/heading.docs.mdx
index 82b3c04a47..c60157a434 100644
--- a/packages/documentation/src/stories/utilities/heading/heading.docs.mdx
+++ b/packages/documentation/src/stories/utilities/heading/heading.docs.mdx
@@ -17,7 +17,7 @@ import * as HeadingStories from './heading.stories';
   heading utility classes to ensure that your header structure is semantically correct while
   conforming to design requirements.
 
-  Find more information on our [accessibility docs](/?path=/docs/accessibility--docs).
+  Find more information on our [accessibility docs](/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs).
 </div>
 
 ## Usage on Heading Elements
diff --git a/packages/documentation/src/stories/utilities/sizing/sizing.docs.mdx b/packages/documentation/src/stories/utilities/sizing/sizing.docs.mdx
index f506216667..fe7764c28f 100644
--- a/packages/documentation/src/stories/utilities/sizing/sizing.docs.mdx
+++ b/packages/documentation/src/stories/utilities/sizing/sizing.docs.mdx
@@ -1,7 +1,6 @@
 import { Canvas, Controls, Meta, Source } from '@storybook/blocks';
 import { formatAsMap } from '../../../utils/sass-export';
 import * as SizingStories from './sizing.stories';
-import StylesPackageImport from '../../../shared/styles-package-import.mdx';
 
 <Meta of={SizingStories} />
 
@@ -36,7 +35,7 @@ Bootstrap offers sizing classes with the suffixes bellow. They allow you to set
 
 For width, we offer additionally `.w-{breakpoint}-{size}` classes (e.g. `w-md-100`) so that you can size only for some specific breakpoints.
 
-See <a href="/?path=/docs/components-button--docs#full-width">Full-width button</a> for a practical example.
+See <a href="/?path=/docs/eb78afcb-ce92-4990-94b6-6536d5ec6af4--docs#full-width">Full-width button</a> for a practical example.
 
 ### Post-Sizes
 
diff --git a/packages/documentation/src/stories/utilities/spacing/spacing.docs.mdx b/packages/documentation/src/stories/utilities/spacing/spacing.docs.mdx
index e57572a4ee..fcd576682c 100644
--- a/packages/documentation/src/stories/utilities/spacing/spacing.docs.mdx
+++ b/packages/documentation/src/stories/utilities/spacing/spacing.docs.mdx
@@ -25,7 +25,7 @@ You can apply the desired spacings for `margin` and/or `padding` all around an e
 
 Our base spacing classes with suffixes going from 0 to 5 (`*-0`, `*-1`, ..., `*-5`).
 
-Our custom sizes can be used in the same way: by adding the name of the desired size to a prefix. See our [sizing docs](/?path=/docs/utilities-sizing--docs) to find out which size names are available.
+Our custom sizes can be used in the same way: by adding the name of the desired size to a prefix. See our [sizing docs](/?path=/docs/e728de1f-0d71-4317-8bb8-cbef0bf8d5db--docs) to find out which size names are available.
 
 <div className="alert alert-warning">
   <h4 className="alert-heading">Do not use spacing classes on grid elements (i.e. `.row`, `.col`, `.col-*`).</h4>
diff --git a/packages/documentation/src/stories/utilities/text/text.docs.mdx b/packages/documentation/src/stories/utilities/text/text.docs.mdx
index 4877cd2651..08095558ac 100644
--- a/packages/documentation/src/stories/utilities/text/text.docs.mdx
+++ b/packages/documentation/src/stories/utilities/text/text.docs.mdx
@@ -115,7 +115,7 @@ Define how text-blocks are displayed.
 
 <div className="alert alert-warning my-4">
   The `.text-auto` class is deprecated since text color is now set by the{' '}
-  [backgrounds](/?path=/docs/utilities-background--docs) themselves.
+  [backgrounds](/?path=/docs/60852fac-a861-4415-8276-bd38d68653bb--docs) themselves.
 </div>
 
 Colorize text with `.text-*` utility classes.
@@ -151,7 +151,7 @@ Easily realign text to components with text alignment classes.
 For `start`, `end`, and `center` alignment, responsive classes are available that use the same viewport breakpoints as the grid system.
 The responsive alignment classes have the following format: `text-{breakpoint}-{alighment}`.
 
-For more detailed informations about breakpoints read our [layout docs](/?path=/docs/layout-breakpoints--docs).
+For more detailed informations about breakpoints read our [layout docs](/?path=/docs/20af6e2b-32b1-42ef-a187-b026aea7fe13--docs).
 
 ### Wrapping
 

From d1d567719426a330146b29e01fca439e64354777 Mon Sep 17 00:00:00 2001
From: imagoiq <12294151+imagoiq@users.noreply.github.com>
Date: Thu, 8 Feb 2024 16:27:13 +0100
Subject: [PATCH 08/13] Fix missing internet header stories id

---
 .../components/breadcrumbs/breadcrumbs.stories.ts            | 1 +
 .../breadcrumbs/overrides/breadcrumbs-config.stories.ts      | 1 +
 .../components/footer/custom-config/footer-config.stories.ts | 1 +
 .../internet-header/components/footer/footer.stories.ts      | 1 +
 .../internet-header/components/header/header.stories.ts      | 5 ++---
 .../header/overrides-stories/header-custom-config.stories.ts | 1 +
 .../overrides-stories/header-custom-content.stories.ts       | 1 +
 .../header-language-switch-overrides.stories.ts              | 1 +
 .../overrides-stories/header-os-flyout-overrides.stories.ts  | 1 +
 .../components/internet-header/migration-guide.docs.mdx      | 2 +-
 .../components/internet-header/migration-guide.stories.ts    | 1 +
 11 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/documentation/src/stories/components/internet-header/components/breadcrumbs/breadcrumbs.stories.ts b/packages/documentation/src/stories/components/internet-header/components/breadcrumbs/breadcrumbs.stories.ts
index 8997e8e27c..b19a213166 100644
--- a/packages/documentation/src/stories/components/internet-header/components/breadcrumbs/breadcrumbs.stories.ts
+++ b/packages/documentation/src/stories/components/internet-header/components/breadcrumbs/breadcrumbs.stories.ts
@@ -6,6 +6,7 @@ import { getAttributes } from '../../../../../utils';
 import customItems from './overrides/custom-items';
 
 const meta: Meta<HTMLSwisspostInternetBreadcrumbsElement> = {
+  id: '4347e5bf-8bf2-4f44-9075-9faaa53591ed',
   title: 'Components/Internet Header/Breadcrumbs',
   component: 'swisspost-internet-breadcrumbs',
   render: renderInternetBreadcrumbs,
diff --git a/packages/documentation/src/stories/components/internet-header/components/breadcrumbs/overrides/breadcrumbs-config.stories.ts b/packages/documentation/src/stories/components/internet-header/components/breadcrumbs/overrides/breadcrumbs-config.stories.ts
index 3eca16b0b8..7025cbec75 100644
--- a/packages/documentation/src/stories/components/internet-header/components/breadcrumbs/overrides/breadcrumbs-config.stories.ts
+++ b/packages/documentation/src/stories/components/internet-header/components/breadcrumbs/overrides/breadcrumbs-config.stories.ts
@@ -2,6 +2,7 @@ import * as BreadcrumbsStories from '../breadcrumbs.stories';
 
 export default {
   ...BreadcrumbsStories.default,
+  id: 'b93adeff-9bb8-4f23-a81d-96452a94fd9b',
   title: 'Components/Internet Header/Breadcrumbs/Custom Items',
 };
 
diff --git a/packages/documentation/src/stories/components/internet-header/components/footer/custom-config/footer-config.stories.ts b/packages/documentation/src/stories/components/internet-header/components/footer/custom-config/footer-config.stories.ts
index 15ee19e727..e98dc44cd0 100644
--- a/packages/documentation/src/stories/components/internet-header/components/footer/custom-config/footer-config.stories.ts
+++ b/packages/documentation/src/stories/components/internet-header/components/footer/custom-config/footer-config.stories.ts
@@ -2,6 +2,7 @@ import * as FooterStories from '../footer.stories';
 
 export default {
   ...FooterStories.default,
+  id: '201a58d2-d903-4b44-aa1f-91b49f60e1d4',
   title: 'Components/Internet Header/Footer/Custom Config',
 };
 
diff --git a/packages/documentation/src/stories/components/internet-header/components/footer/footer.stories.ts b/packages/documentation/src/stories/components/internet-header/components/footer/footer.stories.ts
index 0524b4f9b3..db351b18b6 100644
--- a/packages/documentation/src/stories/components/internet-header/components/footer/footer.stories.ts
+++ b/packages/documentation/src/stories/components/internet-header/components/footer/footer.stories.ts
@@ -5,6 +5,7 @@ import customFooterConfig from './custom-config/custom-footer-config';
 import { spread } from '@open-wc/lit-helpers';
 
 const meta: Meta = {
+  id: '27fc009d-3eec-43a9-b3a2-55531e721817',
   title: 'Components/Internet Header/Footer',
   component: 'swisspost-internet-footer',
   render: renderInternetFooter,
diff --git a/packages/documentation/src/stories/components/internet-header/components/header/header.stories.ts b/packages/documentation/src/stories/components/internet-header/components/header/header.stories.ts
index acd9b41ba6..5e286c28db 100644
--- a/packages/documentation/src/stories/components/internet-header/components/header/header.stories.ts
+++ b/packages/documentation/src/stories/components/internet-header/components/header/header.stories.ts
@@ -7,6 +7,7 @@ import osFlyoutOverrides from './config/os-flyout-overrides';
 import languageSwitchOverrides from './config/language-switch-overrides';
 
 const meta: Meta = {
+  id: 'ebb11274-091b-4cb7-9a3f-3e0451c9a865',
   title: 'Components/Internet Header/Header',
   component: 'swisspost-internet-header',
   parameters: {
@@ -172,9 +173,7 @@ const meta: Meta = {
 };
 
 function render({ innerHMTL, ...args }: Args) {
-  return html`
-    <swisspost-internet-header ${spreadArgs(args)}></swisspost-internet-header>
-  `;
+  return html` <swisspost-internet-header ${spreadArgs(args)}></swisspost-internet-header> `;
 }
 
 export default meta;
diff --git a/packages/documentation/src/stories/components/internet-header/components/header/overrides-stories/header-custom-config.stories.ts b/packages/documentation/src/stories/components/internet-header/components/header/overrides-stories/header-custom-config.stories.ts
index e133107815..aa927970ac 100644
--- a/packages/documentation/src/stories/components/internet-header/components/header/overrides-stories/header-custom-config.stories.ts
+++ b/packages/documentation/src/stories/components/internet-header/components/header/overrides-stories/header-custom-config.stories.ts
@@ -2,6 +2,7 @@ import * as HeaderStories from '../header.stories';
 
 export default {
   ...HeaderStories.default,
+  id: 'bfdf4e7c-37d3-40f8-a5d0-734f3e6612b4',
   title: 'Components/Internet Header/Header/Custom Config',
 };
 
diff --git a/packages/documentation/src/stories/components/internet-header/components/header/overrides-stories/header-custom-content.stories.ts b/packages/documentation/src/stories/components/internet-header/components/header/overrides-stories/header-custom-content.stories.ts
index a7e63f4528..1495e7c23d 100644
--- a/packages/documentation/src/stories/components/internet-header/components/header/overrides-stories/header-custom-content.stories.ts
+++ b/packages/documentation/src/stories/components/internet-header/components/header/overrides-stories/header-custom-content.stories.ts
@@ -2,6 +2,7 @@ import * as HeaderStories from '../header.stories';
 
 export default {
   ...HeaderStories.default,
+  id: 'f09859db-8270-482b-a884-5b5584f86a45',
   title: 'Components/Internet Header/Header/Custom Content',
 };
 
diff --git a/packages/documentation/src/stories/components/internet-header/components/header/overrides-stories/header-language-switch-overrides.stories.ts b/packages/documentation/src/stories/components/internet-header/components/header/overrides-stories/header-language-switch-overrides.stories.ts
index 5d1c40e44e..2d308a431e 100644
--- a/packages/documentation/src/stories/components/internet-header/components/header/overrides-stories/header-language-switch-overrides.stories.ts
+++ b/packages/documentation/src/stories/components/internet-header/components/header/overrides-stories/header-language-switch-overrides.stories.ts
@@ -2,6 +2,7 @@ import * as HeaderStories from '../header.stories';
 
 export default {
   ...HeaderStories.default,
+  id: '85d5a6b7-ac9b-4d8a-841c-72b552d0dc07',
   title: 'Components/Internet Header/Header/Language Switch Overrides',
 };
 
diff --git a/packages/documentation/src/stories/components/internet-header/components/header/overrides-stories/header-os-flyout-overrides.stories.ts b/packages/documentation/src/stories/components/internet-header/components/header/overrides-stories/header-os-flyout-overrides.stories.ts
index 1502225361..4dc210d54a 100644
--- a/packages/documentation/src/stories/components/internet-header/components/header/overrides-stories/header-os-flyout-overrides.stories.ts
+++ b/packages/documentation/src/stories/components/internet-header/components/header/overrides-stories/header-os-flyout-overrides.stories.ts
@@ -2,6 +2,7 @@ import * as HeaderStories from '../header.stories';
 
 export default {
   ...HeaderStories.default,
+  id: 'eee6c6fb-202f-40f9-8c8c-5f681b71db7e',
   title: 'Components/Internet Header/Header/Os Flyout Overrides',
 };
 
diff --git a/packages/documentation/src/stories/components/internet-header/migration-guide.docs.mdx b/packages/documentation/src/stories/components/internet-header/migration-guide.docs.mdx
index 1c7612388f..a1f9857575 100644
--- a/packages/documentation/src/stories/components/internet-header/migration-guide.docs.mdx
+++ b/packages/documentation/src/stories/components/internet-header/migration-guide.docs.mdx
@@ -88,4 +88,4 @@ If you need to change settings during runtime, you can get a reference to the he
 
 <Source code={SampleReference} dark={SourceDarkMode} language="typescript" />
 
-At the [Internet Header configuration page](/?path=/docs/components-internet-header-header--docs) you can find a list of possible options.
+At the [Internet Header configuration page](/?path=/docs/ebb11274-091b-4cb7-9a3f-3e0451c9a865--docs) you can find a list of possible options.
diff --git a/packages/documentation/src/stories/components/internet-header/migration-guide.stories.ts b/packages/documentation/src/stories/components/internet-header/migration-guide.stories.ts
index e6095c031a..d24e6fe789 100644
--- a/packages/documentation/src/stories/components/internet-header/migration-guide.stories.ts
+++ b/packages/documentation/src/stories/components/internet-header/migration-guide.stories.ts
@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/web-components';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
+  id: 'a6e4dfe1-0272-425b-9980-0ad40822c2c1',
   title: 'Components/Internet Header/Migration Guide',
   parameters: {
     badges: [BADGE.STABLE],

From 104bee86c082feb2bcb83a8c8555828123fb637b Mon Sep 17 00:00:00 2001
From: imagoiq <12294151+imagoiq@users.noreply.github.com>
Date: Thu, 8 Feb 2024 16:36:50 +0100
Subject: [PATCH 09/13] Fix collapsible trigger id which is not valid with uuid
 starting with a number

---
 .../src/stories/components/collapsible/collapsible.stories.ts   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/documentation/src/stories/components/collapsible/collapsible.stories.ts b/packages/documentation/src/stories/components/collapsible/collapsible.stories.ts
index 52bf132834..4e50dbe7bb 100644
--- a/packages/documentation/src/stories/components/collapsible/collapsible.stories.ts
+++ b/packages/documentation/src/stories/components/collapsible/collapsible.stories.ts
@@ -30,7 +30,7 @@ export default meta;
 // DECORATORS
 function externalControls(story: StoryFn, context: StoryContext) {
   const { args, canvasElement } = context;
-  const togglerId = `${context.id}--button`;
+  const togglerId = `button--${context.id}`;
 
   let collapsible!: HTMLPostCollapsibleElement;
   let toggler!: HTMLButtonElement;

From acd1d8a4930f6bd19dfb287198c48128e398a4c1 Mon Sep 17 00:00:00 2001
From: imagoiq <12294151+imagoiq@users.noreply.github.com>
Date: Thu, 8 Feb 2024 16:40:00 +0100
Subject: [PATCH 10/13] Fix unused imports

---
 .../src/stories/components/alert/alert.snapshot.stories.ts     | 3 +--
 .../src/stories/components/badge/badge.snapshot.stories.ts     | 1 -
 .../forms/choice-card/choice-card.snapshot.stories.ts          | 3 +--
 3 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/documentation/src/stories/components/alert/alert.snapshot.stories.ts b/packages/documentation/src/stories/components/alert/alert.snapshot.stories.ts
index 52970d1111..3780c2a6bd 100644
--- a/packages/documentation/src/stories/components/alert/alert.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/alert/alert.snapshot.stories.ts
@@ -1,10 +1,9 @@
 import { Args, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
-import { spreadArgs, bombArgs } from '../../../utils';
+import { bombArgs, spreadArgs } from '../../../utils';
 import alertMeta from './standard-html/alert.stories';
 import { getAlertClasses } from './standard-html/getAlertClasses';
 import { BADGE } from '../../../../.storybook/constants';
-import { choiceCardMeta } from '../forms/choice-card/choice-card';
 
 const { id, ...metaWithoutId } = alertMeta;
 
diff --git a/packages/documentation/src/stories/components/badge/badge.snapshot.stories.ts b/packages/documentation/src/stories/components/badge/badge.snapshot.stories.ts
index b1a4ecd5c4..3a90dca504 100644
--- a/packages/documentation/src/stories/components/badge/badge.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/badge/badge.snapshot.stories.ts
@@ -2,7 +2,6 @@ import type { Args, StoryContext, StoryObj } from '@storybook/web-components';
 import meta from './badge.stories';
 import { html } from 'lit';
 import { bombArgs } from '../../../utils';
-import alertMeta from '../alert/standard-html/alert.stories';
 
 const { id, ...metaWithoutId } = meta;
 
diff --git a/packages/documentation/src/stories/components/forms/choice-card/choice-card.snapshot.stories.ts b/packages/documentation/src/stories/components/forms/choice-card/choice-card.snapshot.stories.ts
index f2f5de0df8..111f02b2a5 100644
--- a/packages/documentation/src/stories/components/forms/choice-card/choice-card.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/forms/choice-card/choice-card.snapshot.stories.ts
@@ -1,8 +1,7 @@
 import { bombArgs } from '../../../../utils';
-import { choiceCardMeta, choiceCardDefault } from './choice-card';
+import { choiceCardDefault, choiceCardMeta } from './choice-card';
 import { StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
-import meta from '../../accordion/accordion.stories';
 
 const { id, ...metaWithoutId } = choiceCardMeta;
 

From b48d2473d8117ea0293ff9daf2c5a4f385fab24e Mon Sep 17 00:00:00 2001
From: imagoiq <12294151+imagoiq@users.noreply.github.com>
Date: Wed, 14 Feb 2024 15:58:56 +0100
Subject: [PATCH 11/13] Fix toast e2e

---
 packages/documentation/cypress/e2e/toast.cy.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/documentation/cypress/e2e/toast.cy.ts b/packages/documentation/cypress/e2e/toast.cy.ts
index 9626b67d3c..3bb79364d8 100644
--- a/packages/documentation/cypress/e2e/toast.cy.ts
+++ b/packages/documentation/cypress/e2e/toast.cy.ts
@@ -1,7 +1,7 @@
 describe('toast', () => {
   describe('default', () => {
     beforeEach(() => {
-      cy.visit(`/iframe.html?id=components-toast--auto-close`);
+      cy.visit(`/iframe.html?id=825b65c9-7eaf-4e0a-9e20-5f5ed406726d-close`);
       cy.get('button.btn').as('triggerCreateToast');
     });
 

From 360a070e1d19ff2c3b918a6a0a3e4753a0ead9c3 Mon Sep 17 00:00:00 2001
From: imagoiq <12294151+imagoiq@users.noreply.github.com>
Date: Wed, 14 Feb 2024 16:06:22 +0100
Subject: [PATCH 12/13] Remove heading added with merge

---
 .../documentation/src/stories/utilities/heading/heading.docs.mdx  | 0
 .../src/stories/utilities/heading/heading.stories.ts              | 0
 2 files changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 packages/documentation/src/stories/utilities/heading/heading.docs.mdx
 delete mode 100644 packages/documentation/src/stories/utilities/heading/heading.stories.ts

diff --git a/packages/documentation/src/stories/utilities/heading/heading.docs.mdx b/packages/documentation/src/stories/utilities/heading/heading.docs.mdx
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/packages/documentation/src/stories/utilities/heading/heading.stories.ts b/packages/documentation/src/stories/utilities/heading/heading.stories.ts
deleted file mode 100644
index e69de29bb2..0000000000

From 5711c31e8955a5fafe08c1ab9b8105c964f94f7f Mon Sep 17 00:00:00 2001
From: imagoiq <12294151+imagoiq@users.noreply.github.com>
Date: Wed, 14 Feb 2024 16:24:44 +0100
Subject: [PATCH 13/13] Fix toast e2e path and timeout

---
 packages/documentation/cypress/e2e/toast.cy.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/documentation/cypress/e2e/toast.cy.ts b/packages/documentation/cypress/e2e/toast.cy.ts
index 3bb79364d8..5b25e74692 100644
--- a/packages/documentation/cypress/e2e/toast.cy.ts
+++ b/packages/documentation/cypress/e2e/toast.cy.ts
@@ -1,8 +1,8 @@
 describe('toast', () => {
   describe('default', () => {
     beforeEach(() => {
-      cy.visit(`/iframe.html?id=825b65c9-7eaf-4e0a-9e20-5f5ed406726d-close`);
-      cy.get('button.btn').as('triggerCreateToast');
+      cy.visit(`/iframe.html?id=825b65c9-7eaf-4e0a-9e20-5f5ed406726d--auto-close`);
+      cy.get('button.btn', { timeout: 30000 }).as('triggerCreateToast');
     });
 
     it('should hide on close button click', () => {