@synergy-design-system/metadata 1.0.0 → 3.0.0

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

@@ -0,0 +1,341 @@
+# syn-select
+
+## Summary
+
+Selects allow you to choose items from a menu of predefined options.
+
+## Documentation
+
+- [Component Documentation](https://synergy-design-system.github.io/?path=/docs/components-syn-select--docs)
+- [Figma Design](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=41325-310740)
+
+## Class Information
+
+- **Tag Name:** `syn-select`
+- **Import Example:** `import SynSelect from '@synergy-design-system/components/components/select/select.js';`
+
+## Usage Information
+
+- **Status:** stable
+- **Since:** 2.0
+
+## Available Slots
+
+- `(default)`: The listbox options. Must be `<syn-option>` elements. You can use `<syn-divider>` to group items visually.
+- `label`: The input's label. Alternatively, you can use the `label` attribute.
+- `prefix`: Used to prepend a presentational icon or similar element to the combobox.
+- `suffix`: Used to append a presentational icon or similar element to the combobox.
+- `clear-icon`: An icon to use in lieu of the default clear icon.
+- `expand-icon`: The icon to show when the control is expanded and collapsed. Rotates on open and close.
+- `help-text`: Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
+
+## Available Properties
+
+### clearable
+
+attribute: `clearable`
+reflects: no
+type: `boolean`
+default: `false`
+
+Adds a clear button when the select is not empty.
+
+### defaultValue
+
+attribute: -
+reflects: -
+type: `string | number | Array<string | number>`
+default: `''`
+
+The default value of the form control. Primarily used for resetting the form control.
+
+### delimiter
+
+attribute: `delimiter`
+reflects: no
+type: `string`
+default: `' '`
+
+The delimiter to use when setting the value when `multiple` is enabled. The default is a space, but you can set it to a comma or other character.
+
+### disabled
+
+attribute: `disabled`
+reflects: yes
+type: `boolean`
+default: `false`
+
+Disables the select control.
+
+### form
+
+attribute: `form`
+reflects: yes
+type: `string`
+default: `''`
+
+By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you to place the form control outside of a form and associate it with the form that has this `id`. The form must be in the same document or shadow root for this to work.
+
+### getTag
+
+attribute: `getTag`
+reflects: no
+type: `(option: SynOption, index: number) => TemplateResult | string | HTMLElement`
+default: none
+
+A function that customizes the tags to be rendered when multiple=true. The first argument is the option, the second is the current tag's index. The function should return either a Lit TemplateResult or a string containing trusted HTML of the symbol to render at the specified value.
+
+### helpText
+
+attribute: `help-text`
+reflects: no
+type: `string`
+default: `''`
+
+The select's help text. If you need to display HTML, use the `help-text` slot instead.
+
+### label
+
+attribute: `label`
+reflects: no
+type: `string`
+default: `''`
+
+The select's label. If you need to display HTML, use the `label` slot instead.
+
+### maxOptionsVisible
+
+attribute: `max-options-visible`
+reflects: no
+type: `number`
+default: `3`
+
+The maximum number of selected options to show when `multiple` is true. After the maximum, "+n" will be shown to indicate the number of additional items that are selected. Set to 0 to remove the limit.
+
+### multiple
+
+attribute: `multiple`
+reflects: yes
+type: `boolean`
+default: `false`
+
+Allows more than one option to be selected.
+
+### name
+
+attribute: `name`
+reflects: no
+type: `string`
+default: `''`
+
+The name of the select, submitted as a name/value pair with form data.
+
+### open
+
+attribute: `open`
+reflects: yes
+type: `boolean`
+default: `false`
+
+Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can use the `show()` and `hide()` methods and this attribute will reflect the select's open state.
+
+### placeholder
+
+attribute: `placeholder`
+reflects: no
+type: `string`
+default: `''`
+
+Placeholder text to show as a hint when the select is empty.
+
+### placement
+
+attribute: `placement`
+reflects: yes
+type: `'top' | 'bottom'`
+default: `'bottom'`
+
+The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox inside of the viewport.
+
+### readonly
+
+attribute: `readonly`
+reflects: yes
+type: `boolean`
+default: `false`
+
+Sets the select to a readonly state.
+
+### required
+
+attribute: `required`
+reflects: yes
+type: `boolean`
+default: `false`
+
+The select's required attribute.
+
+### size
+
+attribute: `size`
+reflects: yes
+type: `'small' | 'medium' | 'large'`
+default: `'medium'`
+
+The select's size.
+
+### value
+
+attribute: `value`
+reflects: no
+type: `undefined`
+default: none
+
+The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the value attribute will be a space-delimited list of values based on the options selected, and the value property will be an array. **For this reason, values must not contain spaces.**
+
+## Available Methods
+
+### blur()
+
+parameters: -
+returns: `void`
+
+Removes focus from the control.
+
+### checkValidity()
+
+parameters: -
+returns: `void`
+
+Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.
+
+### focus()
+
+parameters: `options: FocusOptions`
+returns: `void`
+
+Sets focus on the control.
+
+### getForm()
+
+parameters: -
+returns: `void`
+
+Gets the associated form, if one exists.
+
+### hide()
+
+parameters: -
+returns: `void`
+
+Hides the listbox.
+
+### reportValidity()
+
+parameters: -
+returns: `void`
+
+Checks for validity and shows the browser's validation message if the control is invalid.
+
+### setCustomValidity()
+
+parameters: `message: string`
+returns: `void`
+
+Sets a custom validation message. Pass an empty string to restore validity.
+
+### show()
+
+parameters: -
+returns: `void`
+
+Shows the listbox.
+
+## Available CSS Parts
+
+- `clear-button`: The clear button.
+- `combobox`: The container the wraps the prefix, suffix, combobox, clear icon, and expand button.
+- `display-input`: The element that displays the selected option's label, an `<input>` element.
+- `expand-icon`: The container that wraps the expand icon.
+- `form-control`: The form control that wraps the label, input, and help text.
+- `form-control-help-text`: The help text's wrapper.
+- `form-control-input`: The select's wrapper.
+- `form-control-label`: The label's wrapper.
+- `listbox`: The listbox container where options are slotted.
+- `popup`: The popup's exported `popup` part. Use this to target the tooltip's popup container.
+- `prefix`: The container that wraps the prefix slot.
+- `suffix`: The container that wraps the suffix slot.
+- `tag`: The individual tags that represent each multiselect option.
+- `tag__base`: The tag's base part.
+- `tag__content`: The tag's content part.
+- `tag__remove-button`: The tag's remove button.
+- `tag__remove-button__base`: The tag's remove button base part.
+- `tags`: The container that houses option tags when `multiselect` is used.
+
+## Available Events
+
+### syn-after-hide
+
+type: `SynAfterHideEvent`
+
+Emitted after the select's menu closes and all animations are complete.
+
+### syn-after-show
+
+type: `SynAfterShowEvent`
+
+Emitted after the select's menu opens and all animations are complete.
+
+### syn-blur
+
+type: `SynBlurEvent`
+
+Emitted when the control loses focus.
+
+### syn-change
+
+type: `SynChangeEvent`
+
+Emitted when the control's value changes.
+
+### syn-clear
+
+type: `SynClearEvent`
+
+Emitted when the control's value is cleared.
+
+### syn-focus
+
+type: `SynFocusEvent`
+
+Emitted when the control gains focus.
+
+### syn-hide
+
+type: `SynHideEvent`
+
+Emitted when the select's menu closes.
+
+### syn-input
+
+type: `SynInputEvent`
+
+Emitted when the control receives input.
+
+### syn-invalid
+
+type: `SynInvalidEvent`
+
+Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+
+### syn-show
+
+type: `SynShowEvent`
+
+Emitted when the select's menu opens.
+
+## Dependencies
+
+- `syn-icon`
+- `syn-popup`
+- `syn-tag`

package/data/layers/interface/component/component:syn-side-nav.json

@@ -0,0 +1,189 @@
+{
+  "attributes": [
+    {
+      "default": "false",
+      "description": "By default, the side-nav traps the focus if in variant=\"default\" and open.\nTo disable the focus trapping, set this attribute.",
+      "fieldName": "noFocusTrapping",
+      "name": "no-focus-trapping",
+      "reflects": true,
+      "type": "boolean"
+    },
+    {
+      "default": "false",
+      "description": "Indicates whether or not the side-nav is open.\nYou can toggle this attribute to show and hide the side-nav, or you can use the `show()` and\n`hide()` methods and this attribute will reflect the side-nav's open state.\n\nDepending on the \"variant\" attribute, the behavior will differ.\n\n__Default__:\nWith `open` will show the side-nav with an overlay.\nWithout `open`, the side-nav will be hidden.\n\n__Rail__:\nWith `open` will show the whole side-nav with an overlay for touch devices\nor without an overlay for non-touch devices.\nWithout `open`, the side-nav will only show the prefix of nav-item's.\n\n__Sticky__:\nWith `open` will show the whole side-nav with an overlay for touch devices\nor without an overlay for non-touch devices.\nWithout `open`, the side-nav will only show the prefix of nav-item's.",
+      "fieldName": "open",
+      "name": "open",
+      "reflects": true,
+      "type": "boolean"
+    },
+    {
+      "default": "'default'",
+      "description": "The variant that should be used to show the side navigation.\n\nThe following variants are supported:\n- **default** (default): Always shows the whole content and additionally an overlay.\nThis makes especially sense for applications, where you navigate to a place and stay\nthere for a longer time.\n- **rail**: Only show the prefix of navigation items in closed state.\nThis will open on hover on the rail navigation.\nOn touch devices the navigation opens on click and shows an overlay.\nNote: The rail variant is only an option if all Navigation Items on the first level\nhave an Icon.\nIf this is not the case you should use a burger navigation.\n- **sticky**: The side-nav has a pin button to show the side-nav in small (icon only)\nand full width. This variant is only possible for non-nested navigation items.\nNote: The sticky variant is only an option if all Navigation Items on the first level\nhave an Icon and if there are only \"first level\" items.",
+      "fieldName": "variant",
+      "name": "variant",
+      "reflects": true,
+      "type": "'default' | 'rail' | 'sticky'"
+    }
+  ],
+  "cssParts": [
+    {
+      "description": "The components base wrapper",
+      "name": "base"
+    },
+    {
+      "description": "The side-nav's body (where the default slot content is rendered)",
+      "name": "body"
+    },
+    {
+      "description": "The components main content",
+      "name": "content"
+    },
+    {
+      "description": "The components main content container",
+      "name": "content-container"
+    },
+    {
+      "description": "The drawer that is used under the hood for creating the side-nav",
+      "name": "drawer"
+    },
+    {
+      "description": "The drawer's base wrapper",
+      "name": "drawer__base"
+    },
+    {
+      "description": "The components footer content",
+      "name": "footer"
+    },
+    {
+      "description": "The components footer content container (where the footer slot content is rendered)",
+      "name": "footer-container"
+    },
+    {
+      "description": "The components footer divider",
+      "name": "footer-divider"
+    },
+    {
+      "description": "The overlay that covers the screen behind the side-nav.",
+      "name": "overlay"
+    },
+    {
+      "description": "The side-nav's panel (where the whole content is rendered).",
+      "name": "panel"
+    },
+    {
+      "description": "The icon of the toggle nav-item for variant=\"sticky\"",
+      "name": "toggle-icon"
+    },
+    {
+      "description": "The label of the toggle nav-item for variant=\"sticky\".",
+      "name": "toggle-label"
+    },
+    {
+      "description": "The nav-item to toggle open state for variant=\"sticky\"",
+      "name": "toggle-nav-item"
+    }
+  ],
+  "dependencies": [
+    "syn-divider",
+    "syn-drawer",
+    "syn-icon",
+    "syn-nav-item"
+  ],
+  "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-side-nav--docs",
+  "events": [
+    {
+      "description": "Emitted after the side-nav closes and all animations are complete.",
+      "name": "syn-after-hide",
+      "type": "SynAfterHideEvent"
+    },
+    {
+      "description": "Emitted after the side-nav opens and all animations are complete.",
+      "name": "syn-after-show",
+      "type": "SynAfterShowEvent"
+    },
+    {
+      "description": "Emitted when the side-nav closes.",
+      "name": "syn-hide",
+      "type": "SynHideEvent"
+    },
+    {
+      "description": "Emitted when the side-nav opens.",
+      "name": "syn-show",
+      "type": "SynShowEvent"
+    }
+  ],
+  "figmaComponentId": "41227-327748",
+  "methods": [
+    {
+      "description": "",
+      "name": "handleFocusTrapping",
+      "parameters": []
+    },
+    {
+      "description": "",
+      "name": "handleOpenChange",
+      "parameters": []
+    },
+    {
+      "description": "",
+      "name": "handleVariantChange",
+      "parameters": []
+    },
+    {
+      "description": "Hides the side-nav",
+      "name": "hide",
+      "parameters": []
+    },
+    {
+      "description": "Shows the side-nav.",
+      "name": "show",
+      "parameters": []
+    }
+  ],
+  "properties": [
+    {
+      "access": "public",
+      "default": "false",
+      "description": "By default, the side-nav traps the focus if in variant=\"default\" and open.\nTo disable the focus trapping, set this attribute.",
+      "name": "noFocusTrapping",
+      "type": "boolean"
+    },
+    {
+      "access": "public",
+      "default": "false",
+      "description": "Indicates whether or not the side-nav is open.\nYou can toggle this attribute to show and hide the side-nav, or you can use the `show()` and\n`hide()` methods and this attribute will reflect the side-nav's open state.\n\nDepending on the \"variant\" attribute, the behavior will differ.\n\n__Default__:\nWith `open` will show the side-nav with an overlay.\nWithout `open`, the side-nav will be hidden.\n\n__Rail__:\nWith `open` will show the whole side-nav with an overlay for touch devices\nor without an overlay for non-touch devices.\nWithout `open`, the side-nav will only show the prefix of nav-item's.\n\n__Sticky__:\nWith `open` will show the whole side-nav with an overlay for touch devices\nor without an overlay for non-touch devices.\nWithout `open`, the side-nav will only show the prefix of nav-item's.",
+      "name": "open",
+      "type": "boolean"
+    },
+    {
+      "access": "public",
+      "default": "'default'",
+      "description": "The variant that should be used to show the side navigation.\n\nThe following variants are supported:\n- **default** (default): Always shows the whole content and additionally an overlay.\nThis makes especially sense for applications, where you navigate to a place and stay\nthere for a longer time.\n- **rail**: Only show the prefix of navigation items in closed state.\nThis will open on hover on the rail navigation.\nOn touch devices the navigation opens on click and shows an overlay.\nNote: The rail variant is only an option if all Navigation Items on the first level\nhave an Icon.\nIf this is not the case you should use a burger navigation.\n- **sticky**: The side-nav has a pin button to show the side-nav in small (icon only)\nand full width. This variant is only possible for non-nested navigation items.\nNote: The sticky variant is only an option if all Navigation Items on the first level\nhave an Icon and if there are only \"first level\" items.",
+      "name": "variant",
+      "type": "'default' | 'rail' | 'sticky'"
+    }
+  ],
+  "since": "1.14.0",
+  "slots": [
+    {
+      "description": "The main content of the side-nav. Used for <syn-nav-item /> elements.",
+      "name": ""
+    },
+    {
+      "description": "The footer content of the side-nav. Used for <syn-nav-item /> elements. Please avoid having to many nav-items as it can massively influence the user experience.",
+      "name": "footer"
+    },
+    {
+      "description": "The label of the toggle nav-item for variant=\"sticky\".",
+      "name": "toggle-label"
+    },
+    {
+      "description": "An icon to use in lieu of the default icon for the toggle nav-item for variant=\"sticky\".",
+      "name": "toggle-icon"
+    }
+  ],
+  "sourceModulePath": "components/side-nav/side-nav.js",
+  "status": "stable",
+  "summary": "The <syn-side-nav /> element contains secondary navigation and fits below the header.\nIt can be used to group multiple navigation items (<syn-nav-item />s) together.",
+  "tagName": "syn-side-nav"
+}

package/data/layers/interface/component/component:syn-side-nav.md

@@ -0,0 +1,123 @@
+# syn-side-nav
+
+## Summary
+
+The <syn-side-nav /> element contains secondary navigation and fits below the header.
+It can be used to group multiple navigation items (<syn-nav-item />s) together.
+
+## Documentation
+
+- [Component Documentation](https://synergy-design-system.github.io/?path=/docs/components-syn-side-nav--docs)
+- [Figma Design](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=41227-327748)
+
+## Class Information
+
+- **Tag Name:** `syn-side-nav`
+- **Import Example:** `import SynSideNav from '@synergy-design-system/components/components/side-nav/side-nav.js';`
+
+## Usage Information
+
+- **Status:** stable
+- **Since:** 1.14.0
+
+## Available Slots
+
+- `(default)`: The main content of the side-nav. Used for <syn-nav-item /> elements.
+- `footer`: The footer content of the side-nav. Used for <syn-nav-item /> elements. Please avoid having to many nav-items as it can massively influence the user experience.
+- `toggle-label`: The label of the toggle nav-item for variant="sticky".
+- `toggle-icon`: An icon to use in lieu of the default icon for the toggle nav-item for variant="sticky".
+
+## Available Properties
+
+### noFocusTrapping
+
+attribute: `no-focus-trapping`
+reflects: yes
+type: `boolean`
+default: `false`
+
+By default, the side-nav traps the focus if in variant="default" and open. To disable the focus trapping, set this attribute.
+
+### open
+
+attribute: `open`
+reflects: yes
+type: `boolean`
+default: `false`
+
+Indicates whether or not the side-nav is open. You can toggle this attribute to show and hide the side-nav, or you can use the `show()` and `hide()` methods and this attribute will reflect the side-nav's open state. Depending on the "variant" attribute, the behavior will differ. **Default**: With `open` will show the side-nav with an overlay. Without `open`, the side-nav will be hidden. **Rail**: With `open` will show the whole side-nav with an overlay for touch devices or without an overlay for non-touch devices. Without `open`, the side-nav will only show the prefix of nav-item's. **Sticky**: With `open` will show the whole side-nav with an overlay for touch devices or without an overlay for non-touch devices. Without `open`, the side-nav will only show the prefix of nav-item's.
+
+### variant
+
+attribute: `variant`
+reflects: yes
+type: `'default' | 'rail' | 'sticky'`
+default: `'default'`
+
+The variant that should be used to show the side navigation. The following variants are supported: - **default** (default): Always shows the whole content and additionally an overlay. This makes especially sense for applications, where you navigate to a place and stay there for a longer time. - **rail**: Only show the prefix of navigation items in closed state. This will open on hover on the rail navigation. On touch devices the navigation opens on click and shows an overlay. Note: The rail variant is only an option if all Navigation Items on the first level have an Icon. If this is not the case you should use a burger navigation. - **sticky**: The side-nav has a pin button to show the side-nav in small (icon only) and full width. This variant is only possible for non-nested navigation items. Note: The sticky variant is only an option if all Navigation Items on the first level have an Icon and if there are only "first level" items.
+
+## Available Methods
+
+### hide()
+
+parameters: -
+returns: `void`
+
+Hides the side-nav
+
+### show()
+
+parameters: -
+returns: `void`
+
+Shows the side-nav.
+
+## Available CSS Parts
+
+- `base`: The components base wrapper
+- `body`: The side-nav's body (where the default slot content is rendered)
+- `content`: The components main content
+- `content-container`: The components main content container
+- `drawer`: The drawer that is used under the hood for creating the side-nav
+- `drawer__base`: The drawer's base wrapper
+- `footer`: The components footer content
+- `footer-container`: The components footer content container (where the footer slot content is rendered)
+- `footer-divider`: The components footer divider
+- `overlay`: The overlay that covers the screen behind the side-nav.
+- `panel`: The side-nav's panel (where the whole content is rendered).
+- `toggle-icon`: The icon of the toggle nav-item for variant="sticky"
+- `toggle-label`: The label of the toggle nav-item for variant="sticky".
+- `toggle-nav-item`: The nav-item to toggle open state for variant="sticky"
+
+## Available Events
+
+### syn-after-hide
+
+type: `SynAfterHideEvent`
+
+Emitted after the side-nav closes and all animations are complete.
+
+### syn-after-show
+
+type: `SynAfterShowEvent`
+
+Emitted after the side-nav opens and all animations are complete.
+
+### syn-hide
+
+type: `SynHideEvent`
+
+Emitted when the side-nav closes.
+
+### syn-show
+
+type: `SynShowEvent`
+
+Emitted when the side-nav opens.
+
+## Dependencies
+
+- `syn-divider`
+- `syn-drawer`
+- `syn-icon`
+- `syn-nav-item`

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

@@ -0,0 +1,21 @@
+{
+  "attributes": [],
+  "cssParts": [
+    {
+      "description": "The component's base wrapper.",
+      "name": "base"
+    }
+  ],
+  "dependencies": [],
+  "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-spinner--docs",
+  "events": [],
+  "figmaComponentId": "41227-223775",
+  "methods": [],
+  "properties": [],
+  "since": "2.0",
+  "slots": [],
+  "sourceModulePath": "components/spinner/spinner.js",
+  "status": "stable",
+  "summary": "Spinners are used to show the progress of an indeterminate operation.",
+  "tagName": "syn-spinner"
+}

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

@@ -0,0 +1,24 @@
+# syn-spinner
+
+## Summary
+
+Spinners are used to show the progress of an indeterminate operation.
+
+## Documentation
+
+- [Component Documentation](https://synergy-design-system.github.io/?path=/docs/components-syn-spinner--docs)
+- [Figma Design](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=41227-223775)
+
+## Class Information
+
+- **Tag Name:** `syn-spinner`
+- **Import Example:** `import SynSpinner from '@synergy-design-system/components/components/spinner/spinner.js';`
+
+## Usage Information
+
+- **Status:** stable
+- **Since:** 2.0
+
+## Available CSS Parts
+
+- `base`: The component's base wrapper.