@synergy-design-system/metadata 1.0.0 → 3.0.0

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

@@ -0,0 +1,198 @@
+# syn-nav-item
+
+## Summary
+
+Flexible button / link component that can be used to quickly build navigations.
+
+## Documentation
+
+- [Component Documentation](https://synergy-design-system.github.io/?path=/docs/components-syn-nav-item--docs)
+- [Figma Design](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=41163-402744)
+
+## Class Information
+
+- **Tag Name:** `syn-nav-item`
+- **Import Example:** `import SynNavItem from '@synergy-design-system/components/components/nav-item/nav-item.js';`
+
+## Usage Information
+
+- **Status:** stable
+- **Since:** 1.14.0
+
+## Available Slots
+
+- `(default)`: The navigation item's label.
+- `prefix`: A presentational prefix icon or similar element.
+- `suffix`: A presentational suffix icon or similar element.
+- `children`: Slot used to provide nested child navigation elements. If provided, details and summary elements will be used. A chevron will be shown on the right side regardless of the chevron property.
+
+## Available Properties
+
+### chevron
+
+attribute: `chevron`
+reflects: yes
+type: `boolean`
+default: `false`
+
+Appends a chevron to the right side of a navigation item. Only used if `horizontal` is false.
+
+### childrenSlot
+
+attribute: -
+reflects: -
+type: `HTMLSlotElement`
+default: none
+
+Reference to the children slot
+
+### control
+
+attribute: -
+reflects: -
+type: `HTMLButtonElement | HTMLLinkElement | HTMLElement`
+default: none
+
+Reference to the outermost button
+
+### disabled
+
+attribute: `disabled`
+reflects: yes
+type: `boolean`
+default: `false`
+
+Disables the navigation item.
+
+### divider
+
+attribute: `divider`
+reflects: yes
+type: `boolean`
+default: `false`
+
+Toggle to true to show a divider above the element. Only available when horizontal is false.
+
+### horizontal
+
+attribute: `horizontal`
+reflects: yes
+type: `boolean`
+default: `false`
+
+The navigation item's orientation.
+
+### href
+
+attribute: `href`
+reflects: yes
+type: `string`
+default: none
+
+The navigation item's href target. If provided, the navigation item will use an anchor tag otherwise it will use a button tag. If the 'children' slot is provided, the navigation item will ignore the 'href' and use accordion behavior.
+
+### open
+
+attribute: `open`
+reflects: yes
+type: `boolean`
+default: `false`
+
+Reflects HTML details element state and allows control from parent. Only used if `horizontal` is false and `children` is defined.
+
+### rel
+
+attribute: `rel`
+reflects: no
+type: `string`
+default: `'noreferrer noopener'`
+
+When using `href`, this attribute will map to the underlying link's `rel` attribute. Unlike regular links, the default is `noreferrer noopener` to prevent security exploits. However, if you're using `target` to point to a specific tab/window, this will prevent that from working correctly. You can remove or change the default value by setting the attribute to an empty string or a value of your choice, respectively.
+
+### target
+
+attribute: `target`
+reflects: no
+type: `'_blank' | '_parent' | '_self' | '_top'`
+default: none
+
+Tells the browser where to open the link. Only used when `href` is present.
+
+## Attribute-only Members
+
+These attributes are reflected but not exposed as component properties.
+
+### current
+
+reflects: yes
+type: `boolean`
+default: `false`
+
+-
+
+## Available Methods
+
+### blur()
+
+parameters: -
+returns: `void`
+
+Removes focus from the button.
+
+### click()
+
+parameters: -
+returns: `void`
+
+Simulates a click on the nav-items button, link or summary.
+
+### focus()
+
+parameters: `options: FocusOptions`
+returns: `void`
+
+Sets focus on the nav-item
+
+## Available CSS Parts
+
+- `base`: The component's base wrapper including children.
+- `chevron`: The container that wraps the chevron.
+- `children`: The wrapper that holds the children
+- `content`: The component's content excluding children.
+- `content-wrapper`: The component's content wrapper.
+- `current-indicator`: The indicator used when current is set to true
+- `details`: The details element rendered when there are children available
+- `divider`: The components optional top divider.
+- `prefix`: The container that wraps the prefix.
+- `suffix`: The container that wraps the suffix.
+
+## Available Events
+
+### syn-blur
+
+type: `SynBlurEvent`
+
+Emitted when the button loses focus.
+
+### syn-focus
+
+type: `SynFocusEvent`
+
+Emitted when the button gains focus.
+
+### syn-hide
+
+type: `SynHideEvent`
+
+Emitted when the navigation item: - has children, - and is clicked while HTML details are shown.
+
+### syn-show
+
+type: `SynShowEvent`
+
+Emitted when the navigation item: - has children, - and is clicked while HTML details are hidden.
+
+## Dependencies
+
+- `syn-divider`
+- `syn-icon`

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

@@ -0,0 +1,98 @@
+{
+  "attributes": [
+    {
+      "default": "false",
+      "description": "Disables all options in the optgroup.",
+      "fieldName": "disabled",
+      "name": "disabled",
+      "reflects": true,
+      "type": "boolean"
+    },
+    {
+      "default": "''",
+      "description": "The optgroups label. If you need to display HTML, use the `label` slot instead.",
+      "fieldName": "label",
+      "name": "label",
+      "reflects": false,
+      "type": "string"
+    }
+  ],
+  "cssParts": [
+    {
+      "description": "The component's base wrapper.",
+      "name": "base"
+    },
+    {
+      "description": "The divider that is displayed above the content",
+      "name": "divider"
+    },
+    {
+      "description": "The container that wraps prefix, label and base",
+      "name": "label-container"
+    },
+    {
+      "description": "The container that wraps the <syn-option> elements.",
+      "name": "options"
+    },
+    {
+      "description": "The container that wraps the prefix.",
+      "name": "prefix"
+    },
+    {
+      "description": "The container that wraps the suffix.",
+      "name": "suffix"
+    }
+  ],
+  "dependencies": [
+    "syn-divider"
+  ],
+  "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-optgroup--docs",
+  "events": [],
+  "figmaComponentId": "41325-324372",
+  "methods": [],
+  "properties": [
+    {
+      "access": "public",
+      "description": "",
+      "name": "assignedOptions",
+      "type": "SynOption[]"
+    },
+    {
+      "access": "public",
+      "default": "false",
+      "description": "Disables all options in the optgroup.",
+      "name": "disabled",
+      "type": "boolean"
+    },
+    {
+      "access": "public",
+      "default": "''",
+      "description": "The optgroups label. If you need to display HTML, use the `label` slot instead.",
+      "name": "label",
+      "type": "string"
+    }
+  ],
+  "since": "1.3.0",
+  "slots": [
+    {
+      "description": "The given options. Must be `<syn-option>` elements.",
+      "name": ""
+    },
+    {
+      "description": "A presentational prefix icon or similar element.",
+      "name": "prefix"
+    },
+    {
+      "description": "The label for the optgroup",
+      "name": "label"
+    },
+    {
+      "description": "A presentational suffix icon or similar element.",
+      "name": "suffix"
+    }
+  ],
+  "sourceModulePath": "components/optgroup/optgroup.js",
+  "status": "stable",
+  "summary": "The <syn-optgroup> element creates a grouping for <syn-option>s within a <syn-select>.",
+  "tagName": "syn-optgroup"
+}

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

@@ -0,0 +1,60 @@
+# syn-optgroup
+
+## Summary
+
+The <syn-optgroup> element creates a grouping for <syn-option>s within a <syn-select>.
+
+## Documentation
+
+- [Component Documentation](https://synergy-design-system.github.io/?path=/docs/components-syn-optgroup--docs)
+- [Figma Design](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=41325-324372)
+
+## Class Information
+
+- **Tag Name:** `syn-optgroup`
+- **Import Example:** `import SynOptgroup from '@synergy-design-system/components/components/optgroup/optgroup.js';`
+
+## Usage Information
+
+- **Status:** stable
+- **Since:** 1.3.0
+
+## Available Slots
+
+- `(default)`: The given options. Must be `<syn-option>` elements.
+- `prefix`: A presentational prefix icon or similar element.
+- `label`: The label for the optgroup
+- `suffix`: A presentational suffix icon or similar element.
+
+## Available Properties
+
+### disabled
+
+attribute: `disabled`
+reflects: yes
+type: `boolean`
+default: `false`
+
+Disables all options in the optgroup.
+
+### label
+
+attribute: `label`
+reflects: no
+type: `string`
+default: `''`
+
+The optgroups label. If you need to display HTML, use the `label` slot instead.
+
+## Available CSS Parts
+
+- `base`: The component's base wrapper.
+- `divider`: The divider that is displayed above the content
+- `label-container`: The container that wraps prefix, label and base
+- `options`: The container that wraps the <syn-option> elements.
+- `prefix`: The container that wraps the prefix.
+- `suffix`: The container that wraps the suffix.
+
+## Dependencies
+
+- `syn-divider`

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

@@ -0,0 +1,149 @@
+{
+  "attributes": [
+    {
+      "default": "false",
+      "description": "Draws the option in a disabled state, preventing selection.",
+      "fieldName": "disabled",
+      "name": "disabled",
+      "reflects": true,
+      "type": "boolean"
+    },
+    {
+      "default": "''",
+      "description": "The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\nmultiple values.",
+      "fieldName": "value",
+      "name": "value",
+      "reflects": true,
+      "type": "string | number"
+    }
+  ],
+  "cssParts": [
+    {
+      "description": "The component's base wrapper.",
+      "name": "base"
+    },
+    {
+      "description": "The checked icon, an `<syn-icon>` element.",
+      "name": "checked-icon"
+    },
+    {
+      "description": "The option's label.",
+      "name": "label"
+    },
+    {
+      "description": "The container that wraps the prefix.",
+      "name": "prefix"
+    },
+    {
+      "description": "The container that wraps the suffix.",
+      "name": "suffix"
+    }
+  ],
+  "dependencies": [
+    "syn-icon"
+  ],
+  "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-option--docs",
+  "events": [],
+  "figmaComponentId": "41325-312743",
+  "methods": [
+    {
+      "description": "Returns a plain text label based on the option's content.",
+      "name": "getTextLabel",
+      "parameters": []
+    },
+    {
+      "description": "",
+      "name": "handleDelimiterChange",
+      "parameters": []
+    },
+    {
+      "description": "",
+      "name": "handleDisabledChange",
+      "parameters": []
+    },
+    {
+      "description": "",
+      "name": "handleSelectedChange",
+      "parameters": []
+    },
+    {
+      "description": "",
+      "name": "handleValueChange",
+      "parameters": []
+    },
+    {
+      "description": "Replaces any occurrences of the delimiter in the option's original value with underscores.",
+      "name": "sanitizeValueForDelimiter",
+      "parameters": []
+    }
+  ],
+  "properties": [
+    {
+      "access": "public",
+      "default": "false",
+      "description": "",
+      "name": "current",
+      "type": "boolean"
+    },
+    {
+      "access": "public",
+      "description": "",
+      "name": "defaultSlot",
+      "type": "HTMLSlotElement"
+    },
+    {
+      "access": "public",
+      "default": "' '",
+      "description": "",
+      "name": "delimiter",
+      "type": "string"
+    },
+    {
+      "access": "public",
+      "default": "false",
+      "description": "Draws the option in a disabled state, preventing selection.",
+      "name": "disabled",
+      "type": "boolean"
+    },
+    {
+      "access": "public",
+      "default": "false",
+      "description": "",
+      "name": "hasHover",
+      "type": "boolean"
+    },
+    {
+      "access": "public",
+      "default": "false",
+      "description": "",
+      "name": "selected",
+      "type": "boolean"
+    },
+    {
+      "access": "public",
+      "default": "''",
+      "description": "The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\nmultiple values.",
+      "name": "value",
+      "type": "string | number"
+    }
+  ],
+  "since": "2.0",
+  "slots": [
+    {
+      "description": "The option's label.",
+      "name": ""
+    },
+    {
+      "description": "Used to prepend an icon or similar element to the menu item.",
+      "name": "prefix"
+    },
+    {
+      "description": "Used to append an icon or similar element to the menu item.",
+      "name": "suffix"
+    }
+  ],
+  "sourceModulePath": "components/option/option.js",
+  "status": "stable",
+  "summary": "Options define the selectable items within various form controls such as [select](/components/select).",
+  "tagName": "syn-option"
+}

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

@@ -0,0 +1,74 @@
+# syn-option
+
+## Summary
+
+Options define the selectable items within various form controls such as [select](/components/select).
+
+## Documentation
+
+- [Component Documentation](https://synergy-design-system.github.io/?path=/docs/components-syn-option--docs)
+- [Figma Design](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=41325-312743)
+
+## Class Information
+
+- **Tag Name:** `syn-option`
+- **Import Example:** `import SynOption from '@synergy-design-system/components/components/option/option.js';`
+
+## Usage Information
+
+- **Status:** stable
+- **Since:** 2.0
+
+## Available Slots
+
+- `(default)`: The option's label.
+- `prefix`: Used to prepend an icon or similar element to the menu item.
+- `suffix`: Used to append an icon or similar element to the menu item.
+
+## Available Properties
+
+### disabled
+
+attribute: `disabled`
+reflects: yes
+type: `boolean`
+default: `false`
+
+Draws the option in a disabled state, preventing selection.
+
+### value
+
+attribute: `value`
+reflects: yes
+type: `string | number`
+default: `''`
+
+The option's value. When selected, the containing form control will receive this value. The value must be unique from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing multiple values.
+
+## Available Methods
+
+### getTextLabel()
+
+parameters: -
+returns: `void`
+
+Returns a plain text label based on the option's content.
+
+### sanitizeValueForDelimiter()
+
+parameters: -
+returns: `void`
+
+Replaces any occurrences of the delimiter in the option's original value with underscores.
+
+## Available CSS Parts
+
+- `base`: The component's base wrapper.
+- `checked-icon`: The checked icon, an `<syn-icon>` element.
+- `label`: The option's label.
+- `prefix`: The container that wraps the prefix.
+- `suffix`: The container that wraps the suffix.
+
+## Dependencies
+
+- `syn-icon`