@synergy-design-system/mcp 2.15.0 → 3.0.0

package/metadata/static/components/syn-tab-panel/docs.md

@@ -1,91 +0,0 @@
-## Default
-
-Tab panels are used inside tab groups to display tabbed content.
-
-```html
-<syn-tab-group>
-  <syn-tab
-    slot="nav"
-    panel="tab1"
-    role="tab"
-    aria-disabled="false"
-    aria-selected="false"
-    id="syn-tab-13"
-    tabindex="0"
-    >Tab Item</syn-tab
-  >
-  <syn-tab
-    slot="nav"
-    panel="tab2"
-    role="tab"
-    aria-disabled="false"
-    aria-selected="false"
-    id="syn-tab-14"
-    tabindex="0"
-    >Tab Item</syn-tab
-  >
-  <syn-tab
-    slot="nav"
-    panel="tab3"
-    role="tab"
-    aria-disabled="false"
-    aria-selected="false"
-    id="syn-tab-15"
-    tabindex="0"
-    >Tab Item</syn-tab
-  >
-  <syn-tab
-    slot="nav"
-    panel="tab4"
-    role="tab"
-    aria-disabled="false"
-    aria-selected="false"
-    id="syn-tab-16"
-    tabindex="0"
-    >Tab Item</syn-tab
-  >
-
-  <syn-tab-panel
-    name="tab1"
-    id="syn-tab-panel-16"
-    role="tabpanel"
-    aria-hidden="true"
-  >
-    <main class="synergy-replace">Replace this slot</main>
-  </syn-tab-panel>
-
-  <syn-tab-panel
-    name="tab2"
-    id="syn-tab-panel-13"
-    role="tabpanel"
-    aria-hidden="true"
-    ><main class="synergy-replace">Replace this slot</main></syn-tab-panel
-  >
-  <syn-tab-panel
-    name="tab3"
-    id="syn-tab-panel-14"
-    role="tabpanel"
-    aria-hidden="true"
-    ><main class="synergy-replace">Replace this slot</main></syn-tab-panel
-  >
-  <syn-tab-panel
-    name="tab4"
-    id="syn-tab-panel-15"
-    role="tabpanel"
-    aria-hidden="true"
-    ><main class="synergy-replace">Replace this slot</main></syn-tab-panel
-  >
-</syn-tab-group>
-<style>
-  .synergy-replace {
-    border: 1px dashed #9747ff;
-    border-radius: var(--syn-border-radius-small);
-    color: #9747ff;
-    font: var(--syn-body-small-bold);
-    height: var(--syn-spacing-x-large);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-</style>
-```

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

@@ -1,50 +0,0 @@
-## Default
-
-Tags are used as labels to organize things or to indicate a selection.
-
-```html
-<syn-tag size="medium"> Option </syn-tag>
-```
-
----
-
-## With Icon
-
-```html
-<syn-tag size="medium">
-  <syn-icon name="wallpaper" aria-hidden="true" library="default"></syn-icon>
-  Option
-</syn-tag>
-```
-
----
-
-## Removable
-
-Use the removable attribute to add a remove button to the tag.
-
-```html
-<div class="tags-removable">
-  <syn-tag size="small" removable="">Small</syn-tag>
-  <syn-tag size="medium" removable="">Medium</syn-tag>
-  <syn-tag size="large" removable="">Large</syn-tag>
-</div>
-
-<style>
-  .tags-removable syn-tag {
-    transition: var(--syn-transition-medium) opacity;
-  }
-</style>
-```
-
----
-
-## Sizes
-
-Use the size attribute to change a tab’s size.
-
-```html
-<syn-tag size="small">Small</syn-tag>
-<syn-tag size="medium">Medium</syn-tag>
-<syn-tag size="large">Large</syn-tag>
-```

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

@@ -1,269 +0,0 @@
-## Default
-
-A tag group is used to display multiple tags that belong together, often representing selected filters, categories, or user‑generated labels. It arranges tags in flexible rows and supports different sizes and layouts. Tags can be removable, icon based, or purely textual.
-
-```html
-<syn-tag-group label-position="top" size="medium">
-  <syn-tag removable="" size="medium">
-    <syn-icon name="wallpaper" aria-hidden="true" library="default"></syn-icon>
-    Option
-  </syn-tag>
-  <syn-tag removable="" size="medium">
-    <syn-icon name="wallpaper" aria-hidden="true" library="default"></syn-icon>
-    Option
-  </syn-tag>
-  <syn-tag removable="" size="medium">
-    <syn-icon name="wallpaper" aria-hidden="true" library="default"></syn-icon>
-    Option
-  </syn-tag>
-  <syn-tag removable="" size="medium">
-    <syn-icon name="wallpaper" aria-hidden="true" library="default"></syn-icon>
-    Option
-  </syn-tag>
-  <syn-tag removable="" size="medium">
-    <syn-icon name="wallpaper" aria-hidden="true" library="default"></syn-icon>
-    Option
-  </syn-tag>
-  <syn-tag removable="" size="medium">
-    <syn-icon name="wallpaper" aria-hidden="true" library="default"></syn-icon>
-    Option
-  </syn-tag>
-  <span slot="label">This is a label</span>
-</syn-tag-group>
-```
-
----
-
-## Labels
-
-Use the label attribute to give the tag-group an accessible label. For labels that contain HTML, use the label slot instead.
-
-```html
-<syn-tag-group label-position="top" size="medium">
-  <div slot="label">This is a label</div>
-  <syn-tag removable="" size="medium">
-    <syn-icon name="wallpaper" aria-hidden="true" library="default"></syn-icon>
-    Option
-  </syn-tag>
-  <syn-tag removable="" size="medium">
-    <syn-icon name="wallpaper" aria-hidden="true" library="default"></syn-icon>
-    Option
-  </syn-tag>
-  <syn-tag removable="" size="medium">
-    <syn-icon name="wallpaper" aria-hidden="true" library="default"></syn-icon>
-    Option
-  </syn-tag>
-  <syn-tag removable="" size="medium">
-    <syn-icon name="wallpaper" aria-hidden="true" library="default"></syn-icon>
-    Option
-  </syn-tag>
-  <syn-tag removable="" size="medium">
-    <syn-icon name="wallpaper" aria-hidden="true" library="default"></syn-icon>
-    Option
-  </syn-tag>
-  <syn-tag removable="" size="medium">
-    <syn-icon name="wallpaper" aria-hidden="true" library="default"></syn-icon>
-    Option
-  </syn-tag>
-</syn-tag-group>
-```
-
----
-
-## Sizes
-
-Use the size attribute to change a tag group’s size.
-
-```html
-<div
-  style="display: flex; flex-direction: column; gap: var(--syn-spacing-x-large)"
->
-  <syn-tag-group size="small" label="Small" label-position="top">
-    <syn-tag removable="" size="small">
-      <syn-icon
-        name="wallpaper"
-        aria-hidden="true"
-        library="default"
-      ></syn-icon>
-      Option
-    </syn-tag>
-    <syn-tag removable="" size="small">
-      <syn-icon
-        name="wallpaper"
-        aria-hidden="true"
-        library="default"
-      ></syn-icon>
-      Option
-    </syn-tag>
-    <syn-tag removable="" size="small">
-      <syn-icon
-        name="wallpaper"
-        aria-hidden="true"
-        library="default"
-      ></syn-icon>
-      Option
-    </syn-tag>
-    <syn-tag removable="" size="small">
-      <syn-icon
-        name="wallpaper"
-        aria-hidden="true"
-        library="default"
-      ></syn-icon>
-      Option
-    </syn-tag>
-    <syn-tag removable="" size="small">
-      <syn-icon
-        name="wallpaper"
-        aria-hidden="true"
-        library="default"
-      ></syn-icon>
-      Option
-    </syn-tag>
-    <syn-tag removable="" size="small">
-      <syn-icon
-        name="wallpaper"
-        aria-hidden="true"
-        library="default"
-      ></syn-icon>
-      Option
-    </syn-tag>
-  </syn-tag-group>
-
-  <syn-tag-group size="medium" label="Medium" label-position="top">
-    <syn-tag removable="" size="medium">
-      <syn-icon
-        name="wallpaper"
-        aria-hidden="true"
-        library="default"
-      ></syn-icon>
-      Option
-    </syn-tag>
-    <syn-tag removable="" size="medium">
-      <syn-icon
-        name="wallpaper"
-        aria-hidden="true"
-        library="default"
-      ></syn-icon>
-      Option
-    </syn-tag>
-    <syn-tag removable="" size="medium">
-      <syn-icon
-        name="wallpaper"
-        aria-hidden="true"
-        library="default"
-      ></syn-icon>
-      Option
-    </syn-tag>
-    <syn-tag removable="" size="medium">
-      <syn-icon
-        name="wallpaper"
-        aria-hidden="true"
-        library="default"
-      ></syn-icon>
-      Option
-    </syn-tag>
-    <syn-tag removable="" size="medium">
-      <syn-icon
-        name="wallpaper"
-        aria-hidden="true"
-        library="default"
-      ></syn-icon>
-      Option
-    </syn-tag>
-    <syn-tag removable="" size="medium">
-      <syn-icon
-        name="wallpaper"
-        aria-hidden="true"
-        library="default"
-      ></syn-icon>
-      Option
-    </syn-tag>
-  </syn-tag-group>
-
-  <syn-tag-group size="large" label="Large" label-position="top">
-    <syn-tag removable="" size="large">
-      <syn-icon
-        name="wallpaper"
-        aria-hidden="true"
-        library="default"
-      ></syn-icon>
-      Option
-    </syn-tag>
-    <syn-tag removable="" size="large">
-      <syn-icon
-        name="wallpaper"
-        aria-hidden="true"
-        library="default"
-      ></syn-icon>
-      Option
-    </syn-tag>
-    <syn-tag removable="" size="large">
-      <syn-icon
-        name="wallpaper"
-        aria-hidden="true"
-        library="default"
-      ></syn-icon>
-      Option
-    </syn-tag>
-    <syn-tag removable="" size="large">
-      <syn-icon
-        name="wallpaper"
-        aria-hidden="true"
-        library="default"
-      ></syn-icon>
-      Option
-    </syn-tag>
-    <syn-tag removable="" size="large">
-      <syn-icon
-        name="wallpaper"
-        aria-hidden="true"
-        library="default"
-      ></syn-icon>
-      Option
-    </syn-tag>
-    <syn-tag removable="" size="large">
-      <syn-icon
-        name="wallpaper"
-        aria-hidden="true"
-        library="default"
-      ></syn-icon>
-      Option
-    </syn-tag>
-  </syn-tag-group>
-</div>
-```
-
----
-
-## Label Alignment
-
-Use the label-position attribute to change the position of the label. Use 'top' to place the label above the tags, or 'start' to place it to the begin of the tag group.
-
-```html
-<syn-tag-group label="This is a label" label-position="start" size="medium">
-  <syn-tag removable="" size="medium">
-    <syn-icon name="wallpaper" aria-hidden="true" library="default"></syn-icon>
-    Option
-  </syn-tag>
-  <syn-tag removable="" size="medium">
-    <syn-icon name="wallpaper" aria-hidden="true" library="default"></syn-icon>
-    Option
-  </syn-tag>
-  <syn-tag removable="" size="medium">
-    <syn-icon name="wallpaper" aria-hidden="true" library="default"></syn-icon>
-    Option
-  </syn-tag>
-  <syn-tag removable="" size="medium">
-    <syn-icon name="wallpaper" aria-hidden="true" library="default"></syn-icon>
-    Option
-  </syn-tag>
-  <syn-tag removable="" size="medium">
-    <syn-icon name="wallpaper" aria-hidden="true" library="default"></syn-icon>
-    Option
-  </syn-tag>
-  <syn-tag removable="" size="medium">
-    <syn-icon name="wallpaper" aria-hidden="true" library="default"></syn-icon>
-    Option
-  </syn-tag>
-</syn-tag-group>
-```

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

@@ -1,215 +0,0 @@
-## Default
-
-Textareas collect data from the user and allow multiple lines of text.
-
-```html
-<syn-textarea
-  rows="4"
-  spellcheck=""
-  title=""
-  size="medium"
-  form=""
-></syn-textarea>
-```
-
----
-
-## Labels
-
-Use the label attribute to give the textarea an accessible label. For labels that contain HTML, use the label slot instead.
-
-```html
-<syn-textarea label="Comments" title="" size="medium" form=""></syn-textarea>
-```
-
----
-
-## Help Text
-
-Add descriptive help text to a switch with the help-text attribute. For help texts that contain HTML, use the help-text slot instead.The help-text attribute should not be used to display error messages. To handle validation and error messaging, use syn-validate for proper error management.
-
-```html
-<syn-textarea
-  label="Feedback"
-  help-text="Please tell us what you think."
-  title=""
-  size="medium"
-  form=""
->
-</syn-textarea>
-```
-
----
-
-## Rows
-
-Use the rows attribute to change the number of text rows that get shown.
-
-```html
-<syn-textarea
-  rows="1"
-  placeholder="One row shown"
-  title=""
-  size="medium"
-  form=""
-></syn-textarea>
-<syn-textarea
-  rows="5"
-  placeholder="Five rows shown"
-  title=""
-  size="medium"
-  form=""
-></syn-textarea>
-<syn-textarea
-  rows="3"
-  placeholder="Three rows shown"
-  title=""
-  size="medium"
-  form=""
-></syn-textarea>
-<style>
-  syn-textarea {
-    margin-bottom: 1rem;
-  }
-</style>
-```
-
----
-
-## Placeholders
-
-Use the placeholder attribute to add a placeholder.
-
-```html
-<syn-textarea
-  placeholder="Type something"
-  title=""
-  size="medium"
-  form=""
-></syn-textarea>
-```
-
----
-
-## Readonly Textareas
-
-Add the readonly attribute to draw a read-only textarea.
-
-```html
-<syn-textarea
-  value="Read-only content"
-  readonly=""
-  title=""
-  size="medium"
-  form=""
-></syn-textarea>
-```
-
----
-
-## Focus
-
-The focus event gives the user feedback that the Textarea has been focused by the keyboard interaction and that the Textarea component is ready for use.
-
-```html
-<div style="padding: 5px">
-  <form>
-    <syn-textarea
-      placeholder="This is in focus"
-      title=""
-      size="medium"
-      form=""
-    ></syn-textarea>
-  </form>
-</div>
-```
-
----
-
-## Disabled
-
-Use the disabled attribute to disable a textarea.
-
-```html
-<syn-textarea
-  placeholder="Textarea"
-  help-text="Please tell us what you think."
-  label="Label"
-  disabled=""
-  title=""
-  size="medium"
-  form=""
-></syn-textarea>
-```
-
----
-
-## Sizes
-
-Use the size attribute to change a textarea’s size.
-
-```html
-<syn-textarea placeholder="Small" size="small" title="" form=""></syn-textarea
-><br />
-<syn-textarea placeholder="Medium" size="medium" title="" form=""></syn-textarea
-><br />
-<syn-textarea placeholder="Large" size="large" title="" form=""></syn-textarea>
-```
-
----
-
-## Invalid
-
-The invalid status is used to warn the user that the input is invalid. For example, if the entry of text is mandatory and nothing has been entered or if a text has been entered that does not have the correct format.
-
-```html
-<form class="custom-validity">
-  <syn-textarea
-    placeholder="Type something"
-    help-text="This textarea is required."
-    required=""
-    title=""
-    size="medium"
-    form=""
-  ></syn-textarea>
-  <syn-button type="submit" variant="filled" title="" size="medium"
-    >Submit</syn-button
-  >
-</form>
-<style>
-  .custom-validity {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-  }
-  syn-button {
-    align-self: flex-start;
-  }
-</style>
-```
-
----
-
-## Prevent Resizing
-
-By default, textareas can be resized vertically by the user. To prevent resizing, set the resize attribute to none.
-
-```html
-<syn-textarea resize="none" title="" size="medium" form=""></syn-textarea>
-```
-
----
-
-## Expand With Content
-
-Textareas will automatically resize to expand to fit their content when resize is set to auto.
-
-```html
-<syn-textarea
-  resize="auto"
-  placeholder="Type something"
-  title=""
-  size="medium"
-  form=""
-></syn-textarea>
-```