@synergy-design-system/components 2.59.0 → 2.61.0

package/dist/synergy.js

@@ -6,64 +6,64 @@ import {
 import "./chunks/chunk.NKIYFJN2.js";
 import {
   tooltip_default
-} from "./chunks/chunk.LLTNGTMZ.js";
+} from "./chunks/chunk.FLKOWITA.js";
 import {
   validate_default
-} from "./chunks/chunk.U5CYIH2K.js";
-import "./chunks/chunk.TATABENV.js";
-import "./chunks/chunk.ESJLKO62.js";
+} from "./chunks/chunk.VH5KVON7.js";
+import "./chunks/chunk.CNKA3COT.js";
+import "./chunks/chunk.KZS4WQH7.js";
 import "./chunks/chunk.MVM3NN6Y.js";
 import {
   tag_default
-} from "./chunks/chunk.ET5SKS5F.js";
+} from "./chunks/chunk.PT3ZBDHT.js";
 import {
   textarea_default
-} from "./chunks/chunk.6EIC7INN.js";
-import "./chunks/chunk.2APLAGXI.js";
+} from "./chunks/chunk.U2GOCRLK.js";
+import "./chunks/chunk.APY3FCUW.js";
 import "./chunks/chunk.SHIPVO7H.js";
 import "./chunks/chunk.FQWBH6B3.js";
 import {
   tab_group_default
-} from "./chunks/chunk.3ZRFI5ZD.js";
-import "./chunks/chunk.3TMX4LQD.js";
+} from "./chunks/chunk.3AFDHVIQ.js";
+import "./chunks/chunk.PDT62XHY.js";
 import "./chunks/chunk.XOXVVU5C.js";
 import "./chunks/chunk.PKYC7QF3.js";
 import {
   tab_panel_default
-} from "./chunks/chunk.U65YQKTZ.js";
-import "./chunks/chunk.3XX47C2F.js";
+} from "./chunks/chunk.WHEAZBJO.js";
+import "./chunks/chunk.46PDHW6J.js";
 import "./chunks/chunk.XHWYGYMQ.js";
 import "./chunks/chunk.HVXG4JG6.js";
 import {
   switch_default
-} from "./chunks/chunk.MS3MMVKS.js";
-import "./chunks/chunk.YLXELWVF.js";
+} from "./chunks/chunk.HVY3DFLC.js";
+import "./chunks/chunk.OILJPI6E.js";
 import "./chunks/chunk.ESOR5SLZ.js";
 import "./chunks/chunk.4TB35TYG.js";
 import {
   tab_default
-} from "./chunks/chunk.EJLLUZOI.js";
-import "./chunks/chunk.KOJTNHSY.js";
+} from "./chunks/chunk.NUAOU6OT.js";
+import "./chunks/chunk.GIEVYD35.js";
 import "./chunks/chunk.JMMSJRM5.js";
 import "./chunks/chunk.43YNZAWL.js";
 import {
   side_nav_default
-} from "./chunks/chunk.UOHEFXUJ.js";
-import "./chunks/chunk.MOLM5I7S.js";
-import "./chunks/chunk.CFIZ5BPM.js";
+} from "./chunks/chunk.RSPERNNT.js";
+import "./chunks/chunk.ENRGRYMR.js";
+import "./chunks/chunk.EFSUQWJZ.js";
 import {
   spinner_default
-} from "./chunks/chunk.OBF6GYLU.js";
+} from "./chunks/chunk.WYQVPB42.js";
 import {
   range_tick_default
-} from "./chunks/chunk.OSQFCWFG.js";
-import "./chunks/chunk.E34AGRE4.js";
+} from "./chunks/chunk.VV42KPQP.js";
+import "./chunks/chunk.GSOJI47E.js";
 import "./chunks/chunk.OI3HOOCT.js";
 import {
   select_default
-} from "./chunks/chunk.XCTKEGXR.js";
-import "./chunks/chunk.XTL2NOWF.js";
-import "./chunks/chunk.MVIB2J5N.js";
+} from "./chunks/chunk.XNNFEGSV.js";
+import "./chunks/chunk.75327KMB.js";
+import "./chunks/chunk.KH3TXJZC.js";
 import "./chunks/chunk.2NIFD3YE.js";
 import "./chunks/chunk.6EPU7YUS.js";
 import "./chunks/chunk.VECCQZP5.js";
@@ -71,155 +71,155 @@ import "./chunks/chunk.O4QFINH7.js";
 import "./chunks/chunk.XTWO6ZZW.js";
 import {
   radio_group_default
-} from "./chunks/chunk.CNZ7TNEW.js";
+} from "./chunks/chunk.Z3ZPK3VE.js";
 import {
   range_default
-} from "./chunks/chunk.JTEWTWQV.js";
-import "./chunks/chunk.MVHZP3HD.js";
-import "./chunks/chunk.GEFPE7BJ.js";
+} from "./chunks/chunk.3QOI4R7D.js";
+import "./chunks/chunk.IK335MXD.js";
+import "./chunks/chunk.5K2YG44Q.js";
 import "./chunks/chunk.E7LBPRDC.js";
 import "./chunks/chunk.O644HRW3.js";
-import "./chunks/chunk.UFNQFJO6.js";
+import "./chunks/chunk.BXXVSZMC.js";
 import "./chunks/chunk.236RSW67.js";
-import "./chunks/chunk.H47LB5ZE.js";
-import "./chunks/chunk.I6YARDHH.js";
+import "./chunks/chunk.YMFRLHG3.js";
+import "./chunks/chunk.DH3ESODU.js";
 import {
   radio_default
-} from "./chunks/chunk.NYVFQLS5.js";
-import "./chunks/chunk.NN6AEE2I.js";
+} from "./chunks/chunk.NGZK57N5.js";
+import "./chunks/chunk.DTPONOEN.js";
 import "./chunks/chunk.JK6P7JZN.js";
 import "./chunks/chunk.EHSNF4SS.js";
 import {
   radio_button_default
-} from "./chunks/chunk.3VFFT7KA.js";
-import "./chunks/chunk.55R5E73C.js";
+} from "./chunks/chunk.4MI5NFOQ.js";
+import "./chunks/chunk.ARM4PNIC.js";
 import "./chunks/chunk.4BRJ5OJE.js";
-import "./chunks/chunk.UHZ6N7SN.js";
+import "./chunks/chunk.34GGYKTS.js";
 import "./chunks/chunk.6USNG4EL.js";
 import "./chunks/chunk.K62NPKGN.js";
 import {
   progress_bar_default
-} from "./chunks/chunk.QF57CWXD.js";
-import "./chunks/chunk.VJCOAANO.js";
+} from "./chunks/chunk.OWL4GHMH.js";
+import "./chunks/chunk.3Q2JFSEQ.js";
 import "./chunks/chunk.A7LOAARY.js";
 import "./chunks/chunk.QUM76UHV.js";
 import {
   progress_ring_default
-} from "./chunks/chunk.G4E4YUDS.js";
-import "./chunks/chunk.M7W6AV5N.js";
+} from "./chunks/chunk.62FS56KM.js";
+import "./chunks/chunk.KYXY7OSN.js";
 import "./chunks/chunk.5EC6B57G.js";
 import "./chunks/chunk.RMIDAEF5.js";
 import {
   popup_default
-} from "./chunks/chunk.GVC3AW7N.js";
+} from "./chunks/chunk.CLF2NPKX.js";
 import {
   prio_nav_default
-} from "./chunks/chunk.EVQXCVTN.js";
-import "./chunks/chunk.CVQZTFFE.js";
+} from "./chunks/chunk.4ZQ5JFZM.js";
+import "./chunks/chunk.H3MLGRPO.js";
 import "./chunks/chunk.74N5WLM5.js";
 import "./chunks/chunk.OJ3N7TWP.js";
 import {
   optgroup_default
-} from "./chunks/chunk.OR5RZYJU.js";
+} from "./chunks/chunk.IUD6TJE2.js";
 import {
   option_default
-} from "./chunks/chunk.ZHYYW63V.js";
+} from "./chunks/chunk.I6Y6H6LZ.js";
 import {
   menu_label_default
-} from "./chunks/chunk.IZS4RUL6.js";
-import "./chunks/chunk.TDDCZL6C.js";
+} from "./chunks/chunk.2DGSJTCG.js";
+import "./chunks/chunk.PTTVU6QZ.js";
 import "./chunks/chunk.X6GR6IA2.js";
 import "./chunks/chunk.RAOPZXJL.js";
 import {
   nav_item_default
-} from "./chunks/chunk.AFCSWFWX.js";
-import "./chunks/chunk.WESZCMRD.js";
-import "./chunks/chunk.5V47GZA4.js";
-import "./chunks/chunk.FELQTJSC.js";
+} from "./chunks/chunk.NV3NL5SL.js";
+import "./chunks/chunk.JVV3GBUZ.js";
+import "./chunks/chunk.M74YQZ5G.js";
+import "./chunks/chunk.JKB4DYWD.js";
 import "./chunks/chunk.MJ7R4QQT.js";
 import {
   menu_default
-} from "./chunks/chunk.GBHWFGL6.js";
+} from "./chunks/chunk.47VJ45KP.js";
 import {
   menu_item_default
-} from "./chunks/chunk.QTC3KQ7A.js";
-import "./chunks/chunk.IMPP4B46.js";
+} from "./chunks/chunk.L3GULWSC.js";
+import "./chunks/chunk.2JYHSAAS.js";
 import "./chunks/chunk.JQ5WZR46.js";
 import "./chunks/chunk.FSWTBNSI.js";
 import "./chunks/chunk.V4HPWQE7.js";
 import {
   icon_button_default
-} from "./chunks/chunk.IOI52QRF.js";
+} from "./chunks/chunk.RP2SB6ZN.js";
 import {
   input_default
-} from "./chunks/chunk.7FP7EPY7.js";
-import "./chunks/chunk.54RFNV7Z.js";
+} from "./chunks/chunk.ZT6OZX23.js";
+import "./chunks/chunk.TZUO63EQ.js";
 import "./chunks/chunk.NFXT5LNY.js";
 import "./chunks/chunk.K2O55TNU.js";
 import "./chunks/chunk.XAQKFEHH.js";
-import "./chunks/chunk.BTNHF3MY.js";
+import "./chunks/chunk.XEB4R66G.js";
 import "./chunks/chunk.AVZITCPQ.js";
 import "./chunks/chunk.C2CWYCOU.js";
 import {
   file_default
-} from "./chunks/chunk.MEMWFCBN.js";
+} from "./chunks/chunk.A4KC2YTZ.js";
 import {
   header_default
-} from "./chunks/chunk.2MFBTM52.js";
-import "./chunks/chunk.DIBBMAK6.js";
+} from "./chunks/chunk.UTS4OY7Q.js";
+import "./chunks/chunk.V3AU5UYF.js";
 import "./chunks/chunk.EK4TK5MY.js";
 import {
   icon_default
-} from "./chunks/chunk.IWX5J6ZH.js";
+} from "./chunks/chunk.QTWG6LWM.js";
 import {
   drawer_default
-} from "./chunks/chunk.Z464I5QC.js";
+} from "./chunks/chunk.WKSOR45M.js";
 import {
   dropdown_default
-} from "./chunks/chunk.QNHHHBZS.js";
-import "./chunks/chunk.EBUAHPEF.js";
+} from "./chunks/chunk.FUXYG2AM.js";
+import "./chunks/chunk.OWOU24WV.js";
 import "./chunks/chunk.2KYFCKCK.js";
 import "./chunks/chunk.D6IIQDWJ.js";
-import "./chunks/chunk.FFB3BX6Q.js";
+import "./chunks/chunk.YZL57T5B.js";
 import "./chunks/chunk.CW2Q7KG6.js";
 import {
   dialog_default
-} from "./chunks/chunk.UDOOSDVD.js";
+} from "./chunks/chunk.52X4H7ND.js";
 import {
   divider_default
-} from "./chunks/chunk.FOT6INZ3.js";
-import "./chunks/chunk.4KM6RGKM.js";
+} from "./chunks/chunk.HZ2LA3BN.js";
+import "./chunks/chunk.UHHGSBJ5.js";
 import "./chunks/chunk.57RV2JXO.js";
 import "./chunks/chunk.FSZIE7IO.js";
-import "./chunks/chunk.PV6RRTZL.js";
+import "./chunks/chunk.DDMT5GED.js";
 import "./chunks/chunk.N7QJ54ZM.js";
 import "./chunks/chunk.AAR2TIOJ.js";
 import {
   details_default
-} from "./chunks/chunk.NSEF7J3K.js";
-import "./chunks/chunk.EIOOJMCB.js";
+} from "./chunks/chunk.AYAMNMYX.js";
+import "./chunks/chunk.IWSVGHN3.js";
 import "./chunks/chunk.DFK2PRNS.js";
 import "./chunks/chunk.VA26EAEP.js";
-import "./chunks/chunk.BOTW6BVK.js";
+import "./chunks/chunk.LX6LJ3IQ.js";
 import "./chunks/chunk.MU43DZ7W.js";
 import "./chunks/chunk.AYAX7BG7.js";
 import "./chunks/chunk.G76BKD7B.js";
 import "./chunks/chunk.UCLYCASW.js";
 import {
   checkbox_default
-} from "./chunks/chunk.XLXRT6LZ.js";
-import "./chunks/chunk.ERJQUT3Z.js";
+} from "./chunks/chunk.EHCEFLBA.js";
+import "./chunks/chunk.WNYY3AJ7.js";
 import "./chunks/chunk.TKNBZNA7.js";
 import "./chunks/chunk.6OX2AX3Z.js";
 import {
   combobox_default
-} from "./chunks/chunk.XINCKHLR.js";
-import "./chunks/chunk.SNSWETHQ.js";
-import "./chunks/chunk.BBCABGBI.js";
+} from "./chunks/chunk.MJ3JZB7V.js";
+import "./chunks/chunk.JLS5KE4Z.js";
+import "./chunks/chunk.BI3WVKAJ.js";
 import "./chunks/chunk.G3KRSXVI.js";
 import "./chunks/chunk.IVM3BGRH.js";
 import "./chunks/chunk.ARR23WUY.js";
-import "./chunks/chunk.BMX6II3W.js";
+import "./chunks/chunk.BYWS4ZYW.js";
 import "./chunks/chunk.36EHOOOO.js";
 import "./chunks/chunk.AZ3N5IOO.js";
 import {
@@ -235,59 +235,61 @@ import "./chunks/chunk.QC7X32ZP.js";
 import "./chunks/chunk.TRGOAYBG.js";
 import {
   button_default
-} from "./chunks/chunk.Z6BJBMZJ.js";
+} from "./chunks/chunk.H3A42GXZ.js";
 import {
   button_group_default
-} from "./chunks/chunk.GXI42ZT6.js";
-import "./chunks/chunk.ZGBGGKLU.js";
+} from "./chunks/chunk.52QQLMPO.js";
+import "./chunks/chunk.YXSPWIRV.js";
 import "./chunks/chunk.GRVNUIP2.js";
 import {
   card_default
-} from "./chunks/chunk.BJQQNSSW.js";
-import "./chunks/chunk.LWV4OLKB.js";
+} from "./chunks/chunk.DMOZQTWN.js";
+import "./chunks/chunk.BAFVZ72O.js";
 import "./chunks/chunk.UT6RKBNF.js";
 import "./chunks/chunk.C4JTZKPZ.js";
 import {
   breadcrumb_default
-} from "./chunks/chunk.ETQ6XKDV.js";
+} from "./chunks/chunk.D5BI2SJM.js";
 import {
   breadcrumb_item_default
-} from "./chunks/chunk.XKJZWCYJ.js";
-import "./chunks/chunk.CUTOWLU6.js";
+} from "./chunks/chunk.STL5TUYW.js";
+import "./chunks/chunk.F5PLJIZX.js";
 import "./chunks/chunk.77CVXMWD.js";
 import "./chunks/chunk.O6ZH6AOI.js";
-import "./chunks/chunk.O2NNLPBP.js";
-import "./chunks/chunk.2OYCXPYU.js";
+import "./chunks/chunk.CSDM5R4D.js";
+import "./chunks/chunk.P3MP2LEV.js";
 import "./chunks/chunk.4WQZFNSE.js";
 import "./chunks/chunk.JLXCLATV.js";
 import "./chunks/chunk.HP2LEQRU.js";
 import "./chunks/chunk.VWY2RG4F.js";
 import "./chunks/chunk.5SQ7NVBX.js";
 import {
-  accordion_default
-} from "./chunks/chunk.6IV6DCDZ.js";
+  alert_default
+} from "./chunks/chunk.666ITJJN.js";
 import {
   badge_default
-} from "./chunks/chunk.IVT4ZVP4.js";
-import "./chunks/chunk.V63YX2VD.js";
+} from "./chunks/chunk.FTZBLDAU.js";
+import "./chunks/chunk.ACEVQRTN.js";
 import "./chunks/chunk.NQ4HEUZZ.js";
 import "./chunks/chunk.Y5TMYX2L.js";
-import "./chunks/chunk.7QDFC46E.js";
+import "./chunks/chunk.3JETYJC7.js";
 import "./chunks/chunk.32CYREEV.js";
 import "./chunks/chunk.S22BO5SF.js";
 import {
-  alert_default
-} from "./chunks/chunk.KEXDYFQS.js";
-import "./chunks/chunk.XI6QDGYC.js";
+  accordion_default
+} from "./chunks/chunk.3JL5VU4O.js";
+import "./chunks/chunk.VA3R3B6D.js";
+import "./chunks/chunk.WNUZ6LH4.js";
+import "./chunks/chunk.UYYHSGA6.js";
 import "./chunks/chunk.WXVOTRW5.js";
-import "./chunks/chunk.YVWHOKS7.js";
+import "./chunks/chunk.LFUGUOFX.js";
 import "./chunks/chunk.E3Z62YYT.js";
 import "./chunks/chunk.DZ7YIR5N.js";
 import "./chunks/chunk.C2ENQBPM.js";
 import "./chunks/chunk.G6ITZTTW.js";
 import "./chunks/chunk.7JGKUB4A.js";
 import "./chunks/chunk.WVVQK5TE.js";
-import "./chunks/chunk.K322BFQH.js";
+import "./chunks/chunk.3NNDOLEQ.js";
 import {
   registerIconLibrary,
   unregisterIconLibrary
@@ -306,9 +308,6 @@ import {
   getBasePath,
   setBasePath
 } from "./chunks/chunk.234ERFCE.js";
-import "./chunks/chunk.MX72UPWV.js";
-import "./chunks/chunk.BXY667C7.js";
-import "./chunks/chunk.KEF2RTSA.js";
 import {
   enableDefaultSettings
 } from "./chunks/chunk.E5UUNP6E.js";
@@ -322,8 +321,9 @@ import "./chunks/chunk.6QJYD7WX.js";
 import "./chunks/chunk.RB2JR2ND.js";
 import "./chunks/chunk.BVZQ6QSY.js";
 import "./chunks/chunk.NLYVOJGK.js";
-import "./chunks/chunk.LNZCV2CX.js";
-import "./chunks/chunk.WNUZ6LH4.js";
+import "./chunks/chunk.5MU2DGIX.js";
+import "./chunks/chunk.MX72UPWV.js";
+import "./chunks/chunk.BXY667C7.js";
 import "./chunks/chunk.Z4XV3SMG.js";
 export {
   accordion_default as SynAccordion,

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

@@ -30,22 +30,12 @@
       ]
     },
     {
-      "name": "syn-alert",
-      "description": "Alerts are used to display important messages inline or as toast notifications.\n---\n\n\n### **Events:**\n - **syn-show** - Emitted when the alert opens.\n- **syn-after-show** - Emitted after the alert opens and all animations are complete.\n- **syn-hide** - Emitted when the alert closes.\n- **syn-after-hide** - Emitted after the alert closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the alert.\n- **hide()** - Hides the alert\n- **toast()** - Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\ndismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\ncalling this method again. The returned promise will resolve after the alert is hidden.\n\n### **Slots:**\n - _default_ - The alert's main content.\n- **icon** - An icon to show in the alert. Works best with `<syn-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon** - The container that wraps the optional icon.\n- **message** - The container that wraps the alert's main content.\n- **close-button** - The close button, an `<syn-icon-button>`.\n- **close-button__base** - The close button's exported `base` part.",
+      "name": "syn-badge",
+      "description": "Badges are used to draw attention and display statuses or counts.\n---\n\n\n### **Slots:**\n - _default_ - The badge's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
       "attributes": [
-        {
-          "name": "open",
-          "description": "Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the alert's open state.",
-          "values": []
-        },
-        {
-          "name": "closable",
-          "description": "Enables a close button that allows the user to dismiss the alert.",
-          "values": []
-        },
         {
           "name": "variant",
-          "description": "The alert's theme variant.",
+          "description": "The badge's theme variant.",
           "values": [
             { "name": "primary" },
             { "name": "success" },
@@ -53,27 +43,32 @@
             { "name": "warning" },
             { "name": "danger" }
           ]
-        },
-        {
-          "name": "duration",
-          "description": "The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\nthe alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning\nthe alert will not close on its own.",
-          "values": []
         }
       ],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-alert--docs"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-badge--docs"
         }
       ]
     },
     {
-      "name": "syn-badge",
-      "description": "Badges are used to draw attention and display statuses or counts.\n---\n\n\n### **Slots:**\n - _default_ - The badge's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "name": "syn-alert",
+      "description": "Alerts are used to display important messages inline or as toast notifications.\n---\n\n\n### **Events:**\n - **syn-show** - Emitted when the alert opens.\n- **syn-after-show** - Emitted after the alert opens and all animations are complete.\n- **syn-hide** - Emitted when the alert closes.\n- **syn-after-hide** - Emitted after the alert closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the alert.\n- **hide()** - Hides the alert\n- **toast()** - Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\ndismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\ncalling this method again. The returned promise will resolve after the alert is hidden.\n\n### **Slots:**\n - _default_ - The alert's main content.\n- **icon** - An icon to show in the alert. Works best with `<syn-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon** - The container that wraps the optional icon.\n- **message** - The container that wraps the alert's main content.\n- **close-button** - The close button, an `<syn-icon-button>`.\n- **close-button__base** - The close button's exported `base` part.",
       "attributes": [
+        {
+          "name": "open",
+          "description": "Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the alert's open state.",
+          "values": []
+        },
+        {
+          "name": "closable",
+          "description": "Enables a close button that allows the user to dismiss the alert.",
+          "values": []
+        },
         {
           "name": "variant",
-          "description": "The badge's theme variant.",
+          "description": "The alert's theme variant.",
           "values": [
             { "name": "primary" },
             { "name": "success" },
@@ -81,12 +76,17 @@
             { "name": "warning" },
             { "name": "danger" }
           ]
+        },
+        {
+          "name": "duration",
+          "description": "The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\nthe alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning\nthe alert will not close on its own.",
+          "values": []
         }
       ],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-badge--docs"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-alert--docs"
         }
       ]
     },

package/package.json

@@ -4,7 +4,7 @@
     "url": "https://www.sick.com"
   },
   "name": "@synergy-design-system/components",
-  "version": "2.59.0",
+  "version": "2.61.0",
   "description": "",
   "repository": {
     "type": "git",
@@ -101,7 +101,7 @@
     "vendorism": "^5.0.0",
     "@synergy-design-system/eslint-config-syn": "0.1.0",
     "@synergy-design-system/stylelint-config-syn": "0.1.0",
-    "@synergy-design-system/tokens": "2.40.0"
+    "@synergy-design-system/tokens": "2.42.0"
   },
   "dependencies": {
     "@floating-ui/dom": "^1.7.4",
@@ -111,7 +111,7 @@
     "lit": "^3.3.1"
   },
   "peerDependencies": {
-    "@synergy-design-system/tokens": "^2.40.0"
+    "@synergy-design-system/tokens": "^2.42.0"
   },
   "customElements": "dist/custom-elements.json",
   "scripts": {

package/dist/chunks/chunk.5V47GZA4.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/components/nav-item/nav-item.styles.ts"],
-  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  /**\n   * Default alignment is inline block when we are in horizontal mode\n   */\n  :host {\n    /**\n     * The indentation property defines the current \"level\" the component is on\n     * It may be set per hand, but is normally set during the render phase\n     * of a <syn-nav-item /> for slotted children\n     */\n    --indentation: 0;\n\n    /**\n     * Defines the amount of pixels each indentation level will shift the content to the left\n     */\n    --indentation-stepping: var(--syn-spacing-x-large);\n\n    /**\n     * Display property of the children. Defaults to \"contents\"\n     */\n    --display-children: contents;\n\n    display: block;\n  }\n\n  /**\n   * Switch alignment to inline-block when we are in horizontal mode\n   */\n  :host([horizontal]) {\n    display: inline-block;\n  }\n\n  /**\n   * Core nav item wrapper\n   */\n  .nav-item {\n    align-items: center;\n    background: transparent;\n    border: none;\n    box-shadow: inset 0 -1px 0 0 transparent;\n    box-sizing: border-box;\n    color: var(--syn-color-neutral-950);\n    cursor: pointer;\n    display: inline-flex;\n    font: var(--syn-font-sans);\n    font-size: var(--syn-font-size-small);\n    min-height: var(--syn-spacing-2x-large);\n    padding: var(--syn-spacing-small) var(--syn-spacing-large);\n    position: relative;\n    text-align: left;\n    text-decoration: none;\n    transition: background-color var(--syn-transition-fast) ease-in-out, box-shadow var(--syn-transition-fast) ease-in-out;\n    width: 100%;\n    z-index: 0;\n  }\n\n  .nav-item:focus-visible {\n    outline: none;\n  }\n\n  .nav-item:focus-visible::after {\n    content: '';\n    display: block;\n    height: 100%;\n    left: calc(var(--syn-spacing-x-small) * -1);\n    outline: var(--syn-focus-ring);\n    outline-offset: -2px;\n    position: absolute;\n    top: 0;\n    width: calc(100% + 2 * var(--syn-spacing-x-small));\n  }\n\n  .nav-item--vertical:focus-visible::after {\n    left: 0;\n    width: 100%;\n  }\n\n  /**\n   * Horizontal nav items use narrower paddings\n   */\n  .nav-item--horizontal {\n    padding: var(--syn-spacing-small) 0;\n  }\n\n  /**\n   * Nav Items acting as accordion use a slightly narrower padding on the right side\n   */\n  .nav-item.nav-item-is-accordion {\n    padding-right: var(--syn-spacing-medium);\n  }\n\n  .nav-item--disabled {\n    cursor: not-allowed;\n  }\n\n  .nav-item--current {\n    font-weight: var(--syn-font-weight-bold);\n  }\n\n  /**\n   * Basic set up for the nav item prefix.\n   */\n  .nav-item:not(.nav-item--disabled)::before {\n    background: var(--syn-color-neutral-600);\n    content: '';\n    display: block;\n    height: 100%;\n    left: 0;\n    opacity: 0;\n    position: absolute;\n    top: 0;\n    width: 100%;\n    z-index: -1;\n  }\n\n  /**\n   * Hover effect for the nav item.\n   * We use opacity to make sure the border-bottom is visible if used in the prio-nav in header\n   */\n  .nav-item:not(.nav-item--disabled):hover::before {\n    opacity: 0.11;\n  }\n\n  /**\n   * When using horizontal, the background should extend the element\n   * on the left and right so the animation for the indicator can be seen\n   */\n  .nav-item--horizontal:not(.nav-item--disabled)::before {\n    left: calc(var(--syn-spacing-x-small) * -1);\n    width: calc(100% + 2 * var(--syn-spacing-x-small));\n  }\n\n  /**\n   * The content wrapper is needed to get the disabled state right\n   * and also sets the left padding, according to the given indentation level.\n   *\n   * Normally, we would just use opacity directly on the button.\n   * However, when using the divider prop, this leads to problems\n   * as the divider itself will also get opaque.\n   */\n  .nav-item__content {\n    align-items: center;\n    display: flex;\n    padding-inline-start: calc(var(--indentation) * var(--indentation-stepping));\n    width: 100%;\n  }\n\n  .nav-item--disabled .nav-item__content {\n    opacity: var(--syn-opacity-50);\n  }\n\n  /**\n   * Slotted icons should use a default font size of large\n   */\n  .nav-item--has-prefix ::slotted(syn-icon),\n  .nav-item--has-suffix ::slotted(syn-icon) {\n    font-size: var(--syn-font-size-x-large);\n    min-width: var(--syn-font-size-x-large);\n  }\n\n  /**\n   * The chevron indicates the use as a <details /> element OR a link\n   */\n  .nav-item__chevron {\n    font-size: var(--syn-font-size-x-large);\n    margin-inline-start: var(--syn-spacing-x-small);\n    rotate: 0deg;\n    transition: var(--syn-transition-medium) rotate ease;\n  }\n\n  .nav-item__chevron-open {\n    rotate: -180deg;\n  }\n\n  /**\n   * Items that have the chevron attribute set and are NOT accordions should always show a chevron pointing to the right\n   */\n  .nav-item:not(.nav-item-is-accordion) .nav-item__chevron {\n    rotate: -90deg;\n  }\n\n  /**\n   * Make the primary content container fill all available space\n   */\n  .nav-item__content-container {\n    flex: 1;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  /**\n   * Horizontal navigation items should not break words\n   */\n    .nav-item--horizontal .nav-item__content-container {\n    font-weight: var(--syn-font-weight-bold);\n    white-space: nowrap;\n  }\n\n  /**\n   * Show prefix only\n   */\n  /* stylelint-disable no-descending-specificity */\n  .nav-item--show-prefix-only .nav-item__content-container,\n  .nav-item--show-prefix-only .nav-item__suffix,\n  .nav-item--show-prefix-only .nav-item__chevron {\n    height: var(--syn-spacing-large);\n  }\n  /* stylelint-enable no-descending-specificity */\n\n  /**\n   * Adjust the paddings for the label, depending if there is a pre- and/or suffix available.\n   * But only if the there is a main content or additionally a prefix / suffix\n   */\n  .nav-item--has-prefix.nav-item--has-content .nav-item__content-container,\n  .nav-item--has-prefix.nav-item--has-suffix .nav-item__content-container {\n    margin-inline-start: var(--syn-spacing-x-small);\n  }\n\n  .nav-item--has-suffix.nav-item--has-content .nav-item__content-container,\n  .nav-item--has-suffix.nav-item--has-prefix .nav-item__content-container {\n    margin-inline-end: var(--syn-spacing-x-small);\n  }\n\n  /**\n   * Multi line content\n   */\n  /* stylelint-disable no-descending-specificity */\n  .nav-item--multi-line .nav-item__suffix,\n  .nav-item--multi-line .nav-item__prefix,\n  .nav-item--multi-line .nav-item__chevron {\n    align-self: flex-start;\n  }\n  /* stylelint-enable no-descending-specificity */\n\n  /* stylelint-disable no-descending-specificity */\n  .nav-item--multi-line .nav-item__suffix::slotted(syn-icon),\n  :not(.nav-item--show-prefix-only).nav-item--multi-line .nav-item__prefix::slotted(syn-icon),\n  .nav-item--multi-line .nav-item__chevron {\n    align-self: flex-start;\n  }\n  /* stylelint-enable no-descending-specificity */\n\n  /**\n   * The current indicator tells the user that the nav-item is the active one\n   */\n  .current-indicator {\n    background: transparent;\n    border: none;\n    margin: 0;\n    position: absolute;\n    transition: var(--syn-transition-medium) top ease,\n      var(--syn-transition-medium) right ease,\n      var(--syn-transition-medium) bottom ease,\n      var(--syn-transition-medium) left ease;\n    z-index: 1;\n  }\n\n  .current-indicator--visible.current-indicator--disabled {\n    background: var(--syn-color-neutral-500);\n  }\n\n  .current-indicator--visible {\n    background: var(--syn-color-primary-600);\n  }\n\n  .nav-item--horizontal .current-indicator {\n    bottom: 0;\n    height: var(--syn-spacing-2x-small);\n    left: 0;\n    right: 0;\n  }\n\n  .nav-item--horizontal:hover .current-indicator--visible,\n  .nav-item--horizontal:focus-visible .current-indicator--visible {\n    left: calc(var(--syn-spacing-x-small) * -1);\n    right: calc(var(--syn-spacing-x-small) * -1);\n  }\n\n  .nav-item--vertical .current-indicator {\n    bottom: var(--syn-spacing-x-small);\n    left: 0;\n    top: var(--syn-spacing-x-small);\n    width: var(--syn-spacing-2x-small);\n  }\n\n  .nav-item--vertical:hover .current-indicator--visible,\n  .nav-item--vertical:focus-visible .current-indicator--visible {\n    bottom: 0;\n    top: 0;\n  }\n\n  /**\n   * Dividers are optionally displayed in horizontal nav items\n   */\n  .divider {\n    --color: var(--syn-color-neutral-200);\n\n    left: var(--syn-spacing-medium);\n    margin: 0;\n    position: absolute;\n    right: var(--syn-spacing-medium);\n    top: 0;\n    transition: border var(--syn-transition-fast) ease-in-out;\n  }\n\n  /**\n   * Hide the divider for active elements\n   */\n  .nav-item:focus-visible .divider {\n    --color: transparent;\n  }\n\n  /**\n   * Make sure the divider is not visible anymore when hovering\n   */\n  .nav-item:not(.nav-item--disabled):hover .divider {\n    --color: transparent;\n  }\n\n  /**\n   * Sub menu styling\n   */\n  summary.nav-item {\n    box-sizing: border-box;\n    display: flex;\n  }\n\n  details summary::-webkit-details-marker {\n    visibility: hidden;\n  }\n\n  .children {\n    display: var(--display-children)\n  }\n`;\n"],
-  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,0BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
-  "names": []
-}

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/components/side-nav/side-nav.styles.ts"],
-  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    --side-nav-open-width: 320px;\n    --side-nav-rail-width: 72px;\n\n    display: block;\n  }\n\n  /**\n   * Syn-drawer styling\n   */\n  .side-nav__drawer {\n    --size: var(--side-nav-open-width);\n  }\n  \n  .side-nav__drawer::part(base){\n    position: absolute;\n    z-index: var(--syn-z-index-drawer);\n  }\n\n  .side-nav__drawer::part(body),\n  .side-nav__drawer::part(footer) {\n    padding: 0;\n  }\n\n  /** \n   * Overlay \n   */\n  .side-nav__drawer::part(overlay){\n    position: absolute;\n  }\n\n\n\n\n  /****\n   *\n   * variant=\"default\"\n   *\n   ****/\n  \n  /* Side nav should have a width, so it behave correct in an e.g. display flex context */\n  .side-nav.side-nav--fix.side-nav--open {\n    width: var(--side-nav-open-width);\n  }\n\n  /* Fixed mode  */\n  .side-nav--fix .side-nav__drawer::part(overlay){\n    display: block;\n  }\n\n\n\n\n  /****\n   *\n   * variant=\"rail\"\n   *\n   ****/\n\n  /* \n   * Side nav should have a width, so it behave correct in an e.g. display flex context. \n   * in variant=\"rail\" the width is always the small rail width, because there should be no shrinking possible of the main content area.\n   */\n  .side-nav.side-nav--rail {\n    width: var(--side-nav-rail-width);\n  }\n\n  /* Adapt the width of the drawer */\n  :not(.side-nav--open).side-nav--rail .side-nav__drawer {\n    --size: var(--side-nav-rail-width);\n  }\n\n  /* Show the overlay of the drawer on touch devices */\n  .side-nav--open.side-nav--rail.side-nav--touch .side-nav__drawer::part(overlay){\n    display: block;\n  }\n\n  /* Avoid multiline flickering on open and close animation */\n  .side-nav--rail.side-nav--animation {\n    white-space: nowrap;\n  }\n\n  /* Hide the scrollbars in closed variant=\"rail\" */ \n  :not(.side-nav--open).side-nav--rail .side-nav__drawer::part(body){\n    overflow: hidden;\n  }\n\n\n\n\n  /****\n   *\n   * variant=\"sticky\"\n   *\n   ****/\n\n  /*\n   * Side nav should have a width, so it behave correct in an e.g. display flex context.\n   * In variant=\"sticky\" the width is the rail width if closed and the open width if open.\n   */\n  .side-nav.side-nav--sticky {\n    width: var(--side-nav-open-width);\n  }\n\n  .side-nav.side-nav--sticky:not(.side-nav--open) {\n    width: var(--side-nav-rail-width);\n  }\n\n  /* Adapt the width of the drawer */\n  :not(.side-nav--open).side-nav--sticky .side-nav__drawer {\n    --size: var(--side-nav-rail-width);\n  }\n\n\n  /*\n   * For touch devices the content should not shrink in a flex container\n   */ \n  .side-nav--sticky.side-nav--touch {\n    width: var(--side-nav-rail-width);\n  }\n\n  /* Avoid multiline flickering on open and close animation */\n  .side-nav--sticky.side-nav--animation {\n    white-space: nowrap;\n  }\n\n  /* Show the overlay of the drawer on touch devices */\n   .side-nav--open.side-nav--sticky.side-nav--touch .side-nav__drawer::part(overlay){\n    display: block;\n  }\n\n  .side-nav__toggle-icon > syn-icon {\n    font-size: var(--syn-font-size-x-large);\n    min-width: var(--syn-font-size-x-large);\n  }\n\n  /****\n   *\n   * Footer divider\n   *\n   ****/\n  .side-nav__footer-divider{\n    --spacing: 0;\n    --color: var(--syn-color-neutral-300);\n  }\n\n  :not(.side-nav--open).side-nav--rail ::slotted(syn-nav-item){\n    --display-children: none;\n  }\n`;\n"],
-  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,0BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
-  "names": []
-}

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/components/range/range.styles.ts"],
-  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    /*\n     * Values here apply for the default size of \"medium\"\n     * For other sizes, see below\n     */\n    --thumb-size: var(--syn-spacing-medium);\n    --thumb-hit-area-size: 1.4;\n    --track-hit-area-size: var(--syn-spacing-medium);\n    --track-active-offset: 0px;\n    --track-color-active: var(--syn-color-primary-600);\n    --track-color-inactive: var(--syn-color-neutral-200);\n    --track-height: var(--syn-spacing-2x-small);\n\n    /* This is needed to get the full with of the element, including the border */\n    --full-thumb-size: calc(var(--thumb-size) + (var(--syn-focus-ring-width) * 2));\n\n    /*\n     * There are multiple places where we need the half width of the thumb\n     * This is needed for example to position the knob on the track or\n     * provide the spacing to the left and right for the track to make it stand \"over\"\n     */\n    --half-thumb-size: calc(var(--full-thumb-size) / 2);\n  }\n\n  /* Sizes */\n  :host([size='small']) {\n    --thumb-size: var(--syn-spacing-small);\n  }\n\n  :host([size='large']) {\n    --thumb-size: var(--syn-spacing-medium-large);\n  }\n\n  .form-control {\n    align-items: stretch;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    writing-mode: horizontal-tb;\n  }\n\n  .base {\n    align-items: center;\n    cursor: text;\n    display: inline-flex;\n    flex: 1 1 auto;\n    font-family: var(--syn-input-font-family);\n    font-size: var(--syn-input-font-size-medium);\n    font-weight: var(--syn-input-font-weight);\n    justify-content: start;\n    letter-spacing: var(--syn-input-letter-spacing);\n    position: relative;\n    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */\n    touch-action: none; /* Prevent misbehavior in mobile by disabling native touch */\n    -webkit-touch-callout: none;\n    transition: var(--syn-transition-fast) color, var(--syn-transition-fast) border, var(--syn-transition-fast) box-shadow, var(--syn-transition-fast) background-color;\n    /* stylelint-disable-next-line property-no-vendor-prefix */\n    -webkit-user-select: none;\n    vertical-align: middle;\n    width: 100%;\n  }\n\n  .input__wrapper {\n    flex: 1 0 auto;\n    margin: 0 var(--half-thumb-size);\n    position: relative;\n  }\n\n  :host([disabled]) .base {\n    opacity: var(--syn-input-disabled-opacity);\n  }\n\n  .input__prefix,\n  .input__suffix {\n    align-items: center;\n    color: var(--syn-input-icon-color);\n    cursor: default;\n    display: inline-flex;\n    flex: 0 0 auto;\n  }\n\n  /* Sizing for the prefix and suffix */\n  .form-control--small .input__prefix ::slotted(*) {\n    font-size: var(--syn-input-font-size-small);\n    margin-inline-end: var(--syn-spacing-x-small);\n  }\n\n  .form-control--small .input__suffix ::slotted(*) {\n    font-size: var(--syn-input-font-size-small);\n    margin-inline-start: var(--syn-spacing-x-small);\n  }\n\n  .form-control--medium .input__prefix ::slotted(*) {\n    margin-inline-end: var(--syn-input-spacing-small);\n  }\n\n  .form-control--medium .input__suffix ::slotted(*) {\n    margin-inline-start: var(--syn-input-spacing-small);\n  }\n\n  .form-control--large .input__prefix ::slotted(*) {\n    font-size: var(--syn-input-font-size-large);\n    margin-inline-end: var(--syn-input-spacing-medium);\n  }\n\n  .form-control--large .input__suffix ::slotted(*) {\n    font-size: var(--syn-input-font-size-large);\n    margin-inline-start: var(--syn-input-spacing-medium);\n  }\n\n  .form-control--small .input__prefix ::slotted(syn-icon),\n  .form-control--small .input__suffix ::slotted(syn-icon) {\n    font-size: var(--syn-font-size-medium);\n  }\n\n  .form-control--medium .input__prefix ::slotted(syn-icon),\n  .form-control--medium .input__suffix ::slotted(syn-icon) {\n    font-size: var(--syn-font-size-x-large);\n  }\n  \n  .form-control--large .input__prefix ::slotted(syn-icon),\n  .form-control--large .input__suffix ::slotted(syn-icon) {\n    font-size: var(--syn-font-size-2x-large);\n  }\n\n  .track__wrapper {\n    cursor: pointer;\n    position: relative;\n  }\n\n  /* Internal helper for a better click surface on tracks */\n  .track__click-helper {\n    inset: calc(var(--track-hit-area-size) * -1) calc(var(--half-thumb-size) * -1);\n    position: absolute;\n  }\n\n  .track {\n    background-color: var(--track-color-inactive);\n    border-radius: var(--syn-border-radius-small);\n    height: var(--track-height);\n    margin: calc((var(--full-thumb-size) - var(--track-height)) / 2) calc(var(--half-thumb-size) * -1);\n  }\n\n  .active-track {\n    background-color: var(--track-color-active);\n    border-radius: var(--syn-border-radius-small);\n    height: var(--track-height);\n    margin: 0 calc(var(--half-thumb-size) * -1);\n    position: absolute;\n    top: 0;\n    z-index: 2;\n  }\n\n  .thumb {\n    background-color: var(--syn-color-primary-600);\n    border: var(--syn-focus-ring-width) solid var(--syn-color-neutral-0);\n    border-radius: var(--syn-border-radius-circle);\n    cursor: pointer;\n    display: block;\n    height: var(--full-thumb-size);\n    position: absolute;\n    top: 0;\n    transition: transform var(--syn-transition-fast) ease-in-out, background-color var(--syn-transition-fast) ease-in-out, box-shadow var(--syn-transition-fast) ease-in-out;\n    user-select: none;\n    width: var(--full-thumb-size);\n    z-index: 3;\n  }\n\n  /**\n   * Adds some space to the thumb that makes it easier to click and drag\n   */\n  .thumb::after {\n    background: transparent;\n    border-radius: var(--syn-border-radius-circle);\n    content: \"\";\n    display: block;\n  \n    /* The --thumb-size needs to be used to subtract from, because the border of the thumb is not calculated into the inset */\n    inset: calc((var(--thumb-size) - (var(--full-thumb-size) * var(--thumb-hit-area-size)) ) / 2);\n\n    /* This is needed as we also attach a pointerleave listener that stops */\n    pointer-events: none;\n    position: absolute;\n  }\n\n  .thumb:hover {\n    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */\n    cursor: grab;\n  }\n\n  .thumb.grabbed {\n    background: var(--syn-color-primary-950);\n    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */\n    cursor: grabbing;\n  }\n\n  .thumb:focus-visible {\n    outline: none;\n  }\n\n  .thumb:not(.grabbed):focus-visible {\n    background: var(--syn-color-primary-600);\n    outline: var(--syn-focus-ring);\n    outline-offset: 0;\n  }\n\n  :host([disabled]) .track__wrapper,\n  :host([disabled]) .thumb,\n  :host([disabled]) .thumb.grabbed {\n    cursor: not-allowed;\n  }\n\n  /*\n   * Guard against mobile devices not removing the transform\n   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/any-hover\n   */\n  @media (any-hover: hover) {\n    :host(:not([disabled])) .thumb:hover  {\n      transform: scale(var(--thumb-hit-area-size));\n    }\n\n    :host(:not([disabled])) .thumb:not(.grabbed):hover  {\n      background: var(--syn-color-primary-900);\n    }\n    \n    :host(:not([disabled])) .thumb:hover::after  {\n      /* Unset the area of the thumb click and drag area space, so it does not scale with the hover */\n      inset: unset;\n    }\n  }\n\n  /* Ticks */\n  .ticks {\n    cursor: pointer;\n    margin: 1px 0;\n    position: relative;\n    user-select: none;\n  }\n\n  .form-control--small .ticks ::slotted(*) {\n    font-size: var(--syn-font-size-small);\n  }\n\n  .form-control--large .ticks ::slotted(*) {\n    font-size: var(--syn-font-size-large);\n  }\n\n  /**\n   * Visually hide elements without display:none to make aria and other accessibility stuff work correctly\n   * This is necessary for accessibility reasons and e.g. for the native html input validation popup to be\n   * shown.\n   */\n  .visually-hidden {\n    border: 0;\n    clip: rect(0, 0, 0, 0);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\n  }\n\n  /**\n   * Position the validation input to the bottom and center of the range track\n   */\n  .range__validation-input {\n    bottom: 0;\n    left: 50%;\n  }\n  \n\n  :host([data-user-invalid]) .active-track {\n    --track-color-active: var(--syn-input-border-color-focus-error);\n  }\n\n  :host([data-user-invalid]) .thumb {\n    background-color: var(--syn-input-border-color-focus-error);\n  }\n`;\n"],
-  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,uBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
-  "names": []
-}