@synergy-design-system/components 3.14.0 → 3.15.1

package/dist/custom-elements.json

@@ -2,6 +2,148 @@
   "schemaVersion": "1.0.0",
   "readme": "",
   "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "components/accordion/accordion.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SynAccordion",
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The accordion's main content. Must be `<syn-details />` elements.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "detailsInDefaultSlot",
+              "type": {
+                "text": "SynDetails[]"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "closeOthers",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates whether or not multiple `<syn-detail>` elements can be open at the same time.",
+              "attribute": "close-others"
+            },
+            {
+              "kind": "field",
+              "name": "contained",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws the accordion and the slotted `<syn-details>` as contained elements.",
+              "attribute": "contained",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The size that should be applied to all slotted `<syn-details>` elements",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "adjustDetailsSize",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "adjustDetailsContained",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleSizeChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleContainedChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleSlotChange"
+            },
+            {
+              "kind": "field",
+              "name": "handleAccordionShow",
+              "privacy": "private"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "close-others",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates whether or not multiple `<syn-detail>` elements can be open at the same time.",
+              "fieldName": "closeOthers"
+            },
+            {
+              "name": "contained",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws the accordion and the slotted `<syn-details>` as contained elements.",
+              "fieldName": "contained"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The size that should be applied to all slotted `<syn-details>` elements",
+              "fieldName": "size"
+            }
+          ],
+          "superclass": {
+            "name": "SynergyElement",
+            "module": "/src/internal/synergy-element.js"
+          },
+          "summary": "Accordions provide the ability to group a list of `<syn-details>`.",
+          "tagNameWithoutPrefix": "accordion",
+          "tagName": "syn-accordion",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Accordions provide the ability to group a list of `<syn-details>`.\n *\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-accordion--docs\n * @status stable\n * @since 2.3.0\n *\n * @slot - The accordion's main content. Must be `<syn-details />` elements.\n *\n * @csspart base - The component's base wrapper.\n */",
+          "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-accordion--docs",
+          "status": "stable",
+          "since": "2.3.0"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SynAccordion",
+            "module": "components/accordion/accordion.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/alert/alert.js",
@@ -344,12 +486,12 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/accordion/accordion.js",
+      "path": "components/badge/badge.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SynAccordion",
+          "name": "SynBadge",
           "cssParts": [
             {
               "description": "The component's base wrapper.",
@@ -358,119 +500,53 @@
           ],
           "slots": [
             {
-              "description": "The accordion's main content. Must be `<syn-details />` elements.",
+              "description": "The badge's content.",
               "name": ""
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "detailsInDefaultSlot",
-              "type": {
-                "text": "SynDetails[]"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "closeOthers",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Indicates whether or not multiple `<syn-detail>` elements can be open at the same time.",
-              "attribute": "close-others"
-            },
-            {
-              "kind": "field",
-              "name": "contained",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Draws the accordion and the slotted `<syn-details>` as contained elements.",
-              "attribute": "contained",
-              "reflects": true
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "variant",
               "type": {
-                "text": "'small' | 'medium' | 'large'"
+                "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
               },
-              "default": "'medium'",
-              "description": "The size that should be applied to all slotted `<syn-details>` elements",
-              "attribute": "size",
+              "default": "'primary'",
+              "description": "The badge's theme variant.",
+              "attribute": "variant",
               "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "adjustDetailsSize",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "adjustDetailsContained",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleSizeChange"
-            },
-            {
-              "kind": "method",
-              "name": "handleContainedChange"
-            },
-            {
-              "kind": "method",
-              "name": "handleSlotChange"
-            },
-            {
-              "kind": "field",
-              "name": "handleAccordionShow",
-              "privacy": "private"
             }
           ],
           "attributes": [
             {
-              "name": "close-others",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Indicates whether or not multiple `<syn-detail>` elements can be open at the same time.",
-              "fieldName": "closeOthers"
-            },
-            {
-              "name": "contained",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Draws the accordion and the slotted `<syn-details>` as contained elements.",
-              "fieldName": "contained"
-            },
-            {
-              "name": "size",
+              "name": "variant",
               "type": {
-                "text": "'small' | 'medium' | 'large'"
+                "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
               },
-              "default": "'medium'",
-              "description": "The size that should be applied to all slotted `<syn-details>` elements",
-              "fieldName": "size"
+              "default": "'primary'",
+              "description": "The badge's theme variant.",
+              "fieldName": "variant"
             }
           ],
           "superclass": {
             "name": "SynergyElement",
             "module": "/src/internal/synergy-element.js"
           },
-          "summary": "Accordions provide the ability to group a list of `<syn-details>`.",
-          "tagNameWithoutPrefix": "accordion",
-          "tagName": "syn-accordion",
+          "summary": "Badges are used to draw attention and display statuses or counts.",
+          "tagNameWithoutPrefix": "badge",
+          "tagName": "syn-badge",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Accordions provide the ability to group a list of `<syn-details>`.\n *\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-accordion--docs\n * @status stable\n * @since 2.3.0\n *\n * @slot - The accordion's main content. Must be `<syn-details />` elements.\n *\n * @csspart base - The component's base wrapper.\n */",
-          "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-accordion--docs",
+          "jsDoc": "/**\n * @summary Badges are used to draw attention and display statuses or counts.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-badge--docs\n * @status stable\n * @since 1.14.0\n *\n * @slot - The badge's content.\n *\n * @csspart base - The component's base wrapper.\n */",
+          "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-badge--docs",
           "status": "stable",
-          "since": "2.3.0"
+          "since": "1.14.0"
         }
       ],
       "exports": [
@@ -478,20 +554,20 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SynAccordion",
-            "module": "components/accordion/accordion.js"
+            "name": "SynBadge",
+            "module": "components/badge/badge.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/badge/badge.js",
+      "path": "components/breadcrumb/breadcrumb.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SynBadge",
+          "name": "SynBreadcrumb",
           "cssParts": [
             {
               "description": "The component's base wrapper.",
@@ -500,11 +576,24 @@
           ],
           "slots": [
             {
-              "description": "The badge's content.",
+              "description": "One or more breadcrumb items to display.",
               "name": ""
+            },
+            {
+              "description": "The separator to use between breadcrumb items. Works best with `<syn-icon>`.",
+              "name": "separator"
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "dependencies",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ 'syn-icon': SynIcon }"
+            },
             {
               "kind": "field",
               "name": "localize",
@@ -514,39 +603,70 @@
             },
             {
               "kind": "field",
-              "name": "variant",
+              "name": "separatorDir",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "defaultSlot",
               "type": {
-                "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
+                "text": "HTMLSlotElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "separatorSlot",
+              "type": {
+                "text": "HTMLSlotElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
               },
-              "default": "'primary'",
-              "description": "The badge's theme variant.",
-              "attribute": "variant",
-              "reflects": true
+              "default": "''",
+              "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
+              "attribute": "label"
+            },
+            {
+              "kind": "method",
+              "name": "getSeparator",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleSlotChange",
+              "privacy": "private"
             }
           ],
           "attributes": [
             {
-              "name": "variant",
+              "name": "label",
               "type": {
-                "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
+                "text": "string"
               },
-              "default": "'primary'",
-              "description": "The badge's theme variant.",
-              "fieldName": "variant"
+              "default": "''",
+              "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
+              "fieldName": "label"
             }
           ],
           "superclass": {
             "name": "SynergyElement",
             "module": "/src/internal/synergy-element.js"
           },
-          "summary": "Badges are used to draw attention and display statuses or counts.",
-          "tagNameWithoutPrefix": "badge",
-          "tagName": "syn-badge",
+          "summary": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.",
+          "tagNameWithoutPrefix": "breadcrumb",
+          "tagName": "syn-breadcrumb",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Badges are used to draw attention and display statuses or counts.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-badge--docs\n * @status stable\n * @since 1.14.0\n *\n * @slot - The badge's content.\n *\n * @csspart base - The component's base wrapper.\n */",
-          "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-badge--docs",
+          "jsDoc": "/**\n * @summary Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb--docs\n * @status stable\n * @since 1.26.0\n *\n * @slot - One or more breadcrumb items to display.\n * @slot separator - The separator to use between breadcrumb items. Works best with `<syn-icon>`.\n *\n * @dependency syn-icon\n *\n * @csspart base - The component's base wrapper.\n */",
+          "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb--docs",
           "status": "stable",
-          "since": "1.14.0"
+          "since": "1.26.0",
+          "dependencies": [
+            "syn-icon"
+          ]
         }
       ],
       "exports": [
@@ -554,119 +674,165 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SynBadge",
-            "module": "components/badge/badge.js"
+            "name": "SynBreadcrumb",
+            "module": "components/breadcrumb/breadcrumb.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/breadcrumb/breadcrumb.js",
+      "path": "components/breadcrumb-item/breadcrumb-item.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SynBreadcrumb",
+          "name": "SynBreadcrumbItem",
           "cssParts": [
             {
               "description": "The component's base wrapper.",
               "name": "base"
+            },
+            {
+              "description": "The breadcrumb item's label.",
+              "name": "label"
+            },
+            {
+              "description": "The container that wraps the prefix.",
+              "name": "prefix"
+            },
+            {
+              "description": "The container that wraps the suffix.",
+              "name": "suffix"
+            },
+            {
+              "description": "The container that wraps the separator.",
+              "name": "separator"
             }
           ],
           "slots": [
             {
-              "description": "One or more breadcrumb items to display.",
+              "description": "The breadcrumb item's label.",
               "name": ""
             },
             {
-              "description": "The separator to use between breadcrumb items. Works best with `<syn-icon>`.",
+              "description": "An optional prefix, usually an icon or icon button.",
+              "name": "prefix"
+            },
+            {
+              "description": "An optional suffix, usually an icon or icon button.",
+              "name": "suffix"
+            },
+            {
+              "description": "The separator to use for the breadcrumb item. This will only change the separator for this item. If you want to change it for all items in the group, set the separator on `<syn-breadcrumb>` instead.",
               "name": "separator"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "dependencies",
-              "type": {
-                "text": "object"
-              },
-              "static": true,
-              "default": "{ 'syn-icon': SynIcon }"
+              "name": "hasSlotController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new HasSlotController(this, 'prefix', 'suffix')"
             },
             {
               "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new LocalizeController(this)"
+              "name": "defaultSlot",
+              "type": {
+                "text": "HTMLSlotElement"
+              }
             },
             {
               "kind": "field",
-              "name": "separatorDir",
-              "privacy": "private"
+              "name": "renderType",
+              "type": {
+                "text": "'button' | 'link' | 'dropdown'"
+              },
+              "privacy": "private",
+              "default": "'button'"
             },
             {
               "kind": "field",
-              "name": "defaultSlot",
+              "name": "href",
               "type": {
-                "text": "HTMLSlotElement"
-              }
+                "text": "string | undefined"
+              },
+              "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.",
+              "attribute": "href"
             },
             {
               "kind": "field",
-              "name": "separatorSlot",
+              "name": "target",
               "type": {
-                "text": "HTMLSlotElement"
-              }
+                "text": "'_blank' | '_parent' | '_self' | '_top' | undefined"
+              },
+              "description": "Tells the browser where to open the link. Only used when `href` is set.",
+              "attribute": "target"
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "rel",
               "type": {
                 "text": "string"
               },
-              "default": "''",
-              "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
-              "attribute": "label"
+              "default": "'noreferrer noopener'",
+              "description": "The `rel` attribute to use on the link. Only used when `href` is set.",
+              "attribute": "rel"
             },
             {
               "kind": "method",
-              "name": "getSeparator",
+              "name": "setRenderType",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "handleSlotChange",
-              "privacy": "private"
+              "name": "hrefChanged"
+            },
+            {
+              "kind": "method",
+              "name": "handleSlotChange"
             }
           ],
           "attributes": [
             {
-              "name": "label",
+              "name": "href",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered\ninternally. When unset, a button will be rendered instead.",
+              "fieldName": "href"
+            },
+            {
+              "name": "target",
+              "type": {
+                "text": "'_blank' | '_parent' | '_self' | '_top' | undefined"
+              },
+              "description": "Tells the browser where to open the link. Only used when `href` is set.",
+              "fieldName": "target"
+            },
+            {
+              "name": "rel",
               "type": {
                 "text": "string"
               },
-              "default": "''",
-              "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
-              "fieldName": "label"
+              "default": "'noreferrer noopener'",
+              "description": "The `rel` attribute to use on the link. Only used when `href` is set.",
+              "fieldName": "rel"
             }
           ],
           "superclass": {
             "name": "SynergyElement",
             "module": "/src/internal/synergy-element.js"
           },
-          "summary": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.",
-          "tagNameWithoutPrefix": "breadcrumb",
-          "tagName": "syn-breadcrumb",
+          "summary": "Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.",
+          "tagNameWithoutPrefix": "breadcrumb-item",
+          "tagName": "syn-breadcrumb-item",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb--docs\n * @status stable\n * @since 1.26.0\n *\n * @slot - One or more breadcrumb items to display.\n * @slot separator - The separator to use between breadcrumb items. Works best with `<syn-icon>`.\n *\n * @dependency syn-icon\n *\n * @csspart base - The component's base wrapper.\n */",
-          "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb--docs",
+          "jsDoc": "/**\n * @summary Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb-item--docs\n * @status stable\n * @since 1.26.0\n *\n * @slot - The breadcrumb item's label.\n * @slot prefix - An optional prefix, usually an icon or icon button.\n * @slot suffix - An optional suffix, usually an icon or icon button.\n * @slot separator - The separator to use for the breadcrumb item. This will only change the separator for this item. If\n * you want to change it for all items in the group, set the separator on `<syn-breadcrumb>` instead.\n *\n * @csspart base - The component's base wrapper.\n * @csspart label - The breadcrumb item's label.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n * @csspart separator - The container that wraps the separator.\n */",
+          "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb-item--docs",
           "status": "stable",
-          "since": "1.26.0",
-          "dependencies": [
-            "syn-icon"
-          ]
+          "since": "1.26.0"
         }
       ],
       "exports": [
@@ -674,8 +840,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SynBreadcrumb",
-            "module": "components/breadcrumb/breadcrumb.js"
+            "name": "SynBreadcrumbItem",
+            "module": "components/breadcrumb-item/breadcrumb-item.js"
           }
         }
       ]
@@ -1318,197 +1484,31 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/breadcrumb-item/breadcrumb-item.js",
+      "path": "components/button-group/button-group.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SynBreadcrumbItem",
+          "name": "SynButtonGroup",
           "cssParts": [
             {
               "description": "The component's base wrapper.",
               "name": "base"
-            },
-            {
-              "description": "The breadcrumb item's label.",
-              "name": "label"
-            },
-            {
-              "description": "The container that wraps the prefix.",
-              "name": "prefix"
-            },
-            {
-              "description": "The container that wraps the suffix.",
-              "name": "suffix"
-            },
-            {
-              "description": "The container that wraps the separator.",
-              "name": "separator"
             }
           ],
           "slots": [
             {
-              "description": "The breadcrumb item's label.",
+              "description": "One or more `<syn-button>` elements to display in the button group.",
               "name": ""
-            },
-            {
-              "description": "An optional prefix, usually an icon or icon button.",
-              "name": "prefix"
-            },
-            {
-              "description": "An optional suffix, usually an icon or icon button.",
-              "name": "suffix"
-            },
-            {
-              "description": "The separator to use for the breadcrumb item. This will only change the separator for this item. If you want to change it for all items in the group, set the separator on `<syn-breadcrumb>` instead.",
-              "name": "separator"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "hasSlotController",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new HasSlotController(this, 'prefix', 'suffix')"
-            },
-            {
-              "kind": "field",
-              "name": "defaultSlot",
-              "type": {
-                "text": "HTMLSlotElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "renderType",
-              "type": {
-                "text": "'button' | 'link' | 'dropdown'"
-              },
-              "privacy": "private",
-              "default": "'button'"
-            },
-            {
-              "kind": "field",
-              "name": "href",
-              "type": {
-                "text": "string | undefined"
-              },
-              "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.",
-              "attribute": "href"
-            },
-            {
-              "kind": "field",
-              "name": "target",
-              "type": {
-                "text": "'_blank' | '_parent' | '_self' | '_top' | undefined"
-              },
-              "description": "Tells the browser where to open the link. Only used when `href` is set.",
-              "attribute": "target"
-            },
-            {
-              "kind": "field",
-              "name": "rel",
-              "type": {
-                "text": "string"
-              },
-              "default": "'noreferrer noopener'",
-              "description": "The `rel` attribute to use on the link. Only used when `href` is set.",
-              "attribute": "rel"
-            },
-            {
-              "kind": "method",
-              "name": "setRenderType",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "hrefChanged"
-            },
-            {
-              "kind": "method",
-              "name": "handleSlotChange"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "href",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered\ninternally. When unset, a button will be rendered instead.",
-              "fieldName": "href"
-            },
-            {
-              "name": "target",
-              "type": {
-                "text": "'_blank' | '_parent' | '_self' | '_top' | undefined"
-              },
-              "description": "Tells the browser where to open the link. Only used when `href` is set.",
-              "fieldName": "target"
-            },
-            {
-              "name": "rel",
-              "type": {
-                "text": "string"
-              },
-              "default": "'noreferrer noopener'",
-              "description": "The `rel` attribute to use on the link. Only used when `href` is set.",
-              "fieldName": "rel"
-            }
-          ],
-          "superclass": {
-            "name": "SynergyElement",
-            "module": "/src/internal/synergy-element.js"
-          },
-          "summary": "Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.",
-          "tagNameWithoutPrefix": "breadcrumb-item",
-          "tagName": "syn-breadcrumb-item",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb-item--docs\n * @status stable\n * @since 1.26.0\n *\n * @slot - The breadcrumb item's label.\n * @slot prefix - An optional prefix, usually an icon or icon button.\n * @slot suffix - An optional suffix, usually an icon or icon button.\n * @slot separator - The separator to use for the breadcrumb item. This will only change the separator for this item. If\n * you want to change it for all items in the group, set the separator on `<syn-breadcrumb>` instead.\n *\n * @csspart base - The component's base wrapper.\n * @csspart label - The breadcrumb item's label.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n * @csspart separator - The container that wraps the separator.\n */",
-          "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb-item--docs",
-          "status": "stable",
-          "since": "1.26.0"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "SynBreadcrumbItem",
-            "module": "components/breadcrumb-item/breadcrumb-item.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/button-group/button-group.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "SynButtonGroup",
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            }
-          ],
-          "slots": [
-            {
-              "description": "One or more `<syn-button>` elements to display in the button group.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "defaultSlot",
-              "type": {
-                "text": "HTMLSlotElement"
-              }
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "defaultSlot",
+              "type": {
+                "text": "HTMLSlotElement"
+              }
             },
             {
               "kind": "field",
@@ -1812,6 +1812,124 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/chart/chart.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SynChart",
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "chartContainer",
+              "type": {
+                "text": "HTMLDivElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "chartInstance",
+              "type": {
+                "text": "EChartsType"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "resizeObserver",
+              "type": {
+                "text": "ResizeObserver"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "config",
+              "type": {
+                "text": "ECConfig"
+              },
+              "default": "{}",
+              "description": "The ECharts configuration option object.\n\nThis property maps 1:1 to the ECharts `option` parameter passed to `setOption()`.\nConsult the [ECharts option documentation](https://echarts.apache.org/en/option.html)\nand assign the object directly to this property.\n\n> **Note:** Currently only **line charts** (`series[].type: 'line'`) are supported.\n> Support for additional chart types (bar, pie, etc.) will be added in future releases or can be requested.\n\nAssigning a new object completely replaces the previous chart configuration (`notMerge: true`).\nTo update only parts of the chart, access the underlying ECharts instance directly and\ncall `setOption()` with custom merge options.",
+              "propertyOnly": true
+            },
+            {
+              "kind": "field",
+              "name": "palette",
+              "type": {
+                "text": "SynChartPalette"
+              },
+              "default": "'categorical'",
+              "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.",
+              "attribute": "palette",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "applyPalette",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Resolves palette CSS custom properties to computed color values and applies them to the chart."
+            },
+            {
+              "kind": "method",
+              "name": "getInstance",
+              "return": {
+                "type": {
+                  "text": "EChartsType | undefined"
+                }
+              },
+              "description": "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)."
+            }
+          ],
+          "attributes": [
+            {
+              "name": "palette",
+              "type": {
+                "text": "SynChartPalette"
+              },
+              "default": "'categorical'",
+              "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.",
+              "fieldName": "palette"
+            }
+          ],
+          "superclass": {
+            "name": "SynergyElement",
+            "module": "/src/internal/synergy-element.js"
+          },
+          "summary": "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)",
+          "tagNameWithoutPrefix": "chart",
+          "tagName": "syn-chart",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary 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 * @documentation https://synergy-design-system.github.io/?path=/docs/charting-syn-chart--docs\n * @status experimental\n * @since 0.0.0\n *\n * @csspart base - The component's base wrapper.\n */",
+          "documentation": "https://synergy-design-system.github.io/?path=/docs/charting-syn-chart--docs",
+          "status": "experimental",
+          "since": "0.0.0"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SynChart",
+            "module": "components/chart/chart.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/checkbox/checkbox.js",
@@ -7915,6 +8033,12 @@
               },
               "default": "false"
             },
+            {
+              "kind": "field",
+              "name": "checkmarkStyledItems",
+              "privacy": "private",
+              "default": "new Set<SynMenuItem>()"
+            },
             {
               "kind": "method",
               "name": "handleUpdateCheckmarks",
@@ -7928,20 +8052,46 @@
                 }
               ]
             },
-            {
-              "kind": "field",
-              "name": "updateCheckMarksByChildPropChange",
-              "privacy": "private"
-            },
             {
               "kind": "method",
-              "name": "handleClick",
+              "name": "syncCheckmarkVisibility",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "event",
+                  "name": "items",
                   "type": {
-                    "text": "MouseEvent"
+                    "text": "SynMenuItem[]"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "updateCheckMarksByChildPropChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "getMenuItemFromEvent",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
                   }
                 }
               ]
@@ -7989,6 +8139,24 @@
                   }
                 }
               ]
+            },
+            {
+              "kind": "method",
+              "name": "getMenuItemsFromElement",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "SynMenuItem[]"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ]
             }
           ],
           "events": [
@@ -8212,11 +8380,6 @@
               "name": "handleHostClick",
               "privacy": "private"
             },
-            {
-              "kind": "field",
-              "name": "handleMouseOver",
-              "privacy": "private"
-            },
             {
               "kind": "method",
               "name": "handleCheckedChange"
@@ -12774,92 +12937,114 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/side-nav/side-nav.js",
+      "path": "components/select/select.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SynSideNav",
-          "cssProperties": [
-            {
-              "description": "The width of the side-nav if in open state",
-              "name": "--side-nav-open-width"
-            }
-          ],
+          "name": "SynSelect",
           "cssParts": [
             {
-              "description": "The components base wrapper",
-              "name": "base"
+              "description": "The form control that wraps the label, input, and help text.",
+              "name": "form-control"
             },
             {
-              "description": "The drawer that is used under the hood for creating the side-nav",
-              "name": "drawer"
+              "description": "The label's wrapper.",
+              "name": "form-control-label"
             },
             {
-              "description": "The components main content container",
-              "name": "content-container"
+              "description": "The select's wrapper.",
+              "name": "form-control-input"
             },
             {
-              "description": "The components main content",
-              "name": "content"
+              "description": "The help text's wrapper.",
+              "name": "form-control-help-text"
             },
             {
-              "description": "The components footer content container (where the footer slot content is rendered)",
-              "name": "footer-container"
+              "description": "The container the wraps the prefix, suffix, combobox, clear icon, and expand button.",
+              "name": "combobox"
             },
             {
-              "description": "The components footer divider",
-              "name": "footer-divider"
+              "description": "The container that wraps the prefix slot.",
+              "name": "prefix"
             },
             {
-              "description": "The components footer content",
-              "name": "footer"
+              "description": "The container that wraps the suffix slot.",
+              "name": "suffix"
             },
             {
-              "description": "The overlay that covers the screen behind the side-nav.",
-              "name": "overlay"
+              "description": "The element that displays the selected option's label, an `<input>` element.",
+              "name": "display-input"
             },
             {
-              "description": "The side-nav's panel (where the whole content is rendered).",
-              "name": "panel"
+              "description": "The listbox container where options are slotted.",
+              "name": "listbox"
             },
             {
-              "description": "The side-nav's body (where the default slot content is rendered)",
-              "name": "body"
+              "description": "The container that houses option tags when `multiselect` is used.",
+              "name": "tags"
             },
             {
-              "description": "The drawer's base wrapper",
-              "name": "drawer__base"
+              "description": "The individual tags that represent each multiselect option.",
+              "name": "tag"
             },
             {
-              "description": "The nav-item to toggle open state for variant=\"sticky\"",
-              "name": "toggle-nav-item"
+              "description": "The tag's base part.",
+              "name": "tag__base"
             },
             {
-              "description": "The icon of the toggle nav-item for variant=\"sticky\"",
-              "name": "toggle-icon"
+              "description": "The tag's content part.",
+              "name": "tag__content"
             },
             {
-              "description": "The label of the toggle nav-item for variant=\"sticky\".",
-              "name": "toggle-label"
+              "description": "The tag's remove button.",
+              "name": "tag__remove-button"
+            },
+            {
+              "description": "The tag's remove button base part.",
+              "name": "tag__remove-button__base"
+            },
+            {
+              "description": "The clear button.",
+              "name": "clear-button"
+            },
+            {
+              "description": "The container that wraps the expand icon.",
+              "name": "expand-icon"
+            },
+            {
+              "description": "The popup's exported `popup` part. Use this to target the tooltip's popup container.",
+              "name": "popup"
             }
           ],
           "slots": [
             {
-              "description": "The main content of the side-nav. Used for <syn-nav-item /> elements.",
+              "description": "The listbox options. Must be `<syn-option>` elements. You can use `<syn-divider>` to group items visually.",
               "name": ""
             },
             {
-              "description": "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.",
-              "name": "footer"
+              "description": "The input's label. Alternatively, you can use the `label` attribute.",
+              "name": "label"
             },
             {
-              "description": "The label of the toggle nav-item for variant=\"sticky\".",
-              "name": "toggle-label"
+              "description": "Used to prepend a presentational icon or similar element to the combobox.",
+              "name": "prefix"
             },
             {
-              "description": "An icon to use in lieu of the default icon for the toggle nav-item for variant=\"sticky\".",
-              "name": "toggle-icon"
+              "description": "Used to append a presentational icon or similar element to the combobox.",
+              "name": "suffix"
+            },
+            {
+              "description": "An icon to use in lieu of the default clear icon.",
+              "name": "clear-icon"
+            },
+            {
+              "description": "The icon to show when the control is expanded and collapsed. Rotates on open and close.",
+              "name": "expand-icon"
+            },
+            {
+              "description": "Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.",
+              "name": "help-text"
             }
           ],
           "members": [
@@ -12870,14 +13055,21 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{ 'syn-divider': SynDivider, 'syn-drawer': SynDrawer, 'syn-icon': SynIcon, 'syn-nav-item': SynNavItem, }"
+              "default": "{ 'syn-icon': SynIcon, 'syn-popup': SynPopup, 'syn-tag': SynTag }"
+            },
+            {
+              "kind": "field",
+              "name": "formControlController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new FormControlController(this, { assumeInteractionOn: ['syn-blur', 'syn-input'] })"
             },
             {
               "kind": "field",
               "name": "hasSlotController",
               "privacy": "private",
               "readonly": true,
-              "default": "new HasSlotController(this, '[default]', 'footer')"
+              "default": "new HasSlotController(this, 'help-text', 'label')"
             },
             {
               "kind": "field",
@@ -12888,1261 +13080,1232 @@
             },
             {
               "kind": "field",
-              "name": "timeout",
+              "name": "typeToSelectString",
               "type": {
-                "text": "NodeJS.Timeout"
+                "text": "string"
               },
-              "privacy": "private"
+              "privacy": "private",
+              "default": "''"
             },
             {
               "kind": "field",
-              "name": "isAnimationActive",
+              "name": "typeToSelectTimeout",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "privacy": "private",
-              "default": "false",
-              "description": "Current animation active state"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "drawer",
+              "name": "closeWatcher",
               "type": {
-                "text": "SynDrawer"
+                "text": "CloseWatcher | null"
               },
-              "privacy": "private",
-              "description": "Reference to the drawer"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "open",
+              "name": "resizeObserver",
               "type": {
-                "text": "boolean"
+                "text": "ResizeObserver"
               },
-              "default": "false",
-              "description": "Indicates whether or not the side-nav is open.\nYou can toggle this attribute to show and hide the side-nav, or you can use the `show()` and\n`hide()` methods and this attribute will reflect the side-nav's open state.\n\nDepending on the \"variant\" attribute, the behavior will differ.\n\n__Default__:\nWith `open` will show the side-nav with an overlay.\nWithout `open`, the side-nav will be hidden.\n\n__Rail__:\nWith `open` will show the whole side-nav with an overlay for touch devices\nor without an overlay for non-touch devices.\nWithout `open`, the side-nav will only show the prefix of nav-item's.\n\n__Sticky__:\nWith `open` will show the whole side-nav with an overlay for touch devices\nor without an overlay for non-touch devices.\nWithout `open`, the side-nav will only show the prefix of nav-item's.",
-              "attribute": "open",
-              "reflects": true
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "variant",
+              "name": "selectedOptionObserver",
               "type": {
-                "text": "'default' | 'rail' | 'sticky'"
+                "text": "MutationObserver"
               },
-              "default": "'default'",
-              "description": "The variant that should be used to show the side navigation.\n\nThe following variants are supported:\n- **default** (default): Always shows the whole content and additionally an overlay.\nThis makes especially sense for applications, where you navigate to a place and stay\nthere for a longer time.\n- **rail**: Only show the prefix of navigation items in closed state.\nThis will open on hover on the rail navigation.\nOn touch devices the navigation opens on click and shows an overlay.\nNote: The rail variant is only an option if all Navigation Items on the first level\nhave an Icon.\nIf this is not the case you should use a burger navigation.\n- **sticky**: The side-nav has a pin button to show the side-nav in small (icon only)\nand full width. This variant is only possible for non-nested navigation items.\nNote: The sticky variant is only an option if all Navigation Items on the first level\nhave an Icon and if there are only \"first level\" items.",
-              "attribute": "variant",
-              "reflects": true
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "noFocusTrapping",
+              "name": "isUserInput",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "description": "By default, the side-nav traps the focus if in variant=\"default\" and open.\nTo disable the focus trapping, set this attribute.",
-              "attribute": "no-focus-trapping",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "setDelayedCallback",
               "privacy": "private",
-              "parameters": [
-                {
-                  "name": "callback",
-                  "type": {
-                    "text": "() => void"
-                  }
-                }
-              ]
+              "default": "false"
             },
             {
-              "kind": "method",
-              "name": "handleMouseEnter",
-              "privacy": "private"
+              "kind": "field",
+              "name": "popup",
+              "type": {
+                "text": "SynPopup"
+              }
             },
             {
-              "kind": "method",
-              "name": "handleMouseLeave",
-              "privacy": "private"
+              "kind": "field",
+              "name": "combobox",
+              "type": {
+                "text": "HTMLSlotElement"
+              }
             },
             {
-              "kind": "method",
-              "name": "handleRequestClose",
-              "privacy": "private"
+              "kind": "field",
+              "name": "displayInput",
+              "type": {
+                "text": "HTMLInputElement"
+              }
             },
             {
-              "kind": "method",
-              "name": "addMouseListener",
-              "privacy": "private"
+              "kind": "field",
+              "name": "valueInput",
+              "type": {
+                "text": "HTMLInputElement"
+              }
             },
             {
-              "kind": "method",
-              "name": "removeMouseListener",
-              "privacy": "private"
+              "kind": "field",
+              "name": "listbox",
+              "type": {
+                "text": "HTMLSlotElement"
+              }
             },
             {
-              "kind": "method",
-              "name": "setDrawerAnimations",
-              "privacy": "private"
+              "kind": "field",
+              "name": "tagContainer",
+              "type": {
+                "text": "HTMLDivElement"
+              }
             },
             {
-              "kind": "method",
-              "name": "handleVariantChange"
+              "kind": "field",
+              "name": "hasFocus",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
             },
             {
-              "kind": "method",
-              "name": "handleOpenChange"
+              "kind": "field",
+              "name": "displayLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "''"
             },
             {
-              "kind": "method",
-              "name": "handleFocusTrapping"
+              "kind": "field",
+              "name": "currentOption",
+              "type": {
+                "text": "SynOption"
+              }
             },
             {
-              "kind": "method",
-              "name": "show",
-              "description": "Shows the side-nav."
+              "kind": "field",
+              "name": "selectedOptions",
+              "type": {
+                "text": "SynOption[]"
+              },
+              "default": "[]"
             },
             {
-              "kind": "method",
-              "name": "hide",
-              "description": "Hides the side-nav"
+              "kind": "field",
+              "name": "valueHasChanged",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
             },
             {
-              "kind": "method",
-              "name": "toggleOpenState",
-              "privacy": "private"
-            }
-          ],
-          "events": [
+              "kind": "field",
+              "name": "delimiter",
+              "type": {
+                "text": "string"
+              },
+              "default": "' '",
+              "description": "The delimiter to use when setting the value when `multiple` is enabled.\nThe default is a space, but you can set it to a comma or other character.",
+              "attribute": "delimiter"
+            },
             {
-              "description": "Emitted when the side-nav opens.",
-              "name": "syn-show",
-              "reactName": "onSynShow",
-              "eventName": "SynShowEvent"
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The name of the select, submitted as a name/value pair with form data.",
+              "attribute": "name"
             },
             {
-              "description": "Emitted after the side-nav opens and all animations are complete.",
-              "name": "syn-after-show",
-              "reactName": "onSynAfterShow",
-              "eventName": "SynAfterShowEvent"
+              "kind": "field",
+              "name": "_value",
+              "type": {
+                "text": "string | number | Array<string | number>"
+              },
+              "privacy": "private",
+              "default": "''"
             },
             {
-              "description": "Emitted when the side-nav closes.",
-              "name": "syn-hide",
-              "reactName": "onSynHide",
-              "eventName": "SynHideEvent"
+              "kind": "field",
+              "name": "value",
+              "description": "The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the\nvalue attribute will be a space-delimited list of values based on the options selected, and the value property will\nbe an array. **For this reason, values must not contain spaces.**"
             },
             {
-              "description": "Emitted after the side-nav closes and all animations are complete.",
-              "name": "syn-after-hide",
-              "reactName": "onSynAfterHide",
-              "eventName": "SynAfterHideEvent"
-            }
-          ],
-          "attributes": [
+              "kind": "field",
+              "name": "defaultValue",
+              "type": {
+                "text": "string | number | Array<string | number>"
+              },
+              "default": "''",
+              "description": "The default value of the form control. Primarily used for resetting the form control.",
+              "attribute": "value"
+            },
             {
-              "name": "open",
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The select's size.",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "placeholder",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Placeholder text to show as a hint when the select is empty.",
+              "attribute": "placeholder"
+            },
+            {
+              "kind": "field",
+              "name": "multiple",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Indicates whether or not the side-nav is open.\nYou can toggle this attribute to show and hide the side-nav, or you can use the `show()` and\n`hide()` methods and this attribute will reflect the side-nav's open state.\n\nDepending on the \"variant\" attribute, the behavior will differ.\n\n__Default__:\nWith `open` will show the side-nav with an overlay.\nWithout `open`, the side-nav will be hidden.\n\n__Rail__:\nWith `open` will show the whole side-nav with an overlay for touch devices\nor without an overlay for non-touch devices.\nWithout `open`, the side-nav will only show the prefix of nav-item's.\n\n__Sticky__:\nWith `open` will show the whole side-nav with an overlay for touch devices\nor without an overlay for non-touch devices.\nWithout `open`, the side-nav will only show the prefix of nav-item's.",
-              "fieldName": "open"
+              "description": "Allows more than one option to be selected.",
+              "attribute": "multiple",
+              "reflects": true
             },
             {
-              "name": "variant",
+              "kind": "field",
+              "name": "maxOptionsVisible",
               "type": {
-                "text": "'default' | 'rail' | 'sticky'"
+                "text": "number"
               },
-              "default": "'default'",
-              "description": "The variant that should be used to show the side navigation.\n\nThe following variants are supported:\n- **default** (default): Always shows the whole content and additionally an overlay.\nThis makes especially sense for applications, where you navigate to a place and stay\nthere for a longer time.\n- **rail**: Only show the prefix of navigation items in closed state.\nThis will open on hover on the rail navigation.\nOn touch devices the navigation opens on click and shows an overlay.\nNote: The rail variant is only an option if all Navigation Items on the first level\nhave an Icon.\nIf this is not the case you should use a burger navigation.\n- **sticky**: The side-nav has a pin button to show the side-nav in small (icon only)\nand full width. This variant is only possible for non-nested navigation items.\nNote: The sticky variant is only an option if all Navigation Items on the first level\nhave an Icon and if there are only \"first level\" items.",
-              "fieldName": "variant"
+              "default": "3",
+              "description": "The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.",
+              "attribute": "max-options-visible"
             },
             {
-              "name": "no-focus-trapping",
+              "kind": "field",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "By default, the side-nav traps the focus if in variant=\"default\" and open.\nTo disable the focus trapping, set this attribute.",
-              "fieldName": "noFocusTrapping"
-            }
-          ],
-          "superclass": {
-            "name": "SynergyElement",
-            "module": "/src/internal/synergy-element.js"
-          },
-          "summary": "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.",
-          "tagNameWithoutPrefix": "side-nav",
-          "tagName": "syn-side-nav",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary The <syn-side-nav /> element contains secondary navigation and fits below the header.\n * It can be used to group multiple navigation items (<syn-nav-item />s) together.\n *\n * @example\n * <syn-side-nav open>\n *  <syn-nav-item >Item 1</syn-nav-item>\n *  <syn-nav-item divider>Item 2</syn-nav-item>\n * </syn-side-nav>\n *\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-side-nav--docs\n * @status stable\n * @since 1.15.0\n *\n * @dependency syn-divider\n * @dependency syn-drawer\n * @dependency syn-icon\n * @dependency syn-nav-item\n *\n * @slot - The main content of the side-nav. Used for <syn-nav-item /> elements.\n * @slot footer - The footer content of the side-nav. Used for <syn-nav-item /> elements.\n *    Please avoid having to many nav-items as it can massively influence the user experience.\n * @slot toggle-label - The label of the toggle nav-item for variant=\"sticky\".\n * @slot toggle-icon - An icon to use in lieu of the default icon for the toggle nav-item\n * for variant=\"sticky\".\n *\n * @event syn-show - Emitted when the side-nav opens.\n * @event syn-after-show - Emitted after the side-nav opens and all animations are complete.\n * @event syn-hide - Emitted when the side-nav closes.\n * @event syn-after-hide - Emitted after the side-nav closes and all animations are complete.\n *\n * @csspart base - The components base wrapper\n * @csspart drawer - The drawer that is used under the hood for creating the side-nav\n * @csspart content-container - The components main content container\n * @csspart content - The components main content\n * @csspart footer-container - The components footer content container\n  (where the footer slot content is rendered)\n * @csspart footer-divider - The components footer divider\n * @csspart footer - The components footer content\n * @csspart overlay - The overlay that covers the screen behind the side-nav.\n * @csspart panel - The side-nav's panel (where the whole content is rendered).\n * @csspart body - The side-nav's body (where the default slot content is rendered)\n * @csspart drawer__base - The drawer's base wrapper\n * @csspart toggle-nav-item - The nav-item to toggle open state for variant=\"sticky\"\n * @csspart toggle-icon - The icon of the toggle nav-item for variant=\"sticky\"\n * @csspart toggle-label - The label of the toggle nav-item for variant=\"sticky\".\n\n * @cssproperty  --side-nav-open-width - The width of the side-nav if in open state\n *\n * @animation sideNav.showNonRail - The animation to use when showing the side-nav\n *  in variant=\"default\".\n * @animation sideNav.showRail - The animation to use when showing the side-nav in variant=\"rail\"\n *  and variant=\"sticky\".\n * @animation sideNav.hideNonRail - The animation to use when hiding the side-nav\n *  in variant=\"default\".\n * @animation sideNav.hideRail - The animation to use when hiding the side-nav in variant=\"rail\"\n *  and variant=\"sticky\".\n * @animation sideNav.overlay.show - The animation to use when showing the side-nav's overlay.\n * @animation sideNav.overlay.hide - The animation to use when hiding the side-nav's overlay.\n */",
-          "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-side-nav--docs",
-          "status": "stable",
-          "since": "1.15.0",
-          "dependencies": [
-            "syn-divider",
-            "syn-drawer",
-            "syn-icon",
-            "syn-nav-item"
-          ],
-          "animations": [
+              "description": "Disables the select control.",
+              "attribute": "disabled",
+              "reflects": true
+            },
             {
-              "name": "sideNav.showNonRail",
-              "description": "The animation to use when showing the side-nav in variant=\"default\"."
+              "kind": "field",
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Sets the select to a readonly state.",
+              "attribute": "readonly",
+              "reflects": true
             },
             {
-              "name": "sideNav.showRail",
-              "description": "The animation to use when showing the side-nav in variant=\"rail\" and variant=\"sticky\"."
+              "kind": "field",
+              "name": "clearable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Adds a clear button when the select is not empty.",
+              "attribute": "clearable"
             },
             {
-              "name": "sideNav.hideNonRail",
-              "description": "The animation to use when hiding the side-nav in variant=\"default\"."
+              "kind": "field",
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the select's open state.",
+              "attribute": "open",
+              "reflects": true
             },
             {
-              "name": "sideNav.hideRail",
-              "description": "The animation to use when hiding the side-nav in variant=\"rail\" and variant=\"sticky\"."
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The select's label. If you need to display HTML, use the `label` slot instead.",
+              "attribute": "label"
             },
             {
-              "name": "sideNav.overlay.show",
-              "description": "The animation to use when showing the side-nav's overlay."
+              "kind": "field",
+              "name": "placement",
+              "type": {
+                "text": "'top' | 'bottom'"
+              },
+              "default": "'bottom'",
+              "description": "The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.",
+              "attribute": "placement",
+              "reflects": true
             },
             {
-              "name": "sideNav.overlay.hide",
-              "description": "The animation to use when hiding the side-nav's overlay."
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "SynSideNav",
-            "module": "components/side-nav/side-nav.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/select/select.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "SynSelect",
-          "cssParts": [
-            {
-              "description": "The form control that wraps the label, input, and help text.",
-              "name": "form-control"
-            },
-            {
-              "description": "The label's wrapper.",
-              "name": "form-control-label"
+              "kind": "field",
+              "name": "helpText",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The select's help text. If you need to display HTML, use the `help-text` slot instead.",
+              "attribute": "help-text"
             },
             {
-              "description": "The select's wrapper.",
-              "name": "form-control-input"
+              "kind": "field",
+              "name": "form",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "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.",
+              "attribute": "form",
+              "reflects": true
             },
             {
-              "description": "The help text's wrapper.",
-              "name": "form-control-help-text"
+              "kind": "field",
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The select's required attribute.",
+              "attribute": "required",
+              "reflects": true
             },
             {
-              "description": "The container the wraps the prefix, suffix, combobox, clear icon, and expand button.",
-              "name": "combobox"
+              "kind": "field",
+              "name": "getTag",
+              "type": {
+                "text": "(option: SynOption, index: number) => TemplateResult | string | HTMLElement"
+              },
+              "description": "A function that customizes the tags to be rendered when multiple=true. The first argument is the option, the second\nis the current tag's index.  The function should return either a Lit TemplateResult or a string containing trusted HTML of the symbol to render at\nthe specified value.",
+              "attribute": "getTag"
             },
             {
-              "description": "The container that wraps the prefix slot.",
-              "name": "prefix"
+              "kind": "field",
+              "name": "validity",
+              "description": "Gets the validity state object",
+              "readonly": true
             },
             {
-              "description": "The container that wraps the suffix slot.",
-              "name": "suffix"
+              "kind": "field",
+              "name": "validationMessage",
+              "description": "Gets the validation message",
+              "readonly": true
             },
             {
-              "description": "The element that displays the selected option's label, an `<input>` element.",
-              "name": "display-input"
+              "kind": "method",
+              "name": "enableResizeObserver",
+              "privacy": "private"
             },
             {
-              "description": "The listbox container where options are slotted.",
-              "name": "listbox"
+              "kind": "method",
+              "name": "observeSelectedOptions",
+              "privacy": "private"
             },
             {
-              "description": "The container that houses option tags when `multiselect` is used.",
-              "name": "tags"
+              "kind": "method",
+              "name": "addOpenListeners",
+              "privacy": "private"
             },
             {
-              "description": "The individual tags that represent each multiselect option.",
-              "name": "tag"
+              "kind": "method",
+              "name": "removeOpenListeners",
+              "privacy": "private"
             },
             {
-              "description": "The tag's base part.",
-              "name": "tag__base"
+              "kind": "method",
+              "name": "handleFocus",
+              "privacy": "private"
             },
             {
-              "description": "The tag's content part.",
-              "name": "tag__content"
+              "kind": "method",
+              "name": "handleBlur",
+              "privacy": "private"
             },
             {
-              "description": "The tag's remove button.",
-              "name": "tag__remove-button"
+              "kind": "field",
+              "name": "handleDocumentFocusIn",
+              "privacy": "private"
             },
             {
-              "description": "The tag's remove button base part.",
-              "name": "tag__remove-button__base"
+              "kind": "field",
+              "name": "handleDocumentKeyDown",
+              "privacy": "private"
             },
             {
-              "description": "The clear button.",
-              "name": "clear-button"
+              "kind": "field",
+              "name": "handleDocumentMouseDown",
+              "privacy": "private"
             },
             {
-              "description": "The container that wraps the expand icon.",
-              "name": "expand-icon"
+              "kind": "method",
+              "name": "handleFormControlClick",
+              "privacy": "private"
             },
             {
-              "description": "The popup's exported `popup` part. Use this to target the tooltip's popup container.",
-              "name": "popup"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The listbox options. Must be `<syn-option>` elements. You can use `<syn-divider>` to group items visually.",
-              "name": ""
+              "kind": "method",
+              "name": "handleLabelClick",
+              "privacy": "private"
             },
             {
-              "description": "The input's label. Alternatively, you can use the `label` attribute.",
-              "name": "label"
+              "kind": "method",
+              "name": "handleComboboxMouseDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
             },
             {
-              "description": "Used to prepend a presentational icon or similar element to the combobox.",
-              "name": "prefix"
+              "kind": "method",
+              "name": "handleComboboxKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
             },
             {
-              "description": "Used to append a presentational icon or similar element to the combobox.",
-              "name": "suffix"
+              "kind": "method",
+              "name": "handleClearClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
             },
             {
-              "description": "An icon to use in lieu of the default clear icon.",
-              "name": "clear-icon"
+              "kind": "method",
+              "name": "handleClearMouseDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
             },
             {
-              "description": "The icon to show when the control is expanded and collapsed. Rotates on open and close.",
-              "name": "expand-icon"
+              "kind": "method",
+              "name": "handleOptionClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
             },
             {
-              "description": "Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.",
-              "name": "help-text"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "dependencies",
-              "type": {
-                "text": "object"
-              },
-              "static": true,
-              "default": "{ 'syn-icon': SynIcon, 'syn-popup': SynPopup, 'syn-tag': SynTag }"
+              "kind": "method",
+              "name": "handleDefaultSlotChange",
+              "privacy": "public"
             },
             {
-              "kind": "field",
-              "name": "formControlController",
+              "kind": "method",
+              "name": "handleTagRemove",
               "privacy": "private",
-              "readonly": true,
-              "default": "new FormControlController(this, { assumeInteractionOn: ['syn-blur', 'syn-input'] })"
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "SynRemoveEvent"
+                  }
+                },
+                {
+                  "name": "option",
+                  "type": {
+                    "text": "SynOption"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "hasSlotController",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new HasSlotController(this, 'help-text', 'label')"
+              "kind": "method",
+              "name": "getAllOptions",
+              "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new LocalizeController(this)"
+              "kind": "method",
+              "name": "getFirstOption",
+              "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "typeToSelectString",
-              "type": {
-                "text": "string"
-              },
+              "kind": "method",
+              "name": "setCurrentOption",
               "privacy": "private",
-              "default": "''"
+              "parameters": [
+                {
+                  "name": "option",
+                  "type": {
+                    "text": "SynOption | null"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "typeToSelectTimeout",
-              "type": {
-                "text": "number"
-              },
-              "privacy": "private"
+              "kind": "method",
+              "name": "setSelectedOptions",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "option",
+                  "type": {
+                    "text": "SynOption | SynOption[]"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "closeWatcher",
-              "type": {
-                "text": "CloseWatcher | null"
-              },
-              "privacy": "private"
+              "kind": "method",
+              "name": "toggleOptionSelection",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "option",
+                  "type": {
+                    "text": "SynOption"
+                  }
+                },
+                {
+                  "name": "force",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "resizeObserver",
-              "type": {
-                "text": "ResizeObserver"
-              },
+              "kind": "method",
+              "name": "selectionChanged",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "selectedOptionObserver",
-              "type": {
-                "text": "MutationObserver"
-              },
-              "privacy": "private"
+              "name": "tags",
+              "privacy": "protected",
+              "readonly": true
             },
             {
-              "kind": "field",
-              "name": "isUserInput",
-              "type": {
-                "text": "boolean"
-              },
+              "kind": "method",
+              "name": "handleInvalid",
               "privacy": "private",
-              "default": "false"
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "popup",
-              "type": {
-                "text": "SynPopup"
-              }
+              "kind": "method",
+              "name": "handleDelimiterChange"
             },
             {
-              "kind": "field",
-              "name": "combobox",
-              "type": {
-                "text": "HTMLSlotElement"
-              }
+              "kind": "method",
+              "name": "handleDisabledChange"
             },
             {
-              "kind": "field",
-              "name": "displayInput",
-              "type": {
-                "text": "HTMLInputElement"
-              }
+              "kind": "method",
+              "name": "handleValueChange"
             },
             {
-              "kind": "field",
-              "name": "valueInput",
-              "type": {
-                "text": "HTMLInputElement"
-              }
+              "kind": "method",
+              "name": "handleOpenChange"
             },
             {
-              "kind": "field",
-              "name": "listbox",
-              "type": {
-                "text": "HTMLSlotElement"
-              }
+              "kind": "method",
+              "name": "show",
+              "description": "Shows the listbox."
             },
             {
-              "kind": "field",
-              "name": "tagContainer",
-              "type": {
-                "text": "HTMLDivElement"
-              }
+              "kind": "method",
+              "name": "hide",
+              "description": "Hides the listbox."
             },
             {
-              "kind": "field",
-              "name": "hasFocus",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
+              "kind": "method",
+              "name": "checkValidity",
+              "description": "Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid."
             },
             {
-              "kind": "field",
-              "name": "displayLabel",
-              "type": {
-                "text": "string"
+              "kind": "method",
+              "name": "getForm",
+              "return": {
+                "type": {
+                  "text": "HTMLFormElement | null"
+                }
               },
-              "default": "''"
+              "description": "Gets the associated form, if one exists."
             },
             {
-              "kind": "field",
-              "name": "currentOption",
-              "type": {
-                "text": "SynOption"
-              }
+              "kind": "method",
+              "name": "reportValidity",
+              "description": "Checks for validity and shows the browser's validation message if the control is invalid."
             },
             {
-              "kind": "field",
-              "name": "selectedOptions",
-              "type": {
-                "text": "SynOption[]"
-              },
-              "default": "[]"
+              "kind": "method",
+              "name": "setCustomValidity",
+              "parameters": [
+                {
+                  "name": "message",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Sets a custom validation message. Pass an empty string to restore validity."
             },
             {
-              "kind": "field",
-              "name": "valueHasChanged",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "description": "Sets focus on the control."
             },
             {
-              "kind": "field",
-              "name": "delimiter",
-              "type": {
-                "text": "string"
-              },
-              "default": "' '",
-              "description": "The delimiter to use when setting the value when `multiple` is enabled.\nThe default is a space, but you can set it to a comma or other character.",
-              "attribute": "delimiter"
-            },
+              "kind": "method",
+              "name": "blur",
+              "description": "Removes focus from the control."
+            }
+          ],
+          "events": [
             {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The name of the select, submitted as a name/value pair with form data.",
-              "attribute": "name"
+              "description": "Emitted when the control's value changes.",
+              "name": "syn-change",
+              "reactName": "onSynChange",
+              "eventName": "SynChangeEvent"
             },
             {
-              "kind": "field",
-              "name": "_value",
-              "type": {
-                "text": "string | number | Array<string | number>"
-              },
-              "privacy": "private",
-              "default": "''"
+              "description": "Emitted when the control's value is cleared.",
+              "name": "syn-clear",
+              "reactName": "onSynClear",
+              "eventName": "SynClearEvent"
             },
             {
-              "kind": "field",
-              "name": "value",
-              "description": "The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the\nvalue attribute will be a space-delimited list of values based on the options selected, and the value property will\nbe an array. **For this reason, values must not contain spaces.**"
+              "description": "Emitted when the control receives input.",
+              "name": "syn-input",
+              "reactName": "onSynInput",
+              "eventName": "SynInputEvent"
             },
             {
-              "kind": "field",
-              "name": "defaultValue",
-              "type": {
-                "text": "string | number | Array<string | number>"
-              },
-              "default": "''",
-              "description": "The default value of the form control. Primarily used for resetting the form control.",
-              "attribute": "value"
+              "description": "Emitted when the control gains focus.",
+              "name": "syn-focus",
+              "reactName": "onSynFocus",
+              "eventName": "SynFocusEvent"
             },
             {
-              "kind": "field",
-              "name": "size",
-              "type": {
+              "description": "Emitted when the control loses focus.",
+              "name": "syn-blur",
+              "reactName": "onSynBlur",
+              "eventName": "SynBlurEvent"
+            },
+            {
+              "description": "Emitted when the select's menu opens.",
+              "name": "syn-show",
+              "reactName": "onSynShow",
+              "eventName": "SynShowEvent"
+            },
+            {
+              "description": "Emitted after the select's menu opens and all animations are complete.",
+              "name": "syn-after-show",
+              "reactName": "onSynAfterShow",
+              "eventName": "SynAfterShowEvent"
+            },
+            {
+              "description": "Emitted when the select's menu closes.",
+              "name": "syn-hide",
+              "reactName": "onSynHide",
+              "eventName": "SynHideEvent"
+            },
+            {
+              "description": "Emitted after the select's menu closes and all animations are complete.",
+              "name": "syn-after-hide",
+              "reactName": "onSynAfterHide",
+              "eventName": "SynAfterHideEvent"
+            },
+            {
+              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied.",
+              "name": "syn-invalid",
+              "reactName": "onSynInvalid",
+              "eventName": "SynInvalidEvent"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "delimiter",
+              "type": {
+                "text": "string"
+              },
+              "default": "' '",
+              "description": "The delimiter to use when setting the value when `multiple` is enabled.\nThe default is a space, but you can set it to a comma or other character.",
+              "fieldName": "delimiter"
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The name of the select, submitted as a name/value pair with form data.",
+              "fieldName": "name"
+            },
+            {
+              "name": "size",
+              "type": {
                 "text": "'small' | 'medium' | 'large'"
               },
               "default": "'medium'",
               "description": "The select's size.",
-              "attribute": "size",
-              "reflects": true
+              "fieldName": "size"
             },
             {
-              "kind": "field",
               "name": "placeholder",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "Placeholder text to show as a hint when the select is empty.",
-              "attribute": "placeholder"
+              "fieldName": "placeholder"
             },
             {
-              "kind": "field",
               "name": "multiple",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Allows more than one option to be selected.",
-              "attribute": "multiple",
-              "reflects": true
+              "fieldName": "multiple"
             },
             {
-              "kind": "field",
-              "name": "maxOptionsVisible",
+              "name": "max-options-visible",
               "type": {
                 "text": "number"
               },
               "default": "3",
               "description": "The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.",
-              "attribute": "max-options-visible"
+              "fieldName": "maxOptionsVisible"
             },
             {
-              "kind": "field",
               "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Disables the select control.",
-              "attribute": "disabled",
-              "reflects": true
+              "fieldName": "disabled"
             },
             {
-              "kind": "field",
               "name": "readonly",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Sets the select to a readonly state.",
-              "attribute": "readonly",
-              "reflects": true
+              "fieldName": "readonly"
             },
             {
-              "kind": "field",
               "name": "clearable",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Adds a clear button when the select is not empty.",
-              "attribute": "clearable"
+              "fieldName": "clearable"
             },
             {
-              "kind": "field",
               "name": "open",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the select's open state.",
-              "attribute": "open",
-              "reflects": true
+              "fieldName": "open"
             },
             {
-              "kind": "field",
               "name": "label",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "The select's label. If you need to display HTML, use the `label` slot instead.",
-              "attribute": "label"
+              "fieldName": "label"
             },
             {
-              "kind": "field",
               "name": "placement",
               "type": {
                 "text": "'top' | 'bottom'"
               },
               "default": "'bottom'",
               "description": "The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.",
-              "attribute": "placement",
-              "reflects": true
+              "fieldName": "placement"
             },
             {
-              "kind": "field",
-              "name": "helpText",
+              "name": "help-text",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "The select's help text. If you need to display HTML, use the `help-text` slot instead.",
-              "attribute": "help-text"
+              "fieldName": "helpText"
             },
             {
-              "kind": "field",
               "name": "form",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "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.",
-              "attribute": "form",
-              "reflects": true
+              "fieldName": "form"
             },
             {
-              "kind": "field",
               "name": "required",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "The select's required attribute.",
-              "attribute": "required",
-              "reflects": true
+              "fieldName": "required"
             },
             {
-              "kind": "field",
               "name": "getTag",
               "type": {
                 "text": "(option: SynOption, index: number) => TemplateResult | string | HTMLElement"
               },
               "description": "A function that customizes the tags to be rendered when multiple=true. The first argument is the option, the second\nis the current tag's index.  The function should return either a Lit TemplateResult or a string containing trusted HTML of the symbol to render at\nthe specified value.",
-              "attribute": "getTag"
-            },
-            {
-              "kind": "field",
-              "name": "validity",
-              "description": "Gets the validity state object",
-              "readonly": true
-            },
-            {
-              "kind": "field",
-              "name": "validationMessage",
-              "description": "Gets the validation message",
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "enableResizeObserver",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "observeSelectedOptions",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "addOpenListeners",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "removeOpenListeners",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleFocus",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleBlur",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleDocumentFocusIn",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleDocumentKeyDown",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleDocumentMouseDown",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleFormControlClick",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleLabelClick",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleComboboxMouseDown",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "MouseEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleComboboxKeyDown",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleClearClick",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "MouseEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleClearMouseDown",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "MouseEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleOptionClick",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "MouseEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleDefaultSlotChange",
-              "privacy": "public"
-            },
-            {
-              "kind": "method",
-              "name": "handleTagRemove",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "SynRemoveEvent"
-                  }
-                },
-                {
-                  "name": "option",
-                  "type": {
-                    "text": "SynOption"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "getAllOptions",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "getFirstOption",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "setCurrentOption",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "option",
-                  "type": {
-                    "text": "SynOption | null"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "setSelectedOptions",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "option",
-                  "type": {
-                    "text": "SynOption | SynOption[]"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "toggleOptionSelection",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "option",
-                  "type": {
-                    "text": "SynOption"
-                  }
-                },
-                {
-                  "name": "force",
-                  "optional": true,
-                  "type": {
-                    "text": "boolean"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "selectionChanged",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "tags",
-              "privacy": "protected",
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "handleInvalid",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleDelimiterChange"
-            },
-            {
-              "kind": "method",
-              "name": "handleDisabledChange"
+              "fieldName": "getTag"
             },
             {
-              "kind": "method",
-              "name": "handleValueChange"
-            },
+              "name": "value",
+              "type": {
+                "text": "string | number | Array<string | number>"
+              },
+              "default": "''",
+              "description": "The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the\nvalue attribute will be a space-delimited list of values based on the options selected, and the value property will\nbe an array. **For this reason, values must not contain spaces.**",
+              "fieldName": "value"
+            }
+          ],
+          "superclass": {
+            "name": "SynergyElement",
+            "module": "/src/internal/synergy-element.js"
+          },
+          "summary": "Selects allow you to choose items from a menu of predefined options.",
+          "tagNameWithoutPrefix": "select",
+          "tagName": "syn-select",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Selects allow you to choose items from a menu of predefined options.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-select--docs\n * @status stable\n * @since 1.5.0\n *\n * @dependency syn-icon\n * @dependency syn-popup\n * @dependency syn-tag\n *\n * @slot - The listbox options. Must be `<syn-option>` elements. You can use `<syn-divider>` to group items visually.\n * @slot label - The input's label. Alternatively, you can use the `label` attribute.\n * @slot prefix - Used to prepend a presentational icon or similar element to the combobox.\n * @slot suffix - Used to append a presentational icon or similar element to the combobox.\n * @slot clear-icon - An icon to use in lieu of the default clear icon.\n * @slot expand-icon - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n *\n * @event syn-change - Emitted when the control's value changes.\n * @event syn-clear - Emitted when the control's value is cleared.\n * @event syn-input - Emitted when the control receives input.\n * @event syn-focus - Emitted when the control gains focus.\n * @event syn-blur - Emitted when the control loses focus.\n * @event syn-show - Emitted when the select's menu opens.\n * @event syn-after-show - Emitted after the select's menu opens and all animations are complete.\n * @event syn-hide - Emitted when the select's menu closes.\n * @event syn-after-hide - Emitted after the select's menu closes and all animations are complete.\n * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart form-control - The form control that wraps the label, input, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-input - The select's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart combobox - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.\n * @csspart prefix - The container that wraps the prefix slot.\n * @csspart suffix - The container that wraps the suffix slot.\n * @csspart display-input - The element that displays the selected option's label, an `<input>` element.\n * @csspart listbox - The listbox container where options are slotted.\n * @csspart tags - The container that houses option tags when `multiselect` is used.\n * @csspart tag - The individual tags that represent each multiselect option.\n * @csspart tag__base - The tag's base part.\n * @csspart tag__content - The tag's content part.\n * @csspart tag__remove-button - The tag's remove button.\n * @csspart tag__remove-button__base - The tag's remove button base part.\n * @csspart clear-button - The clear button.\n * @csspart expand-icon - The container that wraps the expand icon.\n * @csspart popup - The popup's exported `popup` part. Use this to target the tooltip's popup container.\n */",
+          "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-select--docs",
+          "status": "stable",
+          "since": "1.5.0",
+          "dependencies": [
+            "syn-icon",
+            "syn-popup",
+            "syn-tag"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SynSelect",
+            "module": "components/select/select.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/side-nav/side-nav.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SynSideNav",
+          "cssProperties": [
             {
-              "kind": "method",
-              "name": "handleOpenChange"
-            },
+              "description": "The width of the side-nav if in open state",
+              "name": "--side-nav-open-width"
+            }
+          ],
+          "cssParts": [
             {
-              "kind": "method",
-              "name": "show",
-              "description": "Shows the listbox."
+              "description": "The components base wrapper",
+              "name": "base"
             },
             {
-              "kind": "method",
-              "name": "hide",
-              "description": "Hides the listbox."
+              "description": "The drawer that is used under the hood for creating the side-nav",
+              "name": "drawer"
             },
             {
-              "kind": "method",
-              "name": "checkValidity",
-              "description": "Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid."
+              "description": "The components main content container",
+              "name": "content-container"
             },
             {
-              "kind": "method",
-              "name": "getForm",
-              "return": {
-                "type": {
-                  "text": "HTMLFormElement | null"
-                }
-              },
-              "description": "Gets the associated form, if one exists."
+              "description": "The components main content",
+              "name": "content"
             },
             {
-              "kind": "method",
-              "name": "reportValidity",
-              "description": "Checks for validity and shows the browser's validation message if the control is invalid."
+              "description": "The components footer content container (where the footer slot content is rendered)",
+              "name": "footer-container"
             },
             {
-              "kind": "method",
-              "name": "setCustomValidity",
-              "parameters": [
-                {
-                  "name": "message",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ],
-              "description": "Sets a custom validation message. Pass an empty string to restore validity."
+              "description": "The components footer divider",
+              "name": "footer-divider"
             },
             {
-              "kind": "method",
-              "name": "focus",
-              "parameters": [
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "FocusOptions"
-                  }
-                }
-              ],
-              "description": "Sets focus on the control."
+              "description": "The components footer content",
+              "name": "footer"
             },
             {
-              "kind": "method",
-              "name": "blur",
-              "description": "Removes focus from the control."
-            }
-          ],
-          "events": [
-            {
-              "description": "Emitted when the control's value changes.",
-              "name": "syn-change",
-              "reactName": "onSynChange",
-              "eventName": "SynChangeEvent"
+              "description": "The overlay that covers the screen behind the side-nav.",
+              "name": "overlay"
             },
             {
-              "description": "Emitted when the control's value is cleared.",
-              "name": "syn-clear",
-              "reactName": "onSynClear",
-              "eventName": "SynClearEvent"
+              "description": "The side-nav's panel (where the whole content is rendered).",
+              "name": "panel"
             },
             {
-              "description": "Emitted when the control receives input.",
-              "name": "syn-input",
-              "reactName": "onSynInput",
-              "eventName": "SynInputEvent"
+              "description": "The side-nav's body (where the default slot content is rendered)",
+              "name": "body"
             },
             {
-              "description": "Emitted when the control gains focus.",
-              "name": "syn-focus",
-              "reactName": "onSynFocus",
-              "eventName": "SynFocusEvent"
+              "description": "The drawer's base wrapper",
+              "name": "drawer__base"
             },
             {
-              "description": "Emitted when the control loses focus.",
-              "name": "syn-blur",
-              "reactName": "onSynBlur",
-              "eventName": "SynBlurEvent"
+              "description": "The nav-item to toggle open state for variant=\"sticky\"",
+              "name": "toggle-nav-item"
             },
             {
-              "description": "Emitted when the select's menu opens.",
-              "name": "syn-show",
-              "reactName": "onSynShow",
-              "eventName": "SynShowEvent"
+              "description": "The icon of the toggle nav-item for variant=\"sticky\"",
+              "name": "toggle-icon"
             },
             {
-              "description": "Emitted after the select's menu opens and all animations are complete.",
-              "name": "syn-after-show",
-              "reactName": "onSynAfterShow",
-              "eventName": "SynAfterShowEvent"
+              "description": "The label of the toggle nav-item for variant=\"sticky\".",
+              "name": "toggle-label"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The main content of the side-nav. Used for <syn-nav-item /> elements.",
+              "name": ""
             },
             {
-              "description": "Emitted when the select's menu closes.",
-              "name": "syn-hide",
-              "reactName": "onSynHide",
-              "eventName": "SynHideEvent"
+              "description": "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.",
+              "name": "footer"
             },
             {
-              "description": "Emitted after the select's menu closes and all animations are complete.",
-              "name": "syn-after-hide",
-              "reactName": "onSynAfterHide",
-              "eventName": "SynAfterHideEvent"
+              "description": "The label of the toggle nav-item for variant=\"sticky\".",
+              "name": "toggle-label"
             },
             {
-              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied.",
-              "name": "syn-invalid",
-              "reactName": "onSynInvalid",
-              "eventName": "SynInvalidEvent"
+              "description": "An icon to use in lieu of the default icon for the toggle nav-item for variant=\"sticky\".",
+              "name": "toggle-icon"
             }
           ],
-          "attributes": [
+          "members": [
             {
-              "name": "delimiter",
+              "kind": "field",
+              "name": "dependencies",
               "type": {
-                "text": "string"
+                "text": "object"
               },
-              "default": "' '",
-              "description": "The delimiter to use when setting the value when `multiple` is enabled.\nThe default is a space, but you can set it to a comma or other character.",
-              "fieldName": "delimiter"
+              "static": true,
+              "default": "{ 'syn-divider': SynDivider, 'syn-drawer': SynDrawer, 'syn-icon': SynIcon, 'syn-nav-item': SynNavItem, }"
             },
             {
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The name of the select, submitted as a name/value pair with form data.",
-              "fieldName": "name"
+              "kind": "field",
+              "name": "hasSlotController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new HasSlotController(this, '[default]', 'footer')"
             },
             {
-              "name": "size",
-              "type": {
-                "text": "'small' | 'medium' | 'large'"
-              },
-              "default": "'medium'",
-              "description": "The select's size.",
-              "fieldName": "size"
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
             },
             {
-              "name": "placeholder",
+              "kind": "field",
+              "name": "timeout",
               "type": {
-                "text": "string"
+                "text": "NodeJS.Timeout"
               },
-              "default": "''",
-              "description": "Placeholder text to show as a hint when the select is empty.",
-              "fieldName": "placeholder"
+              "privacy": "private"
             },
             {
-              "name": "multiple",
+              "kind": "field",
+              "name": "isAnimationActive",
               "type": {
                 "text": "boolean"
               },
+              "privacy": "private",
               "default": "false",
-              "description": "Allows more than one option to be selected.",
-              "fieldName": "multiple"
+              "description": "Current animation active state"
             },
             {
-              "name": "max-options-visible",
+              "kind": "field",
+              "name": "drawer",
               "type": {
-                "text": "number"
+                "text": "SynDrawer"
               },
-              "default": "3",
-              "description": "The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.",
-              "fieldName": "maxOptionsVisible"
+              "privacy": "private",
+              "description": "Reference to the drawer"
             },
             {
-              "name": "disabled",
+              "kind": "field",
+              "name": "open",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the select control.",
-              "fieldName": "disabled"
+              "description": "Indicates whether or not the side-nav is open.\nYou can toggle this attribute to show and hide the side-nav, or you can use the `show()` and\n`hide()` methods and this attribute will reflect the side-nav's open state.\n\nDepending on the \"variant\" attribute, the behavior will differ.\n\n__Default__:\nWith `open` will show the side-nav with an overlay.\nWithout `open`, the side-nav will be hidden.\n\n__Rail__:\nWith `open` will show the whole side-nav with an overlay for touch devices\nor without an overlay for non-touch devices.\nWithout `open`, the side-nav will only show the prefix of nav-item's.\n\n__Sticky__:\nWith `open` will show the whole side-nav with an overlay for touch devices\nor without an overlay for non-touch devices.\nWithout `open`, the side-nav will only show the prefix of nav-item's.",
+              "attribute": "open",
+              "reflects": true
             },
             {
-              "name": "readonly",
+              "kind": "field",
+              "name": "variant",
               "type": {
-                "text": "boolean"
+                "text": "'default' | 'rail' | 'sticky'"
               },
-              "default": "false",
-              "description": "Sets the select to a readonly state.",
-              "fieldName": "readonly"
+              "default": "'default'",
+              "description": "The variant that should be used to show the side navigation.\n\nThe following variants are supported:\n- **default** (default): Always shows the whole content and additionally an overlay.\nThis makes especially sense for applications, where you navigate to a place and stay\nthere for a longer time.\n- **rail**: Only show the prefix of navigation items in closed state.\nThis will open on hover on the rail navigation.\nOn touch devices the navigation opens on click and shows an overlay.\nNote: The rail variant is only an option if all Navigation Items on the first level\nhave an Icon.\nIf this is not the case you should use a burger navigation.\n- **sticky**: The side-nav has a pin button to show the side-nav in small (icon only)\nand full width. This variant is only possible for non-nested navigation items.\nNote: The sticky variant is only an option if all Navigation Items on the first level\nhave an Icon and if there are only \"first level\" items.",
+              "attribute": "variant",
+              "reflects": true
             },
             {
-              "name": "clearable",
+              "kind": "field",
+              "name": "noFocusTrapping",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Adds a clear button when the select is not empty.",
-              "fieldName": "clearable"
+              "description": "By default, the side-nav traps the focus if in variant=\"default\" and open.\nTo disable the focus trapping, set this attribute.",
+              "attribute": "no-focus-trapping",
+              "reflects": true
             },
             {
-              "name": "open",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the select's open state.",
-              "fieldName": "open"
+              "kind": "method",
+              "name": "setDelayedCallback",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "callback",
+                  "type": {
+                    "text": "() => void"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleMouseEnter",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleMouseLeave",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleRequestClose",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "addMouseListener",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "removeMouseListener",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "setDrawerAnimations",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleVariantChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleOpenChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleFocusTrapping"
+            },
+            {
+              "kind": "method",
+              "name": "show",
+              "description": "Shows the side-nav."
             },
             {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The select's label. If you need to display HTML, use the `label` slot instead.",
-              "fieldName": "label"
+              "kind": "method",
+              "name": "hide",
+              "description": "Hides the side-nav"
             },
             {
-              "name": "placement",
-              "type": {
-                "text": "'top' | 'bottom'"
-              },
-              "default": "'bottom'",
-              "description": "The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.",
-              "fieldName": "placement"
+              "kind": "method",
+              "name": "toggleOpenState",
+              "privacy": "private"
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted when the side-nav opens.",
+              "name": "syn-show",
+              "reactName": "onSynShow",
+              "eventName": "SynShowEvent"
             },
             {
-              "name": "help-text",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The select's help text. If you need to display HTML, use the `help-text` slot instead.",
-              "fieldName": "helpText"
+              "description": "Emitted after the side-nav opens and all animations are complete.",
+              "name": "syn-after-show",
+              "reactName": "onSynAfterShow",
+              "eventName": "SynAfterShowEvent"
             },
             {
-              "name": "form",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "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.",
-              "fieldName": "form"
+              "description": "Emitted when the side-nav closes.",
+              "name": "syn-hide",
+              "reactName": "onSynHide",
+              "eventName": "SynHideEvent"
             },
             {
-              "name": "required",
+              "description": "Emitted after the side-nav closes and all animations are complete.",
+              "name": "syn-after-hide",
+              "reactName": "onSynAfterHide",
+              "eventName": "SynAfterHideEvent"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "open",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "The select's required attribute.",
-              "fieldName": "required"
+              "description": "Indicates whether or not the side-nav is open.\nYou can toggle this attribute to show and hide the side-nav, or you can use the `show()` and\n`hide()` methods and this attribute will reflect the side-nav's open state.\n\nDepending on the \"variant\" attribute, the behavior will differ.\n\n__Default__:\nWith `open` will show the side-nav with an overlay.\nWithout `open`, the side-nav will be hidden.\n\n__Rail__:\nWith `open` will show the whole side-nav with an overlay for touch devices\nor without an overlay for non-touch devices.\nWithout `open`, the side-nav will only show the prefix of nav-item's.\n\n__Sticky__:\nWith `open` will show the whole side-nav with an overlay for touch devices\nor without an overlay for non-touch devices.\nWithout `open`, the side-nav will only show the prefix of nav-item's.",
+              "fieldName": "open"
             },
             {
-              "name": "getTag",
+              "name": "variant",
               "type": {
-                "text": "(option: SynOption, index: number) => TemplateResult | string | HTMLElement"
+                "text": "'default' | 'rail' | 'sticky'"
               },
-              "description": "A function that customizes the tags to be rendered when multiple=true. The first argument is the option, the second\nis the current tag's index.  The function should return either a Lit TemplateResult or a string containing trusted HTML of the symbol to render at\nthe specified value.",
-              "fieldName": "getTag"
+              "default": "'default'",
+              "description": "The variant that should be used to show the side navigation.\n\nThe following variants are supported:\n- **default** (default): Always shows the whole content and additionally an overlay.\nThis makes especially sense for applications, where you navigate to a place and stay\nthere for a longer time.\n- **rail**: Only show the prefix of navigation items in closed state.\nThis will open on hover on the rail navigation.\nOn touch devices the navigation opens on click and shows an overlay.\nNote: The rail variant is only an option if all Navigation Items on the first level\nhave an Icon.\nIf this is not the case you should use a burger navigation.\n- **sticky**: The side-nav has a pin button to show the side-nav in small (icon only)\nand full width. This variant is only possible for non-nested navigation items.\nNote: The sticky variant is only an option if all Navigation Items on the first level\nhave an Icon and if there are only \"first level\" items.",
+              "fieldName": "variant"
             },
             {
-              "name": "value",
+              "name": "no-focus-trapping",
               "type": {
-                "text": "string | number | Array<string | number>"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the\nvalue attribute will be a space-delimited list of values based on the options selected, and the value property will\nbe an array. **For this reason, values must not contain spaces.**",
-              "fieldName": "value"
+              "default": "false",
+              "description": "By default, the side-nav traps the focus if in variant=\"default\" and open.\nTo disable the focus trapping, set this attribute.",
+              "fieldName": "noFocusTrapping"
             }
           ],
           "superclass": {
             "name": "SynergyElement",
             "module": "/src/internal/synergy-element.js"
           },
-          "summary": "Selects allow you to choose items from a menu of predefined options.",
-          "tagNameWithoutPrefix": "select",
-          "tagName": "syn-select",
+          "summary": "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.",
+          "tagNameWithoutPrefix": "side-nav",
+          "tagName": "syn-side-nav",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Selects allow you to choose items from a menu of predefined options.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-select--docs\n * @status stable\n * @since 1.5.0\n *\n * @dependency syn-icon\n * @dependency syn-popup\n * @dependency syn-tag\n *\n * @slot - The listbox options. Must be `<syn-option>` elements. You can use `<syn-divider>` to group items visually.\n * @slot label - The input's label. Alternatively, you can use the `label` attribute.\n * @slot prefix - Used to prepend a presentational icon or similar element to the combobox.\n * @slot suffix - Used to append a presentational icon or similar element to the combobox.\n * @slot clear-icon - An icon to use in lieu of the default clear icon.\n * @slot expand-icon - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n *\n * @event syn-change - Emitted when the control's value changes.\n * @event syn-clear - Emitted when the control's value is cleared.\n * @event syn-input - Emitted when the control receives input.\n * @event syn-focus - Emitted when the control gains focus.\n * @event syn-blur - Emitted when the control loses focus.\n * @event syn-show - Emitted when the select's menu opens.\n * @event syn-after-show - Emitted after the select's menu opens and all animations are complete.\n * @event syn-hide - Emitted when the select's menu closes.\n * @event syn-after-hide - Emitted after the select's menu closes and all animations are complete.\n * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart form-control - The form control that wraps the label, input, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-input - The select's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart combobox - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.\n * @csspart prefix - The container that wraps the prefix slot.\n * @csspart suffix - The container that wraps the suffix slot.\n * @csspart display-input - The element that displays the selected option's label, an `<input>` element.\n * @csspart listbox - The listbox container where options are slotted.\n * @csspart tags - The container that houses option tags when `multiselect` is used.\n * @csspart tag - The individual tags that represent each multiselect option.\n * @csspart tag__base - The tag's base part.\n * @csspart tag__content - The tag's content part.\n * @csspart tag__remove-button - The tag's remove button.\n * @csspart tag__remove-button__base - The tag's remove button base part.\n * @csspart clear-button - The clear button.\n * @csspart expand-icon - The container that wraps the expand icon.\n * @csspart popup - The popup's exported `popup` part. Use this to target the tooltip's popup container.\n */",
-          "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-select--docs",
+          "jsDoc": "/**\n * @summary The <syn-side-nav /> element contains secondary navigation and fits below the header.\n * It can be used to group multiple navigation items (<syn-nav-item />s) together.\n *\n * @example\n * <syn-side-nav open>\n *  <syn-nav-item >Item 1</syn-nav-item>\n *  <syn-nav-item divider>Item 2</syn-nav-item>\n * </syn-side-nav>\n *\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-side-nav--docs\n * @status stable\n * @since 1.15.0\n *\n * @dependency syn-divider\n * @dependency syn-drawer\n * @dependency syn-icon\n * @dependency syn-nav-item\n *\n * @slot - The main content of the side-nav. Used for <syn-nav-item /> elements.\n * @slot footer - The footer content of the side-nav. Used for <syn-nav-item /> elements.\n *    Please avoid having to many nav-items as it can massively influence the user experience.\n * @slot toggle-label - The label of the toggle nav-item for variant=\"sticky\".\n * @slot toggle-icon - An icon to use in lieu of the default icon for the toggle nav-item\n * for variant=\"sticky\".\n *\n * @event syn-show - Emitted when the side-nav opens.\n * @event syn-after-show - Emitted after the side-nav opens and all animations are complete.\n * @event syn-hide - Emitted when the side-nav closes.\n * @event syn-after-hide - Emitted after the side-nav closes and all animations are complete.\n *\n * @csspart base - The components base wrapper\n * @csspart drawer - The drawer that is used under the hood for creating the side-nav\n * @csspart content-container - The components main content container\n * @csspart content - The components main content\n * @csspart footer-container - The components footer content container\n  (where the footer slot content is rendered)\n * @csspart footer-divider - The components footer divider\n * @csspart footer - The components footer content\n * @csspart overlay - The overlay that covers the screen behind the side-nav.\n * @csspart panel - The side-nav's panel (where the whole content is rendered).\n * @csspart body - The side-nav's body (where the default slot content is rendered)\n * @csspart drawer__base - The drawer's base wrapper\n * @csspart toggle-nav-item - The nav-item to toggle open state for variant=\"sticky\"\n * @csspart toggle-icon - The icon of the toggle nav-item for variant=\"sticky\"\n * @csspart toggle-label - The label of the toggle nav-item for variant=\"sticky\".\n\n * @cssproperty  --side-nav-open-width - The width of the side-nav if in open state\n *\n * @animation sideNav.showNonRail - The animation to use when showing the side-nav\n *  in variant=\"default\".\n * @animation sideNav.showRail - The animation to use when showing the side-nav in variant=\"rail\"\n *  and variant=\"sticky\".\n * @animation sideNav.hideNonRail - The animation to use when hiding the side-nav\n *  in variant=\"default\".\n * @animation sideNav.hideRail - The animation to use when hiding the side-nav in variant=\"rail\"\n *  and variant=\"sticky\".\n * @animation sideNav.overlay.show - The animation to use when showing the side-nav's overlay.\n * @animation sideNav.overlay.hide - The animation to use when hiding the side-nav's overlay.\n */",
+          "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-side-nav--docs",
           "status": "stable",
-          "since": "1.5.0",
+          "since": "1.15.0",
           "dependencies": [
+            "syn-divider",
+            "syn-drawer",
             "syn-icon",
-            "syn-popup",
-            "syn-tag"
+            "syn-nav-item"
+          ],
+          "animations": [
+            {
+              "name": "sideNav.showNonRail",
+              "description": "The animation to use when showing the side-nav in variant=\"default\"."
+            },
+            {
+              "name": "sideNav.showRail",
+              "description": "The animation to use when showing the side-nav in variant=\"rail\" and variant=\"sticky\"."
+            },
+            {
+              "name": "sideNav.hideNonRail",
+              "description": "The animation to use when hiding the side-nav in variant=\"default\"."
+            },
+            {
+              "name": "sideNav.hideRail",
+              "description": "The animation to use when hiding the side-nav in variant=\"rail\" and variant=\"sticky\"."
+            },
+            {
+              "name": "sideNav.overlay.show",
+              "description": "The animation to use when showing the side-nav's overlay."
+            },
+            {
+              "name": "sideNav.overlay.hide",
+              "description": "The animation to use when hiding the side-nav's overlay."
+            }
           ]
         }
       ],
@@ -14151,8 +14314,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SynSelect",
-            "module": "components/select/select.js"
+            "name": "SynSideNav",
+            "module": "components/side-nav/side-nav.js"
           }
         }
       ]
@@ -14882,133 +15045,17 @@
             "name": "SynergyElement",
             "module": "/src/internal/synergy-element.js"
           },
-          "summary": "Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).",
-          "tagNameWithoutPrefix": "tab",
-          "tagName": "syn-tab",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tab--docs\n * @status stable\n * @since 2.1.0\n *\n * @dependency syn-icon-button\n *\n * @slot - The tab's label.\n *\n * @event syn-close - Emitted when the tab is closable and the close button is activated.\n *\n * @csspart base - The component's base wrapper.\n * @csspart close-button - The close button, an `<syn-icon-button>`.\n * @csspart close-button__base - The close button's exported `base` part.\n */",
-          "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-tab--docs",
-          "status": "stable",
-          "since": "2.1.0",
-          "dependencies": [
-            "syn-icon-button"
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "SynTab",
-            "module": "components/tab/tab.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/tab-panel/tab-panel.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "SynTabPanel",
-          "cssProperties": [
-            {
-              "description": "The tab panel's padding.",
-              "name": "--padding"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The tab panel's content.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "attrId",
-              "type": {
-                "text": "number"
-              },
-              "privacy": "private",
-              "readonly": true,
-              "default": "++id"
-            },
-            {
-              "kind": "field",
-              "name": "componentId",
-              "privacy": "private",
-              "readonly": true,
-              "default": "`syn-tab-panel-${this.attrId}`"
-            },
-            {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The tab panel's name.",
-              "attribute": "name",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "active",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "When true, the tab panel will be shown.",
-              "attribute": "active",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "handleActiveChange"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The tab panel's name.",
-              "fieldName": "name"
-            },
-            {
-              "name": "active",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "When true, the tab panel will be shown.",
-              "fieldName": "active"
-            }
-          ],
-          "superclass": {
-            "name": "SynergyElement",
-            "module": "/src/internal/synergy-element.js"
-          },
-          "summary": "Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.",
-          "tagNameWithoutPrefix": "tab-panel",
-          "tagName": "syn-tab-panel",
+          "summary": "Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).",
+          "tagNameWithoutPrefix": "tab",
+          "tagName": "syn-tab",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tab-panel--docs\n * @status stable\n * @since 2.1.0\n *\n * @slot - The tab panel's content.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --padding - The tab panel's padding.\n */",
-          "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-tab-panel--docs",
+          "jsDoc": "/**\n * @summary Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tab--docs\n * @status stable\n * @since 2.1.0\n *\n * @dependency syn-icon-button\n *\n * @slot - The tab's label.\n *\n * @event syn-close - Emitted when the tab is closable and the close button is activated.\n *\n * @csspart base - The component's base wrapper.\n * @csspart close-button - The close button, an `<syn-icon-button>`.\n * @csspart close-button__base - The close button's exported `base` part.\n */",
+          "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-tab--docs",
           "status": "stable",
-          "since": "2.1.0"
+          "since": "2.1.0",
+          "dependencies": [
+            "syn-icon-button"
+          ]
         }
       ],
       "exports": [
@@ -15016,8 +15063,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SynTabPanel",
-            "module": "components/tab-panel/tab-panel.js"
+            "name": "SynTab",
+            "module": "components/tab/tab.js"
           }
         }
       ]
@@ -15533,6 +15580,122 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/tab-panel/tab-panel.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SynTabPanel",
+          "cssProperties": [
+            {
+              "description": "The tab panel's padding.",
+              "name": "--padding"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The tab panel's content.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "attrId",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "readonly": true,
+              "default": "++id"
+            },
+            {
+              "kind": "field",
+              "name": "componentId",
+              "privacy": "private",
+              "readonly": true,
+              "default": "`syn-tab-panel-${this.attrId}`"
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The tab panel's name.",
+              "attribute": "name",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "active",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When true, the tab panel will be shown.",
+              "attribute": "active",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "handleActiveChange"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The tab panel's name.",
+              "fieldName": "name"
+            },
+            {
+              "name": "active",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When true, the tab panel will be shown.",
+              "fieldName": "active"
+            }
+          ],
+          "superclass": {
+            "name": "SynergyElement",
+            "module": "/src/internal/synergy-element.js"
+          },
+          "summary": "Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.",
+          "tagNameWithoutPrefix": "tab-panel",
+          "tagName": "syn-tab-panel",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tab-panel--docs\n * @status stable\n * @since 2.1.0\n *\n * @slot - The tab panel's content.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --padding - The tab panel's padding.\n */",
+          "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-tab-panel--docs",
+          "status": "stable",
+          "since": "2.1.0"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SynTabPanel",
+            "module": "components/tab-panel/tab-panel.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/tag/tag.js",
@@ -15561,97 +15724,240 @@
           ],
           "slots": [
             {
-              "description": "The tag's content.",
+              "description": "The tag's content.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "dependencies",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ 'syn-icon-button': SynIconButton }"
+            },
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The tag's size.",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "removable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the tag removable and shows a remove button.",
+              "attribute": "removable"
+            },
+            {
+              "kind": "method",
+              "name": "handleRemoveClick",
+              "privacy": "private"
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted when the remove button is activated.",
+              "name": "syn-remove",
+              "reactName": "onSynRemove",
+              "eventName": "SynRemoveEvent"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The tag's size.",
+              "fieldName": "size"
+            },
+            {
+              "name": "removable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the tag removable and shows a remove button.",
+              "fieldName": "removable"
+            }
+          ],
+          "superclass": {
+            "name": "SynergyElement",
+            "module": "/src/internal/synergy-element.js"
+          },
+          "summary": "Tags are used as labels to organize things or to indicate a selection.",
+          "tagNameWithoutPrefix": "tag",
+          "tagName": "syn-tag",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Tags are used as labels to organize things or to indicate a selection.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tag--docs\n * @status stable\n * @since 1.2.0\n *\n * @dependency syn-icon-button\n *\n * @slot - The tag's content.\n *\n * @event syn-remove - Emitted when the remove button is activated.\n *\n * @csspart base - The component's base wrapper.\n * @csspart content - The tag's content.\n * @csspart remove-button - The tag's remove button, an `<syn-icon-button>`.\n * @csspart remove-button__base - The remove button's exported `base` part.\n */",
+          "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-tag--docs",
+          "status": "stable",
+          "since": "1.2.0",
+          "dependencies": [
+            "syn-icon-button"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SynTag",
+            "module": "components/tag/tag.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/tag-group/tag-group.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SynTagGroup",
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            },
+            {
+              "description": "The tag group's label.",
+              "name": "tag-label"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The tag group's main content. Must be `<syn-tag />` elements.",
               "name": ""
+            },
+            {
+              "description": "The tag group's label. Alternatively, you can use the `label` attribute.",
+              "name": "label"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "dependencies",
+              "name": "tagsInDefaultSlot",
               "type": {
-                "text": "object"
-              },
-              "static": true,
-              "default": "{ 'syn-icon-button': SynIconButton }"
+                "text": "SynTag[]"
+              }
             },
             {
               "kind": "field",
-              "name": "localize",
+              "name": "hasSlotController",
               "privacy": "private",
               "readonly": true,
-              "default": "new LocalizeController(this)"
+              "default": "new HasSlotController(this, 'label')"
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "label",
               "type": {
-                "text": "'small' | 'medium' | 'large'"
+                "text": "string"
               },
-              "default": "'medium'",
-              "description": "The tag's size.",
-              "attribute": "size",
+              "default": "''",
+              "description": "The tag group's label. If you need to display HTML, use the `label` slot instead.",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "labelPosition",
+              "type": {
+                "text": "'top' | 'start'"
+              },
+              "default": "'top'",
+              "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.",
+              "attribute": "label-position",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "removable",
+              "name": "size",
               "type": {
-                "text": "boolean"
+                "text": "'small' | 'medium' | 'large'"
               },
-              "default": "false",
-              "description": "Makes the tag removable and shows a remove button.",
-              "attribute": "removable"
+              "default": "'medium'",
+              "description": "The size that should be applied to all slotted `<syn-tag>` elements",
+              "attribute": "size",
+              "reflects": true
             },
             {
               "kind": "method",
-              "name": "handleRemoveClick",
+              "name": "adjustTagSize",
               "privacy": "private"
-            }
-          ],
-          "events": [
+            },
             {
-              "description": "Emitted when the remove button is activated.",
-              "name": "syn-remove",
-              "reactName": "onSynRemove",
-              "eventName": "SynRemoveEvent"
+              "kind": "method",
+              "name": "handleSizeChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleSlotChange"
             }
           ],
           "attributes": [
             {
-              "name": "size",
+              "name": "label",
               "type": {
-                "text": "'small' | 'medium' | 'large'"
+                "text": "string"
               },
-              "default": "'medium'",
-              "description": "The tag's size.",
-              "fieldName": "size"
+              "default": "''",
+              "description": "The tag group's label. If you need to display HTML, use the `label` slot instead.",
+              "fieldName": "label"
             },
             {
-              "name": "removable",
+              "name": "label-position",
               "type": {
-                "text": "boolean"
+                "text": "'top' | 'start'"
               },
-              "default": "false",
-              "description": "Makes the tag removable and shows a remove button.",
-              "fieldName": "removable"
+              "default": "'top'",
+              "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.",
+              "fieldName": "labelPosition"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The size that should be applied to all slotted `<syn-tag>` elements",
+              "fieldName": "size"
             }
           ],
           "superclass": {
             "name": "SynergyElement",
             "module": "/src/internal/synergy-element.js"
           },
-          "summary": "Tags are used as labels to organize things or to indicate a selection.",
-          "tagNameWithoutPrefix": "tag",
-          "tagName": "syn-tag",
+          "summary": "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.",
+          "tagNameWithoutPrefix": "tag-group",
+          "tagName": "syn-tag-group",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Tags are used as labels to organize things or to indicate a selection.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tag--docs\n * @status stable\n * @since 1.2.0\n *\n * @dependency syn-icon-button\n *\n * @slot - The tag's content.\n *\n * @event syn-remove - Emitted when the remove button is activated.\n *\n * @csspart base - The component's base wrapper.\n * @csspart content - The tag's content.\n * @csspart remove-button - The tag's remove button, an `<syn-icon-button>`.\n * @csspart remove-button__base - The remove button's exported `base` part.\n */",
-          "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-tag--docs",
+          "jsDoc": "/**\n * @summary A tag group is used to display multiple tags that belong together, often representing selected filters, categories, or user‑generated labels.\n * It arranges tags in flexible rows and supports different sizes and layouts.\n * Tags can be removable, icon‑based, or purely textual.\n *\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tag-group--docs\n * @status stable\n * @since 3.7.0\n *\n * @slot - The tag group's main content. Must be `<syn-tag />` elements.\n * @slot label - The tag group's label. Alternatively, you can use the `label` attribute.\n *\n * @csspart base - The component's base wrapper.\n * @csspart tag-label - The tag group's label.\n */",
+          "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-tag-group--docs",
           "status": "stable",
-          "since": "1.2.0",
-          "dependencies": [
-            "syn-icon-button"
-          ]
+          "since": "3.7.0"
         }
       ],
       "exports": [
@@ -15659,8 +15965,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SynTag",
-            "module": "components/tag/tag.js"
+            "name": "SynTagGroup",
+            "module": "components/tag-group/tag-group.js"
           }
         }
       ]
@@ -16810,149 +17116,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/tag-group/tag-group.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "SynTagGroup",
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            },
-            {
-              "description": "The tag group's label.",
-              "name": "tag-label"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The tag group's main content. Must be `<syn-tag />` elements.",
-              "name": ""
-            },
-            {
-              "description": "The tag group's label. Alternatively, you can use the `label` attribute.",
-              "name": "label"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "tagsInDefaultSlot",
-              "type": {
-                "text": "SynTag[]"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "hasSlotController",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new HasSlotController(this, 'label')"
-            },
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The tag group's label. If you need to display HTML, use the `label` slot instead.",
-              "attribute": "label"
-            },
-            {
-              "kind": "field",
-              "name": "labelPosition",
-              "type": {
-                "text": "'top' | 'start'"
-              },
-              "default": "'top'",
-              "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.",
-              "attribute": "label-position",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "'small' | 'medium' | 'large'"
-              },
-              "default": "'medium'",
-              "description": "The size that should be applied to all slotted `<syn-tag>` elements",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "adjustTagSize",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleSizeChange"
-            },
-            {
-              "kind": "method",
-              "name": "handleSlotChange"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The tag group's label. If you need to display HTML, use the `label` slot instead.",
-              "fieldName": "label"
-            },
-            {
-              "name": "label-position",
-              "type": {
-                "text": "'top' | 'start'"
-              },
-              "default": "'top'",
-              "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.",
-              "fieldName": "labelPosition"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "'small' | 'medium' | 'large'"
-              },
-              "default": "'medium'",
-              "description": "The size that should be applied to all slotted `<syn-tag>` elements",
-              "fieldName": "size"
-            }
-          ],
-          "superclass": {
-            "name": "SynergyElement",
-            "module": "/src/internal/synergy-element.js"
-          },
-          "summary": "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.",
-          "tagNameWithoutPrefix": "tag-group",
-          "tagName": "syn-tag-group",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary A tag group is used to display multiple tags that belong together, often representing selected filters, categories, or user‑generated labels.\n * It arranges tags in flexible rows and supports different sizes and layouts.\n * Tags can be removable, icon‑based, or purely textual.\n *\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tag-group--docs\n * @status stable\n * @since 3.7.0\n *\n * @slot - The tag group's main content. Must be `<syn-tag />` elements.\n * @slot label - The tag group's label. Alternatively, you can use the `label` attribute.\n *\n * @csspart base - The component's base wrapper.\n * @csspart tag-label - The tag group's label.\n */",
-          "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-tag-group--docs",
-          "status": "stable",
-          "since": "3.7.0"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "SynTagGroup",
-            "module": "components/tag-group/tag-group.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/validate/validate.js",
@@ -17375,7 +17538,7 @@
   "package": {
     "name": "@synergy-design-system/components",
     "description": "",
-    "version": "3.14.0",
+    "version": "3.15.1",
     "author": {
       "name": "SICK Global UX Foundation",
       "url": "https://www.sick.com"