@synergy-design-system/mcp 0.1.0 → 1.0.0

package/metadata/static/components/syn-menu-item/docs.md

@@ -0,0 +1,196 @@
+## Default
+
+Menu items provide options for the user to pick from in a menu.
+
+```html
+<syn-menu role="menu">
+  <syn-menu-item role="menuitem" aria-disabled="false" tabindex="0">
+    Option 1
+  </syn-menu-item>
+</syn-menu>
+```
+
+---
+
+## Prefix And Suffix
+
+Add content to the start and end of menu items using the prefix and suffix slots.
+
+```html
+<syn-menu style="max-width: 240px" role="menu">
+  <syn-menu-item role="menuitem" aria-disabled="false" tabindex="0">
+    <syn-icon
+      slot="prefix"
+      name="house"
+      aria-hidden="true"
+      library="default"
+    ></syn-icon>
+    Home
+  </syn-menu-item>
+
+  <syn-menu-item role="menuitem" aria-disabled="false" tabindex="-1">
+    <syn-icon
+      slot="prefix"
+      name="mail"
+      aria-hidden="true"
+      library="default"
+    ></syn-icon>
+    Messages
+    <syn-icon
+      slot="suffix"
+      name="info"
+      aria-hidden="true"
+      library="default"
+    ></syn-icon>
+  </syn-menu-item>
+
+  <syn-divider role="separator" aria-orientation="horizontal"></syn-divider>
+
+  <syn-menu-item role="menuitem" aria-disabled="false" tabindex="-1">
+    <syn-icon
+      slot="prefix"
+      name="settings"
+      aria-hidden="true"
+      library="default"
+    ></syn-icon>
+    Settings
+  </syn-menu-item>
+</syn-menu>
+```
+
+---
+
+## Disabled
+
+Use the disabled attribute to disable an option and prevent it from being selected.
+
+```html
+<syn-menu style="max-width: 240px" role="menu">
+  <syn-menu-item role="menuitem" aria-disabled="false" tabindex="0"
+    >Option 1</syn-menu-item
+  >
+  <syn-menu-item disabled="" role="menuitem" aria-disabled="true" tabindex="-1"
+    >Option 2</syn-menu-item
+  >
+  <syn-menu-item role="menuitem" aria-disabled="false" tabindex="-1"
+    >Option 3</syn-menu-item
+  >
+</syn-menu>
+```
+
+---
+
+## Loading
+
+Use the loading attribute to indicate that a menu item is busy. Like a disabled menu item, clicks will be suppressed until the loading state is removed.
+
+```html
+<syn-menu style="max-width: 240px" role="menu">
+  <syn-menu-item role="menuitem" aria-disabled="false" tabindex="0"
+    >Option 1</syn-menu-item
+  >
+  <syn-menu-item loading="" role="menuitem" aria-disabled="false" tabindex="-1"
+    >Option 2</syn-menu-item
+  >
+  <syn-menu-item role="menuitem" aria-disabled="false" tabindex="-1"
+    >Option 3</syn-menu-item
+  >
+</syn-menu>
+```
+
+---
+
+## Checkbox Menu Items
+
+Set the type attribute to checkbox to create a menu item that will toggle on and off when selected. You can use the checked attribute to set the initial state.Checkbox menu items are visually indistinguishable from regular menu items. Their ability to be toggled is primarily inferred from context, much like you’d find in the menu of a native app.
+
+```html
+<syn-menu style="max-width: 240px" role="menu">
+  <syn-menu-item
+    type="checkbox"
+    role="menuitemcheckbox"
+    aria-checked="false"
+    aria-disabled="false"
+    tabindex="0"
+    >Autosave</syn-menu-item
+  >
+  <syn-menu-item
+    type="checkbox"
+    checked=""
+    role="menuitemcheckbox"
+    aria-checked="true"
+    aria-disabled="false"
+    tabindex="-1"
+    >Check Spelling</syn-menu-item
+  >
+  <syn-menu-item
+    type="checkbox"
+    role="menuitemcheckbox"
+    aria-checked="false"
+    aria-disabled="false"
+    tabindex="-1"
+    >Word Wrap</syn-menu-item
+  >
+</syn-menu>
+```
+
+---
+
+## Value Selection
+
+The value attribute can be used to assign a hidden value, such as a unique identifier, to a menu item. When an item is selected, the syn-select event will be emitted and a reference to the item will be available at event.detail.item. You can use this reference to access the selected item’s value, its checked state, and more.
+
+```html
+<syn-menu class="menu-value" style="max-width: 200px" role="menu">
+  <syn-menu-item
+    value="opt-1"
+    role="menuitem"
+    aria-disabled="false"
+    tabindex="0"
+    >Option 1</syn-menu-item
+  >
+  <syn-menu-item
+    value="opt-2"
+    role="menuitem"
+    aria-disabled="false"
+    tabindex="-1"
+    >Option 2</syn-menu-item
+  >
+  <syn-menu-item
+    value="opt-3"
+    role="menuitem"
+    aria-disabled="false"
+    tabindex="-1"
+    >Option 3</syn-menu-item
+  >
+  <syn-divider role="separator" aria-orientation="horizontal"></syn-divider>
+  <syn-menu-item
+    type="checkbox"
+    value="opt-4"
+    checked=""
+    role="menuitemcheckbox"
+    aria-checked="true"
+    aria-disabled="false"
+    tabindex="-1"
+    >Checkbox 4</syn-menu-item
+  >
+  <syn-menu-item
+    type="checkbox"
+    value="opt-5"
+    role="menuitemcheckbox"
+    aria-checked="false"
+    aria-disabled="false"
+    tabindex="-1"
+    >Checkbox 5</syn-menu-item
+  >
+  <syn-menu-item
+    type="checkbox"
+    value="opt-6"
+    role="menuitemcheckbox"
+    aria-checked="false"
+    aria-disabled="false"
+    tabindex="-1"
+    >Checkbox 6</syn-menu-item
+  >
+</syn-menu>
+```

package/metadata/static/components/syn-menu-label/docs.md

@@ -0,0 +1,29 @@
+## Default
+
+Menu labels are used to describe a group of menu items.
+
+```html
+<syn-menu style="width: 200px" role="menu">
+  <syn-menu-label> Fruits </syn-menu-label>
+
+  <syn-menu-item role="menuitem" aria-disabled="false" tabindex="0"
+    >Apple</syn-menu-item
+  >
+  <syn-menu-item role="menuitem" aria-disabled="false" tabindex="-1"
+    >Banana</syn-menu-item
+  >
+  <syn-menu-item role="menuitem" aria-disabled="false" tabindex="-1"
+    >Orange</syn-menu-item
+  >
+  <syn-menu-label>Vegetables</syn-menu-label>
+  <syn-menu-item role="menuitem" aria-disabled="false" tabindex="-1"
+    >Broccoli</syn-menu-item
+  >
+  <syn-menu-item role="menuitem" aria-disabled="false" tabindex="-1"
+    >Carrot</syn-menu-item
+  >
+  <syn-menu-item role="menuitem" aria-disabled="false" tabindex="-1"
+    >Zucchini</syn-menu-item
+  >
+</syn-menu>
+```

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

@@ -0,0 +1,161 @@
+## Default
+
+The navigation item is used to trigger page switches.
+
+```html
+<syn-nav-item> Label </syn-nav-item>
+```
+
+---
+
+## Labels
+
+Use the label attribute to change the content of a navigation item.
+
+```html
+<syn-nav-item>This is a label</syn-nav-item>
+```
+
+---
+
+## Current
+
+The current attribute provides the user feedback about which of the navigation elements is currently selected.
+
+```html
+<syn-nav-item current="">Current Navigation item</syn-nav-item>
+```
+
+---
+
+## Horizontal Navigation
+
+Use the horizontal attribute to indicate that an element is used in a horizontal navigation. (The example shows it in combination with the current attribute, to indicate the difference.)
+
+```html
+<syn-nav-item current="" horizontal="">Horizontal navigation item</syn-nav-item>
+```
+
+---
+
+## Focus
+
+The focus event gives the user feedback that the Navigation Item has been focused by the keyboard interaction or active click from the user.
+
+```html
+<div style="padding: 5px">
+  <syn-nav-item>Current navigation item</syn-nav-item>
+</div>
+```
+
+---
+
+## Prefix And Suffix Slot
+
+Use the prefix and suffix slots to add e. g. icons or tags. If available the prefix slot will be shown in the rail navigation.
+
+```html
+<style>
+  .doc-number-helper {
+    align-items: center;
+    border: 1px solid var(--syn-color-neutral-400);
+    border-radius: var(--syn-border-radius-circle);
+    box-sizing: border-box;
+    color: var(--syn-color-neutral-950);
+    display: inline-flex;
+    font-size: var(--syn-font-size-x-small);
+    height: var(--syn-font-size-x-large);
+    width: var(--syn-font-size-x-large);
+    justify-content: center;
+  }
+</style>
+<syn-nav-item>
+  <syn-icon
+    name="wallpaper"
+    slot="prefix"
+    aria-hidden="true"
+    library="default"
+  ></syn-icon>
+  Item with icon slots
+  <syn-icon
+    name="wallpaper"
+    slot="suffix"
+    aria-hidden="true"
+    library="default"
+  ></syn-icon>
+</syn-nav-item>
+<br />
+<syn-nav-item>
+  <span class="doc-number-helper" slot="prefix">1</span>
+  Step-like item with a number
+</syn-nav-item>
+```
+
+---
+
+## Children Closed Or Open Vertical Only
+
+Use the \*children attribute to indicate that a chevron should be shown. In development this will be handled automatically as soon as an element has children.Note:Since there should be no double use of functionality, a link cannot be mixed with an accordion behavior. The accordion always has priority, which means that if the href attribute is used at the same time as children, the link functionality is ignored and only the accordion behavior is provided.
+
+```html
+<nav style="width: 320px">
+  <syn-nav-item>
+    Children closed
+    <nav slot="children">
+      <syn-nav-item style="--indentation: 1">Item 1</syn-nav-item>
+      <syn-nav-item style="--indentation: 1">Item 2</syn-nav-item>
+    </nav>
+  </syn-nav-item>
+  <br />
+  <syn-nav-item open="">
+    Children open
+    <nav slot="children">
+      <syn-nav-item href="javascript:void(0)" style="--indentation: 1"
+        >Item 1</syn-nav-item
+      >
+      <syn-nav-item style="--indentation: 1">Item 2</syn-nav-item>
+    </nav>
+  </syn-nav-item>
+</nav>
+```
+
+---
+
+## Divider
+
+Use the divider attribute to add a border at the top. This should be used for first level elements in vertical navigations.
+
+```html
+<nav style="width: 320px">
+  <syn-nav-item>Dividing element</syn-nav-item>
+  <syn-nav-item divider="">Dividing element</syn-nav-item>
+</nav>
+```
+
+---
+
+## Indentation
+
+Vertical navigation elements can be indented to indicate deeper navigation levels.
+
+```html
+<nav style="width: 320px; gap: 24px; display: flex; flex-direction: column">
+  <syn-nav-item current="">Indentation: none</syn-nav-item>
+  <syn-nav-item current="" style="--indentation: 1"
+    >Indentation: 1</syn-nav-item
+  >
+  <syn-nav-item current="" style="--indentation: 2"
+    >Indentation: 2</syn-nav-item
+  >
+</nav>
+```
+
+---
+
+## Disabled
+
+Use the disabled attribute to disable a navigation-item.
+
+```html
+<syn-nav-item disabled="">Parent Element</syn-nav-item>
+```

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

@@ -0,0 +1,167 @@
+## Default
+
+Use <syn-optgroup> to group listbox items visually.
+
+```html
+<syn-select size="medium" placement="bottom" form="">
+  <syn-optgroup label="Section 1">
+    <syn-option
+      value="1"
+      role="option"
+      aria-selected="false"
+      aria-disabled="false"
+      >Option 1</syn-option
+    >
+    <syn-option
+      value="2"
+      role="option"
+      aria-selected="false"
+      aria-disabled="false"
+      >Option 2</syn-option
+    >
+    <syn-option
+      value="3"
+      role="option"
+      aria-selected="false"
+      aria-disabled="false"
+      >Option 3</syn-option
+    >
+  </syn-optgroup>
+
+  <syn-optgroup label="Section 2">
+    <syn-option
+      value="4"
+      role="option"
+      aria-selected="false"
+      aria-disabled="false"
+      >Option 4</syn-option
+    >
+  </syn-optgroup>
+</syn-select>
+```
+
+---
+
+## Disabled
+
+Use the disabled attribute in the <syn-optgroup> to disable the Section and prevent it from being selected.
+
+```html
+<syn-select size="medium" placement="bottom" form="">
+  <syn-optgroup disabled="">
+    <span slot="label">Section 1</span>
+    <syn-option
+      value="1"
+      role="option"
+      aria-selected="false"
+      aria-disabled="true"
+      disabled=""
+      >Option</syn-option
+    >
+    <syn-option
+      value="2"
+      role="option"
+      aria-selected="false"
+      aria-disabled="true"
+      disabled=""
+      >Option</syn-option
+    >
+    <syn-option
+      value="3"
+      role="option"
+      aria-selected="false"
+      aria-disabled="true"
+      disabled=""
+      >Option</syn-option
+    >
+  </syn-optgroup>
+</syn-select>
+```
+
+---
+
+## Prefix And Suffix
+
+Add icons to the start and end of menu items using the prefix and suffix slots.
+
+```html
+<syn-select size="medium" placement="bottom" form="">
+  <syn-optgroup label="Contact Support">
+    <syn-icon
+      name="contact_support"
+      slot="prefix"
+      aria-hidden="true"
+      library="default"
+    ></syn-icon>
+    <syn-icon
+      name="check_circle_outline"
+      slot="suffix"
+      aria-hidden="true"
+      library="default"
+    ></syn-icon>
+
+    <syn-option
+      value="1"
+      role="option"
+      aria-selected="false"
+      aria-disabled="false"
+    >
+      <syn-icon
+        name="mail"
+        slot="prefix"
+        aria-hidden="true"
+        library="default"
+      ></syn-icon>
+      <syn-icon
+        name="check_circle_outline"
+        slot="suffix"
+        aria-hidden="true"
+        library="default"
+      ></syn-icon>
+      E-Mail
+    </syn-option>
+
+    <syn-option
+      value="2"
+      role="option"
+      aria-selected="false"
+      aria-disabled="false"
+    >
+      <syn-icon
+        name="phone"
+        slot="prefix"
+        aria-hidden="true"
+        library="default"
+      ></syn-icon>
+      <syn-icon
+        name="check_circle_outline"
+        slot="suffix"
+        aria-hidden="true"
+        library="default"
+      ></syn-icon>
+      Phone
+    </syn-option>
+
+    <syn-option
+      value="3"
+      role="option"
+      aria-selected="false"
+      aria-disabled="false"
+    >
+      <syn-icon
+        name="chat_bubble_outline"
+        slot="prefix"
+        aria-hidden="true"
+        library="default"
+      ></syn-icon>
+      <syn-icon
+        name="check_circle_outline"
+        slot="suffix"
+        aria-hidden="true"
+        library="default"
+      ></syn-icon>
+      Chat
+    </syn-option>
+  </syn-optgroup>
+</syn-select>
+```

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

@@ -0,0 +1,137 @@
+## Default
+
+Options define the selectable items within various form controls such as select.
+
+```html
+<syn-select label="Select one" size="medium" placement="bottom" form="">
+  <syn-option
+    value="Option_1"
+    role="option"
+    aria-selected="false"
+    aria-disabled="false"
+  >
+    Option 1
+  </syn-option>
+
+  <syn-option
+    value="Option_2"
+    role="option"
+    aria-selected="false"
+    aria-disabled="false"
+    >Option 2</syn-option
+  >
+  <syn-option
+    value="Option_3"
+    role="option"
+    aria-selected="false"
+    aria-disabled="false"
+    >Option 3</syn-option
+  >
+</syn-select>
+```
+
+---
+
+## Disabled
+
+Use the disabled attribute to disable an option and prevent it from being selected.
+
+```html
+<syn-select label="Select one" size="medium" placement="bottom" form="">
+  <syn-option
+    value="option-1"
+    role="option"
+    aria-selected="false"
+    aria-disabled="false"
+    >Email</syn-option
+  >
+  <syn-option
+    value="option-2"
+    disabled=""
+    role="option"
+    aria-selected="false"
+    aria-disabled="true"
+    >Phone</syn-option
+  >
+  <syn-option
+    value="option-3"
+    role="option"
+    aria-selected="false"
+    aria-disabled="false"
+    >Chat</syn-option
+  >
+</syn-select>
+```
+
+---
+
+## Prefix And Suffix
+
+Add icons to the start and end of menu items using the prefix and suffix slots.
+
+```html
+<syn-select label="Select one" size="medium" placement="bottom" form="">
+  <syn-option
+    value="option-1"
+    role="option"
+    aria-selected="false"
+    aria-disabled="false"
+  >
+    <syn-icon
+      slot="prefix"
+      name="email"
+      aria-hidden="true"
+      library="default"
+    ></syn-icon>
+    Email
+    <syn-icon
+      slot="suffix"
+      name="check_circle_outline"
+      aria-hidden="true"
+      library="default"
+    ></syn-icon>
+  </syn-option>
+
+  <syn-option
+    value="option-2"
+    role="option"
+    aria-selected="false"
+    aria-disabled="false"
+  >
+    <syn-icon
+      slot="prefix"
+      name="local_phone"
+      aria-hidden="true"
+      library="default"
+    ></syn-icon>
+    Phone
+    <syn-icon
+      slot="suffix"
+      name="check_circle_outline"
+      aria-hidden="true"
+      library="default"
+    ></syn-icon>
+  </syn-option>
+
+  <syn-option
+    value="option-3"
+    role="option"
+    aria-selected="false"
+    aria-disabled="false"
+  >
+    <syn-icon
+      slot="prefix"
+      name="chat_bubble_outline"
+      aria-hidden="true"
+      library="default"
+    ></syn-icon>
+    Chat
+    <syn-icon
+      slot="suffix"
+      name="check_circle_outline"
+      aria-hidden="true"
+      library="default"
+    ></syn-icon>
+  </syn-option>
+</syn-select>
+```