solid-design-system · martascorreia · Sep 10, 2026 · Sep 7, 2026 · Sep 8, 2026 · Sep 8, 2026
diff --git a/.changeset/cute-parks-cheat.md b/.changeset/cute-parks-cheat.md
@@ -0,0 +1,5 @@
+---
+'@solid-design-system/docs': patch
+---
+
+Adding a footer to templates with the utilized components and styles.
diff --git a/packages/components/src/components/optgroup/optgroup.ts b/packages/components/src/components/optgroup/optgroup.ts
@@ -10,7 +10,7 @@ import SolidElement from '../../internal/solid-element';
 import type SdOption from '../option/option';
 
 /**
- * @summary Used to group `sd-option`components within an `sd-combobox`.
+ * @summary Used to group `sd-option` components within an `sd-combobox`.
  * @documentation https://solid.union-investment.com/[storybook-link]/components-sd-optgroup
  * @status experimental
  * @since 3.23.0

diff --git a/packages/docs/.env.example b/packages/docs/.env.example
@@ -0,0 +1 @@
+STORYBOOK_THEME_PASSWORD=123
diff --git a/packages/docs/.storybook/preview.css b/packages/docs/.storybook/preview.css
@@ -39,6 +39,36 @@ div[data-radix-scroll-area-viewport]:focus-visible {
 }
 
 /* Right-side headline anchors */
+.sbdocs.sbdocs-wrapper > aside > nav:has(.toc-wrapper) {
+  @apply sticky top-0 bottom-auto h-screen;
+}
+
+.sd-docs-footer {
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: center;
+  gap: 3rem;
+  padding: 0 40px;
+}
+
+.sd-docs-footer::before {
+  content: '';
+  flex: none;
+  width: 10rem;
+}
+
+@media (max-width: 768px) {
+  .sd-docs-footer::before {
+    display: none;
+  }
+}
+
+.sd-docs-footer-content {
+  width: 100%;
+  min-width: 0;
+  max-width: 1000px;
+}
+
 .sbdocs.sbdocs-wrapper .toc-wrapper > .toc-list {
   @apply border-l border-l-neutral-400;
 }

diff --git a/packages/docs/.storybook/preview.js b/packages/docs/.storybook/preview.js
@@ -12,6 +12,8 @@ import docsCodepenEnhancer from '../scripts/storybook/docs-codepen-enhancer.js';
 import { initDeprecatedBadgeEnhancer } from '../scripts/storybook/deprecated-badge-enhancer.js';
 import { themes, allModes, DEFAULT_THEME } from './modes.js';
 import { hasThemeAccess, isProtectedTheme } from './theme-protection.ts';
+import { StoryPage } from '../src/StoryPage.jsx';
+import { StoryPageContainer } from '../src/StoryPageContainer.jsx';
 
 const theme = withThemeByClassName({
   defaultTheme: DEFAULT_THEME,
@@ -103,6 +105,8 @@ export const preview = {
     docs: {
       story: { inline: true },
       toc: true,
+      page: StoryPage,
+      container: StoryPageContainer,
       // `@summary` JSDoc (already the single source of truth for the custom "Overview" page and
       // the mcp metadata) is used for the autodocs description too, instead of a separate hand-written
       // JSDoc comment above each story file's default export.

diff --git a/packages/docs/CONTRIBUTING.md b/packages/docs/CONTRIBUTING.md
@@ -16,6 +16,17 @@ Each component/utility/style/template contains both [docs](https://storybook.js.
 
 ![image](https://github.com/solid-design-system/solid/assets/39494579/4121e031-b5a9-4b25-9784-310101945c4a)
 
+## Local Storybook setup
+
+The docs package can include protected themes such as `BBBank`,`SP`, and `VB`. These themes require a password in local Storybook runs.
+
+To enable them locally:
+
+1. Copy `packages/docs/.env.example` to `packages/docs/.env`.
+2. Set `STORYBOOK_THEME_PASSWORD` with a local password.
+
+This password is injected into Storybook and used to unlock the protected theme previews.
+
 ## Guidelines
 
 ### Component Documentation

diff --git a/packages/docs/src/Footer.jsx b/packages/docs/src/Footer.jsx
@@ -0,0 +1,42 @@
+import React from 'react';
+
+const toTitle = tag =>
+  tag
+    .replace(/^sd-/, '')
+    .split('-')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ');
+
+export const Footer = ({ context }) => {
+  let preparedMeta;
+  try {
+    preparedMeta = context?.resolveOf('meta', ['meta'])?.preparedMeta;
+  } catch {
+    return null;
+  }
+  const relatedLinks = preparedMeta?.parameters?.relatedLinks ?? [];
+  if (!relatedLinks.length) return null;
+
+  const items = relatedLinks.map(link => {
+    const [type, tag] = link.split('/');
+
+    return { tag, href: `./?path=/docs/${type}-${tag}--docs` };
+  });
+
+  return (
+    <div className="sb-unstyled bg-neutral-100 py-16">
+      <div className="sd-docs-footer">
+        <div className="sd-docs-footer-content">
+          <h4 className="sd-headline sd-headline--size-lg text-black mb-4">Utilized Components and Styles</h4>
+          <ul className="m-0 flex list-none flex-col gap-4 p-0 pt-4">
+            {items.map(item => (
+              <li key={item.href}>
+                <sd-link href={item.href}>{toTitle(item.tag)}</sd-link>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/docs/src/StoryPage.jsx b/packages/docs/src/StoryPage.jsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Title, Subtitle, Description, Primary, Controls, Stories, useOf } from '@storybook/addon-docs/blocks';
+
+export const StoryPage = () => {
+  const resolvedOf = useOf('meta', ['meta']);
+  const isSingleStory = Object.keys(resolvedOf.csfFile.stories).length === 1;
+
+  return (
+    <>
+      <Title />
+      <Subtitle />
+      <Description />
+      {isSingleStory ? <Description of="story" /> : null}
+      <Primary />
+      <Controls />
+      {isSingleStory ? null : <Stories />}
+    </>
+  );
+};
diff --git a/packages/docs/src/StoryPageContainer.jsx b/packages/docs/src/StoryPageContainer.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { DocsContainer } from '@storybook/addon-docs/blocks';
+import { Footer } from './Footer.jsx';
+
+export const StoryPageContainer = ({ context, children, ...props }) => (
+  <>
+    <DocsContainer context={context} {...props}>
+      {children}
+    </DocsContainer>
+    <Footer context={context} />
+  </>
+);
diff --git a/packages/docs/src/stories/components/file-selector.mdx b/packages/docs/src/stories/components/file-selector.mdx
@@ -24,7 +24,7 @@ export const content = `
 
 #### Related Templates
 
-[sd-file-selector](./?path=/docs/templates-file-selector--docs)
+[File Selector](./?path=/docs/templates-file-selector--docs)
 
 ### Common Use Cases
 

diff --git a/packages/docs/src/stories/components/radio.mdx b/packages/docs/src/stories/components/radio.mdx
@@ -20,7 +20,7 @@ Radios are always used as part of a group. See [sd-radio-group](./?path=/docs/co
 
 <DocumentationLinks links=${JSON.stringify(links, null, 2)} />
 
-#### Related Templates
+#### Related Components
 
 [sd-radio-group](./?path=/docs/components-sd-radio-group--docs)
 

diff --git a/packages/docs/src/stories/templates/accordion-group.stories.ts b/packages/docs/src/stories/templates/accordion-group.stories.ts
@@ -9,6 +9,7 @@ export default {
   tags: ['!dev', 'autodocs'],
   title: 'Templates/Accordion Group',
   parameters: {
+    relatedLinks: ['components/sd-accordion', 'components/sd-accordion-group'],
     chromatic: { disableSnapshot: true },
     design: {
       type: 'figma',

diff --git a/packages/docs/src/stories/templates/audio.stories.ts b/packages/docs/src/stories/templates/audio.stories.ts
@@ -5,6 +5,7 @@ export default {
   tags: ['!dev', 'autodocs'],
   title: 'Templates/Audio',
   parameters: {
+    relatedLinks: ['components/sd-audio', 'components/sd-teaser'],
     chromatic: { disableSnapshot: true },
     design: {
       type: 'figma',

diff --git a/packages/docs/src/stories/templates/autocomplete.stories.ts b/packages/docs/src/stories/templates/autocomplete.stories.ts
@@ -80,6 +80,7 @@ export default {
   tags: ['!dev', 'autodocs'],
   title: 'Templates/Autocomplete',
   parameters: {
+    relatedLinks: ['components/sd-input', 'components/sd-option'],
     docs: { story: { inline: false, height: '400px' } },
     design: {
       type: 'figma',

diff --git a/packages/docs/src/stories/templates/badge.stories.ts b/packages/docs/src/stories/templates/badge.stories.ts
@@ -6,6 +6,12 @@ export default {
   tags: ['!dev', 'autodocs'],
   title: 'Templates/Badge',
   parameters: {
+    relatedLinks: [
+      'components/sd-badge',
+      'styles/sd-status-badge',
+      'components/sd-button',
+      'components/sd-navigation-item'
+    ],
     chromatic: { disableSnapshot: true },
     design: {
       type: 'figma',

diff --git a/packages/docs/src/stories/templates/bottom-navigation.stories.ts b/packages/docs/src/stories/templates/bottom-navigation.stories.ts
@@ -9,6 +9,7 @@ export default {
   tags: ['!dev', 'autodocs'],
   title: 'Templates/Bottom Bar Navigation',
   parameters: {
+    relatedLinks: ['components/sd-navigation-item'],
     chromatic: { disableSnapshot: true }
   }
 };

diff --git a/packages/docs/src/stories/templates/brandshape.stories.ts b/packages/docs/src/stories/templates/brandshape.stories.ts
@@ -5,6 +5,7 @@ export default {
   tags: ['!dev', 'autodocs'],
   title: 'Templates/Brandshape',
   parameters: {
+    relatedLinks: ['components/sd-brandshape', 'styles/sd-copyright'],
     design: {
       type: 'figma',
       url: 'https://www.figma.com/design/YDktJcseQIIQbsuCpoKS4V/Component-Docs?node-id=3121-11350&t=JCsisVFNkWSlhSSN-4'

diff --git a/packages/docs/src/stories/templates/breadcrumb.stories.ts b/packages/docs/src/stories/templates/breadcrumb.stories.ts
@@ -6,6 +6,12 @@ export default {
   tags: ['!dev', 'autodocs'],
   title: 'Templates/Breadcrumb',
   parameters: {
+    relatedLinks: [
+      'components/sd-breadcrumb',
+      'components/sd-breadcrumb-item',
+      'components/sd-header',
+      'components/sd-navigation-item'
+    ],
     chromatic: { disableSnapshot: true },
     design: {
       type: 'figma',

diff --git a/packages/docs/src/stories/templates/button.stories.ts b/packages/docs/src/stories/templates/button.stories.ts
@@ -5,6 +5,7 @@ export default {
   tags: ['!dev', 'autodocs'],
   title: 'Templates/Button',
   parameters: {
+    relatedLinks: ['components/sd-button'],
     chromatic: { disableSnapshot: true },
     design: {
       type: 'figma',

diff --git a/packages/docs/src/stories/templates/carousel.stories.ts b/packages/docs/src/stories/templates/carousel.stories.ts
@@ -5,6 +5,7 @@ export default {
   tags: ['!dev', 'autodocs'],
   title: 'Templates/Carousel',
   parameters: {
+    relatedLinks: ['components/sd-carousel', 'components/sd-carousel-item'],
     chromatic: { disableSnapshot: true },
     design: {
       type: 'figma',

diff --git a/packages/docs/src/stories/templates/checkbox-group.stories.ts b/packages/docs/src/stories/templates/checkbox-group.stories.ts
@@ -5,6 +5,7 @@ export default {
   tags: ['!dev', 'autodocs'],
   title: 'Templates/Checkbox Group',
   parameters: {
+    relatedLinks: ['components/sd-checkbox-group', 'components/sd-checkbox'],
     design: {
       type: 'figma',
       url: 'https://www.figma.com/design/YDktJcseQIIQbsuCpoKS4V/Component-Docs?node-id=2642-24726&t=JCsisVFNkWSlhSSN-4'

diff --git a/packages/docs/src/stories/templates/chip.stories.ts b/packages/docs/src/stories/templates/chip.stories.ts
@@ -5,6 +5,7 @@ export default {
   tags: ['!dev', 'autodocs'],
   title: 'Templates/Chip',
   parameters: {
+    relatedLinks: ['styles/sd-chip'],
     chromatic: { disableSnapshot: true },
     design: {
       type: 'figma',

diff --git a/packages/docs/src/stories/templates/combobox.stories.ts b/packages/docs/src/stories/templates/combobox.stories.ts
@@ -21,6 +21,7 @@ export default {
   tags: ['!dev', 'autodocs'],
   title: 'Templates/Combobox',
   parameters: {
+    relatedLinks: ['components/sd-combobox', 'components/sd-optgroup'],
     chromatic: { disableSnapshot: true },
     design: {
       type: 'figma',

diff --git a/packages/docs/src/stories/templates/datepicker.stories.ts b/packages/docs/src/stories/templates/datepicker.stories.ts
@@ -5,6 +5,7 @@ export default {
   tags: ['!dev', 'autodocs'],
   title: 'Templates/Datepicker',
   parameters: {
+    relatedLinks: ['components/sd-datepicker'],
     chromatic: { disableSnapshot: true },
     design: {
       type: 'figma',

diff --git a/packages/docs/src/stories/templates/dialog.stories.ts b/packages/docs/src/stories/templates/dialog.stories.ts
@@ -5,6 +5,7 @@ export default {
   tags: ['!dev', 'autodocs'],
   title: 'Templates/Dialog',
   parameters: {
+    relatedLinks: ['components/sd-dialog'],
     chromatic: { disableSnapshot: true },
     design: {
       type: 'figma',

diff --git a/packages/docs/src/stories/templates/drawer.stories.ts b/packages/docs/src/stories/templates/drawer.stories.ts
@@ -5,6 +5,7 @@ export default {
   tags: ['!dev', 'autodocs'],
   title: 'Templates/Drawer',
   parameters: {
+    relatedLinks: ['components/sd-drawer'],
     design: {
       type: 'figma',
       url: 'https://www.figma.com/design/YDktJcseQIIQbsuCpoKS4V/Component-Docs?node-id=3000-10344&t=JCsisVFNkWSlhSSN-4'

diff --git a/packages/docs/src/stories/templates/dropdown.stories.ts b/packages/docs/src/stories/templates/dropdown.stories.ts
@@ -5,6 +5,7 @@ export default {
   tags: ['!dev', 'autodocs'],
   title: 'Templates/Dropdown',
   parameters: {
+    relatedLinks: ['components/sd-dropdown', 'components/sd-navigation-item', 'styles/sd-hidden-links'],
     design: {
       type: 'figma',
       url: 'https://www.figma.com/design/YDktJcseQIIQbsuCpoKS4V/Component-Docs?node-id=3000-9863&t=JCsisVFNkWSlhSSN-4'

diff --git a/packages/docs/src/stories/templates/expandable.stories.ts b/packages/docs/src/stories/templates/expandable.stories.ts
@@ -5,6 +5,7 @@ export default {
   tags: ['!dev', 'autodocs'],
   title: 'Templates/Expandable',
   parameters: {
+    relatedLinks: ['components/sd-expandable'],
     chromatic: { disableSnapshot: true },
     design: {
       type: 'figma',

diff --git a/packages/docs/src/stories/templates/file-selector.stories.ts b/packages/docs/src/stories/templates/file-selector.stories.ts
@@ -5,6 +5,7 @@ export default {
   tags: ['!dev', 'autodocs'],
   title: 'Templates/File Selector',
   parameters: {
+    relatedLinks: ['components/sd-file-selector'],
     chromatic: { disableSnapshot: true },
     design: {
       type: 'figma',

diff --git a/packages/docs/src/stories/templates/flipcard.stories.ts b/packages/docs/src/stories/templates/flipcard.stories.ts
@@ -9,6 +9,7 @@ export default {
   tags: ['!dev', 'autodocs'],
   title: 'Templates/Flipcard',
   parameters: {
+    relatedLinks: ['components/sd-flipcard'],
     chromatic: { disableSnapshot: true },
     design: {
       type: 'figma',

diff --git a/packages/docs/src/stories/templates/footnotes.stories.ts b/packages/docs/src/stories/templates/footnotes.stories.ts
@@ -5,6 +5,7 @@ export default {
   tags: ['!dev', 'autodocs'],
   title: 'Templates/Footnotes',
   parameters: {
+    relatedLinks: ['styles/sd-footnotes'],
     a11y: {
       config: {
         rules: [

diff --git a/packages/docs/src/stories/templates/forms.stories.ts b/packages/docs/src/stories/templates/forms.stories.ts
@@ -5,6 +5,7 @@ export default {
   tags: ['!dev', 'autodocs'],
   title: 'Templates/Forms',
   parameters: {
+    relatedLinks: ['components/sd-icon'],
     chromatic: { disableSnapshot: true },
     design: {
       type: 'figma',

diff --git a/packages/docs/src/stories/templates/header-navigation.stories.ts b/packages/docs/src/stories/templates/header-navigation.stories.ts
@@ -6,6 +6,7 @@ export default {
   tags: ['!dev', 'autodocs'],
   title: 'Templates/Header Navigation',
   parameters: {
+    relatedLinks: ['components/sd-header', 'components/sd-drawer', 'components/sd-dropdown'],
     chromatic: { disableSnapshot: true },
     design: {
       type: 'figma',

diff --git a/packages/docs/src/stories/templates/headline.stories.ts b/packages/docs/src/stories/templates/headline.stories.ts
@@ -5,6 +5,7 @@ export default {
   tags: ['!dev', 'autodocs'],
   title: 'Templates/Headline',
   parameters: {
+    relatedLinks: ['styles/sd-headline'],
     chromatic: { disableSnapshot: true },
     design: {
       type: 'figma',

diff --git a/packages/docs/src/stories/templates/input.stories.ts b/packages/docs/src/stories/templates/input.stories.ts
@@ -5,6 +5,7 @@ export default {
   tags: ['!dev', 'autodocs'],
   title: 'Templates/Input',
   parameters: {
+    relatedLinks: ['components/sd-input'],
     chromatic: { disableSnapshot: true },
     design: {
       type: 'figma',

diff --git a/packages/docs/src/stories/templates/interactive.stories.ts b/packages/docs/src/stories/templates/interactive.stories.ts
@@ -5,6 +5,7 @@ export default {
   tags: ['!dev', 'autodocs'],
   title: 'Templates/Interactive',
   parameters: {
+    relatedLinks: ['styles/sd-interactive'],
     chromatic: { disableSnapshot: true },
     design: {
       type: 'figma',