@synergy-design-system/metadata 1.0.0 → 3.0.1

package/data/layers/interface/component/component:syn-drawer.md

@@ -0,0 +1,154 @@
+# syn-drawer
+
+## Summary
+
+Drawers slide in from a container to expose additional options and information.
+
+## Documentation
+
+- [Component Documentation](https://synergy-design-system.github.io/?path=/docs/components-syn-drawer--docs)
+- [Figma Design](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=41163-282330)
+
+## Class Information
+
+- **Tag Name:** `syn-drawer`
+- **Import Example:** `import SynDrawer from '@synergy-design-system/components/components/drawer/drawer.js';`
+
+## Usage Information
+
+- **Status:** stable
+- **Since:** 2.0
+
+## Available Slots
+
+- `(default)`: The drawer's main content.
+- `label`: The drawer's label. Alternatively, you can use the `label` attribute.
+- `header-actions`: Optional actions to add to the header. Works best with `<syn-icon-button>`.
+- `footer`: The drawer's footer, usually one or more buttons representing various options.
+
+## Available Properties
+
+### contained
+
+attribute: `contained`
+reflects: yes
+type: `boolean`
+default: `false`
+
+By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of its parent element, set this attribute and add `position: relative` to the parent.
+
+### label
+
+attribute: `label`
+reflects: yes
+type: `string`
+default: `''`
+
+The drawer's label as displayed in the header. You should always include a relevant label even when using `no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.
+
+### modal
+
+attribute: -
+reflects: -
+type: `undefined`
+default: `new Modal(this)`
+
+Exposes the internal modal utility that controls focus trapping. To temporarily disable focus trapping and allow third-party modals spawned from an active Synergy modal, call `modal.activateExternal()` when the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Synergy's focus trapping.
+
+### noHeader
+
+attribute: `no-header`
+reflects: yes
+type: `boolean`
+default: `false`
+
+Removes the header. This will also remove the default close button, so please ensure you provide an easy, accessible way for users to dismiss the drawer.
+
+### open
+
+attribute: `open`
+reflects: yes
+type: `boolean`
+default: `false`
+
+Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.
+
+### placement
+
+attribute: `placement`
+reflects: yes
+type: `'top' | 'end' | 'bottom' | 'start'`
+default: `'end'`
+
+The direction from which the drawer will open.
+
+## Available Methods
+
+### hide()
+
+parameters: -
+returns: `void`
+
+Hides the drawer
+
+### show()
+
+parameters: -
+returns: `void`
+
+Shows the drawer.
+
+## Available CSS Parts
+
+- `base`: The component's base wrapper.
+- `body`: The drawer's body.
+- `close-button`: The close button, an `<syn-icon-button>`.
+- `close-button__base`: The close button's exported `base` part.
+- `footer`: The drawer's footer.
+- `header`: The drawer's header. This element wraps the title and header actions.
+- `header-actions`: Optional actions to add to the header. Works best with `<syn-icon-button>`.
+- `overlay`: The overlay that covers the screen behind the drawer.
+- `panel`: The drawer's panel (where the drawer and its content are rendered).
+- `title`: The drawer's title.
+
+## Available Events
+
+### syn-after-hide
+
+type: `SynAfterHideEvent`
+
+Emitted after the drawer closes and all animations are complete.
+
+### syn-after-show
+
+type: `SynAfterShowEvent`
+
+Emitted after the drawer opens and all animations are complete.
+
+### syn-hide
+
+type: `SynHideEvent`
+
+Emitted when the drawer closes.
+
+### syn-initial-focus
+
+type: `SynInitialFocusEvent`
+
+Emitted when the drawer opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.
+
+### syn-request-close
+
+type: `SynRequestCloseEvent`
+
+Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in destructive behavior such as data loss.
+
+### syn-show
+
+type: `SynShowEvent`
+
+Emitted when the drawer opens.
+
+## Dependencies
+
+- `syn-icon-button`

package/data/layers/interface/component/component:syn-dropdown.json

@@ -0,0 +1,272 @@
+{
+  "attributes": [
+    {
+      "default": "false",
+      "description": "Disables the dropdown so the panel will not open.",
+      "fieldName": "disabled",
+      "name": "disabled",
+      "reflects": true,
+      "type": "boolean"
+    },
+    {
+      "default": "0",
+      "description": "The distance in pixels from which to offset the panel away from its trigger.",
+      "fieldName": "distance",
+      "name": "distance",
+      "reflects": false,
+      "type": "number"
+    },
+    {
+      "default": "false",
+      "description": "Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.",
+      "fieldName": "open",
+      "name": "open",
+      "reflects": true,
+      "type": "boolean"
+    },
+    {
+      "default": "'bottom-start'",
+      "description": "The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport.",
+      "fieldName": "placement",
+      "name": "placement",
+      "reflects": true,
+      "type": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'"
+    },
+    {
+      "default": "0",
+      "description": "The distance in pixels from which to offset the panel along its trigger.",
+      "fieldName": "skidding",
+      "name": "skidding",
+      "reflects": false,
+      "type": "number"
+    },
+    {
+      "default": "false",
+      "description": "By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for\ndropdowns that allow for multiple interactions.",
+      "fieldName": "stayOpenOnSelect",
+      "name": "stay-open-on-select",
+      "reflects": true,
+      "type": "boolean"
+    },
+    {
+      "default": "undefined",
+      "description": "Syncs the popup width or height to that of the trigger element.",
+      "fieldName": "sync",
+      "name": "sync",
+      "reflects": true,
+      "type": "'width' | 'height' | 'both' | undefined"
+    }
+  ],
+  "cssParts": [
+    {
+      "description": "The component's base wrapper, an `<syn-popup>` element.",
+      "name": "base"
+    },
+    {
+      "description": "The popup's exported `popup` part. Use this to target the tooltip's popup container.",
+      "name": "base__popup"
+    },
+    {
+      "description": "The panel that gets shown when the dropdown is open.",
+      "name": "panel"
+    },
+    {
+      "description": "The container that wraps the trigger.",
+      "name": "trigger"
+    }
+  ],
+  "dependencies": [
+    "syn-popup"
+  ],
+  "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-dropdown--docs",
+  "events": [
+    {
+      "description": "Emitted after the dropdown closes and all animations are complete.",
+      "name": "syn-after-hide",
+      "type": "SynAfterHideEvent"
+    },
+    {
+      "description": "Emitted after the dropdown opens and all animations are complete.",
+      "name": "syn-after-show",
+      "type": "SynAfterShowEvent"
+    },
+    {
+      "description": "Emitted when the dropdown closes.",
+      "name": "syn-hide",
+      "type": "SynHideEvent"
+    },
+    {
+      "description": "Emitted when the dropdown opens.",
+      "name": "syn-show",
+      "type": "SynShowEvent"
+    }
+  ],
+  "figmaComponentId": "41203-538934",
+  "methods": [
+    {
+      "description": "",
+      "name": "addOpenListeners",
+      "parameters": []
+    },
+    {
+      "description": "",
+      "name": "focusOnTrigger",
+      "parameters": []
+    },
+    {
+      "description": "",
+      "name": "getMenu",
+      "parameters": []
+    },
+    {
+      "description": "",
+      "name": "handleOpenChange",
+      "parameters": []
+    },
+    {
+      "description": "",
+      "name": "handleTriggerClick",
+      "parameters": []
+    },
+    {
+      "description": "",
+      "name": "handleTriggerKeyDown",
+      "parameters": [
+        {
+          "name": "event",
+          "type": "KeyboardEvent"
+        }
+      ]
+    },
+    {
+      "description": "",
+      "name": "handleTriggerKeyUp",
+      "parameters": [
+        {
+          "name": "event",
+          "type": "KeyboardEvent"
+        }
+      ]
+    },
+    {
+      "description": "",
+      "name": "handleTriggerSlotChange",
+      "parameters": []
+    },
+    {
+      "description": "Hides the dropdown panel",
+      "name": "hide",
+      "parameters": []
+    },
+    {
+      "description": "",
+      "name": "removeOpenListeners",
+      "parameters": []
+    },
+    {
+      "description": "Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu\nis activated.",
+      "name": "reposition",
+      "parameters": []
+    },
+    {
+      "description": "Shows the dropdown panel.",
+      "name": "show",
+      "parameters": []
+    },
+    {
+      "description": "",
+      "name": "updateAccessibleTrigger",
+      "parameters": []
+    }
+  ],
+  "properties": [
+    {
+      "access": "public",
+      "description": "The dropdown will close when the user interacts outside of this element (e.g. clicking). Useful for composing other\ncomponents that use a dropdown internally.",
+      "name": "containingElement",
+      "type": "HTMLElement | undefined"
+    },
+    {
+      "access": "public",
+      "default": "false",
+      "description": "Disables the dropdown so the panel will not open.",
+      "name": "disabled",
+      "type": "boolean"
+    },
+    {
+      "access": "public",
+      "default": "0",
+      "description": "The distance in pixels from which to offset the panel away from its trigger.",
+      "name": "distance",
+      "type": "number"
+    },
+    {
+      "access": "public",
+      "default": "false",
+      "description": "Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.",
+      "name": "open",
+      "type": "boolean"
+    },
+    {
+      "access": "public",
+      "description": "",
+      "name": "panel",
+      "type": "HTMLSlotElement"
+    },
+    {
+      "access": "public",
+      "default": "'bottom-start'",
+      "description": "The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport.",
+      "name": "placement",
+      "type": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'"
+    },
+    {
+      "access": "public",
+      "description": "",
+      "name": "popup",
+      "type": "SynPopup"
+    },
+    {
+      "access": "public",
+      "default": "0",
+      "description": "The distance in pixels from which to offset the panel along its trigger.",
+      "name": "skidding",
+      "type": "number"
+    },
+    {
+      "access": "public",
+      "default": "false",
+      "description": "By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for\ndropdowns that allow for multiple interactions.",
+      "name": "stayOpenOnSelect",
+      "type": "boolean"
+    },
+    {
+      "access": "public",
+      "default": "undefined",
+      "description": "Syncs the popup width or height to that of the trigger element.",
+      "name": "sync",
+      "type": "'width' | 'height' | 'both' | undefined"
+    },
+    {
+      "access": "public",
+      "description": "",
+      "name": "trigger",
+      "type": "HTMLSlotElement"
+    }
+  ],
+  "since": "2.0",
+  "slots": [
+    {
+      "description": "The dropdown's main content.",
+      "name": ""
+    },
+    {
+      "description": "The dropdown's trigger, usually a `<syn-button>` element.",
+      "name": "trigger"
+    }
+  ],
+  "sourceModulePath": "components/dropdown/dropdown.js",
+  "status": "stable",
+  "summary": "Dropdowns expose additional content that \"drops down\" in a panel.",
+  "tagName": "syn-dropdown"
+}

package/data/layers/interface/component/component:syn-dropdown.md

@@ -0,0 +1,171 @@
+# syn-dropdown
+
+## Summary
+
+Dropdowns expose additional content that "drops down" in a panel.
+
+## Documentation
+
+- [Component Documentation](https://synergy-design-system.github.io/?path=/docs/components-syn-dropdown--docs)
+- [Figma Design](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=41203-538934)
+
+## Class Information
+
+- **Tag Name:** `syn-dropdown`
+- **Import Example:** `import SynDropdown from '@synergy-design-system/components/components/dropdown/dropdown.js';`
+
+## Usage Information
+
+- **Status:** stable
+- **Since:** 2.0
+
+## Available Slots
+
+- `(default)`: The dropdown's main content.
+- `trigger`: The dropdown's trigger, usually a `<syn-button>` element.
+
+## Available Properties
+
+### containingElement
+
+attribute: -
+reflects: -
+type: `HTMLElement | undefined`
+default: none
+
+The dropdown will close when the user interacts outside of this element (e.g. clicking). Useful for composing other components that use a dropdown internally.
+
+### disabled
+
+attribute: `disabled`
+reflects: yes
+type: `boolean`
+default: `false`
+
+Disables the dropdown so the panel will not open.
+
+### distance
+
+attribute: `distance`
+reflects: no
+type: `number`
+default: `0`
+
+The distance in pixels from which to offset the panel away from its trigger.
+
+### open
+
+attribute: `open`
+reflects: yes
+type: `boolean`
+default: `false`
+
+Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you can use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.
+
+### placement
+
+attribute: `placement`
+reflects: yes
+type: `| 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'bottom'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'right'
+    | 'right-start'
+    | 'right-end'
+    | 'left'
+    | 'left-start'
+    | 'left-end'`
+default: `'bottom-start'`
+
+The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel inside of the viewport.
+
+### skidding
+
+attribute: `skidding`
+reflects: no
+type: `number`
+default: `0`
+
+The distance in pixels from which to offset the panel along its trigger.
+
+### stayOpenOnSelect
+
+attribute: `stay-open-on-select`
+reflects: yes
+type: `boolean`
+default: `false`
+
+By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for dropdowns that allow for multiple interactions.
+
+### sync
+
+attribute: `sync`
+reflects: yes
+type: `'width' | 'height' | 'both' | undefined`
+default: `undefined`
+
+Syncs the popup width or height to that of the trigger element.
+
+## Available Methods
+
+### hide()
+
+parameters: -
+returns: `void`
+
+Hides the dropdown panel
+
+### reposition()
+
+parameters: -
+returns: `void`
+
+Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu
+is activated.
+
+### show()
+
+parameters: -
+returns: `void`
+
+Shows the dropdown panel.
+
+## Available CSS Parts
+
+- `base`: The component's base wrapper, an `<syn-popup>` element.
+- `base__popup`: The popup's exported `popup` part. Use this to target the tooltip's popup container.
+- `panel`: The panel that gets shown when the dropdown is open.
+- `trigger`: The container that wraps the trigger.
+
+## Available Events
+
+### syn-after-hide
+
+type: `SynAfterHideEvent`
+
+Emitted after the dropdown closes and all animations are complete.
+
+### syn-after-show
+
+type: `SynAfterShowEvent`
+
+Emitted after the dropdown opens and all animations are complete.
+
+### syn-hide
+
+type: `SynHideEvent`
+
+Emitted when the dropdown closes.
+
+### syn-show
+
+type: `SynShowEvent`
+
+Emitted when the dropdown opens.
+
+## Dependencies
+
+- `syn-popup`