@solid-design-system/mcp 0.0.1

package/metadata/packages/templates/quote.md

@@ -0,0 +1,97 @@
+---
+name: quote
+title: Quote
+components:
+  - sd-display
+  - sd-paragraph
+  - sd-paragraph--inverted
+  - sd-paragraph--size-sm
+version: 1.0.0
+---
+
+## Template: Size
+
+```html
+<p class="sd-display mb-6">size 4xl</p>
+<div class="text-left text-black mb-12">
+  <blockquote class="mb-4 text-3xl lg:text-4xl leading-tight">
+    “The Solid Design System by Union Investment provides a comprehensive toolkit for building consistent and
+    high-quality user interfaces. It includes well-documented components, design tokens, and accessibility features,
+    ensuring seamless integration across platforms.”
+  </blockquote>
+  <div class="gap-6 flex items-center">
+    <img class="w-16 h-16 rounded-full overflow-hidden object-cover" src="./placeholders/images/profile.png" alt="" />
+    <div>
+      <p class="sd-paragraph font-bold mb-1">Jane Doe</p>
+      <p class="sd-paragraph sd-paragraph--size-sm">Team Member of SDS</p>
+    </div>
+  </div>
+</div>
+<p class="sd-display mb-6">size 3xl</p>
+<div class="text-left text-black mb-12">
+  <blockquote class="block mb-4 text-2xl lg:text-3xl leading-tight">
+    “The Solid Design System by Union Investment provides a comprehensive toolkit for building consistent and
+    high-quality user interfaces. It includes well-documented components, design tokens, and accessibility features,
+    ensuring seamless integration across platforms.”
+  </blockquote>
+  <div class="gap-6 flex items-center">
+    <img class="w-16 h-16 rounded-full overflow-hidden object-cover" src="./placeholders/images/profile.png" alt="" />
+    <div>
+      <p class="sd-paragraph font-bold mb-1">Jane Doe</p>
+      <p class="sd-paragraph sd-paragraph--size-sm">Team Member of SDS</p>
+    </div>
+  </div>
+</div>
+<p class="sd-display mb-6">size xl</p>
+<div class="text-left text-black">
+  <blockquote class="block mb-4 text-xl leading-tight">
+    “The Solid Design System by Union Investment provides a comprehensive toolkit for building consistent and
+    high-quality user interfaces. It includes well-documented components, design tokens, and accessibility features,
+    ensuring seamless integration across platforms.”
+  </blockquote>
+  <div class="gap-4 flex items-center">
+    <img class="w-16 h-16 rounded-full overflow-hidden object-cover" src="./placeholders/images/profile.png" alt="" />
+    <div>
+      <p class="sd-paragraph font-bold mb-1">Jane Doe</p>
+      <p class="sd-paragraph sd-paragraph--size-sm">Team Member of SDS</p>
+    </div>
+  </div>
+</div>
+```
+
+## Template: Quote Inverted
+
+```html
+<div class="flex items-end gap-5 p-5 bg-primary">
+  <div class="text-left text-white">
+    <blockquote class="block mb-4 text-3xl lg:text-4xl leading-tight">
+      “The Solid Design System by Union Investment provides a comprehensive toolkit for building consistent and
+      high-quality user interfaces. It includes well-documented components, design tokens, and accessibility features,
+      ensuring seamless integration across platforms.”
+    </blockquote>
+    <div class="gap-6 flex items-center">
+      <img class="w-16 h-16 rounded-full overflow-hidden object-cover" src="./placeholders/images/profile.png" alt="" />
+      <div>
+        <p class="sd-paragraph sd-paragraph--inverted font-bold mb-1">Jane Doe</p>
+        <p class="sd-paragraph sd-paragraph--inverted sd-paragraph--size-sm">Team Member of SDS</p>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+## Template: Quote without Profile Image
+
+```html
+<div class="text-left text-black">
+  <blockquote class="block mb-6 text-3xl lg:text-4xl leading-tight">
+    “The Solid Design System by Union Investment provides a comprehensive toolkit for building consistent and
+    high-quality user interfaces. It includes well-documented components, design tokens, and accessibility features,
+    ensuring seamless integration across platforms.”
+  </blockquote>
+  <div>
+    <p class="sd-paragraph font-bold mb-1">Jane Doe</p>
+    <p class="sd-paragraph sd-paragraph--size-sm">Team Member of SDS</p>
+  </div>
+</div>
+```

package/metadata/packages/templates/radio-button-group.md

@@ -0,0 +1,24 @@
+---
+name: radio-button-group
+title: Radio Button Group
+components:
+  - sd-icon
+  - sd-radio-button
+  - sd-radio-group
+version: 1.0.0
+---
+
+## Template: Default
+
+```html
+<sd-radio-group name="radio-group" value="list">
+  <sd-radio-button value="list">
+    <sd-icon slot="icon" name="system/list"></sd-icon>
+    List
+  </sd-radio-button>
+  <sd-radio-button value="map">
+    <sd-icon slot="icon" name="system/position"></sd-icon>
+    Map
+  </sd-radio-button>
+</sd-radio-group>
+```

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

@@ -0,0 +1,51 @@
+---
+name: radio-group
+title: Radio Group
+components:
+  - sd-change
+  - sd-radio
+  - sd-radio-group
+version: 1.0.0
+---
+
+## Template: Radio Group with Help text
+
+```html
+<sd-radio-group
+  name="greeting"
+  value="mr"
+  label="Greeting"
+  orientation="horizontal"
+  help-text="Please select your preferred salutation."
+  required
+>
+  <sd-radio value="mr">Mr.</sd-radio>
+  <sd-radio value="ms">Ms.</sd-radio>
+  <sd-radio value="non-binary">Non-binary</sd-radio>
+</sd-radio-group>
+```
+
+## Template: Radio Group with Error text
+
+```html
+<sd-radio-group id="radio-group-error" name="role" label="What is your role/function?" orientation="vertical" required>
+  <sd-radio value="advisor-in-service">Advisor in service</sd-radio>
+  <sd-radio value="customer-advisor">Customer advisor</sd-radio>
+  <sd-radio value="securities-specialist">Securities specialist/Wealth advisor</sd-radio>
+  <sd-radio value="online-branch-employee">Online branch employee</sd-radio>
+  <sd-radio value="other">Other</sd-radio>
+</sd-radio-group>
+
+<script type="module">
+  await customElements.whenDefined('sd-radio-group');
+
+  const radioGroup = document.querySelector('#radio-group-error');
+  radioGroup.setCustomValidity('Select an option to proceed.');
+  radioGroup.reportValidity();
+
+  radioGroup.addEventListener('sd-change', () => {
+    radioGroup.setCustomValidity('');
+    radioGroup.reportValidity();
+  });
+</script>
+```

package/metadata/packages/templates/range.md

@@ -0,0 +1,135 @@
+---
+name: range
+title: Range
+components:
+  - sd-container
+  - sd-headline
+  - sd-headline--size-3xl
+  - sd-headline--size-xl
+  - sd-icon
+  - sd-input
+  - sd-notification
+  - sd-paragraph
+  - sd-prose
+  - sd-range
+  - sd-range-tick
+version: 1.0.0
+---
+
+## Template: Interest Calculator
+
+```html
+<sd-notification variant="warning" open class="block mb-16">
+  The information displayed in the content bellow is only for demo purposes.
+</sd-notification>
+<div class="sd-container flex flex-col justify-center m-2 w-full">
+  <p class="sd-headline sd-headline--size-xl justify-center mb-3 inline text-center">
+    Your final amount with <span class="interest-percentage">0%</span> return
+  </p>
+  <p class="sd-headline sd-headline--size-3xl justify-center"><span class="final-amount">13,000.00</span> EUR</p>
+
+  <sd-range min="0" max="6" step="0.5">
+    <div slot="label" class="flex justify-between mb-2 text-sm">
+      <p>Low return</p>
+      <p>High return</p>
+    </div>
+
+    <div slot="scale-ticks" class="flex justify-between">
+      <sd-range-tick>0%</sd-range-tick>
+      <sd-range-tick>2%</sd-range-tick>
+      <sd-range-tick>4%</sd-range-tick>
+      <sd-range-tick>6%</sd-range-tick>
+    </div>
+
+    <div class="flex justify-between text-sm">
+      <p>Less risk</p>
+      <p>More risk</p>
+    </div>
+  </sd-range>
+
+  <div class="flex items-center justify-between gap-8 mt-6">
+    <p class="sd-paragraph sd-prose">
+      With a monthly savings rate of 100 euros and a one-time deposit of 1,000 euros, you will save a total of
+      <span class="saved-amount">13,000.00</span> euros over the next 10 years. With a
+      <span class="interest-percentage">0%</span> return, your final amount would be approximately
+      <span class="final-amount">13,000.00</span> euros. Try out how you can increase your final amount with a higher
+      rate of return.
+    </p>
+    <sd-icon name="content/hourglass" class="text-[48px] min-w-12 min-h-12 text-primary"></sd-icon>
+  </div>
+</div>
+<script type="module">
+  const settings = {
+    initialReturns: 1.5,
+    initialDeposit: 1000,
+    monthlyContribution: 100,
+    years: 10,
+    interest: {
+      min: 0,
+      max: 6
+    }
+  };
+
+  const format = number =>
+    new Intl.NumberFormat('de-DE', {
+      style: 'decimal',
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2
+    }).format(number);
+
+  const calculateReturns = interest => {
+    const { initialDeposit, monthlyContribution, years } = settings;
+    const months = years * 12;
+
+    const rate = interest / 100;
+    const monthlyRate = rate / 12;
+
+    if (monthlyRate === 0) {
+      const total = initialDeposit + monthlyContribution * months;
+      return Math.ceil(total);
+    }
+
+    const futureValueInitial = initialDeposit * Math.pow(1 + monthlyRate, months);
+    const futureValueMonthly = monthlyContribution * ((Math.pow(1 + monthlyRate, months) - 1) / monthlyRate);
+
+    const total = futureValueInitial + futureValueMonthly;
+    return Math.ceil(total);
+  };
+
+  const updateInterest = value => {
+    document.querySelectorAll('.interest-percentage').forEach(element => {
+      element.innerHTML = value + '%';
+    });
+  };
+
+  const updateFinalAmount = value => {
+    document.querySelectorAll('.final-amount').forEach(element => {
+      element.innerHTML = format(value);
+    });
+  };
+
+  const updateSavedAmount = value => {
+    document.querySelectorAll('.saved-amount').forEach(element => {
+      element.innerHTML = format(value);
+    });
+  };
+
+  updateInterest(settings.initialReturns);
+  updateSavedAmount(calculateReturns(0));
+  updateFinalAmount(calculateReturns(settings.initialReturns));
+
+  await Promise.all([customElements.whenDefined('sd-range')]).then(() => {
+    const range = document.querySelector('sd-range');
+    range.value = settings.initialReturns.toString();
+    range.tooltipFormatter = value => value + '%';
+
+    range.addEventListener('sd-input', () => {
+      const interest = range.value;
+      updateInterest(interest);
+
+      const returns = calculateReturns(interest);
+      updateFinalAmount(returns);
+    });
+  });
+</script>
+```

package/metadata/packages/templates/select.md

@@ -0,0 +1,63 @@
+---
+name: select
+title: Select
+components:
+  - sd-divider
+  - sd-option
+  - sd-select
+version: 1.0.0
+---
+
+## Template: Grouping Options
+
+```html
+<div class="h-[500px] flex gap-12">
+  <sd-select size="lg" placement="bottom" label="City/Region" placeholder="Please select" max-options-visible="3">
+    <div class="text-black px-4 font-bold">Australia</div>
+    <sd-option value="option-1">Brisbane (Queensland)</sd-option>
+    <sd-option value="option-2">Sydney (Victoria)</sd-option>
+    <sd-divider class="mb-4"></sd-divider>
+    <div class="text-black px-4 font-bold">Austria</div>
+    <sd-option value="option-3">Graz (Styria)</sd-option>
+    <sd-option value="option-4">Hartberg (Styria)</sd-option>
+  </sd-select>
+
+  <sd-select size="lg" placement="bottom" label="Country" placeholder="Please select" max-options-visible="3">
+    <div class="text-black px-4 font-bold">Asia</div>
+    <sd-option value="option-1">Japan</sd-option>
+    <sd-option value="option-2">South Korea</sd-option>
+    <sd-option value="option-3">Turkey</sd-option>
+    <sd-divider class="mb-4"></sd-divider>
+    <div class="text-black px-4 font-bold">Australia</div>
+    <sd-option value="option-4">Australia</sd-option>
+  </sd-select>
+</div>
+```
+
+## Template: Select with Option and Checkbox
+
+```html
+<div class="w-[400px] h-[500px]">
+  <sd-select
+    id="select-with-checkbox"
+    size="lg"
+    placement="bottom"
+    multiple
+    placeholder="Fund selection"
+    value="option-1 option-3"
+  >
+    <div slot="label" class="font-bold">Choose Fund Category</div>
+
+    <sd-option value="option-1">Union Investment funds</sd-option>
+    <sd-option value="option-2">Institutional retail funds</sd-option>
+    <sd-option value="option-3">Bank-specific funds </sd-option>
+    <sd-option value="option-4">Corporate client fund</sd-option>
+  </sd-select>
+</div>
+<script type="module">
+  const selectElement = document.querySelector('#select-with-checkbox');
+  selectElement.localize.setCustomLocalization({
+    numOptionsSelected: num => (num === 0 ? '' : 'Fund selection (' + num + ')')
+  });
+</script>
+```

package/metadata/packages/templates/skeleton.md

@@ -0,0 +1,32 @@
+---
+name: skeleton
+title: Skeleton
+components:
+  - sd-accordion
+  - sd-accordion-group
+  - sd-skeleton
+version: 1.0.0
+---
+
+## Template: Accordion Group with Skeleton
+
+```html
+<div class="w-[800px]">
+    <sd-accordion-group>
+        <sd-accordion summary="Shareholder structure">
+            <div class="flex flex-col gap-4 w-full">
+            <sd-skeleton class="h-8"></sd-skeleton>
+            <sd-skeleton class="h-8"></sd-skeleton>
+            <sd-skeleton class="w-8 h-8"></sd-skeleton>
+            </div>
+        </sd-accordion>
+        <sd-accordion summary="Cooperative financial network">
+          <div class="flex flex-row gap-4 mx-auto">
+                <div class="flex flex-col gap-4 w-full">
+                    <sd-skeleton class="h-8"></sd-skeleton>
+                    <sd-skeleton class="w-20 h-8"></sd-skeleton>
+                </div>
+            </div>
+        </sd-accordion>
+    </div>
+```

package/metadata/packages/templates/status-badge.md

@@ -0,0 +1,252 @@
+---
+name: status-badge
+title: Status Badge
+components:
+  - sd-button
+  - sd-chip
+  - sd-chip--primary-200
+  - sd-container
+  - sd-container--variant-neutral-100
+  - sd-headline
+  - sd-headline--size-xl
+  - sd-icon
+  - sd-icon-default--status-library
+  - sd-paragraph
+  - sd-status-assets
+  - sd-status-badge
+  - sd-status-badge--error
+  - sd-status-badge--info
+  - sd-status-badge--success
+  - sd-status-badge--warning
+version: 1.0.0
+---
+
+## Template: Status Badge with Custom Icon
+
+```html
+<div class="grid col-span-12 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-12">
+  <div class="sd-status-badge sd-status-badge--success">
+    <sd-icon name="status-check" library="sd-status-assets"></sd-icon>
+    Available
+  </div>
+  <div class="sd-status-badge sd-status-badge--success">
+    <sd-icon name="status-check" library="sd-status-assets"></sd-icon>
+    Identified
+  </div>
+  <div class="sd-status-badge sd-status-badge--success">
+    <sd-icon name="status-check" library="sd-status-assets"></sd-icon>
+    Active
+  </div>
+  <div class="sd-status-badge sd-status-badge--success">
+    <sd-icon name="status-check" library="sd-status-assets"></sd-icon>
+    Approved
+  </div>
+
+  <div class="sd-status-badge sd-status-badge--warning">
+    <sd-icon name="status-exclamation" library="sd-status-assets"></sd-icon>
+    Issue
+  </div>
+  <div class="sd-status-badge sd-status-badge--warning">
+    <sd-icon name="status-exclamation" library="sd-status-assets"></sd-icon>
+    Degraded
+  </div>
+  <div class="sd-status-badge sd-status-badge--warning">
+    <sd-icon name="status-clock" library="sd-status-assets"></sd-icon>
+    Back soon
+  </div>
+  <div class="sd-status-badge sd-status-badge--warning">
+    <sd-icon name="status-clock" library="sd-status-assets"></sd-icon>
+    Maintenance
+  </div>
+
+  <div class="sd-status-badge sd-status-badge--error">
+    <sd-icon name="status-exclamation" library="sd-status-assets"></sd-icon>
+    Attention
+  </div>
+  <div class="sd-status-badge sd-status-badge--error">
+    <sd-icon name="status-close" library="sd-status-assets"></sd-icon>
+    Canceled
+  </div>
+  <div class="sd-status-badge sd-status-badge--error">
+    <sd-icon name="status-close" library="sd-status-assets"></sd-icon>
+    Unavailable
+  </div>
+  <div class="sd-status-badge sd-status-badge--error">
+    <sd-icon name="status-minus" library="sd-status-assets"></sd-icon>
+    Don't disturb
+  </div>
+
+  <div class="sd-status-badge sd-status-badge--info">
+    <sd-icon name="status-info" library="sd-status-assets"></sd-icon>
+    Status Info
+  </div>
+  <div class="sd-status-badge sd-status-badge--info">
+    <sd-icon name="status-questionmark" library="sd-status-assets"></sd-icon>
+    Investigating
+  </div>
+  <div class="sd-status-badge sd-status-badge--info">
+    <sd-icon name="status-questionmark" library="sd-status-assets"></sd-icon>
+    Unknown
+  </div>
+</div>
+```
+
+## Template: Status Badge with Chip
+
+```html
+<style>
+  .data-wrapper {
+    container-type: inline-size;
+  }
+
+  .info-wrapper {
+    gap: 0.25rem;
+  }
+
+  .info-wrapper,
+  .inner-wrapper {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+
+  @container (min-width: 700px) {
+    .info-wrapper {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 1rem;
+    }
+
+    .inner-wrapper {
+      grid-template-columns: auto 1fr;
+    }
+  }
+</style>
+
+<div class="flex flex-col gap-8 contacts">
+  <div>
+    <div class="flex justify-between">
+      <div>
+        <div class="flex flex-col lg:flex-row">
+          <h2 class="sd-headline">Max Mustermann</h2>
+          <div class="sd-status-badge sd-status-badge--success my-4 lg:ml-4">
+            <sd-icon name="status-check" library="sd-status-assets"></sd-icon>
+            Available
+          </div>
+        </div>
+        <span class="sd-chip sd-chip--primary-200">Authorized for telephone information</span>
+      </div>
+
+      <sd-button class="edit-button" variant="secondary">
+        Edit
+        <sd-icon name="system/pen" slot="icon-left"></sd-icon>
+      </sd-button>
+    </div>
+
+    <div class="sd-container sd-container--variant-neutral-100 mt-8 data-wrapper">
+      <p class="sd-headline sd-headline--size-xl">Master data</p>
+
+      <div class="grid mt-4 info-wrapper">
+        <div class="grid gap-x-4 gap-y-1 inner-wrapper">
+          <div class="sd-paragraph">Intermediary</div>
+          <div class="sd-paragraph font-bold">VR-Bank Musterstadt eG</div>
+
+          <div class="sd-paragraph">Geno ID</div>
+          <div class="sd-paragraph font-bold">YC12345</div>
+
+          <div class="sd-paragraph">Branch number</div>
+          <div class="sd-paragraph font-bold flex items-center">1234 – GST Musterstadt</div>
+
+          <div class="sd-paragraph">Consultant number</div>
+          <div class="sd-paragraph font-bold inline-flex items-center">1234 4678 A – Service-Kunden</div>
+        </div>
+
+        <div class="grid gap-x-4 gap-y-1 self-start inner-wrapper">
+          <div class="sd-paragraph">E-Mail</div>
+          <div class="sd-paragraph font-bold">max.mustermann@union-investment.de</div>
+
+          <div class="sd-paragraph">Telephone</div>
+          <div class="sd-paragraph font-bold">+49 (0) 00 123 456 78</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div>
+    <div class="flex justify-between">
+      <div>
+        <div class="flex flex-col lg:flex-row">
+          <h2 class="sd-headline">Jane Doe</h2>
+          <div class="sd-status-badge sd-status-badge--warning my-4 lg:ml-4">
+            <sd-icon name="status-exclamation" library="sd-status-assets"></sd-icon>
+            Be right back
+          </div>
+        </div>
+        <span class="sd-chip sd-chip--primary-200">Not authorized for telephone information</span>
+      </div>
+
+      <sd-button class="edit-button" variant="secondary">
+        Edit
+        <sd-icon name="system/pen" slot="icon-left"></sd-icon>
+      </sd-button>
+    </div>
+
+    <div class="sd-container sd-container--variant-neutral-100 mt-8 data-wrapper">
+      <p class="sd-headline sd-headline--size-xl">Master data</p>
+
+      <div class="grid mt-4 info-wrapper">
+        <div class="grid gap-x-4 gap-y-1 inner-wrapper">
+          <div class="sd-paragraph">Intermediary</div>
+          <div class="sd-paragraph font-bold">VR-Bank Gotham City eG</div>
+
+          <div class="sd-paragraph">Geno ID</div>
+          <div class="sd-paragraph font-bold">YC67891</div>
+
+          <div class="sd-paragraph">Branch number</div>
+          <div class="sd-paragraph font-bold flex items-center">5678 – GST Gotham City</div>
+
+          <div class="sd-paragraph">Consultant number</div>
+          <div class="sd-paragraph font-bold inline-flex items-center">1234 4678 B – Service-Kunden</div>
+        </div>
+
+        <div class="grid gap-x-4 gap-y-1 self-start inner-wrapper">
+          <div class="sd-paragraph">E-Mail</div>
+          <div class="sd-paragraph font-bold">jane.doe@union-investment.de</div>
+
+          <div class="sd-paragraph">Telephone</div>
+          <div class="sd-paragraph font-bold">+49 (0) 00 987 565 32</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<script type="module">
+  const editButtons = document.querySelectorAll('.contacts .edit-button');
+
+  const debounce = (func, timeout = 10) => {
+    let timer;
+    return (...args) => {
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        func.apply(this, args);
+      }, timeout);
+    };
+  };
+
+  editButtons.forEach(button => {
+    button.addEventListener('click', () => {
+      alert('Edit button clicked!');
+    });
+  });
+
+  const updateButtonSizes = size => {
+    editButtons.forEach(button => {
+      button.setAttribute('size', size);
+    });
+  };
+
+  const handleResize = debounce(() => {
+    const size = window.innerWidth < 640 ? 'sm' : 'lg';
+    updateButtonSizes(size);
+  }, 250);
+
+  window.addEventListener('resize', handleResize);
+</script>
+```