@solid-design-system/mcp 0.0.1

package/metadata/packages/templates/expandable.md

@@ -0,0 +1,61 @@
+---
+name: expandable
+title: Expandable
+components:
+  - sd-expandable
+  - sd-leadtext
+  - sd-prose
+  - sd-prose--full-width
+version: 1.0.0
+---
+
+## Template: Text Styles
+
+```html
+<div class="flex flex-col gap-4">
+  <sd-expandable class="sd-leadtext">
+    <span slot="toggle-open"> Collapse global economic insights </span>
+    <span slot="toggle-closed"> Expand for global economic insights </span>
+    <p>
+      Global economic growth continues to be an important support factor for the capital markets. The US economy in
+      particular is running like a well-oiled machine. This is unlikely to change much in the coming quarters. Our
+      economists expect real economic output to increase by 2.7 per cent in 2024 as a whole. Unlike in previous months,
+      they also expect the economic outlook to improve in other regions, above all in the eurozone. Here, gross domestic
+      product (GDP) is expected to grow by 0.6 per cent over the course of the year. Germany brings up the rear with GDP
+      growth forecast to be only slightly above zero. As the economies of China and Japan are stabilising at the same
+      time, the global economy is expected to grow by 2.9% in 2024, slightly more than in the previous year. The growth
+      gap between the most important regions is therefore closing somewhat.
+    </p>
+  </sd-expandable>
+  <div class="bg-neutral-100 p-4">
+    <sd-expandable style="--gradient-color-start: rgba(246, 246, 246, 0);--gradient-color-end: rgba(246, 246, 246, 1)">
+      <span slot="toggle-open"> Collapse global economic insights </span>
+      <span slot="toggle-closed"> Expand for global economic insights </span>
+
+      <div class="sd-prose sd-prose--full-width">
+        <p>
+          Global economic growth continues to be an important support factor for the capital markets. The US economy in
+          particular is running like a well-oiled machine. This is unlikely to change much in the coming quarters. Our
+          economists expect real economic output to increase by 2.7 per cent in 2024 as a whole. Unlike in previous
+          months, they also expect the economic outlook to improve in other regions, above all in the eurozone. Here,
+          gross domestic product (GDP) is expected to grow by 0.6 per cent over the course of the year. Germany brings
+          up the rear with GDP growth forecast to be only slightly above zero. As the economies of China and Japan are
+          stabilising at the same time, the global economy is expected to grow by 2.9% in 2024, slightly more than in
+          the previous year. The growth gap between the most important regions is therefore closing somewhat.
+        </p>
+        <h4>US inflation soon to reach its cyclical low</h4>
+        <p>
+          Our judgement on inflation is mixed. Although the global trend of falling inflation is continuing, it is
+          slowing down. In the US, the cyclical low in core inflation, i.e. the price trend excluding energy and food,
+          is likely to be reached in the summer. However, inflation remains above the US Federal Reserve's inflation
+          target. If inflation in the United States does not fall any further, this will generally support interest
+          rates on the bond market. We therefore do not expect yields on the bond market to fall, especially for bonds
+          with longer maturities. By contrast, the eurozone is later in the economic cycle and is structurally not as
+          fast-growing as the US, which is why the European Central Bank (ECB) can expect a further decline in price
+          increases. Inflation is likely to approach the ECB's target of two per cent by mid-2025.
+        </p>
+      </div>
+    </sd-expandable>
+  </div>
+</div>
+```

package/metadata/packages/templates/flag.md

@@ -0,0 +1,38 @@
+---
+name: flag
+title: Flag
+components:
+  - sd-flag
+  - sd-flag--neutral-200
+  - sd-flag--neutral-300
+  - sd-flag--neutral-500
+  - sd-flag--white
+version: 1.0.0
+---
+
+## Template: Background Options
+
+```html
+<div class="grid grid-cols-2 grid-rows-3">
+  <div class="bg-white pt-[32px] flex justify-end border border-neutral-200">
+    <div class="sd-flag sd-flag--neutral-200">neutral-200</div>
+  </div>
+  <div class="bg-neutral-100 pt-[32px] flex justify-end">
+    <div class=" sd-flag sd-flag--neutral-300">neutral-300</div>
+  </div>
+  <div class="bg-primary-100 pt-[32px] flex justify-end">
+    <div class="sd-flag sd-flag--neutral-500">neutral-500</div>
+  </div>
+  <div class="bg-primary pt-[32px] flex justify-end">
+    <div class="sd-flag sd-flag--white">white</div>
+  </div>
+  <div slot="media" class="relative">
+    <img
+      class="aspect-video object-cover"
+      src="./placeholders/images/coffeeshop.jpg"
+      alt="A group of people sitting in a coffee shop"
+    />
+    <div class="absolute top-[32px] right-0 sd-flag sd-flag--white">white</div>
+  </div>
+</div>
+```

package/metadata/packages/templates/flipcard.md

@@ -0,0 +1,66 @@
+---
+name: flipcard
+title: Flipcard
+components:
+  - sd-flipcard
+  - sd-headline
+  - sd-headline--inverted
+  - sd-headline--size-4xl
+  - sd-headline--size-lg
+  - sd-link
+  - sd-paragraph
+  - sd-paragraph--inverted
+  - sd-prose
+version: 1.0.0
+---
+
+## Template: Default
+
+```html
+<sd-flipcard
+  flip-direction="horizontal"
+  front-variant="gradient-dark"
+  back-variant="primary-100"
+  placement="top"
+  class="mb-12"
+>
+  <h5 slot="front" class="sd-headline sd-headline--inverted sd-headline--size-lg p-5">
+    We are invested in over USD 6 Billion of Assets under Management
+  </h5>
+  <div slot="back" class="w-full sd-prose p-5">
+    <h3 class="sd-headline sd-headline--size-lg">Our quality portfolio</h3>
+    <p class="sd-paragraph">
+      Together with our local partners we manage a real estate portfolio of approx. USD 6 billion, which represents
+      about 15% of the total global portfolio and spans over more than 35 properties. In the US, we have properties in
+      New York, San Francisco, Washington D.C., Chicago and other major US cities. In Latin America we are currently
+      invested in office buildings in Mexico-City.
+    </p>
+    <sd-link href="javascript:void(0)" class="block">Link</sd-link>
+  </div>
+  <img
+    slot="media-front"
+    class="object-cover h-full w-full"
+    src="./placeholders/images/skyline.jpg"
+    alt="A vibrant city skyline at dusk, symbolizing economic growth and investment opportunities in urban hubs."
+  />
+</sd-flipcard>
+<sd-flipcard flip-direction="horizontal" front-variant="gradient-light" back-variant="primary" placement="bottom">
+  <h2 slot="front" class="sd-headline sd-headline--size-4xl p-5">We promote diversity</h2>
+  <div slot="back" class="w-full p-5">
+    <h3 class="sd-headline sd-headline--size-lg sd-headline--inverted">
+      We provide room for creative solutions and ensure that we are equipped for the future. 
+    </h3>
+    <p class="sd-paragraph sd-paragraph--inverted mt-2">
+      Our approach is based around interacting with each other, our customers and our partners on an equal footing. Our
+      actions are defined by values such as respect, professionalism and collaboration. In the true spirit of the
+      cooperative principles, we channel a wide range of strengths in order to be stronger together.
+    </p>
+  </div>
+  <img
+    slot="media-front"
+    class="object-cover h-full w-full"
+    src="./placeholders/images/coffeeshop.jpg"
+    alt="Colleagues in a casual office meeting, smiling and interacting, symbolizing collaboration and the value of office spaces."
+  />
+</sd-flipcard>
+```

package/metadata/packages/templates/footnotes.md

@@ -0,0 +1,80 @@
+---
+name: footnotes
+title: Footnotes
+components:
+  - sd-footnotes
+  - sd-footnotes--marker
+  - sd-headline
+  - sd-headline--3xl
+  - sd-paragraph
+  - sd-prose
+version: 1.0.0
+---
+
+## Template: Linked Footnotes
+
+```html
+<div class="sd-prose">
+  <!-- Dev-note: The <a> elements have been wrapped in <span> elements due to an issue in safari
+  where using the mouse to navigate between footnotes would trigger the focus-outline. -->
+
+  <h2 class="sd-headline sd-headline--3xl">The Power of a Solid Design System</h2>
+  <p class="sd-paragraph">
+    A solid design system is the backbone of a cohesive product, offering a single source of truth that promotes
+    consistency across all platforms and teams
+    <span id="ref_1" class="sd-footnotes--marker"><a href="#note_1">1</a></span> . By providing reusable UI components
+    and guided principles, design systems ensure that designers and developers work efficiently without reinventing the
+    wheel. This consistency not only streamlines workflows but also enhances scalability, enabling teams to quickly roll
+    out features that look and feel unified
+    <span id="ref_2a" class="sd-footnotes--marker"><a href="#note_2">2</a></span> .
+  </p>
+  <p>
+    Moreover, design systems empower teams to focus on refining user experience rather than repeatedly tackling
+    foundational design challenges. When every component aligns with the brand’s visual language, users benefit from a
+    familiar, intuitive interface that fosters trust. This familiarity is especially critical for products with diverse
+    user bases, as it allows for seamless navigation and higher satisfaction
+    <span id="ref_2b" class="sd-footnotes--marker"><a href="#note_2">2</a></span> .
+  </p>
+  <p>
+    A solid design system also evolves with changing needs. By integrating regular feedback, teams can keep the system
+    adaptable and relevant, meeting both emerging design trends and technological advancements
+    <span id="ref_3" class="sd-footnotes--marker"><a href="#note_3">3</a></span> . Ultimately, investing in a design
+    system yields long-term returns, ensuring that products are consistent, scalable, and efficient
+    <span id="ref_2c" class="sd-footnotes--marker"><a href="#note_2">2</a></span> .
+  </p>
+  <p>
+    Furthermore, as companies scale, maintaining design consistency across multiple teams and projects becomes
+    increasingly complex. A well-defined design system mitigates these challenges by acting as a blueprint for future
+    iterations, preventing visual drift and maintaining brand integrity across diverse touchpoints. Teams can
+    confidently experiment and innovate within the system’s boundaries, knowing that their work aligns with established
+    guidelines <span id="ref_4" class="sd-footnotes--marker"><a href="#note_4">3</a></span> .
+  </p>
+  <p>
+    By continuously evolving with feedback and technological advancements, a design system remains a living entity
+    rather than a static framework. Regular updates ensure that it stays relevant, adapting to new design paradigms,
+    device capabilities, and user expectations. The investment in a design system, therefore, extends far beyond initial
+    implementation—it serves as a foundation for scalable, efficient, and user-friendly digital experiences.
+  </p>
+  <p>A well-maintained design system is not just a tool—it’s a long-term strategy for success.</p>
+</div>
+<ol class="sd-footnotes mt-12">
+  <li id="note_1">
+    <a href="#ref_1" class="sd-footnotes--marker"></a>
+    Design systems act as a "single source of truth," promoting consistency across all products.
+  </li>
+  <li id="note_2">
+    <a href="#ref_2a" class="sd-footnotes--marker"></a>
+    <a href="#ref_2b" class="sd-footnotes--marker"></a>
+    <a href="#ref_2c" class="sd-footnotes--marker"></a>
+    Component libraries in design systems streamline workflows, boosting efficiency and scalability.
+  </li>
+  <li id="note_3">
+    <a href="#ref_3" class="sd-footnotes--marker"></a>
+    A design system’s consistency helps reinforce brand identity and user trust.
+  </li>
+  <li id="note_4">
+    <a href="#ref_4" class="sd-footnotes--marker"></a>
+    Effective design systems evolve, remaining adaptable to product and user needs over time.
+  </li>
+</ol>
+```

package/metadata/packages/templates/forms.md

@@ -0,0 +1,248 @@
+---
+name: forms
+title: Forms
+components:
+  - sd-button
+  - sd-change
+  - sd-checkbox
+  - sd-checkbox-group
+  - sd-container
+  - sd-headline
+  - sd-headline--size-3xl
+  - sd-headline--size-4xl
+  - sd-icon
+  - sd-input
+  - sd-link
+  - sd-meta
+  - sd-meta--size-sm
+  - sd-option
+  - sd-prose
+  - sd-prose--full-width
+  - sd-radio
+  - sd-radio-group
+  - sd-select
+  - sd-textarea
+  - sd-tooltip
+version: 1.0.0
+---
+
+## Template: Login Form
+
+```html
+<style>
+  #login-form sd-button::part(icon-left) {
+    display: flex;
+    justify-content: flex-end;
+  }
+</style>
+<section class="sd-container">
+  <form id="login-form">
+    <h3 class="sd-headline sd-headline--size-3xl mb-8">Login for UnionFondsOnline users</h3>
+    <sd-input type="number" inputmode="numeric" label="Access number" class="mb-4" required></sd-input>
+    <sd-input
+      required
+      type="password"
+      label="Password"
+      class="mb-4"
+      autocomplete="current-password"
+      password-toggle
+    ></sd-input>
+    <sd-checkbox>Stay logged in on this computer</sd-checkbox>
+    <div class="justify-between md:items-center md:flex-row mt-8 flex flex-col">
+      <sd-link href="javascript:void(0)" class="mb-4 md:mb-0">Forgot password</sd-link>
+      <sd-button type="submit">
+        Login
+        <sd-icon name="system/lock-locked" slot="icon-left"></sd-icon>
+      </sd-button>
+    </div>
+  </form>
+</section>
+<script type="module">
+  const loginForm = document.getElementById('login-form');
+  loginForm.onsubmit = event => {
+    event.preventDefault();
+    if (loginForm.checkValidity()) {
+      alert('Login form submitted');
+    }
+  };
+</script>
+```
+
+## Template: Contact Form
+
+```html
+<form class="sd-prose sd-prose--full-width" id="contact-form">
+  <h3 class="sd-headline sd-headline--size-4xl">Contact</h3>
+  <sd-radio-group id="inquiry-radio-group" orientation="horizontal" value="general-inquiry">
+    <sd-radio name="inquiryType" value="general-inquiry">General inquiry</sd-radio>
+    <sd-radio name="inquiryType" value="regarding">Regarding</sd-radio>
+  </sd-radio-group>
+  <sd-input
+    type="text"
+    inputmode="text"
+    id="regarding-input"
+    class="hidden"
+    aria-label="Regarding"
+    name="regardingInput"
+    spellcheck
+  ></sd-input>
+  <div class="flex flex-col gap-6">
+    <sd-select label="Salutation" placeholder="Please Select" name="salutation" required>
+      <sd-option value="ms">Ms.</sd-option>
+      <sd-option value="mrs">Mrs.</sd-option>
+      <sd-option value="miss">Miss</sd-option>
+      <sd-option value="mx">Mx.</sd-option>
+    </sd-select>
+    <div class="gap-6 flex flex-col md:flex-row">
+      <sd-input name="firstName" type="text" inputmode="text" label="First name" autocomplete="given-name"></sd-input>
+      <sd-input
+        name="lastName"
+        type="text"
+        inputmode="text"
+        label="Last name"
+        required
+        autocomplete="family-name"
+      ></sd-input>
+    </div>
+    <sd-input name="email" type="email" inputmode="email" label="Email" required autocomplete="email"></sd-input>
+    <sd-textarea name="news" label="News" rows="4" spellcheck></sd-textarea>
+    <sd-checkbox-group>
+      <sd-checkbox value="privacy_policy" required>
+        I accept the <sd-link href="javascript:void(0)">Privacy Policy</sd-link>.
+      </sd-checkbox>
+      <sd-checkbox value="marketing_emails">I would like to receive marketing emails.</sd-checkbox>
+    </sd-checkbox-group>
+    <span class="sd-meta sd-meta--size-sm">* Required fields</span>
+  </div>
+  <div class="flex flex-col gap-4 md:flex-row md:justify-end">
+    <sd-button class="md:order-2" type="submit">Send</sd-button>
+    <sd-button variant="secondary" class="md:order-1" onclick="alert('Cancelled process')">Cancel</sd-button>
+  </div>
+</form>
+<script type="module">
+  await Promise.all([
+    customElements.whenDefined('sd-button'),
+    customElements.whenDefined('sd-checkbox'),
+    customElements.whenDefined('sd-textarea'),
+    customElements.whenDefined('sd-radio'),
+    customElements.whenDefined('sd-radio-group'),
+    customElements.whenDefined('sd-input'),
+    customElements.whenDefined('sd-select')
+  ]).then(() => {
+    const form = document.getElementById('contact-form');
+    form.onsubmit = event => {
+      event.preventDefault(); // Prevent the default form submission
+      const formData = new FormData(form);
+
+      // Collect form values to display in the alert
+      let formValues = ['Results:'];
+      for (let [key, value] of formData.entries()) {
+        formValues.push(key + ': ' + value);
+      }
+      alert(formValues.join('\\n'));
+    };
+  });
+
+  const radioGroup = document.getElementById('inquiry-radio-group');
+  const regardingInput = document.getElementById('regarding-input');
+  radioGroup.addEventListener('sd-change', event => {
+    const value = event.target.value;
+    if (value === 'regarding') {
+      regardingInput.classList.remove('hidden');
+    } else {
+      regardingInput.classList.add('hidden');
+    }
+  });
+</script>
+```
+
+## Template: Form With Visually Disabled Elements
+
+```html
+<form class="sd-prose sd-prose--full-width" id="accessible-form">
+  <h3 class="sd-headline sd-headline--size-4xl">Contact</h3>
+  <div class="flex flex-col gap-6">
+    <sd-input name="firstName" type="text" inputmode="text" label="Name" class="name-input"></sd-input>
+    <sd-textarea name="message" label="Message" rows="4" spellcheck></sd-textarea>
+    <sd-checkbox-group>
+      <sd-checkbox value="privacy_policy" class="policy-checkbox mb-2" required>
+        I accept the <sd-link href="javascript:void(0)">Privacy Policy</sd-link>.
+      </sd-checkbox>
+      <sd-tooltip
+        content="Accept Policy Privacy to enable field"
+        trigger="hover focus"
+        size="sm"
+        class="checkbox-tooltip"
+      >
+        <sd-checkbox value="marketing_emails" class="marketing-checkbox" visually-disabled
+          >I would like to receive marketing emails.</sd-checkbox
+        >
+      </sd-tooltip>
+    </sd-checkbox-group>
+    <span class="sd-meta sd-meta--size-sm">* Required fields</span>
+  </div>
+  <div class="flex flex-col gap-4 md:flex-row md:justify-end">
+    <sd-tooltip content="Fill in all fields to enable button" trigger="hover focus" size="sm" class="button-tooltip">
+      <sd-button class="md:order-2 submit-button" type="submit" visually-disabled>Send</sd-button>
+    </sd-tooltip>
+    <sd-button variant="secondary" class="md:order-1" onclick="alert('Cancelled process')">Cancel</sd-button>
+  </div>
+</form>
+<script type="module">
+  await Promise.all([
+    customElements.whenDefined('sd-button'),
+    customElements.whenDefined('sd-checkbox'),
+    customElements.whenDefined('sd-textarea'),
+    customElements.whenDefined('sd-input')
+  ]).then(() => {
+    const form = document.getElementById('accessible-form');
+    form.onsubmit = event => {
+      event.preventDefault();
+      alert('Form submitted');
+    };
+  });
+
+  const form = document.getElementById('accessible-form');
+  const nameInput = form.querySelector('.name-input');
+  const emailInput = form.querySelector('.email-input');
+  const policyCheckbox = form.querySelector('.policy-checkbox');
+  const marketingCheckbox = form.querySelector('.marketing-checkbox');
+  const submitButton = form.querySelector('.submit-button');
+  const checkboxTooltip = form.querySelector('.checkbox-tooltip');
+  const buttonTooltip = form.querySelector('.button-tooltip');
+
+  nameInput.addEventListener('input', () => {
+    if (nameInput.value) {
+      emailInput.removeAttribute('visually-disabled');
+    }
+  });
+
+  policyCheckbox.addEventListener('sd-change', event => {
+    if (policyCheckbox.checked) {
+      if (checkboxTooltip && checkboxTooltip.parentNode) {
+        while (checkboxTooltip.firstChild) {
+          checkboxTooltip.parentNode.insertBefore(checkboxTooltip.firstChild, checkboxTooltip);
+        }
+        checkboxTooltip.parentNode.removeChild(checkboxTooltip);
+      }
+
+      marketingCheckbox.removeAttribute('visually-disabled');
+    }
+  });
+
+  form.addEventListener('input', () => {
+    const requiredFields = form.querySelectorAll('[required]');
+    const isValid = Array.from(requiredFields).every(field => field.value && field.checkValidity());
+    if (isValid) {
+      if (buttonTooltip && buttonTooltip.parentNode) {
+        while (buttonTooltip.firstChild) {
+          buttonTooltip.parentNode.insertBefore(buttonTooltip.firstChild, buttonTooltip);
+        }
+        buttonTooltip.parentNode.removeChild(buttonTooltip);
+      }
+
+      submitButton.removeAttribute('visually-disabled');
+    }
+  });
+</script>
+```