@synergy-design-system/metadata 1.0.0 → 3.0.1

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

@@ -0,0 +1,182 @@
+{
+  "attributes": [
+    {
+      "default": "false",
+      "description": "Enables a close button that allows the user to dismiss the alert.",
+      "fieldName": "closable",
+      "name": "closable",
+      "reflects": true,
+      "type": "boolean"
+    },
+    {
+      "default": "Infinity",
+      "description": "The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\nthe alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning\nthe alert will not close on its own.",
+      "fieldName": "duration",
+      "name": "duration",
+      "reflects": false
+    },
+    {
+      "default": "false",
+      "description": "Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the alert's open state.",
+      "fieldName": "open",
+      "name": "open",
+      "reflects": true,
+      "type": "boolean"
+    },
+    {
+      "default": "'medium'",
+      "description": "The alert's size.",
+      "fieldName": "size",
+      "name": "size",
+      "reflects": true,
+      "type": "'small' | 'medium' | 'large'"
+    },
+    {
+      "default": "'primary'",
+      "description": "The alert's theme variant.",
+      "fieldName": "variant",
+      "name": "variant",
+      "reflects": true,
+      "type": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
+    }
+  ],
+  "cssParts": [
+    {
+      "description": "The component's base wrapper.",
+      "name": "base"
+    },
+    {
+      "description": "The close button, an `<syn-icon-button>`.",
+      "name": "close-button"
+    },
+    {
+      "description": "The close button's exported `base` part.",
+      "name": "close-button__base"
+    },
+    {
+      "description": "The container that wraps the optional icon.",
+      "name": "icon"
+    },
+    {
+      "description": "The container that wraps the alert's main content.",
+      "name": "message"
+    }
+  ],
+  "dependencies": [
+    "syn-icon-button"
+  ],
+  "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-alert--docs",
+  "events": [
+    {
+      "description": "Emitted after the alert closes and all animations are complete.",
+      "name": "syn-after-hide",
+      "type": "SynAfterHideEvent"
+    },
+    {
+      "description": "Emitted after the alert opens and all animations are complete.",
+      "name": "syn-after-show",
+      "type": "SynAfterShowEvent"
+    },
+    {
+      "description": "Emitted when the alert closes.",
+      "name": "syn-hide",
+      "type": "SynHideEvent"
+    },
+    {
+      "description": "Emitted when the alert opens.",
+      "name": "syn-show",
+      "type": "SynShowEvent"
+    }
+  ],
+  "figmaComponentId": "41137-630160",
+  "methods": [
+    {
+      "description": "",
+      "name": "handleDurationChange",
+      "parameters": []
+    },
+    {
+      "description": "",
+      "name": "handleOpenChange",
+      "parameters": []
+    },
+    {
+      "description": "Hides the alert",
+      "name": "hide",
+      "parameters": []
+    },
+    {
+      "description": "Shows the alert.",
+      "name": "show",
+      "parameters": []
+    },
+    {
+      "description": "Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\ndismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\ncalling this method again. The returned promise will resolve after the alert is hidden.",
+      "name": "toast",
+      "parameters": []
+    }
+  ],
+  "properties": [
+    {
+      "access": "public",
+      "description": "",
+      "name": "base",
+      "type": "HTMLElement"
+    },
+    {
+      "access": "public",
+      "default": "false",
+      "description": "Enables a close button that allows the user to dismiss the alert.",
+      "name": "closable",
+      "type": "boolean"
+    },
+    {
+      "access": "public",
+      "description": "",
+      "name": "countdownElement",
+      "type": "HTMLElement"
+    },
+    {
+      "access": "public",
+      "default": "Infinity",
+      "description": "The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\nthe alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning\nthe alert will not close on its own.",
+      "name": "duration"
+    },
+    {
+      "access": "public",
+      "default": "false",
+      "description": "Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the alert's open state.",
+      "name": "open",
+      "type": "boolean"
+    },
+    {
+      "access": "public",
+      "default": "'medium'",
+      "description": "The alert's size.",
+      "name": "size",
+      "type": "'small' | 'medium' | 'large'"
+    },
+    {
+      "access": "public",
+      "default": "'primary'",
+      "description": "The alert's theme variant.",
+      "name": "variant",
+      "type": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
+    }
+  ],
+  "since": "2.0",
+  "slots": [
+    {
+      "description": "The alert's main content.",
+      "name": ""
+    },
+    {
+      "description": "An icon to show in the alert. Works best with `<syn-icon>`.",
+      "name": "icon"
+    }
+  ],
+  "sourceModulePath": "components/alert/alert.js",
+  "status": "stable",
+  "summary": "Alerts are used to display important messages inline or as toast notifications.",
+  "tagName": "syn-alert"
+}

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

@@ -0,0 +1,135 @@
+# syn-alert
+
+## Summary
+
+Alerts are used to display important messages inline or as toast notifications.
+
+## Documentation
+
+- [Component Documentation](https://synergy-design-system.github.io/?path=/docs/components-syn-alert--docs)
+- [Figma Design](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=41137-630160)
+
+## Class Information
+
+- **Tag Name:** `syn-alert`
+- **Import Example:** `import SynAlert from '@synergy-design-system/components/components/alert/alert.js';`
+
+## Usage Information
+
+- **Status:** stable
+- **Since:** 2.0
+
+## Available Slots
+
+- `(default)`: The alert's main content.
+- `icon`: An icon to show in the alert. Works best with `<syn-icon>`.
+
+## Available Properties
+
+### closable
+
+attribute: `closable`
+reflects: yes
+type: `boolean`
+default: `false`
+
+Enables a close button that allows the user to dismiss the alert.
+
+### duration
+
+attribute: `duration`
+reflects: no
+type: `undefined`
+default: `Infinity`
+
+The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with the alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning the alert will not close on its own.
+
+### open
+
+attribute: `open`
+reflects: yes
+type: `boolean`
+default: `false`
+
+Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can use the `show()` and `hide()` methods and this attribute will reflect the alert's open state.
+
+### size
+
+attribute: `size`
+reflects: yes
+type: `'small' | 'medium' | 'large'`
+default: `'medium'`
+
+The alert's size.
+
+### variant
+
+attribute: `variant`
+reflects: yes
+type: `'primary' | 'success' | 'neutral' | 'warning' | 'danger'`
+default: `'primary'`
+
+The alert's theme variant.
+
+## Available Methods
+
+### hide()
+
+parameters: -
+returns: `void`
+
+Hides the alert
+
+### show()
+
+parameters: -
+returns: `void`
+
+Shows the alert.
+
+### toast()
+
+parameters: -
+returns: `void`
+
+Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when
+dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by
+calling this method again. The returned promise will resolve after the alert is hidden.
+
+## Available CSS Parts
+
+- `base`: The component's base wrapper.
+- `close-button`: The close button, an `<syn-icon-button>`.
+- `close-button__base`: The close button's exported `base` part.
+- `icon`: The container that wraps the optional icon.
+- `message`: The container that wraps the alert's main content.
+
+## Available Events
+
+### syn-after-hide
+
+type: `SynAfterHideEvent`
+
+Emitted after the alert closes and all animations are complete.
+
+### syn-after-show
+
+type: `SynAfterShowEvent`
+
+Emitted after the alert opens and all animations are complete.
+
+### syn-hide
+
+type: `SynHideEvent`
+
+Emitted when the alert closes.
+
+### syn-show
+
+type: `SynShowEvent`
+
+Emitted when the alert opens.
+
+## Dependencies
+
+- `syn-icon-button`

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

@@ -0,0 +1,43 @@
+{
+  "attributes": [
+    {
+      "default": "'primary'",
+      "description": "The badge's theme variant.",
+      "fieldName": "variant",
+      "name": "variant",
+      "reflects": true,
+      "type": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
+    }
+  ],
+  "cssParts": [
+    {
+      "description": "The component's base wrapper.",
+      "name": "base"
+    }
+  ],
+  "dependencies": [],
+  "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-badge--docs",
+  "events": [],
+  "figmaComponentId": "41137-656313",
+  "methods": [],
+  "properties": [
+    {
+      "access": "public",
+      "default": "'primary'",
+      "description": "The badge's theme variant.",
+      "name": "variant",
+      "type": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
+    }
+  ],
+  "since": "2.0",
+  "slots": [
+    {
+      "description": "The badge's content.",
+      "name": ""
+    }
+  ],
+  "sourceModulePath": "components/badge/badge.js",
+  "status": "stable",
+  "summary": "Badges are used to draw attention and display statuses or counts.",
+  "tagName": "syn-badge"
+}

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

@@ -0,0 +1,39 @@
+# syn-badge
+
+## Summary
+
+Badges are used to draw attention and display statuses or counts.
+
+## Documentation
+
+- [Component Documentation](https://synergy-design-system.github.io/?path=/docs/components-syn-badge--docs)
+- [Figma Design](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=41137-656313)
+
+## Class Information
+
+- **Tag Name:** `syn-badge`
+- **Import Example:** `import SynBadge from '@synergy-design-system/components/components/badge/badge.js';`
+
+## Usage Information
+
+- **Status:** stable
+- **Since:** 2.0
+
+## Available Slots
+
+- `(default)`: The badge's content.
+
+## Available Properties
+
+### variant
+
+attribute: `variant`
+reflects: yes
+type: `'primary' | 'success' | 'neutral' | 'warning' | 'danger'`
+default: `'primary'`
+
+The badge's theme variant.
+
+## Available CSS Parts
+
+- `base`: The component's base wrapper.

package/data/layers/interface/component/component:syn-breadcrumb-item.json

@@ -0,0 +1,114 @@
+{
+  "attributes": [
+    {
+      "description": "Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered\ninternally. When unset, a button will be rendered instead.",
+      "fieldName": "href",
+      "name": "href",
+      "reflects": false,
+      "type": "string | undefined"
+    },
+    {
+      "default": "'noreferrer noopener'",
+      "description": "The `rel` attribute to use on the link. Only used when `href` is set.",
+      "fieldName": "rel",
+      "name": "rel",
+      "reflects": false,
+      "type": "string"
+    },
+    {
+      "description": "Tells the browser where to open the link. Only used when `href` is set.",
+      "fieldName": "target",
+      "name": "target",
+      "reflects": false,
+      "type": "'_blank' | '_parent' | '_self' | '_top' | undefined"
+    }
+  ],
+  "cssParts": [
+    {
+      "description": "The component's base wrapper.",
+      "name": "base"
+    },
+    {
+      "description": "The breadcrumb item's label.",
+      "name": "label"
+    },
+    {
+      "description": "The container that wraps the prefix.",
+      "name": "prefix"
+    },
+    {
+      "description": "The container that wraps the separator.",
+      "name": "separator"
+    },
+    {
+      "description": "The container that wraps the suffix.",
+      "name": "suffix"
+    }
+  ],
+  "dependencies": [],
+  "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb-item--docs",
+  "events": [],
+  "figmaComponentId": "41127-679600",
+  "methods": [
+    {
+      "description": "",
+      "name": "handleSlotChange",
+      "parameters": []
+    },
+    {
+      "description": "",
+      "name": "hrefChanged",
+      "parameters": []
+    }
+  ],
+  "properties": [
+    {
+      "access": "public",
+      "description": "",
+      "name": "defaultSlot",
+      "type": "HTMLSlotElement"
+    },
+    {
+      "access": "public",
+      "description": "Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered\ninternally. When unset, a button will be rendered instead.",
+      "name": "href",
+      "type": "string | undefined"
+    },
+    {
+      "access": "public",
+      "default": "'noreferrer noopener'",
+      "description": "The `rel` attribute to use on the link. Only used when `href` is set.",
+      "name": "rel",
+      "type": "string"
+    },
+    {
+      "access": "public",
+      "description": "Tells the browser where to open the link. Only used when `href` is set.",
+      "name": "target",
+      "type": "'_blank' | '_parent' | '_self' | '_top' | undefined"
+    }
+  ],
+  "since": "2.0",
+  "slots": [
+    {
+      "description": "The breadcrumb item's label.",
+      "name": ""
+    },
+    {
+      "description": "An optional prefix, usually an icon or icon button.",
+      "name": "prefix"
+    },
+    {
+      "description": "An optional suffix, usually an icon or icon button.",
+      "name": "suffix"
+    },
+    {
+      "description": "The separator to use for the breadcrumb item. This will only change the separator for this item. If you want to change it for all items in the group, set the separator on `<syn-breadcrumb>` instead.",
+      "name": "separator"
+    }
+  ],
+  "sourceModulePath": "components/breadcrumb-item/breadcrumb-item.js",
+  "status": "stable",
+  "summary": "Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.",
+  "tagName": "syn-breadcrumb-item"
+}

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

@@ -0,0 +1,64 @@
+# syn-breadcrumb-item
+
+## Summary
+
+Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.
+
+## Documentation
+
+- [Component Documentation](https://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb-item--docs)
+- [Figma Design](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=41127-679600)
+
+## Class Information
+
+- **Tag Name:** `syn-breadcrumb-item`
+- **Import Example:** `import SynBreadcrumbItem from '@synergy-design-system/components/components/breadcrumb-item/breadcrumb-item.js';`
+
+## Usage Information
+
+- **Status:** stable
+- **Since:** 2.0
+
+## Available Slots
+
+- `(default)`: The breadcrumb item's label.
+- `prefix`: An optional prefix, usually an icon or icon button.
+- `suffix`: An optional suffix, usually an icon or icon button.
+- `separator`: The separator to use for the breadcrumb item. This will only change the separator for this item. If you want to change it for all items in the group, set the separator on `<syn-breadcrumb>` instead.
+
+## Available Properties
+
+### href
+
+attribute: `href`
+reflects: no
+type: `string | undefined`
+default: none
+
+Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered internally. When unset, a button will be rendered instead.
+
+### rel
+
+attribute: `rel`
+reflects: no
+type: `string`
+default: `'noreferrer noopener'`
+
+The `rel` attribute to use on the link. Only used when `href` is set.
+
+### target
+
+attribute: `target`
+reflects: no
+type: `'_blank' | '_parent' | '_self' | '_top' | undefined`
+default: none
+
+Tells the browser where to open the link. Only used when `href` is set.
+
+## Available CSS Parts
+
+- `base`: The component's base wrapper.
+- `label`: The breadcrumb item's label.
+- `prefix`: The container that wraps the prefix.
+- `separator`: The container that wraps the separator.
+- `suffix`: The container that wraps the suffix.

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

@@ -0,0 +1,61 @@
+{
+  "attributes": [
+    {
+      "default": "''",
+      "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
+      "fieldName": "label",
+      "name": "label",
+      "reflects": false,
+      "type": "string"
+    }
+  ],
+  "cssParts": [
+    {
+      "description": "The component's base wrapper.",
+      "name": "base"
+    }
+  ],
+  "dependencies": [
+    "syn-icon"
+  ],
+  "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb--docs",
+  "events": [],
+  "figmaComponentId": "41137-748938",
+  "methods": [],
+  "properties": [
+    {
+      "access": "public",
+      "description": "",
+      "name": "defaultSlot",
+      "type": "HTMLSlotElement"
+    },
+    {
+      "access": "public",
+      "default": "''",
+      "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
+      "name": "label",
+      "type": "string"
+    },
+    {
+      "access": "public",
+      "description": "",
+      "name": "separatorSlot",
+      "type": "HTMLSlotElement"
+    }
+  ],
+  "since": "2.0",
+  "slots": [
+    {
+      "description": "One or more breadcrumb items to display.",
+      "name": ""
+    },
+    {
+      "description": "The separator to use between breadcrumb items. Works best with `<syn-icon>`.",
+      "name": "separator"
+    }
+  ],
+  "sourceModulePath": "components/breadcrumb/breadcrumb.js",
+  "status": "stable",
+  "summary": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.",
+  "tagName": "syn-breadcrumb"
+}

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

@@ -0,0 +1,44 @@
+# syn-breadcrumb
+
+## Summary
+
+Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
+
+## Documentation
+
+- [Component Documentation](https://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb--docs)
+- [Figma Design](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=41137-748938)
+
+## Class Information
+
+- **Tag Name:** `syn-breadcrumb`
+- **Import Example:** `import SynBreadcrumb from '@synergy-design-system/components/components/breadcrumb/breadcrumb.js';`
+
+## Usage Information
+
+- **Status:** stable
+- **Since:** 2.0
+
+## Available Slots
+
+- `(default)`: One or more breadcrumb items to display.
+- `separator`: The separator to use between breadcrumb items. Works best with `<syn-icon>`.
+
+## Available Properties
+
+### label
+
+attribute: `label`
+reflects: no
+type: `string`
+default: `''`
+
+The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by screen readers and other assistive devices to provide more context for users.
+
+## Available CSS Parts
+
+- `base`: The component's base wrapper.
+
+## Dependencies
+
+- `syn-icon`