@synergy-design-system/mcp 2.14.1 → 3.0.0

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

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

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

@@ -1,89 +0,0 @@
-## 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-700)"
-></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

@@ -1,178 +0,0 @@
-## 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>
-```
-
----
-
-## Initial Value
-
-To set the initial value and checked state, use the value attribute on the radio element.
-
-```html
-<syn-radio-group value="1" size="medium" form="">
-  <syn-radio
-    value="1"
-    selected=""
-    role="radio"
-    tabindex="0"
-    aria-disabled="false"
-    aria-checked="true"
-    size="medium"
-    >Option</syn-radio
-  >
-</syn-radio-group>
-```
-
----
-
-## 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
->
-```
-
----
-
-## 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
->
-```
-
----
-
-## Readonly
-
-Add the readonly attribute to draw a read-only radio.
-
-```html
-<syn-radio-group value="1" size="medium" form="">
-  <syn-radio
-    value="1"
-    readonly=""
-    role="radio"
-    tabindex="0"
-    aria-disabled="true"
-    aria-checked="true"
-    size="medium"
-    >Read-only content</syn-radio
-  >
-</syn-radio-group>
-```
-
----
-
-## Sizes
-
-Add the size attribute to the Radio Group to change the radios’ size.
-
-```html
-<div
-  style="display: flex; flex-direction: column; gap: var(--syn-spacing-large)"
->
-  <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
-  >
-</div>
-```
-
----
-
-## 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="2" size="medium" form="">
-    <syn-radio
-      value="1"
-      role="radio"
-      tabindex="-1"
-      aria-disabled="false"
-      aria-checked="false"
-      size="medium"
-      >Invalid</syn-radio
-    >
-    <syn-radio
-      value="2"
-      role="radio"
-      tabindex="0"
-      aria-disabled="false"
-      aria-checked="true"
-      size="medium"
-      >Invalid</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>
-```