@synergy-design-system/mcp 2.14.1 → 3.0.0

package/metadata/static/components/syn-button-group/docs.md

@@ -1,259 +0,0 @@
-## Default
-
-Button groups can be used to group related buttons into sections.
-
-```html
-<syn-button-group size="medium" variant="outline">
-  <syn-button title="" variant="outline" size="medium">Left</syn-button>
-  <syn-button title="" variant="outline" size="medium">Center</syn-button>
-  <syn-button title="" variant="outline" size="medium">Right</syn-button>
-</syn-button-group>
-```
-
----
-
-## Variants
-
-Use the variant attribute to set the button’s variant. Variants can be Filled, Outline. There is no Text variant.
-
-```html
-<div
-  style="display: flex; gap: var(--syn-spacing-large); flex-direction: column"
->
-  <syn-button-group variant="outline" label="Variant (outline)" size="medium">
-    <syn-button title="" variant="outline" size="medium">Left</syn-button>
-    <syn-button title="" variant="outline" size="medium">Center</syn-button>
-    <syn-button title="" variant="outline" size="medium">Right</syn-button>
-  </syn-button-group>
-
-  <syn-button-group variant="filled" label="Variant (filled)" size="medium">
-    <syn-button title="" variant="filled" size="medium">Left</syn-button>
-    <syn-button title="" variant="filled" size="medium">Center</syn-button>
-    <syn-button title="" variant="filled" size="medium">Right</syn-button>
-  </syn-button-group>
-</div>
-```
-
----
-
-## Button Sizes
-
-All button sizes are supported. The size of the button-group will be used to determine the size of the buttons.
-
-```html
-<div
-  style="display: flex; gap: var(--syn-spacing-large); flex-direction: column"
->
-  <syn-button-group size="small" label="Alignment (small)" variant="outline">
-    <syn-button title="" variant="outline" size="small">Left</syn-button>
-    <syn-button title="" variant="outline" size="small">Center</syn-button>
-    <syn-button title="" variant="outline" size="small">Right</syn-button>
-  </syn-button-group>
-
-  <syn-button-group size="medium" label="Alignment (medium)" variant="outline">
-    <syn-button title="" variant="outline" size="medium">Left</syn-button>
-    <syn-button title="" variant="outline" size="medium">Center</syn-button>
-    <syn-button title="" variant="outline" size="medium">Right</syn-button>
-  </syn-button-group>
-
-  <syn-button-group size="large" label="Alignment (large)" variant="outline">
-    <syn-button title="" variant="outline" size="large">Left</syn-button>
-    <syn-button title="" variant="outline" size="large">Center</syn-button>
-    <syn-button title="" variant="outline" size="large">Right</syn-button>
-  </syn-button-group>
-</div>
-```
-
----
-
-## Dropdowns In Button Groups
-
- Dropdowns can be placed inside button groups as long as the trigger is an <syn-button> element. 
-
-```html
-<syn-button-group label="Example Button Group" size="medium" variant="outline">
-  <syn-button title="" variant="outline" size="medium">Button</syn-button>
-  <syn-button title="" variant="outline" size="medium">Button</syn-button>
-  <syn-dropdown placement="bottom-end">
-    <syn-button slot="trigger" caret="" title="" variant="outline" size="medium"
-      >Dropdown</syn-button
-    >
-    <syn-menu role="menu">
-      <syn-menu-item role="menuitem" aria-disabled="false" tabindex="0"
-        >Save</syn-menu-item
-      >
-      <syn-menu-item role="menuitem" aria-disabled="false" tabindex="-1"
-        >Save as…</syn-menu-item
-      >
-      <syn-menu-item role="menuitem" aria-disabled="false" tabindex="-1"
-        >Save all</syn-menu-item
-      >
-    </syn-menu>
-  </syn-dropdown>
-</syn-button-group>
-```
-
----
-
-## Split Buttons
-
-Create a split button using a button and a dropdown. Use a visually hidden label to ensure the dropdown is accessible to users with assistive devices.
-
-```html
-<syn-button-group label="Example Button Group" size="medium" variant="outline">
-  <syn-button title="" variant="outline" size="medium">Save</syn-button>
-  <syn-dropdown placement="bottom-end">
-    <syn-button
-      slot="trigger"
-      variant="outline"
-      caret=""
-      title=""
-      size="medium"
-    ></syn-button>
-    <syn-menu role="menu">
-      <syn-menu-item role="menuitem" aria-disabled="false" tabindex="0"
-        >Save</syn-menu-item
-      >
-      <syn-menu-item role="menuitem" aria-disabled="false" tabindex="-1"
-        >Save as…</syn-menu-item
-      >
-      <syn-menu-item role="menuitem" aria-disabled="false" tabindex="-1"
-        >Save all</syn-menu-item
-      >
-    </syn-menu>
-  </syn-dropdown>
-</syn-button-group>
-```
-
----
-
-## Tooltips In Button Groups
-
-Buttons can be wrapped in tooltips to provide more detail when the user interacts with them.
-
-```html
-<syn-button-group label="Example Button Group" size="medium" variant="outline">
-  <syn-tooltip content="I am on the left">
-    <syn-button title="" variant="outline" size="medium">Left</syn-button>
-  </syn-tooltip>
-  <syn-tooltip content="I am in the center">
-    <syn-button title="" variant="outline" size="medium">Center</syn-button>
-  </syn-tooltip>
-  <syn-tooltip content="I am on the right">
-    <syn-button title="" variant="outline" size="medium">Right</syn-button>
-  </syn-tooltip>
-</syn-button-group>
-```
-
----
-
-## Toolbar Example
-
-Create interactive toolbars with button groups.
-
-```html
-<div class="button-group-toolbar">
-  <syn-button-group label="Download and save" size="medium" variant="outline">
-    <syn-tooltip content="Save">
-      <syn-button title="" variant="outline" size="medium"
-        ><syn-icon
-          name="save"
-          label="Save"
-          role="img"
-          aria-label="Save"
-          library="default"
-        ></syn-icon
-      ></syn-button>
-    </syn-tooltip>
-    <syn-tooltip content="Download">
-      <syn-button title="" variant="outline" size="medium"
-        ><syn-icon
-          name="save_alt"
-          label="Download"
-          role="img"
-          aria-label="Download"
-          library="default"
-        ></syn-icon
-      ></syn-button>
-    </syn-tooltip>
-  </syn-button-group>
-
-  <syn-button-group label="Misc" size="medium" variant="outline">
-    <syn-tooltip content="Edit">
-      <syn-button title="" variant="outline" size="medium"
-        ><syn-icon
-          name="edit"
-          label="Edit"
-          role="img"
-          aria-label="Edit"
-          library="default"
-        ></syn-icon
-      ></syn-button>
-    </syn-tooltip>
-    <syn-tooltip content="Settings">
-      <syn-button title="" variant="outline" size="medium"
-        ><syn-icon
-          name="settings"
-          label="Settings"
-          role="img"
-          aria-label="Settings"
-          library="default"
-        ></syn-icon
-      ></syn-button>
-    </syn-tooltip>
-    <syn-tooltip content="Preview">
-      <syn-button title="" variant="outline" size="medium"
-        ><syn-icon
-          name="wallpaper"
-          label="Preview"
-          role="img"
-          aria-label="Preview"
-          library="default"
-        ></syn-icon
-      ></syn-button>
-    </syn-tooltip>
-  </syn-button-group>
-
-  <syn-button-group size="medium" variant="outline">
-    <syn-tooltip content="Add">
-      <syn-button title="" variant="outline" size="medium"
-        ><syn-icon
-          name="add"
-          label="Add"
-          role="img"
-          aria-label="Add"
-          library="default"
-        ></syn-icon
-      ></syn-button>
-    </syn-tooltip>
-    <syn-tooltip content="Info">
-      <syn-button title="" variant="outline" size="medium"
-        ><syn-icon
-          name="info"
-          label="Info"
-          role="img"
-          aria-label="Info"
-          library="default"
-        ></syn-icon
-      ></syn-button>
-    </syn-tooltip>
-    <syn-tooltip content="Upload File">
-      <syn-button title="" variant="outline" size="medium"
-        ><syn-icon
-          name="upload_file"
-          label="Upload File"
-          role="img"
-          aria-label="Upload File"
-          library="default"
-        ></syn-icon
-      ></syn-button>
-    </syn-tooltip>
-  </syn-button-group>
-</div>
-
-<style>
-  .button-group-toolbar syn-button-group:not(:last-of-type) {
-    margin-right: var(--syn-spacing-large);
-  }
-</style>
-```

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

@@ -1,314 +0,0 @@
-## Headline
-
-```html
-<syn-card>
-  <h3>Headline</h3>
-  These are some happy employees, but not just any employees. These are SICK
-  employees.
-
-  <span slot="footer"> </span>
-  <footer slot="footer">
-    <small>Optional information</small>
-    <nav>
-      <syn-button variant="filled" size="small" title="">More info</syn-button>
-    </nav>
-  </footer>
-  <span slot="footer"> </span>
-  <style slot="footer">
-    syn-card {
-      max-width: 400px;
-    }
-
-    syn-card footer {
-      align-items: center;
-      color: var(--syn-color-neutral-800);
-      display: flex;
-      gap: var(--syn-spacing-x-small);
-    }
-
-    syn-card h3 {
-      font: var(--syn-body-medium-bold) !important;
-      margin: 0 0 var(--syn-spacing-x-small) !important;
-    }
-
-    syn-card small {
-      font: var(--syn-body-x-small-regular);
-    }
-
-    syn-card footer nav {
-      display: flex;
-      flex: 1;
-      flex-wrap: wrap;
-      gap: var(--syn-spacing-x-small);
-      justify-content: flex-end;
-    }
-  </style>
-  <span slot="footer"> </span>
-  <img
-    slot="image"
-    src="https://synergy-design-system.github.io/card-example.jpg"
-    alt="Multiple persons having lunch in SICK Academy"
-  />
-</syn-card>
-```
-
----
-
-## Default
-
-Cards can be used to group related subjects in a container.
-
-```html
-<syn-card>
-  <h3>Headline</h3>
-  These are some happy employees, but not just any employees. These are SICK
-  employees.
-
-  <span slot="footer"> </span>
-  <footer slot="footer">
-    <small>Optional information</small>
-    <nav>
-      <syn-button variant="filled" size="small" title="">More info</syn-button>
-    </nav>
-  </footer>
-  <span slot="footer"> </span>
-  <style slot="footer">
-    syn-card {
-      max-width: 400px;
-    }
-
-    syn-card footer {
-      align-items: center;
-      color: var(--syn-color-neutral-800);
-      display: flex;
-      gap: var(--syn-spacing-x-small);
-    }
-
-    syn-card h3 {
-      font: var(--syn-body-medium-bold) !important;
-      margin: 0 0 var(--syn-spacing-x-small) !important;
-    }
-
-    syn-card small {
-      font: var(--syn-body-x-small-regular);
-    }
-
-    syn-card footer nav {
-      display: flex;
-      flex: 1;
-      flex-wrap: wrap;
-      gap: var(--syn-spacing-x-small);
-      justify-content: flex-end;
-    }
-  </style>
-  <span slot="footer"> </span>
-  <img
-    slot="image"
-    src="https://synergy-design-system.github.io/card-example.jpg"
-    alt="Multiple persons having lunch in SICK Academy"
-  />
-</syn-card>
-```
-
----
-
-## Basic Card
-
-Basic cards aren’t very exciting, but they can display any content you want them to.
-
-```html
-<syn-card class="card-basic">
-  This is just a basic card. No image, no header, and no footer. Just your
-  content.
-</syn-card>
-<style>
-  .card-basic {
-    max-width: 400px;
-  }
-</style>
-```
-
----
-
-## Card With Header
-
-Headers can be used to display titles and more.
-
-```html
-<syn-card class="card-header">
-  <div slot="header">
-    Header Title
-    <syn-icon-button
-      color="neutral"
-      name="share"
-      label="Share"
-      size="inherit"
-    ></syn-icon-button>
-  </div>
-
-  This card has a header. You can put all sorts of things in it!
-</syn-card>
-
-<style>
-  .card-header {
-    max-width: 400px;
-  }
-
-  .card-header [slot="header"] {
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .card-header h3 {
-    margin: 0;
-  }
-
-  .card-header syn-icon-button {
-    font-size: var(--syn-font-size-x-large);
-  }
-</style>
-```
-
----
-
-## Card With Footer
-
-Footers can be used to display actions, summaries, or other relevant content.
-
-```html
-<syn-card class="card-footer">
-  This card has a footer. You can put all sorts of things in it!
-
-  <footer slot="footer">
-    <small>Optional information</small>
-    <nav>
-      <syn-button variant="filled" size="small" title="">Preview</syn-button>
-    </nav>
-  </footer>
-  <style>
-    syn-card {
-      max-width: 400px;
-    }
-
-    syn-card footer {
-      align-items: center;
-      color: var(--syn-color-neutral-800);
-      display: flex;
-      gap: var(--syn-spacing-x-small);
-    }
-
-    syn-card h3 {
-      font: var(--syn-body-medium-bold) !important;
-      margin: 0 0 var(--syn-spacing-x-small) !important;
-    }
-
-    syn-card small {
-      font: var(--syn-body-x-small-regular);
-    }
-
-    syn-card footer nav {
-      display: flex;
-      flex: 1;
-      flex-wrap: wrap;
-      gap: var(--syn-spacing-x-small);
-      justify-content: flex-end;
-    }
-  </style>
-</syn-card>
-
-<style>
-  .card-footer {
-    max-width: 400px;
-  }
-</style>
-```
-
----
-
-## Images
-
-Cards accept an image slot. The image is displayed atop the card and stretches to fit.
-
-```html
-<syn-card class="card-image">
-  <img
-    slot="image"
-    src="https://synergy-design-system.github.io/card-example.jpg"
-    alt="Multiple persons having lunch in SICK Academy"
-  />
-  These are some happy employees, but not just any employees. These are SICK
-  employees.
-</syn-card>
-
-<style>
-  .card-image {
-    max-width: 400px;
-  }
-</style>
-```
-
----
-
-## Sharp Card
-
-Use the sharp variant attribute for the Card to Use a different style.
-
-```html
-<syn-card class="sharp-card" sharp="">
-  <img
-    slot="image"
-    src="https://synergy-design-system.github.io/card-example.jpg"
-    alt="Multiple persons having lunch in SICK Academy"
-  />
-  These are some happy employees, but not just any employees. These are SICK
-  employees.
-</syn-card>
-
-<style>
-  .sharp-card {
-    max-width: 400px;
-  }
-</style>
-```
-
----
-
-## Card With Shadow
-
-Use the shadow attribute to add a shadow.
-
-```html
-<div class="shadow-card-wrapper">
-  <syn-card shadow="">
-    <img
-      slot="image"
-      src="https://synergy-design-system.github.io/card-example.jpg"
-      alt="Multiple persons having lunch in SICK Academy"
-    />
-    These are some happy employees, but not just any employees. These are SICK
-    employees.
-  </syn-card>
-  <syn-card shadow="" sharp="">
-    <img
-      slot="image"
-      src="https://synergy-design-system.github.io/card-example.jpg"
-      alt="Multiple persons having lunch in SICK Academy"
-    />
-    These are some happy employees, but not just any employees. These are SICK
-    employees.
-  </syn-card>
-</div>
-
-<style>
-  .shadow-card-wrapper {
-    display: flex;
-    flex-direction: row;
-    gap: var(--syn-spacing-large);
-  }
-
-  .shadow-card-wrapper syn-card {
-    max-width: 400px;
-  }
-</style>
-```