@synergy-design-system/components 2.16.0 → 2.17.0

package/dist/custom-elements.json

@@ -10642,6 +10642,22 @@
             {
               "description": "The thumb(s) that the user can drag to change the range.",
               "name": "thumb"
+            },
+            {
+              "description": "The base of the tooltip",
+              "name": "tooltip__base"
+            },
+            {
+              "description": "The arrow of the tooltip",
+              "name": "tooltip__arrow"
+            },
+            {
+              "description": "The popup of the tooltip",
+              "name": "tooltip__popup"
+            },
+            {
+              "description": "The body of the tooltip",
+              "name": "tooltip__body"
             }
           ],
           "slots": [
@@ -10774,6 +10790,16 @@
               "description": "The current values of the input (in ascending order) as a string of space separated values",
               "attribute": "value"
             },
+            {
+              "kind": "field",
+              "name": "restrictMovement",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Set to true to restrict the movement of a thumb to its next and previous thumb.\nThis only affects multi range components",
+              "attribute": "restrict-movement"
+            },
             {
               "kind": "field",
               "name": "valueAsArray",
@@ -10897,15 +10923,6 @@
                 "text": "NodeJS.Timeout"
               }
             },
-            {
-              "kind": "field",
-              "name": "#nextId",
-              "privacy": "private",
-              "type": {
-                "text": "number"
-              },
-              "default": "1"
-            },
             {
               "kind": "field",
               "name": "#lastChangeValue",
@@ -11001,6 +11018,33 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "#movementBoundariesForThumb",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "thumb",
+                  "type": {
+                    "text": "HTMLDivElement"
+                  },
+                  "description": "The thumb element that was moved"
+                },
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The current value of a thumb"
+                }
+              ],
+              "description": "Get the boundaries of a given thumb",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
+            },
             {
               "kind": "method",
               "name": "#onClickThumb",
@@ -11273,6 +11317,15 @@
               "description": "The current values of the input (in ascending order) as a string of space separated values",
               "fieldName": "value"
             },
+            {
+              "name": "restrict-movement",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Set to true to restrict the movement of a thumb to its next and previous thumb.\nThis only affects multi range components",
+              "fieldName": "restrictMovement"
+            },
             {
               "name": "form",
               "type": {
@@ -11291,7 +11344,7 @@
           "tagNameWithoutPrefix": "range",
           "tagName": "syn-range",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Ranges allow the user to select values within a given range using one or two thumbs.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-range--docs\n * @status stable\n *\n * @dependency syn-tooltip\n *\n * @slot label - The range's label. Alternatively, you can use the `label` attribute.\n * @slot prefix - Used to prepend a presentational icon or similar element to the range.\n * @slot suffix - Used to append a presentational icon or similar element to the range.\n * @slot help-text - Text that describes how to use the range.\n * Alternatively, you can use the `help-text` attribute.\n * @slot ticks - Used to display tick marks at specific intervals along the range.\n *\n * @event syn-blur - Emitted when the control loses focus.\n * @event syn-change - Emitted when an alteration to the control's value is committed by the user.\n * @event syn-focus - Emitted when the control gains focus.\n * @event syn-input - Emitted when the control receives input.\n * @event syn-invalid - Emitted when the form control has been checked for validity\n * and its constraints aren't satisfied.\n * @event syn-move - Emitted when the user moves a thumb, either via touch or keyboard.\n * Use `Event.preventDefault()` to prevent movement.\n *\n * @csspart form-control - The form control that wraps the label, input, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart base - The component's base wrapper.\n * @csspart input-wrapper - The container that wraps the input track and ticks.\n * @csspart track-wrapper - The wrapper for the track.\n * @csspart track - The inactive track.\n * @csspart active-track - The active track.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n * @csspart ticks - The container that wraps the tick marks.\n * @csspart thumb - The thumb(s) that the user can drag to change the range.\n *\n * @cssproperty --thumb-size - The size of a thumb.\n * @cssproperty --thumb-hit-area-size - The clickable area around the thumb.\n * Per default this is set to 140% of the thumb size. Must be a scale css value (defaults to 1.4).\n * @cssproperty --track-hit-area-size - The clickable area around the track (top and left).\n * @cssproperty --track-color-active - Color of the track representing the current value.\n * @cssproperty --track-color-inactive - Color of the track that represents the remaining value.\n * @cssproperty --track-height - The height of the track.\n * @cssproperty --track-active-offset - The point of origin of the active track,\n * starting at the left side of the range.\n */",
+          "jsDoc": "/**\n * @summary Ranges allow the user to select values within a given range using one or two thumbs.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-range--docs\n * @status stable\n *\n * @dependency syn-tooltip\n *\n * @slot label - The range's label. Alternatively, you can use the `label` attribute.\n * @slot prefix - Used to prepend a presentational icon or similar element to the range.\n * @slot suffix - Used to append a presentational icon or similar element to the range.\n * @slot help-text - Text that describes how to use the range.\n * Alternatively, you can use the `help-text` attribute.\n * @slot ticks - Used to display tick marks at specific intervals along the range.\n *\n * @event syn-blur - Emitted when the control loses focus.\n * @event syn-change - Emitted when an alteration to the control's value is committed by the user.\n * @event syn-focus - Emitted when the control gains focus.\n * @event syn-input - Emitted when the control receives input.\n * @event syn-invalid - Emitted when the form control has been checked for validity\n * and its constraints aren't satisfied.\n * @event syn-move - Emitted when the user moves a thumb, either via touch or keyboard.\n * Use `Event.preventDefault()` to prevent movement.\n *\n * @csspart form-control - The form control that wraps the label, input, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart base - The component's base wrapper.\n * @csspart input-wrapper - The container that wraps the input track and ticks.\n * @csspart track-wrapper - The wrapper for the track.\n * @csspart track - The inactive track.\n * @csspart active-track - The active track.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n * @csspart ticks - The container that wraps the tick marks.\n * @csspart thumb - The thumb(s) that the user can drag to change the range.\n *\n * @csspart tooltip__base - The base of the tooltip\n * @csspart tooltip__arrow - The arrow of the tooltip\n * @csspart tooltip__popup - The popup of the tooltip\n * @csspart tooltip__body - The body of the tooltip\n *\n * @cssproperty --thumb-size - The size of a thumb.\n * @cssproperty --thumb-hit-area-size - The clickable area around the thumb.\n * Per default this is set to 140% of the thumb size. Must be a scale css value (defaults to 1.4).\n * @cssproperty --track-hit-area-size - The clickable area around the track (top and left).\n * @cssproperty --track-color-active - Color of the track representing the current value.\n * @cssproperty --track-color-inactive - Color of the track that represents the remaining value.\n * @cssproperty --track-height - The height of the track.\n * @cssproperty --track-active-offset - The point of origin of the active track,\n * starting at the left side of the range.\n */",
           "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-range--docs",
           "status": "stable",
           "dependencies": [
@@ -15762,7 +15815,7 @@
   "package": {
     "name": "@synergy-design-system/components",
     "description": "",
-    "version": "2.16.0",
+    "version": "2.17.0",
     "author": {
       "name": "SICK Global UX Foundation",
       "url": "https://www.sick.com"

package/dist/styles/index.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/components version 2.16.0
+ * @synergy-design-system/components version 2.17.0
  * SICK Global UX Foundation
  * 
  * This file is created automatically in the build process!

package/dist/synergy.js

@@ -1,6 +1,6 @@
 import {
   validate_default
-} from "./chunks/chunk.UFC3YJ5I.js";
+} from "./chunks/chunk.POWZO4E7.js";
 import {
   getFormControls,
   serialize
@@ -8,214 +8,214 @@ import {
 import "./chunks/chunk.NKIYFJN2.js";
 import {
   textarea_default
-} from "./chunks/chunk.ZUXT7AYV.js";
+} from "./chunks/chunk.TTDAKHPU.js";
 import {
   tooltip_default
-} from "./chunks/chunk.TKZVWU7T.js";
-import "./chunks/chunk.HC6MGGJ6.js";
-import "./chunks/chunk.LRG4PEXV.js";
+} from "./chunks/chunk.3DXJYVPI.js";
+import "./chunks/chunk.ZMTR7ZMP.js";
+import "./chunks/chunk.57H3XT6Q.js";
 import "./chunks/chunk.MVM3NN6Y.js";
 import {
   tab_panel_default
-} from "./chunks/chunk.4YMJM646.js";
+} from "./chunks/chunk.DDOSGMTC.js";
 import {
   tag_default
-} from "./chunks/chunk.6Y4ZJTZC.js";
-import "./chunks/chunk.ZBC7LYRC.js";
+} from "./chunks/chunk.2G6V7DP2.js";
+import "./chunks/chunk.7TE6SX6I.js";
 import "./chunks/chunk.YBIBWRKC.js";
 import "./chunks/chunk.FQWBH6B3.js";
 import {
   tab_default
-} from "./chunks/chunk.KB72SYP4.js";
+} from "./chunks/chunk.7IXHNRJT.js";
 import {
   tab_group_default
-} from "./chunks/chunk.WMPGAMYW.js";
-import "./chunks/chunk.DWDJ72TM.js";
+} from "./chunks/chunk.PPCULXGZ.js";
+import "./chunks/chunk.FXC53VT5.js";
 import "./chunks/chunk.XOXVVU5C.js";
 import "./chunks/chunk.PKYC7QF3.js";
-import "./chunks/chunk.JDACQD7S.js";
+import "./chunks/chunk.NMV6QEGX.js";
 import "./chunks/chunk.XHWYGYMQ.js";
 import "./chunks/chunk.HVXG4JG6.js";
 import {
   spinner_default
-} from "./chunks/chunk.ARSATIO3.js";
+} from "./chunks/chunk.2K54W7I7.js";
 import {
   switch_default
-} from "./chunks/chunk.QQER6FSQ.js";
-import "./chunks/chunk.QAJE6ZLA.js";
+} from "./chunks/chunk.E43ZNV5W.js";
+import "./chunks/chunk.EPOKGZ5G.js";
 import "./chunks/chunk.W5JK7V7K.js";
 import "./chunks/chunk.4TB35TYG.js";
-import "./chunks/chunk.WFLEIPHW.js";
+import "./chunks/chunk.EAJBZDS3.js";
 import "./chunks/chunk.ZW75HBAK.js";
 import "./chunks/chunk.43YNZAWL.js";
 import {
   select_default
-} from "./chunks/chunk.EEQTTGA5.js";
+} from "./chunks/chunk.7YGGMSYD.js";
 import {
   side_nav_default
-} from "./chunks/chunk.AOXEGPUP.js";
-import "./chunks/chunk.X2P2L6CY.js";
+} from "./chunks/chunk.ARGHCKN4.js";
+import "./chunks/chunk.UYWN2AGN.js";
 import "./chunks/chunk.ONW45GQI.js";
 import {
   range_tick_default
-} from "./chunks/chunk.ITMT4PJC.js";
-import "./chunks/chunk.4Y7THPZR.js";
+} from "./chunks/chunk.2WODVLHQ.js";
+import "./chunks/chunk.USUMYRHO.js";
 import "./chunks/chunk.I6YARDHH.js";
-import "./chunks/chunk.CKIRULMX.js";
+import "./chunks/chunk.6A7XYSK2.js";
 import "./chunks/chunk.OI3HOOCT.js";
-import "./chunks/chunk.SJYFH4NX.js";
-import "./chunks/chunk.MA2KQ5TL.js";
+import "./chunks/chunk.XI4NDY2M.js";
+import "./chunks/chunk.LGXHBN6B.js";
 import "./chunks/chunk.B6R3IVGO.js";
 import "./chunks/chunk.6EPU7YUS.js";
 import "./chunks/chunk.XTWO6ZZW.js";
 import "./chunks/chunk.B6HFSIU2.js";
 import {
   radio_button_default
-} from "./chunks/chunk.O4UZUEV2.js";
+} from "./chunks/chunk.IY3XSVYK.js";
 import {
   radio_group_default
-} from "./chunks/chunk.3VQ4A42G.js";
-import "./chunks/chunk.HVPCPK6U.js";
+} from "./chunks/chunk.JXZO2OHF.js";
+import "./chunks/chunk.O4BSTAK6.js";
 import "./chunks/chunk.32LFHSM5.js";
 import "./chunks/chunk.K62NPKGN.js";
 import {
   range_default
-} from "./chunks/chunk.MEHGV46S.js";
-import "./chunks/chunk.4EVO3ZSJ.js";
-import "./chunks/chunk.NVLBT4EX.js";
+} from "./chunks/chunk.QY2V46SM.js";
+import "./chunks/chunk.A5AOOKJX.js";
+import "./chunks/chunk.VR2H45IE.js";
 import "./chunks/chunk.4X3HY2V5.js";
 import "./chunks/chunk.O644HRW3.js";
 import "./chunks/chunk.236RSW67.js";
-import "./chunks/chunk.277APOW3.js";
+import "./chunks/chunk.VFEILTOM.js";
 import {
   progress_ring_default
-} from "./chunks/chunk.FZHPWYHQ.js";
+} from "./chunks/chunk.YWCX6M3R.js";
 import {
   radio_default
-} from "./chunks/chunk.GUPAWM6P.js";
-import "./chunks/chunk.ZP5CC64G.js";
+} from "./chunks/chunk.QKAJJQOY.js";
+import "./chunks/chunk.FOPJZZUE.js";
 import "./chunks/chunk.UUB3PWNM.js";
 import "./chunks/chunk.EHSNF4SS.js";
-import "./chunks/chunk.KTVS4UZQ.js";
+import "./chunks/chunk.VNQ4RFXH.js";
 import "./chunks/chunk.4BRJ5OJE.js";
 import {
   prio_nav_default
-} from "./chunks/chunk.JIES4EWK.js";
+} from "./chunks/chunk.SW3UMTQY.js";
 import {
   progress_bar_default
-} from "./chunks/chunk.FR4Z5ZBV.js";
-import "./chunks/chunk.4ERC5S7M.js";
+} from "./chunks/chunk.ORFFJG4N.js";
+import "./chunks/chunk.UDHQMRDY.js";
 import "./chunks/chunk.AMAK44YX.js";
 import "./chunks/chunk.QUM76UHV.js";
-import "./chunks/chunk.7TFKIRIU.js";
+import "./chunks/chunk.5AT74B54.js";
 import "./chunks/chunk.RMIDAEF5.js";
 import "./chunks/chunk.2V3HGTTL.js";
 import {
   option_default
-} from "./chunks/chunk.AAAJCJMW.js";
+} from "./chunks/chunk.66KFZY6H.js";
 import {
   popup_default
-} from "./chunks/chunk.GVVTVQF7.js";
-import "./chunks/chunk.JBTGKNX6.js";
+} from "./chunks/chunk.BOSMJJHP.js";
+import "./chunks/chunk.KJN4EA2Q.js";
 import "./chunks/chunk.OJ3N7TWP.js";
 import "./chunks/chunk.74N5WLM5.js";
 import {
   nav_item_default
-} from "./chunks/chunk.DVIMQFJR.js";
-import "./chunks/chunk.PIZR7FER.js";
+} from "./chunks/chunk.TIOGLFQZ.js";
+import "./chunks/chunk.TGXVNNHD.js";
 import "./chunks/chunk.SHCZO4KK.js";
 import {
   optgroup_default
-} from "./chunks/chunk.S6PVL3IY.js";
-import "./chunks/chunk.SKRJOAVB.js";
+} from "./chunks/chunk.3EJRKPEB.js";
+import "./chunks/chunk.46AC476L.js";
 import "./chunks/chunk.MJ7R4QQT.js";
 import {
   menu_item_default
-} from "./chunks/chunk.LZSMNTI2.js";
+} from "./chunks/chunk.QNEW6ZPM.js";
 import {
   menu_label_default
-} from "./chunks/chunk.7YM4GQL5.js";
-import "./chunks/chunk.NL5BERRD.js";
+} from "./chunks/chunk.XCKLUDW6.js";
+import "./chunks/chunk.RNG3EGLM.js";
 import "./chunks/chunk.X6GR6IA2.js";
 import "./chunks/chunk.RAOPZXJL.js";
 import {
   input_default
-} from "./chunks/chunk.PKS27BPW.js";
+} from "./chunks/chunk.6AVLY6GI.js";
 import {
   menu_default
-} from "./chunks/chunk.JV3P24FY.js";
-import "./chunks/chunk.QAEUBEAV.js";
+} from "./chunks/chunk.DR275IL6.js";
+import "./chunks/chunk.E3GQ7OTE.js";
 import "./chunks/chunk.AVZITCPQ.js";
 import "./chunks/chunk.C2CWYCOU.js";
-import "./chunks/chunk.NTVLNKUW.js";
+import "./chunks/chunk.CJVRRP6V.js";
 import "./chunks/chunk.R24T7WQN.js";
 import "./chunks/chunk.FSWTBNSI.js";
 import "./chunks/chunk.V4HPWQE7.js";
 import {
   icon_button_default
-} from "./chunks/chunk.HPAT4ZGY.js";
-import "./chunks/chunk.Q5QC5PL2.js";
+} from "./chunks/chunk.VTLM7DHU.js";
+import "./chunks/chunk.YHQHX5V3.js";
 import "./chunks/chunk.VKRMYKYH.js";
 import "./chunks/chunk.3B22DBSJ.js";
 import {
   file_default
-} from "./chunks/chunk.NOKSF6XX.js";
+} from "./chunks/chunk.PLXP5QKF.js";
 import {
   header_default
-} from "./chunks/chunk.ZD3FY6V3.js";
-import "./chunks/chunk.3N4BFKAO.js";
+} from "./chunks/chunk.CZQ6H462.js";
+import "./chunks/chunk.BRZQZ24R.js";
 import "./chunks/chunk.66LQF6IO.js";
 import {
   icon_default
-} from "./chunks/chunk.76VMZW7N.js";
+} from "./chunks/chunk.4PCMVDV7.js";
 import {
   drawer_default
-} from "./chunks/chunk.WMUALQK7.js";
+} from "./chunks/chunk.QSW327OR.js";
 import {
   dropdown_default
-} from "./chunks/chunk.RUSXBAKS.js";
-import "./chunks/chunk.A5JVTKA7.js";
+} from "./chunks/chunk.DVVXP6UF.js";
+import "./chunks/chunk.5G3JLEL5.js";
 import "./chunks/chunk.2KYFCKCK.js";
 import "./chunks/chunk.D6IIQDWJ.js";
-import "./chunks/chunk.AQG4RTYT.js";
+import "./chunks/chunk.X3HVBM2M.js";
 import "./chunks/chunk.IKZOQ7AE.js";
 import {
   dialog_default
-} from "./chunks/chunk.YGL4XXSG.js";
+} from "./chunks/chunk.HI4EN6XA.js";
 import {
   divider_default
-} from "./chunks/chunk.4SXASIMC.js";
-import "./chunks/chunk.Z75O27E5.js";
+} from "./chunks/chunk.6ABYV4HR.js";
+import "./chunks/chunk.376IXRB4.js";
 import "./chunks/chunk.FA6V2WD6.js";
 import "./chunks/chunk.FSZIE7IO.js";
-import "./chunks/chunk.UW7BKCAT.js";
+import "./chunks/chunk.LVGBQKZG.js";
 import "./chunks/chunk.N7QJ54ZM.js";
 import "./chunks/chunk.I4FIU7FA.js";
 import {
   details_default
-} from "./chunks/chunk.KYN52V35.js";
-import "./chunks/chunk.DTXR26QK.js";
+} from "./chunks/chunk.NNHIMG4B.js";
+import "./chunks/chunk.5F6EOD5D.js";
 import "./chunks/chunk.PU2BDR2W.js";
 import "./chunks/chunk.VA26EAEP.js";
-import "./chunks/chunk.T7GIAIHS.js";
+import "./chunks/chunk.J3RVA2P6.js";
 import "./chunks/chunk.MU43DZ7W.js";
 import "./chunks/chunk.XDM6VD32.js";
 import "./chunks/chunk.POGMEL53.js";
 import "./chunks/chunk.IU3SSJZE.js";
 import {
   checkbox_default
-} from "./chunks/chunk.DFMQXGJM.js";
-import "./chunks/chunk.FX465Y3R.js";
+} from "./chunks/chunk.OIGK4P4F.js";
+import "./chunks/chunk.B2PE2TXL.js";
 import "./chunks/chunk.IG3RCOB3.js";
 import "./chunks/chunk.6OX2AX3Z.js";
 import {
   combobox_default
-} from "./chunks/chunk.QLST7IBN.js";
-import "./chunks/chunk.5K6422DI.js";
-import "./chunks/chunk.KTCL35FV.js";
+} from "./chunks/chunk.MOGLIA4W.js";
+import "./chunks/chunk.NY7IBX32.js";
+import "./chunks/chunk.LCJ226D4.js";
 import "./chunks/chunk.IJQ7XW3N.js";
 import "./chunks/chunk.IVM3BGRH.js";
-import "./chunks/chunk.RTI5KERT.js";
+import "./chunks/chunk.PFLZ6U6X.js";
 import "./chunks/chunk.AZ3N5IOO.js";
 import {
   defaultOptionRenderer,
@@ -230,52 +230,60 @@ import "./chunks/chunk.QC7X32ZP.js";
 import "./chunks/chunk.V4SIKF4X.js";
 import {
   button_default
-} from "./chunks/chunk.HTCBVBIB.js";
+} from "./chunks/chunk.RBRMTUVA.js";
 import {
   button_group_default
-} from "./chunks/chunk.GAUGMPIS.js";
-import "./chunks/chunk.42SNRHHV.js";
+} from "./chunks/chunk.ALP4Z2OW.js";
+import "./chunks/chunk.V6PPOZZC.js";
 import "./chunks/chunk.GRVNUIP2.js";
 import {
   card_default
-} from "./chunks/chunk.DDKF3K4K.js";
-import "./chunks/chunk.FONGHAFP.js";
+} from "./chunks/chunk.WAWSY7D6.js";
+import "./chunks/chunk.XOZJT43Y.js";
 import "./chunks/chunk.36SZKAYW.js";
 import "./chunks/chunk.C4JTZKPZ.js";
 import {
   breadcrumb_default
-} from "./chunks/chunk.A6XO5W2A.js";
+} from "./chunks/chunk.PO5VGAIT.js";
 import {
   breadcrumb_item_default
-} from "./chunks/chunk.UFN7YVRT.js";
-import "./chunks/chunk.XRUFZ67F.js";
+} from "./chunks/chunk.OVGCVB7R.js";
+import "./chunks/chunk.2AH6ZXHP.js";
 import "./chunks/chunk.NGIGPLN2.js";
 import "./chunks/chunk.O6ZH6AOI.js";
-import "./chunks/chunk.GU4BIPJ7.js";
-import "./chunks/chunk.3VTK46AD.js";
+import "./chunks/chunk.NIB7EMK2.js";
+import "./chunks/chunk.RMEGHAUX.js";
 import "./chunks/chunk.AWJ376R6.js";
 import "./chunks/chunk.JLXCLATV.js";
 import "./chunks/chunk.AMIQC3O7.js";
 import "./chunks/chunk.5EGFFSLN.js";
 import "./chunks/chunk.5SQ7NVBX.js";
+import {
+  alert_default
+} from "./chunks/chunk.74O6MY45.js";
 import {
   badge_default
-} from "./chunks/chunk.GH76X3GZ.js";
+} from "./chunks/chunk.JRXQYAF6.js";
+import "./chunks/chunk.3LE5R25I.js";
+import "./chunks/chunk.J6CGTLVH.js";
+import "./chunks/chunk.Y5TMYX2L.js";
+import "./chunks/chunk.D2BI6WDB.js";
+import "./chunks/chunk.32CYREEV.js";
+import "./chunks/chunk.S22BO5SF.js";
 import {
-  alert_default
-} from "./chunks/chunk.WHU4GH2D.js";
-import "./chunks/chunk.ZOAG7CLB.js";
-import "./chunks/chunk.A47YOODQ.js";
+  accordion_default
+} from "./chunks/chunk.6DIE4UQP.js";
+import "./chunks/chunk.FYHVWVR3.js";
+import "./chunks/chunk.WNUZ6LH4.js";
+import "./chunks/chunk.6Z4AYCNJ.js";
+import "./chunks/chunk.UQ3KSMJM.js";
 import "./chunks/chunk.6QYKWCSO.js";
 import "./chunks/chunk.DZ7YIR5N.js";
 import "./chunks/chunk.C2ENQBPM.js";
 import "./chunks/chunk.A3OYJILJ.js";
 import "./chunks/chunk.HQ6QUSK7.js";
 import "./chunks/chunk.WVVQK5TE.js";
-import "./chunks/chunk.JRYXECAY.js";
-import "./chunks/chunk.IFXKIEOU.js";
-import "./chunks/chunk.ZRT235WF.js";
-import "./chunks/chunk.WEMAFCFO.js";
+import "./chunks/chunk.ETTFHZ32.js";
 import {
   registerIconLibrary,
   unregisterIconLibrary
@@ -284,25 +292,17 @@ import "./chunks/chunk.YTEJW7IF.js";
 import "./chunks/chunk.LUXDS4EY.js";
 import "./chunks/chunk.PJO6TM3T.js";
 import "./chunks/chunk.ZBW4ZSZ7.js";
-import "./chunks/chunk.32CYREEV.js";
-import "./chunks/chunk.S22BO5SF.js";
+import "./chunks/chunk.GIU3H3J3.js";
+import "./chunks/chunk.S5N2TE2L.js";
 import {
   getBasePath,
   setBasePath
 } from "./chunks/chunk.234ERFCE.js";
-import {
-  accordion_default
-} from "./chunks/chunk.FKMCKT5E.js";
-import "./chunks/chunk.I4IRVCPG.js";
 import "./chunks/chunk.74IOULXM.js";
-import "./chunks/chunk.WNUZ6LH4.js";
-import "./chunks/chunk.DUIM2O3U.js";
-import "./chunks/chunk.GIU3H3J3.js";
-import "./chunks/chunk.S5N2TE2L.js";
 import "./chunks/chunk.NLYVOJGK.js";
-import "./chunks/chunk.BQ5QQEE4.js";
-import "./chunks/chunk.J6CGTLVH.js";
-import "./chunks/chunk.Y5TMYX2L.js";
+import "./chunks/chunk.4H7Y7UVK.js";
+import "./chunks/chunk.JRYXECAY.js";
+import "./chunks/chunk.IFXKIEOU.js";
 import "./chunks/chunk.2GFK6XTO.js";
 export {
   accordion_default as SynAccordion,

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

@@ -1544,7 +1544,7 @@
     },
     {
       "name": "syn-range",
-      "description": "Ranges allow the user to select values within a given range using one or two thumbs.\n---\n\n\n### **Events:**\n - **syn-blur** - Emitted when the control loses focus.\n- **syn-change** - Emitted when an alteration to the control's value is committed by the user.\n- **syn-focus** - Emitted when the control gains focus.\n- **syn-input** - Emitted when the control receives input.\n- **syn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n- **syn-move** - Emitted when the user moves a thumb, either via touch or keyboard. Use `Event.preventDefault()` to prevent movement.\n\n### **Methods:**\n - **checkValidity()** - Checks for validity but does not show a validation message.\nReturns `true` when valid and `false` when invalid.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n\n### **Slots:**\n - **label** - The range's label. Alternatively, you can use the `label` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the range.\n- **suffix** - Used to append a presentational icon or similar element to the range.\n- **help-text** - Text that describes how to use the range. Alternatively, you can use the `help-text` attribute.\n- **ticks** - Used to display tick marks at specific intervals along the range.\n\n### **CSS Properties:**\n - **--thumb-size** - The size of a thumb. _(default: undefined)_\n- **--thumb-hit-area-size** - The clickable area around the thumb. Per default this is set to 140% of the thumb size. Must be a scale css value (defaults to 1.4). _(default: undefined)_\n- **--track-hit-area-size** - The clickable area around the track (top and left). _(default: undefined)_\n- **--track-color-active** - Color of the track representing the current value. _(default: undefined)_\n- **--track-color-inactive** - Color of the track that represents the remaining value. _(default: undefined)_\n- **--track-height** - The height of the track. _(default: undefined)_\n- **--track-active-offset** - The point of origin of the active track, starting at the left side of the range. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **input-wrapper** - The container that wraps the input track and ticks.\n- **track-wrapper** - The wrapper for the track.\n- **track** - The inactive track.\n- **active-track** - The active track.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.\n- **ticks** - The container that wraps the tick marks.\n- **thumb** - The thumb(s) that the user can drag to change the range.",
+      "description": "Ranges allow the user to select values within a given range using one or two thumbs.\n---\n\n\n### **Events:**\n - **syn-blur** - Emitted when the control loses focus.\n- **syn-change** - Emitted when an alteration to the control's value is committed by the user.\n- **syn-focus** - Emitted when the control gains focus.\n- **syn-input** - Emitted when the control receives input.\n- **syn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n- **syn-move** - Emitted when the user moves a thumb, either via touch or keyboard. Use `Event.preventDefault()` to prevent movement.\n\n### **Methods:**\n - **checkValidity()** - Checks for validity but does not show a validation message.\nReturns `true` when valid and `false` when invalid.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n\n### **Slots:**\n - **label** - The range's label. Alternatively, you can use the `label` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the range.\n- **suffix** - Used to append a presentational icon or similar element to the range.\n- **help-text** - Text that describes how to use the range. Alternatively, you can use the `help-text` attribute.\n- **ticks** - Used to display tick marks at specific intervals along the range.\n\n### **CSS Properties:**\n - **--thumb-size** - The size of a thumb. _(default: undefined)_\n- **--thumb-hit-area-size** - The clickable area around the thumb. Per default this is set to 140% of the thumb size. Must be a scale css value (defaults to 1.4). _(default: undefined)_\n- **--track-hit-area-size** - The clickable area around the track (top and left). _(default: undefined)_\n- **--track-color-active** - Color of the track representing the current value. _(default: undefined)_\n- **--track-color-inactive** - Color of the track that represents the remaining value. _(default: undefined)_\n- **--track-height** - The height of the track. _(default: undefined)_\n- **--track-active-offset** - The point of origin of the active track, starting at the left side of the range. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **input-wrapper** - The container that wraps the input track and ticks.\n- **track-wrapper** - The wrapper for the track.\n- **track** - The inactive track.\n- **active-track** - The active track.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.\n- **ticks** - The container that wraps the tick marks.\n- **thumb** - The thumb(s) that the user can drag to change the range.\n- **tooltip__base** - The base of the tooltip\n- **tooltip__arrow** - The arrow of the tooltip\n- **tooltip__popup** - The popup of the tooltip\n- **tooltip__body** - The body of the tooltip",
       "attributes": [
         {
           "name": "name",
@@ -1604,6 +1604,11 @@
           "description": "The current values of the input (in ascending order) as a string of space separated values",
           "values": []
         },
+        {
+          "name": "restrict-movement",
+          "description": "Set to true to restrict the movement of a thumb to its next and previous thumb.\nThis only affects multi range components",
+          "values": []
+        },
         {
           "name": "form",
           "description": "By default, form controls are associated with the nearest containing `<form>` element.\nThis attribute allows you to place the form control outside of a form\nand associate it with the form that has this `id`.\nThe form must be in the same document or shadow root for this to work.",

package/package.json

@@ -4,7 +4,7 @@
     "url": "https://www.sick.com"
   },
   "name": "@synergy-design-system/components",
-  "version": "2.16.0",
+  "version": "2.17.0",
   "description": "",
   "repository": {
     "type": "git",
@@ -98,8 +98,8 @@
     "user-agent-data-types": "^0.4.2",
     "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.16.0"
+    "@synergy-design-system/tokens": "2.17.0",
+    "@synergy-design-system/stylelint-config-syn": "0.1.0"
   },
   "release": {
     "branches": [
@@ -167,7 +167,7 @@
     "lit": "^3.2.1"
   },
   "peerDependencies": {
-    "@synergy-design-system/tokens": "^2.16.0"
+    "@synergy-design-system/tokens": "^2.17.0"
   },
   "scripts": {
     "build": "node scripts/build.js",