@synergy-design-system/mcp 0.1.0 → 1.0.0

package/metadata/static/components/syn-accordion/docs.md

@@ -0,0 +1,428 @@
+## Subheadline
+
+```html
+<syn-accordion size="medium">
+  <syn-details summary="First" open="" size="medium">
+    <h3
+      style="
+        margin: 0 0 var(--syn-spacing-x-small);
+        font: var(--syn-body-small-bold);
+        color: var(--syn-typography-color-text);
+      "
+    >
+      Subheadline
+    </h3>
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+    voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+  </syn-details>
+  <syn-details summary="Second" size="medium">
+    <h3
+      style="
+        margin: 0 0 var(--syn-spacing-x-small);
+        font: var(--syn-body-small-bold);
+        color: var(--syn-typography-color-text);
+      "
+    >
+      Subheadline
+    </h3>
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+    voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+  </syn-details>
+  <syn-details summary="Third" size="medium">
+    <h3
+      style="
+        margin: 0 0 var(--syn-spacing-x-small);
+        font: var(--syn-body-small-bold);
+        color: var(--syn-typography-color-text);
+      "
+    >
+      Subheadline
+    </h3>
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+    voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+  </syn-details>
+</syn-accordion>
+```
+
+---
+
+## Default
+
+Accordion is a group of syn-details to show a brief summary and expand to show additional content.
+
+```html
+<syn-accordion size="medium">
+  <syn-details summary="First" open="" size="medium">
+    <h3
+      style="
+        margin: 0 0 var(--syn-spacing-x-small);
+        font: var(--syn-body-small-bold);
+        color: var(--syn-typography-color-text);
+      "
+    >
+      Subheadline
+    </h3>
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+    voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+  </syn-details>
+  <syn-details summary="Second" size="medium">
+    <h3
+      style="
+        margin: 0 0 var(--syn-spacing-x-small);
+        font: var(--syn-body-small-bold);
+        color: var(--syn-typography-color-text);
+      "
+    >
+      Subheadline
+    </h3>
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+    voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+  </syn-details>
+  <syn-details summary="Third" size="medium">
+    <h3
+      style="
+        margin: 0 0 var(--syn-spacing-x-small);
+        font: var(--syn-body-small-bold);
+        color: var(--syn-typography-color-text);
+      "
+    >
+      Subheadline
+    </h3>
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+    voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+  </syn-details>
+</syn-accordion>
+```
+
+---
+
+## Contained
+
+To give content more structure, you can use the property contained.
+
+```html
+<syn-accordion contained="" size="medium">
+  <syn-details open="" size="medium" contained="">
+    <span slot="summary">Accordion Element</span>
+    <h3
+      style="
+        margin: 0 0 var(--syn-spacing-x-small);
+        font: var(--syn-body-small-bold);
+        color: var(--syn-typography-color-text);
+      "
+    >
+      Subheadline
+    </h3>
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+    voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+  </syn-details>
+  <syn-details size="medium" contained="">
+    <span slot="summary">Accordion Element</span>
+    <h3
+      style="
+        margin: 0 0 var(--syn-spacing-x-small);
+        font: var(--syn-body-small-bold);
+        color: var(--syn-typography-color-text);
+      "
+    >
+      Subheadline
+    </h3>
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+    voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+  </syn-details>
+  <syn-details size="medium" contained="">
+    <span slot="summary">Accordion Element</span>
+    <h3
+      style="
+        margin: 0 0 var(--syn-spacing-x-small);
+        font: var(--syn-body-small-bold);
+        color: var(--syn-typography-color-text);
+      "
+    >
+      Subheadline
+    </h3>
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+    voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+  </syn-details>
+</syn-accordion>
+```
+
+---
+
+## Grouping Details
+
+Set the close-others property to true to ensure only one detail is open at a time.
+
+```html
+<syn-accordion close-others="" size="medium">
+  <syn-details summary="First" open="" size="medium">
+    <h3
+      style="
+        margin: 0 0 var(--syn-spacing-x-small);
+        font: var(--syn-body-small-bold);
+        color: var(--syn-typography-color-text);
+      "
+    >
+      Subheadline
+    </h3>
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+    voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+  </syn-details>
+  <syn-details summary="Second" size="medium">
+    <h3
+      style="
+        margin: 0 0 var(--syn-spacing-x-small);
+        font: var(--syn-body-small-bold);
+        color: var(--syn-typography-color-text);
+      "
+    >
+      Subheadline
+    </h3>
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+    voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+  </syn-details>
+  <syn-details summary="Third" size="medium">
+    <h3
+      style="
+        margin: 0 0 var(--syn-spacing-x-small);
+        font: var(--syn-body-small-bold);
+        color: var(--syn-typography-color-text);
+      "
+    >
+      Subheadline
+    </h3>
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+    voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+  </syn-details>
+</syn-accordion>
+```
+
+---
+
+## Focus
+
+The focus event gives the user feedback that the detail has been focused by the keyboard interaction.
+
+```html
+<div style="padding: 5px">
+  <syn-accordion size="medium">
+    <syn-details summary="Accordion Element" size="medium">
+      <h3
+        style="
+          margin: 0 0 var(--syn-spacing-x-small);
+          font: var(--syn-body-small-bold);
+          color: var(--syn-typography-color-text);
+        "
+      >
+        Subheadline
+      </h3>
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+      voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+    </syn-details>
+    <syn-details summary="Accordion Element" size="medium">
+      <h3
+        style="
+          margin: 0 0 var(--syn-spacing-x-small);
+          font: var(--syn-body-small-bold);
+          color: var(--syn-typography-color-text);
+        "
+      >
+        Subheadline
+      </h3>
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+      voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+    </syn-details>
+    <syn-details summary="Accordion Element" size="medium">
+      <h3
+        style="
+          margin: 0 0 var(--syn-spacing-x-small);
+          font: var(--syn-body-small-bold);
+          color: var(--syn-typography-color-text);
+        "
+      >
+        Subheadline
+      </h3>
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+      voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+    </syn-details>
+  </syn-accordion>
+</div>
+```
+
+---
+
+## Disabled
+
+Use the disable attribute to prevent the details from expanding.
+
+```html
+<syn-accordion size="medium">
+  <syn-details summary="Accordion Element" size="medium">
+    <h3
+      style="
+        margin: 0 0 var(--syn-spacing-x-small);
+        font: var(--syn-body-small-bold);
+        color: var(--syn-typography-color-text);
+      "
+    >
+      Subheadline
+    </h3>
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+    voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+  </syn-details>
+  <syn-details summary="Accordion Element" disabled="" size="medium">
+    <h3
+      style="
+        margin: 0 0 var(--syn-spacing-x-small);
+        font: var(--syn-body-small-bold);
+        color: var(--syn-typography-color-text);
+      "
+    >
+      Subheadline
+    </h3>
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+    voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+  </syn-details>
+  <syn-details summary="Accordion Element" size="medium">
+    <h3
+      style="
+        margin: 0 0 var(--syn-spacing-x-small);
+        font: var(--syn-body-small-bold);
+        color: var(--syn-typography-color-text);
+      "
+    >
+      Subheadline
+    </h3>
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+    voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+  </syn-details>
+</syn-accordion>
+```
+
+---
+
+## Sizes
+
+Use the size attribute to change a detail’s size. The size attribute should not be mixed within an accordion
+
+```html
+<syn-accordion class="accordion-size" size="medium">
+  <syn-details size="medium">
+    <span slot="summary">Accordion Element</span>
+    <h3
+      style="
+        margin: 0 0 var(--syn-spacing-x-small);
+        font: var(--syn-body-small-bold);
+        color: var(--syn-typography-color-text);
+      "
+    >
+      Subheadline
+    </h3>
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+    voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+  </syn-details>
+  <syn-details size="medium">
+    <span slot="summary">Accordion Element</span>
+    <h3
+      style="
+        margin: 0 0 var(--syn-spacing-x-small);
+        font: var(--syn-body-small-bold);
+        color: var(--syn-typography-color-text);
+      "
+    >
+      Subheadline
+    </h3>
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+    voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+  </syn-details>
+  <syn-details size="medium">
+    <span slot="summary">Accordion Element</span>
+    <h3
+      style="
+        margin: 0 0 var(--syn-spacing-x-small);
+        font: var(--syn-body-small-bold);
+        color: var(--syn-typography-color-text);
+      "
+    >
+      Subheadline
+    </h3>
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+    voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+  </syn-details>
+</syn-accordion>
+
+<syn-accordion class="accordion-size" size="large">
+  <syn-details size="large">
+    <span slot="summary">Accordion Element</span>
+    <h3
+      style="
+        margin: 0 0 var(--syn-spacing-x-small);
+        font: var(--syn-body-small-bold);
+        color: var(--syn-typography-color-text);
+      "
+    >
+      Subheadline
+    </h3>
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+    voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+  </syn-details>
+  <syn-details size="large">
+    <span slot="summary">Accordion Element</span>
+    <h3
+      style="
+        margin: 0 0 var(--syn-spacing-x-small);
+        font: var(--syn-body-small-bold);
+        color: var(--syn-typography-color-text);
+      "
+    >
+      Subheadline
+    </h3>
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+    voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+  </syn-details>
+  <syn-details size="large">
+    <span slot="summary">Accordion Element</span>
+    <h3
+      style="
+        margin: 0 0 var(--syn-spacing-x-small);
+        font: var(--syn-body-small-bold);
+        color: var(--syn-typography-color-text);
+      "
+    >
+      Subheadline
+    </h3>
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+    voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+  </syn-details>
+</syn-accordion>
+
+<style>
+  .accordion-size:not(:first-of-type) {
+    margin-top: var(--syn-spacing-2x-large);
+  }
+</style>
+```

package/metadata/static/components/syn-alert/docs.md

@@ -0,0 +1,231 @@
+## Default
+
+Alerts are used to display important messages inline or as toast notifications.
+
+```html
+<syn-alert open="" variant="primary">
+  This is a standard alert. You can customize its content and even the icon.
+  <syn-icon
+    slot="icon"
+    name="info"
+    aria-hidden="true"
+    library="default"
+  ></syn-icon>
+</syn-alert>
+```
+
+---
+
+## Variants
+
+Set the variant attribute to change the alert’s variant.
+
+```html
+<div
+  style="display: flex; flex-direction: column; gap: var(--syn-spacing-medium)"
+>
+  <syn-alert variant="primary" open="" id="something">
+    <syn-icon
+      slot="icon"
+      name="info"
+      aria-hidden="true"
+      library="default"
+    ></syn-icon>
+    <strong>This is super informative</strong><br />
+    You can tell by how pretty the alert is.
+  </syn-alert>
+
+  <syn-alert variant="success" open="">
+    <syn-icon
+      slot="icon"
+      name="check_circle"
+      aria-hidden="true"
+      library="default"
+    ></syn-icon>
+    <strong>Your changes have been saved</strong><br />
+    You can safely exit the app now.
+  </syn-alert>
+
+  <syn-alert variant="neutral" open="">
+    <syn-icon
+      slot="icon"
+      name="settings"
+      aria-hidden="true"
+      library="default"
+    ></syn-icon>
+    <strong>Your settings have been updated</strong><br />
+    Settings will take effect on next login.
+  </syn-alert>
+
+  <syn-alert variant="warning" open="">
+    <syn-icon
+      slot="icon"
+      name="warning"
+      aria-hidden="true"
+      library="default"
+    ></syn-icon>
+    <strong>Your session has ended</strong><br />
+    Please login again to continue.
+  </syn-alert>
+
+  <syn-alert variant="danger" open="">
+    <syn-icon
+      slot="icon"
+      name="error"
+      aria-hidden="true"
+      library="default"
+    ></syn-icon>
+    <strong>Your account has been deleted</strong><br />
+    We're very sorry to see you go!
+  </syn-alert>
+</div>
+<style>
+  #something::part(base) {
+    overflow: hidden;
+  }
+</style>
+```
+
+---
+
+## Closable
+
+Add the closable attribute to show a close button that will hide the alert.
+
+```html
+<syn-alert variant="primary" open="" closable="" class="alert-closable">
+  <syn-icon
+    slot="icon"
+    name="info"
+    aria-hidden="true"
+    library="default"
+  ></syn-icon>
+  You can close this alert any time!
+</syn-alert>
+```
+
+---
+
+## Without Icons
+
+Icons are optional. Simply omit the icon slot if you don’t want them.
+
+```html
+<syn-alert variant="primary" open="">
+  Nothing fancy here, just a simple alert.
+</syn-alert>
+```
+
+---
+
+## Duration
+
+Set the duration attribute to automatically hide an alert after a period of time. This is useful for alerts that don’t require acknowledgement.
+
+```html
+<div class="alert-duration">
+  <syn-button variant="outline" title="" size="medium">Show Alert</syn-button>
+
+  <syn-alert variant="primary" duration="3000" closable="">
+    <syn-icon
+      slot="icon"
+      name="info"
+      aria-hidden="true"
+      library="default"
+    ></syn-icon>
+    This alert will automatically hide itself after three seconds, unless you
+    interact with it.
+  </syn-alert>
+</div>
+
+<style>
+  .alert-duration syn-alert {
+    margin-top: var(--syn-spacing-small);
+  }
+</style>
+```
+
+---
+
+## Toast Notifications
+
+To display an alert as a toast notification, or “toast”, create the alert and call its toast() method. This will move the alert out of its position in the DOM and into the toast stack where it will be shown. Once dismissed, it will be removed from the DOM completely. To reuse a toast, store a reference to it and call toast() again later on.You should always use the closable attribute so users can dismiss the notification. It’s also common to set a reasonable duration when the notification doesn’t require acknowledgement.
+
+```html
+<div class="alert-toast">
+  <div style="display: flex; gap: var(--syn-spacing-small)">
+    <syn-button title="" variant="outline" size="medium">Primary</syn-button>
+    <syn-button title="" variant="outline" size="medium">Success</syn-button>
+    <syn-button title="" variant="outline" size="medium">Neutral</syn-button>
+    <syn-button title="" variant="outline" size="medium">Warning</syn-button>
+    <syn-button title="" variant="outline" size="medium">Danger</syn-button>
+  </div>
+
+  <syn-alert variant="primary" duration="3000" closable="">
+    <syn-icon
+      slot="icon"
+      name="info"
+      aria-hidden="true"
+      library="default"
+    ></syn-icon>
+    <strong>This is super informative</strong><br />
+    You can tell by how pretty the alert is.
+  </syn-alert>
+
+  <syn-alert variant="success" duration="3000" closable="">
+    <syn-icon
+      slot="icon"
+      name="check_circle"
+      aria-hidden="true"
+      library="default"
+    ></syn-icon>
+    <strong>Your changes have been saved</strong><br />
+    You can safely exit the app now.
+  </syn-alert>
+
+  <syn-alert variant="neutral" duration="3000" closable="">
+    <syn-icon
+      slot="icon"
+      name="settings"
+      aria-hidden="true"
+      library="default"
+    ></syn-icon>
+    <strong>Your settings have been updated</strong><br />
+    Settings will take effect on next login.
+  </syn-alert>
+
+  <syn-alert variant="warning" duration="3000" closable="">
+    <syn-icon
+      slot="icon"
+      name="warning"
+      aria-hidden="true"
+      library="default"
+    ></syn-icon>
+    <strong>Your session has ended</strong><br />
+    Please login again to continue.
+  </syn-alert>
+
+  <syn-alert variant="danger" duration="3000" closable="">
+    <syn-icon
+      slot="icon"
+      name="error"
+      aria-hidden="true"
+      library="default"
+    ></syn-icon>
+    <strong>Your account has been deleted</strong><br />
+    We're very sorry to see you go!
+  </syn-alert>
+</div>
+```
+
+---
+
+## Creating Toasts Imperatively
+
+For convenience, you can create a utility that emits toast notifications with a function call rather than composing them in your HTML. To do this, generate the alert with JavaScript, append it to the body, and call the toast() method as shown in the example below.
+
+```html
+<div class="alert-toast-wrapper">
+  <syn-button title="" variant="outline" size="medium">Create Toast</syn-button>
+</div>
+```