@synergy-design-system/components 1.27.0 → 2.1.0

package/dist/custom-elements.json

@@ -1472,25 +1472,25 @@
             },
             {
               "kind": "field",
-              "name": "nested",
+              "name": "sharp",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Draws the card as a nested item. Can be used when nesting multiple syn-cards to create hierarchy",
-              "attribute": "nested",
+              "description": "Draws the card with sharp edges. Can be used e.g. when nesting multiple syn-cards to create hierarchy.",
+              "attribute": "sharp",
               "reflects": true
             }
           ],
           "attributes": [
             {
-              "name": "nested",
+              "name": "sharp",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Draws the card as a nested item. Can be used when nesting multiple syn-cards to create hierarchy",
-              "fieldName": "nested"
+              "description": "Draws the card with sharp edges. Can be used e.g. when nesting multiple syn-cards to create hierarchy.",
+              "fieldName": "sharp"
             }
           ],
           "superclass": {
@@ -3238,7 +3238,7 @@
           "name": "SynHeader",
           "cssParts": [
             {
-              "description": "The component's base wrapper.",
+              "description": "The component's base wrapper",
               "name": "base"
             },
             {
@@ -3268,15 +3268,15 @@
           ],
           "slots": [
             {
-              "description": "The label for the header.",
-              "name": ""
+              "description": "The label for the header",
+              "name": "label"
             },
             {
-              "description": "The logo that should be displayed. Will fall back to the SICK logo if not provided.",
+              "description": "The logo that should be displayed. Will fall back to the SICK logo if not provided",
               "name": "logo"
             },
             {
-              "description": "The meta-navigation is used to add various application toolbar icons. Best used with `<syn-icon-button />` and `<syn-drop-down />`",
+              "description": "The meta-navigation is used to add various application toolbar icons Best used with `<syn-icon-button />` and `<syn-drop-down />`",
               "name": "meta-navigation"
             },
             {
@@ -3284,12 +3284,12 @@
               "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 burger-menu=open state. The default close icon is a 'x'.",
+              "name": "open-burger-menu-icon"
             },
             {
-              "description": "An icon to use in lieu of the default hide burger menu icon",
-              "name": "hide-burger-menu"
+              "description": "An icon to use in lieu of the default burger-menu=closed state. The default open icon is a burger menu.",
+              "name": "closed-burger-menu-icon"
             }
           ],
           "members": [
@@ -3332,29 +3332,18 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "The headers label. If you need to display HTML, use the `default` slot instead.",
+              "description": "The headers label. If you need to display HTML, use the `label` slot instead.",
               "attribute": "label"
             },
             {
               "kind": "field",
-              "name": "showBurgerMenu",
-              "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.",
-              "attribute": "show-burger-menu",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "burgerMenuVisible",
+              "name": "burgerMenu",
               "type": {
-                "text": "boolean"
+                "text": "'hidden' | 'open' | 'closed'"
               },
-              "default": "false",
-              "description": "Determines whether or not the burger menu is currently visible.",
-              "attribute": "burger-menu-visible",
+              "default": "'hidden'",
+              "description": "Defines the current visibility and icon of the burger-menu icon.\nThe menu button is added automatically if the component finds a syn-side-nav in non-rail mode.\nThe following values can be used:\n- hidden: The burger menu is not visible\n- open: The burger menu is visible and shows the close icon\n- closed: The burger menu is visible and shows the open icon",
+              "attribute": "burger-menu",
               "reflects": true
             },
             {
@@ -3366,6 +3355,11 @@
               "privacy": "private",
               "description": "The side nav"
             },
+            {
+              "kind": "method",
+              "name": "toggleBurgerMenu",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "handleBurgerMenuToggle",
@@ -3374,11 +3368,12 @@
             {
               "kind": "method",
               "name": "updateBurgerMenuBasedOnSideNav",
-              "privacy": "private"
+              "privacy": "private",
+              "description": "Automatically update the burger menu icon based\non the state of the side-nav, if one is connected."
             },
             {
               "kind": "method",
-              "name": "handleBurgerMenuVisible"
+              "name": "handleBurgerMenu"
             },
             {
               "kind": "method",
@@ -3387,7 +3382,7 @@
                 {
                   "name": "sideNav",
                   "type": {
-                    "text": "SynSideNav"
+                    "text": "SynSideNav | null"
                   },
                   "description": "The side navigation to connect to the header"
                 }
@@ -3397,16 +3392,22 @@
           ],
           "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 is toggled to closed",
+              "name": "syn-burger-menu-closed",
+              "reactName": "onSynBurgerMenuClosed",
+              "eventName": "SynBurgerMenuClosedEvent"
+            },
+            {
+              "description": "Emitted when the burger menu is toggled to hidden",
+              "name": "syn-burger-menu-hidden",
+              "reactName": "onSynBurgerMenuHidden",
+              "eventName": "SynBurgerMenuHiddenEvent"
             },
             {
-              "description": "Emitted when the burger menu button is toggled to not visible",
-              "name": "syn-burger-menu-hide",
-              "reactName": "onSynBurgerMenuHide",
-              "eventName": "SynBurgerMenuHideEvent"
+              "description": "Emitted when the burger menu is toggled to open",
+              "name": "syn-burger-menu-open",
+              "reactName": "onSynBurgerMenuOpen",
+              "eventName": "SynBurgerMenuOpenEvent"
             }
           ],
           "attributes": [
@@ -3416,26 +3417,17 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "The headers label. If you need to display HTML, use the `default` slot instead.",
+              "description": "The headers label. If you need to display HTML, use the `label` 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",
+              "name": "burger-menu",
               "type": {
-                "text": "boolean"
+                "text": "'hidden' | 'open' | 'closed'"
               },
-              "default": "false",
-              "description": "Determines whether or not the burger menu is currently visible.",
-              "fieldName": "burgerMenuVisible"
+              "default": "'hidden'",
+              "description": "Defines the current visibility and icon of the burger-menu icon.\nThe menu button is added automatically if the component finds a syn-side-nav in non-rail mode.\nThe following values can be used:\n- hidden: The burger menu is not visible\n- open: The burger menu is visible and shows the close icon\n- closed: The burger menu is visible and shows the open icon",
+              "fieldName": "burgerMenu"
             }
           ],
           "superclass": {
@@ -3446,7 +3438,7 @@
           "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 */",
+          "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 label - 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 open-burger-menu-icon - An icon to use in lieu of the default burger-menu=open state.\n *                      The default close icon is a 'x'.\n * @slot closed-burger-menu-icon - An icon to use in lieu of the default burger-menu=closed state.\n *                      The default open icon is a burger menu.\n *\n * @event syn-burger-menu-closed - Emitted when the burger menu is toggled to closed\n * @event syn-burger-menu-hidden - Emitted when the burger menu is toggled to hidden\n * @event syn-burger-menu-open - Emitted when the burger menu is toggled to open\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"
@@ -6980,6 +6972,13 @@
               "privacy": "private",
               "description": "Internal resize observer"
             },
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
+            },
             {
               "kind": "field",
               "name": "defaultSlot",
@@ -7016,16 +7015,6 @@
               "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",
@@ -7104,17 +7093,6 @@
               "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"
@@ -10082,6 +10060,781 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/tab/tab.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SynTab",
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            },
+            {
+              "description": "The close button, an `<syn-icon-button>`.",
+              "name": "close-button"
+            },
+            {
+              "description": "The close button's exported `base` part.",
+              "name": "close-button__base"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The tab's label.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "dependencies",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ 'syn-icon-button': SynIconButton }"
+            },
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "attrId",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "readonly": true,
+              "default": "++id"
+            },
+            {
+              "kind": "field",
+              "name": "componentId",
+              "privacy": "private",
+              "readonly": true,
+              "default": "`syn-tab-${this.attrId}`"
+            },
+            {
+              "kind": "field",
+              "name": "tab",
+              "type": {
+                "text": "HTMLElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "panel",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The name of the tab panel this tab is associated with. The panel must be located in the same tab group.",
+              "attribute": "panel",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "active",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws the tab in an active state.",
+              "attribute": "active",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "closable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the tab closable and shows a close button.",
+              "attribute": "closable"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the tab and prevents selection.",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "handleCloseClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleActiveChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleDisabledChange"
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "description": "Sets focus to the tab."
+            },
+            {
+              "kind": "method",
+              "name": "blur",
+              "description": "Removes focus from the tab."
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted when the tab is closable and the close button is activated.",
+              "name": "syn-close",
+              "reactName": "onSynClose",
+              "eventName": "SynCloseEvent"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "panel",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The name of the tab panel this tab is associated with. The panel must be located in the same tab group.",
+              "fieldName": "panel"
+            },
+            {
+              "name": "active",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws the tab in an active state.",
+              "fieldName": "active"
+            },
+            {
+              "name": "closable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the tab closable and shows a close button.",
+              "fieldName": "closable"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the tab and prevents selection.",
+              "fieldName": "disabled"
+            }
+          ],
+          "superclass": {
+            "name": "SynergyElement",
+            "module": "/src/internal/synergy-element.js"
+          },
+          "summary": "Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).",
+          "tagNameWithoutPrefix": "tab",
+          "tagName": "syn-tab",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).\n * @documentation https://synergy.style/components/tab\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon-button\n *\n * @slot - The tab's label.\n *\n * @event syn-close - Emitted when the tab is closable and the close button is activated.\n *\n * @csspart base - The component's base wrapper.\n * @csspart close-button - The close button, an `<syn-icon-button>`.\n * @csspart close-button__base - The close button's exported `base` part.\n */",
+          "documentation": "https://synergy.style/components/tab",
+          "status": "stable",
+          "since": "2.0",
+          "dependencies": [
+            "syn-icon-button"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SynTab",
+            "module": "components/tab/tab.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/tab-group/tab-group.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SynTabGroup",
+          "cssProperties": [
+            {
+              "description": "The color of the active tab indicator.",
+              "name": "--indicator-color"
+            },
+            {
+              "description": "The width of the active tab indicator.",
+              "name": "--indicator-width"
+            },
+            {
+              "description": "The color of the indicator's track (the line that separates tabs from panels).",
+              "name": "--track-color"
+            },
+            {
+              "description": "The width of the indicator's track (the line that separates tabs from panels).",
+              "name": "--track-width"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            },
+            {
+              "description": "The tab group's navigation container where tabs are slotted in.",
+              "name": "nav"
+            },
+            {
+              "description": "The container that wraps the tabs.",
+              "name": "tabs"
+            },
+            {
+              "description": "The line that highlights the currently selected tab.",
+              "name": "active-tab-indicator"
+            },
+            {
+              "description": "The tab group's body where tab panels are slotted in.",
+              "name": "body"
+            },
+            {
+              "description": "The previous/next scroll buttons that show when tabs are scrollable, an `<syn-icon-button>`.",
+              "name": "scroll-button"
+            },
+            {
+              "description": "The starting scroll button.",
+              "name": "scroll-button--start"
+            },
+            {
+              "description": "The ending scroll button.",
+              "name": "scroll-button--end"
+            },
+            {
+              "description": "The scroll button's exported `base` part.",
+              "name": "scroll-button__base"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Used for grouping tab panels in the tab group. Must be `<syn-tab-panel>` elements.",
+              "name": ""
+            },
+            {
+              "description": "Used for grouping tabs in the tab group. Must be `<syn-tab>` elements.",
+              "name": "nav"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "dependencies",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ 'syn-icon-button': SynIconButton }"
+            },
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "activeTab",
+              "type": {
+                "text": "SynTab | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "mutationObserver",
+              "type": {
+                "text": "MutationObserver"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "resizeObserver",
+              "type": {
+                "text": "ResizeObserver"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "tabs",
+              "type": {
+                "text": "SynTab[]"
+              },
+              "privacy": "private",
+              "default": "[]"
+            },
+            {
+              "kind": "field",
+              "name": "panels",
+              "type": {
+                "text": "SynTabPanel[]"
+              },
+              "privacy": "private",
+              "default": "[]"
+            },
+            {
+              "kind": "field",
+              "name": "tabGroup",
+              "type": {
+                "text": "HTMLElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "body",
+              "type": {
+                "text": "HTMLSlotElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "nav",
+              "type": {
+                "text": "HTMLElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "indicator",
+              "type": {
+                "text": "HTMLElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "hasScrollControls",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "placement",
+              "type": {
+                "text": "'top' | 'start' | 'end'"
+              },
+              "default": "'top'",
+              "description": "The placement of the tabs.",
+              "attribute": "placement"
+            },
+            {
+              "kind": "field",
+              "name": "activation",
+              "type": {
+                "text": "'auto' | 'manual'"
+              },
+              "default": "'auto'",
+              "description": "When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to\nmanual, the tab will receive focus but will not show until the user presses spacebar or enter.",
+              "attribute": "activation"
+            },
+            {
+              "kind": "field",
+              "name": "noScrollControls",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the scroll arrows that appear when tabs overflow.",
+              "attribute": "no-scroll-controls"
+            },
+            {
+              "kind": "field",
+              "name": "contained",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws the tab group as a contained element.",
+              "attribute": "contained"
+            },
+            {
+              "kind": "field",
+              "name": "sharp",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws the tab group with edges instead of roundings. Takes only effect if used with the 'contained' property",
+              "attribute": "sharp"
+            },
+            {
+              "kind": "method",
+              "name": "getAllTabs",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "options",
+                  "default": "{ includeDisabled: true }",
+                  "type": {
+                    "text": "{ includeDisabled: boolean }"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "getAllPanels",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "getActiveTab",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleScrollToStart",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleScrollToEnd",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "setActiveTab",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "tab",
+                  "type": {
+                    "text": "SynTab"
+                  }
+                },
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "{ emitEvents?: boolean; scrollBehavior?: 'auto' | 'smooth' }"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "setAriaLabels",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "repositionIndicator",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "syncTabsAndPanels",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "updateScrollControls"
+            },
+            {
+              "kind": "method",
+              "name": "syncIndicator"
+            },
+            {
+              "kind": "method",
+              "name": "show",
+              "parameters": [
+                {
+                  "name": "panel",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Shows the specified tab panel."
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "{ name: String }"
+              },
+              "description": "Emitted when a tab is shown. The payload of the event returns the \"panel\" attribute of the shown tab.",
+              "name": "syn-tab-show",
+              "reactName": "onSynTabShow",
+              "eventName": "SynTabShowEvent"
+            },
+            {
+              "type": {
+                "text": "{ name: String }"
+              },
+              "description": "Emitted when a tab is hidden. The payload of the event returns the \"panel\" attribute of the hidden tab.",
+              "name": "syn-tab-hide",
+              "reactName": "onSynTabHide",
+              "eventName": "SynTabHideEvent"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "placement",
+              "type": {
+                "text": "'top' | 'start' | 'end'"
+              },
+              "default": "'top'",
+              "description": "The placement of the tabs.",
+              "fieldName": "placement"
+            },
+            {
+              "name": "activation",
+              "type": {
+                "text": "'auto' | 'manual'"
+              },
+              "default": "'auto'",
+              "description": "When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to\nmanual, the tab will receive focus but will not show until the user presses spacebar or enter.",
+              "fieldName": "activation"
+            },
+            {
+              "name": "no-scroll-controls",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the scroll arrows that appear when tabs overflow.",
+              "fieldName": "noScrollControls"
+            },
+            {
+              "name": "contained",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws the tab group as a contained element.",
+              "fieldName": "contained"
+            },
+            {
+              "name": "sharp",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws the tab group with edges instead of roundings. Takes only effect if used with the 'contained' property",
+              "fieldName": "sharp"
+            }
+          ],
+          "superclass": {
+            "name": "SynergyElement",
+            "module": "/src/internal/synergy-element.js"
+          },
+          "summary": "Tab groups organize content into a container that shows one section at a time.",
+          "tagNameWithoutPrefix": "tab-group",
+          "tagName": "syn-tab-group",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Tab groups organize content into a container that shows one section at a time.\n * @documentation https://synergy.style/components/tab-group\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon-button\n *\n * @slot - Used for grouping tab panels in the tab group. Must be `<syn-tab-panel>` elements.\n * @slot nav - Used for grouping tabs in the tab group. Must be `<syn-tab>` elements.\n *\n * @event {{ name: String }} syn-tab-show - Emitted when a tab is shown. The payload of the event returns the \"panel\" attribute of the shown tab.\n * @event {{ name: String }} syn-tab-hide - Emitted when a tab is hidden. The payload of the event returns the \"panel\" attribute of the hidden tab.\n *\n * @csspart base - The component's base wrapper.\n * @csspart nav - The tab group's navigation container where tabs are slotted in.\n * @csspart tabs - The container that wraps the tabs.\n * @csspart active-tab-indicator - The line that highlights the currently selected tab.\n * @csspart body - The tab group's body where tab panels are slotted in.\n * @csspart scroll-button - The previous/next scroll buttons that show when tabs are scrollable, an `<syn-icon-button>`.\n * @csspart scroll-button--start - The starting scroll button.\n * @csspart scroll-button--end - The ending scroll button.\n * @csspart scroll-button__base - The scroll button's exported `base` part.\n *\n * @cssproperty --indicator-color - The color of the active tab indicator.\n * @cssproperty --indicator-width - The width of the active tab indicator.\n * @cssproperty --track-color - The color of the indicator's track (the line that separates tabs from panels).\n * @cssproperty --track-width - The width of the indicator's track (the line that separates tabs from panels).\n */",
+          "documentation": "https://synergy.style/components/tab-group",
+          "status": "stable",
+          "since": "2.0",
+          "dependencies": [
+            "syn-icon-button"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SynTabGroup",
+            "module": "components/tab-group/tab-group.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/tab-panel/tab-panel.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SynTabPanel",
+          "cssProperties": [
+            {
+              "description": "The tab panel's padding.",
+              "name": "--padding"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The tab panel's content.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "attrId",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "readonly": true,
+              "default": "++id"
+            },
+            {
+              "kind": "field",
+              "name": "componentId",
+              "privacy": "private",
+              "readonly": true,
+              "default": "`syn-tab-panel-${this.attrId}`"
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The tab panel's name.",
+              "attribute": "name",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "active",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When true, the tab panel will be shown.",
+              "attribute": "active",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "handleActiveChange"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The tab panel's name.",
+              "fieldName": "name"
+            },
+            {
+              "name": "active",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When true, the tab panel will be shown.",
+              "fieldName": "active"
+            }
+          ],
+          "superclass": {
+            "name": "SynergyElement",
+            "module": "/src/internal/synergy-element.js"
+          },
+          "summary": "Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.",
+          "tagNameWithoutPrefix": "tab-panel",
+          "tagName": "syn-tab-panel",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.\n * @documentation https://synergy.style/components/tab-panel\n * @status stable\n * @since 2.0\n *\n * @slot - The tab panel's content.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --padding - The tab panel's padding.\n */",
+          "documentation": "https://synergy.style/components/tab-panel",
+          "status": "stable",
+          "since": "2.0"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SynTabPanel",
+            "module": "components/tab-panel/tab-panel.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/tag/tag.js",
@@ -11363,7 +12116,7 @@
   "package": {
     "name": "@synergy-design-system/components",
     "description": "",
-    "version": "1.27.0",
+    "version": "2.1.0",
     "author": {
       "name": "SICK Global UX Foundation",
       "url": "https://www.sick.com"