@synergy-design-system/mcp 2.14.1 → 3.0.0

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

@@ -1,162 +0,0 @@
-## Default
-
-Menus provide a list of options for the user to choose from.You can use menu items, menu labels, and dividers to compose a menu. Menus support keyboard interactions, including type-to-select an option.
-
-```html
-<div style="width: 200px">
-  <syn-menu role="menu">
-    <syn-menu-item
-      value="undo"
-      role="menuitem"
-      aria-disabled="false"
-      tabindex="0"
-      >Undo</syn-menu-item
-    >
-    <syn-menu-item
-      value="redo"
-      role="menuitem"
-      aria-disabled="false"
-      tabindex="-1"
-      >Redo</syn-menu-item
-    >
-    <syn-divider role="separator" aria-orientation="horizontal"></syn-divider>
-    <syn-menu-item
-      value="cut"
-      role="menuitem"
-      aria-disabled="false"
-      tabindex="-1"
-      >Cut</syn-menu-item
-    >
-    <syn-menu-item
-      value="copy"
-      role="menuitem"
-      aria-disabled="false"
-      tabindex="-1"
-      >Copy</syn-menu-item
-    >
-    <syn-menu-item
-      value="paste"
-      role="menuitem"
-      aria-disabled="false"
-      tabindex="-1"
-      >Paste</syn-menu-item
-    >
-    <syn-menu-item
-      value="delete"
-      role="menuitem"
-      aria-disabled="false"
-      tabindex="-1"
-      >Delete</syn-menu-item
-    >
-  </syn-menu>
-</div>
-```
-
----
-
-## In Dropdowns
-
-Menus work really well when used inside dropdowns.
-
-```html
-<div style="position: relative">
-  <syn-dropdown placement="bottom-start" open="">
-    <syn-button slot="trigger" caret="" title="" variant="outline" size="medium"
-      >Edit</syn-button
-    >
-    <syn-menu style="width: 200px" role="menu">
-      <syn-menu-item
-        value="cut"
-        role="menuitem"
-        aria-disabled="false"
-        tabindex="0"
-        >Cut</syn-menu-item
-      >
-      <syn-menu-item
-        value="copy"
-        role="menuitem"
-        aria-disabled="false"
-        tabindex="-1"
-        >Copy</syn-menu-item
-      >
-      <syn-menu-item
-        value="paste"
-        role="menuitem"
-        aria-disabled="false"
-        tabindex="-1"
-        >Paste</syn-menu-item
-      >
-    </syn-menu>
-  </syn-dropdown>
-</div>
-```
-
----
-
-## Submenus
-
-To create a submenu, nest an <syn-menu slot="submenu"> in any menu item.
-
-```html
-<syn-menu style="max-width: 200px" role="menu">
-  <syn-menu-item value="undo" role="menuitem" aria-disabled="false" tabindex="0"
-    >Undo</syn-menu-item
-  >
-  <syn-menu-item
-    value="redo"
-    role="menuitem"
-    aria-disabled="false"
-    tabindex="-1"
-    >Redo</syn-menu-item
-  >
-
-  <syn-divider role="separator" aria-orientation="horizontal"></syn-divider>
-
-  <syn-menu-item value="cut" role="menuitem" aria-disabled="false" tabindex="-1"
-    >Cut</syn-menu-item
-  >
-  <syn-menu-item
-    value="copy"
-    role="menuitem"
-    aria-disabled="false"
-    tabindex="-1"
-    >Copy</syn-menu-item
-  >
-  <syn-menu-item
-    value="paste"
-    role="menuitem"
-    aria-disabled="false"
-    tabindex="-1"
-    >Paste</syn-menu-item
-  >
-
-  <syn-divider role="separator" aria-orientation="horizontal"></syn-divider>
-
-  <syn-menu-item role="menuitem" aria-disabled="false" tabindex="-1">
-    Find
-    <syn-menu slot="submenu" role="menu">
-      <syn-menu-item
-        value="find"
-        role="menuitem"
-        aria-disabled="false"
-        tabindex="0"
-        >Find…</syn-menu-item
-      >
-      <syn-menu-item
-        value="find-previous"
-        role="menuitem"
-        aria-disabled="false"
-        tabindex="-1"
-        >Find Next</syn-menu-item
-      >
-      <syn-menu-item
-        value="find-next"
-        role="menuitem"
-        aria-disabled="false"
-        tabindex="-1"
-        >Find Previous</syn-menu-item
-      >
-    </syn-menu>
-  </syn-menu-item>
-</syn-menu>
-```

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

@@ -1,216 +0,0 @@
-## 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>
-```
-
----
-
-## Focus
-
-The focus event gives the user feedback that the Menu Item has been focused by the keyboard interaction from the user.
-
-```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>
-```
-
----
-
-## 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

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

@@ -1,166 +0,0 @@
-## 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
-<div style="display: flex; gap: var(--syn-spacing-large)">
-  <syn-nav-item current="" horizontal=""
-    >Horizontal navigation item</syn-nav-item
-  >
-  <syn-nav-item horizontal="">Horizontal navigation item</syn-nav-item>
-</div>
-```
-
----
-
-## 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>
-```