@synergy-design-system/metadata 1.0.0 → 3.0.1

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

@@ -0,0 +1,43 @@
+# syn-prio-nav
+
+## Summary
+
+The `<syn-prio-nav />` element provides a generic navigation bar
+that can be used to group multiple navigation items (usually horizontal `<syn-nav-item />`s)
+together. It will automatically group all items not visible in the viewport into a custom
+priority menu.
+
+## Documentation
+
+- [Component Documentation](https://synergy-design-system.github.io/?path=/docs/components-syn-prio-nav--docs)
+- [Figma Design](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=41227-206412)
+
+## Class Information
+
+- **Tag Name:** `syn-prio-nav`
+- **Import Example:** `import SynPrioNav from '@synergy-design-system/components/components/prio-nav/prio-nav.js';`
+
+## Usage Information
+
+- **Status:** stable
+- **Since:** 1.14.0
+
+## Available Slots
+
+- `(default)`: The given navigation items. Must be horizontal `<syn-nav-item>`s or have a role of "menuitem"
+
+## Available CSS Parts
+
+- `base`: The component's base wrapper.
+- `priority-menu`: The wrapper around the priority menu
+- `priority-menu-container`: The container for the shifted navigation items, if there is not enough space.
+- `priority-menu-icon`: The icon for the priority menu
+- `priority-menu-label`: The label for the priority menu
+- `priority-menu-nav-item`: The navigation item for the priority menu
+
+## Dependencies
+
+- `syn-dropdown`
+- `syn-icon`
+- `syn-menu`
+- `syn-nav-item`

package/data/layers/interface/component/component:syn-progress-bar.json

@@ -0,0 +1,81 @@
+{
+  "attributes": [
+    {
+      "default": "false",
+      "description": "When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.",
+      "fieldName": "indeterminate",
+      "name": "indeterminate",
+      "reflects": true,
+      "type": "boolean"
+    },
+    {
+      "default": "''",
+      "description": "A custom label for assistive devices.",
+      "fieldName": "label",
+      "name": "label",
+      "reflects": false,
+      "type": "string"
+    },
+    {
+      "default": "0",
+      "description": "The current progress as a percentage, 0 to 100.",
+      "fieldName": "value",
+      "name": "value",
+      "reflects": true,
+      "type": "number"
+    }
+  ],
+  "cssParts": [
+    {
+      "description": "The component's base wrapper.",
+      "name": "base"
+    },
+    {
+      "description": "The progress bar's indicator.",
+      "name": "indicator"
+    },
+    {
+      "description": "The progress bar's label.",
+      "name": "label"
+    }
+  ],
+  "dependencies": [],
+  "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-progress-bar--docs",
+  "events": [],
+  "figmaComponentId": "41203-297162",
+  "methods": [],
+  "properties": [
+    {
+      "access": "public",
+      "default": "false",
+      "description": "When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.",
+      "name": "indeterminate",
+      "type": "boolean"
+    },
+    {
+      "access": "public",
+      "default": "''",
+      "description": "A custom label for assistive devices.",
+      "name": "label",
+      "type": "string"
+    },
+    {
+      "access": "public",
+      "default": "0",
+      "description": "The current progress as a percentage, 0 to 100.",
+      "name": "value",
+      "type": "number"
+    }
+  ],
+  "since": "2.0",
+  "slots": [
+    {
+      "description": "A label to show inside the progress indicator.",
+      "name": ""
+    }
+  ],
+  "sourceModulePath": "components/progress-bar/progress-bar.js",
+  "status": "stable",
+  "summary": "Progress bars are used to show the status of an ongoing operation.",
+  "tagName": "syn-progress-bar"
+}

package/data/layers/interface/component/component:syn-progress-bar.md

@@ -0,0 +1,59 @@
+# syn-progress-bar
+
+## Summary
+
+Progress bars are used to show the status of an ongoing operation.
+
+## Documentation
+
+- [Component Documentation](https://synergy-design-system.github.io/?path=/docs/components-syn-progress-bar--docs)
+- [Figma Design](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=41203-297162)
+
+## Class Information
+
+- **Tag Name:** `syn-progress-bar`
+- **Import Example:** `import SynProgressBar from '@synergy-design-system/components/components/progress-bar/progress-bar.js';`
+
+## Usage Information
+
+- **Status:** stable
+- **Since:** 2.0
+
+## Available Slots
+
+- `(default)`: A label to show inside the progress indicator.
+
+## Available Properties
+
+### indeterminate
+
+attribute: `indeterminate`
+reflects: yes
+type: `boolean`
+default: `false`
+
+When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.
+
+### label
+
+attribute: `label`
+reflects: no
+type: `string`
+default: `''`
+
+A custom label for assistive devices.
+
+### value
+
+attribute: `value`
+reflects: yes
+type: `number`
+default: `0`
+
+The current progress as a percentage, 0 to 100.
+
+## Available CSS Parts
+
+- `base`: The component's base wrapper.
+- `indicator`: The progress bar's indicator.
+- `label`: The progress bar's label.

package/data/layers/interface/component/component:syn-progress-ring.json

@@ -0,0 +1,74 @@
+{
+  "attributes": [
+    {
+      "default": "''",
+      "description": "A custom label for assistive devices.",
+      "fieldName": "label",
+      "name": "label",
+      "reflects": false,
+      "type": "string"
+    },
+    {
+      "default": "0",
+      "description": "The current progress as a percentage, 0 to 100.",
+      "fieldName": "value",
+      "name": "value",
+      "reflects": true,
+      "type": "number"
+    }
+  ],
+  "cssParts": [
+    {
+      "description": "The component's base wrapper.",
+      "name": "base"
+    },
+    {
+      "description": "The progress ring label.",
+      "name": "label"
+    }
+  ],
+  "dependencies": [],
+  "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-progress-ring--docs",
+  "events": [],
+  "figmaComponentId": "41203-296727",
+  "methods": [],
+  "properties": [
+    {
+      "access": "public",
+      "description": "",
+      "name": "indicator",
+      "type": "SVGCircleElement"
+    },
+    {
+      "access": "public",
+      "description": "",
+      "name": "indicatorOffset",
+      "type": "string"
+    },
+    {
+      "access": "public",
+      "default": "''",
+      "description": "A custom label for assistive devices.",
+      "name": "label",
+      "type": "string"
+    },
+    {
+      "access": "public",
+      "default": "0",
+      "description": "The current progress as a percentage, 0 to 100.",
+      "name": "value",
+      "type": "number"
+    }
+  ],
+  "since": "2.0",
+  "slots": [
+    {
+      "description": "A label to show inside the ring.",
+      "name": ""
+    }
+  ],
+  "sourceModulePath": "components/progress-ring/progress-ring.js",
+  "status": "stable",
+  "summary": "Progress rings are used to show the progress of a determinate operation in a circular fashion.",
+  "tagName": "syn-progress-ring"
+}

package/data/layers/interface/component/component:syn-progress-ring.md

@@ -0,0 +1,49 @@
+# syn-progress-ring
+
+## Summary
+
+Progress rings are used to show the progress of a determinate operation in a circular fashion.
+
+## Documentation
+
+- [Component Documentation](https://synergy-design-system.github.io/?path=/docs/components-syn-progress-ring--docs)
+- [Figma Design](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=41203-296727)
+
+## Class Information
+
+- **Tag Name:** `syn-progress-ring`
+- **Import Example:** `import SynProgressRing from '@synergy-design-system/components/components/progress-ring/progress-ring.js';`
+
+## Usage Information
+
+- **Status:** stable
+- **Since:** 2.0
+
+## Available Slots
+
+- `(default)`: A label to show inside the ring.
+
+## Available Properties
+
+### label
+
+attribute: `label`
+reflects: no
+type: `string`
+default: `''`
+
+A custom label for assistive devices.
+
+### value
+
+attribute: `value`
+reflects: yes
+type: `number`
+default: `0`
+
+The current progress as a percentage, 0 to 100.
+
+## Available CSS Parts
+
+- `base`: The component's base wrapper.
+- `label`: The progress ring label.

package/data/layers/interface/component/component:syn-radio-button.json

@@ -0,0 +1,164 @@
+{
+  "attributes": [
+    {
+      "default": "false",
+      "description": "Disables the radio button.",
+      "fieldName": "disabled",
+      "name": "disabled",
+      "reflects": true,
+      "type": "boolean"
+    },
+    {
+      "default": "false",
+      "description": "Draws a pill-style radio button with rounded edges.",
+      "fieldName": "pill",
+      "name": "pill",
+      "reflects": true,
+      "type": "boolean"
+    },
+    {
+      "default": "'medium'",
+      "description": "The radio button's size. When used inside a radio group, the size will be determined by the radio group's size so\nthis attribute can typically be omitted.",
+      "fieldName": "size",
+      "name": "size",
+      "reflects": true,
+      "type": "'small' | 'medium' | 'large'"
+    },
+    {
+      "description": "The radio's value. When selected, the radio group will receive this value.",
+      "fieldName": "value",
+      "name": "value",
+      "reflects": false,
+      "type": "string | number"
+    }
+  ],
+  "cssParts": [
+    {
+      "description": "The component's base wrapper.",
+      "name": "base"
+    },
+    {
+      "description": "The internal `<button>` element.",
+      "name": "button"
+    },
+    {
+      "description": "The internal button element when the radio button is checked.",
+      "name": "button--checked"
+    },
+    {
+      "description": "The container that wraps the radio button's label.",
+      "name": "label"
+    },
+    {
+      "description": "The container that wraps the prefix.",
+      "name": "prefix"
+    },
+    {
+      "description": "The container that wraps the suffix.",
+      "name": "suffix"
+    }
+  ],
+  "dependencies": [],
+  "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-radio-button--docs",
+  "events": [
+    {
+      "description": "Emitted when the button loses focus.",
+      "name": "syn-blur",
+      "type": "SynBlurEvent"
+    },
+    {
+      "description": "Emitted when the button gains focus.",
+      "name": "syn-focus",
+      "type": "SynFocusEvent"
+    }
+  ],
+  "methods": [
+    {
+      "description": "Removes focus from the radio button.",
+      "name": "blur",
+      "parameters": []
+    },
+    {
+      "description": "Sets focus on the radio button.",
+      "name": "focus",
+      "parameters": [
+        {
+          "name": "options",
+          "type": "FocusOptions"
+        }
+      ]
+    },
+    {
+      "description": "",
+      "name": "handleDisabledChange",
+      "parameters": []
+    }
+  ],
+  "properties": [
+    {
+      "access": "public",
+      "default": "false",
+      "description": "Disables the radio button.",
+      "name": "disabled",
+      "type": "boolean"
+    },
+    {
+      "access": "public",
+      "default": "false",
+      "description": "",
+      "name": "hasFocus",
+      "type": "boolean"
+    },
+    {
+      "access": "public",
+      "description": "",
+      "name": "hiddenInput",
+      "type": "HTMLInputElement"
+    },
+    {
+      "access": "public",
+      "description": "",
+      "name": "input",
+      "type": "HTMLInputElement"
+    },
+    {
+      "access": "public",
+      "default": "false",
+      "description": "Draws a pill-style radio button with rounded edges.",
+      "name": "pill",
+      "type": "boolean"
+    },
+    {
+      "access": "public",
+      "default": "'medium'",
+      "description": "The radio button's size. When used inside a radio group, the size will be determined by the radio group's size so\nthis attribute can typically be omitted.",
+      "name": "size",
+      "type": "'small' | 'medium' | 'large'"
+    },
+    {
+      "access": "public",
+      "description": "The radio's value. When selected, the radio group will receive this value.",
+      "name": "value",
+      "type": "string | number"
+    }
+  ],
+  "since": "2.0",
+  "slots": [
+    {
+      "description": "The radio button's label.",
+      "name": ""
+    },
+    {
+      "description": "A presentational prefix icon or similar element.",
+      "name": "prefix"
+    },
+    {
+      "description": "A presentational suffix icon or similar element.",
+      "name": "suffix"
+    }
+  ],
+  "sourceModulePath": "components/radio-button/radio-button.js",
+  "status": "stable",
+  "summary": "Radios buttons allow the user to select a single option from a group using a button-like control.",
+  "tagName": "syn-radio-button"
+}

package/data/layers/interface/component/component:syn-radio-button.md

@@ -0,0 +1,102 @@
+# syn-radio-button
+
+## Summary
+
+Radios buttons allow the user to select a single option from a group using a button-like control.
+
+## Documentation
+
+- [Component Documentation](https://synergy-design-system.github.io/?path=/docs/components-syn-radio-button--docs)
+
+## Class Information
+
+- **Tag Name:** `syn-radio-button`
+- **Import Example:** `import SynRadioButton from '@synergy-design-system/components/components/radio-button/radio-button.js';`
+
+## Usage Information
+
+- **Status:** stable
+- **Since:** 2.0
+
+## Available Slots
+
+- `(default)`: The radio button's label.
+- `prefix`: A presentational prefix icon or similar element.
+- `suffix`: A presentational suffix icon or similar element.
+
+## Available Properties
+
+### disabled
+
+attribute: `disabled`
+reflects: yes
+type: `boolean`
+default: `false`
+
+Disables the radio button.
+
+### pill
+
+attribute: `pill`
+reflects: yes
+type: `boolean`
+default: `false`
+
+Draws a pill-style radio button with rounded edges.
+
+### size
+
+attribute: `size`
+reflects: yes
+type: `'small' | 'medium' | 'large'`
+default: `'medium'`
+
+The radio button's size. When used inside a radio group, the size will be determined by the radio group's size so this attribute can typically be omitted.
+
+### value
+
+attribute: `value`
+reflects: no
+type: `string | number`
+default: none
+
+The radio's value. When selected, the radio group will receive this value.
+
+## Available Methods
+
+### blur()
+
+parameters: -
+returns: `void`
+
+Removes focus from the radio button.
+
+### focus()
+
+parameters: `options: FocusOptions`
+returns: `void`
+
+Sets focus on the radio button.
+
+## Available CSS Parts
+
+- `base`: The component's base wrapper.
+- `button`: The internal `<button>` element.
+- `button--checked`: The internal button element when the radio button is checked.
+- `label`: The container that wraps the radio button's label.
+- `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.