@synergy-design-system/components 2.0.0 → 2.1.0

package/dist/custom-elements.json

@@ -10060,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",
@@ -11341,7 +12116,7 @@
   "package": {
     "name": "@synergy-design-system/components",
     "description": "",
-    "version": "2.0.0",
+    "version": "2.1.0",
     "author": {
       "name": "SICK Global UX Foundation",
       "url": "https://www.sick.com"