@synergy-design-system/components 3.15.0 → 3.15.1

package/dist/vscode.html-custom-data.json

@@ -34,34 +34,49 @@
       ]
     },
     {
-      "name": "syn-breadcrumb-item",
-      "description": "Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.\n---\n\n\n### **Slots:**\n - _default_ - The breadcrumb item's label.\n- **prefix** - An optional prefix, usually an icon or icon button.\n- **suffix** - An optional suffix, usually an icon or icon button.\n- **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.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The breadcrumb item's label.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.\n- **separator** - The container that wraps the separator.",
+      "name": "syn-alert",
+      "description": "Alerts are used to display important messages inline or as toast notifications.\n---\n\n\n### **Events:**\n - **syn-show** - Emitted when the alert opens.\n- **syn-after-show** - Emitted after the alert opens and all animations are complete.\n- **syn-hide** - Emitted when the alert closes.\n- **syn-after-hide** - Emitted after the alert closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the alert.\n- **hide()** - Hides the alert\n- **toast()** - 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.\n\n### **Slots:**\n - _default_ - The alert's main content.\n- **icon** - An icon to show in the alert. Works best with `<syn-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon** - The container that wraps the optional icon.\n- **message** - The container that wraps the alert's main content.\n- **close-button** - The close button, an `<syn-icon-button>`.\n- **close-button__base** - The close button's exported `base` part.",
       "attributes": [
         {
-          "name": "href",
-          "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": "open",
+          "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.",
           "values": []
         },
         {
-          "name": "target",
-          "description": "Tells the browser where to open the link. Only used when `href` is set.",
+          "name": "closable",
+          "description": "Enables a close button that allows the user to dismiss the alert.",
+          "values": []
+        },
+        {
+          "name": "variant",
+          "description": "The alert's theme variant.",
           "values": [
-            { "name": "_blank" },
-            { "name": "_parent" },
-            { "name": "_self" },
-            { "name": "_top" }
+            { "name": "primary" },
+            { "name": "success" },
+            { "name": "neutral" },
+            { "name": "warning" },
+            { "name": "danger" }
           ]
         },
         {
-          "name": "rel",
-          "description": "The `rel` attribute to use on the link. Only used when `href` is set.",
+          "name": "duration",
+          "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.",
           "values": []
+        },
+        {
+          "name": "size",
+          "description": "The alert's size.",
+          "values": [
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" }
+          ]
         }
       ],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb-item--docs"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-alert--docs"
         }
       ]
     },
@@ -89,66 +104,51 @@
       ]
     },
     {
-      "name": "syn-alert",
-      "description": "Alerts are used to display important messages inline or as toast notifications.\n---\n\n\n### **Events:**\n - **syn-show** - Emitted when the alert opens.\n- **syn-after-show** - Emitted after the alert opens and all animations are complete.\n- **syn-hide** - Emitted when the alert closes.\n- **syn-after-hide** - Emitted after the alert closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the alert.\n- **hide()** - Hides the alert\n- **toast()** - 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.\n\n### **Slots:**\n - _default_ - The alert's main content.\n- **icon** - An icon to show in the alert. Works best with `<syn-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon** - The container that wraps the optional icon.\n- **message** - The container that wraps the alert's main content.\n- **close-button** - The close button, an `<syn-icon-button>`.\n- **close-button__base** - The close button's exported `base` part.",
+      "name": "syn-breadcrumb",
+      "description": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.\n---\n\n\n### **Slots:**\n - _default_ - One or more breadcrumb items to display.\n- **separator** - The separator to use between breadcrumb items. Works best with `<syn-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
       "attributes": [
         {
-          "name": "open",
-          "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.",
-          "values": []
-        },
-        {
-          "name": "closable",
-          "description": "Enables a close button that allows the user to dismiss the alert.",
-          "values": []
-        },
-        {
-          "name": "variant",
-          "description": "The alert's theme variant.",
-          "values": [
-            { "name": "primary" },
-            { "name": "success" },
-            { "name": "neutral" },
-            { "name": "warning" },
-            { "name": "danger" }
-          ]
-        },
-        {
-          "name": "duration",
-          "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": "label",
+          "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.",
           "values": []
-        },
-        {
-          "name": "size",
-          "description": "The alert's size.",
-          "values": [
-            { "name": "small" },
-            { "name": "medium" },
-            { "name": "large" }
-          ]
         }
       ],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-alert--docs"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb--docs"
         }
       ]
     },
     {
-      "name": "syn-breadcrumb",
-      "description": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.\n---\n\n\n### **Slots:**\n - _default_ - One or more breadcrumb items to display.\n- **separator** - The separator to use between breadcrumb items. Works best with `<syn-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "name": "syn-breadcrumb-item",
+      "description": "Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.\n---\n\n\n### **Slots:**\n - _default_ - The breadcrumb item's label.\n- **prefix** - An optional prefix, usually an icon or icon button.\n- **suffix** - An optional suffix, usually an icon or icon button.\n- **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.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The breadcrumb item's label.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.\n- **separator** - The container that wraps the separator.",
       "attributes": [
         {
-          "name": "label",
-          "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": "href",
+          "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.",
+          "values": []
+        },
+        {
+          "name": "target",
+          "description": "Tells the browser where to open the link. Only used when `href` is set.",
+          "values": [
+            { "name": "_blank" },
+            { "name": "_parent" },
+            { "name": "_self" },
+            { "name": "_top" }
+          ]
+        },
+        {
+          "name": "rel",
+          "description": "The `rel` attribute to use on the link. Only used when `href` is set.",
           "values": []
         }
       ],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb--docs"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb-item--docs"
         }
       ]
     },
@@ -281,6 +281,37 @@
         }
       ]
     },
+    {
+      "name": "syn-button-group",
+      "description": "Button groups can be used to group related buttons into sections.\n---\n\n\n### **Slots:**\n - _default_ - One or more `<syn-button>` elements to display in the button group.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "attributes": [
+        {
+          "name": "label",
+          "description": "A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive\ndevices when interacting with the control and is strongly recommended.",
+          "values": []
+        },
+        {
+          "name": "size",
+          "description": "The button-groups size. This affects all buttons within the group.",
+          "values": [
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" }
+          ]
+        },
+        {
+          "name": "variant",
+          "description": "The button-group's theme variant. This affects all buttons within the group.",
+          "values": [{ "name": "filled" }, { "name": "outline" }]
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-button-group--docs"
+        }
+      ]
+    },
     {
       "name": "syn-card",
       "description": "Cards can be used to group related subjects in a container.\n---\n\n\n### **Slots:**\n - _default_ - The card's main content.\n- **header** - An optional header for the card.\n- **footer** - An optional footer for the card.\n- **image** - An optional image to render at the start of the card.\n\n### **CSS Properties:**\n - **--border-color** - The card's border color, including borders that occur inside the card. _(default: undefined)_\n- **--border-radius** - The border radius for the card's edges. _(default: undefined)_\n- **--border-width** - The width of the card's borders. _(default: undefined)_\n- **--padding** - The padding to use for the card's sections. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **image** - The container that wraps the card's image.\n- **header** - The container that wraps the card's header.\n- **body** - The container that wraps the card's main content.\n- **footer** - The container that wraps the card's footer.",
@@ -303,6 +334,23 @@
         }
       ]
     },
+    {
+      "name": "syn-chart",
+      "description": "The `<syn-chart>` component is a container for displaying charts. It provides a structured layout and styling for chart elements, allowing for consistent presentation across different types of charts. The chart component is based on [Apache ECharts](https://echarts.apache.org)\n---\n\n\n### **Methods:**\n - **getInstance(): _EChartsType | undefined_** - Returns the underlying ECharts instance, giving direct access to the full\n[ECharts API](https://echarts.apache.org/en/api.html#echartsInstance).\n\nUse this when the `config` property alone is not sufficient — for example to\nimperatively call `setOption()` with custom merge flags, listen to ECharts events,\ntrigger actions, or retrieve chart data.\n\nReturns `undefined` if called before the component has been connected to the DOM\n(i.e. before `firstUpdated` has run).\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "attributes": [
+        {
+          "name": "palette",
+          "description": "The color palette to apply to chart series.\n\n- `categorical` (default) — 12 distinct colors for comparing unrelated data series\n- `sequential-01` … `sequential-07` — 10-step single-hue ramps:\n  `01`=primary, `02`=accent, `03`=muted, `04`=purple, `05`=teal, `06`=magenta, `07`=neutral\n- `sequential-status-critical`, `sequential-status-error`, `sequential-status-info`,\n  `sequential-status-success`, `sequential-status-warning` — 10-step status ramps\n\nThe palette sets the ECharts `color` array. If `config.color` is explicitly provided,\nit takes precedence over the palette.",
+          "values": [{ "name": "SynChartPalette" }]
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-chart--docs"
+        }
+      ]
+    },
     {
       "name": "syn-checkbox",
       "description": "Checkboxes allow the user to toggle an option on or off.\n---\n\n\n### **Events:**\n - **syn-blur** - Emitted when the checkbox loses focus.\n- **syn-change** - Emitted when the checked state changes.\n- **syn-focus** - Emitted when the checkbox gains focus.\n- **syn-input** - Emitted when the checkbox receives input.\n- **syn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the checkbox.\n- **focus(options: _FocusOptions_)** - Sets focus on the checkbox.\n- **blur()** - Removes focus from the checkbox.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\nthe custom validation message, call this method with an empty string.\n\n### **Slots:**\n - _default_ - The checkbox's label.\n- **help-text** - Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The square container that wraps the checkbox's checked state.\n- **control--checked** - Matches the control part when the checkbox is checked.\n- **control--indeterminate** - Matches the control part when the checkbox is indeterminate.\n- **checked-icon** - The checked icon, an `<syn-icon>` element.\n- **indeterminate-icon** - The indeterminate icon, an `<syn-icon>` element.\n- **label** - The container that wraps the checkbox's label.\n- **form-control-help-text** - The help text's wrapper.",
@@ -370,95 +418,6 @@
         }
       ]
     },
-    {
-      "name": "syn-chart",
-      "description": "The `<syn-chart>` component is a container for displaying charts. It provides a structured layout and styling for chart elements, allowing for consistent presentation across different types of charts. The chart component is based on [Apache ECharts](https://echarts.apache.org)\n---\n\n\n### **Methods:**\n - **getInstance(): _EChartsType | undefined_** - Returns the underlying ECharts instance, giving direct access to the full\n[ECharts API](https://echarts.apache.org/en/api.html#echartsInstance).\n\nUse this when the `config` property alone is not sufficient — for example to\nimperatively call `setOption()` with custom merge flags, listen to ECharts events,\ntrigger actions, or retrieve chart data.\n\nReturns `undefined` if called before the component has been connected to the DOM\n(i.e. before `firstUpdated` has run).\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-      "attributes": [
-        {
-          "name": "palette",
-          "description": "The color palette to apply to chart series.\n\n- `categorical` (default) — 12 distinct colors for comparing unrelated data series\n- `sequential-01` … `sequential-07` — 10-step single-hue ramps:\n  `01`=primary, `02`=accent, `03`=muted, `04`=purple, `05`=teal, `06`=magenta, `07`=neutral\n- `sequential-status-critical`, `sequential-status-error`, `sequential-status-info`,\n  `sequential-status-success`, `sequential-status-warning` — 10-step status ramps\n\nThe palette sets the ECharts `color` array. If `config.color` is explicitly provided,\nit takes precedence over the palette.",
-          "values": [{ "name": "SynChartPalette" }]
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-chart--docs"
-        }
-      ]
-    },
-    {
-      "name": "syn-button-group",
-      "description": "Button groups can be used to group related buttons into sections.\n---\n\n\n### **Slots:**\n - _default_ - One or more `<syn-button>` elements to display in the button group.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-      "attributes": [
-        {
-          "name": "label",
-          "description": "A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive\ndevices when interacting with the control and is strongly recommended.",
-          "values": []
-        },
-        {
-          "name": "size",
-          "description": "The button-groups size. This affects all buttons within the group.",
-          "values": [
-            { "name": "small" },
-            { "name": "medium" },
-            { "name": "large" }
-          ]
-        },
-        {
-          "name": "variant",
-          "description": "The button-group's theme variant. This affects all buttons within the group.",
-          "values": [{ "name": "filled" }, { "name": "outline" }]
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-button-group--docs"
-        }
-      ]
-    },
-    {
-      "name": "syn-details",
-      "description": "Details show a brief summary and expand to show additional content.\n---\n\n\n### **Events:**\n - **syn-show** - Emitted when the details opens.\n- **syn-after-show** - Emitted after the details opens and all animations are complete.\n- **syn-hide** - Emitted when the details closes.\n- **syn-after-hide** - Emitted after the details closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the details.\n- **hide()** - Hides the details\n\n### **Slots:**\n - _default_ - The details' main content.\n- **summary** - The details' summary. Alternatively, you can use the `summary` attribute.\n- **expand-icon** - Optional expand icon to use instead of the default. Works best with `<syn-icon>`.\n- **collapse-icon** - Optional collapse icon to use instead of the default. Works best with `<syn-icon>`.\n\n### **CSS Properties:**\n - **--syn-details-open-rotation** - The rotation angle of the summary icon when the details is open. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **header** - The header that wraps both the summary and the expand/collapse icon.\n- **summary** - The container that wraps the summary.\n- **summary-icon** - The container that wraps the expand/collapse icons.\n- **content** - The details content.\n- **body** - The container that wraps the details content.",
-      "attributes": [
-        {
-          "name": "open",
-          "description": "Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the details' open state.",
-          "values": []
-        },
-        {
-          "name": "summary",
-          "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
-          "values": []
-        },
-        {
-          "name": "disabled",
-          "description": "Disables the details so it can't be toggled.",
-          "values": []
-        },
-        {
-          "name": "contained",
-          "description": "Draws the details as contained element.",
-          "values": []
-        },
-        {
-          "name": "size",
-          "description": "The details's size.",
-          "values": [
-            { "name": "small" },
-            { "name": "medium" },
-            { "name": "large" }
-          ]
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-details--docs"
-        }
-      ]
-    },
     {
       "name": "syn-combobox",
       "description": "A combobox component that combines the functionality of a text input with a dropdown listbox,\nallowing users to either select from predefined options or enter custom values (when not restricted).\n---\n\n\n### **Events:**\n - **syn-change** - Emitted when the control's value changes.\n- **syn-clear** - Emitted when the control's value is cleared.\n- **syn-input** - Emitted when the control receives input.\n- **syn-focus** - Emitted when the control gains focus.\n- **syn-blur** - Emitted when the control loses focus.\n- **syn-show** - Emitted when the combobox's menu opens.\n- **syn-after-show** - Emitted after the combobox's menu opens and all animations are complete.\n- **syn-hide** - Emitted when the combobox's menu closes.\n- **syn-after-hide** - Emitted after the combobox's menu closes and all animations are complete.\n- **syn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n- **syn-error** - Emitted when the combobox menu fails to open.\n\n### **Methods:**\n - **show()** - Shows the listbox. If it is not possible to open the listbox, because there are no\nappropriate filtered options, a syn-error is emitted and the listbox stays closed.\n- **hide()** - Hides the listbox.\n- **checkValidity()** - Checks for validity but does not show a validation message.\nReturns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n\n### **Slots:**\n - _default_ - The listbox options. Must be `<syn-option>` elements. You can use `<syn-optgroup>`'s to group items visually.\n- **label** - The combobox's label. Alternatively, you can use the `label` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the combobox.\n- **suffix** - Used to append a presentational icon or similar element to the combobox.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n- **help-text** - Text that describes how to use the combobox. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, combobox, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The combobox's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container that wraps the prefix, combobox, clear icon, and expand button.\n- **prefix** - The container that wraps the prefix slot.\n- **suffix** - The container that wraps the suffix slot.\n- **display-input** - The element that displays the selected option's label, an `<input>` element.\n- **listbox** - The listbox container where the options are slotted and the filtered options list exists.\n- **filtered-listbox** - The container that wraps the filtered options.\n- **clear-button** - The clear button.\n- **expand-icon** - The container that wraps the expand icon.\n- **popup** - The popup's exported `popup` part. Use this to target the tooltip's popup container.\n- **no-results** - The container that wraps the \"no results\" message.\n- **tags** - The container that houses option tags when `multiple` is used.\n- **tag** - The individual tags that represent each selected option in `multiple`.\n- **tag__base** - The tag's base part.\n- **tag__content** - The tag's content part.\n- **tag__remove-button** - The tag's remove button.\n- **tag__remove-button__base** - The tag's remove button base part.",
@@ -587,23 +546,64 @@
       ]
     },
     {
-      "name": "syn-dialog",
-      "description": "Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.\n---\n\n\n### **Events:**\n - **syn-show** - Emitted when the dialog opens.\n- **syn-after-show** - Emitted after the dialog opens and all animations are complete.\n- **syn-hide** - Emitted when the dialog closes.\n- **syn-after-hide** - Emitted after the dialog closes and all animations are complete.\n- **syn-initial-focus** - Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n- **syn-request-close** - Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss.\n\n### **Methods:**\n - **show()** - Shows the dialog.\n- **hide()** - Hides the dialog\n\n### **Slots:**\n - _default_ - The dialog's main content.\n- **label** - The dialog's label. Alternatively, you can use the `label` attribute.\n- **header-actions** - Optional actions to add to the header. Works best with `<syn-icon-button>`.\n- **footer** - The dialog's footer, usually one or more buttons representing various options.\n\n### **CSS Properties:**\n - **--width** - The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens. _(default: undefined)_\n- **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_\n- **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_\n- **--footer-spacing** - The amount of padding to use for the footer. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **overlay** - The overlay that covers the screen behind the dialog.\n- **panel** - The dialog's panel (where the dialog and its content are rendered).\n- **header** - The dialog's header. This element wraps the title and header actions.\n- **header-actions** - Optional actions to add to the header. Works best with `<syn-icon-button>`.\n- **title** - The dialog's title.\n- **close-button** - The close button, an `<syn-icon-button>`.\n- **close-button__base** - The close button's exported `base` part.\n- **body** - The dialog's body.\n- **footer** - The dialog's footer.",
+      "name": "syn-details",
+      "description": "Details show a brief summary and expand to show additional content.\n---\n\n\n### **Events:**\n - **syn-show** - Emitted when the details opens.\n- **syn-after-show** - Emitted after the details opens and all animations are complete.\n- **syn-hide** - Emitted when the details closes.\n- **syn-after-hide** - Emitted after the details closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the details.\n- **hide()** - Hides the details\n\n### **Slots:**\n - _default_ - The details' main content.\n- **summary** - The details' summary. Alternatively, you can use the `summary` attribute.\n- **expand-icon** - Optional expand icon to use instead of the default. Works best with `<syn-icon>`.\n- **collapse-icon** - Optional collapse icon to use instead of the default. Works best with `<syn-icon>`.\n\n### **CSS Properties:**\n - **--syn-details-open-rotation** - The rotation angle of the summary icon when the details is open. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **header** - The header that wraps both the summary and the expand/collapse icon.\n- **summary** - The container that wraps the summary.\n- **summary-icon** - The container that wraps the expand/collapse icons.\n- **content** - The details content.\n- **body** - The container that wraps the details content.",
       "attributes": [
         {
           "name": "open",
-          "description": "Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.",
+          "description": "Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the details' open state.",
           "values": []
         },
         {
-          "name": "label",
-          "description": "The dialog's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
+          "name": "summary",
+          "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
           "values": []
         },
         {
-          "name": "no-header",
-          "description": "Disables the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the dialog.",
-          "values": []
+          "name": "disabled",
+          "description": "Disables the details so it can't be toggled.",
+          "values": []
+        },
+        {
+          "name": "contained",
+          "description": "Draws the details as contained element.",
+          "values": []
+        },
+        {
+          "name": "size",
+          "description": "The details's size.",
+          "values": [
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-details--docs"
+        }
+      ]
+    },
+    {
+      "name": "syn-dialog",
+      "description": "Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.\n---\n\n\n### **Events:**\n - **syn-show** - Emitted when the dialog opens.\n- **syn-after-show** - Emitted after the dialog opens and all animations are complete.\n- **syn-hide** - Emitted when the dialog closes.\n- **syn-after-hide** - Emitted after the dialog closes and all animations are complete.\n- **syn-initial-focus** - Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n- **syn-request-close** - Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss.\n\n### **Methods:**\n - **show()** - Shows the dialog.\n- **hide()** - Hides the dialog\n\n### **Slots:**\n - _default_ - The dialog's main content.\n- **label** - The dialog's label. Alternatively, you can use the `label` attribute.\n- **header-actions** - Optional actions to add to the header. Works best with `<syn-icon-button>`.\n- **footer** - The dialog's footer, usually one or more buttons representing various options.\n\n### **CSS Properties:**\n - **--width** - The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens. _(default: undefined)_\n- **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_\n- **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_\n- **--footer-spacing** - The amount of padding to use for the footer. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **overlay** - The overlay that covers the screen behind the dialog.\n- **panel** - The dialog's panel (where the dialog and its content are rendered).\n- **header** - The dialog's header. This element wraps the title and header actions.\n- **header-actions** - Optional actions to add to the header. Works best with `<syn-icon-button>`.\n- **title** - The dialog's title.\n- **close-button** - The close button, an `<syn-icon-button>`.\n- **close-button__base** - The close button's exported `base` part.\n- **body** - The dialog's body.\n- **footer** - The dialog's footer.",
+      "attributes": [
+        {
+          "name": "open",
+          "description": "Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.",
+          "values": []
+        },
+        {
+          "name": "label",
+          "description": "The dialog's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
+          "values": []
+        },
+        {
+          "name": "no-header",
+          "description": "Disables the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the dialog.",
+          "values": []
         }
       ],
       "references": [
@@ -896,6 +896,82 @@
         }
       ]
     },
+    {
+      "name": "syn-icon-button",
+      "description": "Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.\n---\n\n\n### **Events:**\n - **syn-blur** - Emitted when the icon button loses focus.\n- **syn-focus** - Emitted when the icon button gains focus.\n\n### **Methods:**\n - **click()** - Simulates a click on the icon button.\n- **focus(options: _FocusOptions_)** - Sets focus on the icon button.\n- **blur()** - Removes focus from the icon button.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "attributes": [
+        {
+          "name": "name",
+          "description": "The name of the icon to draw. Available names depend on the icon library being used.",
+          "values": []
+        },
+        {
+          "name": "library",
+          "description": "The name of a registered custom icon library.",
+          "values": []
+        },
+        {
+          "name": "src",
+          "description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks.",
+          "values": []
+        },
+        {
+          "name": "href",
+          "description": "When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.",
+          "values": []
+        },
+        {
+          "name": "target",
+          "description": "Tells the browser where to open the link. Only used when `href` is set.",
+          "values": [
+            { "name": "_blank" },
+            { "name": "_parent" },
+            { "name": "_self" },
+            { "name": "_top" }
+          ]
+        },
+        {
+          "name": "download",
+          "description": "Tells the browser to download the linked file as this filename. Only used when `href` is set.",
+          "values": []
+        },
+        {
+          "name": "label",
+          "description": "A description that gets read by assistive devices. For optimal accessibility, you should always include a label\nthat describes what the icon button does.",
+          "values": []
+        },
+        {
+          "name": "size",
+          "description": "The icon button's size.",
+          "values": [
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" },
+            { "name": "inherit" }
+          ]
+        },
+        {
+          "name": "color",
+          "description": "The color of the icon button.\nThe default \"currentColor\" makes it possible to easily style the icon button from outside without any CSS variables.",
+          "values": [
+            { "name": "currentColor" },
+            { "name": "primary" },
+            { "name": "neutral" }
+          ]
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the button.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-icon-button--docs"
+        }
+      ]
+    },
     {
       "name": "syn-input",
       "description": "Inputs collect data from the user.\n---\n\n\n### **Events:**\n - **syn-blur** - Emitted when the control loses focus.\n- **syn-change** - Emitted when an alteration to the control's value is committed by the user.\n- **syn-clear** - Emitted when the clear button is activated.\n- **syn-focus** - Emitted when the control gains focus.\n- **syn-input** - Emitted when the control receives input.\n- **syn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n- **syn-clamp** - Emitted if the numeric strategy allows autoClamp and the value is clamped to the min or max attribute.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the input.\n- **blur()** - Removes focus from the input.\n- **select()** - Selects all the text in the input.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\n- **showPicker()** - Displays the browser picker for an input element (only works if the browser supports it for the input type).\n- **stepUp()** - Increments the value of a numeric input type by the value of the step attribute.\n- **stepDown()** - Decrements the value of a numeric input type by the value of the step attribute.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the input.\n- **suffix** - Used to append a presentational icon or similar element to the input.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **show-password-icon** - An icon to use in lieu of the default show password icon.\n- **hide-password-icon** - An icon to use in lieu of the default hide password icon.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n- **increment-number-stepper** - An icon to use in lieu of the default increment number stepper icon.\n- **decrement-number-stepper** - An icon to use in lieu of the default decrement number stepper icon.\n\n### **CSS Properties:**\n - **--syn-input-autofill-shadow** - The shadow to apply when the input is autofilled. _(default: undefined)_\n- **--syn-input-autofill-readonly-shadow** - The shadow to apply when the input is readonly and autofilled. _(default: undefined)_\n- **--syn-input-autofill-text-fill-color** - The text fill color to apply when the input is autofilled. _(default: undefined)_\n- **--syn-input-autofill-caret-color** - The caret color to apply when the input is autofilled. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **input** - The internal `<input>` control.\n- **prefix** - The container that wraps the prefix.\n- **clear-button** - The clear button.\n- **password-toggle-button** - The password toggle button.\n- **suffix** - The container that wraps the suffix.\n- **stepper** - The container that wraps the number stepper.\n- **decrement-number-stepper** - The decrement number stepper button.\n- **increment-number-stepper** - The increment number stepper button.\n- **divider** - The divider between the increment and decrement number stepper buttons.",
@@ -1108,6 +1184,17 @@
         }
       ]
     },
+    {
+      "name": "syn-menu",
+      "description": "Menus provide a list of options for the user to choose from.\n---\n\n\n### **Events:**\n - **syn-select** - Emitted when a menu item is selected.\n\n### **Slots:**\n - _default_ - The menu's content, including menu items, menu labels, and dividers.",
+      "attributes": [],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-menu--docs"
+        }
+      ]
+    },
     {
       "name": "syn-menu-item",
       "description": "Menu items provide options for the user to pick from in a menu.\n---\n\n\n### **Methods:**\n - **getTextLabel()** - Returns a text label based on the contents of the menu item's default slot.\n\n### **Slots:**\n - _default_ - The menu item's label.\n- **prefix** - Used to prepend an icon or similar element to the menu item.\n- **suffix** - Used to append an icon or similar element to the menu item.\n- **submenu** - Used to denote a nested menu.\n\n### **CSS Properties:**\n - **--submenu-offset** - The distance submenus shift to overlap the parent menu. _(default: -2px)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **checked-icon** - The checked icon, which is only visible when the menu item is checked.\n- **prefix** - The prefix container.\n- **label** - The menu item label.\n- **suffix** - The suffix container.\n- **spinner** - The spinner that shows when the menu item is in the loading state.\n- **spinner__base** - The spinner's base part.\n- **submenu-icon** - The submenu icon, visible only when the menu item has a submenu (not yet implemented).",
@@ -1145,82 +1232,6 @@
         }
       ]
     },
-    {
-      "name": "syn-icon-button",
-      "description": "Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.\n---\n\n\n### **Events:**\n - **syn-blur** - Emitted when the icon button loses focus.\n- **syn-focus** - Emitted when the icon button gains focus.\n\n### **Methods:**\n - **click()** - Simulates a click on the icon button.\n- **focus(options: _FocusOptions_)** - Sets focus on the icon button.\n- **blur()** - Removes focus from the icon button.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-      "attributes": [
-        {
-          "name": "name",
-          "description": "The name of the icon to draw. Available names depend on the icon library being used.",
-          "values": []
-        },
-        {
-          "name": "library",
-          "description": "The name of a registered custom icon library.",
-          "values": []
-        },
-        {
-          "name": "src",
-          "description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks.",
-          "values": []
-        },
-        {
-          "name": "href",
-          "description": "When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.",
-          "values": []
-        },
-        {
-          "name": "target",
-          "description": "Tells the browser where to open the link. Only used when `href` is set.",
-          "values": [
-            { "name": "_blank" },
-            { "name": "_parent" },
-            { "name": "_self" },
-            { "name": "_top" }
-          ]
-        },
-        {
-          "name": "download",
-          "description": "Tells the browser to download the linked file as this filename. Only used when `href` is set.",
-          "values": []
-        },
-        {
-          "name": "label",
-          "description": "A description that gets read by assistive devices. For optimal accessibility, you should always include a label\nthat describes what the icon button does.",
-          "values": []
-        },
-        {
-          "name": "size",
-          "description": "The icon button's size.",
-          "values": [
-            { "name": "small" },
-            { "name": "medium" },
-            { "name": "large" },
-            { "name": "inherit" }
-          ]
-        },
-        {
-          "name": "color",
-          "description": "The color of the icon button.\nThe default \"currentColor\" makes it possible to easily style the icon button from outside without any CSS variables.",
-          "values": [
-            { "name": "currentColor" },
-            { "name": "primary" },
-            { "name": "neutral" }
-          ]
-        },
-        {
-          "name": "disabled",
-          "description": "Disables the button.",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-icon-button--docs"
-        }
-      ]
-    },
     {
       "name": "syn-menu-label",
       "description": "Menu labels are used to describe a group of menu items.\n---\n\n\n### **Slots:**\n - _default_ - The menu label's content.\n\n### **CSS Properties:**\n - **--display-divider** - Display property of the divider. Defaults to \"block\" _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **divider** - The divider that is displayed above the content\n- **label** - The label that is displayed below the divider",
@@ -1232,17 +1243,6 @@
         }
       ]
     },
-    {
-      "name": "syn-menu",
-      "description": "Menus provide a list of options for the user to choose from.\n---\n\n\n### **Events:**\n - **syn-select** - Emitted when a menu item is selected.\n\n### **Slots:**\n - _default_ - The menu's content, including menu items, menu labels, and dividers.",
-      "attributes": [],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-menu--docs"
-        }
-      ]
-    },
     {
       "name": "syn-nav-item",
       "description": "Flexible button / link component that can be used to quickly build navigations.\n---\n\n\n### **Events:**\n - **syn-show** - Emitted when the navigation item: - has children, - and is clicked while HTML details are hidden.\n- **syn-hide** - Emitted when the navigation item: - has children, - and is clicked while HTML details are shown.\n- **syn-blur** - Emitted when the button loses focus.\n- **syn-focus** - Emitted when the button gains focus.\n\n### **Methods:**\n - **blur()** - Removes focus from the button.\n- **click()** - Simulates a click on the nav-items button, link or summary.\n- **focus(options: _FocusOptions_)** - Sets focus on the nav-item\n\n### **Slots:**\n - _default_ - The navigation item's label.\n- **prefix** - A presentational prefix icon or similar element.\n- **suffix** - A presentational suffix icon or similar element.\n- **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.\n\n### **CSS Properties:**\n - **--indentation** - Numeric value, indicating the level the item is placed at. _(default: undefined)_\n- **--indentation-stepping** - The amount of pixels each level will indent. _(default: undefined)_\n- **--display-children** - Display property of the children. Defaults to \"contents\" _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper including children.\n- **children** - The wrapper that holds the children\n- **content-wrapper** - The component's content wrapper.\n- **content** - The component's content excluding children.\n- **current-indicator** - The indicator used when current is set to true\n- **chevron** - The container that wraps the chevron.\n- **details** - The details element rendered when there are children available\n- **divider** - The components optional top divider.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.",
@@ -1302,27 +1302,132 @@
       ]
     },
     {
-      "name": "syn-popup",
-      "description": "Popup is a utility that lets you declaratively anchor \"popup\" containers to another element.\n---\n\n\n### **Events:**\n - **syn-reposition** - Emitted when the popup is repositioned. This event can fire a lot, so avoid putting expensive operations in your listener or consider debouncing it.\n\n### **Methods:**\n - **reposition()** - Forces the popup to recalculate and reposition itself.\n\n### **Slots:**\n - _default_ - The popup's content.\n- **anchor** - The element the popup will be anchored to. If the anchor lives outside of the popup, you can use the `anchor` attribute or property instead.\n\n### **CSS Properties:**\n - **--arrow-size** - The size of the arrow. Note that an arrow won't be shown unless the `arrow` attribute is used. _(default: 6px)_\n- **--arrow-color** - The color of the arrow. _(default: var(--syn-color-neutral-0))_\n- **--auto-size-available-width** - A read-only custom property that determines the amount of width the popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only available when using `auto-size`. _(default: undefined)_\n- **--auto-size-available-height** - A read-only custom property that determines the amount of height the popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only available when using `auto-size`. _(default: undefined)_\n\n### **CSS Parts:**\n - **arrow** - The arrow's container. Avoid setting `top|bottom|left|right` properties, as these values are assigned dynamically as the popup moves. This is most useful for applying a background color to match the popup, and maybe a border or box shadow.\n- **popup** - The popup's container. Useful for setting a background color, box shadow, etc.\n- **hover-bridge** - The hover bridge element. Only available when the `hover-bridge` option is enabled.",
+      "name": "syn-optgroup",
+      "description": "The <syn-optgroup> element creates a grouping for <syn-option>s within a <syn-select>.\n---\n\n\n### **Slots:**\n - _default_ - The given options. Must be `<syn-option>` elements.\n- **prefix** - A presentational prefix icon or similar element.\n- **label** - The label for the optgroup\n- **suffix** - A presentational suffix icon or similar element.\n\n### **CSS Properties:**\n - **--display-divider** - Display property of the divider. Defaults to \"block\" _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label-container** - The container that wraps prefix, label and base\n- **divider** - The divider that is displayed above the content\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.\n- **options** - The container that wraps the <syn-option> elements.",
       "attributes": [
         {
-          "name": "anchor",
-          "description": "The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide the anchor\nelement `id`, a DOM element reference, or a `VirtualElement`. If the anchor lives inside the popup, use the\n`anchor` slot instead.",
-          "values": [{ "name": "Element" }, { "name": "VirtualElement" }]
+          "name": "disabled",
+          "description": "Disables all options in the optgroup.",
+          "values": []
         },
         {
-          "name": "active",
-          "description": "Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn\ndown and the popup will be hidden.",
+          "name": "label",
+          "description": "The optgroups label. If you need to display HTML, use the `label` slot instead.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-optgroup--docs"
+        }
+      ]
+    },
+    {
+      "name": "syn-option",
+      "description": "Options define the selectable items within various form controls such as [select](/components/select).\n---\n\n\n### **Methods:**\n - **sanitizeValueForDelimiter()** - Replaces any occurrences of the delimiter in the option's original value with underscores.\n- **getTextLabel()** - Returns a plain text label based on the option's content.\n\n### **Slots:**\n - _default_ - The option's label.\n- **prefix** - Used to prepend an icon or similar element to the menu item.\n- **suffix** - Used to append an icon or similar element to the menu item.\n\n### **CSS Parts:**\n - **checked-icon** - The checked icon, an `<syn-icon>` element.\n- **base** - The component's base wrapper.\n- **label** - The option's label.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.",
+      "attributes": [
+        {
+          "name": "value",
+          "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.",
           "values": []
         },
         {
-          "name": "placement",
-          "description": "The preferred placement of the popup. Note that the actual placement will vary as configured to keep the\npanel inside of the viewport.",
-          "values": [
-            { "name": "" },
-            { "name": "top" },
-            { "name": "top-start" },
-            { "name": "top-end" },
+          "name": "disabled",
+          "description": "Draws the option in a disabled state, preventing selection.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-option--docs"
+        }
+      ]
+    },
+    {
+      "name": "syn-pagination",
+      "description": "<syn-pagination /> provides page navigation, direct page input, and page-size selection for large data sets.\n---\n\n\n### **Events:**\n - **syn-pagination-page-changed** - Emitted when the current page changes\n- **syn-pagination-page-size-changed** - Emitted when the page size changes\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **divider** - The divider element displayed at the top of the pagination component.\n- **page-size-select-wrapper** - The wrapper element containing the page size select and page item summary.\n- **page-size-select** - The page size select element.\n- **page-item-summary** - The text element displaying the current page item range and total items.\n- **page-input-section** - The section containing the page number input and total pages display.\n- **page-input** - The page number input element.\n- **navigation** - The pagination navigation element.\n- **navigation-action** - The individual navigation action buttons (first, previous, next, last).",
+      "attributes": [
+        {
+          "name": "divider",
+          "description": "When true, a divider is displayed at the top of the pagination component.",
+          "values": []
+        },
+        {
+          "name": "disabled",
+          "description": "When true, the pagination controls are disabled and non-interactive.",
+          "values": []
+        },
+        {
+          "name": "size",
+          "description": "The size of the pagination controls.",
+          "values": [
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" }
+          ]
+        },
+        {
+          "name": "current-page",
+          "description": "The current page number. The default value is 1.\nThe component will emit a `syn-pagination-page-changed` event whenever the page changes, allowing you to respond to page changes in your application.",
+          "values": []
+        },
+        {
+          "name": "page-size",
+          "description": "The number of items to display per page. The default value is 25.\nThe component will emit a `syn-pagination-page-size-changed` event whenever the page size changes, allowing you to respond to page size changes in your application.",
+          "values": []
+        },
+        {
+          "name": "page-size-options",
+          "description": "An array of numbers representing the available options for the number of items to display per page. The default value is [10, 25, 50, 100].\nThe component will use this array to populate the rows-per-page selector, allowing users to choose from the specified options.",
+          "values": [{ "name": "number[]" }]
+        },
+        {
+          "name": "total-items",
+          "description": "Total amount of items. The component will use this value to calculate the total number of pages based on the selected rows per page.",
+          "values": []
+        },
+        {
+          "name": "variant",
+          "description": "The pagination variant to use. The \"full\" variant includes comprehensive controls for navigating between pages and adjusting the number of displayed rows,\nwhile the \"compact\" variant offers a streamlined interface with essential navigation controls.\nThe default value is \"full\".",
+          "values": [{ "name": "full" }, { "name": "compact" }]
+        },
+        {
+          "name": "aria-label",
+          "description": "An accessible label for the navigation landmark. Customize for multiple paginations on a page.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-pagination--docs"
+        }
+      ]
+    },
+    {
+      "name": "syn-popup",
+      "description": "Popup is a utility that lets you declaratively anchor \"popup\" containers to another element.\n---\n\n\n### **Events:**\n - **syn-reposition** - Emitted when the popup is repositioned. This event can fire a lot, so avoid putting expensive operations in your listener or consider debouncing it.\n\n### **Methods:**\n - **reposition()** - Forces the popup to recalculate and reposition itself.\n\n### **Slots:**\n - _default_ - The popup's content.\n- **anchor** - The element the popup will be anchored to. If the anchor lives outside of the popup, you can use the `anchor` attribute or property instead.\n\n### **CSS Properties:**\n - **--arrow-size** - The size of the arrow. Note that an arrow won't be shown unless the `arrow` attribute is used. _(default: 6px)_\n- **--arrow-color** - The color of the arrow. _(default: var(--syn-color-neutral-0))_\n- **--auto-size-available-width** - A read-only custom property that determines the amount of width the popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only available when using `auto-size`. _(default: undefined)_\n- **--auto-size-available-height** - A read-only custom property that determines the amount of height the popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only available when using `auto-size`. _(default: undefined)_\n\n### **CSS Parts:**\n - **arrow** - The arrow's container. Avoid setting `top|bottom|left|right` properties, as these values are assigned dynamically as the popup moves. This is most useful for applying a background color to match the popup, and maybe a border or box shadow.\n- **popup** - The popup's container. Useful for setting a background color, box shadow, etc.\n- **hover-bridge** - The hover bridge element. Only available when the `hover-bridge` option is enabled.",
+      "attributes": [
+        {
+          "name": "anchor",
+          "description": "The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide the anchor\nelement `id`, a DOM element reference, or a `VirtualElement`. If the anchor lives inside the popup, use the\n`anchor` slot instead.",
+          "values": [{ "name": "Element" }, { "name": "VirtualElement" }]
+        },
+        {
+          "name": "active",
+          "description": "Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn\ndown and the popup will be hidden.",
+          "values": []
+        },
+        {
+          "name": "placement",
+          "description": "The preferred placement of the popup. Note that the actual placement will vary as configured to keep the\npanel inside of the viewport.",
+          "values": [
+            { "name": "" },
+            { "name": "top" },
+            { "name": "top-start" },
+            { "name": "top-end" },
             { "name": "bottom" },
             { "name": "bottom-start" },
             { "name": "bottom-end" },
@@ -1446,118 +1551,62 @@
       ]
     },
     {
-      "name": "syn-optgroup",
-      "description": "The <syn-optgroup> element creates a grouping for <syn-option>s within a <syn-select>.\n---\n\n\n### **Slots:**\n - _default_ - The given options. Must be `<syn-option>` elements.\n- **prefix** - A presentational prefix icon or similar element.\n- **label** - The label for the optgroup\n- **suffix** - A presentational suffix icon or similar element.\n\n### **CSS Properties:**\n - **--display-divider** - Display property of the divider. Defaults to \"block\" _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label-container** - The container that wraps prefix, label and base\n- **divider** - The divider that is displayed above the content\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.\n- **options** - The container that wraps the <syn-option> elements.",
-      "attributes": [
-        {
-          "name": "disabled",
-          "description": "Disables all options in the optgroup.",
-          "values": []
-        },
-        {
-          "name": "label",
-          "description": "The optgroups label. If you need to display HTML, use the `label` slot instead.",
-          "values": []
-        }
-      ],
+      "name": "syn-prio-nav",
+      "description": "The `<syn-prio-nav />` element provides a generic navigation bar\nthat can be used to group multiple navigation items  (usually horizontal `<syn-nav-item />`s)\ntogether. It will automatically group all items not visible in the viewport into a custom\npriority menu.\n---\n\n\n### **Slots:**\n - _default_ - The given navigation items. Must be horizontal `<syn-nav-item>`s or have a role of \"menuitem\"\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **priority-menu** - The wrapper around the priority menu\n- **priority-menu-nav-item** - The navigation item for the priority menu\n- **priority-menu-label** - The label for the priority menu\n- **priority-menu-icon** - The icon for the priority menu\n- **priority-menu-container** - The container for the shifted navigation items, if there is not enough space.",
+      "attributes": [],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-optgroup--docs"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-prio-nav--docs"
         }
       ]
     },
     {
-      "name": "syn-option",
-      "description": "Options define the selectable items within various form controls such as [select](/components/select).\n---\n\n\n### **Methods:**\n - **sanitizeValueForDelimiter()** - Replaces any occurrences of the delimiter in the option's original value with underscores.\n- **getTextLabel()** - Returns a plain text label based on the option's content.\n\n### **Slots:**\n - _default_ - The option's label.\n- **prefix** - Used to prepend an icon or similar element to the menu item.\n- **suffix** - Used to append an icon or similar element to the menu item.\n\n### **CSS Parts:**\n - **checked-icon** - The checked icon, an `<syn-icon>` element.\n- **base** - The component's base wrapper.\n- **label** - The option's label.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.",
+      "name": "syn-progress-bar",
+      "description": "Progress bars are used to show the status of an ongoing operation.\n---\n\n\n### **Slots:**\n - _default_ - A label to show inside the progress indicator.\n\n### **CSS Properties:**\n - **--height** - The progress bar's height. _(default: undefined)_\n- **--track-color** - The color of the track. _(default: undefined)_\n- **--indicator-color** - The color of the indicator. _(default: undefined)_\n- **--label-color** - The color of the label. _(default: undefined)_\n- **--speed** - The speed of the progress bar when in indeterminate state. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **indicator** - The progress bar's indicator.\n- **label** - The progress bar's label.",
       "attributes": [
         {
           "name": "value",
-          "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.",
+          "description": "The current progress as a percentage, 0 to 100.",
           "values": []
         },
         {
-          "name": "disabled",
-          "description": "Draws the option in a disabled state, preventing selection.",
+          "name": "indeterminate",
+          "description": "When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.",
+          "values": []
+        },
+        {
+          "name": "label",
+          "description": "A custom label for assistive devices.",
           "values": []
         }
       ],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-option--docs"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-progress-bar--docs"
         }
       ]
     },
     {
-      "name": "syn-pagination",
-      "description": "<syn-pagination /> provides page navigation, direct page input, and page-size selection for large data sets.\n---\n\n\n### **Events:**\n - **syn-pagination-page-changed** - Emitted when the current page changes\n- **syn-pagination-page-size-changed** - Emitted when the page size changes\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **divider** - The divider element displayed at the top of the pagination component.\n- **page-size-select-wrapper** - The wrapper element containing the page size select and page item summary.\n- **page-size-select** - The page size select element.\n- **page-item-summary** - The text element displaying the current page item range and total items.\n- **page-input-section** - The section containing the page number input and total pages display.\n- **page-input** - The page number input element.\n- **navigation** - The pagination navigation element.\n- **navigation-action** - The individual navigation action buttons (first, previous, next, last).",
+      "name": "syn-progress-ring",
+      "description": "Progress rings are used to show the progress of a determinate operation in a circular fashion.\n---\n\n\n### **Slots:**\n - _default_ - A label to show inside the ring.\n\n### **CSS Properties:**\n - **--size** - The diameter of the progress ring (cannot be a percentage). _(default: undefined)_\n- **--track-width** - The width of the track. _(default: undefined)_\n- **--track-color** - The color of the track. _(default: undefined)_\n- **--indicator-width** - The width of the indicator. Defaults to the track width. _(default: undefined)_\n- **--indicator-color** - The color of the indicator. _(default: undefined)_\n- **--indicator-transition-duration** - The duration of the indicator's transition when the value changes. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The progress ring label.",
       "attributes": [
         {
-          "name": "divider",
-          "description": "When true, a divider is displayed at the top of the pagination component.",
-          "values": []
-        },
-        {
-          "name": "disabled",
-          "description": "When true, the pagination controls are disabled and non-interactive.",
-          "values": []
-        },
-        {
-          "name": "size",
-          "description": "The size of the pagination controls.",
-          "values": [
-            { "name": "small" },
-            { "name": "medium" },
-            { "name": "large" }
-          ]
-        },
-        {
-          "name": "current-page",
-          "description": "The current page number. The default value is 1.\nThe component will emit a `syn-pagination-page-changed` event whenever the page changes, allowing you to respond to page changes in your application.",
-          "values": []
-        },
-        {
-          "name": "page-size",
-          "description": "The number of items to display per page. The default value is 25.\nThe component will emit a `syn-pagination-page-size-changed` event whenever the page size changes, allowing you to respond to page size changes in your application.",
-          "values": []
-        },
-        {
-          "name": "page-size-options",
-          "description": "An array of numbers representing the available options for the number of items to display per page. The default value is [10, 25, 50, 100].\nThe component will use this array to populate the rows-per-page selector, allowing users to choose from the specified options.",
-          "values": [{ "name": "number[]" }]
-        },
-        {
-          "name": "total-items",
-          "description": "Total amount of items. The component will use this value to calculate the total number of pages based on the selected rows per page.",
+          "name": "value",
+          "description": "The current progress as a percentage, 0 to 100.",
           "values": []
         },
         {
-          "name": "variant",
-          "description": "The pagination variant to use. The \"full\" variant includes comprehensive controls for navigating between pages and adjusting the number of displayed rows,\nwhile the \"compact\" variant offers a streamlined interface with essential navigation controls.\nThe default value is \"full\".",
-          "values": [{ "name": "full" }, { "name": "compact" }]
-        },
-        {
-          "name": "aria-label",
-          "description": "An accessible label for the navigation landmark. Customize for multiple paginations on a page.",
+          "name": "label",
+          "description": "A custom label for assistive devices.",
           "values": []
         }
       ],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-pagination--docs"
-        }
-      ]
-    },
-    {
-      "name": "syn-prio-nav",
-      "description": "The `<syn-prio-nav />` element provides a generic navigation bar\nthat can be used to group multiple navigation items  (usually horizontal `<syn-nav-item />`s)\ntogether. It will automatically group all items not visible in the viewport into a custom\npriority menu.\n---\n\n\n### **Slots:**\n - _default_ - The given navigation items. Must be horizontal `<syn-nav-item>`s or have a role of \"menuitem\"\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **priority-menu** - The wrapper around the priority menu\n- **priority-menu-nav-item** - The navigation item for the priority menu\n- **priority-menu-label** - The label for the priority menu\n- **priority-menu-icon** - The icon for the priority menu\n- **priority-menu-container** - The container for the shifted navigation items, if there is not enough space.",
-      "attributes": [],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-prio-nav--docs"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-progress-ring--docs"
         }
       ]
     },
@@ -1597,28 +1646,6 @@
         }
       ]
     },
-    {
-      "name": "syn-progress-ring",
-      "description": "Progress rings are used to show the progress of a determinate operation in a circular fashion.\n---\n\n\n### **Slots:**\n - _default_ - A label to show inside the ring.\n\n### **CSS Properties:**\n - **--size** - The diameter of the progress ring (cannot be a percentage). _(default: undefined)_\n- **--track-width** - The width of the track. _(default: undefined)_\n- **--track-color** - The color of the track. _(default: undefined)_\n- **--indicator-width** - The width of the indicator. Defaults to the track width. _(default: undefined)_\n- **--indicator-color** - The color of the indicator. _(default: undefined)_\n- **--indicator-transition-duration** - The duration of the indicator's transition when the value changes. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The progress ring label.",
-      "attributes": [
-        {
-          "name": "value",
-          "description": "The current progress as a percentage, 0 to 100.",
-          "values": []
-        },
-        {
-          "name": "label",
-          "description": "A custom label for assistive devices.",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-progress-ring--docs"
-        }
-      ]
-    },
     {
       "name": "syn-radio-button",
       "description": "Radios buttons allow the user to select a single option from a group using a button-like control.\n---\n\n\n### **Events:**\n - **syn-blur** - Emitted when the button loses focus.\n- **syn-focus** - Emitted when the button gains focus.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the radio button.\n- **blur()** - Removes focus from the radio button.\n\n### **Slots:**\n - _default_ - The radio button's label.\n- **prefix** - A presentational prefix icon or similar element.\n- **suffix** - A presentational suffix icon or similar element.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **button** - The internal `<button>` element.\n- **button--checked** - The internal button element when the radio button is checked.\n- **prefix** - The container that wraps the prefix.\n- **label** - The container that wraps the radio button's label.\n- **suffix** - The container that wraps the suffix.",
@@ -1656,46 +1683,53 @@
       ]
     },
     {
-      "name": "syn-progress-bar",
-      "description": "Progress bars are used to show the status of an ongoing operation.\n---\n\n\n### **Slots:**\n - _default_ - A label to show inside the progress indicator.\n\n### **CSS Properties:**\n - **--height** - The progress bar's height. _(default: undefined)_\n- **--track-color** - The color of the track. _(default: undefined)_\n- **--indicator-color** - The color of the indicator. _(default: undefined)_\n- **--label-color** - The color of the label. _(default: undefined)_\n- **--speed** - The speed of the progress bar when in indeterminate state. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **indicator** - The progress bar's indicator.\n- **label** - The progress bar's label.",
+      "name": "syn-radio-group",
+      "description": "Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.\n---\n\n\n### **Events:**\n - **syn-change** - Emitted when the radio group's selected value changes.\n- **syn-input** - Emitted when the radio group receives user input.\n- **syn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus(options: _FocusOptions_)** - Sets focus on the radio-group.\n\n### **Slots:**\n - _default_ - The default slot where `<syn-radio>` or `<syn-radio-button>` elements are placed.\n- **label** - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the radio group. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **button-group** - The button group that wraps radio buttons.\n- **button-group__base** - The button group's `base` part.",
       "attributes": [
         {
-          "name": "value",
-          "description": "The current progress as a percentage, 0 to 100.",
+          "name": "label",
+          "description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
           "values": []
         },
         {
-          "name": "indeterminate",
-          "description": "When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.",
+          "name": "help-text",
+          "description": "The radio groups's help text. If you need to display HTML, use the `help-text` slot instead.",
           "values": []
         },
         {
-          "name": "label",
-          "description": "A custom label for assistive devices.",
+          "name": "name",
+          "description": "The name of the radio group, submitted as a name/value pair with form data.",
           "values": []
-        }
-      ],
-      "references": [
+        },
         {
-          "name": "Documentation",
-          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-progress-bar--docs"
-        }
-      ]
-    },
-    {
-      "name": "syn-range-tick",
-      "description": "Ticks visually improve positioning on range sliders.\n---\n\n\n### **Slots:**\n - _default_ - The tick's label\n\n### **CSS Properties:**\n - **--tick-height** - The height of the tick marker. _(default: undefined)_\n- **--tick-label-top** - The top offset of the tick label. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The component's label.\n- **line** - The component's tick line.",
-      "attributes": [
+          "name": "value",
+          "description": "The current value of the radio group, submitted as a name/value pair with form data.",
+          "values": []
+        },
         {
-          "name": "subdivision",
-          "description": "Whether the tick should be shown as a subdivision.",
+          "name": "size",
+          "description": "The radio group's size. This size will be applied to all child radios and radio buttons.",
+          "values": [
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" }
+          ]
+        },
+        {
+          "name": "form",
+          "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+          "values": []
+        },
+        {
+          "name": "required",
+          "description": "Ensures a child radio is checked before allowing the containing form to submit.",
           "values": []
         }
       ],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-range-tick--docs"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-radio-group--docs"
         }
       ]
     },
@@ -1785,53 +1819,36 @@
       ]
     },
     {
-      "name": "syn-radio-group",
-      "description": "Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.\n---\n\n\n### **Events:**\n - **syn-change** - Emitted when the radio group's selected value changes.\n- **syn-input** - Emitted when the radio group receives user input.\n- **syn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus(options: _FocusOptions_)** - Sets focus on the radio-group.\n\n### **Slots:**\n - _default_ - The default slot where `<syn-radio>` or `<syn-radio-button>` elements are placed.\n- **label** - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the radio group. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **button-group** - The button group that wraps radio buttons.\n- **button-group__base** - The button group's `base` part.",
+      "name": "syn-range-tick",
+      "description": "Ticks visually improve positioning on range sliders.\n---\n\n\n### **Slots:**\n - _default_ - The tick's label\n\n### **CSS Properties:**\n - **--tick-height** - The height of the tick marker. _(default: undefined)_\n- **--tick-label-top** - The top offset of the tick label. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The component's label.\n- **line** - The component's tick line.",
       "attributes": [
         {
-          "name": "label",
-          "description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
-          "values": []
-        },
-        {
-          "name": "help-text",
-          "description": "The radio groups's help text. If you need to display HTML, use the `help-text` slot instead.",
-          "values": []
-        },
-        {
-          "name": "name",
-          "description": "The name of the radio group, submitted as a name/value pair with form data.",
-          "values": []
-        },
-        {
-          "name": "value",
-          "description": "The current value of the radio group, submitted as a name/value pair with form data.",
+          "name": "subdivision",
+          "description": "Whether the tick should be shown as a subdivision.",
           "values": []
-        },
-        {
-          "name": "size",
-          "description": "The radio group's size. This size will be applied to all child radios and radio buttons.",
-          "values": [
-            { "name": "small" },
-            { "name": "medium" },
-            { "name": "large" }
-          ]
-        },
+        }
+      ],
+      "references": [
         {
-          "name": "form",
-          "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
-          "values": []
-        },
+          "name": "Documentation",
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-range-tick--docs"
+        }
+      ]
+    },
+    {
+      "name": "syn-resize-observer",
+      "description": "The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).\n---\n\n\n### **Events:**\n - **syn-resize** - Emitted when the element is resized.\n\n### **Slots:**\n - _default_ - One or more elements to watch for resizing.",
+      "attributes": [
         {
-          "name": "required",
-          "description": "Ensures a child radio is checked before allowing the containing form to submit.",
+          "name": "disabled",
+          "description": "Disables the observer.",
           "values": []
         }
       ],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-radio-group--docs"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-resize-observer--docs"
         }
       ]
     },
@@ -1939,23 +1956,6 @@
         }
       ]
     },
-    {
-      "name": "syn-resize-observer",
-      "description": "The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).\n---\n\n\n### **Events:**\n - **syn-resize** - Emitted when the element is resized.\n\n### **Slots:**\n - _default_ - One or more elements to watch for resizing.",
-      "attributes": [
-        {
-          "name": "disabled",
-          "description": "Disables the observer.",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-resize-observer--docs"
-        }
-      ]
-    },
     {
       "name": "syn-side-nav",
       "description": "The <syn-side-nav /> element contains secondary navigation and fits below the header.\nIt can be used to group multiple navigation items (<syn-nav-item />s) together.\n---\n\n\n### **Events:**\n - **syn-show** - Emitted when the side-nav opens.\n- **syn-after-show** - Emitted after the side-nav opens and all animations are complete.\n- **syn-hide** - Emitted when the side-nav closes.\n- **syn-after-hide** - Emitted after the side-nav closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the side-nav.\n- **hide()** - Hides the side-nav\n\n### **Slots:**\n - _default_ - The main content of the side-nav. Used for <syn-nav-item /> elements.\n- **footer** - The footer content of the side-nav. Used for <syn-nav-item /> elements. Please avoid having to many nav-items as it can massively influence the user experience.\n- **toggle-label** - The label of the toggle nav-item for variant=\"sticky\".\n- **toggle-icon** - An icon to use in lieu of the default icon for the toggle nav-item for variant=\"sticky\".\n\n### **CSS Properties:**\n - **--side-nav-open-width** - The width of the side-nav if in open state _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The components base wrapper\n- **drawer** - The drawer that is used under the hood for creating the side-nav\n- **content-container** - The components main content container\n- **content** - The components main content\n- **footer-container** - The components footer content container (where the footer slot content is rendered)\n- **footer-divider** - The components footer divider\n- **footer** - The components footer content\n- **overlay** - The overlay that covers the screen behind the side-nav.\n- **panel** - The side-nav's panel (where the whole content is rendered).\n- **body** - The side-nav's body (where the default slot content is rendered)\n- **drawer__base** - The drawer's base wrapper\n- **toggle-nav-item** - The nav-item to toggle open state for variant=\"sticky\"\n- **toggle-icon** - The icon of the toggle nav-item for variant=\"sticky\"\n- **toggle-label** - The label of the toggle nav-item for variant=\"sticky\".",
@@ -1987,6 +1987,17 @@
         }
       ]
     },
+    {
+      "name": "syn-spinner",
+      "description": "Spinners are used to show the progress of an indeterminate operation.\n---\n\n\n### **CSS Properties:**\n - **--track-width** - The width of the track. _(default: undefined)_\n- **--indicator-color** - The color of the spinner's indicator. _(default: undefined)_\n- **--speed** - The time it takes for the spinner to complete one animation cycle. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "attributes": [],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-spinner--docs"
+        }
+      ]
+    },
     {
       "name": "syn-switch",
       "description": "Switches allow the user to toggle an option on or off.\n---\n\n\n### **Events:**\n - **syn-blur** - Emitted when the control loses focus.\n- **syn-change** - Emitted when the control's checked state changes.\n- **syn-input** - Emitted when the control receives input.\n- **syn-focus** - Emitted when the control gains focus.\n- **syn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the switch.\n- **focus(options: _FocusOptions_)** - Sets focus on the switch.\n- **blur()** - Removes focus from the switch.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - _default_ - The switch's label.\n- **help-text** - Text that describes how to use the switch. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Properties:**\n - **--width** - The width of the switch. _(default: undefined)_\n- **--height** - The height of the switch. _(default: undefined)_\n- **--thumb-size** - The size of the thumb. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The control that houses the switch's thumb.\n- **thumb** - The switch's thumb.\n- **label** - The switch's label.\n- **form-control-help-text** - The help text's wrapper.",
@@ -2032,53 +2043,20 @@
           "values": []
         },
         {
-          "name": "required",
-          "description": "Makes the switch a required field.",
-          "values": []
-        },
-        {
-          "name": "help-text",
-          "description": "The switch's help text. If you need to display HTML, use the `help-text` slot instead.",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-switch--docs"
-        }
-      ]
-    },
-    {
-      "name": "syn-spinner",
-      "description": "Spinners are used to show the progress of an indeterminate operation.\n---\n\n\n### **CSS Properties:**\n - **--track-width** - The width of the track. _(default: undefined)_\n- **--indicator-color** - The color of the spinner's indicator. _(default: undefined)_\n- **--speed** - The time it takes for the spinner to complete one animation cycle. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-      "attributes": [],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-spinner--docs"
-        }
-      ]
-    },
-    {
-      "name": "syn-tab-panel",
-      "description": "Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.\n---\n\n\n### **Slots:**\n - _default_ - The tab panel's content.\n\n### **CSS Properties:**\n - **--padding** - The tab panel's padding. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-      "attributes": [
-        {
-          "name": "name",
-          "description": "The tab panel's name.",
+          "name": "required",
+          "description": "Makes the switch a required field.",
           "values": []
         },
         {
-          "name": "active",
-          "description": "When true, the tab panel will be shown.",
+          "name": "help-text",
+          "description": "The switch's help text. If you need to display HTML, use the `help-text` slot instead.",
           "values": []
         }
       ],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-tab-panel--docs"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-switch--docs"
         }
       ]
     },
@@ -2114,32 +2092,6 @@
         }
       ]
     },
-    {
-      "name": "syn-tag",
-      "description": "Tags are used as labels to organize things or to indicate a selection.\n---\n\n\n### **Events:**\n - **syn-remove** - Emitted when the remove button is activated.\n\n### **Slots:**\n - _default_ - The tag's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **content** - The tag's content.\n- **remove-button** - The tag's remove button, an `<syn-icon-button>`.\n- **remove-button__base** - The remove button's exported `base` part.",
-      "attributes": [
-        {
-          "name": "size",
-          "description": "The tag's size.",
-          "values": [
-            { "name": "small" },
-            { "name": "medium" },
-            { "name": "large" }
-          ]
-        },
-        {
-          "name": "removable",
-          "description": "Makes the tag removable and shows a remove button.",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-tag--docs"
-        }
-      ]
-    },
     {
       "name": "syn-tab-group",
       "description": "Tab groups organize content into a container that shows one section at a time.\n---\n\n\n### **Events:**\n - **syn-tab-show** - Emitted when a tab is shown. The payload of the event returns the \"panel\" attribute of the shown tab.\n- **syn-tab-hide** - Emitted when a tab is hidden. The payload of the event returns the \"panel\" attribute of the hidden tab.\n\n### **Methods:**\n - **show(panel: _string_)** - Shows the specified tab panel.\n\n### **Slots:**\n - _default_ - Used for grouping tab panels in the tab group. Must be `<syn-tab-panel>` elements.\n- **nav** - Used for grouping tabs in the tab group. Must be `<syn-tab>` elements.\n\n### **CSS Properties:**\n - **--indicator-color** - The color of the active tab indicator. _(default: undefined)_\n- **--track-color** - The color of the indicator's track (the line that separates tabs from panels). _(default: undefined)_\n- **--track-width** - The width of the indicator's track (the line that separates tabs from panels). _(default: undefined)_\n- **--indicator-width** - The width of the active tab indicator. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **nav** - The tab group's navigation container where tabs are slotted in.\n- **tabs** - The container that wraps the tabs.\n- **active-tab-indicator** - The line that highlights the currently selected tab.\n- **body** - The tab group's body where tab panels are slotted in.\n- **scroll-button** - The previous/next scroll buttons that show when tabs are scrollable, an `<syn-icon-button>`.\n- **scroll-button--start** - The starting scroll button.\n- **scroll-button--end** - The ending scroll button.\n- **scroll-button__base** - The scroll button's exported `base` part.",
@@ -2183,135 +2135,81 @@
       ]
     },
     {
-      "name": "syn-tag-group",
-      "description": "A tag group is used to display multiple tags that belong together, often representing selected filters, categories, or user‑generated labels.\nIt arranges tags in flexible rows and supports different sizes and layouts.\nTags can be removable, icon‑based, or purely textual.\n---\n\n\n### **Slots:**\n - _default_ - The tag group's main content. Must be `<syn-tag />` elements.\n- **label** - The tag group's label. Alternatively, you can use the `label` attribute.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **tag-label** - The tag group's label.",
+      "name": "syn-tab-panel",
+      "description": "Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.\n---\n\n\n### **Slots:**\n - _default_ - The tab panel's content.\n\n### **CSS Properties:**\n - **--padding** - The tab panel's padding. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
       "attributes": [
         {
-          "name": "label",
-          "description": "The tag group's label. If you need to display HTML, use the `label` slot instead.",
+          "name": "name",
+          "description": "The tab panel's name.",
           "values": []
         },
         {
-          "name": "label-position",
-          "description": "Controls the label position. Use 'top' to place the label above the tags, or 'start' to place it to the begin of the tag group.",
-          "values": [{ "name": "top" }, { "name": "start" }]
-        },
-        {
-          "name": "size",
-          "description": "The size that should be applied to all slotted `<syn-tag>` elements",
-          "values": [
-            { "name": "small" },
-            { "name": "medium" },
-            { "name": "large" }
-          ]
+          "name": "active",
+          "description": "When true, the tab panel will be shown.",
+          "values": []
         }
       ],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-tag-group--docs"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-tab-panel--docs"
         }
       ]
     },
     {
-      "name": "syn-tooltip",
-      "description": "Tooltips display additional information based on a specific action.\n---\n\n\n### **Events:**\n - **syn-show** - Emitted when the tooltip begins to show.\n- **syn-after-show** - Emitted after the tooltip has shown and all animations are complete.\n- **syn-hide** - Emitted when the tooltip begins to hide.\n- **syn-after-hide** - Emitted after the tooltip has hidden and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the tooltip.\n- **hide()** - Hides the tooltip\n\n### **Slots:**\n - _default_ - The tooltip's target element. Avoid slotting in more than one element, as subsequent ones will be ignored.\n- **content** - The content to render in the tooltip. Alternatively, you can use the `content` attribute.\n\n### **CSS Properties:**\n - **--max-width** - The maximum width of the tooltip before its content will wrap. _(default: undefined)_\n- **--hide-delay** - The amount of time to wait before hiding the tooltip when hovering. _(default: undefined)_\n- **--show-delay** - The amount of time to wait before showing the tooltip when hovering. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper, an `<syn-popup>` element.\n- **base__popup** - The popup's exported `popup` part. Use this to target the tooltip's popup container.\n- **base__arrow** - The popup's exported `arrow` part. Use this to target the tooltip's arrow.\n- **body** - The tooltip's body where its content is rendered.",
+      "name": "syn-tag",
+      "description": "Tags are used as labels to organize things or to indicate a selection.\n---\n\n\n### **Events:**\n - **syn-remove** - Emitted when the remove button is activated.\n\n### **Slots:**\n - _default_ - The tag's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **content** - The tag's content.\n- **remove-button** - The tag's remove button, an `<syn-icon-button>`.\n- **remove-button__base** - The remove button's exported `base` part.",
       "attributes": [
         {
-          "name": "content",
-          "description": "The tooltip's content. If you need to display HTML, use the `content` slot instead.",
-          "values": []
-        },
-        {
-          "name": "placement",
-          "description": "The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\ninside of the viewport.",
+          "name": "size",
+          "description": "The tag's size.",
           "values": [
-            { "name": "" },
-            { "name": "top" },
-            { "name": "top-start" },
-            { "name": "top-end" },
-            { "name": "right" },
-            { "name": "right-start" },
-            { "name": "right-end" },
-            { "name": "bottom" },
-            { "name": "bottom-start" },
-            { "name": "bottom-end" },
-            { "name": "left" },
-            { "name": "left-start" },
-            { "name": "left-end" }
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" }
           ]
         },
         {
-          "name": "disabled",
-          "description": "Disables the tooltip so it won't show when triggered.",
-          "values": []
-        },
-        {
-          "name": "distance",
-          "description": "The distance in pixels from which to offset the tooltip away from its target.",
-          "values": []
-        },
-        {
-          "name": "open",
-          "description": "Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods.",
-          "values": []
-        },
-        {
-          "name": "skidding",
-          "description": "The distance in pixels from which to offset the tooltip along its target.",
-          "values": []
-        },
-        {
-          "name": "trigger",
-          "description": "Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\noptions can be passed by separating them with a space. When manual is used, the tooltip must be activated\nprogrammatically.",
+          "name": "removable",
+          "description": "Makes the tag removable and shows a remove button.",
           "values": []
         }
       ],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-tooltip--docs"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-tag--docs"
         }
       ]
     },
     {
-      "name": "syn-validate",
-      "description": "Validate provides form field validation messages in a unified way.\nIt does this by using [the native browser validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)\nand showing the validation message in a consistent, user defined way.\n---\n\n\n### **Methods:**\n - **getValidity()** - Returns the validity state of the input component.\n`true` for valid and `false` for invalid.\n\n### **Slots:**\n - _default_ - The form field that should be validated. Avoid slotting in more than one element, as subsequent ones will be ignored.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **input-wrapper** - The container that wraps the form field.\n- **alert** - The syn-alert that is shown when the variant is set to \"inline\".\n- **alert__base** - The container that wraps the alert.\n- **alert__message** - The container that wraps the alert message.\n- **alert__icon** - The container that wraps the alert icon.\n- **tooltip** - The syn-tooltip that is shown when the variant is set to \"tooltip\".\n- **tooltip__base** - The container that wraps the tooltip.\n- **tooltip__popup** - The container that wraps the tooltip popup.\n- **tooltip__arrow** - The container that wraps the tooltip arrow.\n- **tooltip__body** - The container that wraps the tooltip body.",
+      "name": "syn-tag-group",
+      "description": "A tag group is used to display multiple tags that belong together, often representing selected filters, categories, or user‑generated labels.\nIt arranges tags in flexible rows and supports different sizes and layouts.\nTags can be removable, icon‑based, or purely textual.\n---\n\n\n### **Slots:**\n - _default_ - The tag group's main content. Must be `<syn-tag />` elements.\n- **label** - The tag group's label. Alternatively, you can use the `label` attribute.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **tag-label** - The tag group's label.",
       "attributes": [
         {
-          "name": "variant",
-          "description": "The variant that should be used to show validation alerts.\n\nThe following variants are supported:\n- **native** (default): Uses the native browser validation, usually a browser tooltip.\n- **tooltip**: Show the validation message as a tooltip using a `<syn-tooltip>`.\n- **inline**: Show the validation message underneath the element, using a `<syn-alert>`",
-          "values": [
-            { "name": "native" },
-            { "name": "tooltip" },
-            { "name": "inline" }
-          ]
-        },
-        {
-          "name": "hide-icon",
-          "description": "Do not show the error icon when using the inline variant validation",
-          "values": []
-        },
-        {
-          "name": "on",
-          "description": "Defines the events that trigger the validation.\n`invalid` will always automatically be included.\nYou may also use the `live` keyword to validate on every input change.\n`live` will make sure to listen to the `invalid`, `input` and `blur` events.\n\nPlease have a look at the [documentation for native form validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)\nand [the use of form invalid events](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) for further information.",
+          "name": "label",
+          "description": "The tag group's label. If you need to display HTML, use the `label` slot instead.",
           "values": []
         },
         {
-          "name": "custom-validation-message",
-          "description": "Custom validation message to be displayed when the input is invalid.\nWill override the default browser validation message.\nSet to an empty string to reset the validation message.",
-          "values": []
+          "name": "label-position",
+          "description": "Controls the label position. Use 'top' to place the label above the tags, or 'start' to place it to the begin of the tag group.",
+          "values": [{ "name": "top" }, { "name": "start" }]
         },
         {
-          "name": "eager",
-          "description": "Set this to true to validate the input immediately when it is rendered.\nBest used with a `variant` of `inline`.\nWhen setting eager, the input will not be focused automatically.\n\nWhen using a `variant` of `native` the browser will focus\nthe last eager field as it is using a tooltip.\nIn this case it is better to just provide one eager field.",
-          "values": []
+          "name": "size",
+          "description": "The size that should be applied to all slotted `<syn-tag>` elements",
+          "values": [
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" }
+          ]
         }
       ],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-validate--docs"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-tag-group--docs"
         }
       ]
     },
@@ -2464,6 +2362,108 @@
           "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-textarea--docs"
         }
       ]
+    },
+    {
+      "name": "syn-tooltip",
+      "description": "Tooltips display additional information based on a specific action.\n---\n\n\n### **Events:**\n - **syn-show** - Emitted when the tooltip begins to show.\n- **syn-after-show** - Emitted after the tooltip has shown and all animations are complete.\n- **syn-hide** - Emitted when the tooltip begins to hide.\n- **syn-after-hide** - Emitted after the tooltip has hidden and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the tooltip.\n- **hide()** - Hides the tooltip\n\n### **Slots:**\n - _default_ - The tooltip's target element. Avoid slotting in more than one element, as subsequent ones will be ignored.\n- **content** - The content to render in the tooltip. Alternatively, you can use the `content` attribute.\n\n### **CSS Properties:**\n - **--max-width** - The maximum width of the tooltip before its content will wrap. _(default: undefined)_\n- **--hide-delay** - The amount of time to wait before hiding the tooltip when hovering. _(default: undefined)_\n- **--show-delay** - The amount of time to wait before showing the tooltip when hovering. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper, an `<syn-popup>` element.\n- **base__popup** - The popup's exported `popup` part. Use this to target the tooltip's popup container.\n- **base__arrow** - The popup's exported `arrow` part. Use this to target the tooltip's arrow.\n- **body** - The tooltip's body where its content is rendered.",
+      "attributes": [
+        {
+          "name": "content",
+          "description": "The tooltip's content. If you need to display HTML, use the `content` slot instead.",
+          "values": []
+        },
+        {
+          "name": "placement",
+          "description": "The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\ninside of the viewport.",
+          "values": [
+            { "name": "" },
+            { "name": "top" },
+            { "name": "top-start" },
+            { "name": "top-end" },
+            { "name": "right" },
+            { "name": "right-start" },
+            { "name": "right-end" },
+            { "name": "bottom" },
+            { "name": "bottom-start" },
+            { "name": "bottom-end" },
+            { "name": "left" },
+            { "name": "left-start" },
+            { "name": "left-end" }
+          ]
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the tooltip so it won't show when triggered.",
+          "values": []
+        },
+        {
+          "name": "distance",
+          "description": "The distance in pixels from which to offset the tooltip away from its target.",
+          "values": []
+        },
+        {
+          "name": "open",
+          "description": "Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods.",
+          "values": []
+        },
+        {
+          "name": "skidding",
+          "description": "The distance in pixels from which to offset the tooltip along its target.",
+          "values": []
+        },
+        {
+          "name": "trigger",
+          "description": "Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\noptions can be passed by separating them with a space. When manual is used, the tooltip must be activated\nprogrammatically.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-tooltip--docs"
+        }
+      ]
+    },
+    {
+      "name": "syn-validate",
+      "description": "Validate provides form field validation messages in a unified way.\nIt does this by using [the native browser validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)\nand showing the validation message in a consistent, user defined way.\n---\n\n\n### **Methods:**\n - **getValidity()** - Returns the validity state of the input component.\n`true` for valid and `false` for invalid.\n\n### **Slots:**\n - _default_ - The form field that should be validated. Avoid slotting in more than one element, as subsequent ones will be ignored.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **input-wrapper** - The container that wraps the form field.\n- **alert** - The syn-alert that is shown when the variant is set to \"inline\".\n- **alert__base** - The container that wraps the alert.\n- **alert__message** - The container that wraps the alert message.\n- **alert__icon** - The container that wraps the alert icon.\n- **tooltip** - The syn-tooltip that is shown when the variant is set to \"tooltip\".\n- **tooltip__base** - The container that wraps the tooltip.\n- **tooltip__popup** - The container that wraps the tooltip popup.\n- **tooltip__arrow** - The container that wraps the tooltip arrow.\n- **tooltip__body** - The container that wraps the tooltip body.",
+      "attributes": [
+        {
+          "name": "variant",
+          "description": "The variant that should be used to show validation alerts.\n\nThe following variants are supported:\n- **native** (default): Uses the native browser validation, usually a browser tooltip.\n- **tooltip**: Show the validation message as a tooltip using a `<syn-tooltip>`.\n- **inline**: Show the validation message underneath the element, using a `<syn-alert>`",
+          "values": [
+            { "name": "native" },
+            { "name": "tooltip" },
+            { "name": "inline" }
+          ]
+        },
+        {
+          "name": "hide-icon",
+          "description": "Do not show the error icon when using the inline variant validation",
+          "values": []
+        },
+        {
+          "name": "on",
+          "description": "Defines the events that trigger the validation.\n`invalid` will always automatically be included.\nYou may also use the `live` keyword to validate on every input change.\n`live` will make sure to listen to the `invalid`, `input` and `blur` events.\n\nPlease have a look at the [documentation for native form validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)\nand [the use of form invalid events](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) for further information.",
+          "values": []
+        },
+        {
+          "name": "custom-validation-message",
+          "description": "Custom validation message to be displayed when the input is invalid.\nWill override the default browser validation message.\nSet to an empty string to reset the validation message.",
+          "values": []
+        },
+        {
+          "name": "eager",
+          "description": "Set this to true to validate the input immediately when it is rendered.\nBest used with a `variant` of `inline`.\nWhen setting eager, the input will not be focused automatically.\n\nWhen using a `variant` of `native` the browser will focus\nthe last eager field as it is using a tooltip.\nIn this case it is better to just provide one eager field.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-validate--docs"
+        }
+      ]
     }
   ]
 }