npm - @synergy-design-system/metadata - Versions diffs - 3.7.0 → 3.9.0 - Mend

@synergy-design-system/metadata 3.7.0 → 3.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (577) hide show

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

@@ -70,7 +70,8 @@
       "type": "SynFocusEvent"
     }
   ],
-  "figmaComponentId": "41310-252390",
+  "figmaComponentId": "1345-21578",
+  "figmaDocsId": "41310-252390",
   "methods": [
     {
       "description": "",
@@ -126,7 +127,7 @@
       "type": "string | number"
     }
   ],
-  "since": "2.0",
+  "since": "1.0.0",
   "slots": [
     {
       "description": "The radio's label.",

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

@@ -7,7 +7,8 @@ Radios allow the user to select a single option from a group.
 ## Documentation
 - [Component Documentation](https://synergy-design-system.github.io/?path=/docs/components-syn-radio--docs)
-- [Figma Design](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=41310-252390)
+- [Figma Examples](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=41310-252390)
+- [Figma Component](https://www.figma.com/design/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?node-id=1345-21578)
 ## Class Information
@@ -17,7 +18,7 @@ Radios allow the user to select a single option from a group.
 ## Usage Information
 - **Status:** stable
-- **Since:** 2.0
+- **Since:** 1.0.0
 ## Available Slots

package/data/layers/interface/component/component:syn-range-tick.json CHANGED Viewed

@@ -26,7 +26,8 @@
   "dependencies": [],
   "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-range-tick--docs",
   "events": [],
-  "figmaComponentId": "41310-326049",
+  "figmaComponentId": "25215-38412",
+  "figmaDocsId": "41310-326049",
   "methods": [],
   "properties": [
     {
@@ -37,7 +38,7 @@
       "type": "boolean"
     }
   ],
-  "since": "unknown",
+  "since": "2.6.0",
   "slots": [
     {
       "description": "The tick's label",

package/data/layers/interface/component/component:syn-range-tick.md CHANGED Viewed

@@ -7,7 +7,8 @@ Ticks visually improve positioning on range sliders.
 ## Documentation
 - [Component Documentation](https://synergy-design-system.github.io/?path=/docs/components-syn-range-tick--docs)
-- [Figma Design](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=41310-326049)
+- [Figma Examples](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=41310-326049)
+- [Figma Component](https://www.figma.com/design/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?node-id=25215-38412)
 ## Class Information
@@ -17,7 +18,7 @@ Ticks visually improve positioning on range sliders.
 ## Usage Information
 - **Status:** stable
-- **Since:** unknown
+- **Since:** 2.6.0
 ## Available Slots

package/data/layers/interface/component/component:syn-range.json CHANGED Viewed

@@ -205,7 +205,8 @@
       "type": "SynMoveEvent"
     }
   ],
-  "figmaComponentId": "41310-323916",
+  "figmaComponentId": "25215-36015",
+  "figmaDocsId": "41310-323916",
   "methods": [
     {
       "description": "Checks for validity but does not show a validation message.\nReturns `true` when valid and `false` when invalid.",
@@ -399,7 +400,7 @@
       "name": "valueAsArray"
     }
   ],
-  "since": "unknown",
+  "since": "2.6.0",
   "slots": [
     {
       "description": "The range's label. Alternatively, you can use the `label` attribute.",

package/data/layers/interface/component/component:syn-range.md CHANGED Viewed

@@ -7,7 +7,8 @@ Ranges allow the user to select values within a given range using one or two thu
 ## Documentation
 - [Component Documentation](https://synergy-design-system.github.io/?path=/docs/components-syn-range--docs)
-- [Figma Design](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=41310-323916)
+- [Figma Examples](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=41310-323916)
+- [Figma Component](https://www.figma.com/design/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?node-id=25215-36015)
 ## Class Information
@@ -17,7 +18,7 @@ Ranges allow the user to select values within a given range using one or two thu
 ## Usage Information
 - **Status:** stable
-- **Since:** unknown
+- **Since:** 2.6.0
 ## Available Slots

package/data/layers/interface/component/component:syn-select.json CHANGED Viewed

@@ -268,7 +268,8 @@
       "type": "SynShowEvent"
     }
   ],
-  "figmaComponentId": "41325-310740",
+  "figmaComponentId": "4825-30354",
+  "figmaDocsId": "41325-310740",
   "methods": [
     {
       "description": "Removes focus from the control.",
@@ -542,7 +543,7 @@
       "type": "HTMLInputElement"
     }
   ],
-  "since": "2.0",
+  "since": "1.5.0",
   "slots": [
     {
       "description": "The listbox options. Must be `<syn-option>` elements. You can use `<syn-divider>` to group items visually.",

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

@@ -7,7 +7,8 @@ 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)
+- [Figma Examples](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=41325-310740)
+- [Figma Component](https://www.figma.com/design/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?node-id=4825-30354)
 ## Class Information
@@ -17,7 +18,7 @@ Selects allow you to choose items from a menu of predefined options.
 ## Usage Information
 - **Status:** stable
-- **Since:** 2.0
+- **Since:** 1.5.0
 ## Available Slots

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

@@ -112,7 +112,8 @@
       "type": "SynShowEvent"
     }
   ],
-  "figmaComponentId": "41227-327748",
+  "figmaComponentId": "12362-15033",
+  "figmaDocsId": "41227-327748",
   "methods": [
     {
       "description": "",
@@ -163,7 +164,7 @@
       "type": "'default' | 'rail' | 'sticky'"
     }
   ],
-  "since": "1.14.0",
+  "since": "1.15.0",
   "slots": [
     {
       "description": "The main content of the side-nav. Used for <syn-nav-item /> elements.",

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

@@ -8,7 +8,8 @@ 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)
+- [Figma Examples](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=41227-327748)
+- [Figma Component](https://www.figma.com/design/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?node-id=12362-15033)
 ## Class Information
@@ -18,7 +19,7 @@ It can be used to group multiple navigation items (<syn-nav-item />s) together.
 ## Usage Information
 - **Status:** stable
-- **Since:** 1.14.0
+- **Since:** 1.15.0
 ## Available Slots

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

@@ -9,10 +9,11 @@
   "dependencies": [],
   "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-spinner--docs",
   "events": [],
-  "figmaComponentId": "41227-223775",
+  "figmaComponentId": "17016-71772",
+  "figmaDocsId": "41227-223775",
   "methods": [],
   "properties": [],
-  "since": "2.0",
+  "since": "1.22.0",
   "slots": [],
   "sourceModulePath": "components/spinner/spinner.js",
   "status": "stable",

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

@@ -7,7 +7,8 @@ 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)
+- [Figma Examples](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=41227-223775)
+- [Figma Component](https://www.figma.com/design/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?node-id=17016-71772)
 ## Class Information
@@ -17,7 +18,7 @@ Spinners are used to show the progress of an indeterminate operation.
 ## Usage Information
 - **Status:** stable
-- **Since:** 2.0
+- **Since:** 1.22.0
 ## Available CSS Parts

package/data/layers/interface/component/component:syn-switch.json CHANGED Viewed

@@ -131,7 +131,8 @@
       "type": "SynInvalidEvent"
     }
   ],
-  "figmaComponentId": "41310-259132",
+  "figmaComponentId": "2190-4038",
+  "figmaDocsId": "41310-259132",
   "methods": [
     {
       "description": "Removes focus from the switch.",
@@ -283,7 +284,7 @@
       "type": "string"
     }
   ],
-  "since": "2.0",
+  "since": "1.0.0",
   "slots": [
     {
       "description": "The switch's label.",

package/data/layers/interface/component/component:syn-switch.md CHANGED Viewed

@@ -7,7 +7,8 @@ Switches allow the user to toggle an option on or off.
 ## Documentation
 - [Component Documentation](https://synergy-design-system.github.io/?path=/docs/components-syn-switch--docs)
-- [Figma Design](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=41310-259132)
+- [Figma Examples](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=41310-259132)
+- [Figma Component](https://www.figma.com/design/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?node-id=2190-4038)
 ## Class Information
@@ -17,7 +18,7 @@ Switches allow the user to toggle an option on or off.
 ## Usage Information
 - **Status:** stable
-- **Since:** 2.0
+- **Since:** 1.0.0
 ## Available Slots

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

@@ -103,7 +103,8 @@
       "type": "SynTabShowEvent"
     }
   ],
-  "figmaComponentId": "42207-338578",
+  "figmaComponentId": "20730-44793",
+  "figmaDocsId": "42207-338578",
   "methods": [
     {
       "description": "",
@@ -216,7 +217,7 @@
       "type": "SynTab[]"
     }
   ],
-  "since": "2.0",
+  "since": "2.1.0",
   "slots": [
     {
       "description": "Used for grouping tab panels in the tab group. Must be `<syn-tab-panel>` elements.",

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

@@ -7,7 +7,8 @@ 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)
+- [Figma Examples](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=42207-338578)
+- [Figma Component](https://www.figma.com/design/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?node-id=20730-44793)
 ## Class Information
@@ -17,7 +18,7 @@ Tab groups organize content into a container that shows one section at a time.
 ## Usage Information
 - **Status:** stable
-- **Since:** 2.0
+- **Since:** 2.1.0
 ## Available Slots

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

@@ -26,7 +26,8 @@
   "dependencies": [],
   "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-tab-panel--docs",
   "events": [],
-  "figmaComponentId": "42207-340626",
+  "figmaComponentId": "20730-44681",
+  "figmaDocsId": "42207-340626",
   "methods": [
     {
       "description": "",
@@ -50,7 +51,7 @@
       "type": "string"
     }
   ],
-  "since": "2.0",
+  "since": "2.1.0",
   "slots": [
     {
       "description": "The tab panel's content.",

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

@@ -7,7 +7,8 @@ Tab panels are used inside [tab groups](/components/tab-group) to display tabbed
 ## 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)
+- [Figma Examples](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=42207-340626)
+- [Figma Component](https://www.figma.com/design/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?node-id=20730-44681)
 ## Class Information
@@ -17,7 +18,7 @@ Tab panels are used inside [tab groups](/components/tab-group) to display tabbed
 ## Usage Information
 - **Status:** stable
-- **Since:** 2.0
+- **Since:** 2.1.0
 ## Available Slots

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

@@ -58,7 +58,8 @@
       "type": "SynCloseEvent"
     }
   ],
-  "figmaComponentId": "42207-338162",
+  "figmaComponentId": "20730-47184",
+  "figmaDocsId": "42207-338162",
   "methods": [
     {
       "description": "",
@@ -107,7 +108,7 @@
       "type": "HTMLElement"
     }
   ],
-  "since": "2.0",
+  "since": "2.1.0",
   "slots": [
     {
       "description": "The tab's label.",

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

@@ -7,7 +7,8 @@ Tabs are used inside [tab groups](/components/tab-group) to represent and activa
 ## 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)
+- [Figma Examples](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=42207-338162)
+- [Figma Component](https://www.figma.com/design/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?node-id=20730-47184)
 ## Class Information
@@ -17,7 +18,7 @@ Tabs are used inside [tab groups](/components/tab-group) to represent and activa
 ## Usage Information
 - **Status:** stable
-- **Since:** 2.0
+- **Since:** 2.1.0
 ## Available Slots

package/data/layers/interface/component/component:syn-tag-group.json CHANGED Viewed

@@ -38,7 +38,7 @@
   "dependencies": [],
   "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-tag-group--docs",
   "events": [],
-  "figmaComponentId": "45275-186668",
+  "figmaDocsId": "45275-186668",
   "methods": [
     {
       "description": "",
@@ -80,7 +80,7 @@
       "type": "SynTag[]"
     }
   ],
-  "since": "unknown",
+  "since": "3.7.0",
   "slots": [
     {
       "description": "The tag group's main content. Must be `<syn-tag />` elements.",

package/data/layers/interface/component/component:syn-tag-group.md CHANGED Viewed

@@ -9,7 +9,7 @@ Tags can be removable, icon‑based, or purely textual.
 ## Documentation
 - [Component Documentation](https://synergy-design-system.github.io/?path=/docs/components-syn-tag-group--docs)
-- [Figma Design](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=45275-186668)
+- [Figma Examples](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=45275-186668)
 ## Class Information
@@ -19,7 +19,7 @@ Tags can be removable, icon‑based, or purely textual.
 ## Usage Information
 - **Status:** stable
-- **Since:** unknown
+- **Since:** 3.7.0
 ## Available Slots

package/data/layers/interface/component/component:syn-tag.json CHANGED Viewed

@@ -46,7 +46,8 @@
       "type": "SynRemoveEvent"
     }
   ],
-  "figmaComponentId": "41163-156701",
+  "figmaComponentId": "2842-16750",
+  "figmaDocsId": "41163-156701",
   "methods": [],
   "properties": [
     {
@@ -64,7 +65,7 @@
       "type": "'small' | 'medium' | 'large'"
     }
   ],
-  "since": "2.0",
+  "since": "1.2.0",
   "slots": [
     {
       "description": "The tag's content.",

package/data/layers/interface/component/component:syn-tag.md CHANGED Viewed

@@ -7,7 +7,8 @@ Tags are used as labels to organize things or to indicate a selection.
 ## Documentation
 - [Component Documentation](https://synergy-design-system.github.io/?path=/docs/components-syn-tag--docs)
-- [Figma Design](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=41163-156701)
+- [Figma Examples](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=41163-156701)
+- [Figma Component](https://www.figma.com/design/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?node-id=2842-16750)
 ## Class Information
@@ -17,7 +18,7 @@ Tags are used as labels to organize things or to indicate a selection.
 ## Usage Information
 - **Status:** stable
-- **Since:** 2.0
+- **Since:** 1.2.0
 ## Available Slots

package/data/layers/interface/component/component:syn-textarea.json CHANGED Viewed

@@ -224,7 +224,8 @@
       "type": "SynInvalidEvent"
     }
   ],
-  "figmaComponentId": "41337-204379",
+  "figmaComponentId": "1101-1482",
+  "figmaDocsId": "41337-204379",
   "methods": [
     {
       "description": "Removes focus from the textarea.",
@@ -514,7 +515,7 @@
       "type": "string"
     }
   ],
-  "since": "2.0",
+  "since": "1.0.0",
   "slots": [
     {
       "description": "The textarea's label. Alternatively, you can use the `label` attribute.",

package/data/layers/interface/component/component:syn-textarea.md CHANGED Viewed

@@ -7,7 +7,8 @@ Textareas collect data from the user and allow multiple lines of text.
 ## Documentation
 - [Component Documentation](https://synergy-design-system.github.io/?path=/docs/components-syn-textarea--docs)
-- [Figma Design](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=41337-204379)
+- [Figma Examples](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=41337-204379)
+- [Figma Component](https://www.figma.com/design/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?node-id=1101-1482)
 ## Class Information
@@ -17,7 +18,7 @@ Textareas collect data from the user and allow multiple lines of text.
 ## Usage Information
 - **Status:** stable
-- **Since:** 2.0
+- **Since:** 1.0.0
 ## Available Slots

package/data/layers/interface/component/component:syn-tooltip.json CHANGED Viewed

@@ -101,7 +101,8 @@
       "type": "SynShowEvent"
     }
   ],
-  "figmaComponentId": "41337-203414",
+  "figmaComponentId": "16910-25970",
+  "figmaDocsId": "41337-203414",
   "methods": [
     {
       "description": "",
@@ -198,7 +199,7 @@
       "type": "string"
     }
   ],
-  "since": "2.0",
+  "since": "1.21.0",
   "slots": [
     {
       "description": "The tooltip's target element. Avoid slotting in more than one element, as subsequent ones will be ignored.",

package/data/layers/interface/component/component:syn-tooltip.md CHANGED Viewed

@@ -7,7 +7,8 @@ Tooltips display additional information based on a specific action.
 ## Documentation
 - [Component Documentation](https://synergy-design-system.github.io/?path=/docs/components-syn-tooltip--docs)
-- [Figma Design](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=41337-203414)
+- [Figma Examples](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=41337-203414)
+- [Figma Component](https://www.figma.com/design/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?node-id=16910-25970)
 ## Class Information
@@ -17,7 +18,7 @@ Tooltips display additional information based on a specific action.
 ## Usage Information
 - **Status:** stable
-- **Since:** 2.0
+- **Since:** 1.21.0
 ## Available Slots

package/data/layers/interface/component/component:syn-validate.json CHANGED Viewed

@@ -93,7 +93,8 @@
   ],
   "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-validate--docs",
   "events": [],
-  "figmaComponentId": "41310-284767",
+  "figmaComponentId": "25638-40480",
+  "figmaDocsId": "41310-284767",
   "methods": [
     {
       "description": "Returns the validity state of the input component.\n`true` for valid and `false` for invalid.",
@@ -212,7 +213,7 @@
       "type": "'native' | 'tooltip' | 'inline'"
     }
   ],
-  "since": "unknown",
+  "since": "2.12.0",
   "slots": [
     {
       "description": "The form field that should be validated. Avoid slotting in more than one element, as subsequent ones will be ignored.",

package/data/layers/interface/component/component:syn-validate.md CHANGED Viewed

@@ -9,7 +9,8 @@ and showing the validation message in a consistent, user defined way.
 ## Documentation
 - [Component Documentation](https://synergy-design-system.github.io/?path=/docs/components-syn-validate--docs)
-- [Figma Design](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=41310-284767)
+- [Figma Examples](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=41310-284767)
+- [Figma Component](https://www.figma.com/design/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?node-id=25638-40480)
 ## Class Information
@@ -19,7 +20,7 @@ and showing the validation message in a consistent, user defined way.
 ## Usage Information
 - **Status:** stable
-- **Since:** unknown
+- **Since:** 2.12.0
 ## Available Slots

package/data/layers/rules/component/component:syn-accordion.md ADDED Viewed

@@ -0,0 +1,33 @@
+# syn-accordion
+## Summary
+Accordions provide the ability to group a list of `<syn-details>`.
+## Common Use Cases
+- Organise content into collapsible sections to save space.
+- Display FAQs where each question can be expanded to reveal its answer.
+- Structure lengthy content into manageable expandable sections.
+- Create navigational menus where each section can be expanded to show sub-items, mainly for small viewports.
+## Usage Guidelines
+### Behavior
+- Keep only one section open at a time to prevent information overload, unless multiple open sections are necessary.
+- Avoid nesting collapsible sections within each other to prevent a confusing user experience.
+### Content
+- Ensure the content is relevant and necessary; avoid including unrelated information.
+- Avoid using collapsible sections for content that needs to be always visible or is critical for immediate user attention.
+## Accessibility
+- Use only for non-critical information. Hiding content can become a potential barrier, making content more challenging to discover.
+- Use “close-others” attribute to keep only one item from the group open at a time, reducing the amount of information displayed at once and therefore reducing the cognitive load on the user.
+## Related Components
+- syn-details