@synergy-design-system/components 1.14.0 → 1.16.0

package/dist/custom-elements.json

@@ -78,6 +78,146 @@
         }
       ]
     },
+    {
+      "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"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "disableRole",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive\ndevices when interacting with the control and is strongly recommended.",
+              "attribute": "label"
+            },
+            {
+              "kind": "method",
+              "name": "handleFocus",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleBlur",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleMouseOver",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleMouseOut",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleSlotChange",
+              "privacy": "private"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive\ndevices when interacting with the control and is strongly recommended.",
+              "fieldName": "label"
+            }
+          ],
+          "superclass": {
+            "name": "SynergyElement",
+            "module": "/src/internal/synergy-element.js"
+          },
+          "summary": "Button groups can be used to group related buttons into sections.",
+          "tagNameWithoutPrefix": "button-group",
+          "tagName": "syn-button-group",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Button groups can be used to group related buttons into sections.\n * @documentation https://synergy.style/components/button-group\n * @status stable\n * @since 2.0\n *\n * @slot - One or more `<syn-button>` elements to display in the button group.\n *\n * @csspart base - The component's base wrapper.\n */",
+          "documentation": "https://synergy.style/components/button-group",
+          "status": "stable",
+          "since": "2.0"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SynButtonGroup",
+            "module": "components/button-group/button-group.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/button/button.js",
@@ -694,263 +834,123 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/button-group/button-group.js",
+      "path": "components/checkbox/checkbox.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SynButtonGroup",
+          "name": "SynCheckbox",
           "cssParts": [
             {
               "description": "The component's base wrapper.",
               "name": "base"
+            },
+            {
+              "description": "The square container that wraps the checkbox's checked state.",
+              "name": "control"
+            },
+            {
+              "description": "Matches the control part when the checkbox is checked.",
+              "name": "control--checked"
+            },
+            {
+              "description": "Matches the control part when the checkbox is indeterminate.",
+              "name": "control--indeterminate"
+            },
+            {
+              "description": "The checked icon, an `<syn-icon>` element.",
+              "name": "checked-icon"
+            },
+            {
+              "description": "The indeterminate icon, an `<syn-icon>` element.",
+              "name": "indeterminate-icon"
+            },
+            {
+              "description": "The container that wraps the checkbox's label.",
+              "name": "label"
+            },
+            {
+              "description": "The help text's wrapper.",
+              "name": "form-control-help-text"
             }
           ],
           "slots": [
             {
-              "description": "One or more `<syn-button>` elements to display in the button group.",
+              "description": "The checkbox's label.",
               "name": ""
+            },
+            {
+              "description": "Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.",
+              "name": "help-text"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "defaultSlot",
+              "name": "dependencies",
               "type": {
-                "text": "HTMLSlotElement"
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ 'syn-icon': SynIcon }"
+            },
+            {
+              "kind": "field",
+              "name": "formControlController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new FormControlController(this, {\n    value: (control: SynCheckbox) => (control.checked ? control.value || 'on' : undefined),\n    defaultValue: (control: SynCheckbox) => control.defaultChecked,\n    setValue: (control: SynCheckbox, checked: boolean) => (control.checked = checked)\n  })"
+            },
+            {
+              "kind": "field",
+              "name": "hasSlotController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new HasSlotController(this, 'help-text')"
+            },
+            {
+              "kind": "field",
+              "name": "input",
+              "type": {
+                "text": "HTMLInputElement"
               }
             },
             {
               "kind": "field",
-              "name": "disableRole",
+              "name": "hasFocus",
               "type": {
                 "text": "boolean"
               },
+              "privacy": "private",
               "default": "false"
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "title",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive\ndevices when interacting with the control and is strongly recommended.",
-              "attribute": "label"
+              "attribute": "title"
             },
             {
-              "kind": "method",
-              "name": "handleFocus",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The name of the checkbox, submitted as a name/value pair with form data.",
+              "attribute": "name"
             },
             {
-              "kind": "method",
-              "name": "handleBlur",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleMouseOver",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleMouseOut",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleSlotChange",
-              "privacy": "private"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive\ndevices when interacting with the control and is strongly recommended.",
-              "fieldName": "label"
-            }
-          ],
-          "superclass": {
-            "name": "SynergyElement",
-            "module": "/src/internal/synergy-element.js"
-          },
-          "summary": "Button groups can be used to group related buttons into sections.",
-          "tagNameWithoutPrefix": "button-group",
-          "tagName": "syn-button-group",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary Button groups can be used to group related buttons into sections.\n * @documentation https://synergy.style/components/button-group\n * @status stable\n * @since 2.0\n *\n * @slot - One or more `<syn-button>` elements to display in the button group.\n *\n * @csspart base - The component's base wrapper.\n */",
-          "documentation": "https://synergy.style/components/button-group",
-          "status": "stable",
-          "since": "2.0"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "SynButtonGroup",
-            "module": "components/button-group/button-group.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/checkbox/checkbox.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "SynCheckbox",
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            },
-            {
-              "description": "The square container that wraps the checkbox's checked state.",
-              "name": "control"
-            },
-            {
-              "description": "Matches the control part when the checkbox is checked.",
-              "name": "control--checked"
-            },
-            {
-              "description": "Matches the control part when the checkbox is indeterminate.",
-              "name": "control--indeterminate"
-            },
-            {
-              "description": "The checked icon, an `<syn-icon>` element.",
-              "name": "checked-icon"
-            },
-            {
-              "description": "The indeterminate icon, an `<syn-icon>` element.",
-              "name": "indeterminate-icon"
-            },
-            {
-              "description": "The container that wraps the checkbox's label.",
-              "name": "label"
-            },
-            {
-              "description": "The help text's wrapper.",
-              "name": "form-control-help-text"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The checkbox's label.",
-              "name": ""
-            },
-            {
-              "description": "Text that describes how to use the checkbox. 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 }"
-            },
-            {
-              "kind": "field",
-              "name": "formControlController",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new FormControlController(this, {\n    value: (control: SynCheckbox) => (control.checked ? control.value || 'on' : undefined),\n    defaultValue: (control: SynCheckbox) => control.defaultChecked,\n    setValue: (control: SynCheckbox, checked: boolean) => (control.checked = checked)\n  })"
-            },
-            {
-              "kind": "field",
-              "name": "hasSlotController",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new HasSlotController(this, 'help-text')"
-            },
-            {
-              "kind": "field",
-              "name": "input",
-              "type": {
-                "text": "HTMLInputElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "hasFocus",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "title",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "attribute": "title"
-            },
-            {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The name of the checkbox, submitted as a name/value pair with form data.",
-              "attribute": "name"
-            },
-            {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
-              "attribute": "value"
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
+              "attribute": "value"
             },
             {
               "kind": "field",
@@ -1951,6 +1951,17 @@
               "description": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
               "attribute": "hoist"
             },
+            {
+              "kind": "field",
+              "name": "sync",
+              "type": {
+                "text": "'width' | 'height' | 'both' | undefined"
+              },
+              "default": "undefined",
+              "description": "Syncs the popup width or height to that of the trigger element.",
+              "attribute": "sync",
+              "reflects": true
+            },
             {
               "kind": "method",
               "name": "focusOnTrigger"
@@ -2132,6 +2143,18 @@
               "default": "false",
               "description": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
               "fieldName": "hoist"
+            },
+            {
+              "name": "sync",
+              "type": {
+                "text": "'width' | 'height' | 'both' | undefined"
+              },
+              "default": "undefined",
+              "description": "Syncs the popup width or height to that of the trigger element.",
+              "resolveInitializer": {
+                "module": "src/components/dropdown/dropdown.component.ts"
+              },
+              "fieldName": "sync"
             }
           ],
           "superclass": {
@@ -2204,6 +2227,10 @@
             {
               "description": "The wrapper that is holding the optional top navigation section",
               "name": "navigation"
+            },
+            {
+              "description": "The button that toggles the burger menu",
+              "name": "burger-menu-toggle-button"
             }
           ],
           "slots": [
@@ -2222,6 +2249,14 @@
             {
               "description": "This slot can be used to add an optional horizontal navigation",
               "name": "navigation"
+            },
+            {
+              "description": "An icon to use in lieu of the default show burger menu icon",
+              "name": "show-burger-menu"
+            },
+            {
+              "description": "An icon to use in lieu of the default hide burger menu icon",
+              "name": "hide-burger-menu"
             }
           ],
           "members": [
@@ -2241,6 +2276,22 @@
               "readonly": true,
               "default": "new HasSlotController(this, '[default]', 'logo', 'label', 'meta-navigation', 'navigation')"
             },
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "mutationObserver",
+              "type": {
+                "text": "MutationObserver"
+              },
+              "privacy": "private",
+              "description": "Internal mutation observer"
+            },
             {
               "kind": "field",
               "name": "label",
@@ -2248,51 +2299,142 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "The headers label. If you need to display HTML, use the `label` slot instead.",
+              "description": "The headers label. If you need to display HTML, use the `default` slot instead.",
               "attribute": "label"
-            }
-          ],
-          "attributes": [
+            },
             {
-              "name": "label",
+              "kind": "field",
+              "name": "showBurgerMenu",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "The headers label. If you need to display HTML, use the `label` slot instead.",
-              "fieldName": "label"
-            }
-          ],
-          "superclass": {
-            "name": "SynergyElement",
-            "module": "/src/internal/synergy-element.js"
-          },
-          "summary": "The <syn-header /> element provides a generic application header\nthat can be used to add applications name, toolbar and primary navigation.",
-          "tagNameWithoutPrefix": "header",
-          "tagName": "syn-header",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary The <syn-header /> element provides a generic application header\n * that can be used to add applications name, toolbar and primary navigation.\n *\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-header--docs\n * @status stable\n * @since 1.10.0\n *\n * @slot - The label for the header.\n * @slot logo - The logo that should be displayed. Will fall back to the SICK logo if not provided.\n * @slot meta-navigation - The meta-navigation is used to add various application toolbar icons.\n *                     Best used with `<syn-icon-button />` and `<syn-drop-down />`\n * @slot navigation - This slot can be used to add an optional horizontal navigation\n *\n * @csspart base - The component's base wrapper.\n * @csspart content - The wrapper most content items reside\n * @csspart logo - The wrapper the application logo resides in\n * @csspart label - The element wrapping the application name\n * @csspart meta-navigation - The Item wrapping the optional application menu\n * @csspart navigation - The wrapper that is holding the optional top navigation section\n */",
-          "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-header--docs",
-          "status": "stable",
-          "since": "1.10.0"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "SynHeader",
-            "module": "components/header/header.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/icon/icon.js",
-      "declarations": [
-        {
+              "default": "false",
+              "description": "Adds a button to toggle the burger menu's visibility.\nThe button is added automatically, if the component finds a syn-side-nav in non-rail mode.",
+              "attribute": "show-burger-menu",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "burgerMenuVisible",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether or not the burger menu is currently visible.",
+              "attribute": "burger-menu-visible",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "sideNav",
+              "type": {
+                "text": "SynSideNav | null"
+              },
+              "privacy": "private",
+              "description": "The side nav"
+            },
+            {
+              "kind": "method",
+              "name": "handleBurgerMenuToggle",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "updateBurgerMenuBasedOnSideNav",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleBurgerMenuVisible"
+            },
+            {
+              "kind": "method",
+              "name": "connectSideNavigation",
+              "parameters": [
+                {
+                  "name": "sideNav",
+                  "type": {
+                    "text": "SynSideNav"
+                  },
+                  "description": "The side navigation to connect to the header"
+                }
+              ],
+              "description": "Connect a `syn-side-nav` to add automatic interaction of the header with the side navigation\nlike showing the burger menu icon and open / close handling.\n\nIf no side navigation is connected, the header will use the first `syn-side-nav` element it\nfinds."
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted when the burger menu button is toggled to visible",
+              "name": "syn-burger-menu-show",
+              "reactName": "onSynBurgerMenuShow",
+              "eventName": "SynBurgerMenuShowEvent"
+            },
+            {
+              "description": "Emitted when the burger menu button is toggled to not visible",
+              "name": "syn-burger-menu-hide",
+              "reactName": "onSynBurgerMenuHide",
+              "eventName": "SynBurgerMenuHideEvent"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The headers label. If you need to display HTML, use the `default` slot instead.",
+              "fieldName": "label"
+            },
+            {
+              "name": "show-burger-menu",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Adds a button to toggle the burger menu's visibility.\nThe button is added automatically, if the component finds a syn-side-nav in non-rail mode.",
+              "fieldName": "showBurgerMenu"
+            },
+            {
+              "name": "burger-menu-visible",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether or not the burger menu is currently visible.",
+              "fieldName": "burgerMenuVisible"
+            }
+          ],
+          "superclass": {
+            "name": "SynergyElement",
+            "module": "/src/internal/synergy-element.js"
+          },
+          "summary": "The <syn-header /> element provides a generic application header\nthat can be used to add applications name, toolbar and primary navigation.",
+          "tagNameWithoutPrefix": "header",
+          "tagName": "syn-header",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary The <syn-header /> element provides a generic application header\n * that can be used to add applications name, toolbar and primary navigation.\n *\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-header--docs\n * @status stable\n * @since 1.10.0\n *\n * @slot - The label for the header.\n * @slot logo - The logo that should be displayed. Will fall back to the SICK logo if not provided.\n * @slot meta-navigation - The meta-navigation is used to add various application toolbar icons.\n *                     Best used with `<syn-icon-button />` and `<syn-drop-down />`\n * @slot navigation - This slot can be used to add an optional horizontal navigation\n * @slot show-burger-menu - An icon to use in lieu of the default show burger menu icon\n * @slot hide-burger-menu - An icon to use in lieu of the default hide burger menu icon\n *\n * @event syn-burger-menu-show - Emitted when the burger menu button is toggled to visible\n * @event syn-burger-menu-hide - Emitted when the burger menu button is toggled to not visible\n *\n * @csspart base - The component's base wrapper.\n * @csspart content - The wrapper most content items reside\n * @csspart logo - The wrapper the application logo resides in\n * @csspart label - The element wrapping the application name\n * @csspart meta-navigation - The Item wrapping the optional application menu\n * @csspart navigation - The wrapper that is holding the optional top navigation section\n * @csspart burger-menu-toggle-button - The button that toggles the burger menu\n */",
+          "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-header--docs",
+          "status": "stable",
+          "since": "1.10.0"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SynHeader",
+            "module": "components/header/header.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/icon/icon.js",
+      "declarations": [
+        {
           "kind": "class",
           "description": "",
           "name": "SynIcon",
@@ -4304,29 +4446,57 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/optgroup/optgroup.js",
+      "path": "components/nav-item/nav-item.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SynOptgroup",
+          "name": "SynNavItem",
           "cssProperties": [
             {
-              "description": "Display property of the divider. Defaults to \"block\"",
-              "name": "--display-divider"
+              "description": "Numeric value, indicating the level the item is placed at.",
+              "name": "--indentation"
+            },
+            {
+              "description": "The amount of pixels each level will indent.",
+              "name": "--indentation-stepping"
+            },
+            {
+              "description": "Display property of the children. Defaults to \"contents\"",
+              "name": "--display-children"
             }
           ],
           "cssParts": [
             {
-              "description": "The component's base wrapper.",
+              "description": "The component's base wrapper including children.",
               "name": "base"
             },
             {
-              "description": "The container that wraps prefix, label and base",
-              "name": "label-container"
+              "description": "The wrapper that holds the children",
+              "name": "children"
             },
             {
-              "description": "The divider that is displayed above the content",
+              "description": "The component's content wrapper.",
+              "name": "content-wrapper"
+            },
+            {
+              "description": "The component's content excluding children.",
+              "name": "content"
+            },
+            {
+              "description": "The indicator used when current is set to true",
+              "name": "current-indicator"
+            },
+            {
+              "description": "The container that wraps the chevron.",
+              "name": "chevron"
+            },
+            {
+              "description": "The details element rendered when there are children available",
+              "name": "details"
+            },
+            {
+              "description": "The components optional top divider.",
               "name": "divider"
             },
             {
@@ -4336,28 +4506,24 @@
             {
               "description": "The container that wraps the suffix.",
               "name": "suffix"
-            },
-            {
-              "description": "The container that wraps the <syn-option> elements.",
-              "name": "options"
             }
           ],
           "slots": [
             {
-              "description": "The given options. Must be `<syn-option>` elements.",
+              "description": "The navigation item's label.",
               "name": ""
             },
             {
               "description": "A presentational prefix icon or similar element.",
               "name": "prefix"
             },
-            {
-              "description": "The label for the optgroup",
-              "name": "label"
-            },
             {
               "description": "A presentational suffix icon or similar element.",
               "name": "suffix"
+            },
+            {
+              "description": "Slot used to provide nested child navigation elements. If provided, details and summary elements will be used. A chevron will be shown on the right side regardless of the chevron property.",
+              "name": "children"
             }
           ],
           "members": [
@@ -4375,259 +4541,354 @@
               "name": "hasSlotController",
               "privacy": "private",
               "readonly": true,
-              "default": "new HasSlotController(this, '[default]', 'prefix', 'suffix', 'label')"
+              "default": "new HasSlotController(this, '[default]', 'children', 'prefix', 'suffix')"
             },
             {
               "kind": "field",
-              "name": "defaultSlot",
+              "name": "resizeObserver",
               "type": {
-                "text": "HTMLSlotElement"
-              }
+                "text": "ResizeObserver"
+              },
+              "privacy": "private"
             },
             {
-              "kind": "method",
-              "name": "handleDisableOptions",
+              "kind": "field",
+              "name": "hasFocus",
+              "type": {
+                "text": "boolean"
+              },
               "privacy": "private",
-              "description": "Syncs the disabled prop for all slotted syn-options when it is triggered"
+              "default": "false",
+              "description": "The current focus state"
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "showPrefixOnly",
               "type": {
                 "text": "boolean"
               },
+              "privacy": "private",
               "default": "false",
-              "description": "Disables all options in the optgroup.",
-              "attribute": "disabled",
-              "reflects": true
+              "description": "Only the prefix should be displayed"
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "currentMarkedChild",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "The optgroups label. If you need to display HTML, use the `label` slot instead.",
-              "attribute": "label"
+              "privacy": "private",
+              "default": "false",
+              "description": "A nested nav-item is marked as current"
             },
             {
-              "kind": "method",
-              "name": "handleDisabledChange"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "disabled",
+              "kind": "field",
+              "name": "isMultiLine",
               "type": {
                 "text": "boolean"
               },
+              "privacy": "private",
               "default": "false",
-              "description": "Disables all options in the optgroup.",
-              "fieldName": "disabled"
+              "description": "The content area is multiline"
             },
             {
-              "name": "label",
+              "kind": "field",
+              "name": "childrenSlot",
               "type": {
-                "text": "string"
+                "text": "HTMLSlotElement"
               },
-              "default": "''",
-              "description": "The optgroups label. If you need to display HTML, use the `label` slot instead.",
-              "fieldName": "label"
-            }
-          ],
-          "superclass": {
-            "name": "SynergyElement",
-            "module": "/src/internal/synergy-element.js"
-          },
-          "summary": "The <syn-optgroup> element creates a grouping for <syn-option>s within a <syn-select>.",
-          "tagNameWithoutPrefix": "optgroup",
-          "tagName": "syn-optgroup",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary The <syn-optgroup> element creates a grouping for <syn-option>s within a <syn-select>.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-optgroup--docs\n * @status stable\n * @since 1.3.0\n *\n * @dependency syn-divider\n *\n * @slot - The given options. Must be `<syn-option>` elements.\n * @slot prefix - A presentational prefix icon or similar element.\n * @slot label - The label for the optgroup\n * @slot suffix - A presentational suffix icon or similar element.\n *\n * @csspart base - The component's base wrapper.\n * @csspart label-container - The container that wraps prefix, label and base\n * @csspart divider - The divider that is displayed above the content\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n * @csspart options - The container that wraps the <syn-option> elements.\n *\n * @cssproperty --display-divider - Display property of the divider. Defaults to \"block\"\n */",
-          "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-optgroup--docs",
-          "status": "stable",
-          "since": "1.3.0",
-          "dependencies": [
-            "syn-divider"
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "SynOptgroup",
-            "module": "components/optgroup/optgroup.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/option/option.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "SynOption",
-          "cssParts": [
-            {
-              "description": "The checked icon, an `<syn-icon>` element.",
-              "name": "checked-icon"
-            },
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            },
-            {
-              "description": "The option's label.",
-              "name": "label"
-            },
-            {
-              "description": "The container that wraps the prefix.",
-              "name": "prefix"
-            },
-            {
-              "description": "The container that wraps the suffix.",
-              "name": "suffix"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The option's label.",
-              "name": ""
+              "description": "Reference to the children slot"
             },
-            {
-              "description": "Used to prepend an icon or similar element to the menu item.",
-              "name": "prefix"
-            },
-            {
-              "description": "Used to append an icon or similar element to the menu item.",
-              "name": "suffix"
-            }
-          ],
-          "members": [
             {
               "kind": "field",
-              "name": "dependencies",
+              "name": "control",
               "type": {
-                "text": "object"
+                "text": "HTMLButtonElement | HTMLLinkElement | HTMLElement"
               },
-              "static": true,
-              "default": "{ 'syn-icon': SynIcon }"
+              "description": "Reference to the outermost button"
             },
             {
               "kind": "field",
-              "name": "cachedTextLabel",
+              "name": "href",
               "type": {
                 "text": "string"
               },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new LocalizeController(this)"
+              "description": "The navigation item's href target.\nIf provided, the navigation item will use an anchor tag otherwise it will use a button tag.\n\nIf the 'children' slot is provided, the navigation item will ignore the 'href' and use\naccordion behavior.",
+              "attribute": "href",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "defaultSlot",
+              "name": "current",
               "type": {
-                "text": "HTMLSlotElement"
-              }
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "current",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "current",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
-              "default": "false"
+              "default": "false",
+              "description": "Disables the navigation item.",
+              "attribute": "disabled",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "selected",
+              "name": "horizontal",
               "type": {
                 "text": "boolean"
               },
-              "default": "false"
+              "default": "false",
+              "description": "The navigation item's orientation.",
+              "attribute": "horizontal",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "hasHover",
+              "name": "chevron",
               "type": {
                 "text": "boolean"
               },
-              "default": "false"
+              "default": "false",
+              "description": "Appends a chevron to the right side of a navigation item.\nOnly used if `horizontal` is false.",
+              "attribute": "chevron",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "open",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\nmultiple values.",
-              "attribute": "value",
+              "default": "false",
+              "description": "Reflects HTML details element state and allows control from parent.\nOnly used if `horizontal` is false and `children` is defined.",
+              "attribute": "open",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "divider",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Draws the option in a disabled state, preventing selection.",
-              "attribute": "disabled",
+              "description": "Toggle to true to show a divider above the element.\nOnly available when horizontal is false.",
+              "attribute": "divider",
               "reflects": true
             },
             {
               "kind": "method",
-              "name": "handleDefaultSlotChange",
+              "name": "isButton",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "isLink",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "isAccordion",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "getNavItemChildren",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "SynNavItem[]"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "childrenSlot",
+                  "type": {
+                    "text": "HTMLSlotElement"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "getAllNestedNavItems",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "SynNavItem[]"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "childrenSlot",
+                  "type": {
+                    "text": "HTMLSlotElement"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleCurrentMarkedChild",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "handleMouseEnter",
+              "name": "handleClickButton",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleClickSummary",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "hideDetails",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "handleMouseLeave",
+              "name": "showDetails",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "handleDisabledChange"
+              "name": "handleSlotChange",
+              "privacy": "private",
+              "description": "Automatically add the correct level of indentation for sub items if none is provided"
             },
             {
               "kind": "method",
-              "name": "handleSelectedChange"
+              "name": "handleBlur",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "handleValueChange"
+              "name": "handleFocus",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "getTextLabel",
-              "description": "Returns a plain text label based on the option's content."
+              "name": "handleWidth",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "entries",
+                  "type": {
+                    "text": "ResizeObserverEntry[]"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleOpenChange"
+            },
+            {
+              "kind": "method",
+              "name": "blur",
+              "description": "Removes focus from the button."
+            },
+            {
+              "kind": "method",
+              "name": "click",
+              "description": "Simulates a click on the nav-items button, link or summary."
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "description": "Sets focus on the nav-item"
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted when the navigation item: - has children, - and is clicked while HTML details are hidden.",
+              "name": "syn-show",
+              "reactName": "onSynShow",
+              "eventName": "SynShowEvent"
+            },
+            {
+              "description": "Emitted when the navigation item: - has children, - and is clicked while HTML details are shown.",
+              "name": "syn-hide",
+              "reactName": "onSynHide",
+              "eventName": "SynHideEvent"
+            },
+            {
+              "description": "Emitted when the button loses focus.",
+              "name": "syn-blur",
+              "reactName": "onSynBlur",
+              "eventName": "SynBlurEvent"
+            },
+            {
+              "description": "Emitted when the button gains focus.",
+              "name": "syn-focus",
+              "reactName": "onSynFocus",
+              "eventName": "SynFocusEvent"
             }
           ],
           "attributes": [
             {
-              "name": "value",
+              "name": "href",
               "type": {
                 "text": "string"
               },
-              "default": "''",
-              "description": "The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\nmultiple values.",
-              "fieldName": "value"
+              "description": "The navigation item's href target.\nIf provided, the navigation item will use an anchor tag otherwise it will use a button tag.\n\nIf the 'children' slot is provided, the navigation item will ignore the 'href' and use\naccordion behavior.",
+              "fieldName": "href"
+            },
+            {
+              "name": "current",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "current"
             },
             {
               "name": "disabled",
@@ -4635,24 +4896,59 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Draws the option in a disabled state, preventing selection.",
+              "description": "Disables the navigation item.",
               "fieldName": "disabled"
+            },
+            {
+              "name": "horizontal",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The navigation item's orientation.",
+              "fieldName": "horizontal"
+            },
+            {
+              "name": "chevron",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Appends a chevron to the right side of a navigation item.\nOnly used if `horizontal` is false.",
+              "fieldName": "chevron"
+            },
+            {
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Reflects HTML details element state and allows control from parent.\nOnly used if `horizontal` is false and `children` is defined.",
+              "fieldName": "open"
+            },
+            {
+              "name": "divider",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Toggle to true to show a divider above the element.\nOnly available when horizontal is false.",
+              "fieldName": "divider"
             }
           ],
           "superclass": {
             "name": "SynergyElement",
             "module": "/src/internal/synergy-element.js"
           },
-          "summary": "Options define the selectable items within various form controls such as [select](/components/select).",
-          "tagNameWithoutPrefix": "option",
-          "tagName": "syn-option",
+          "summary": "Flexible button / link component that can be used to quickly build navigations.\nTakes one of 3 forms:\n- button (default),\n- link (overrides button if a 'href' is provided),\n- or accordion (overrides all other if 'children' slot is defined).",
+          "tagNameWithoutPrefix": "nav-item",
+          "tagName": "syn-nav-item",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Options define the selectable items within various form controls such as [select](/components/select).\n * @documentation https://synergy.style/components/option\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n *\n * @slot - The option's label.\n * @slot prefix - Used to prepend an icon or similar element to the menu item.\n * @slot suffix - Used to append an icon or similar element to the menu item.\n *\n * @csspart checked-icon - The checked icon, an `<syn-icon>` element.\n * @csspart base - The component's base wrapper.\n * @csspart label - The option's label.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n */",
-          "documentation": "https://synergy.style/components/option",
+          "jsDoc": "/**\n * @summary Flexible button / link component that can be used to quickly build navigations.\n * Takes one of 3 forms:\n * - button (default),\n * - link (overrides button if a 'href' is provided),\n * - or accordion (overrides all other if 'children' slot is defined).\n *\n * @status stable\n * @since 1.14.0\n *\n * @dependency syn-divider\n *\n * @event syn-show - Emitted when the navigation item:\n * - has children,\n * - and is clicked while HTML details are hidden.\n *\n * @event syn-hide - Emitted when the navigation item:\n * - has children,\n * - and is clicked while HTML details are shown.\n *\n * @event syn-blur - Emitted when the button loses focus.\n * @event syn-focus - Emitted when the button gains focus.\n *\n * @slot - The navigation item's label.\n * @slot prefix - A presentational prefix icon or similar element.\n * @slot suffix - A presentational suffix icon or similar element.\n * @slot children - Slot used to provide nested child navigation elements.\n * If provided, details and summary elements will be used.\n * A chevron will be shown on the right side regardless of the chevron property.\n *\n * @csspart base - The component's base wrapper including children.\n * @csspart children - The wrapper that holds the children\n * @csspart content-wrapper - The component's content wrapper.\n * @csspart content - The component's content excluding children.\n * @csspart current-indicator - The indicator used when current is set to true\n * @csspart chevron - The container that wraps the chevron.\n * @csspart details - The details element rendered when there are children available\n * @csspart divider - The components optional top divider.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n *\n * @cssproperty --indentation - Numeric value, indicating the level the item is placed at.\n * @cssproperty --indentation-stepping - The amount of pixels each level will indent.\n * @cssproperty --display-children - Display property of the children. Defaults to \"contents\"\n */",
           "status": "stable",
-          "since": "2.0",
+          "since": "1.14.0",
           "dependencies": [
-            "syn-icon"
+            "syn-divider"
           ]
         }
       ],
@@ -4661,397 +4957,762 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SynOption",
-            "module": "components/option/option.js"
+            "name": "SynNavItem",
+            "module": "components/nav-item/nav-item.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/popup/popup.js",
+      "path": "components/optgroup/optgroup.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SynPopup",
+          "name": "SynOptgroup",
           "cssProperties": [
             {
-              "description": "The size of the arrow. Note that an arrow won't be shown unless the `arrow` attribute is used.",
-              "name": "--arrow-size",
-              "default": "6px"
-            },
-            {
-              "description": "The color of the arrow.",
-              "name": "--arrow-color",
-              "default": "var(--syn-color-neutral-0)"
+              "description": "Display property of the divider. Defaults to \"block\"",
+              "name": "--display-divider"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
             },
             {
-              "description": "A read-only custom property that determines the amount of width the popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only available when using `auto-size`.",
-              "name": "--auto-size-available-width"
+              "description": "The container that wraps prefix, label and base",
+              "name": "label-container"
             },
             {
-              "description": "A read-only custom property that determines the amount of height the popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only available when using `auto-size`.",
-              "name": "--auto-size-available-height"
-            }
-          ],
-          "cssParts": [
+              "description": "The divider that is displayed above the content",
+              "name": "divider"
+            },
             {
-              "description": "The arrow's container. Avoid setting `top|bottom|left|right` properties, as these values are assigned dynamically as the popup moves. This is most useful for applying a background color to match the popup, and maybe a border or box shadow.",
-              "name": "arrow"
+              "description": "The container that wraps the prefix.",
+              "name": "prefix"
             },
             {
-              "description": "The popup's container. Useful for setting a background color, box shadow, etc.",
-              "name": "popup"
+              "description": "The container that wraps the suffix.",
+              "name": "suffix"
             },
             {
-              "description": "The hover bridge element. Only available when the `hover-bridge` option is enabled.",
-              "name": "hover-bridge"
+              "description": "The container that wraps the <syn-option> elements.",
+              "name": "options"
             }
           ],
           "slots": [
             {
-              "description": "The popup's content.",
+              "description": "The given options. Must be `<syn-option>` elements.",
               "name": ""
             },
             {
-              "description": "The element the popup will be anchored to. If the anchor lives outside of the popup, you can use the `anchor` attribute or property instead.",
-              "name": "anchor"
+              "description": "A presentational prefix icon or similar element.",
+              "name": "prefix"
+            },
+            {
+              "description": "The label for the optgroup",
+              "name": "label"
+            },
+            {
+              "description": "A presentational suffix icon or similar element.",
+              "name": "suffix"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "anchorEl",
+              "name": "dependencies",
               "type": {
-                "text": "Element | VirtualElement | null"
+                "text": "object"
               },
-              "privacy": "private"
+              "static": true,
+              "default": "{\n    'syn-divider': SynDivider,\n  }"
             },
             {
               "kind": "field",
-              "name": "cleanup",
-              "type": {
-                "text": "ReturnType<typeof autoUpdate> | undefined"
-              },
-              "privacy": "private"
+              "name": "hasSlotController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new HasSlotController(this, '[default]', 'prefix', 'suffix', 'label')"
             },
             {
               "kind": "field",
-              "name": "popup",
+              "name": "defaultSlot",
               "type": {
-                "text": "HTMLElement"
-              },
-              "description": "A reference to the internal popup container. Useful for animating and styling the popup with JavaScript."
+                "text": "HTMLSlotElement"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleDisableOptions",
+              "privacy": "private",
+              "description": "Syncs the disabled prop for all slotted syn-options when it is triggered"
             },
             {
               "kind": "field",
-              "name": "arrowEl",
+              "name": "disabled",
               "type": {
-                "text": "HTMLElement"
+                "text": "boolean"
               },
-              "privacy": "private"
+              "default": "false",
+              "description": "Disables all options in the optgroup.",
+              "attribute": "disabled",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "anchor",
+              "name": "label",
               "type": {
-                "text": "Element | string | VirtualElement"
+                "text": "string"
               },
-              "description": "The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide the anchor\nelement `id`, a DOM element reference, or a `VirtualElement`. If the anchor lives inside the popup, use the\n`anchor` slot instead.",
-              "attribute": "anchor"
+              "default": "''",
+              "description": "The optgroups label. If you need to display HTML, use the `label` slot instead.",
+              "attribute": "label"
             },
             {
-              "kind": "field",
-              "name": "active",
+              "kind": "method",
+              "name": "handleDisabledChange"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn\ndown and the popup will be hidden.",
-              "attribute": "active",
-              "reflects": true
+              "description": "Disables all options in the optgroup.",
+              "fieldName": "disabled"
             },
             {
-              "kind": "field",
-              "name": "placement",
+              "name": "label",
               "type": {
-                "text": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'"
+                "text": "string"
               },
-              "default": "'top'",
-              "description": "The preferred placement of the popup. Note that the actual placement will vary as configured to keep the\npanel inside of the viewport.",
-              "attribute": "placement",
-              "reflects": true
+              "default": "''",
+              "description": "The optgroups label. If you need to display HTML, use the `label` slot instead.",
+              "fieldName": "label"
+            }
+          ],
+          "superclass": {
+            "name": "SynergyElement",
+            "module": "/src/internal/synergy-element.js"
+          },
+          "summary": "The <syn-optgroup> element creates a grouping for <syn-option>s within a <syn-select>.",
+          "tagNameWithoutPrefix": "optgroup",
+          "tagName": "syn-optgroup",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary The <syn-optgroup> element creates a grouping for <syn-option>s within a <syn-select>.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-optgroup--docs\n * @status stable\n * @since 1.3.0\n *\n * @dependency syn-divider\n *\n * @slot - The given options. Must be `<syn-option>` elements.\n * @slot prefix - A presentational prefix icon or similar element.\n * @slot label - The label for the optgroup\n * @slot suffix - A presentational suffix icon or similar element.\n *\n * @csspart base - The component's base wrapper.\n * @csspart label-container - The container that wraps prefix, label and base\n * @csspart divider - The divider that is displayed above the content\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n * @csspart options - The container that wraps the <syn-option> elements.\n *\n * @cssproperty --display-divider - Display property of the divider. Defaults to \"block\"\n */",
+          "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-optgroup--docs",
+          "status": "stable",
+          "since": "1.3.0",
+          "dependencies": [
+            "syn-divider"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SynOptgroup",
+            "module": "components/optgroup/optgroup.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/option/option.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SynOption",
+          "cssParts": [
+            {
+              "description": "The checked icon, an `<syn-icon>` element.",
+              "name": "checked-icon"
+            },
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            },
+            {
+              "description": "The option's label.",
+              "name": "label"
+            },
+            {
+              "description": "The container that wraps the prefix.",
+              "name": "prefix"
+            },
+            {
+              "description": "The container that wraps the suffix.",
+              "name": "suffix"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The option's label.",
+              "name": ""
             },
+            {
+              "description": "Used to prepend an icon or similar element to the menu item.",
+              "name": "prefix"
+            },
+            {
+              "description": "Used to append an icon or similar element to the menu item.",
+              "name": "suffix"
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "strategy",
+              "name": "dependencies",
               "type": {
-                "text": "'absolute' | 'fixed'"
+                "text": "object"
               },
-              "default": "'absolute'",
-              "description": "Determines how the popup is positioned. The `absolute` strategy works well in most cases, but if overflow is\nclipped, using a `fixed` position strategy can often workaround it.",
-              "attribute": "strategy",
-              "reflects": true
+              "static": true,
+              "default": "{ 'syn-icon': SynIcon }"
             },
             {
               "kind": "field",
-              "name": "distance",
+              "name": "cachedTextLabel",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "0",
-              "description": "The distance in pixels from which to offset the panel away from its anchor.",
-              "attribute": "distance"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "skidding",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "The distance in pixels from which to offset the panel along its anchor.",
-              "attribute": "skidding"
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
             },
             {
               "kind": "field",
-              "name": "arrow",
+              "name": "defaultSlot",
               "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Attaches an arrow to the popup. The arrow's size and color can be customized using the `--arrow-size` and\n`--arrow-color` custom properties. For additional customizations, you can also target the arrow using\n`::part(arrow)` in your stylesheet.",
-              "attribute": "arrow"
+                "text": "HTMLSlotElement"
+              }
             },
             {
               "kind": "field",
-              "name": "arrowPlacement",
+              "name": "current",
               "type": {
-                "text": "'start' | 'end' | 'center' | 'anchor'"
+                "text": "boolean"
               },
-              "default": "'anchor'",
-              "description": "The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the\nanchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will\nalign the arrow to the start, end, or center of the popover instead.",
-              "attribute": "arrow-placement"
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "arrowPadding",
+              "name": "selected",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "default": "10",
-              "description": "The amount of padding between the arrow and the edges of the popup. If the popup has a border-radius, for example,\nthis will prevent it from overflowing the corners.",
-              "attribute": "arrow-padding"
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "flip",
+              "name": "hasHover",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "description": "When set, placement of the popup will flip to the opposite site to keep it in view. You can use\n`flipFallbackPlacements` to further configure how the fallback placement is determined.",
-              "attribute": "flip"
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "flipFallbackPlacements",
+              "name": "value",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "If the preferred placement doesn't fit, popup will be tested in these fallback placements until one fits. Must be a\nstring of any number of placements separated by a space, e.g. \"top bottom left\". If no placement fits, the flip\nfallback strategy will be used instead.",
-              "attribute": "flip-fallback-placements"
+              "description": "The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\nmultiple values.",
+              "attribute": "value",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "flipFallbackStrategy",
+              "name": "disabled",
               "type": {
-                "text": "'best-fit' | 'initial'"
+                "text": "boolean"
               },
-              "default": "'best-fit'",
-              "description": "When neither the preferred placement nor the fallback placements fit, this value will be used to determine whether\nthe popup should be positioned using the best available fit based on available space or as it was initially\npreferred.",
-              "attribute": "flip-fallback-strategy"
+              "default": "false",
+              "description": "Draws the option in a disabled state, preventing selection.",
+              "attribute": "disabled",
+              "reflects": true
             },
             {
-              "kind": "field",
-              "name": "flipBoundary",
-              "type": {
-                "text": "Element | Element[]"
-              },
-              "description": "The flip boundary describes clipping element(s) that overflow will be checked relative to when flipping. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
-              "attribute": "flipBoundary"
+              "kind": "method",
+              "name": "handleDefaultSlotChange",
+              "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "flipPadding",
+              "kind": "method",
+              "name": "handleMouseEnter",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleMouseLeave",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleDisabledChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleSelectedChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleValueChange"
+            },
+            {
+              "kind": "method",
+              "name": "getTextLabel",
+              "description": "Returns a plain text label based on the option's content."
+            }
+          ],
+          "attributes": [
+            {
+              "name": "value",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "0",
-              "description": "The amount of padding, in pixels, to exceed before the flip behavior will occur.",
-              "attribute": "flip-padding"
+              "default": "''",
+              "description": "The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\nmultiple values.",
+              "fieldName": "value"
             },
             {
-              "kind": "field",
-              "name": "shift",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Moves the popup along the axis to keep it in view when clipped.",
-              "attribute": "shift"
+              "description": "Draws the option in a disabled state, preventing selection.",
+              "fieldName": "disabled"
+            }
+          ],
+          "superclass": {
+            "name": "SynergyElement",
+            "module": "/src/internal/synergy-element.js"
+          },
+          "summary": "Options define the selectable items within various form controls such as [select](/components/select).",
+          "tagNameWithoutPrefix": "option",
+          "tagName": "syn-option",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Options define the selectable items within various form controls such as [select](/components/select).\n * @documentation https://synergy.style/components/option\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n *\n * @slot - The option's label.\n * @slot prefix - Used to prepend an icon or similar element to the menu item.\n * @slot suffix - Used to append an icon or similar element to the menu item.\n *\n * @csspart checked-icon - The checked icon, an `<syn-icon>` element.\n * @csspart base - The component's base wrapper.\n * @csspart label - The option's label.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n */",
+          "documentation": "https://synergy.style/components/option",
+          "status": "stable",
+          "since": "2.0",
+          "dependencies": [
+            "syn-icon"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SynOption",
+            "module": "components/option/option.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/popup/popup.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SynPopup",
+          "cssProperties": [
+            {
+              "description": "The size of the arrow. Note that an arrow won't be shown unless the `arrow` attribute is used.",
+              "name": "--arrow-size",
+              "default": "6px"
             },
             {
-              "kind": "field",
-              "name": "shiftBoundary",
-              "type": {
-                "text": "Element | Element[]"
-              },
-              "description": "The shift boundary describes clipping element(s) that overflow will be checked relative to when shifting. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
-              "attribute": "shiftBoundary"
+              "description": "The color of the arrow.",
+              "name": "--arrow-color",
+              "default": "var(--syn-color-neutral-0)"
             },
             {
-              "kind": "field",
-              "name": "shiftPadding",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "The amount of padding, in pixels, to exceed before the shift behavior will occur.",
-              "attribute": "shift-padding"
+              "description": "A read-only custom property that determines the amount of width the popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only available when using `auto-size`.",
+              "name": "--auto-size-available-width"
             },
             {
-              "kind": "field",
-              "name": "autoSize",
-              "type": {
-                "text": "'horizontal' | 'vertical' | 'both'"
-              },
-              "description": "When set, this will cause the popup to automatically resize itself to prevent it from overflowing.",
-              "attribute": "auto-size"
+              "description": "A read-only custom property that determines the amount of height the popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only available when using `auto-size`.",
+              "name": "--auto-size-available-height"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The arrow's container. Avoid setting `top|bottom|left|right` properties, as these values are assigned dynamically as the popup moves. This is most useful for applying a background color to match the popup, and maybe a border or box shadow.",
+              "name": "arrow"
+            },
+            {
+              "description": "The popup's container. Useful for setting a background color, box shadow, etc.",
+              "name": "popup"
+            },
+            {
+              "description": "The hover bridge element. Only available when the `hover-bridge` option is enabled.",
+              "name": "hover-bridge"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The popup's content.",
+              "name": ""
             },
+            {
+              "description": "The element the popup will be anchored to. If the anchor lives outside of the popup, you can use the `anchor` attribute or property instead.",
+              "name": "anchor"
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "sync",
+              "name": "anchorEl",
               "type": {
-                "text": "'width' | 'height' | 'both'"
+                "text": "Element | VirtualElement | null"
               },
-              "description": "Syncs the popup's width or height to that of the anchor element.",
-              "attribute": "sync"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "autoSizeBoundary",
+              "name": "cleanup",
               "type": {
-                "text": "Element | Element[]"
+                "text": "ReturnType<typeof autoUpdate> | undefined"
               },
-              "description": "The auto-size boundary describes clipping element(s) that overflow will be checked relative to when resizing. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
-              "attribute": "autoSizeBoundary"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "autoSizePadding",
+              "name": "popup",
               "type": {
-                "text": "number"
+                "text": "HTMLElement"
               },
-              "default": "0",
-              "description": "The amount of padding, in pixels, to exceed before the auto-size behavior will occur.",
-              "attribute": "auto-size-padding"
+              "description": "A reference to the internal popup container. Useful for animating and styling the popup with JavaScript."
             },
             {
               "kind": "field",
-              "name": "hoverBridge",
+              "name": "arrowEl",
               "type": {
-                "text": "boolean"
+                "text": "HTMLElement"
               },
-              "default": "false",
-              "description": "When a gap exists between the anchor and the popup element, this option will add a \"hover bridge\" that fills the\ngap using an invisible element. This makes listening for events such as `mouseenter` and `mouseleave` more sane\nbecause the pointer never technically leaves the element. The hover bridge will only be drawn when the popover is\nactive.",
-              "attribute": "hover-bridge"
-            },
-            {
-              "kind": "method",
-              "name": "handleAnchorChange",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "start",
               "privacy": "private"
             },
-            {
-              "kind": "method",
-              "name": "stop",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "Promise<void>"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "reposition",
-              "description": "Forces the popup to recalculate and reposition itself."
-            },
             {
               "kind": "field",
-              "name": "updateHoverBridge",
-              "privacy": "private"
-            }
-          ],
-          "events": [
-            {
-              "description": "Emitted when the popup is repositioned. This event can fire a lot, so avoid putting expensive operations in your listener or consider debouncing it.",
-              "name": "syn-reposition",
-              "reactName": "onSynReposition",
-              "eventName": "SynRepositionEvent"
-            }
-          ],
-          "attributes": [
-            {
               "name": "anchor",
               "type": {
                 "text": "Element | string | VirtualElement"
               },
               "description": "The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide the anchor\nelement `id`, a DOM element reference, or a `VirtualElement`. If the anchor lives inside the popup, use the\n`anchor` slot instead.",
-              "fieldName": "anchor"
+              "attribute": "anchor"
             },
             {
+              "kind": "field",
               "name": "active",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn\ndown and the popup will be hidden.",
-              "fieldName": "active"
+              "attribute": "active",
+              "reflects": true
             },
             {
+              "kind": "field",
               "name": "placement",
               "type": {
                 "text": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'"
               },
               "default": "'top'",
               "description": "The preferred placement of the popup. Note that the actual placement will vary as configured to keep the\npanel inside of the viewport.",
-              "fieldName": "placement"
+              "attribute": "placement",
+              "reflects": true
             },
             {
+              "kind": "field",
               "name": "strategy",
               "type": {
                 "text": "'absolute' | 'fixed'"
               },
               "default": "'absolute'",
               "description": "Determines how the popup is positioned. The `absolute` strategy works well in most cases, but if overflow is\nclipped, using a `fixed` position strategy can often workaround it.",
-              "fieldName": "strategy"
+              "attribute": "strategy",
+              "reflects": true
             },
             {
+              "kind": "field",
               "name": "distance",
               "type": {
                 "text": "number"
               },
               "default": "0",
               "description": "The distance in pixels from which to offset the panel away from its anchor.",
-              "fieldName": "distance"
+              "attribute": "distance"
+            },
+            {
+              "kind": "field",
+              "name": "skidding",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The distance in pixels from which to offset the panel along its anchor.",
+              "attribute": "skidding"
+            },
+            {
+              "kind": "field",
+              "name": "arrow",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Attaches an arrow to the popup. The arrow's size and color can be customized using the `--arrow-size` and\n`--arrow-color` custom properties. For additional customizations, you can also target the arrow using\n`::part(arrow)` in your stylesheet.",
+              "attribute": "arrow"
+            },
+            {
+              "kind": "field",
+              "name": "arrowPlacement",
+              "type": {
+                "text": "'start' | 'end' | 'center' | 'anchor'"
+              },
+              "default": "'anchor'",
+              "description": "The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the\nanchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will\nalign the arrow to the start, end, or center of the popover instead.",
+              "attribute": "arrow-placement"
+            },
+            {
+              "kind": "field",
+              "name": "arrowPadding",
+              "type": {
+                "text": "number"
+              },
+              "default": "10",
+              "description": "The amount of padding between the arrow and the edges of the popup. If the popup has a border-radius, for example,\nthis will prevent it from overflowing the corners.",
+              "attribute": "arrow-padding"
+            },
+            {
+              "kind": "field",
+              "name": "flip",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When set, placement of the popup will flip to the opposite site to keep it in view. You can use\n`flipFallbackPlacements` to further configure how the fallback placement is determined.",
+              "attribute": "flip"
+            },
+            {
+              "kind": "field",
+              "name": "flipFallbackPlacements",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "If the preferred placement doesn't fit, popup will be tested in these fallback placements until one fits. Must be a\nstring of any number of placements separated by a space, e.g. \"top bottom left\". If no placement fits, the flip\nfallback strategy will be used instead.",
+              "attribute": "flip-fallback-placements"
+            },
+            {
+              "kind": "field",
+              "name": "flipFallbackStrategy",
+              "type": {
+                "text": "'best-fit' | 'initial'"
+              },
+              "default": "'best-fit'",
+              "description": "When neither the preferred placement nor the fallback placements fit, this value will be used to determine whether\nthe popup should be positioned using the best available fit based on available space or as it was initially\npreferred.",
+              "attribute": "flip-fallback-strategy"
+            },
+            {
+              "kind": "field",
+              "name": "flipBoundary",
+              "type": {
+                "text": "Element | Element[]"
+              },
+              "description": "The flip boundary describes clipping element(s) that overflow will be checked relative to when flipping. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
+              "attribute": "flipBoundary"
+            },
+            {
+              "kind": "field",
+              "name": "flipPadding",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The amount of padding, in pixels, to exceed before the flip behavior will occur.",
+              "attribute": "flip-padding"
+            },
+            {
+              "kind": "field",
+              "name": "shift",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Moves the popup along the axis to keep it in view when clipped.",
+              "attribute": "shift"
+            },
+            {
+              "kind": "field",
+              "name": "shiftBoundary",
+              "type": {
+                "text": "Element | Element[]"
+              },
+              "description": "The shift boundary describes clipping element(s) that overflow will be checked relative to when shifting. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
+              "attribute": "shiftBoundary"
+            },
+            {
+              "kind": "field",
+              "name": "shiftPadding",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The amount of padding, in pixels, to exceed before the shift behavior will occur.",
+              "attribute": "shift-padding"
+            },
+            {
+              "kind": "field",
+              "name": "autoSize",
+              "type": {
+                "text": "'horizontal' | 'vertical' | 'both'"
+              },
+              "description": "When set, this will cause the popup to automatically resize itself to prevent it from overflowing.",
+              "attribute": "auto-size"
+            },
+            {
+              "kind": "field",
+              "name": "sync",
+              "type": {
+                "text": "'width' | 'height' | 'both'"
+              },
+              "description": "Syncs the popup's width or height to that of the anchor element.",
+              "attribute": "sync"
+            },
+            {
+              "kind": "field",
+              "name": "autoSizeBoundary",
+              "type": {
+                "text": "Element | Element[]"
+              },
+              "description": "The auto-size boundary describes clipping element(s) that overflow will be checked relative to when resizing. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
+              "attribute": "autoSizeBoundary"
+            },
+            {
+              "kind": "field",
+              "name": "autoSizePadding",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The amount of padding, in pixels, to exceed before the auto-size behavior will occur.",
+              "attribute": "auto-size-padding"
+            },
+            {
+              "kind": "field",
+              "name": "hoverBridge",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When a gap exists between the anchor and the popup element, this option will add a \"hover bridge\" that fills the\ngap using an invisible element. This makes listening for events such as `mouseenter` and `mouseleave` more sane\nbecause the pointer never technically leaves the element. The hover bridge will only be drawn when the popover is\nactive.",
+              "attribute": "hover-bridge"
+            },
+            {
+              "kind": "method",
+              "name": "handleAnchorChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "start",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "stop",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "reposition",
+              "description": "Forces the popup to recalculate and reposition itself."
+            },
+            {
+              "kind": "field",
+              "name": "updateHoverBridge",
+              "privacy": "private"
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted when the popup is repositioned. This event can fire a lot, so avoid putting expensive operations in your listener or consider debouncing it.",
+              "name": "syn-reposition",
+              "reactName": "onSynReposition",
+              "eventName": "SynRepositionEvent"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "anchor",
+              "type": {
+                "text": "Element | string | VirtualElement"
+              },
+              "description": "The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide the anchor\nelement `id`, a DOM element reference, or a `VirtualElement`. If the anchor lives inside the popup, use the\n`anchor` slot instead.",
+              "fieldName": "anchor"
+            },
+            {
+              "name": "active",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn\ndown and the popup will be hidden.",
+              "fieldName": "active"
+            },
+            {
+              "name": "placement",
+              "type": {
+                "text": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'"
+              },
+              "default": "'top'",
+              "description": "The preferred placement of the popup. Note that the actual placement will vary as configured to keep the\npanel inside of the viewport.",
+              "fieldName": "placement"
+            },
+            {
+              "name": "strategy",
+              "type": {
+                "text": "'absolute' | 'fixed'"
+              },
+              "default": "'absolute'",
+              "description": "Determines how the popup is positioned. The `absolute` strategy works well in most cases, but if overflow is\nclipped, using a `fixed` position strategy can often workaround it.",
+              "fieldName": "strategy"
+            },
+            {
+              "name": "distance",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The distance in pixels from which to offset the panel away from its anchor.",
+              "fieldName": "distance"
             },
             {
               "name": "skidding",
@@ -5229,28 +5890,253 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/radio/radio.js",
+      "path": "components/prio-nav/prio-nav.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SynRadio",
+          "name": "SynPrioNav",
           "cssParts": [
             {
               "description": "The component's base wrapper.",
               "name": "base"
             },
             {
-              "description": "The circular container that wraps the radio's checked state.",
-              "name": "control"
+              "description": "The wrapper around the priority menu",
+              "name": "priority-menu"
             },
             {
-              "description": "The radio control when the radio is checked.",
-              "name": "control--checked"
+              "description": "The navigation item for the priority menu",
+              "name": "priority-menu-nav-item"
             },
             {
-              "description": "The checked icon, an `<syn-icon>` element.",
-              "name": "checked-icon"
+              "description": "The label for the priority menu",
+              "name": "priority-menu-label"
+            },
+            {
+              "description": "The icon for the priority menu",
+              "name": "priority-menu-icon"
+            },
+            {
+              "description": "The container for the shifted navigation items, if there is not enough space.",
+              "name": "priority-menu-container"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The given navigation items. Must be horizontal `<syn-nav-item>`s or have a role of \"menuitem\"",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "dependencies",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{\n    'syn-dropdown': SynDropdown,\n    'syn-icon': SynIcon,\n    'syn-menu': SynMenu,\n    'syn-nav-item': SynNavItem,\n  }"
+            },
+            {
+              "kind": "field",
+              "name": "resizeObserver",
+              "type": {
+                "text": "ResizeObserver"
+              },
+              "privacy": "private",
+              "description": "Internal resize observer"
+            },
+            {
+              "kind": "field",
+              "name": "defaultSlot",
+              "type": {
+                "text": "HTMLSlotElement"
+              },
+              "privacy": "private",
+              "description": "Reference to the rendered children slot"
+            },
+            {
+              "kind": "field",
+              "name": "menuSlot",
+              "type": {
+                "text": "HTMLSlotElement"
+              },
+              "privacy": "private",
+              "description": "Reference to the slot where priority menu items are placed"
+            },
+            {
+              "kind": "field",
+              "name": "horizontalNav",
+              "type": {
+                "text": "HTMLDivElement"
+              },
+              "privacy": "private",
+              "description": "The wrapper that holds the horizontal navigation items"
+            },
+            {
+              "kind": "field",
+              "name": "priorityMenu",
+              "type": {
+                "text": "SynDropdown"
+              },
+              "privacy": "private",
+              "description": "The priority menu dropdown"
+            },
+            {
+              "kind": "field",
+              "name": "priorityMenuLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Menu'",
+              "description": "The components priority menu label.\nThis will be shown after the priority menu 3 dots link",
+              "attribute": "priority-menu-label"
+            },
+            {
+              "kind": "field",
+              "name": "itemPositionsCached",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "Internal state reflecting if the item positions have been cached"
+            },
+            {
+              "kind": "field",
+              "name": "amountOfNavItems",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0",
+              "description": "The amount of nav items that are currently slotted"
+            },
+            {
+              "kind": "field",
+              "name": "amountOfVisibleItems",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0",
+              "description": "The amount of items that are currently visible"
+            },
+            {
+              "kind": "field",
+              "name": "hasItemsInDropdown",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "Internal state reflecting if there are items in the priority menu"
+            },
+            {
+              "kind": "method",
+              "name": "getSlottedNavItems",
+              "privacy": "private",
+              "description": "Get a list of all slotted `<syn-nav-item />` elements\nthat are either in the main slot or the priority menu slot"
+            },
+            {
+              "kind": "method",
+              "name": "cacheItemPositions",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "items",
+                  "type": {
+                    "text": "SynNavItem[]"
+                  },
+                  "description": "The items to cache the position for"
+                }
+              ],
+              "description": "Cache the items right offset position to make faster checks placement into priority menu"
+            },
+            {
+              "kind": "method",
+              "name": "handlePriorityMenu",
+              "privacy": "private",
+              "description": "Determines which items should be shown or hidden, depending on the current width"
+            },
+            {
+              "kind": "method",
+              "name": "renderPriorityMenu",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "slotChange",
+              "privacy": "private"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "priority-menu-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Menu'",
+              "description": "The components priority menu label.\nThis will be shown after the priority menu 3 dots link",
+              "fieldName": "priorityMenuLabel"
+            }
+          ],
+          "superclass": {
+            "name": "SynergyElement",
+            "module": "/src/internal/synergy-element.js"
+          },
+          "summary": "The `<syn-prio-nav />` element provides a generic navigation bar\nthat can be used to group multiple navigation items  (usually horizontal `<syn-nav-item />`s)\ntogether. It will automatically group all items not visible in the viewport into a custom\npriority menu.",
+          "tagNameWithoutPrefix": "prio-nav",
+          "tagName": "syn-prio-nav",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary The `<syn-prio-nav />` element provides a generic navigation bar\n * that can be used to group multiple navigation items  (usually horizontal `<syn-nav-item />`s)\n * together. It will automatically group all items not visible in the viewport into a custom\n * priority menu.\n *\n * @example\n * <syn-prio-nav>\n *  <syn-nav-item current horizontal>Item 1</syn-nav-item>\n *  <button role=\"menuitem\">Item 2 (custom)</button>\n *  <syn-nav-item horizontal>Item 3</syn-nav-item>\n * </syn-prio-nav>\n *\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-prio-nav--docs\n * @status stable\n * @since 1.14.0\n *\n * @dependency syn-dropdown\n * @dependency syn-icon\n * @dependency syn-menu\n * @dependency syn-nav-item\n *\n * @slot - The given navigation items. Must be horizontal `<syn-nav-item>`s\n *    or have a role of \"menuitem\"\n *\n * @csspart base - The component's base wrapper.\n * @csspart priority-menu - The wrapper around the priority menu\n * @csspart priority-menu-nav-item - The navigation item for the priority menu\n * @csspart priority-menu-label - The label for the priority menu\n * @csspart priority-menu-icon - The icon for the priority menu\n * @csspart priority-menu-container - The container for the shifted navigation items,\n *    if there is not enough space.\n *\n */",
+          "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-prio-nav--docs",
+          "status": "stable",
+          "since": "1.14.0",
+          "dependencies": [
+            "syn-dropdown",
+            "syn-icon",
+            "syn-menu",
+            "syn-nav-item"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SynPrioNav",
+            "module": "components/prio-nav/prio-nav.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/radio/radio.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SynRadio",
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            },
+            {
+              "description": "The circular container that wraps the radio's checked state.",
+              "name": "control"
+            },
+            {
+              "description": "The radio control when the radio is checked.",
+              "name": "control--checked"
+            },
+            {
+              "description": "The checked icon, an `<syn-icon>` element.",
+              "name": "checked-icon"
             },
             {
               "description": "The container that wraps the radio's label.",
@@ -6689,315 +7575,655 @@
             },
             {
               "kind": "method",
-              "name": "handleInvalid",
+              "name": "handleInvalid",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleDisabledChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleValueChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleOpenChange"
+            },
+            {
+              "kind": "method",
+              "name": "show",
+              "description": "Shows the listbox."
+            },
+            {
+              "kind": "method",
+              "name": "hide",
+              "description": "Hides the listbox."
+            },
+            {
+              "kind": "method",
+              "name": "checkValidity",
+              "description": "Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid."
+            },
+            {
+              "kind": "method",
+              "name": "getForm",
+              "return": {
+                "type": {
+                  "text": "HTMLFormElement | null"
+                }
+              },
+              "description": "Gets the associated form, if one exists."
+            },
+            {
+              "kind": "method",
+              "name": "reportValidity",
+              "description": "Checks for validity and shows the browser's validation message if the control is invalid."
+            },
+            {
+              "kind": "method",
+              "name": "setCustomValidity",
+              "parameters": [
+                {
+                  "name": "message",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Sets a custom validation message. Pass an empty string to restore validity."
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "description": "Sets focus on the control."
+            },
+            {
+              "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": "Emitted when the control's value is cleared.",
+              "name": "syn-clear",
+              "reactName": "onSynClear",
+              "eventName": "SynClearEvent"
+            },
+            {
+              "description": "Emitted when the control receives input.",
+              "name": "syn-input",
+              "reactName": "onSynInput",
+              "eventName": "SynInputEvent"
+            },
+            {
+              "description": "Emitted when the control gains focus.",
+              "name": "syn-focus",
+              "reactName": "onSynFocus",
+              "eventName": "SynFocusEvent"
+            },
+            {
+              "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": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The name of the select, submitted as a name/value pair with form data.",
+              "fieldName": "name"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string | string[]"
+              },
+              "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"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The select's size.",
+              "fieldName": "size"
+            },
+            {
+              "name": "placeholder",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Placeholder text to show as a hint when the select is empty.",
+              "fieldName": "placeholder"
+            },
+            {
+              "name": "multiple",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Allows more than one option to be selected.",
+              "fieldName": "multiple"
+            },
+            {
+              "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.",
+              "fieldName": "maxOptionsVisible"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the select control.",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "clearable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Adds a clear button when the select is not empty.",
+              "fieldName": "clearable"
+            },
+            {
+              "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"
+            },
+            {
+              "name": "hoist",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
+              "fieldName": "hoist"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The select's label. If you need to display HTML, use the `label` slot instead.",
+              "fieldName": "label"
+            },
+            {
+              "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"
+            },
+            {
+              "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"
+            },
+            {
+              "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"
+            },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The select's required attribute.",
+              "fieldName": "required"
+            },
+            {
+              "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.",
+              "fieldName": "getTag"
+            }
+          ],
+          "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.style/components/select\n * @status stable\n * @since 2.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 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, combobox, clear icon, and expand button.\n * @csspart prefix - The container that wraps the prefix 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 */",
+          "documentation": "https://synergy.style/components/select",
+          "status": "stable",
+          "since": "2.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": [
+            {
+              "description": "The width of the side-nav if in open state",
+              "name": "--side-nav-open-width"
+            },
+            {
+              "description": "The width of the side-nav if in rail mode without open",
+              "name": "--side-nav-rail-width"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The components base wrapper",
+              "name": "base"
+            },
+            {
+              "description": "The drawer that is used under the hood for creating the side-nav",
+              "name": "drawer"
+            },
+            {
+              "description": "The components main content container",
+              "name": "content-container"
+            },
+            {
+              "description": "The components main content",
+              "name": "content"
+            },
+            {
+              "description": "The components footer content container",
+              "name": "footer-container"
+            },
+            {
+              "description": "The components footer divider",
+              "name": "footer-divider"
+            },
+            {
+              "description": "The components footer content",
+              "name": "footer"
+            },
+            {
+              "description": "The overlay that covers the screen behind the side-nav.",
+              "name": "overlay"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The main content of the side-nav. Used for <syn-nav-item /> elements.",
+              "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"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "dependencies",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{\n    'syn-divider': SynDivider,\n    'syn-drawer': SynDrawer,\n  }"
+            },
+            {
+              "kind": "field",
+              "name": "hasSlotController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new HasSlotController(this, '[default]', 'footer')"
+            },
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "timeout",
+              "type": {
+                "text": "NodeJS.Timeout"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "isAnimationActive",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "Current animation active state"
+            },
+            {
+              "kind": "field",
+              "name": "drawer",
+              "type": {
+                "text": "SynDrawer"
+              },
+              "privacy": "private",
+              "description": "Reference to the drawer"
+            },
+            {
+              "kind": "field",
+              "name": "open",
+              "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 if the rail attribute is set or not, the behavior will differ.\n\n__Non rail__:\nWith `open` will show the side-nav.\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.",
+              "attribute": "open",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "rail",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Use the rail attribute to 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.\n\nNote: The Rail is only an option if all Navigation Items on the first level have an Icon.\nIf this is not the case you should use a burger navigation.",
+              "attribute": "rail",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "noFocusTrapping",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "By default, the side-nav traps the focus if in non-rail mode and open.\nTo disable the focus trapping, set this attribute.",
+              "attribute": "no-focus-trapping",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "setDelayedCallback",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "event",
+                  "name": "callback",
                   "type": {
-                    "text": "Event"
+                    "text": "() => void"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "handleDisabledChange"
-            },
-            {
-              "kind": "method",
-              "name": "handleValueChange"
-            },
-            {
-              "kind": "method",
-              "name": "handleOpenChange"
-            },
-            {
-              "kind": "method",
-              "name": "show",
-              "description": "Shows the listbox."
+              "name": "handleMouseEnter",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "hide",
-              "description": "Hides the listbox."
+              "name": "handleMouseLeave",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "checkValidity",
-              "description": "Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid."
+              "name": "handleRequestClose",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "getForm",
-              "return": {
-                "type": {
-                  "text": "HTMLFormElement | null"
-                }
-              },
-              "description": "Gets the associated form, if one exists."
+              "name": "addMouseListener",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "reportValidity",
-              "description": "Checks for validity and shows the browser's validation message if the control is invalid."
+              "name": "removeMouseListener",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "setCustomValidity",
+              "name": "setDrawerVisibility",
+              "privacy": "private",
               "parameters": [
                 {
-                  "name": "message",
+                  "name": "isVisible",
                   "type": {
-                    "text": "string"
+                    "text": "boolean"
                   }
                 }
-              ],
-              "description": "Sets a custom validation message. Pass an empty string to restore validity."
+              ]
             },
             {
               "kind": "method",
-              "name": "focus",
-              "parameters": [
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "FocusOptions"
-                  }
-                }
-              ],
-              "description": "Sets focus on the control."
+              "name": "forceDrawerVisibilityForRailMode",
+              "privacy": "private"
             },
             {
               "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"
+              "name": "setDrawerAnimations",
+              "privacy": "private"
             },
             {
-              "description": "Emitted when the control's value is cleared.",
-              "name": "syn-clear",
-              "reactName": "onSynClear",
-              "eventName": "SynClearEvent"
+              "kind": "method",
+              "name": "handleModeChange"
             },
             {
-              "description": "Emitted when the control receives input.",
-              "name": "syn-input",
-              "reactName": "onSynInput",
-              "eventName": "SynInputEvent"
+              "kind": "method",
+              "name": "handleOpenChange"
             },
             {
-              "description": "Emitted when the control gains focus.",
-              "name": "syn-focus",
-              "reactName": "onSynFocus",
-              "eventName": "SynFocusEvent"
+              "kind": "method",
+              "name": "handleFocusTrapping"
             },
             {
-              "description": "Emitted when the control loses focus.",
-              "name": "syn-blur",
-              "reactName": "onSynBlur",
-              "eventName": "SynBlurEvent"
+              "kind": "method",
+              "name": "show",
+              "description": "Shows the side-nav."
             },
             {
-              "description": "Emitted when the select's menu opens.",
+              "kind": "method",
+              "name": "hide",
+              "description": "Hides the side-nav"
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted when the side-nav opens.",
               "name": "syn-show",
               "reactName": "onSynShow",
               "eventName": "SynShowEvent"
             },
             {
-              "description": "Emitted after the select's menu opens and all animations are complete.",
+              "description": "Emitted after the side-nav opens and all animations are complete.",
               "name": "syn-after-show",
               "reactName": "onSynAfterShow",
               "eventName": "SynAfterShowEvent"
             },
             {
-              "description": "Emitted when the select's menu closes.",
+              "description": "Emitted when the side-nav closes.",
               "name": "syn-hide",
               "reactName": "onSynHide",
               "eventName": "SynHideEvent"
             },
             {
-              "description": "Emitted after the select's menu closes and all animations are complete.",
+              "description": "Emitted after the side-nav 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": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The name of the select, submitted as a name/value pair with form data.",
-              "fieldName": "name"
-            },
-            {
-              "name": "value",
-              "type": {
-                "text": "string | string[]"
-              },
-              "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"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "'small' | 'medium' | 'large'"
-              },
-              "default": "'medium'",
-              "description": "The select's size.",
-              "fieldName": "size"
-            },
-            {
-              "name": "placeholder",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Placeholder text to show as a hint when the select is empty.",
-              "fieldName": "placeholder"
-            },
-            {
-              "name": "multiple",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Allows more than one option to be selected.",
-              "fieldName": "multiple"
-            },
-            {
-              "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.",
-              "fieldName": "maxOptionsVisible"
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disables the select control.",
-              "fieldName": "disabled"
-            },
-            {
-              "name": "clearable",
+              "name": "open",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Adds a clear button when the select is not empty.",
-              "fieldName": "clearable"
+              "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 if the rail attribute is set or not, the behavior will differ.\n\n__Non rail__:\nWith `open` will show the side-nav.\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.",
+              "fieldName": "open"
             },
             {
-              "name": "open",
+              "name": "rail",
               "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"
+              "description": "Use the rail attribute to 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.\n\nNote: The Rail is only an option if all Navigation Items on the first level have an Icon.\nIf this is not the case you should use a burger navigation.",
+              "fieldName": "rail"
             },
             {
-              "name": "hoist",
+              "name": "no-focus-trapping",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
-              "fieldName": "hoist"
-            },
+              "description": "By default, the side-nav traps the focus if in non-rail mode 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.14.0\n *\n * @dependency syn-divider\n * @dependency syn-drawer\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 *\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 * @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 *\n * @cssproperty  --side-nav-open-width - The width of the side-nav if in open state\n * @cssproperty  --side-nav-rail-width - The width of the side-nav if in rail mode without open\n *\n * @animation sideNav.showNonRail - The animation to use when showing the side-nav in non-rail mode.\n * @animation sideNav.showRail - The animation to use when showing the side-nav in rail mode.\n * @animation sideNav.hideNonRail - The animation to use when hiding the side-nav in non-rail mode.\n * @animation sideNav.hideRail - The animation to use when hiding the side-nav in rail mode.\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.14.0",
+          "dependencies": [
+            "syn-divider",
+            "syn-drawer"
+          ],
+          "animations": [
             {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The select's label. If you need to display HTML, use the `label` slot instead.",
-              "fieldName": "label"
+              "name": "sideNav.showNonRail",
+              "description": "The animation to use when showing the side-nav in non-rail mode."
             },
             {
-              "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"
+              "name": "sideNav.showRail",
+              "description": "The animation to use when showing the side-nav in rail mode."
             },
             {
-              "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"
+              "name": "sideNav.hideNonRail",
+              "description": "The animation to use when hiding the side-nav in non-rail mode."
             },
             {
-              "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"
+              "name": "sideNav.hideRail",
+              "description": "The animation to use when hiding the side-nav in rail mode."
             },
             {
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "The select's required attribute.",
-              "fieldName": "required"
+              "name": "sideNav.overlay.show",
+              "description": "The animation to use when showing the side-nav's overlay."
             },
             {
-              "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.",
-              "fieldName": "getTag"
+              "name": "sideNav.overlay.hide",
+              "description": "The animation to use when hiding the side-nav's overlay."
             }
-          ],
-          "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.style/components/select\n * @status stable\n * @since 2.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 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, combobox, clear icon, and expand button.\n * @csspart prefix - The container that wraps the prefix 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 */",
-          "documentation": "https://synergy.style/components/select",
-          "status": "stable",
-          "since": "2.0",
-          "dependencies": [
-            "syn-icon",
-            "syn-popup",
-            "syn-tag"
           ]
         }
       ],
@@ -7006,8 +8232,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SynSelect",
-            "module": "components/select/select.js"
+            "name": "SynSideNav",
+            "module": "components/side-nav/side-nav.js"
           }
         }
       ]
@@ -8418,7 +9644,7 @@
   "package": {
     "name": "@synergy-design-system/components",
     "description": "",
-    "version": "1.14.0",
+    "version": "1.16.0",
     "author": {
       "name": "SICK Global UX Foundation",
       "url": "https://www.sick.com"