@synergy-design-system/mcp 0.1.0 → 1.0.0

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

@@ -0,0 +1,271 @@
+## Default
+
+Drawers slide in from a container to expose additional options and information.
+
+```html
+<syn-drawer open="" label="Drawer" placement="end">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+  <span slot="footer"> </span>
+  <syn-button
+    class="close-icon"
+    slot="footer"
+    variant="filled"
+    title=""
+    size="medium"
+    >Close</syn-button
+  >
+  <span slot="footer"> </span>
+  <span slot="footer"> </span>
+</syn-drawer>
+
+<syn-button
+  class="drawer-default-story-opener story-loaded"
+  title=""
+  variant="outline"
+  size="medium"
+  >Open Drawer</syn-button
+>
+```
+
+---
+
+## Slide In From Start
+
+By default, drawers slide in from the end. To make the drawer slide in from the start, set the placement attribute to start.
+
+```html
+<syn-drawer
+  label="Drawer"
+  open=""
+  placement="start"
+  class="drawer-placement-start"
+>
+  This drawer slides in from the start.
+  <syn-button slot="footer" variant="filled" title="" size="medium"
+    >Close</syn-button
+  >
+</syn-drawer>
+
+<syn-button title="" variant="outline" size="medium">Open Drawer</syn-button>
+```
+
+---
+
+## Slide In From Top
+
+To make the drawer slide in from the top, set the placement attribute to top.
+
+```html
+<syn-drawer label="Drawer" open="" placement="top" class="drawer-placement-top">
+  This drawer slides in from the top.
+  <syn-button slot="footer" variant="filled" title="" size="medium"
+    >Close</syn-button
+  >
+</syn-drawer>
+
+<syn-button title="" variant="outline" size="medium">Open Drawer</syn-button>
+```
+
+---
+
+## Slide In From Bottom
+
+To make the drawer slide in from the bottom, set the placement attribute to bottom.
+
+```html
+<syn-drawer
+  label="Drawer"
+  open=""
+  placement="bottom"
+  class="drawer-placement-bottom"
+>
+  This drawer slides in from the bottom.
+  <syn-button slot="footer" variant="filled" title="" size="medium"
+    >Close</syn-button
+  >
+</syn-drawer>
+
+<syn-button title="" variant="outline" size="medium">Open Drawer</syn-button>
+```
+
+---
+
+## Contained To An Element
+
+By default, drawers slide out of their containing block, which is usually the viewport. To make a drawer slide out of a parent element, add the contained attribute to the drawer and apply position: relative to its parent.Unlike normal drawers, contained drawers are not modal. This means they do not show an overlay, they do not trap focus, and they are not dismissible with Escape. This is intentional to allow users to interact with elements outside of the drawer.
+
+```html
+<div
+  style="
+    position: relative;
+    border: solid 2px var(--syn-panel-border-color);
+    height: 300px;
+    padding: 1rem;
+    margin-bottom: 1rem;
+  "
+>
+  The drawer will be contained to this box. This content won't shift or be
+  affected in any way when the drawer opens.
+
+  <syn-drawer
+    label="Drawer"
+    open=""
+    contained=""
+    class="drawer-contained"
+    style="--size: 50%"
+    placement="end"
+  >
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    <syn-button slot="footer" variant="filled" title="" size="medium"
+      >Close</syn-button
+    >
+  </syn-drawer>
+</div>
+
+<syn-button title="" variant="outline" size="medium">Toggle Drawer</syn-button>
+```
+
+---
+
+## Custom Size
+
+Use the --size custom property to set the drawer’s size. This will be applied to the drawer’s width or height depending on its placement.
+
+```html
+<syn-drawer
+  label="Drawer"
+  open=""
+  placement="start"
+  class="drawer-custom-size"
+  style="--size: 50vw"
+>
+  This drawer is always 50% of the viewport.
+  <syn-button slot="footer" variant="filled" title="" size="medium"
+    >Close</syn-button
+  >
+</syn-drawer>
+
+<syn-button title="" variant="outline" size="medium">Open Drawer</syn-button>
+```
+
+---
+
+## Scrolling
+
+By design, a drawer’s height will never exceed 100% of its container. As such, drawers will not scroll with the page to ensure the header and footer are always accessible to the user.
+
+```html
+<syn-drawer label="Drawer" open="" placement="start" class="drawer-scrolling">
+  <div>
+    <p>Scroll down and give it a try! 👇</p>
+    <p>
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+      nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
+      diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
+      sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
+      diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
+      erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
+      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
+      dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
+      sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
+      erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
+      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
+      dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
+      sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
+      erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
+      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
+      dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
+      sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
+      erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
+      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
+      dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
+      sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
+      erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
+      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
+      dolor sit amet.
+    </p>
+  </div>
+  <syn-button slot="footer" variant="filled" title="" size="medium"
+    >Close</syn-button
+  >
+</syn-drawer>
+
+<syn-button title="" variant="outline" size="medium">Open Drawer</syn-button>
+```
+
+---
+
+## Header Actions
+
+The header shows a functional close button by default. You can use the header-actions slot to add additional icon buttons if needed.
+
+```html
+<syn-drawer
+  label="Drawer"
+  open=""
+  placement="start"
+  class="drawer-header-actions"
+>
+  <syn-icon-button
+    class="new-window"
+    slot="header-actions"
+    name="open_in_new"
+    label="Arrow Up"
+    size="inherit"
+    color="currentColor"
+  ></syn-icon-button>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  <syn-button slot="footer" variant="filled" title="" size="medium"
+    >Close</syn-button
+  >
+</syn-drawer>
+
+<syn-button title="" variant="outline" size="medium">Open Drawer</syn-button>
+```
+
+---
+
+## Preventing The Drawer From Closing
+
+By default, drawers will close when the user clicks the close button, clicks the overlay, or presses the Escape key. In most cases, the default behavior is the best behavior in terms of UX. However, there are situations where this may be undesirable, such as when data loss will occur.To keep the drawer open in such cases, you can cancel the syn-request-close event. When canceled, the drawer will remain open and pulse briefly to draw the user’s attention to it.You can use event.detail.source to determine what triggered the request to close. This example prevents the drawer from closing when the overlay is clicked, but allows the close button or Escape to dismiss it.
+
+```html
+<syn-drawer label="Drawer" open="" class="drawer-deny-close" placement="end">
+  This drawer will not close when you click on the overlay.
+  <syn-button slot="footer" variant="filled" title="" size="medium"
+    >Close</syn-button
+  >
+</syn-drawer>
+
+<syn-button title="" variant="outline" size="medium">Open Drawer</syn-button>
+```
+
+---
+
+## Customizing Initial Focus
+
+By default, the drawer’s panel will gain focus when opened. This allows a subsequent tab press to focus on the first tabbable element in the drawer. If you want a different element to have focus, add the autofocus attribute to it as shown below.
+
+```html
+<syn-drawer label="Drawer" class="drawer-focus" placement="end">
+  <syn-input
+    autofocus=""
+    placeholder="I will have focus when the drawer is opened"
+    title=""
+    type="text"
+    size="medium"
+    form=""
+  ></syn-input>
+  <syn-button slot="footer" variant="filled" title="" size="medium"
+    >Close</syn-button
+  >
+</syn-drawer>
+
+<syn-button title="" variant="outline" size="medium">Open Drawer</syn-button>
+```

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

@@ -0,0 +1,316 @@
+## Default
+
+Dropdowns expose additional content that “drops down” in a panel.Dropdowns consist of a trigger and a panel. By default, activating the trigger will expose the panel and interacting outside of the panel will close it.Dropdowns are designed to work well with menus to provide a list of options the user can select from. However, dropdowns can also be used in lower-level applications (e.g. color picker). The API gives you complete control over showing, hiding, and positioning the panel.
+
+```html
+<div style="position: relative">
+  <syn-dropdown placement="bottom-start">
+    <syn-button slot="trigger" caret="" title="" variant="outline" size="medium"
+      >Dropdown</syn-button
+    >
+    <syn-menu style="min-width: 240px" role="menu">
+      <syn-menu-item role="menuitem" aria-disabled="false" tabindex="0"
+        >Dropdown Item 1</syn-menu-item
+      >
+      <syn-menu-item role="menuitem" aria-disabled="false" tabindex="-1"
+        >Dropdown Item 2</syn-menu-item
+      >
+      <syn-menu-item role="menuitem" aria-disabled="false" tabindex="-1"
+        >Dropdown Item 3</syn-menu-item
+      >
+      <syn-divider role="separator" aria-orientation="horizontal"></syn-divider>
+      <syn-menu-item
+        type="checkbox"
+        checked=""
+        role="menuitemcheckbox"
+        aria-checked="true"
+        aria-disabled="false"
+        tabindex="-1"
+        >Checkbox</syn-menu-item
+      >
+      <syn-menu-item
+        disabled=""
+        role="menuitem"
+        aria-disabled="true"
+        tabindex="-1"
+        >Disabled</syn-menu-item
+      >
+      <syn-divider role="separator" aria-orientation="horizontal"></syn-divider>
+      <syn-menu-item role="menuitem" aria-disabled="false" tabindex="-1">
+        Prefix
+        <syn-icon
+          slot="prefix"
+          name="wallpaper"
+          aria-hidden="true"
+          library="default"
+        ></syn-icon>
+      </syn-menu-item>
+      <syn-menu-item role="menuitem" aria-disabled="false" tabindex="-1">
+        Suffix Icon
+        <syn-icon
+          slot="suffix"
+          name="wallpaper"
+          aria-hidden="true"
+          library="default"
+        ></syn-icon>
+      </syn-menu-item>
+    </syn-menu>
+  </syn-dropdown>
+</div>
+```
+
+---
+
+## Getting The Selected Item
+
+When dropdowns are used with menus, you can listen for the syn-select event to determine which menu item was selected. The menu item element will be exposed in event.detail.item. You can set value props to make it easier to identify commands. DEV: Alternatively, you can listen for the click event on individual menu items. Note that, using this approach, disabled menu items will still emit a click event.
+
+```html
+<div style="position: relative">
+  <div class="dropdown-selection">
+    <syn-dropdown placement="bottom-start">
+      <syn-button
+        slot="trigger"
+        caret=""
+        title=""
+        variant="outline"
+        size="medium"
+        >Edit</syn-button
+      >
+      <syn-menu style="min-width: 240px" 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>
+</div>
+```
+
+---
+
+## Placement
+
+The preferred placement of the dropdown can be set with the placement attribute. Note that the actual position may vary to ensure the panel remains in the viewport.
+
+```html
+<div style="position: relative">
+  <syn-dropdown placement="right-start">
+    <syn-button slot="trigger" caret="" title="" variant="outline" size="medium"
+      >Edit</syn-button
+    >
+    <syn-menu style="min-width: 240px" role="menu">
+      <syn-menu-item role="menuitem" aria-disabled="false" tabindex="0"
+        >Cut</syn-menu-item
+      >
+      <syn-menu-item role="menuitem" aria-disabled="false" tabindex="-1"
+        >Copy</syn-menu-item
+      >
+      <syn-menu-item 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-item
+      >
+      <syn-menu-item role="menuitem" aria-disabled="false" tabindex="-1"
+        >Replace</syn-menu-item
+      >
+    </syn-menu>
+  </syn-dropdown>
+</div>
+```
+
+---
+
+## Distance
+
+The distance from the panel to the trigger can be customized using the distance attribute. This value is specified in pixels.
+
+```html
+<div style="position: relative">
+  <syn-dropdown distance="30" placement="bottom-start">
+    <syn-button slot="trigger" caret="" title="" variant="outline" size="medium"
+      >Edit</syn-button
+    >
+    <syn-menu style="min-width: 240px" role="menu">
+      <syn-menu-item role="menuitem" aria-disabled="false" tabindex="0"
+        >Cut</syn-menu-item
+      >
+      <syn-menu-item role="menuitem" aria-disabled="false" tabindex="-1"
+        >Copy</syn-menu-item
+      >
+      <syn-menu-item 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-item
+      >
+      <syn-menu-item role="menuitem" aria-disabled="false" tabindex="-1"
+        >Replace</syn-menu-item
+      >
+    </syn-menu>
+  </syn-dropdown>
+</div>
+```
+
+---
+
+## Skidding
+
+The offset of the panel along the trigger can be customized using the skidding attribute. This value is specified in pixels.
+
+```html
+<div style="position: relative">
+  <syn-dropdown skidding="30" placement="bottom-start">
+    <syn-button slot="trigger" caret="" title="" variant="outline" size="medium"
+      >Edit</syn-button
+    >
+    <syn-menu style="min-width: 240px" role="menu">
+      <syn-menu-item role="menuitem" aria-disabled="false" tabindex="0"
+        >Cut</syn-menu-item
+      >
+      <syn-menu-item role="menuitem" aria-disabled="false" tabindex="-1"
+        >Copy</syn-menu-item
+      >
+      <syn-menu-item 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-item
+      >
+      <syn-menu-item role="menuitem" aria-disabled="false" tabindex="-1"
+        >Replace</syn-menu-item
+      >
+    </syn-menu>
+  </syn-dropdown>
+</div>
+```
+
+---
+
+## Submenus
+
+To create a submenu, nest an <syn-menu slot="submenu"> element in a menu item.
+
+```html
+<div style="position: relative">
+  <syn-dropdown placement="bottom-start">
+    <syn-button slot="trigger" caret="" title="" variant="outline" size="medium"
+      >Edit</syn-button
+    >
+
+    <syn-menu style="min-width: 240px" 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-item role="menuitem" aria-disabled="false" tabindex="-1">
+        Transformations
+        <syn-menu slot="submenu" role="menu">
+          <syn-menu-item
+            value="uppercase"
+            role="menuitem"
+            aria-disabled="false"
+            tabindex="0"
+            >Make uppercase</syn-menu-item
+          >
+          <syn-menu-item
+            value="lowercase"
+            role="menuitem"
+            aria-disabled="false"
+            tabindex="-1"
+            >Make lowercase</syn-menu-item
+          >
+          <syn-menu-item
+            value="capitalize"
+            role="menuitem"
+            aria-disabled="false"
+            tabindex="-1"
+            >Capitalize</syn-menu-item
+          >
+        </syn-menu>
+      </syn-menu-item>
+    </syn-menu>
+  </syn-dropdown>
+</div>
+```