@synergy-design-system/mcp 0.1.0 → 1.1.0

package/metadata/static/components/syn-prio-nav/docs.md

@@ -0,0 +1,54 @@
+## Default
+
+Priority navigation is supported as product navigation if required. This navigation layout provides a high level of findability and support so that users know where they are at all times and can ensure that they can easily reach their goals.Note: Please note that the priority navigation does not have a child menu navigation, if you want to have a child navigation, combine the priority navigation and the side navigation
+
+```html
+<syn-prio-nav>
+  <syn-nav-item current="" horizontal="true">Domains</syn-nav-item>
+  <syn-nav-item horizontal="true">Projects</syn-nav-item>
+  <syn-nav-item horizontal="true" href="javascript:void(0)"
+    >Trainings</syn-nav-item
+  >
+</syn-prio-nav>
+```
+
+---
+
+## Priority Menu
+
+If there is not enough space, elements will move into a dropdown. If there is only space for one item, it will display the priority menu only.
+
+```html
+<div
+  style="
+    display: flex;
+    flex-direction: column;
+    gap: var(--syn-spacing-2x-large);
+  "
+>
+  <syn-prio-nav style="width: 220px">
+    <syn-nav-item current="" horizontal="true">Domains</syn-nav-item>
+    <syn-nav-item horizontal="true" href="javascript:void(0)"
+      >Projects</syn-nav-item
+    >
+    <syn-nav-item slot="menu" role="menuitem" tabindex="0"
+      >Trainings</syn-nav-item
+    >
+  </syn-prio-nav>
+  <syn-prio-nav style="width: 170px">
+    <syn-nav-item current="" slot="menu" role="menuitem" tabindex="0"
+      >Domains</syn-nav-item
+    >
+    <syn-nav-item
+      href="javascript:void(0)"
+      slot="menu"
+      role="menuitem"
+      tabindex="-1"
+      >Projects</syn-nav-item
+    >
+    <syn-nav-item slot="menu" role="menuitem" tabindex="-1"
+      >Trainings</syn-nav-item
+    >
+  </syn-prio-nav>
+</div>
+```

package/metadata/static/components/syn-progress-bar/docs.md

@@ -0,0 +1,77 @@
+## Default
+
+Progress bars are used to show the status of an ongoing operation.
+
+```html
+<syn-progress-bar value="33.3"></syn-progress-bar>
+```
+
+---
+
+## Labels
+
+Use the label attribute to label the progress bar and tell assistive devices how to announce it.
+
+```html
+<syn-progress-bar value="25" label="Upload progress">25%</syn-progress-bar>
+```
+
+---
+
+## Custom Height
+
+Use the --height custom property to set the progress bar’s height.
+
+```html
+<syn-progress-bar
+  value="50"
+  style="--height: var(--syn-spacing-2x-small)"
+></syn-progress-bar>
+```
+
+---
+
+## Showing Values
+
+Use the default slot to show a value.
+
+```html
+<div
+  style="display: flex; flex-direction: column; gap: var(--syn-spacing-medium)"
+>
+  <syn-progress-bar value="60" class="progress-bar-values"
+    >60%</syn-progress-bar
+  >
+
+  <div style="display: flex; gap: var(--syn-spacing-x-small)">
+    <syn-button variant="outline" size="small" title="">
+      <syn-icon
+        name="indeterminate"
+        library="system"
+        label="Decrease"
+        role="img"
+        aria-label="Decrease"
+      ></syn-icon>
+    </syn-button>
+    <syn-button variant="outline" size="small" title="">
+      <syn-icon
+        name="add"
+        library="system"
+        label="Increase"
+        role="img"
+        aria-label="Increase"
+      ></syn-icon>
+    </syn-button>
+  </div>
+</div>
+```
+
+---
+
+## Indeterminate
+
+The indeterminate attribute can be used to inform the user that the operation is pending, but its status cannot currently be determined. In this state, value is ignored and the label, if present, will not be shown.
+
+```html
+<syn-progress-bar indeterminate="" value="0"></syn-progress-bar>
+```

package/metadata/static/components/syn-progress-ring/docs.md

@@ -0,0 +1,89 @@
+## Default
+
+Progress rings are used to show the progress of a determinate operation in a circular fashion.
+
+```html
+<syn-progress-ring value="25"></syn-progress-ring>
+```
+
+---
+
+## Size
+
+Use the --size custom property to set the diameter of the progress ring.
+
+```html
+<syn-progress-ring value="35" style="--size: 48px"></syn-progress-ring>
+```
+
+---
+
+## Track And Indicator Width
+
+Use the --track-width and --indicator-width custom properties to set the width of the progress ring’s track and indicator.
+
+```html
+<syn-progress-ring
+  value="50"
+  style="--track-width: 4px; --indicator-width: 8px"
+></syn-progress-ring>
+```
+
+---
+
+## Colors
+
+To change the color, use the --track-color and --indicator-color custom properties.
+
+```html
+<syn-progress-ring
+  value="50"
+  style="--indicator-color: var(--syn-color-success-600)"
+></syn-progress-ring>
+```
+
+---
+
+## Labels
+
+Use the label attribute to label the progress ring and tell assistive devices how to announce it.
+
+```html
+<syn-progress-ring value="50" label="Upload progress"></syn-progress-ring>
+```
+
+---
+
+## Showing Values
+
+Use the default slot to show a label inside the progress ring. To display the value correctly, you should keep to a minimum width of 85 pixels.
+
+```html
+<div
+  style="display: flex; flex-direction: column; gap: var(--syn-spacing-medium)"
+>
+  <syn-progress-ring value="50" class="progress-ring-values"
+    >50%</syn-progress-ring
+  >
+  <div style="display: flex; gap: var(--syn-spacing-x-small)">
+    <syn-button variant="outline" title="" size="medium">
+      <syn-icon
+        name="indeterminate"
+        library="system"
+        label="Decrease"
+        role="img"
+        aria-label="Decrease"
+      ></syn-icon>
+    </syn-button>
+    <syn-button variant="outline" title="" size="medium">
+      <syn-icon
+        name="add"
+        library="system"
+        label="Increase"
+        role="img"
+        aria-label="Increase"
+      ></syn-icon>
+    </syn-button>
+  </div>
+</div>
+```

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

@@ -0,0 +1,123 @@
+## Default
+
+Radios allow the user to select a single option from a group. \nRadios are designed to be used with radio groups.
+
+```html
+<syn-radio
+  role="radio"
+  tabindex="-1"
+  aria-disabled="false"
+  aria-checked="false"
+  size="medium"
+>
+  Option
+</syn-radio>
+```
+
+---
+
+## Disabled
+
+Use the disabled attribute to disable a radio.
+
+```html
+<syn-radio
+  value="1"
+  disabled=""
+  role="radio"
+  tabindex="-1"
+  aria-disabled="true"
+  aria-checked="false"
+  size="medium"
+  >Option</syn-radio
+>
+```
+
+---
+
+## Focus
+
+The focus event gives the user feedback that the Radio has been focused by the keyboard interaction.
+
+```html
+<syn-radio
+  value="1"
+  role="radio"
+  tabindex="-1"
+  aria-disabled="false"
+  aria-checked="false"
+  size="medium"
+  >Option</syn-radio
+>
+```
+
+---
+
+## Invalid
+
+The invalid status is used to warn the user that the Radio is invalid. For example, if the radio is mandatory and nothing has been checked.
+
+```html
+<form class="custom-validity">
+  <syn-radio-group required="" value="" size="medium" form="">
+    <syn-radio
+      value="1"
+      role="radio"
+      tabindex="0"
+      aria-disabled="false"
+      aria-checked="false"
+      size="medium"
+      >Option</syn-radio
+    >
+  </syn-radio-group>
+  <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>
+```
+
+---
+
+## Sizes
+
+Add the size attribute to the Radio Group to change the radios’ size.
+
+```html
+<syn-radio
+  value="1"
+  size="small"
+  role="radio"
+  tabindex="-1"
+  aria-disabled="false"
+  aria-checked="false"
+  >Option</syn-radio
+>
+<syn-radio
+  value="2"
+  size="medium"
+  role="radio"
+  tabindex="-1"
+  aria-disabled="false"
+  aria-checked="false"
+  >Option</syn-radio
+>
+<syn-radio
+  value="3"
+  size="large"
+  role="radio"
+  tabindex="-1"
+  aria-disabled="false"
+  aria-checked="false"
+  >Option</syn-radio
+>
+```

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

@@ -0,0 +1,363 @@
+## Default
+
+Radio groups are used to group multiple radios or radio buttons so they function as a single form control.
+
+```html
+<syn-radio-group label="This is a label" value="" size="medium" form="">
+  <syn-radio
+    value="1"
+    role="radio"
+    tabindex="0"
+    aria-disabled="false"
+    aria-checked="false"
+    size="medium"
+    >Option</syn-radio
+  >
+  <syn-radio
+    value="2"
+    role="radio"
+    tabindex="-1"
+    aria-disabled="false"
+    aria-checked="false"
+    size="medium"
+    >Option</syn-radio
+  >
+  <syn-radio
+    value="3"
+    role="radio"
+    tabindex="-1"
+    aria-disabled="false"
+    aria-checked="false"
+    size="medium"
+    >Option</syn-radio
+  >
+</syn-radio-group>
+```
+
+---
+
+## Labels
+
+Use the label attribute to give the radio-group an accessible label. For labels that contain HTML, use the label slot instead.
+
+```html
+<syn-radio-group label="This is a label" value="" size="medium" form="">
+  <syn-radio
+    value="1"
+    role="radio"
+    tabindex="0"
+    aria-disabled="false"
+    aria-checked="false"
+    size="medium"
+    >Option</syn-radio
+  >
+  <syn-radio
+    value="2"
+    role="radio"
+    tabindex="-1"
+    aria-disabled="false"
+    aria-checked="false"
+    size="medium"
+    >Option</syn-radio
+  >
+  <syn-radio
+    value="3"
+    role="radio"
+    tabindex="-1"
+    aria-disabled="false"
+    aria-checked="false"
+    size="medium"
+    >Option</syn-radio
+  >
+</syn-radio-group>
+```
+
+---
+
+## 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-radio-group
+  label="This is a label"
+  help-text="This is the help-text"
+  name="a"
+  value=""
+  size="medium"
+  form=""
+>
+  <syn-radio
+    value="1"
+    role="radio"
+    tabindex="0"
+    aria-disabled="false"
+    aria-checked="false"
+    size="medium"
+    >Option</syn-radio
+  >
+  <syn-radio
+    value="2"
+    role="radio"
+    tabindex="-1"
+    aria-disabled="false"
+    aria-checked="false"
+    size="medium"
+    >Option</syn-radio
+  >
+  <syn-radio
+    value="3"
+    role="radio"
+    tabindex="-1"
+    aria-disabled="false"
+    aria-checked="false"
+    size="medium"
+    >Option</syn-radio
+  >
+</syn-radio-group>
+```
+
+---
+
+## Focus
+
+The focus event gives the user feedback that one of the radio buttons has been focused by the keyboard interaction.
+
+```html
+<syn-radio-group
+  label="This is a label"
+  name="a"
+  value=""
+  size="medium"
+  form=""
+>
+  <syn-radio
+    value="1"
+    disabled=""
+    role="radio"
+    tabindex="0"
+    aria-disabled="true"
+    aria-checked="false"
+    size="medium"
+    >Option</syn-radio
+  >
+  <syn-radio
+    value="2"
+    role="radio"
+    tabindex="-1"
+    aria-disabled="false"
+    aria-checked="false"
+    size="medium"
+    >Option</syn-radio
+  >
+  <syn-radio
+    value="3"
+    role="radio"
+    tabindex="-1"
+    aria-disabled="false"
+    aria-checked="false"
+    size="medium"
+    >Option</syn-radio
+  >
+</syn-radio-group>
+```
+
+---
+
+## Disabled
+
+Radios and radio buttons can be disabled by adding the disabled attribute to the respective options inside the radio group.
+
+```html
+<syn-radio-group
+  label="This is a label"
+  help-text="This is disabled"
+  name="a"
+  value=""
+  size="medium"
+  form=""
+>
+  <syn-radio
+    value="1"
+    role="radio"
+    tabindex="0"
+    aria-disabled="false"
+    aria-checked="false"
+    size="medium"
+    >Option</syn-radio
+  >
+  <syn-radio
+    value="2"
+    disabled=""
+    role="radio"
+    tabindex="-1"
+    aria-disabled="true"
+    aria-checked="false"
+    size="medium"
+    >Option</syn-radio
+  >
+  <syn-radio
+    value="3"
+    role="radio"
+    tabindex="-1"
+    aria-disabled="false"
+    aria-checked="false"
+    size="medium"
+    >Option</syn-radio
+  >
+</syn-radio-group>
+```
+
+---
+
+## Checked
+
+```html
+<syn-radio-group
+  label="This is a label"
+  help-text="This is checked"
+  name="a"
+  value="2"
+  size="medium"
+  form=""
+>
+  <syn-radio
+    value="1"
+    role="radio"
+    tabindex="-1"
+    aria-disabled="false"
+    aria-checked="false"
+    size="medium"
+    >Option</syn-radio
+  >
+  <syn-radio
+    value="2"
+    role="radio"
+    tabindex="0"
+    aria-disabled="false"
+    aria-checked="true"
+    size="medium"
+    >Option</syn-radio
+  >
+  <syn-radio
+    value="3"
+    role="radio"
+    tabindex="-1"
+    aria-disabled="false"
+    aria-checked="false"
+    size="medium"
+    >Option</syn-radio
+  >
+</syn-radio-group>
+```
+
+---
+
+## Invalid
+
+The invalid status is used to warn the user that the Radio Group is invalid. For example, if the radio is mandatory and nothing has been checked.
+
+```html
+<form class="custom-validity">
+  <syn-radio-group
+    label="Select an option"
+    name="a"
+    help-text="This is required"
+    required=""
+    value=""
+    size="medium"
+    form=""
+  >
+    <syn-radio
+      value="1"
+      role="radio"
+      tabindex="0"
+      aria-disabled="false"
+      aria-checked="false"
+      size="medium"
+      >Option 1</syn-radio
+    >
+    <syn-radio
+      value="2"
+      role="radio"
+      tabindex="-1"
+      aria-disabled="false"
+      aria-checked="false"
+      size="medium"
+      >Option 2</syn-radio
+    >
+    <syn-radio
+      value="3"
+      role="radio"
+      tabindex="-1"
+      aria-disabled="false"
+      aria-checked="false"
+      size="medium"
+      >Option 3</syn-radio
+    >
+  </syn-radio-group>
+  <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>
+```
+
+---
+
+## Custom Validity
+
+Use the setCustomValidity() method to set a custom validation message. This will prevent the form from submitting and make the browser display the error message you provide. To clear the error, call this function with an empty string.
+
+```html
+<form>
+  <syn-radio-group
+    label="Select an option"
+    name="a"
+    value="1"
+    size="medium"
+    form=""
+  >
+    <syn-radio
+      value="1"
+      role="radio"
+      tabindex="0"
+      aria-disabled="false"
+      aria-checked="true"
+      size="medium"
+      >Not me</syn-radio
+    >
+    <syn-radio
+      value="2"
+      role="radio"
+      tabindex="-1"
+      aria-disabled="false"
+      aria-checked="false"
+      size="medium"
+      >Me neither</syn-radio
+    >
+    <syn-radio
+      value="3"
+      role="radio"
+      tabindex="-1"
+      aria-disabled="false"
+      aria-checked="false"
+      size="medium"
+      >Choose me</syn-radio
+    >
+  </syn-radio-group>
+  <br />
+  <syn-button type="submit" variant="filled" title="" size="medium"
+    >Submit</syn-button
+  >
+</form>
+```