@synergy-design-system/metadata 1.0.0 → 3.0.1

package/data/layers/interface/component/component:syn-tab-group.json

@@ -0,0 +1,234 @@
+{
+  "attributes": [
+    {
+      "default": "'auto'",
+      "description": "When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to\nmanual, the tab will receive focus but will not show until the user presses spacebar or enter.",
+      "fieldName": "activation",
+      "name": "activation",
+      "reflects": false,
+      "type": "'auto' | 'manual'"
+    },
+    {
+      "default": "false",
+      "description": "Draws the tab group as a contained element.",
+      "fieldName": "contained",
+      "name": "contained",
+      "reflects": false,
+      "type": "boolean"
+    },
+    {
+      "default": "false",
+      "description": "Prevent scroll buttons from being hidden when inactive.",
+      "fieldName": "fixedScrollControls",
+      "name": "fixed-scroll-controls",
+      "reflects": false,
+      "type": "boolean"
+    },
+    {
+      "default": "false",
+      "description": "Disables the scroll arrows that appear when tabs overflow.",
+      "fieldName": "noScrollControls",
+      "name": "no-scroll-controls",
+      "reflects": false,
+      "type": "boolean"
+    },
+    {
+      "default": "'top'",
+      "description": "The placement of the tabs.",
+      "fieldName": "placement",
+      "name": "placement",
+      "reflects": false,
+      "type": "'top' | 'start' | 'end'"
+    },
+    {
+      "default": "false",
+      "description": "Draws the tab group with edges instead of roundings. Takes only effect if used with the 'contained' property",
+      "fieldName": "sharp",
+      "name": "sharp",
+      "reflects": false,
+      "type": "boolean"
+    }
+  ],
+  "cssParts": [
+    {
+      "description": "The line that highlights the currently selected tab.",
+      "name": "active-tab-indicator"
+    },
+    {
+      "description": "The component's base wrapper.",
+      "name": "base"
+    },
+    {
+      "description": "The tab group's body where tab panels are slotted in.",
+      "name": "body"
+    },
+    {
+      "description": "The tab group's navigation container where tabs are slotted in.",
+      "name": "nav"
+    },
+    {
+      "description": "The previous/next scroll buttons that show when tabs are scrollable, an `<syn-icon-button>`.",
+      "name": "scroll-button"
+    },
+    {
+      "description": "The scroll button's exported `base` part.",
+      "name": "scroll-button__base"
+    },
+    {
+      "description": "The ending scroll button.",
+      "name": "scroll-button--end"
+    },
+    {
+      "description": "The starting scroll button.",
+      "name": "scroll-button--start"
+    },
+    {
+      "description": "The container that wraps the tabs.",
+      "name": "tabs"
+    }
+  ],
+  "dependencies": [
+    "syn-icon-button"
+  ],
+  "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-tab-group--docs",
+  "events": [
+    {
+      "description": "Emitted when a tab is hidden. The payload of the event returns the \"panel\" attribute of the hidden tab.",
+      "name": "syn-tab-hide",
+      "type": "SynTabHideEvent"
+    },
+    {
+      "description": "Emitted when a tab is shown. The payload of the event returns the \"panel\" attribute of the shown tab.",
+      "name": "syn-tab-show",
+      "type": "SynTabShowEvent"
+    }
+  ],
+  "figmaComponentId": "42207-338578",
+  "methods": [
+    {
+      "description": "",
+      "name": "preventFocus",
+      "parameters": [
+        {
+          "name": "e",
+          "type": "MouseEvent"
+        }
+      ]
+    },
+    {
+      "description": "Shows the specified tab panel.",
+      "name": "show",
+      "parameters": [
+        {
+          "name": "panel",
+          "type": "string"
+        }
+      ]
+    },
+    {
+      "description": "",
+      "name": "syncIndicator",
+      "parameters": []
+    },
+    {
+      "description": "",
+      "name": "updateScrollControls",
+      "parameters": []
+    }
+  ],
+  "properties": [
+    {
+      "access": "public",
+      "default": "'auto'",
+      "description": "When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to\nmanual, the tab will receive focus but will not show until the user presses spacebar or enter.",
+      "name": "activation",
+      "type": "'auto' | 'manual'"
+    },
+    {
+      "access": "public",
+      "description": "",
+      "name": "body",
+      "type": "HTMLSlotElement"
+    },
+    {
+      "access": "public",
+      "default": "false",
+      "description": "Draws the tab group as a contained element.",
+      "name": "contained",
+      "type": "boolean"
+    },
+    {
+      "access": "public",
+      "default": "false",
+      "description": "Prevent scroll buttons from being hidden when inactive.",
+      "name": "fixedScrollControls",
+      "type": "boolean"
+    },
+    {
+      "access": "public",
+      "description": "",
+      "name": "indicator",
+      "type": "HTMLElement"
+    },
+    {
+      "access": "public",
+      "description": "",
+      "name": "nav",
+      "type": "HTMLElement"
+    },
+    {
+      "access": "public",
+      "default": "false",
+      "description": "Disables the scroll arrows that appear when tabs overflow.",
+      "name": "noScrollControls",
+      "type": "boolean"
+    },
+    {
+      "access": "public",
+      "description": "",
+      "name": "panels",
+      "type": "SynTabPanel[]"
+    },
+    {
+      "access": "public",
+      "default": "'top'",
+      "description": "The placement of the tabs.",
+      "name": "placement",
+      "type": "'top' | 'start' | 'end'"
+    },
+    {
+      "access": "public",
+      "default": "false",
+      "description": "Draws the tab group with edges instead of roundings. Takes only effect if used with the 'contained' property",
+      "name": "sharp",
+      "type": "boolean"
+    },
+    {
+      "access": "public",
+      "description": "",
+      "name": "tabGroup",
+      "type": "HTMLElement"
+    },
+    {
+      "access": "public",
+      "description": "",
+      "name": "tabs",
+      "type": "SynTab[]"
+    }
+  ],
+  "since": "2.0",
+  "slots": [
+    {
+      "description": "Used for grouping tab panels in the tab group. Must be `<syn-tab-panel>` elements.",
+      "name": ""
+    },
+    {
+      "description": "Used for grouping tabs in the tab group. Must be `<syn-tab>` elements.",
+      "name": "nav"
+    }
+  ],
+  "sourceModulePath": "components/tab-group/tab-group.js",
+  "status": "stable",
+  "summary": "Tab groups organize content into a container that shows one section at a time.",
+  "tagName": "syn-tab-group"
+}

package/data/layers/interface/component/component:syn-tab-group.md

@@ -0,0 +1,120 @@
+# syn-tab-group
+
+## Summary
+
+Tab groups organize content into a container that shows one section at a time.
+
+## Documentation
+
+- [Component Documentation](https://synergy-design-system.github.io/?path=/docs/components-syn-tab-group--docs)
+- [Figma Design](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=42207-338578)
+
+## Class Information
+
+- **Tag Name:** `syn-tab-group`
+- **Import Example:** `import SynTabGroup from '@synergy-design-system/components/components/tab-group/tab-group.js';`
+
+## Usage Information
+
+- **Status:** stable
+- **Since:** 2.0
+
+## Available Slots
+
+- `(default)`: Used for grouping tab panels in the tab group. Must be `<syn-tab-panel>` elements.
+- `nav`: Used for grouping tabs in the tab group. Must be `<syn-tab>` elements.
+
+## Available Properties
+
+### activation
+
+attribute: `activation`
+reflects: no
+type: `'auto' | 'manual'`
+default: `'auto'`
+
+When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to manual, the tab will receive focus but will not show until the user presses spacebar or enter.
+
+### contained
+
+attribute: `contained`
+reflects: no
+type: `boolean`
+default: `false`
+
+Draws the tab group as a contained element.
+
+### fixedScrollControls
+
+attribute: `fixed-scroll-controls`
+reflects: no
+type: `boolean`
+default: `false`
+
+Prevent scroll buttons from being hidden when inactive.
+
+### noScrollControls
+
+attribute: `no-scroll-controls`
+reflects: no
+type: `boolean`
+default: `false`
+
+Disables the scroll arrows that appear when tabs overflow.
+
+### placement
+
+attribute: `placement`
+reflects: no
+type: `'top' | 'start' | 'end'`
+default: `'top'`
+
+The placement of the tabs.
+
+### sharp
+
+attribute: `sharp`
+reflects: no
+type: `boolean`
+default: `false`
+
+Draws the tab group with edges instead of roundings. Takes only effect if used with the 'contained' property
+
+## Available Methods
+
+### show()
+
+parameters: `panel: string`
+returns: `void`
+
+Shows the specified tab panel.
+
+## Available CSS Parts
+
+- `active-tab-indicator`: The line that highlights the currently selected tab.
+- `base`: The component's base wrapper.
+- `body`: The tab group's body where tab panels are slotted in.
+- `nav`: The tab group's navigation container where tabs are slotted in.
+- `scroll-button`: The previous/next scroll buttons that show when tabs are scrollable, an `<syn-icon-button>`.
+- `scroll-button__base`: The scroll button's exported `base` part.
+- `scroll-button--end`: The ending scroll button.
+- `scroll-button--start`: The starting scroll button.
+- `tabs`: The container that wraps the tabs.
+
+## Available Events
+
+### syn-tab-hide
+
+type: `SynTabHideEvent`
+
+Emitted when a tab is hidden. The payload of the event returns the "panel" attribute of the hidden tab.
+
+### syn-tab-show
+
+type: `SynTabShowEvent`
+
+Emitted when a tab is shown. The payload of the event returns the "panel" attribute of the shown tab.
+
+## Dependencies
+
+- `syn-icon-button`

package/data/layers/interface/component/component:syn-tab-panel.json

@@ -0,0 +1,64 @@
+{
+  "attributes": [
+    {
+      "default": "false",
+      "description": "When true, the tab panel will be shown.",
+      "fieldName": "active",
+      "name": "active",
+      "reflects": true,
+      "type": "boolean"
+    },
+    {
+      "default": "''",
+      "description": "The tab panel's name.",
+      "fieldName": "name",
+      "name": "name",
+      "reflects": true,
+      "type": "string"
+    }
+  ],
+  "cssParts": [
+    {
+      "description": "The component's base wrapper.",
+      "name": "base"
+    }
+  ],
+  "dependencies": [],
+  "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-tab-panel--docs",
+  "events": [],
+  "figmaComponentId": "42207-340626",
+  "methods": [
+    {
+      "description": "",
+      "name": "handleActiveChange",
+      "parameters": []
+    }
+  ],
+  "properties": [
+    {
+      "access": "public",
+      "default": "false",
+      "description": "When true, the tab panel will be shown.",
+      "name": "active",
+      "type": "boolean"
+    },
+    {
+      "access": "public",
+      "default": "''",
+      "description": "The tab panel's name.",
+      "name": "name",
+      "type": "string"
+    }
+  ],
+  "since": "2.0",
+  "slots": [
+    {
+      "description": "The tab panel's content.",
+      "name": ""
+    }
+  ],
+  "sourceModulePath": "components/tab-panel/tab-panel.js",
+  "status": "stable",
+  "summary": "Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.",
+  "tagName": "syn-tab-panel"
+}

package/data/layers/interface/component/component:syn-tab-panel.md

@@ -0,0 +1,48 @@
+# syn-tab-panel
+
+## Summary
+
+Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.
+
+## Documentation
+
+- [Component Documentation](https://synergy-design-system.github.io/?path=/docs/components-syn-tab-panel--docs)
+- [Figma Design](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=42207-340626)
+
+## Class Information
+
+- **Tag Name:** `syn-tab-panel`
+- **Import Example:** `import SynTabPanel from '@synergy-design-system/components/components/tab-panel/tab-panel.js';`
+
+## Usage Information
+
+- **Status:** stable
+- **Since:** 2.0
+
+## Available Slots
+
+- `(default)`: The tab panel's content.
+
+## Available Properties
+
+### active
+
+attribute: `active`
+reflects: yes
+type: `boolean`
+default: `false`
+
+When true, the tab panel will be shown.
+
+### name
+
+attribute: `name`
+reflects: yes
+type: `string`
+default: `''`
+
+The tab panel's name.
+
+## Available CSS Parts
+
+- `base`: The component's base wrapper.

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

@@ -0,0 +1,121 @@
+{
+  "attributes": [
+    {
+      "default": "false",
+      "description": "Draws the tab in an active state.",
+      "fieldName": "active",
+      "name": "active",
+      "reflects": true,
+      "type": "boolean"
+    },
+    {
+      "default": "false",
+      "description": "Makes the tab closable and shows a close button.",
+      "fieldName": "closable",
+      "name": "closable",
+      "reflects": true,
+      "type": "boolean"
+    },
+    {
+      "default": "false",
+      "description": "Disables the tab and prevents selection.",
+      "fieldName": "disabled",
+      "name": "disabled",
+      "reflects": true,
+      "type": "boolean"
+    },
+    {
+      "default": "''",
+      "description": "The name of the tab panel this tab is associated with. The panel must be located in the same tab group.",
+      "fieldName": "panel",
+      "name": "panel",
+      "reflects": true,
+      "type": "string"
+    }
+  ],
+  "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"
+    }
+  ],
+  "dependencies": [
+    "syn-icon-button"
+  ],
+  "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-tab--docs",
+  "events": [
+    {
+      "description": "Emitted when the tab is closable and the close button is activated.",
+      "name": "syn-close",
+      "type": "SynCloseEvent"
+    }
+  ],
+  "figmaComponentId": "42207-338162",
+  "methods": [
+    {
+      "description": "",
+      "name": "handleActiveChange",
+      "parameters": []
+    },
+    {
+      "description": "",
+      "name": "handleDisabledChange",
+      "parameters": []
+    }
+  ],
+  "properties": [
+    {
+      "access": "public",
+      "default": "false",
+      "description": "Draws the tab in an active state.",
+      "name": "active",
+      "type": "boolean"
+    },
+    {
+      "access": "public",
+      "default": "false",
+      "description": "Makes the tab closable and shows a close button.",
+      "name": "closable",
+      "type": "boolean"
+    },
+    {
+      "access": "public",
+      "default": "false",
+      "description": "Disables the tab and prevents selection.",
+      "name": "disabled",
+      "type": "boolean"
+    },
+    {
+      "access": "public",
+      "default": "''",
+      "description": "The name of the tab panel this tab is associated with. The panel must be located in the same tab group.",
+      "name": "panel",
+      "type": "string"
+    },
+    {
+      "access": "public",
+      "description": "",
+      "name": "tab",
+      "type": "HTMLElement"
+    }
+  ],
+  "since": "2.0",
+  "slots": [
+    {
+      "description": "The tab's label.",
+      "name": ""
+    }
+  ],
+  "sourceModulePath": "components/tab/tab.js",
+  "status": "stable",
+  "summary": "Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).",
+  "tagName": "syn-tab"
+}

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

@@ -0,0 +1,80 @@
+# syn-tab
+
+## Summary
+
+Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).
+
+## Documentation
+
+- [Component Documentation](https://synergy-design-system.github.io/?path=/docs/components-syn-tab--docs)
+- [Figma Design](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=42207-338162)
+
+## Class Information
+
+- **Tag Name:** `syn-tab`
+- **Import Example:** `import SynTab from '@synergy-design-system/components/components/tab/tab.js';`
+
+## Usage Information
+
+- **Status:** stable
+- **Since:** 2.0
+
+## Available Slots
+
+- `(default)`: The tab's label.
+
+## Available Properties
+
+### active
+
+attribute: `active`
+reflects: yes
+type: `boolean`
+default: `false`
+
+Draws the tab in an active state.
+
+### closable
+
+attribute: `closable`
+reflects: yes
+type: `boolean`
+default: `false`
+
+Makes the tab closable and shows a close button.
+
+### disabled
+
+attribute: `disabled`
+reflects: yes
+type: `boolean`
+default: `false`
+
+Disables the tab and prevents selection.
+
+### panel
+
+attribute: `panel`
+reflects: yes
+type: `string`
+default: `''`
+
+The name of the tab panel this tab is associated with. The panel must be located in the same tab group.
+
+## 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.
+
+## Available Events
+
+### syn-close
+
+type: `SynCloseEvent`
+
+Emitted when the tab is closable and the close button is activated.
+
+## Dependencies
+
+- `syn-icon-button`