@synergy-design-system/mcp 0.1.0 → 1.0.0

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

@@ -0,0 +1,215 @@
+## Default
+
+File control is a component with which a user can select a local file. It shows the value of the selected file.
+
+```html
+<syn-file size="medium" form=""></syn-file>
+```
+
+---
+
+## Label
+
+Use the label attribute to give the file selector an accessible label. For labels that contain HTML, use the label slot instead.
+
+```html
+<syn-file label="This is a label" size="medium" form=""></syn-file>
+```
+
+---
+
+## 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-file
+  help-text="This is a help text."
+  label="This is a label"
+  size="medium"
+  form=""
+></syn-file>
+```
+
+---
+
+## Multiple
+
+Use the multiple attribute to allow the selection of multiple files.Figma only: Override the button/droparea and value text directly, to indicate that multiple files are selected (“file” -> “files”)
+
+```html
+<syn-file
+  label="Multiple file input"
+  multiple=""
+  size="medium"
+  form=""
+></syn-file>
+```
+
+---
+
+## Hide Value
+
+There might be situations, where you don’t want to show the selected value (e. g. when something is automatically uploading).
+
+```html
+<syn-file
+  hide-value=""
+  label="This is a label"
+  size="medium"
+  form=""
+></syn-file>
+```
+
+---
+
+## Focus
+
+The focus event gives the user feedback that the Dropzone has been focused by the keyboard interaction and that the syn-file component is ready for use.
+
+```html
+<div style="padding: 5px">
+  <syn-file
+    label="This is a label"
+    help-text="This is a help text"
+    droparea=""
+    size="medium"
+    form=""
+  ></syn-file>
+</div>
+```
+
+---
+
+## Disabled
+
+Use the disabled attribute to disable a file input.
+
+```html
+<div style="display: flex; flex-direction: column; gap: 1rem">
+  <syn-file
+    disabled=""
+    label="This is a label"
+    size="medium"
+    form=""
+  ></syn-file>
+  <syn-file
+    disabled=""
+    droparea=""
+    label="This is a label"
+    size="medium"
+    form=""
+  ></syn-file>
+</div>
+```
+
+---
+
+## Sizes
+
+Use the size attribute to change the component's size.
+
+```html
+<div
+  style="display: flex; flex-direction: column; gap: var(--syn-spacing-large)"
+>
+  <syn-file size="small" label="Small" form=""></syn-file>
+  <syn-file size="medium" label="Medium" form=""></syn-file>
+  <syn-file size="large" label="Large" form=""></syn-file>
+</div>
+```
+
+---
+
+## Invalid
+
+The invalid status is used to warn the user that the syn-file 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-file
+    class="syn-file-invalid"
+    droparea=""
+    help-text="This is an error text."
+    label="This is a label"
+    size="medium"
+    form=""
+  ></syn-file>
+  <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>
+```
+
+---
+
+## Droparea
+
+Use the droparea attribute to switch to a full-width button with a drop area.
+
+```html
+<div
+  style="display: flex; flex-direction: column; gap: var(--syn-spacing-large)"
+>
+  <syn-file
+    accept="text/plain,image/*"
+    droparea=""
+    help-text="This is a help text"
+    label="Small"
+    multiple=""
+    size="small"
+    form=""
+  ></syn-file>
+  <syn-file
+    accept="text/plain,image/*"
+    droparea=""
+    help-text="This is a help text"
+    label="Medium"
+    multiple=""
+    size="medium"
+    form=""
+  ></syn-file>
+  <syn-file
+    accept="text/plain,image/*"
+    droparea=""
+    help-text="This is a help text"
+    label="Large"
+    multiple=""
+    size="large"
+    form=""
+  ></syn-file>
+</div>
+```
+
+---
+
+## Directory
+
+The webkitdirectory setting allows users to select entire directories instead of individual files. When a directory is chosen, all files inside (including those in sub-directories) are selected. Although this feature is not part of the official HTML specification, it is widely supported across major browsers.
+
+```html
+<div
+  style="display: flex; flex-direction: column; gap: var(--syn-spacing-large)"
+>
+  <syn-file label="Button" webkitdirectory="" size="medium" form=""></syn-file>
+  <syn-file
+    droparea=""
+    label="Droparea"
+    webkitdirectory=""
+    size="medium"
+    form=""
+  ></syn-file>
+</div>
+```

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

@@ -0,0 +1,134 @@
+## Default
+
+The header is used to indicate the name of the app, provide important actions in a toolbar and a navigation.
+
+```html
+<syn-header burger-menu="hidden">
+  <span slot="label">App Name</span>
+</syn-header>
+```
+
+---
+
+## Label
+
+Use the label attribute to change the app name.
+
+```html
+<syn-header label="A new label" burger-menu="hidden"></syn-header>
+```
+
+---
+
+## Logo
+
+Use the logo slot to change the app logo. Usually this is only needed in whitelabel solutions, when the SICK branding explicitly has to be hidden.
+
+```html
+<syn-header label="App Name" burger-menu="hidden">
+  <span
+    style="
+      width: 32px;
+      height: 32px;
+      border-radius: 32px;
+      background: var(--syn-color-primary-500);
+      display: block;
+    "
+    slot="logo"
+  ></span>
+</syn-header>
+```
+
+---
+
+## Focus
+
+The focus event gives the user feedback that a link in the logo has been focused by the keyboard interaction and that the link is ready to be navigated to.
+
+```html
+<style>
+  .custom-header-link-with-logo {
+    color: var(--syn-color-primary-600) !important;
+  }
+  .custom-header-link-with-logo syn-icon {
+    display: block;
+    width: auto;
+    height: 32px;
+  }
+
+  /* Safari fix for ##623 */
+  .custom-header-link-with-logo syn-icon::part(svg) {
+    width: auto;
+  }
+</style>
+<syn-header label="App Name" burger-menu="hidden">
+  <a href="#" slot="logo" tabindex="0" class="custom-header-link-with-logo">
+    <syn-icon
+      name="logo-color"
+      library="system"
+      label="Custom Logo with link"
+      role="img"
+      aria-label="Custom Logo with link"
+    ></syn-icon>
+  </a>
+</syn-header>
+```
+
+---
+
+## Meta Navigation
+
+Use the Meta Navigation slot to add additional functionalities to your application. Please be aware of the guidelines regarding the order of icons in the toolbar.Important: The Options Menu doesn’t handle any responsive behaviour, e. g. if there is not enough space for all items in different screen sizes. You have to make sure yourself, that your app works correctly and e. g. move elements into the footer of the side navigation or inside a “more” button in the Options Menu.
+
+```html
+<syn-header label="App Name" burger-menu="hidden">
+  <nav slot="meta-navigation">
+    <syn-icon-button
+      name="apps"
+      label="Apps"
+      size="inherit"
+      color="currentColor"
+    ></syn-icon-button>
+    <syn-icon-button
+      name="account_circle"
+      label="Account"
+      size="inherit"
+      color="currentColor"
+    ></syn-icon-button>
+    <syn-icon-button
+      name="more_vert"
+      label="More"
+      size="inherit"
+      color="currentColor"
+    ></syn-icon-button>
+  </nav>
+</syn-header>
+```
+
+---
+
+## Navigation
+
+Use the top navigation slot to add syn-navigation and horizontal syn-navigation-items.
+
+```html
+<syn-header label="App Name" burger-menu="hidden">
+  <syn-prio-nav slot="navigation">
+    <syn-nav-item current="" horizontal="true">Domains</syn-nav-item>
+    <syn-nav-item horizontal="true">Projects</syn-nav-item>
+    <syn-nav-item horizontal="true">Trainings</syn-nav-item>
+    <syn-nav-item horizontal="true">Evaluations</syn-nav-item>
+    <syn-nav-item horizontal="true">Deployments</syn-nav-item>
+  </syn-prio-nav>
+</syn-header>
+```
+
+---
+
+## Burger Menu
+
+Use the Burger Menu as trigger to open and close the Navigation. In the open state, the icon changes to a cancel icon. This will be hidden, if you use a rail navigation.
+
+```html
+<syn-header burger-menu="closed" label="App Name"> </syn-header>
+```

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

@@ -0,0 +1,177 @@
+## Default
+
+This shows the syn-icon in its default state
+
+```html
+<syn-icon name="wallpaper" aria-hidden="true" library="default"></syn-icon>
+```
+
+---
+
+## Colors
+
+Icons inherit their color from the current text color.
+Thus, you can set the color property on the <syn-icon> element or an ancestor to change color.
+
+```html
+<div style="color: var(--syn-color-primary-600)">
+  <syn-icon name="warning" aria-hidden="true" library="default"></syn-icon>
+  <syn-icon name="inventory" aria-hidden="true" library="default"></syn-icon>
+  <syn-icon
+    name="battery_charging_full"
+    aria-hidden="true"
+    library="default"
+  ></syn-icon>
+  <syn-icon
+    name="notifications"
+    aria-hidden="true"
+    library="default"
+  ></syn-icon>
+</div>
+<div style="color: var(--syn-color-neutral-800)">
+  <syn-icon name="schedule" aria-hidden="true" library="default"></syn-icon>
+  <syn-icon name="cloud" aria-hidden="true" library="default"></syn-icon>
+  <syn-icon name="download" aria-hidden="true" library="default"></syn-icon>
+  <syn-icon name="description" aria-hidden="true" library="default"></syn-icon>
+</div>
+<div style="color: var(--syn-color-error-700)">
+  <syn-icon name="mic" aria-hidden="true" library="default"></syn-icon>
+  <syn-icon name="search" aria-hidden="true" library="default"></syn-icon>
+  <syn-icon name="star_border" aria-hidden="true" library="default"></syn-icon>
+  <syn-icon name="delete" aria-hidden="true" library="default"></syn-icon>
+</div>
+```
+
+---
+
+## Sizing
+
+Icons are sized relative to the current font size.
+To change their size, set the font-size property on the icon itself
+or on a parent element as shown below.
+
+```html
+<div style="font-size: var(--syn-font-size-2x-large)">
+  <syn-icon name="warning" aria-hidden="true" library="default"></syn-icon>
+  <syn-icon name="inventory" aria-hidden="true" library="default"></syn-icon>
+  <syn-icon
+    name="battery_charging_full"
+    aria-hidden="true"
+    library="default"
+  ></syn-icon>
+  <syn-icon
+    name="notifications"
+    aria-hidden="true"
+    library="default"
+  ></syn-icon>
+  <syn-icon name="schedule" aria-hidden="true" library="default"></syn-icon>
+  <syn-icon name="cloud" aria-hidden="true" library="default"></syn-icon>
+  <syn-icon name="download" aria-hidden="true" library="default"></syn-icon>
+  <syn-icon name="description" aria-hidden="true" library="default"></syn-icon>
+  <syn-icon name="flag" aria-hidden="true" library="default"></syn-icon>
+  <syn-icon name="favorite" aria-hidden="true" library="default"></syn-icon>
+  <syn-icon name="image" aria-hidden="true" library="default"></syn-icon>
+  <syn-icon name="bolt" aria-hidden="true" library="default"></syn-icon>
+  <syn-icon name="mic" aria-hidden="true" library="default"></syn-icon>
+  <syn-icon name="search" aria-hidden="true" library="default"></syn-icon>
+  <syn-icon name="star_border" aria-hidden="true" library="default"></syn-icon>
+  <syn-icon name="delete" aria-hidden="true" library="default"></syn-icon>
+</div>
+```
+
+---
+
+## Labels
+
+For non-decorative icons, use the label attribute to announce it to assistive devices.
+
+```html
+<syn-icon
+  name="star"
+  label="Add to favorites"
+  role="img"
+  aria-label="Add to favorites"
+  library="default"
+></syn-icon>
+```
+
+---
+
+## Custom Icons
+
+Custom icons can be loaded individually with the src attribute.
+Only SVGs on a local or CORS-enabled endpoint are supported.
+If you're using more than one custom icon, it might make sense to register a custom icon library.
+
+```html
+<syn-icon
+  src="/logo-claim.svg"
+  style="font-size: 10rem"
+  aria-hidden="true"
+  library="default"
+></syn-icon>
+```
+
+---
+
+## CDN Icon Library
+
+```html
+<div style="font-size: var(--syn-font-size-x-large)">
+  <syn-icon library="fa" name="far-bell" aria-hidden="true"></syn-icon>
+  <syn-icon library="fa" name="far-comment" aria-hidden="true"></syn-icon>
+  <syn-icon
+    library="fa"
+    name="far-hand-point-right"
+    aria-hidden="true"
+  ></syn-icon>
+  <br />
+  <syn-icon library="fa" name="fas-archive" aria-hidden="true"></syn-icon>
+  <syn-icon library="fa" name="fas-book" aria-hidden="true"></syn-icon>
+  <syn-icon library="fa" name="fas-chess-knight" aria-hidden="true"></syn-icon>
+  <br />
+  <syn-icon library="fa" name="fab-apple" aria-hidden="true"></syn-icon>
+  <syn-icon library="fa" name="fab-chrome" aria-hidden="true"></syn-icon>
+  <syn-icon library="fa" name="fab-edge" aria-hidden="true"></syn-icon>
+</div>
+```
+
+---
+
+## Bundled Icon Library
+
+```html
+<div style="font-size: var(--syn-font-size-x-large)">
+  <syn-icon
+    library="bundled-default"
+    name="warning"
+    aria-hidden="true"
+  ></syn-icon>
+  <syn-icon
+    library="bundled-default"
+    name="inventory"
+    aria-hidden="true"
+  ></syn-icon>
+  <syn-icon
+    library="bundled-default"
+    name="battery_charging_full"
+    aria-hidden="true"
+  ></syn-icon>
+  <syn-icon
+    library="bundled-default"
+    name="notifications"
+    aria-hidden="true"
+  ></syn-icon>
+</div>
+```
+
+---
+
+## Sprite Sheet Usage
+
+```html
+<div style="font-size: var(--syn-font-size-x-large)">
+  <syn-icon library="sprite" name="settings" aria-hidden="true"></syn-icon>
+  <syn-icon library="sprite" name="refresh" aria-hidden="true"></syn-icon>
+</div>
+```

package/metadata/static/components/syn-icon-button/docs.md

@@ -0,0 +1,142 @@
+## Default
+
+Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.For a full list of icons that come bundled with Synergy, refer to the Assets.Note: To make the icon-button work in development, have a look at the icon documentation for how to set up the assets package.
+
+```html
+<syn-icon-button
+  name="wallpaper"
+  label="Wallpaper"
+  size="medium"
+  color="currentColor"
+></syn-icon-button>
+```
+
+---
+
+## Sizes
+
+Use the size attribute to change a icon-button size.
+
+```html
+<syn-icon-button
+  name="wallpaper"
+  label="Wallpaper"
+  color="neutral"
+  size="small"
+></syn-icon-button>
+<syn-icon-button
+  name="wallpaper"
+  label="Wallpaper"
+  color="neutral"
+  size="medium"
+></syn-icon-button>
+<syn-icon-button
+  name="wallpaper"
+  label="Wallpaper"
+  color="neutral"
+  size="large"
+></syn-icon-button>
+```
+
+---
+
+## Colors
+
+The Icon button can have two color variants, Primary or Neutral Color.
+
+```html
+<syn-icon-button
+  name="wallpaper"
+  label="Wallpaper"
+  color="neutral"
+  size="medium"
+></syn-icon-button>
+<syn-icon-button
+  name="wallpaper"
+  label="Wallpaper"
+  color="primary"
+  size="medium"
+></syn-icon-button>
+```
+
+---
+
+## Link Button
+
+It’s often helpful to have a button that works like a link. This is possible by setting the href attribute, which will make the component render an under the hood. This gives you all the default link behavior the browser provides (e.g. CMD/CTRL/SHIFT + CLICK) and exposes the target and download attributes.
+
+```html
+<syn-icon-button
+  name="wallpaper"
+  label="Wallpaper"
+  color="neutral"
+  href="https://example.com"
+  target="_blank"
+  size="medium"
+></syn-icon-button>
+```
+
+---
+
+## Disabled
+
+Use the disabled attribute to disable the icon button.
+
+```html
+<syn-icon-button
+  name="wallpaper"
+  label="Wallpaper"
+  color="neutral"
+  disabled=""
+  size="medium"
+></syn-icon-button>
+```
+
+---
+
+## Focus
+
+The focus event gives the user feedback that the icon-button has been focused by the keyboard interaction.
+
+```html
+<div style="padding: 5px">
+  <syn-icon-button
+    name="wallpaper"
+    label="Wallpaper"
+    color="neutral"
+    size="medium"
+  ></syn-icon-button>
+</div>
+```
+
+---
+
+## Label
+
+A description that gets read by assistive devices. For optimal accessibility, you have to include a label that describes what the icon button does.
+
+```html
+<div class="grid">
+  <span>Unset label property: </span>
+  <syn-icon-button
+    name="wallpaper"
+    color="neutral"
+    size="medium"
+  ></syn-icon-button>
+  <span>Set label property: </span>
+  <syn-icon-button
+    name="wallpaper"
+    label="Wallpaper"
+    color="neutral"
+    size="medium"
+  ></syn-icon-button>
+</div>
+<style>
+  .grid {
+    font-size: var(--syn-font-size-x-small);
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    align-items: center;
+  }
+</style>
+```