@solid-design-system/mcp 0.0.1

package/metadata/packages/templates/headline.md

@@ -0,0 +1,204 @@
+---
+name: headline
+title: Headline
+components:
+  - sd-button
+  - sd-headline
+  - sd-headline--size-3xl
+  - sd-headline--size-lg
+  - sd-headline--size-xl
+  - sd-icon
+  - sd-leadtext
+  - sd-paragraph
+  - sd-prose
+  - sd-teaser
+version: 1.0.0
+---
+
+## Template: Semantic Headline Structure – Example A
+
+```html
+<div>
+  <h1 class="sd-headline mt-0 mb-8">
+    A prerequisite for functioning capital markets: fundamentally active asset management
+  </h1>
+  <p class="sd-leadtext mb-16">
+    Active and passive management approaches have a valuable but different function in the investment of investment
+    funds. Fundamentally active management approaches have the function of efficiently pricing all investments by
+    evaluating opportunities and risks.
+  </p>
+
+  <div class="sd-prose mb-16">
+    <h2 class="sd-headline sd-headline--size-3xl mb-8">Additional income through active asset management</h2>
+    <p class="sd-paragraph pb-8 mt-0 mb-8">
+      <strong>
+        Additional returns, risk management and responsible investing can only be realised through active asset
+        management. That is why we are a fundamentally active asset manager.
+      </strong>
+    </p>
+
+    <h3 class="sd-headline sd-headline--size-xl !text-primary mb-8 !mt-0">
+      We are a fundamentally active asset manager
+    </h3>
+    <p class="sd-paragraph">
+      We are convinced that the capital markets do not adequately reflect the current information situation in many
+      areas. Behavioural psychological influences in particular distort a fundamentally appropriate price. Strictly
+      organised and robustly positioned teams, clearly defined and proven investment philosophies and investment
+      processes are the basis for achieving additional returns. To ensure that this is not only possible today, but also
+      tomorrow, we are constantly working on the further development of our teams and processes.
+    </p>
+
+    <p class="sd-paragraph">
+      Additional income through active asset management is at the heart of our mission. Our clients also value our
+      long-term partnership-based cooperation, our extensive expertise and experience as a fundamentally active asset
+      manager, our direct access to portfolio managers and our high level of expertise in individual solutions from a
+      single location.
+    </p>
+  </div>
+
+  <h3 class="sd-headline sd-headline--size-xl !text-primary mb-8">Empowering Sustainable Growth</h3>
+
+  <sd-teaser inset="" breakpoint="538" style="--distribution-media: 20%; --distribution-content: 80%;">
+    <div slot="media" class="flex flex-wrap justify-center items-center h-[189px] md:h-full">
+      <sd-icon class="text-[96px]" name="content/city-apartment" color="primary"></sd-icon>
+    </div>
+    <h4 slot="headline" class="sd-headline sd-headline--size-lg">One location</h4>
+    <div class="flex flex-col gap-5">
+      <p class="sd-paragraph">
+        At our location in Frankfurt, we combine the resources of a global manager with the short communication channels
+        of a boutique. The resulting close networking, combined with a high level of transparency, ensures an intensive
+        exchange of investment-relevant information and a unique investment culture.
+      </p>
+    </div>
+  </sd-teaser>
+
+  <sd-teaser inset="" breakpoint="538" style="--distribution-media: 20%; --distribution-content: 80%;">
+    <div slot="media" class="flex flex-wrap justify-center items-center h-[189px] md:h-full">
+      <sd-icon class="text-[96px]" name="content/hand-plant" color="primary"></sd-icon>
+    </div>
+    <h4 slot="headline" class="sd-headline sd-headline--size-lg">Responsible investing</h4>
+    <div class="flex flex-col gap-5">
+      <p class="sd-paragraph">
+        As a trustee, we support measures such as active shareholder engagement, which aims to sustainably increase the
+        value of these companies in the long term through personal company visits, speaking engagements and voting
+        behaviour at annual general meetings.
+      </p>
+    </div>
+  </sd-teaser>
+
+  <sd-teaser inset="" breakpoint="538" style="--distribution-media: 20%; --distribution-content: 80%;">
+    <div slot="media" class="flex flex-wrap justify-center items-center h-[189px] md:h-full">
+      <sd-icon class="text-[96px]" name="content/group-speech-bubble" color="primary"></sd-icon>
+    </div>
+    <h4 slot="headline" class="sd-headline sd-headline--size-lg">Our teams</h4>
+    <div class="flex flex-col gap-5">
+      <p class="sd-paragraph">
+        In sector trios, we analyse companies simultaneously from an owner, creditor and sustainability perspective in
+        order to achieve robust analysis results. In this environment, we regularly train the portfolio managers of
+        tomorrow so that we can deliver strong results not only today, but also tomorrow.
+      </p>
+    </div>
+  </sd-teaser>
+</div>
+```
+
+## Template: Semantic Headline Structure – Example B
+
+```html
+<div>
+  <section class="grid grid-cols-8 gap-8 pb-8 mb-16">
+    <h1 class="sd-headline sd-headline--size-lg m-0 col-span-2">Sustainable Investments</h1>
+
+    <p class="sd-paragraph col-span-6">
+      As well as the comprehensive integration of environmental, social and corporate governance (ESG) aspects into our
+      investment process, we want to play a role in making our future sustainable by steadily stepping up our engagement
+      activities and collaborative work.
+    </p>
+  </section>
+
+  <section class="mb-12">
+    <h2 class="sd-headline mb-8">In the spotlight</h2>
+    <div class="flex flex-col gap-8 md:flex-row pb-8">
+      <sd-teaser variant="white" breakpoint="9999" class="flex-1 flex flex-col">
+        <div slot="media" class="relative">
+          <img src="./placeholders/images/architecture.jpg" alt="" class="aspect-4/3 object-cover" />
+        </div>
+        <h3 slot="headline" class="sd-headline sd-headline--size-lg mb-8">
+          Infrastructure sector on course for growth
+        </h3>
+        <div class="flex flex-col gap-5 mt-4">
+          <p>
+            To meet the challenges of the future, infrastructure must be expanded globally. Climate protection,
+            demographic change, urbanisation and digitalisation - these are four major megatrends and task areas of
+            economic transformation.
+          </p>
+          <div class="flex-none">
+            <sd-button href="javascript:void(0)" variant="primary">Read article</sd-button>
+          </div>
+        </div>
+      </sd-teaser>
+      <sd-teaser variant="white" breakpoint="9999" class="flex-1 flex flex-col">
+        <div slot="media" class="relative">
+          <img src="./placeholders/images/family.jpg" alt="" class="aspect-4/3 object-cover" />
+        </div>
+        <h3 slot="headline" class="sd-headline sd-headline--size-lg mb-8">
+          Turn of the times – from a sustainability perspective
+        </h3>
+        <div class="flex flex-col gap-5 mt-4">
+          <p>
+            Russia's attack on Ukraine marks a fundamental turning point - many are already talking about a new world
+            order. Does the world situation change the view on sustainable investments?
+          </p>
+          <div class="flex-none">
+            <sd-button href="javascript:void(0)" variant="primary">Read article</sd-button>
+          </div>
+        </div>
+      </sd-teaser>
+    </div>
+  </section>
+
+  <section>
+    <h2 class="sd-headline mb-8">Our expertise</h2>
+    <p class="sd-paragraph mb-8">
+      We started to apply sustainability criteria long before sustainable investing became a widespread trend and we
+      have been systematically developing our expertise ever since. In addition, we are promoting the transformation
+      towards a more sustainable economy through our engagement activities, our membership in organisations and our
+      participation in initiatives.
+    </p>
+    <div class="flex flex-col gap-8 md:flex-row">
+      <sd-teaser variant="white" breakpoint="9999" class="flex-1 flex flex-col">
+        <div slot="media" class="relative">
+          <img src="./placeholders/images/skyline.jpg" alt="" class="aspect-4/3 object-cover" />
+        </div>
+        <h3 slot="headline" class="sd-headline sd-headline--size-lg mb-8">Investment Process</h3>
+        <div class="flex flex-col gap-5 mt-4">
+          <p>
+            In-depth fundamental analysis, active portfolio management and consideration of environmental, social and
+            governance (ESG) criteria throughout the investment process make it possible to systematically exploit
+            market inefficiencies in order to achieve risk-adjusted outperformance for our clients.
+          </p>
+          <div class="flex-none">
+            <sd-button href="javascript:void(0)" variant="primary">To the blog post</sd-button>
+          </div>
+        </div>
+      </sd-teaser>
+      <sd-teaser variant="white" breakpoint="9999" class="flex-1 flex flex-col">
+        <div slot="media" class="relative">
+          <img src="./placeholders/images/collaboration.jpg" alt="" class="aspect-4/3 object-cover" />
+        </div>
+        <h3 slot="headline" class="sd-headline sd-headline--size-lg mb-8">Engagement</h3>
+        <div class="flex flex-col gap-5 mt-4">
+          <p>
+            As an internationally active shareholder, Union Investment attended a total of 1,756 annual general meetings
+            in 33 countries last year. We pursue an engagement strategy that builds on active shareholder action and
+            shareholder dialogue to influence corporate policy.
+          </p>
+          <div class="flex-none">
+            <sd-button href="javascript:void(0)" variant="primary">To the blog post</sd-button>
+          </div>
+        </div>
+      </sd-teaser>
+    </div>
+  </section>
+</div>
+```

package/metadata/packages/templates/input.md

@@ -0,0 +1,27 @@
+---
+name: input
+title: Input
+components:
+  - sd-change
+  - sd-input
+version: 1.0.0
+---
+
+## Template: Input With Currency Stepper
+
+```html
+<div class="w-[250px]">
+  <sd-input label="Currency stepper" id="stepperSampleInput" type="number" spin-buttons min="0" value="0.00">
+    <span slot="right" class="text-sm inline-flex items-center">
+      <span class="text-neutral-700">EUR</span>
+    </span>
+  </sd-input>
+</div>
+<script type="module">
+  const stepper = document.getElementById('stepperSampleInput');
+
+  stepper.addEventListener('sd-change', event => {
+    stepper.value = String(parseInt(event.target.value, 10).toFixed(2));
+  });
+</script>
+```

package/metadata/packages/templates/interactive.md

@@ -0,0 +1,28 @@
+---
+name: interactive
+title: Interactive
+components:
+  - sd-icon
+  - sd-interactive
+  - sd-interactive--reset
+version: 1.0.0
+---
+
+## Template: Examples
+
+```html
+<div class="flex flex-col gap-12">
+  <button class="sd-interactive sd-interactive--reset" title="Action name">Text</button>
+  <button class="sd-interactive sd-interactive--reset" title="Action name">
+    <sd-icon name="system/image" label="Icon only button"></sd-icon>
+  </button>
+  <button class="sd-interactive sd-interactive--reset flex flex-row items-center gap-2" title="Action name">
+    <sd-icon name="system/image"></sd-icon>
+    <span>Text</span>
+  </button>
+  <button class="sd-interactive sd-interactive--reset flex flex-row items-center gap-2" title="Action name">
+    <span>Text</span>
+    <sd-icon name="system/image"></sd-icon>
+  </button>
+</div>
+```

package/metadata/packages/templates/link.md

@@ -0,0 +1,83 @@
+---
+name: link
+title: Link
+components:
+  - sd-icon
+  - sd-link
+version: 1.0.0
+---
+
+## Template: Link with Icon
+
+```html
+<sd-link href="http://union-investment.com" standalone>
+  <sd-icon name="system/home" slot="icon-left"></sd-icon>
+  Union Investment
+</sd-link>
+<p class="mt-4">
+  While the list above shows standalone links, we now will link to the
+  <sd-link href="https://cd.union-investment.de">
+    CD Toolbox
+    <sd-icon name="system/external-link" slot="icon-right"></sd-icon>
+  </sd-link>
+  inside a paragraph.
+</p>
+```
+
+## Template: Link List
+
+```html
+<ul class="link-list">
+  <li class="mb-5">
+    <sd-link
+      href="https://solid-design-system.fe.union-investment.de/docs/?path=/docs/docs-general-introduction--docs"
+      size="lg"
+    >
+      About us
+    </sd-link>
+  </li>
+  <li class="mb-5">
+    <sd-link
+      href="https://solid-design-system.fe.union-investment.de/docs/?path=/docs/docs-general-introduction--docs"
+      size="lg"
+    >
+      Our funds at a glance
+    </sd-link>
+  </li>
+  <li class="mb-5">
+    <sd-link
+      href="https://solid-design-system.fe.union-investment.de/docs/?path=/docs/docs-general-introduction--docs"
+      size="lg"
+    >
+      Sustainable investments
+    </sd-link>
+  </li>
+  <li>
+    <sd-link
+      href="https://solid-design-system.fe.union-investment.de/docs/?path=/docs/docs-general-introduction--docs"
+      size="lg"
+    >
+      Latest expert views and analyses
+    </sd-link>
+  </li>
+</ul>
+```
+
+## Template: anchor Link List
+
+```html
+<div class="flex flex-row gap-4">
+  <sd-link href="#" class="font-bold" standalone>
+    <sd-icon name="system/anchor-link" slot="icon-left"></sd-icon>
+    Assets under management
+  </sd-link>
+  <sd-link href="#" class="font-bold" standalone>
+    <sd-icon name="system/anchor-link" slot="icon-left"></sd-icon>
+    Protecting is our priority
+  </sd-link>
+  <sd-link href="#" class="font-bold" standalone>
+    <sd-icon name="system/anchor-link" slot="icon-left"></sd-icon>
+    Sustainability
+  </sd-link>
+</div>
+```

package/metadata/packages/templates/list.md

@@ -0,0 +1,27 @@
+---
+name: list
+title: List
+components:
+  - sd-list
+version: 1.0.0
+---
+
+## Template: List With Bolded Text
+
+```html
+<ul class="sd-list">
+  <li>
+    <b>Unordered bold list</b>
+    <ul>
+      <li>
+        Unordered normal list
+        <ul>
+          <li>Unordered normal list</li>
+        </ul>
+      </li>
+    </ul>
+  </li>
+  <li><b>Unordered bold list</b></li>
+  <li><b>Unordered bold list</b></li>
+</ul>
+```

package/metadata/packages/templates/map-marker.md

@@ -0,0 +1,15 @@
+---
+name: map-marker
+title: Map Marker
+components:
+  - sd-map-marker
+version: 1.0.0
+---
+
+## Template: Map Maker With Images
+
+```html
+<sd-map-marker state="default" variant="place" label="Union Investment location" not-interactive>
+  <img src="images/ui-brand-mark.png" alt="Brand mark of Union Investment" class="h-8 w-8 -mt-4" />
+</sd-map-marker>
+```

package/metadata/packages/templates/mark.md

@@ -0,0 +1,39 @@
+---
+name: mark
+title: Mark
+components:
+  - sd-display
+  - sd-headline
+  - sd-headline--size-3xl
+  - sd-headline--size-xl
+  - sd-icon
+  - sd-mark
+version: 1.0.0
+---
+
+## Template: Headline with Mark
+
+```html
+<div class="flex flex-col gap-8">
+  <h4 class="sd-headline">
+    <sd-icon name="content/skyscrapers" color="primary" aria-hidden="true" library="default"></sd-icon>
+    <span>Real estate investments <mark class="sd-mark">in the Americas</mark></span>
+  </h4>
+  <h4 class="sd-headline">
+    <span>Real estate investments <mark class="sd-mark">in the Americas</mark></span>
+  </h4>
+  <h4 class="sd-headline sd-headline--size-3xl">
+    <span>Real estate investments <mark class="sd-mark">in the Americas</mark></span>
+  </h4>
+  <h4 class="sd-headline sd-headline--size-xl">
+    <sd-icon name="content/skyscrapers" color="primary" aria-hidden="true" library="default"></sd-icon>
+    <span>Real estate investments <mark class="sd-mark">in the Americas</mark></span>
+  </h4>
+</div>
+```
+
+## Template: Display with Mark
+
+```html
+<p class="sd-display"><mark class="sd-mark">Union Investment</mark> at a glance</p>
+```

package/metadata/packages/templates/media.md

@@ -0,0 +1,22 @@
+---
+name: media
+title: Media
+components:
+  - sd-copyright
+  - sd-media
+version: 1.0.0
+---
+
+## Template: Copyright
+
+```html
+<figure class="sd-media p-4">
+  <div class="sd-copyright" style="--copyright: '© Union Investment 2025'">
+    <img
+      src="./placeholders/images/architecture.jpg"
+      alt="A generic placeholder jpg"
+      class="aspect-video object-cover"
+    />
+  </div>
+</figure>
+```

package/metadata/packages/templates/menu.md

@@ -0,0 +1,93 @@
+---
+name: menu
+title: Menu
+components:
+  - sd-button
+  - sd-divider
+  - sd-dropdown
+  - sd-icon
+  - sd-menu
+  - sd-menu-item
+version: 1.0.0
+---
+
+## Template: Menu with Icons
+
+```html
+<sd-dropdown distance="4" rounded open stay-open-on-select>
+  <sd-button variant="secondary" slot="trigger">
+    <sd-icon name="system/more-functions" label="Icon only"></sd-icon>
+  </sd-button>
+  <sd-menu>
+    <sd-button variant="secondary" slot="trigger">
+      <sd-icon name="system/more-functions" label="Icon only"></sd-icon>
+    </sd-button>
+    <sd-menu-item>
+      <sd-icon name="system/share" slot="icon-indent"></sd-icon>
+      Share
+    </sd-menu-item>
+    <sd-menu-item>
+      <sd-icon name="system/bookmark" slot="icon-indent"></sd-icon>
+      Save
+    </sd-menu-item>
+  </sd-menu>
+</sd-dropdown>
+```
+
+## Template: Menu with Checkmarks and Icons
+
+```html
+<sd-dropdown distance="4" rounded open stay-open-on-select>
+  <sd-button variant="secondary" slot="trigger">
+    <sd-icon name="system/more-functions" label="Icon only"></sd-icon>
+  </sd-button>
+  <sd-menu>
+    <sd-menu-item type="checkbox">
+      <sd-icon name="system/laptop" slot="icon-indent"></sd-icon>
+      Display Settings
+    </sd-menu-item>
+    <sd-menu-item type="checkbox" checked>
+      <sd-icon name="system/bell" slot="icon-indent"></sd-icon>
+      Notifications
+    </sd-menu-item>
+    <sd-menu-item type="checkbox">
+      <sd-icon name="system/lock-locked" slot="icon-indent"></sd-icon>
+      Privacy and security
+    </sd-menu-item>
+  </sd-menu>
+</sd-dropdown>
+```
+
+## Template: Menu with Checkmarks, Grouping and Submenu
+
+```html
+<sd-dropdown distance="4" rounded stay-open-on-select>
+  <sd-button variant="secondary" slot="trigger">
+    Menu
+    <sd-icon library="_internal" name="chevron-down" slot="icon-right"></sd-icon>
+  </sd-button>
+  <sd-menu>
+    <sd-menu-item type="checkbox">Account overview</sd-menu-item>
+    <sd-menu-item type="checkbox">Transactions</sd-menu-item>
+    <sd-menu-item type="checkbox" checked>Investments</sd-menu-item>
+    <sd-menu-item type="checkbox">Budget planner</sd-menu-item>
+    <sd-menu-item type="checkbox">Dashboard</sd-menu-item>
+    <sd-divider></sd-divider>
+    <sd-menu-item>
+      Reports
+      <sd-menu slot="submenu">
+        <sd-menu-item type="checkbox">Annual summary</sd-menu-item>
+        <sd-menu-item type="checkbox" checked>Investment performance</sd-menu-item>
+        <sd-menu-item type="checkbox">Tax documents</sd-menu-item>
+      </sd-menu>
+    </sd-menu-item>
+    <sd-menu-item>
+      Billing
+      <sd-menu slot="submenu">
+        <sd-menu-item type="checkbox">Invoices</sd-menu-item>
+        <sd-menu-item type="checkbox" checked>Payment methods</sd-menu-item>
+      </sd-menu>
+    </sd-menu-item>
+  </sd-menu>
+</sd-dropdown>
+```

package/metadata/packages/templates/notification.md

@@ -0,0 +1,100 @@
+---
+name: notification
+title: Notification
+components:
+  - sd-button
+  - sd-link
+  - sd-notification
+  - sd-paragraph
+version: 1.0.0
+---
+
+## Template: Info Notification
+
+```html
+<style>
+  sd-notification.info-variant::part(message) {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+</style>
+
+<sd-notification class="info-variant" variant="info" open>
+  Editing is restricted
+  <sd-button variant="secondary" class="mr-4">Request to edit</sd-button>
+</sd-notification>
+```
+
+## Template: Info Toast Notification
+
+```html
+<sd-button
+  variant="secondary"
+  data-notification-type="info"
+  data-notification-position="bottom-center"
+  class="toast-button"
+>
+  Show toast
+</sd-button>
+
+<script>
+  var button = document.querySelector('.toast-button');
+
+  function notifyBottomCenter(variant = 'info') {
+    const notification = Object.assign(document.createElement('sd-notification'), {
+      closable: true,
+      variant: variant,
+      toastStack: 'bottom-center',
+      duration: Infinity,
+      innerHTML: 'Event deleted <sd-button class="ml-4" variant="secondary" size="sm">Undo</sd-button>'
+    });
+
+    notification.style.width = '250px';
+
+    document.body.append(notification);
+    return notification.toast();
+  }
+
+  button.addEventListener('click', () => {
+    notifyBottomCenter(button.getAttribute('data-notification-type'));
+  });
+</script>
+```
+
+## Template: Success Notification
+
+```html
+<style>
+  sd-notification.success-variant::part(message) {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+</style>
+
+<sd-notification class="success-variant" variant="success" open>
+  <b>Congratulations</b>
+  <p class="sd-paragraph">You have successfully subscribed.</p>
+</sd-notification>
+```
+
+## Template: Error Notification
+
+```html
+<sd-notification variant="error" open closable>
+  <p class="sd-paragraph">
+    A problem occurred while submitting your data. <sd-link size="inherit" href="#">More information</sd-link>
+  </p>
+</sd-notification>
+```
+
+## Template: Warning Notification
+
+```html
+<sd-notification variant="warning" open>
+  <b>Update information</b>
+  <p class="sd-paragraph">You have 7 days left to update your billing information.</sd-link></p>
+  <sd-button variant="secondary" class="mt-4">More information</sd-button>
+</sd-notification>
+```