@solid-design-system/mcp 0.0.1

package/metadata/packages/templates/brandshape.md

@@ -0,0 +1,81 @@
+---
+name: brandshape
+title: Brandshape
+components:
+  - sd-brandshape
+  - sd-button
+  - sd-copyright
+  - sd-copyright--orientation-vertical
+  - sd-headline
+  - sd-headline--3xl
+  - sd-paragraph
+version: 1.0.0
+---
+
+## Template: Brandshape
+
+```html
+<sd-brandshape variant="border-primary">
+  <h4 class="sd-headline sd-headline--3xl mb-4">Exclusion criteria: Ensure minimum standards, avoid controversies</h4>
+  <p class="sd-paragraph">
+    In this approach, single or multiple criteria are defined that exclude investment in certain companies, industries
+    or countries. The individual criteria can be determined individually within the SIRIS platform, such as the
+    exclusion of companies that generate more than 5 per cent of their turnover from gambling. The exclusion criteria
+    are additionally reviewed in a two-stage research process.
+  </p>
+</sd-brandshape>
+```
+
+## Template: Brandshape with transparent variant
+
+```html
+<style>
+  .brandshape-wrapper {
+    background: url('./placeholders/images/skyline.jpg');
+    background-size: cover;
+    background-position: center;
+    padding: 3rem;
+  }
+</style>
+<div class="brandshape-wrapper">
+  <sd-brandshape variant="primary|80">
+    <h4 class="sd-headline sd-headline--3xl mb-4 text-white">
+      Exclusion criteria: Ensure minimum standards, avoid controversies
+    </h4>
+    <p class="sd-paragraph text-white">
+      In this approach, single or multiple criteria are defined that exclude investment in certain companies, industries
+      or countries. The individual criteria can be determined individually within the SIRIS platform, such as the
+      exclusion of companies that generate more than 5 per cent of their turnover from gambling. The exclusion criteria
+      are additionally reviewed in a two-stage research process.
+    </p>
+    <sd-button variant="cta" class="mt-4">Find out more</sd-button>
+  </sd-brandshape>
+</div>
+```
+
+## Template: Brandshape with Copyright
+
+```html
+<style>
+  sd-brandshape::part(content) {
+    height: 200px;
+  }
+
+  .sd-copyright::after {
+    bottom: 60px;
+    padding-right: 8px;
+  }
+</style>
+<sd-brandshape
+  variant="image"
+  class="sd-copyright sd-copyright--orientation-vertical"
+  style="--copyright: '© Union Investment 2025';"
+>
+  <img
+    slot="image"
+    src="./placeholders/images/skyline.jpg"
+    alt="A vibrant city skyline at dusk, symbolizing economic growth and investment opportunities in urban hubs"
+    class="object-bottom"
+  />
+</sd-brandshape>
+```

package/metadata/packages/templates/breadcrumb.md

@@ -0,0 +1,361 @@
+---
+name: breadcrumb
+title: Breadcrumb
+components:
+  - sd-breacrumb
+  - sd-breadcrumb
+  - sd-breadcrumb-item
+  - sd-button
+  - sd-drawer
+  - sd-dropdown
+  - sd-header
+  - sd-header-padding
+  - sd-headline
+  - sd-headline--4xl
+  - sd-headline--size-lg
+  - sd-hide
+  - sd-icon
+  - sd-interactive
+  - sd-leadtext
+  - sd-navigation-item
+  - sd-show
+version: 1.0.0
+---
+
+## Template: Breadcrumb with Header Navigation
+
+```html
+<style>
+  #anchor--templates-breadcrumb--breadcrumb-with-header-navigation .innerZoomElementWrapper {
+    height: 900px;
+  }
+</style>
+
+<sd-header id="horizontal" fixed>
+  <div class="flex justify-between items-center my-0 lg:my-3">
+    <a class="inline-flex sd-interactive" href="#">
+      <img class="h-8 md:h-12 lg:h-14 w-auto object-contain" src="${currentTheme.logoLg}" alt="${currentTheme.alt}" />
+    </a>
+    <sd-navigation-item id="open-menu-navigation" class="flex lg:hidden">
+      <sd-icon name="system/menu" label="Open navigation" class="text-xl"></sd-icon>
+    </sd-navigation-item>
+  </div>
+
+  <div class="navigation-nav--horizontal hidden lg:flex relative justify-between">
+    <nav aria-label="Main">
+      <ul class="flex -ms-4">
+        <li>
+          <sd-dropdown no-flip>
+            <sd-navigation-item slot="trigger" class="font-bold"> Competencies </sd-navigation-item>
+
+            <ul class="grid grid-cols-4 justify-between gap-6 px-6 py-8">
+              <li>
+                <div class="px-4 py-3">
+                  <span class="font-bold">Sustainability</span>
+                </div>
+
+                <ul>
+                  <li>
+                    <sd-navigation-item vertical href="javascript:void(0)"> Engagement </sd-navigation-item>
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </sd-dropdown>
+        </li>
+        <li>
+          <sd-dropdown no-flip>
+            <sd-navigation-item slot="trigger" class="font-bold"> About Us </sd-navigation-item>
+
+            <ul class="grid grid-cols-4 justify-between gap-6 px-6 py-8">
+              <li>
+                <sd-navigation-item vertical href="javascript:void(0)">
+                  <span class="font-bold">About Union Investment</span>
+                </sd-navigation-item>
+              </li>
+            </ul>
+          </sd-dropdown>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</sd-header>
+
+<sd-drawer
+  id="navigation-drawer-horizontal"
+  placement="end"
+  label="Navigation drawer menu"
+  class="group relative block"
+>
+  <sd-button slot="header" variant="tertiary" class="navigation-nav-horizontal--close">
+    <sd-icon name="system/arrow-left" label="Close submenu"></sd-icon>
+  </sd-button>
+  <div
+    class="navigation-nav flex flex-col -mx-4 h-full pt-1 transition-transform duration-medium data-[submenu-open]:-translate-x-full"
+  >
+    <nav aria-label="Main" class="flex-1 flex flex-col justify-between">
+      <ul class="flex-1">
+        <li>
+          <sd-navigation-item vertical chevron divider href="javascript:void(0)" current>
+            Competencies
+          </sd-navigation-item>
+          <div data-submenu class="absolute top-0 right-0 w-full translate-x-full">
+            <div>
+              <p class="sd-headline sd-headline--size-lg mx-4 py-3 !text-primary">Competencies</p>
+              <ul>
+                <li>
+                  <sd-navigation-item vertical>
+                    <span> Sustainability </span>
+                    <sd-navigation-item slot="children" vertical indented href="javascript:void(0)">
+                      Engagement
+                    </sd-navigation-item>
+                  </sd-navigation-item>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </li>
+        <li>
+          <sd-navigation-item vertical chevron divider> About Us </sd-navigation-item>
+          <div data-submenu class="absolute top-0 right-0 w-full translate-x-full">
+            <div>
+              <p class="sd-headline sd-headline--size-lg mx-4 py-3 !text-primary">Investing</p>
+              <ul>
+                <li>
+                  <sd-navigation-item vertical divider href="javascript:void(0)">
+                    <span> About Union Investment </span>
+                  </sd-navigation-item>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </nav>
+    <nav aria-label="Service" slot="footer" class="bg-neutral-100">
+      <ul>
+        <li>
+          <sd-navigation-item vertical href="javascript:void(0)" class="flex align-center">
+            <sd-icon name="system/user" class="text-xl mr-2"></sd-icon>
+            Portfolio
+          </sd-navigation-item>
+        </li>
+        <li>
+          <sd-navigation-item vertical divider href="javascript:void(0)" class="flex align-center">
+            <sd-icon name="system/lock-locked" class="text-xl mr-2"></sd-icon>
+            Application
+          </sd-navigation-item>
+        </li>
+        <li>
+          <sd-navigation-item vertical divider href="javascript:void(0)" class="flex align-center">
+            <sd-icon name="system/website" class="text-xl mr-2"></sd-icon>
+            Our further appearances
+          </sd-navigation-item>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</sd-drawer>
+
+<main class="flex flex-col gap-6 px-8">
+  <div id="breadcrumb-competencies">
+    <sd-breadcrumb class="mt-8" label="Breadcrumb navigation">
+      <sd-breadcrumb-item
+        role="listitem"
+        href="https://solid-design-system.fe.union-investment.de/docs/?path=/docs/docs-general-introduction--docs"
+      >
+        Competencies
+      </sd-breadcrumb-item>
+      <sd-breadcrumb-item
+        role="listitem"
+        href="https://solid-design-system.fe.union-investment.de/docs/?path=/docs/docs-general-introduction--docs"
+      >
+        Sustainability
+      </sd-breadcrumb-item>
+      <sd-breadcrumb-item role="listitem" href="" current=""> Engagement </sd-breadcrumb-item>
+    </sd-breadcrumb>
+
+    <div>
+      <h4 class="sd-headline sd-headline--4xl mb-8 mt-8">Engagement</h4>
+      <p class="sd-leadtext">
+        As an internationally active shareholder, Union Investment attended a total of 1,756 annual general meetings in
+        33 countries last year.
+      </p>
+    </div>
+  </div>
+  <div id="breadcrumb-about-us">
+    <sd-breadcrumb class="mt-8" label="Breadcrumb navigation">
+      <sd-breadcrumb-item
+        role="listitem"
+        href="https://solid-design-system.fe.union-investment.de/docs/?path=/docs/docs-general-introduction--docs"
+      >
+        About Us
+      </sd-breadcrumb-item>
+      <sd-breadcrumb-item role="listitem" href="" current=""> About Union Investment </sd-breadcrumb-item>
+    </sd-breadcrumb>
+
+    <div>
+      <h1 class="sd-headline mt-8 mb-8">Union Investment – The active asset manager for institutional investors</h1>
+      <p class="sd-leadtext mb-16">
+        We are the active German asset manager for tailor-made investment solutions in almost all asset classes and
+        regions. Our commitment to transparency and deep understanding of our clients' specific needs have always
+        distinguished us as forward-looking, collaborative and beneficial investment experts.
+      </p>
+    </div>
+  </div>
+</main>
+
+<style>
+  sd-header#horizontal {
+    --sd-header-padding: 8px 16px;
+  }
+
+  @media (min-width: 376px) {
+    sd-header#horizontal {
+      --sd-header-padding: 24px;
+    }
+  }
+
+  @media (min-width: 1025px) {
+    sd-header#horizontal {
+      --sd-header-padding: 24px 32px 0 32px;
+    }
+  }
+
+  @media (min-width: 1440px) {
+    sd-header#horizontal {
+      --sd-header-padding: 24px 48px 0 48px;
+    }
+  }
+
+  [data-submenu][inert] {
+    display: none;
+  }
+
+  sd-navigation-item:has([slot='children']):has(sd-navigation-item[current])::part(content),
+  sd-navigation-item:has(+ [data-submenu] sd-navigation-item[current])::part(content) {
+    font-weight: bold;
+  }
+
+  sd-dropdown:has(sd-navigation-item[slot='trigger'])::part(base__popup) {
+    left: -16px;
+    width: calc(100% + 16px);
+  }
+
+  sd-dropdown[open] sd-navigation-item[slot='trigger'] {
+    background: rgb(246 246 246);
+  }
+
+  sd-drawer::part(panel) {
+    overflow: hidden;
+  }
+
+  sd-navigation-item + div[data-submenu]:not([data-active-submenu]) {
+    pointer-events: none;
+    opacity: 0;
+  }
+</style>
+
+<!-- Mobile drawer logic -->
+<script type="module">
+  const drawer = document.getElementById('navigation-drawer-horizontal');
+  const drawerTrigger = document.getElementById('open-menu-navigation');
+  const innerTrigger = drawerTrigger.shadowRoot.querySelector('button');
+
+  innerTrigger.setAttribute('aria-controls', 'navigation-drawer-horizontal');
+  innerTrigger.setAttribute('aria-expanded', 'false');
+  drawerTrigger.addEventListener('click', () => drawer.show());
+  drawer.addEventListener('sd-hide', () => innerTrigger.setAttribute('aria-expanded', 'false'));
+  drawer.addEventListener('sd-show', () => innerTrigger.setAttribute('aria-expanded', 'true'));
+</script>
+
+<!--
+  The navigation-menu.js script can be found here:
+  https://github.com/solid-design-system/solid/blob/main/packages/docs/.storybook/assets/scripts/navigation-menu.js
+-->
+<script src="./scripts/navigation-menu.js"></script>
+<script type="module">
+  const getNavigationItemTitle = item =>
+    item.shadowRoot
+      .querySelector('[part="content"]')
+      .assignedNodes({ flatten: true })
+      .reduce((acc, node) => {
+        if (node.nodeType === Node.ELEMENT_NODE) {
+          return acc + node.innerText;
+        } else if (node.nodeType === Node.TEXT_NODE) {
+          return acc + node.textContent;
+        }
+        return acc;
+      }, '');
+
+  document.querySelectorAll('.navigation-nav--horizontal').forEach(container => {
+    const megamenu = new NavigationMenu(container, NavigationMenuHorizontalItem, {
+      currentOnTrigger: true
+    });
+    megamenu.focusController = new HorizontalFocusController(megamenu);
+  });
+
+  document.querySelectorAll('.navigation-nav').forEach(container => {
+    const megamenu = new NavigationMenu(container, NavigationMenuVerticalItem, {
+      backButton: document
+        .getElementById('navigation-drawer-horizontal')
+        .querySelector('.navigation-nav-horizontal--close')
+    });
+    megamenu.focusController = new VerticalFocusController(megamenu);
+
+    const drawer = container.closest('sd-drawer');
+    if (drawer) {
+      drawer.addEventListener('sd-hide', e => {
+        if (e.target !== drawer) return;
+        megamenu.reset();
+      });
+    }
+  });
+</script>
+<script type="module">
+  const breadcrumbCompetencies = document.getElementById('breadcrumb-competencies');
+  const breadcrumbAboutUs = document.getElementById('breadcrumb-about-us');
+
+  const showBreadcrumb = type => {
+    breadcrumbCompetencies.style.display = type === 'competencies' ? 'block' : 'none';
+    breadcrumbAboutUs.style.display = type === 'about-us' ? 'block' : 'none';
+
+    const headerTriggers = Array.from(document.querySelectorAll('sd-navigation-item[slot="trigger"]'));
+    headerTriggers.forEach(item => item.removeAttribute('current'));
+    const target = headerTriggers.find(item =>
+      item.textContent.trim().includes(type === 'competencies' ? 'Competencies' : 'About Us')
+    );
+
+    if (target) {
+      target.setAttribute('current', '');
+    }
+  };
+
+  // Desktop triggers
+  document.querySelectorAll('sd-navigation-item[slot="trigger"]').forEach(item => {
+    const title = item.shadowRoot.querySelector('[part="content"]').innerText.trim();
+    item.addEventListener('click', () => {
+      if (title.includes('Competencies')) {
+        showBreadcrumb('competencies');
+      } else if (title.includes('About Us')) {
+        showBreadcrumb('about-us');
+      }
+    });
+  });
+
+  // Mobile drawer triggers
+  document.querySelectorAll('sd-navigation-item[vertical]').forEach(item => {
+    item.addEventListener('click', () => {
+      const text = item.textContent.trim();
+      if (text.includes('Engagement') || text.includes('Sustainability')) {
+        showBreadcrumb('competencies');
+      } else if (text.includes('Union Investment')) {
+        showBreadcrumb('about-us');
+      }
+    });
+  });
+
+  // Initialize default
+  showBreadcrumb('competencies');
+</script>
+```

package/metadata/packages/templates/button.md

@@ -0,0 +1,107 @@
+---
+name: button
+title: Button
+components:
+  - sd-button
+  - sd-icon
+  - sd-textarea
+  - sd-tooltip
+version: 1.0.0
+---
+
+## Template: Button Group Horizontal
+
+```html
+<div class="flex flex-col gap-8">
+  <div class="flex flex-row gap-4 py-6">
+    <sd-button variant="secondary">Maybe later</sd-button>
+    <sd-button variant="primary">Cancel subscription</sd-button>
+  </div>
+  <div class="flex flex-row gap-2 py-6">
+    <sd-button variant="secondary"> <sd-icon name="system/log-out" slot="icon-left"></sd-icon>Exit portal </sd-button>
+    <sd-button variant="secondary"> <sd-icon name="system/download" slot="icon-left"></sd-icon>Download PDF </sd-button>
+    <sd-button variant="primary">Accept terms of use</sd-button>
+  </div>
+  <div class="flex flex-row gap-2 py-6">
+    <sd-button variant="secondary" size="sm">
+      <sd-icon name="system/download" slot="icon-left"></sd-icon>PIF
+    </sd-button>
+    <sd-button variant="secondary" size="sm">
+      <sd-icon name="system/eye-open" slot="icon-left"></sd-icon>Add to watchlist
+    </sd-button>
+    <sd-button variant="secondary" size="sm">
+      <sd-icon name="system/table" slot="icon-left"></sd-icon>Compare funds
+    </sd-button>
+    <sd-button variant="tertiary" size="sm">
+      <sd-icon name="system/more-functions" slot="icon-left"></sd-icon>More actions
+    </sd-button>
+  </div>
+</div>
+```
+
+## Template: Button Group Vertical displayed in two lines
+
+```html
+<div class="flex flex-col gap-4 w-[190px]">
+  <sd-button variant="primary" size="sm">Open your first investment account</sd-button>
+  <sd-button variant="secondary" size="sm"> Get personalized advice from our experts </sd-button>
+</div>
+```
+
+## Template: Button Group Vertical Full Width
+
+```html
+<div class="flex flex-col gap-4 w-[375px]">
+  <sd-button variant="primary">Start investment</sd-button>
+  <sd-button variant="secondary">
+    <sd-icon name="system/download" slot="icon-left"></sd-icon> Download report
+  </sd-button>
+  <sd-button variant="tertiary">
+    <sd-icon name="system/eye-open" slot="icon-left"></sd-icon> Add to watchlist
+  </sd-button>
+</div>
+```
+
+## Template: Inclusive Disabled Button with Tooltip
+
+```html
+<div class="flex flex-col gap-4 w-[500px]">
+  <p class="text-neutral-700 text-sm">Fields marked with * are required.</p>
+  <sd-textarea
+    id="message-textarea"
+    label="Your message *"
+    placeholder="What can we help you with today?"
+  ></sd-textarea>
+  <div class="flex justify-end">
+    <sd-tooltip
+      id="tooltip"
+      content="Enter a message to enable the button."
+      trigger="hover focus"
+      size="sm"
+      placement="top"
+      style="--max-width:136px"
+    >
+      <sd-button id="disabled-button" variant="primary" visually-disabled>Send</sd-button>
+    </sd-tooltip>
+  </div>
+</div>
+
+<script type="module">
+  await Promise.all([customElements.whenDefined('sd-textarea'), customElements.whenDefined('sd-button')]);
+
+  const button = document.getElementById('disabled-button');
+  const textarea = document.getElementById('message-textarea');
+  const tooltip = document.getElementById('tooltip');
+
+  const updateButtonState = () => {
+    const hasContent = textarea.value.trim().length > 0;
+
+    button.toggleAttribute('visually-disabled', !hasContent);
+    tooltip.toggleAttribute('disabled', hasContent);
+  };
+
+  updateButtonState();
+
+  textarea.addEventListener('input', updateButtonState);
+</script>
+```

package/metadata/packages/templates/carousel.md

@@ -0,0 +1,64 @@
+---
+name: carousel
+title: Carousel
+components:
+  - sd-carousel
+  - sd-carousel-item
+version: 1.0.0
+---
+
+## Template: Carousel with Images
+
+```html
+<sd-carousel role="region" aria-label="Carousel with images" fade>
+  <sd-carousel-item>
+    <img
+      src="./placeholders/images/architecture.jpg"
+      alt="Modern, waved architecture with blue sky in background"
+      class="aspect-video"
+    />
+  </sd-carousel-item>
+  <sd-carousel-item>
+    <img
+      src="./placeholders/images/skyline.jpg"
+      alt="A vibrant city skyline at dusk, symbolizing economic growth and investment opportunities in urban hubs."
+      class="aspect-video"
+    />
+  </sd-carousel-item>
+  <sd-carousel-item>
+    <img
+      src="./placeholders/images/workspace.jpg"
+      alt="Close-up of a pair of glasses, a pen, and an open notebook with notes written on it, on a desk next to a laptop."
+      class="aspect-video"
+    />
+  </sd-carousel-item>
+</sd-carousel>
+```
+
+## Template: Loop and Autoplay
+
+```html
+<sd-carousel loop autoplay role="region" aria-label="Carousel in loop and autoplay">
+  <sd-carousel-item>
+    <img
+      src="./placeholders/images/coffeeshop.jpg"
+      alt="A group of people sitting in a coffee shop"
+      class="aspect-video"
+    />
+  </sd-carousel-item>
+  <sd-carousel-item>
+    <img
+      src="./placeholders/images/friends.jpg"
+      alt="A couple of friends sitting and laughing together on a bed with a dog."
+      class="aspect-video"
+    />
+  </sd-carousel-item>
+  <sd-carousel-item>
+    <img
+      src="./placeholders/images/family.jpg"
+      alt="A smiling father with two children outdoors, symbolizing shared values and future growth."
+      class="aspect-video"
+    />
+  </sd-carousel-item>
+</sd-carousel>
+```

package/metadata/packages/templates/checkbox-group.md

@@ -0,0 +1,81 @@
+---
+name: checkbox-group
+title: Checkbox Group
+components:
+  - sd-button
+  - sd-change
+  - sd-checkbox
+  - sd-checkbox-group
+  - sd-icon
+version: 1.0.0
+---
+
+## Template: Default
+
+```html
+<sd-checkbox-group size="lg">
+  <label slot="label">Checkbox group label</label>
+  <sd-checkbox value="1" checked>Checkbox 1</sd-checkbox>
+  <sd-checkbox value="2" checked>Checkbox 2</sd-checkbox>
+  <sd-checkbox value="3">Checkbox 3</sd-checkbox>
+</sd-checkbox-group>
+```
+
+## Template: Required Checkbox Group
+
+```html
+<form id="checkbox-group-form">
+  <sd-checkbox-group id="checkbox-group" aria-required="true">
+    <label slot="label">Required checkbox group*</label>
+    <sd-checkbox value="1">Checkbox 1</sd-checkbox>
+    <sd-checkbox value="2">Checkbox 2</sd-checkbox>
+    <sd-checkbox value="3">Checkbox 3</sd-checkbox>
+  </sd-checkbox-group>
+  <div id="group-invalid-icon-message" class="flex items-center gap-2 mt-2 hidden">
+    <sd-icon id="invalid-icon" part="invalid-icon" class="text-error" library="_internal" name="risk"></sd-icon>
+    <div id="invalid-message" class="text-error text-left" part="invalid-message" aria-live="polite">
+      Please fill in this field.
+    </div>
+  </div>
+  <sd-button type="submit" class="mt-4">Submit</sd-button>
+</form>
+<script type="module">
+  await Promise.all([customElements.whenDefined('sd-button'), customElements.whenDefined('sd-checkbox')]).then(() => {
+    const form = document.getElementById('checkbox-group-form');
+    const checkboxGroup = form.querySelector('#checkbox-group');
+    const checkboxes = checkboxGroup.querySelectorAll('sd-checkbox');
+    const errorMessage = document.getElementById('group-invalid-icon-message');
+
+    function handleError() {
+      errorMessage.classList.remove('hidden');
+      checkboxes.forEach(checkbox => {
+        checkbox.setCustomValidity('Please fill in this field');
+        checkbox.shadowRoot?.querySelector('#invalid-icon-message')?.style.setProperty('display', 'none');
+      });
+      checkboxGroup.setAttribute('aria-invalid', 'true');
+    }
+
+    function handleSuccess() {
+      errorMessage.classList.add('hidden');
+      checkboxes.forEach(checkbox => {
+        checkbox.setCustomValidity('');
+        checkbox.reportValidity();
+      });
+    }
+
+    form.onsubmit = event => {
+      event.preventDefault();
+      const selectedValues = Array.from(checkboxes).filter(checkbox => checkbox.hasAttribute('checked'));
+
+      if (selectedValues.length === 0) {
+        handleError();
+      } else {
+        handleSuccess();
+        alert('Login form submitted');
+      }
+    };
+
+    checkboxes.forEach(checkbox => checkbox.addEventListener('sd-change', handleSuccess));
+  });
+</script>
+```