@synergy-design-system/mcp 0.1.0 → 1.0.0

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

@@ -0,0 +1,91 @@
+## 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

@@ -0,0 +1,50 @@
+## 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-textarea/docs.md

@@ -0,0 +1,215 @@
+## 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 read-only 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>
+```

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

@@ -0,0 +1,144 @@
+## Default
+
+Tooltips display additional information based on a specific action.A tooltip’s target is its first child element, so you should only wrap one element inside of the tooltip. If you need the tooltip to show up for multiple elements, nest them inside a container first.Tooltips use display: contents so they won’t interfere with how elements are positioned in a flex or grid layout.
+
+```html
+<syn-tooltip content="This is a tooltip" distance="13" open="">
+  <syn-button title="" variant="outline" size="medium">Hover me</syn-button>
+</syn-tooltip>
+```
+
+---
+
+## Placement
+
+Use the placement attribute to set the preferred placement of the tooltip.
+
+```html
+<div class="tooltip-placement-example">
+  <div class="tooltip-placement-example-row">
+    <syn-tooltip content="top-start" placement="top-start" open="">
+      <syn-button title="" variant="outline" size="medium"></syn-button>
+    </syn-tooltip>
+
+    <syn-tooltip content="top" placement="top" open="">
+      <syn-button title="" variant="outline" size="medium"></syn-button>
+    </syn-tooltip>
+
+    <syn-tooltip content="top-end" placement="top-end" open="">
+      <syn-button title="" variant="outline" size="medium"></syn-button>
+    </syn-tooltip>
+  </div>
+
+  <div class="tooltip-placement-example-row">
+    <syn-tooltip content="left-start" placement="left-start" open="">
+      <syn-button title="" variant="outline" size="medium"></syn-button>
+    </syn-tooltip>
+
+    <syn-tooltip content="right-start" placement="right-start" open="">
+      <syn-button title="" variant="outline" size="medium"></syn-button>
+    </syn-tooltip>
+  </div>
+
+  <div class="tooltip-placement-example-row">
+    <syn-tooltip content="left" placement="left" open="">
+      <syn-button title="" variant="outline" size="medium"></syn-button>
+    </syn-tooltip>
+
+    <syn-tooltip content="right" placement="right" open="">
+      <syn-button title="" variant="outline" size="medium"></syn-button>
+    </syn-tooltip>
+  </div>
+
+  <div class="tooltip-placement-example-row">
+    <syn-tooltip content="left-end" placement="left-end" open="">
+      <syn-button title="" variant="outline" size="medium"></syn-button>
+    </syn-tooltip>
+
+    <syn-tooltip content="right-end" placement="right-end" open="">
+      <syn-button title="" variant="outline" size="medium"></syn-button>
+    </syn-tooltip>
+  </div>
+
+  <div class="tooltip-placement-example-row">
+    <syn-tooltip content="bottom-start" placement="bottom-start" open="">
+      <syn-button title="" variant="outline" size="medium"></syn-button>
+    </syn-tooltip>
+
+    <syn-tooltip content="bottom" placement="bottom" open="">
+      <syn-button title="" variant="outline" size="medium"></syn-button>
+    </syn-tooltip>
+
+    <syn-tooltip content="bottom-end" placement="bottom-end" open="">
+      <syn-button title="" variant="outline" size="medium"></syn-button>
+    </syn-tooltip>
+  </div>
+</div>
+
+<style>
+  .tooltip-placement-example {
+    width: 500px;
+    margin: 5rem 6rem;
+  }
+
+  .tooltip-placement-example-row:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+
+  .tooltip-placement-example syn-button {
+    float: left;
+    width: var(--syn-spacing-2x-large);
+    margin-bottom: var(--syn-spacing-medium);
+  }
+
+  .tooltip-placement-example-row:nth-child(1)
+    syn-tooltip:first-child
+    syn-button,
+  .tooltip-placement-example-row:nth-child(5)
+    syn-tooltip:first-child
+    syn-button {
+    margin-left: var(--syn-spacing-3x-large);
+    margin-right: var(--syn-spacing-4x-large);
+  }
+
+  .tooltip-placement-example-row:nth-child(1)
+    syn-tooltip:nth-child(2)
+    syn-button,
+  .tooltip-placement-example-row:nth-child(5)
+    syn-tooltip:nth-child(2)
+    syn-button {
+    margin-right: var(--syn-spacing-4x-large);
+  }
+
+  .tooltip-placement-example-row:nth-child(2)
+    syn-tooltip:nth-child(2)
+    syn-button,
+  .tooltip-placement-example-row:nth-child(3)
+    syn-tooltip:nth-child(2)
+    syn-button,
+  .tooltip-placement-example-row:nth-child(4)
+    syn-tooltip:nth-child(2)
+    syn-button {
+    margin-left: calc(
+      (var(--syn-spacing-2x-large) * 3) + (var(--syn-spacing-4x-large) * 2) +
+        (var(--syn-spacing-medium) * 2)
+    );
+  }
+</style>
+```
+
+---
+
+## Click Trigger
+
+Set the trigger attribute to click to toggle the tooltip on click instead of hover.
+
+```html
+<syn-tooltip content="Click again to dismiss" trigger="click" open="">
+  <syn-button title="" variant="outline" size="medium"
+    >Click to Toggle</syn-button
+  >
+</syn-tooltip>
+```