@solid-design-system/mcp 0.0.1

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

@@ -0,0 +1,150 @@
+---
+name: step-group
+title: Step Group
+components:
+  - sd-icon
+  - sd-paragraph
+  - sd-step
+  - sd-step-group
+version: 1.0.0
+---
+
+## Template: Step Group Horizontal Inline with Label for current step only
+
+```html
+<style>
+  .hide-label sd-step:not([current])::part(label) {
+    position: absolute;
+    visibility: hidden;
+    width: 1px;
+    height: 1px;
+    pointer-events: none;
+  }
+</style>
+<div class="h-32 gap-16 w-[500px]">
+  <sd-step-group size="sm" orientation="horizontal" active-step="0" class="w-full hide-label" label="Account">
+    <sd-step orientation="horizontal" horizontal-inline current>
+      <span slot="label">Account</span>
+    </sd-step>
+    <sd-step waiting orientation="horizontal" horizontal-inline label="Step 2"></sd-step>
+    <sd-step orientation="horizontal" waiting horizontal-inline label="Step 3"></sd-step>
+  </sd-step-group>
+</div>
+
+<div class="h-32 gap-16 w-[500px]">
+  <sd-step-group size="sm" orientation="horizontal" active-step="1" class="w-full hide-label" label="Payment">
+    <sd-step orientation="horizontal" horizontal-inline label="Step 1"></sd-step>
+    <sd-step orientation="horizontal" horizontal-inline current>
+      <span slot="label">Payment</span>
+    </sd-step>
+    <sd-step orientation="horizontal" waiting horizontal-inline label="Step 3"></sd-step>
+  </sd-step-group>
+</div>
+
+<div class="h-32 gap-16 w-[500px]">
+  <sd-step-group size="sm" orientation="horizontal" active-step="2" class="w-full hide-label" label="Confirmation">
+    <sd-step orientation="horizontal" horizontal-inline label="Step 1"></sd-step>
+    <sd-step orientation="horizontal" horizontal-inline label="Step 2"></sd-step>
+    <sd-step orientation="horizontal" horizontal-inline current>
+      <span slot="label">Confirmation</span>
+    </sd-step>
+  </sd-step-group>
+</div>
+```
+
+## Template: Non Interactive Step Group
+
+```html
+<sd-step-group label="Non-Interactive Step Group" size="lg" orientation="horizontal" not-interactive>
+  <sd-step size="lg" orientation="horizontal">
+    <p slot="label">Make an appointment</p>
+  </sd-step>
+
+  <sd-step size="lg" orientation="horizontal" current>
+    <span slot="label">Select funds for saving plan</span>
+  </sd-step>
+
+  <sd-step size="lg" orientation="horizontal" disabled>
+    <span slot="label"
+      >Open a new <br />
+      account</span
+    >
+  </sd-step>
+
+  <sd-step size="lg" orientation="horizontal" disabled>
+    <span slot="label"
+      >Provide <br />
+      documents</span
+    >
+  </sd-step>
+</sd-step-group>
+```
+
+## Template: Non-Interactive Step Group with Icon
+
+```html
+<sd-step-group
+  label="Non-Interactive Step Group with Icon"
+  size="sm"
+  orientation="horizontal"
+  active-step="0"
+  not-interactive
+>
+  <sd-step size="sm" orientation="horizontal" horizontal-inline state="default">
+    <sd-icon slot="circle-content" name="content/calendar" class="h-8 w-8"></sd-icon>
+    <span slot="label">Book appointment</span>
+    <p class="sd-paragraph">Get advice from our partner banks and find the right plan for you.</p>
+  </sd-step>
+
+  <sd-step size="sm" orientation="horizontal" horizontal-inline state="current">
+    <sd-icon slot="circle-content" name="content/chess-piece" class="h-8 w-8"></sd-icon>
+    <span slot="label">Select fund</span>
+    <p class="sd-paragraph">Choose the right fund for your plan from a wide range of funds.</p>
+  </sd-step>
+
+  <sd-step size="sm" orientation="horizontal" horizontal-inline state="disabled">
+    <sd-icon slot="circle-content" name="content/certificate" class="h-8 w-8"></sd-icon>
+    <span slot="label">Security account</span>
+    <p class="sd-paragraph">Open your own securities account together with your bank advisor.</p>
+  </sd-step>
+</sd-step-group>
+```
+
+## Template: Step Group for extra small variant
+
+```html
+<div class="w-[340px]">
+  <sd-step-group id="step-group-xs" size="xs" orientation="vertical" not-interactive>
+    <sd-step size="xs" orientation="vertical" label="Login">
+      <p class="step-text">Log in to your bank's online banking using your access credentials.</p>
+    </sd-step>
+
+    <sd-step size="xs" orientation="vertical" label="Personal Data">
+      <p class="step-text">
+        Enter your personal data along with your tax identification number in the online banking portal or the Banking
+        App.
+      </p>
+    </sd-step>
+
+    <sd-step size="xs" orientation="vertical" label="Select a product">
+      <p class="step-text">
+        The product finder helps you find an investment solution that matches your preferences. Immediately after making
+        your selection, you can configure your first transaction.
+      </p>
+    </sd-step>
+
+    <sd-step size="xs" orientation="vertical" label="Check details">
+      <p class="step-text">
+        Check your entered data, confirm the legal documents, and approve everything using the VR SecureGo plus app.
+      </p>
+    </sd-step>
+
+    <sd-step size="xs" orientation="vertical" label="Complete identification">
+      <p class="step-text">
+        Identify yourself via Video-Ident or the eID service. After successful completion, you will receive a
+        confirmation and access to your securities account (depot).
+      </p>
+    </sd-step>
+  </sd-step-group>
+</div>
+```

package/metadata/packages/templates/supernumber.md

@@ -0,0 +1,178 @@
+---
+name: supernumber
+title: Supernumber
+components:
+  - sd-container
+  - sd-container--variant-primary
+  - sd-container--variant-white
+  - sd-display
+  - sd-paragraph
+  - sd-paragraph--inverted
+  - sd-paragraph--size-sm
+  - sd-pararaph
+version: 1.0.0
+---
+
+## Template: Supernumber Sizes
+
+```html
+<div class="flex flex-col gap-4">
+  <section>
+    <p class="sd-display">size lg</p>
+    <div class="sd-container sd-container--variant-white flex flex-col items-center text-center">
+      <div class="text-[72px] text-primary leading-[86.4px]">XXX</div>
+    </div>
+  </section>
+
+  <section>
+    <p class="sd-display">size md</p>
+    <div class="sd-container sd-container--variant-white flex flex-col items-center text-center">
+      <div class="text-4xl text-primary leading-[48px]">XXX</div>
+    </div>
+  </section>
+
+  <section>
+    <p class="sd-display">size sm</p>
+    <div class="sd-container sd-container--variant-white flex flex-col items-center text-center">
+      <div class="text-3xl text-primary leading-[38.4px]">XXX</div>
+    </div>
+  </section>
+</div>
+```
+
+## Template: Supernumber with Overline, Subline and Description
+
+```html
+<div class="sd-container sd-container--variant-white flex flex-col items-center text-center">
+  <p class="sd-paragraph font-bold mb-2">Fixed Income</p>
+  <div class="text-[72px] text-primary leading-[86.4px]">176,5</div>
+  <p class="sd-paragraph font-bold my-4">Including money market instruments</p>
+  <p class="sd-pararaph sd-paragraph--size-sm text-base text-center pt-2">
+    Breakdown of total assets under management by asset class in billion euros, as of 28 June 2024
+  </p>
+</div>
+```
+
+## Template: Supernumber Inverted with Overline, Subline and Description
+
+```html
+<div class="sd-container sd-container--variant-primary flex flex-col items-center text-center">
+  <p class="sd-paragraph sd-paragraph--inverted font-bold mb-2">Fixed Income</p>
+  <div class="text-[72px] text-white leading-[86.4px]">176,5</div>
+  <p class="sd-paragraph sd-paragraph--inverted font-bold my-4">Including money market instruments</p>
+  <p class="sd-pararaph sd-paragraph--size-sm sd-paragraph--inverted text-base text-center pt-2">
+    Breakdown of total assets under management by asset class in billion euros, as of 28 June 2024
+  </p>
+</div>
+```
+
+## Template: Supernumber Animation
+
+```html
+<div class="sd-container sd-container--variant-white flex flex-col items-center text-center">
+  <div class="text-[72px] text-primary leading-[86.4px]" id="countup">0</div>
+</div>
+
+<script type="module">
+  import { CountUp } from './countup/countUp.min.js';
+  const countup = new CountUp('countup', 500, {
+    enableScrollSpy: true,
+    duration: 3
+  });
+
+  if (!countup.error) {
+    countup.start();
+  } else {
+    console.error(countup.error);
+  }
+</script>
+```
+
+## Template: Supernumber Animation with Prefix
+
+```html
+<div class="sd-container sd-container--variant-white flex flex-col items-center text-center">
+  <div class="text-[72px] text-primary leading-[86.4px]" id="with-prefix">0</div>
+  <p class="sd-pararaph sd-paragraph--size-sm text-base text-center pt-2">
+    We have stood for forward-looking real estate investments and active asset management for more than 55 years. We
+    present our approach and our philosophy of investing in real estate to you here.
+  </p>
+</div>
+
+<script type="module">
+  import { CountUp } from './countup/countUp.min.js';
+
+  const countup = new CountUp('with-prefix', 1989, {
+    enableScrollSpy: true,
+    duration: 3,
+    prefix: 'Since ',
+    separator: ''
+  });
+
+  if (!countup.error) {
+    countup.start();
+  } else {
+    console.error(countup.error);
+  }
+</script>
+```
+
+## Template: Supernumber Animation with Suffix
+
+```html
+<div class="sd-container sd-container--variant-white flex flex-col items-center text-center">
+  <div class="text-[72px] text-primary leading-[86.4px]" id="with-suffix">0</div>
+
+  <p class="sd-pararaph sd-paragraph--size-sm text-base text-center pt-2">
+    We have stood for forward-looking real estate investments and active asset management for more than 55 years. We
+    present our approach and our philosophy of investing in real estate to you here.
+  </p>
+</div>
+
+<script type="module">
+  import { CountUp } from './countup/countUp.min.js';
+
+  const suffixDemo = new CountUp('with-suffix', 55, {
+    enableScrollSpy: true,
+    duration: 3,
+    suffix: ' years'
+  });
+
+  if (!suffixDemo.error) {
+    suffixDemo.start();
+  } else {
+    console.error(suffixDemo.error);
+  }
+</script>
+```
+
+## Template: Supernumber Animation with Separator and Decimal
+
+```html
+<div class="sd-container sd-container--variant-white flex flex-col items-center text-center">
+  <div class="text-[72px] text-primary leading-[86.4px]" id="i18n">0</div>
+
+  <p class="sd-pararaph sd-paragraph--size-sm text-base text-center pt-2">
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmd tempor invit ut labore et dolore
+    magna aliquyam erat
+  </p>
+</div>
+
+<script type="module">
+  import { CountUp } from './countup/countUp.min.js';
+
+  const i18nDemo = new CountUp('i18n', 5000.45, {
+    enableScrollSpy: true,
+    duration: 3,
+    decimalPlaces: 2,
+    separator: '.',
+    decimal: ','
+  });
+
+  if (!i18nDemo.error) {
+    i18nDemo.start();
+  } else {
+    console.error(i18nDemo.error);
+  }
+</script>
+```

package/metadata/packages/templates/switch.md

@@ -0,0 +1,51 @@
+---
+name: switch
+title: Switch
+components:
+  - sd-option
+  - sd-select
+  - sd-switch
+  - sd-tooltip
+version: 1.0.0
+---
+
+## Template: Switch with Tooltip
+
+```html
+<style>
+  #anchor--templates-switch--default .innerZoomElementWrapper {
+    min-height: 300px;
+  }
+</style>
+<div class="grid grid-cols-1 lg:grid-cols-3 gap-4 ">
+  <sd-select label="Investment product type" placeholder="Please select" max-options-visible="2">
+    <sd-option value="option-1">Equity fund</sd-option>
+    <sd-option value="option-2">Bond fund</sd-option>
+  </sd-select>
+  <sd-select label="Regional focus" placeholder="Please select" max-options-visible="3">
+    <sd-option value="option-1">Global</sd-option>
+    <sd-option value="option-2">Europe</sd-option>
+  </sd-select>
+  <sd-select label="Recommended investment horizon" placeholder="Please select" max-options-visible="3">
+    <sd-option value="option-1">Short-term (1-3 years)</sd-option>
+    <sd-option value="option-2">Medium-term (3-5 years)</sd-option>
+    <sd-option value="option-3">Long-term (5+ years)</sd-option>
+  </sd-select>
+  <sd-switch>
+    With sustainability strategy (47)
+    <sd-tooltip
+      slot="tooltip"
+      size="sm"
+      content="Show products that follow specific environmental (ESG) criteria."
+    ></sd-tooltip>
+  </sd-switch>
+  <sd-switch>
+    Eligible for savings plan (162)
+    <sd-tooltip
+      slot="tooltip"
+      size="sm"
+      content="Show products that are eligible for recurring saving plans."
+    ></sd-tooltip>
+  </sd-switch>
+</div>
+```

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

@@ -0,0 +1,157 @@
+---
+name: tab-group
+title: Tab Group
+components:
+  - sd-badge
+  - sd-copyright
+  - sd-headline
+  - sd-headline--size-3xl
+  - sd-icon
+  - sd-media
+  - sd-paragraph
+  - sd-tab
+  - sd-tab-group
+  - sd-tab-panel
+version: 1.0.0
+---
+
+## Template: Tab Group Center Aligned
+
+```html
+<style>
+  sd-tab-group#centered::part(tabs) {
+    justify-content: center;
+  }
+</style>
+<sd-tab-group activation id="centered">
+  <sd-tab slot="nav" panel="tab-1">Gender</sd-tab>
+  <sd-tab-panel name="tab-1">
+    <figure class="sd-media sd-copyright" style="--copyright: '© Photo by Austin Distel on Unsplash';">
+      <img
+        src="./placeholders/images/collaboration.jpg"
+        alt="Two men in business attire sitting on a sofa in a modern office, smiling and looking at a laptop screen."
+        class="aspect-video object-cover"
+      />
+    </figure>
+    <p class="sd-paragraph mt-4">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh justo ullamcorper odio tempor molestie phasellus dui
+      vel id. Velit in sed non orci pellentesque vivamus nunc. At non tortor, sit neque tristique. Facilisis commodo
+      integer hendrerit tortor.
+    </p>
+  </sd-tab-panel>
+  <sd-tab slot="nav" panel="tab-2">Age diversity</sd-tab>
+  <sd-tab-panel name="tab-2">
+    <figure class="sd-media sd-copyright" style="--copyright: '© Photo by Nathan Dumlao on Unsplash';">
+      <img
+        src="./placeholders/images/family.jpg"
+        alt="A man with glasses and a beard holding two young children in his arms, smiling outdoors with trees in the background."
+        class="aspect-video object-cover"
+      />
+    </figure>
+    <p class="sd-paragraph mt-4">
+      Vivamus mattis mauris nec vulputate facilisis. Nulla facilisi. Pellentesque consectetur mi eget tristique
+      vestibulum. Nunc porta urna sit amet magna congue feugiat. Quisque commodo arcu ex, eget mollis magna porta eu.
+      Aliquam at turpis dolor. Quisque ut neque laoreet, cursus tellus non, venenatis elit.
+    </p>
+  </sd-tab-panel>
+  <sd-tab slot="nav" panel="tab-3">Education</sd-tab>
+  <sd-tab-panel name="tab-3">
+    <figure class="sd-media sd-copyright" style="--copyright: '© Photo by Dan Dimmock on Unsplash';">
+      <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 object-cover"
+      />
+    </figure>
+    <p class="sd-paragraph mt-4">
+      Sed dignissim ipsum vel ultricies interdum. Quisque posuere felis sit amet fringilla tristique. Donec velit ex,
+      viverra id lorem hendrerit, congue gravida justo. Fusce ultricies tellus arcu, nec suscipit metus sagittis sed.
+      Vestibulum lacinia enim eu tellus auctor, quis pulvinar felis varius.
+    </p>
+  </sd-tab-panel>
+  <sd-tab slot="nav" panel="tab-4">Background</sd-tab>
+  <sd-tab-panel name="tab-4">
+    <figure class="sd-media sd-copyright" style="--copyright: '© Photo by Austin Distel on Unsplash';">
+      <img
+        src="./placeholders/images/collaboration.jpg"
+        alt="Two men in business attire sitting on a sofa in a modern office, smiling and looking at a laptop screen."
+        class="aspect-video object-cover"
+      />
+    </figure>
+    <p class="sd-paragraph mt-4">
+      Maecenas aliquet nibh nec tempor ultrices. Donec mattis sapien sed elit tincidunt, quis feugiat risus facilisis.
+      Cras rutrum venenatis dui, in sollicitudin nulla vestibulum nec. Maecenas sed imperdiet sapien, non lacinia ex.
+      Etiam rhoncus ullamcorper sem, eu euismod ipsum volutpat non.
+    </p>
+  </sd-tab-panel>
+</sd-tab-group>
+```
+
+## Template: Tab Group with Badge
+
+```html
+<sd-tab-group activation>
+  <sd-tab slot="nav" panel="tab-1">
+    Notifications
+    <sd-badge class="ml-2">3</sd-badge>
+  </sd-tab>
+  <sd-tab-panel name="tab-1">
+    <h3 class="sd-headline sd-headline--size-3xl">Nisi eu excepteur anim esse</h3>
+    <p class="sd-paragraph mt-2">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh justo ullamcorper odio tempor molestie phasellus dui
+      vel id. Velit in sed non orci pellentesque vivamus nunc. At non tortor, sit neque tristique. Facilisis commodo
+      integer hendrerit tortor.
+    </p>
+  </sd-tab-panel>
+  <sd-tab slot="nav" panel="tab-2">Reminders</sd-tab>
+  <sd-tab-panel name="tab-2">
+    <h3 class="sd-headline sd-headline--size-3xl">Lorem ipsum dolor sit amet</h3>
+    <p class="sd-paragraph mt-2">
+      Maecenas aliquet nibh nec tempor ultrices. Donec mattis sapien sed elit tincidunt, quis feugiat risus facilisis.
+      Cras rutrum venenatis dui, in sollicitudin nulla vestibulum nec. Maecenas sed imperdiet sapien, non lacinia ex.
+      Etiam rhoncus ullamcorper sem, eu euismod ipsum volutpat non.
+    </p>
+  </sd-tab-panel>
+</sd-tab-group>
+```
+
+## Template: Tab Group with Icon and Badge
+
+```html
+<sd-tab-group activation>
+  <sd-tab slot="nav" panel="tab-1">
+    <sd-icon slot="left" name="system/dashboard" class="pr-2"></sd-icon>
+    Dashboard
+  </sd-tab>
+  <sd-tab-panel name="tab-1">
+    <p class="sd-paragraph">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh justo ullamcorper odio tempor molestie phasellus dui
+      vel id. Velit in sed non orci pellentesque vivamus nunc. At non tortor, sit neque tristique. Facilisis commodo
+      integer hendrerit tortor.
+    </p>
+  </sd-tab-panel>
+  <sd-tab slot="nav" panel="tab-2">
+    <sd-icon slot="left" name="system/folder"></sd-icon>
+    <sd-badge size="sm" class="mb-[1rem] mr-[0.75rem] -ml-[0.30rem]" variant="red">New Notification</sd-badge>
+    <span class="-ml-[0.50rem]">Files</span>
+  </sd-tab>
+  <sd-tab-panel name="tab-2">
+    <p class="sd-paragraph">
+      Vivamus mattis mauris nec vulputate facilisis. Nulla facilisi. Pellentesque consectetur mi eget tristique
+      vestibulum. Nunc porta urna sit amet magna congue feugiat. Quisque commodo arcu ex, eget mollis magna porta eu.
+      Aliquam at turpis dolor. Quisque ut neque laoreet, cursus tellus non, venenatis elit.
+    </p>
+  </sd-tab-panel>
+  <sd-tab slot="nav" panel="tab-3">
+    <sd-icon slot="left" name="system/highlighter" class="pr-2"></sd-icon>
+    Notes
+  </sd-tab>
+  <sd-tab-panel name="tab-3">
+    <p class="sd-paragraph">
+      Sed dignissim ipsum vel ultricies interdum. Quisque posuere felis sit amet fringilla tristique. Donec velit ex,
+      viverra id lorem hendrerit, congue gravida justo. Fusce ultricies tellus arcu, nec suscipit metus sagittis sed.
+      Vestibulum lacinia enim eu tellus auctor, quis pulvinar felis varius.
+    </p>
+  </sd-tab-panel>
+</sd-tab-group>
+```