@synergy-design-system/components 2.0.0 → 2.1.0

package/dist/events/events.d.ts

@@ -6,6 +6,7 @@ export type * from './syn-burger-menu-hidden.ts';
 export type * from './syn-burger-menu-open.ts';
 export type * from './syn-change.ts';
 export type * from './syn-clear.ts';
+export type * from './syn-close.ts';
 export type * from './syn-error.ts';
 export type * from './syn-focus.ts';
 export type * from './syn-hide.ts';
@@ -18,3 +19,5 @@ export type * from './syn-reposition.ts';
 export type * from './syn-request-close.ts';
 export type * from './syn-select.ts';
 export type * from './syn-show.ts';
+export type * from './syn-tab-hide.ts';
+export type * from './syn-tab-show.ts';

package/dist/events/syn-close.d.ts

@@ -0,0 +1,6 @@
+export type SynCloseEvent = CustomEvent<Record<PropertyKey, never>>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'syn-close': SynCloseEvent;
+    }
+}

package/dist/events/syn-tab-hide.d.ts

@@ -0,0 +1,8 @@
+export type SynTabHideEvent = CustomEvent<{
+    name: string;
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'syn-tab-hide': SynTabHideEvent;
+    }
+}

package/dist/events/syn-tab-show.d.ts

@@ -0,0 +1,8 @@
+export type SynTabShowEvent = CustomEvent<{
+    name: string;
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'syn-tab-show': SynTabShowEvent;
+    }
+}

package/dist/internal/test/element-visible-overflow.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Given a parent element featuring `overflow: hidden` and a child element inside the parent, this
+ * function determines whether the child will be visible taking only the overflow of the parent into account
+ * Id does NOT check whether it is hidden or overlapped by another element
+ * It basically checks whether the bounding rects of the parent and the child overlap
+ *
+ * @param {HTMLElement} outerElement - The parent element
+ * @param {HTMLElement} innerElement - the child element
+ * @returns {Boolean} whether the two elements overlap
+ */
+export declare const isElementVisibleFromOverflow: (outerElement: Element, innerElement: Element) => boolean;

package/dist/internal/test/wait-for-scrolling.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Wait until an element has stopped scrolling
+ * This considers the element to have stopped scrolling, as soon as it did not change its
+ * scroll position for 20 successive animation frames
+ * @param {HTMLElement} element - The element which is scrolled
+ * @param {numeric} timeoutInMs - A timeout in ms. If the timeout has elapsed, the promise rejects
+ * @returns A promise which resolves after the scrolling has stopped
+ */
+export declare const waitForScrollingToEnd: (element: Element, timeoutInMs?: number) => Promise<void>;

package/dist/synergy.d.ts

@@ -31,6 +31,9 @@ export { default as SynSelect } from './components/select/select.js';
 export { default as SynSideNav } from './components/side-nav/side-nav.js';
 export { default as SynSpinner } from './components/spinner/spinner.js';
 export { default as SynSwitch } from './components/switch/switch.js';
+export { default as SynTabGroup } from './components/tab-group/tab-group.js';
+export { default as SynTabPanel } from './components/tab-panel/tab-panel.js';
+export { default as SynTab } from './components/tab/tab.js';
 export { default as SynTag } from './components/tag/tag.js';
 export { default as SynTextarea } from './components/textarea/textarea.js';
 export { default as SynTooltip } from './components/tooltip/tooltip.js';

package/dist/synergy.js

@@ -1,225 +1,247 @@
+import "./chunks/chunk.NKIYFJN2.js";
+import {
+  tooltip_default
+} from "./chunks/chunk.CSLZHXEE.js";
 import {
   getFormControls,
   serialize
 } from "./chunks/chunk.GBARDV25.js";
-import "./chunks/chunk.NKIYFJN2.js";
 import {
-  textarea_default
-} from "./chunks/chunk.INJJNBQC.js";
+  tag_default
+} from "./chunks/chunk.GC2WQKSX.js";
 import {
-  tooltip_default
-} from "./chunks/chunk.GYZZGKK6.js";
-import "./chunks/chunk.EJQN3JHV.js";
+  textarea_default
+} from "./chunks/chunk.3YSKET4G.js";
+import "./chunks/chunk.K3D5B3ZN.js";
+import "./chunks/chunk.YBIBWRKC.js";
+import "./chunks/chunk.2EI3TNL7.js";
+import "./chunks/chunk.AM4TRH2T.js";
 import "./chunks/chunk.4X3HY2V5.js";
 import "./chunks/chunk.YHRXL2XR.js";
+import {
+  tab_group_default
+} from "./chunks/chunk.QYBARUDC.js";
+import {
+  tab_panel_default
+} from "./chunks/chunk.NXTU4OEY.js";
+import "./chunks/chunk.Q2LICMN2.js";
+import "./chunks/chunk.XHWYGYMQ.js";
+import "./chunks/chunk.YUHA7UIQ.js";
 import {
   switch_default
-} from "./chunks/chunk.CZK6Y6J7.js";
+} from "./chunks/chunk.JZHMDO6I.js";
 import {
-  tag_default
-} from "./chunks/chunk.6SE6TKS4.js";
-import "./chunks/chunk.NIGJFXQZ.js";
-import "./chunks/chunk.YBIBWRKC.js";
-import "./chunks/chunk.2EI3TNL7.js";
+  tab_default
+} from "./chunks/chunk.7FKF5RI3.js";
+import "./chunks/chunk.WJ7KOQIH.js";
+import "./chunks/chunk.OE4RXQU2.js";
+import "./chunks/chunk.WXYS5UVK.js";
+import "./chunks/chunk.63OREJEF.js";
+import "./chunks/chunk.NGI67WXT.js";
+import "./chunks/chunk.QTTBNK5Q.js";
 import {
   side_nav_default
-} from "./chunks/chunk.3VIWDL7Y.js";
-import "./chunks/chunk.QKQIHI54.js";
+} from "./chunks/chunk.WFVW45MV.js";
+import "./chunks/chunk.PGZOI4DU.js";
 import "./chunks/chunk.ONW45GQI.js";
 import {
   spinner_default
-} from "./chunks/chunk.7QPPPSLU.js";
-import "./chunks/chunk.CYJIE45P.js";
+} from "./chunks/chunk.C6OY6VJH.js";
+import "./chunks/chunk.7KDXBRUI.js";
 import "./chunks/chunk.W5JK7V7K.js";
 import "./chunks/chunk.TAO5QIIQ.js";
 import {
   radio_group_default
-} from "./chunks/chunk.4DLDFGWQ.js";
-import "./chunks/chunk.QERISKCA.js";
+} from "./chunks/chunk.CK72A4UN.js";
+import "./chunks/chunk.7ESCUXNQ.js";
 import "./chunks/chunk.F4MRQLNL.js";
 import "./chunks/chunk.XIUSSERX.js";
 import {
   select_default
-} from "./chunks/chunk.PPX62TH5.js";
-import "./chunks/chunk.U5YGRMPN.js";
-import "./chunks/chunk.Q77JF7AR.js";
+} from "./chunks/chunk.IUB3EVHS.js";
+import "./chunks/chunk.GNT5NIFP.js";
+import "./chunks/chunk.RESDFE73.js";
 import "./chunks/chunk.B6R3IVGO.js";
 import "./chunks/chunk.BGHK4NQA.js";
 import "./chunks/chunk.OWMT6OL2.js";
 import "./chunks/chunk.QNQNR3RY.js";
 import {
   progress_ring_default
-} from "./chunks/chunk.N47PW3ZF.js";
+} from "./chunks/chunk.SGA64JW4.js";
 import {
   radio_default
-} from "./chunks/chunk.B3ETIETR.js";
-import "./chunks/chunk.HQITSO5S.js";
+} from "./chunks/chunk.G3RGLGE5.js";
+import "./chunks/chunk.3ABNIRST.js";
 import "./chunks/chunk.V6VND4OF.js";
 import "./chunks/chunk.PKO6FEOM.js";
 import {
   radio_button_default
-} from "./chunks/chunk.HXB2YFEV.js";
-import "./chunks/chunk.OB3BARBF.js";
+} from "./chunks/chunk.4RDYWHUI.js";
+import "./chunks/chunk.SZFQAOEB.js";
 import "./chunks/chunk.QPK7SLOE.js";
 import {
   progress_bar_default
-} from "./chunks/chunk.GJ4LHXBY.js";
-import "./chunks/chunk.JXTXMTDM.js";
+} from "./chunks/chunk.IZVJSS3N.js";
+import "./chunks/chunk.VKFY3IRP.js";
 import "./chunks/chunk.AMAK44YX.js";
 import "./chunks/chunk.XBUAZUNQ.js";
-import "./chunks/chunk.RPBO222K.js";
+import "./chunks/chunk.PTVHS6BE.js";
 import "./chunks/chunk.2V3HGTTL.js";
 import "./chunks/chunk.45VEGVRJ.js";
 import {
   option_default
-} from "./chunks/chunk.SH6KJA7C.js";
+} from "./chunks/chunk.LVTHHB6Y.js";
 import {
   popup_default
-} from "./chunks/chunk.JQUADXOI.js";
+} from "./chunks/chunk.3HLC4LA4.js";
 import {
   prio_nav_default
-} from "./chunks/chunk.3VQUQNL2.js";
-import "./chunks/chunk.3VG7IMNM.js";
+} from "./chunks/chunk.XMQLJOHH.js";
+import "./chunks/chunk.74RW2G4A.js";
 import "./chunks/chunk.XNP4OTUB.js";
 import "./chunks/chunk.74N5WLM5.js";
 import {
   nav_item_default
-} from "./chunks/chunk.LE3YHBAH.js";
-import "./chunks/chunk.IIB7BIYK.js";
+} from "./chunks/chunk.YHWGQZLS.js";
+import "./chunks/chunk.QG3EP4DT.js";
 import "./chunks/chunk.FAAETEJ2.js";
 import {
   optgroup_default
-} from "./chunks/chunk.QYY44FAQ.js";
-import "./chunks/chunk.QQ6EVJKD.js";
+} from "./chunks/chunk.IFVLU7ZD.js";
+import "./chunks/chunk.J6CJP4LF.js";
 import "./chunks/chunk.KG52EHDB.js";
-import "./chunks/chunk.IKG6CMRI.js";
+import "./chunks/chunk.6UEMF3N6.js";
 import "./chunks/chunk.CFIQXXMW.js";
 import "./chunks/chunk.3B24TYVN.js";
 import {
   menu_item_default
-} from "./chunks/chunk.OF2RI2OE.js";
+} from "./chunks/chunk.N3SU4QV7.js";
 import {
   menu_label_default
-} from "./chunks/chunk.X6JZ2IGM.js";
-import "./chunks/chunk.UK6QI2YX.js";
+} from "./chunks/chunk.CXJXUIHE.js";
+import "./chunks/chunk.BMDVBBSK.js";
 import "./chunks/chunk.X6GR6IA2.js";
 import "./chunks/chunk.3FOVDOJX.js";
 import {
   input_default
-} from "./chunks/chunk.ZXRJ4KDL.js";
+} from "./chunks/chunk.ABWTBF7U.js";
 import {
   menu_default
-} from "./chunks/chunk.QWCMHMXL.js";
-import "./chunks/chunk.UR6LFFCN.js";
+} from "./chunks/chunk.HQUIJTRL.js";
+import "./chunks/chunk.TZCBMMHE.js";
 import "./chunks/chunk.PILX7LVU.js";
 import "./chunks/chunk.RSSY7KPD.js";
-import "./chunks/chunk.MY4UOZQR.js";
+import "./chunks/chunk.V4G76JVW.js";
 import "./chunks/chunk.OOABXWCW.js";
 import "./chunks/chunk.PDHVYHXD.js";
 import "./chunks/chunk.JDBDBGQP.js";
 import {
   icon_button_default
-} from "./chunks/chunk.PLYRNXO5.js";
-import "./chunks/chunk.EX6PHTKD.js";
+} from "./chunks/chunk.NW5K3IBJ.js";
+import "./chunks/chunk.NGI3AJKA.js";
 import "./chunks/chunk.3A65FBTX.js";
 import "./chunks/chunk.AW2HNLNP.js";
 import {
   dropdown_default
-} from "./chunks/chunk.LD43YPTP.js";
+} from "./chunks/chunk.JMRR5VH7.js";
 import {
   header_default
-} from "./chunks/chunk.5POEZPXI.js";
-import "./chunks/chunk.GGTB5RZK.js";
+} from "./chunks/chunk.Z5MQOTP5.js";
+import "./chunks/chunk.7Q7PVXO3.js";
 import "./chunks/chunk.GVNVZMMM.js";
 import {
   icon_default
-} from "./chunks/chunk.UOCGYAVP.js";
+} from "./chunks/chunk.NF4C4WLY.js";
 import {
   divider_default
-} from "./chunks/chunk.OD3ZRSCN.js";
+} from "./chunks/chunk.ZV7LSX6O.js";
 import {
   drawer_default
-} from "./chunks/chunk.UNWDGUMS.js";
-import "./chunks/chunk.2RTVPLA4.js";
+} from "./chunks/chunk.ZZY64J7L.js";
+import "./chunks/chunk.2FG75Q7J.js";
 import "./chunks/chunk.I4FIU7FA.js";
 import "./chunks/chunk.PHSJD47V.js";
-import "./chunks/chunk.WAW6B7ID.js";
-import "./chunks/chunk.XN5TDOQI.js";
+import "./chunks/chunk.SUZB2AJU.js";
+import "./chunks/chunk.QUR6IKYK.js";
 import "./chunks/chunk.MIMALEWP.js";
 import "./chunks/chunk.2KYFCKCK.js";
 import "./chunks/chunk.SLCYXMHB.js";
 import {
   checkbox_default
-} from "./chunks/chunk.CXLU3VIF.js";
+} from "./chunks/chunk.7C7XOARZ.js";
 import {
   dialog_default
-} from "./chunks/chunk.NP6RUQHV.js";
-import "./chunks/chunk.Q47TSDLT.js";
+} from "./chunks/chunk.UYPITOFJ.js";
+import "./chunks/chunk.X5ELNELV.js";
 import "./chunks/chunk.ITXLZUTJ.js";
 import "./chunks/chunk.RIJKFEYZ.js";
 import "./chunks/chunk.2QOQY4ZG.js";
 import "./chunks/chunk.IU3SSJZE.js";
 import "./chunks/chunk.YMICCSK6.js";
-import "./chunks/chunk.XKMNFCMU.js";
+import "./chunks/chunk.KGJX3LKJ.js";
 import "./chunks/chunk.FA6V2WD6.js";
 import "./chunks/chunk.ACTJFDNK.js";
 import {
   button_group_default
-} from "./chunks/chunk.K6RAJOFH.js";
+} from "./chunks/chunk.GK2R5VV6.js";
 import {
   card_default
-} from "./chunks/chunk.ALA3LG2Q.js";
-import "./chunks/chunk.TDWPDWV4.js";
+} from "./chunks/chunk.IJKGJOBG.js";
+import "./chunks/chunk.PX5RMIM2.js";
 import "./chunks/chunk.36SZKAYW.js";
 import "./chunks/chunk.GCU2ZNB2.js";
-import "./chunks/chunk.VLFUE45C.js";
+import "./chunks/chunk.F6HATFB6.js";
 import "./chunks/chunk.WFAJR3FN.js";
 import "./chunks/chunk.TTL762VF.js";
 import "./chunks/chunk.IG3RCOB3.js";
 import "./chunks/chunk.NIYKFSPR.js";
 import {
   breadcrumb_item_default
-} from "./chunks/chunk.HEJ6O4CS.js";
+} from "./chunks/chunk.4CZBOBMX.js";
 import {
   button_default
-} from "./chunks/chunk.3GYQCNNB.js";
-import "./chunks/chunk.ODV5KTQX.js";
-import "./chunks/chunk.MFMME6IU.js";
+} from "./chunks/chunk.LTKXEY4M.js";
+import "./chunks/chunk.B7T2GNE3.js";
+import "./chunks/chunk.76N53L44.js";
 import "./chunks/chunk.AWJ376R6.js";
 import "./chunks/chunk.66DXY7BX.js";
 import "./chunks/chunk.JUJZBRXD.js";
 import "./chunks/chunk.I25TRQGB.js";
 import "./chunks/chunk.Q4CRAGN3.js";
-import "./chunks/chunk.YOW6LLS7.js";
+import "./chunks/chunk.HMNKECG7.js";
 import "./chunks/chunk.A7IIJ2LL.js";
 import {
-  badge_default
-} from "./chunks/chunk.APVUOX4X.js";
+  alert_default
+} from "./chunks/chunk.GRPQ7TL2.js";
 import {
   breadcrumb_default
-} from "./chunks/chunk.5HWI7WDT.js";
-import "./chunks/chunk.VUMY7MJT.js";
+} from "./chunks/chunk.53Q6SWKS.js";
+import "./chunks/chunk.DYLLTTO7.js";
 import "./chunks/chunk.32CYREEV.js";
 import "./chunks/chunk.Z6T7VV4R.js";
-import "./chunks/chunk.CWZ4FEAV.js";
+import "./chunks/chunk.7RF5DYVF.js";
 import "./chunks/chunk.KLDQHER5.js";
 import "./chunks/chunk.NGIGPLN2.js";
 import {
-  alert_default
-} from "./chunks/chunk.DSIZBV7C.js";
-import "./chunks/chunk.BO74VWXK.js";
-import "./chunks/chunk.OF7YXNPE.js";
+  badge_default
+} from "./chunks/chunk.JWVUCFMH.js";
+import "./chunks/chunk.ABZAI4LR.js";
+import "./chunks/chunk.WQJRBFZA.js";
+import "./chunks/chunk.II4PANKR.js";
+import "./chunks/chunk.3VLVBVTP.js";
+import "./chunks/chunk.7BN75LQX.js";
 import "./chunks/chunk.ZHH2AHOZ.js";
 import "./chunks/chunk.LJQ7LEPV.js";
 import "./chunks/chunk.UMKKOHXB.js";
 import "./chunks/chunk.QAUTITK3.js";
-import "./chunks/chunk.HSJIUWQS.js";
+import "./chunks/chunk.PS4UJFYT.js";
+import "./chunks/chunk.EPP5MGNJ.js";
 import {
   registerIconLibrary,
   unregisterIconLibrary
-} from "./chunks/chunk.66MOXMDP.js";
+} from "./chunks/chunk.JF333ACU.js";
 import "./chunks/chunk.6C4JXZZN.js";
-import "./chunks/chunk.VTKIDI7N.js";
+import "./chunks/chunk.SDQC32B3.js";
 import "./chunks/chunk.PJO6TM3T.js";
 import "./chunks/chunk.2RF7KO5I.js";
 import "./chunks/chunk.66WXVGAW.js";
@@ -228,14 +250,10 @@ import {
   getBasePath,
   setBasePath
 } from "./chunks/chunk.C7624ITA.js";
-import "./chunks/chunk.JRYXECAY.js";
-import "./chunks/chunk.PS4UJFYT.js";
-import "./chunks/chunk.3F2OUNM2.js";
-import "./chunks/chunk.II4PANKR.js";
 import "./chunks/chunk.M6WH7QEC.js";
 import "./chunks/chunk.6XXPHG57.js";
-import "./chunks/chunk.NF2R6RZV.js";
-import "./chunks/chunk.WQJRBFZA.js";
+import "./chunks/chunk.NHFTJEYN.js";
+import "./chunks/chunk.JRYXECAY.js";
 import "./chunks/chunk.QNDC5KWA.js";
 export {
   alert_default as SynAlert,
@@ -271,6 +289,9 @@ export {
   side_nav_default as SynSideNav,
   spinner_default as SynSpinner,
   switch_default as SynSwitch,
+  tab_default as SynTab,
+  tab_group_default as SynTabGroup,
+  tab_panel_default as SynTabPanel,
   tag_default as SynTag,
   textarea_default as SynTextarea,
   tooltip_default as SynTooltip,

package/dist/utilities/icon-library.js

@@ -2,9 +2,9 @@ import "../chunks/chunk.NKIYFJN2.js";
 import {
   registerIconLibrary,
   unregisterIconLibrary
-} from "../chunks/chunk.66MOXMDP.js";
+} from "../chunks/chunk.JF333ACU.js";
 import "../chunks/chunk.6C4JXZZN.js";
-import "../chunks/chunk.VTKIDI7N.js";
+import "../chunks/chunk.SDQC32B3.js";
 import "../chunks/chunk.C7624ITA.js";
 import "../chunks/chunk.QNDC5KWA.js";
 export {

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

@@ -1487,6 +1487,97 @@
         }
       ]
     },
+    {
+      "name": "syn-tab",
+      "description": "Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).\n---\n\n\n### **Events:**\n - **syn-close** - Emitted when the tab is closable and the close button is activated.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus to the tab.\n- **blur()** - Removes focus from the tab.\n\n### **Slots:**\n - _default_ - The tab's label.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **close-button** - The close button, an `<syn-icon-button>`.\n- **close-button__base** - The close button's exported `base` part.",
+      "attributes": [
+        {
+          "name": "panel",
+          "description": "The name of the tab panel this tab is associated with. The panel must be located in the same tab group.",
+          "values": []
+        },
+        {
+          "name": "active",
+          "description": "Draws the tab in an active state.",
+          "values": []
+        },
+        {
+          "name": "closable",
+          "description": "Makes the tab closable and shows a close button.",
+          "values": []
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the tab and prevents selection.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://synergy.style/components/tab"
+        }
+      ]
+    },
+    {
+      "name": "syn-tab-group",
+      "description": "Tab groups organize content into a container that shows one section at a time.\n---\n\n\n### **Events:**\n - **syn-tab-show** - Emitted when a tab is shown. The payload of the event returns the \"panel\" attribute of the shown tab.\n- **syn-tab-hide** - Emitted when a tab is hidden. The payload of the event returns the \"panel\" attribute of the hidden tab.\n\n### **Methods:**\n - **show(panel: _string_)** - Shows the specified tab panel.\n\n### **Slots:**\n - _default_ - Used for grouping tab panels in the tab group. Must be `<syn-tab-panel>` elements.\n- **nav** - Used for grouping tabs in the tab group. Must be `<syn-tab>` elements.\n\n### **CSS Properties:**\n - **--indicator-color** - The color of the active tab indicator. _(default: undefined)_\n- **--indicator-width** - The width of the active tab indicator. _(default: undefined)_\n- **--track-color** - The color of the indicator's track (the line that separates tabs from panels). _(default: undefined)_\n- **--track-width** - The width of the indicator's track (the line that separates tabs from panels). _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **nav** - The tab group's navigation container where tabs are slotted in.\n- **tabs** - The container that wraps the tabs.\n- **active-tab-indicator** - The line that highlights the currently selected tab.\n- **body** - The tab group's body where tab panels are slotted in.\n- **scroll-button** - The previous/next scroll buttons that show when tabs are scrollable, an `<syn-icon-button>`.\n- **scroll-button--start** - The starting scroll button.\n- **scroll-button--end** - The ending scroll button.\n- **scroll-button__base** - The scroll button's exported `base` part.",
+      "attributes": [
+        {
+          "name": "placement",
+          "description": "The placement of the tabs.",
+          "values": [{ "name": "top" }, { "name": "start" }, { "name": "end" }]
+        },
+        {
+          "name": "activation",
+          "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.",
+          "values": [{ "name": "auto" }, { "name": "manual" }]
+        },
+        {
+          "name": "no-scroll-controls",
+          "description": "Disables the scroll arrows that appear when tabs overflow.",
+          "values": []
+        },
+        {
+          "name": "contained",
+          "description": "Draws the tab group as a contained element.",
+          "values": []
+        },
+        {
+          "name": "sharp",
+          "description": "Draws the tab group with edges instead of roundings. Takes only effect if used with the 'contained' property",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://synergy.style/components/tab-group"
+        }
+      ]
+    },
+    {
+      "name": "syn-tab-panel",
+      "description": "Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.\n---\n\n\n### **Slots:**\n - _default_ - The tab panel's content.\n\n### **CSS Properties:**\n - **--padding** - The tab panel's padding. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "attributes": [
+        {
+          "name": "name",
+          "description": "The tab panel's name.",
+          "values": []
+        },
+        {
+          "name": "active",
+          "description": "When true, the tab panel will be shown.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://synergy.style/components/tab-panel"
+        }
+      ]
+    },
     {
       "name": "syn-tag",
       "description": "Tags are used as labels to organize things or to indicate a selection.\n---\n\n\n### **Events:**\n - **syn-remove** - Emitted when the remove button is activated.\n\n### **Slots:**\n - _default_ - The tag's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **content** - The tag's content.\n- **remove-button** - The tag's remove button, an `<syn-icon-button>`.\n- **remove-button__base** - The remove button's exported `base` part.",

package/package.json

@@ -4,7 +4,7 @@
     "url": "https://www.sick.com"
   },
   "name": "@synergy-design-system/components",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "",
   "repository": {
     "type": "git",
@@ -43,7 +43,7 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.9.4",
     "@open-wc/testing": "^4.0.0",
-    "@playwright/test": "^1.43.1",
+    "@playwright/test": "^1.44.1",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/exec": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
@@ -52,7 +52,7 @@
     "@typescript-eslint/eslint-plugin": "^7.7.1",
     "@typescript-eslint/parser": "^7.7.1",
     "@web/dev-server-esbuild": "^1.0.2",
-    "@web/test-runner": "^0.18.1",
+    "@web/test-runner": "^0.18.2",
     "@web/test-runner-commands": "^0.9.0",
     "@web/test-runner-playwright": "^0.11.0",
     "chalk": "^5.3.0",
@@ -91,7 +91,7 @@
     "vue-tsc": "^2.0.14",
     "@synergy-design-system/stylelint-config-syn": "0.1.0",
     "@synergy-design-system/eslint-config-syn": "0.1.0",
-    "@synergy-design-system/tokens": "2.0.0"
+    "@synergy-design-system/tokens": "2.1.0"
   },
   "release": {
     "branches": [

package/dist/chunks/chunk.VTKIDI7N.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/components/icon/library.system.ts"],
-  "sourcesContent": ["/* eslint-disable */\nimport type { IconLibrary } from './library.js';\n\n//\n// System icons are a separate library to ensure they're always available, regardless of how the default icon library is\n// configured or if its icons resolve properly.\n//\n// All Synergy components must use the system library instead of the default library. For visual consistency, system\n// icons are a subset of Bootstrap Icons.\n//\n// **Start system icons**\nconst icons = {\n\t'add': `\n\t\t<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill='currentColor'><path d=\"M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z\"/></svg>`,\n\t'caret': `\n\t\t<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill='currentColor'><path d=\"M16.59 8.29498L12 12.875L7.41 8.29498L6 9.70498L12 15.705L18 9.70498L16.59 8.29498Z\"/></svg>`,\n\t'check': `\n\t\t<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill='currentColor'><path d=\"M8.79496 15.875L4.62496 11.705L3.20496 13.115L8.79496 18.705L20.795 6.70498L19.385 5.29498L8.79496 15.875Z\"/></svg>`,\n\t'chevron-down': `\n\t\t<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill='currentColor'><path d=\"M16.59 8.29498L12 12.875L7.41 8.29498L6 9.70498L12 15.705L18 9.70498L16.59 8.29498Z\"/></svg>`,\n\t'eye-slash': `\n\t\t<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill='currentColor'><path d=\"M12.005 6.5C14.765 6.5 17.005 8.74 17.005 11.5C17.005 12.15 16.875 12.76 16.645 13.33L19.565 16.25C21.075 14.99 22.265 13.36 22.995 11.5C21.265 7.11 16.995 4 11.995 4C10.595 4 9.255 4.25 8.01501 4.7L10.175 6.86C10.745 6.63 11.355 6.5 12.005 6.5ZM2.005 3.77L4.745 6.51C3.085 7.8 1.785 9.52 1.005 11.5C2.735 15.89 7.005 19 12.005 19C13.555 19 15.035 18.7 16.385 18.16L16.805 18.58L19.735 21.5L21.005 20.23L3.275 2.5L2.005 3.77ZM7.53501 9.3L9.085 10.85C9.035 11.06 9.005 11.28 9.005 11.5C9.005 13.16 10.345 14.5 12.005 14.5C12.225 14.5 12.445 14.47 12.655 14.42L14.205 15.97C13.535 16.3 12.795 16.5 12.005 16.5C9.245 16.5 7.005 14.26 7.005 11.5C7.005 10.71 7.20501 9.97 7.53501 9.3ZM11.845 8.52L14.995 11.67L15.015 11.51C15.015 9.85 13.675 8.51 12.015 8.51L11.845 8.52Z\"/></svg>`,\n\t'eye': `\n\t\t<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill='currentColor'><path d=\"M12 4.5C7 4.5 2.73 7.61 1 12C2.73 16.39 7 19.5 12 19.5C17 19.5 21.27 16.39 23 12C21.27 7.61 17 4.5 12 4.5ZM12 17C9.24 17 7 14.76 7 12C7 9.24 9.24 7 12 7C14.76 7 17 9.24 17 12C17 14.76 14.76 17 12 17ZM12 9C10.34 9 9 10.34 9 12C9 13.66 10.34 15 12 15C13.66 15 15 13.66 15 12C15 10.34 13.66 9 12 9Z\"/></svg>`,\n\t'indeterminate': `\n\t\t<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill='currentColor'><path d=\"M19 13H5V11H19V13Z\"/></svg>`,\n\t'logo-color': `\n\t\t<svg width=\"295\" height=\"94\" viewBox=\"0 0 295 94\" xmlns=\"http://www.w3.org/2000/svg\" fill='currentColor'><g clip-path=\"url(#clip0_9951_9907)\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M207.961 69.0591C200.132 83.8898 184.613 93.983 166.804 93.983C141.096 93.983 120.257 72.9431 120.257 46.9915C120.257 21.0399 141.096 0 166.804 0C184.439 0 199.775 9.89295 207.674 24.4885L188.602 34.7821C184.335 26.9182 176.088 21.6757 166.804 21.6757C153.262 21.6757 141.932 32.8139 141.932 46.9915C141.932 61.1691 153.262 72.3074 166.804 72.3074C176.279 72.3074 184.726 66.8558 188.907 58.7133L207.961 69.0591ZM111.078 1.66335H89.7768V91.8668H111.078V1.66335ZM26.0822 91.8669C13.9511 91.8669 0.592136 85.318 0.592136 70.1128C0.592136 70.1128 47.1743 70.1128 54.5941 70.1215C62.4927 68.5453 61.6132 58.5826 54.5941 57.2067H26.8746C12.1223 57.2067 0.444092 44.6141 0.444092 29.6092C0.444092 15.1791 11.234 1.67206 26.8746 1.67206H57.285C69.8254 1.67206 78.7778 11.0599 78.7778 22.9645H26.8746C19.8991 23.9573 19.4549 34.6602 26.8746 35.8707H54.5157C69.6773 36.28 81.7735 48.3501 81.7735 63.6336C81.7735 77.7154 69.8254 91.8669 54.5853 91.8669H26.0822ZM215.99 91.8668V1.66335H237.535V37.8388H245.826L268.224 1.66335H294.716L264.192 47.3399L294.272 91.8668H267.771L245.103 56.9193H237.535V91.8668H215.99Z\"/></g><defs><clipPath id=\"clip0_9951_9907\"><rect width=\"295\" height=\"94\"/></clipPath></defs></svg>`,\n\t'menu': `\n\t\t<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill='currentColor'><path d=\"M3 18H21V16H3V18ZM3 13H21V11H3V13ZM3 6V8H21V6H3Z\"/></svg>`,\n\t'more': `\n\t\t<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill='currentColor'><path d=\"M6 10C4.9 10 4 10.9 4 12C4 13.1 4.9 14 6 14C7.1 14 8 13.1 8 12C8 10.9 7.1 10 6 10ZM18 10C16.9 10 16 10.9 16 12C16 13.1 16.9 14 18 14C19.1 14 20 13.1 20 12C20 10.9 19.1 10 18 10ZM12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10Z\"/></svg>`,\n\t'more_vert': `\n\t\t<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill='currentColor'><path d=\"M12 8C13.1 8 14 7.1 14 6C14 4.9 13.1 4 12 4C10.9 4 10 4.9 10 6C10 7.1 10.9 8 12 8ZM12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10ZM12 16C10.9 16 10 16.9 10 18C10 19.1 10.9 20 12 20C13.1 20 14 19.1 14 18C14 16.9 13.1 16 12 16Z\"/></svg>`,\n\t'radio': `\n\t\t<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill='currentColor'><path d=\"M17 12C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12C7 9.23858 9.23858 7 12 7C14.7614 7 17 9.23858 17 12Z\"/></svg>`,\n\t'x-circle-fill': `\n\t\t<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill='currentColor'><path d=\"M12 2C6.47 2 2 6.47 2 12C2 17.53 6.47 22 12 22C17.53 22 22 17.53 22 12C22 6.47 17.53 2 12 2ZM17 15.59L15.59 17L12 13.41L8.41 17L7 15.59L10.59 12L7 8.41L8.41 7L12 10.59L15.59 7L17 8.41L13.41 12L17 15.59Z\"/></svg>`,\n\t'x-lg': `\n\t\t<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill='currentColor'><path d=\"M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z\"/></svg>`\n};\n// **End system icons**\n\nconst systemLibrary: IconLibrary = {\n  name: 'system',\n  resolver: (name: keyof typeof icons) => {\n    if (name in icons) {\n      return `data:image/svg+xml,${encodeURIComponent(icons[name])}`;\n    }\n    return '';\n  }\n};\n\nexport default systemLibrary;\n"],
-  "mappings": ";AAWA,IAAM,QAAQ;AAAA,EACb,OAAO;AAAA;AAAA,EAEP,SAAS;AAAA;AAAA,EAET,SAAS;AAAA;AAAA,EAET,gBAAgB;AAAA;AAAA,EAEhB,aAAa;AAAA;AAAA,EAEb,OAAO;AAAA;AAAA,EAEP,iBAAiB;AAAA;AAAA,EAEjB,cAAc;AAAA;AAAA,EAEd,QAAQ;AAAA;AAAA,EAER,QAAQ;AAAA;AAAA,EAER,aAAa;AAAA;AAAA,EAEb,SAAS;AAAA;AAAA,EAET,iBAAiB;AAAA;AAAA,EAEjB,QAAQ;AAAA;AAET;AAGA,IAAM,gBAA6B;AAAA,EACjC,MAAM;AAAA,EACN,UAAU,CAAC,SAA6B;AACtC,QAAI,QAAQ,OAAO;AACjB,aAAO,sBAAsB,mBAAmB,MAAM,IAAI,CAAC,CAAC;AAAA,IAC9D;AACA,WAAO;AAAA,EACT;AACF;AAEA,IAAO,yBAAQ;",
-  "names": []
-}