@synergy-design-system/components 2.26.4 → 2.27.0

package/dist/synergy.js

@@ -1,7 +1,7 @@
 import "./chunks/chunk.RSCUHBW3.js";
 import {
   validate_default
-} from "./chunks/chunk.OJPMMYND.js";
+} from "./chunks/chunk.3PZHDZ2L.js";
 import {
   getFormControls,
   serialize
@@ -9,214 +9,214 @@ import {
 import "./chunks/chunk.NKIYFJN2.js";
 import {
   textarea_default
-} from "./chunks/chunk.THLVXCPU.js";
+} from "./chunks/chunk.KU2XPWDV.js";
 import {
   tooltip_default
-} from "./chunks/chunk.MGMQ57P2.js";
-import "./chunks/chunk.XLEGLZBY.js";
-import "./chunks/chunk.LTGL6VBX.js";
+} from "./chunks/chunk.7OPPPAH2.js";
+import "./chunks/chunk.DY2YKXB3.js";
+import "./chunks/chunk.UUE6FBOO.js";
 import "./chunks/chunk.MVM3NN6Y.js";
 import {
   tab_panel_default
-} from "./chunks/chunk.WWLLYMEL.js";
+} from "./chunks/chunk.RBWQAOC3.js";
 import {
   tag_default
-} from "./chunks/chunk.OFSBC32B.js";
-import "./chunks/chunk.3ADVUIRT.js";
+} from "./chunks/chunk.2NPA7A6B.js";
+import "./chunks/chunk.5JO47JDX.js";
 import "./chunks/chunk.YBIBWRKC.js";
 import "./chunks/chunk.FQWBH6B3.js";
 import {
   tab_default
-} from "./chunks/chunk.JBR5AQ3T.js";
+} from "./chunks/chunk.UEDYC4UA.js";
 import {
   tab_group_default
-} from "./chunks/chunk.MPEZEHIM.js";
-import "./chunks/chunk.JE7Q3TBP.js";
+} from "./chunks/chunk.B252AAT7.js";
+import "./chunks/chunk.K3BQPSKE.js";
 import "./chunks/chunk.XOXVVU5C.js";
 import "./chunks/chunk.PKYC7QF3.js";
-import "./chunks/chunk.57YZ46NG.js";
+import "./chunks/chunk.3CXCFTDL.js";
 import "./chunks/chunk.XHWYGYMQ.js";
 import "./chunks/chunk.HVXG4JG6.js";
 import {
   spinner_default
-} from "./chunks/chunk.JRFZ6XIT.js";
+} from "./chunks/chunk.NBN2N4GY.js";
 import {
   switch_default
-} from "./chunks/chunk.HOQ7LFNM.js";
-import "./chunks/chunk.7NMLUN6N.js";
+} from "./chunks/chunk.3I5WIZIM.js";
+import "./chunks/chunk.WWIT4ORK.js";
 import "./chunks/chunk.W5JK7V7K.js";
 import "./chunks/chunk.4TB35TYG.js";
-import "./chunks/chunk.IPQZQBCI.js";
+import "./chunks/chunk.ES53TJF4.js";
 import "./chunks/chunk.ZW75HBAK.js";
 import "./chunks/chunk.43YNZAWL.js";
 import {
   select_default
-} from "./chunks/chunk.FRARSRVH.js";
+} from "./chunks/chunk.QRMRIFO7.js";
 import {
   side_nav_default
-} from "./chunks/chunk.MOKZUSVJ.js";
-import "./chunks/chunk.2YQFFD2B.js";
+} from "./chunks/chunk.C5MQ5DLJ.js";
+import "./chunks/chunk.KV3KOAKQ.js";
 import "./chunks/chunk.H3HTSQKK.js";
 import {
   range_tick_default
-} from "./chunks/chunk.CKZ6HDRD.js";
-import "./chunks/chunk.BQDRRVD7.js";
+} from "./chunks/chunk.VPQY46P2.js";
+import "./chunks/chunk.YLCM7CLU.js";
 import "./chunks/chunk.I6YARDHH.js";
-import "./chunks/chunk.KRQDZYGV.js";
+import "./chunks/chunk.HOINV6W7.js";
 import "./chunks/chunk.OI3HOOCT.js";
-import "./chunks/chunk.JSAIPQEG.js";
-import "./chunks/chunk.IKJQ3AB7.js";
+import "./chunks/chunk.BMW3PA33.js";
+import "./chunks/chunk.QUU6APUB.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.SKSGOPSL.js";
+} from "./chunks/chunk.W5AO66QU.js";
 import {
   radio_group_default
-} from "./chunks/chunk.KFBR5HQ5.js";
-import "./chunks/chunk.CA6SWMEE.js";
+} from "./chunks/chunk.IAPSVCYC.js";
+import "./chunks/chunk.SSRK4LEM.js";
 import "./chunks/chunk.32LFHSM5.js";
 import "./chunks/chunk.K62NPKGN.js";
 import {
   range_default
-} from "./chunks/chunk.PDXVI4FM.js";
-import "./chunks/chunk.EYOSCN5D.js";
-import "./chunks/chunk.PKNLMJOR.js";
+} from "./chunks/chunk.6TZNGEVH.js";
+import "./chunks/chunk.QVJWI43S.js";
+import "./chunks/chunk.RSPS5ZW3.js";
 import "./chunks/chunk.4X3HY2V5.js";
 import "./chunks/chunk.O644HRW3.js";
 import "./chunks/chunk.236RSW67.js";
-import "./chunks/chunk.VJ5G35TH.js";
+import "./chunks/chunk.UFNQFJO6.js";
 import {
   progress_ring_default
-} from "./chunks/chunk.TKBEO4SY.js";
+} from "./chunks/chunk.A6DCEGWQ.js";
 import {
   radio_default
-} from "./chunks/chunk.SMRHIZXV.js";
-import "./chunks/chunk.TR4EQSZC.js";
+} from "./chunks/chunk.HR4SQUUT.js";
+import "./chunks/chunk.NGXSR2YC.js";
 import "./chunks/chunk.UUB3PWNM.js";
 import "./chunks/chunk.EHSNF4SS.js";
-import "./chunks/chunk.6YQFJP6S.js";
+import "./chunks/chunk.7234FVMJ.js";
 import "./chunks/chunk.4BRJ5OJE.js";
 import {
   prio_nav_default
-} from "./chunks/chunk.J5HMOGXR.js";
+} from "./chunks/chunk.WCMZLYXZ.js";
 import {
   progress_bar_default
-} from "./chunks/chunk.FJLJNU5B.js";
-import "./chunks/chunk.K3UQQNEY.js";
+} from "./chunks/chunk.2G45M7Z3.js";
+import "./chunks/chunk.QVVGYAUL.js";
 import "./chunks/chunk.AMAK44YX.js";
 import "./chunks/chunk.QUM76UHV.js";
-import "./chunks/chunk.7IUJV6XG.js";
+import "./chunks/chunk.M4UWYE5A.js";
 import "./chunks/chunk.RMIDAEF5.js";
 import "./chunks/chunk.2V3HGTTL.js";
 import {
   option_default
-} from "./chunks/chunk.UBM32Q2Y.js";
+} from "./chunks/chunk.LRRVUY2D.js";
 import {
   popup_default
-} from "./chunks/chunk.DZJORJKS.js";
-import "./chunks/chunk.745RLSOU.js";
+} from "./chunks/chunk.QIYIWMGN.js";
+import "./chunks/chunk.CSDNV5TU.js";
 import "./chunks/chunk.OJ3N7TWP.js";
 import "./chunks/chunk.74N5WLM5.js";
 import {
   nav_item_default
-} from "./chunks/chunk.ZUYZCZTD.js";
-import "./chunks/chunk.XUPLOXUA.js";
+} from "./chunks/chunk.22PY3Y5F.js";
+import "./chunks/chunk.3TDQ3ECO.js";
 import "./chunks/chunk.SHCZO4KK.js";
 import {
   optgroup_default
-} from "./chunks/chunk.JC5B6AKN.js";
-import "./chunks/chunk.O6DQ6KY5.js";
+} from "./chunks/chunk.VJWTZ7QI.js";
+import "./chunks/chunk.SDY7BXBA.js";
 import "./chunks/chunk.MJ7R4QQT.js";
 import {
   menu_item_default
-} from "./chunks/chunk.XMVT3CLG.js";
+} from "./chunks/chunk.SI3XLIPP.js";
 import {
   menu_label_default
-} from "./chunks/chunk.P3F5THQB.js";
-import "./chunks/chunk.QDL4ODND.js";
+} from "./chunks/chunk.4H3VECPA.js";
+import "./chunks/chunk.6FSGLUWP.js";
 import "./chunks/chunk.X6GR6IA2.js";
 import "./chunks/chunk.RAOPZXJL.js";
 import {
   input_default
-} from "./chunks/chunk.JTHK7NAH.js";
+} from "./chunks/chunk.QBDGBRSF.js";
 import {
   menu_default
-} from "./chunks/chunk.JYNPIHGS.js";
-import "./chunks/chunk.4HFJ7M2Q.js";
+} from "./chunks/chunk.IRWS3A4O.js";
+import "./chunks/chunk.WCVTS3IL.js";
 import "./chunks/chunk.AVZITCPQ.js";
 import "./chunks/chunk.C2CWYCOU.js";
-import "./chunks/chunk.H7GKVO6D.js";
+import "./chunks/chunk.C3JM6YZX.js";
 import "./chunks/chunk.R24T7WQN.js";
 import "./chunks/chunk.FSWTBNSI.js";
 import "./chunks/chunk.V4HPWQE7.js";
 import {
   icon_button_default
-} from "./chunks/chunk.GOJ5OEZX.js";
-import "./chunks/chunk.7MMUTYBG.js";
+} from "./chunks/chunk.OLC6RBIT.js";
+import "./chunks/chunk.AMAYFSSR.js";
 import "./chunks/chunk.II2KA3OR.js";
 import "./chunks/chunk.XAQKFEHH.js";
 import {
   file_default
-} from "./chunks/chunk.ZTANOJ5X.js";
+} from "./chunks/chunk.HJMDFSJ7.js";
 import {
   header_default
-} from "./chunks/chunk.S7AT5EVY.js";
-import "./chunks/chunk.LXOM6FOQ.js";
+} from "./chunks/chunk.CE4JMONF.js";
+import "./chunks/chunk.BM4ITUYR.js";
 import "./chunks/chunk.5T3OGIGW.js";
 import {
   icon_default
-} from "./chunks/chunk.OMHDSXFC.js";
+} from "./chunks/chunk.RDRLDW3K.js";
 import {
   drawer_default
-} from "./chunks/chunk.2GWWW237.js";
+} from "./chunks/chunk.T6NUXQ2Q.js";
 import {
   dropdown_default
-} from "./chunks/chunk.VZ7TE76A.js";
-import "./chunks/chunk.DM6PINQG.js";
+} from "./chunks/chunk.IZF3A4QA.js";
+import "./chunks/chunk.HWB2GIDB.js";
 import "./chunks/chunk.2KYFCKCK.js";
 import "./chunks/chunk.D6IIQDWJ.js";
-import "./chunks/chunk.445OYAQ6.js";
+import "./chunks/chunk.G4VZKA5P.js";
 import "./chunks/chunk.IKZOQ7AE.js";
 import {
   dialog_default
-} from "./chunks/chunk.GBDIL362.js";
+} from "./chunks/chunk.SJ7YED6I.js";
 import {
   divider_default
-} from "./chunks/chunk.H4Z2VEOU.js";
-import "./chunks/chunk.YJ35XE2X.js";
+} from "./chunks/chunk.CU3PIRZO.js";
+import "./chunks/chunk.YGG5LSPJ.js";
 import "./chunks/chunk.FA6V2WD6.js";
 import "./chunks/chunk.FSZIE7IO.js";
-import "./chunks/chunk.BXUPRT7D.js";
+import "./chunks/chunk.PSYM7P7U.js";
 import "./chunks/chunk.N7QJ54ZM.js";
 import "./chunks/chunk.I4FIU7FA.js";
 import {
   details_default
-} from "./chunks/chunk.UMMCIY62.js";
-import "./chunks/chunk.3TWDJQEU.js";
+} from "./chunks/chunk.U3FH5HPU.js";
+import "./chunks/chunk.7FMXSF5M.js";
 import "./chunks/chunk.PU2BDR2W.js";
 import "./chunks/chunk.VA26EAEP.js";
-import "./chunks/chunk.QNBJVRRA.js";
+import "./chunks/chunk.HWYJ5MBN.js";
 import "./chunks/chunk.MU43DZ7W.js";
 import "./chunks/chunk.2LYOMDFO.js";
 import "./chunks/chunk.JCIM6NE3.js";
 import "./chunks/chunk.IU3SSJZE.js";
 import {
   checkbox_default
-} from "./chunks/chunk.73PVYHMP.js";
-import "./chunks/chunk.GSUI7Y3L.js";
+} from "./chunks/chunk.6XWVXKHM.js";
+import "./chunks/chunk.XYDQLDM7.js";
 import "./chunks/chunk.6IRAPT75.js";
 import "./chunks/chunk.6OX2AX3Z.js";
 import {
   combobox_default
-} from "./chunks/chunk.NKCJFN53.js";
-import "./chunks/chunk.4RCYTOT6.js";
-import "./chunks/chunk.ZXADGL24.js";
+} from "./chunks/chunk.VMZKAT3F.js";
+import "./chunks/chunk.4NC3QBVU.js";
+import "./chunks/chunk.RYCMUKXJ.js";
 import "./chunks/chunk.IJQ7XW3N.js";
 import "./chunks/chunk.IVM3BGRH.js";
-import "./chunks/chunk.GLAGPXN5.js";
+import "./chunks/chunk.YRXHBOVG.js";
 import "./chunks/chunk.AZ3N5IOO.js";
 import {
   defaultOptionRenderer,
@@ -231,61 +231,53 @@ import "./chunks/chunk.QC7X32ZP.js";
 import "./chunks/chunk.V4SIKF4X.js";
 import {
   button_default
-} from "./chunks/chunk.VX3AYRAW.js";
+} from "./chunks/chunk.L5TA7ISH.js";
 import {
   button_group_default
-} from "./chunks/chunk.PMNDH3RM.js";
-import "./chunks/chunk.77YDFOLH.js";
+} from "./chunks/chunk.UVE5BE4F.js";
+import "./chunks/chunk.63QVBPPN.js";
 import "./chunks/chunk.GRVNUIP2.js";
 import {
   card_default
-} from "./chunks/chunk.P6QAFY7W.js";
-import "./chunks/chunk.RFBDTHKC.js";
+} from "./chunks/chunk.6MQBQWPA.js";
+import "./chunks/chunk.YXNMN5HE.js";
 import "./chunks/chunk.QMLSKYXR.js";
 import "./chunks/chunk.C4JTZKPZ.js";
 import {
   breadcrumb_default
-} from "./chunks/chunk.3SVVXT53.js";
+} from "./chunks/chunk.BFYPNKKN.js";
 import {
   breadcrumb_item_default
-} from "./chunks/chunk.RTRASWYE.js";
-import "./chunks/chunk.EINKWP52.js";
+} from "./chunks/chunk.SUOREC3X.js";
+import "./chunks/chunk.2SICSVPD.js";
 import "./chunks/chunk.NGIGPLN2.js";
 import "./chunks/chunk.O6ZH6AOI.js";
-import "./chunks/chunk.QONXZ6UU.js";
-import "./chunks/chunk.WCZOVUGD.js";
+import "./chunks/chunk.YJBVKSL5.js";
+import "./chunks/chunk.2JZIFJGX.js";
 import "./chunks/chunk.AWJ376R6.js";
 import "./chunks/chunk.JLXCLATV.js";
 import "./chunks/chunk.AMIQC3O7.js";
 import "./chunks/chunk.UBS3CSG4.js";
 import "./chunks/chunk.5SQ7NVBX.js";
-import {
-  alert_default
-} from "./chunks/chunk.6VTAFIZH.js";
 import {
   badge_default
-} from "./chunks/chunk.DYR2W7MA.js";
-import "./chunks/chunk.6EXNMTQE.js";
-import "./chunks/chunk.J6CGTLVH.js";
-import "./chunks/chunk.Y5TMYX2L.js";
-import "./chunks/chunk.FNL6TLKF.js";
-import "./chunks/chunk.32CYREEV.js";
-import "./chunks/chunk.S22BO5SF.js";
+} from "./chunks/chunk.NDHTP2UU.js";
 import {
-  accordion_default
-} from "./chunks/chunk.AWXTV7SR.js";
-import "./chunks/chunk.UCXNPHA2.js";
-import "./chunks/chunk.WNUZ6LH4.js";
-import "./chunks/chunk.I6LSGLUR.js";
+  alert_default
+} from "./chunks/chunk.DI7SKZQ4.js";
+import "./chunks/chunk.XJVH7RVR.js";
 import "./chunks/chunk.WXVOTRW5.js";
-import "./chunks/chunk.BN3KVAAB.js";
+import "./chunks/chunk.3JEIQX52.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.URV3CTPJ.js";
+import "./chunks/chunk.QBHZAR4C.js";
+import "./chunks/chunk.BXY667C7.js";
+import "./chunks/chunk.PVY3RCTP.js";
+import "./chunks/chunk.6VSZKC4F.js";
 import {
   registerIconLibrary,
   unregisterIconLibrary
@@ -294,12 +286,21 @@ import "./chunks/chunk.YTEJW7IF.js";
 import "./chunks/chunk.LUXDS4EY.js";
 import "./chunks/chunk.PJO6TM3T.js";
 import "./chunks/chunk.ZBW4ZSZ7.js";
-import "./chunks/chunk.GIU3H3J3.js";
-import "./chunks/chunk.S5N2TE2L.js";
+import "./chunks/chunk.32CYREEV.js";
+import "./chunks/chunk.S22BO5SF.js";
 import {
   getBasePath,
   setBasePath
 } from "./chunks/chunk.234ERFCE.js";
+import {
+  accordion_default
+} from "./chunks/chunk.3M4PU5I7.js";
+import "./chunks/chunk.EZ4X6EH3.js";
+import "./chunks/chunk.74IOULXM.js";
+import "./chunks/chunk.WNUZ6LH4.js";
+import "./chunks/chunk.RYL2SRHE.js";
+import "./chunks/chunk.GIU3H3J3.js";
+import "./chunks/chunk.S5N2TE2L.js";
 import {
   enableDefaultSettings
 } from "./chunks/chunk.H5F2FP4S.js";
@@ -310,11 +311,10 @@ import {
   setGlobalDefaultSettings
 } from "./chunks/chunk.JSEL4YPW.js";
 import "./chunks/chunk.UPDPVGHT.js";
-import "./chunks/chunk.74IOULXM.js";
 import "./chunks/chunk.NLYVOJGK.js";
-import "./chunks/chunk.EGMRXFEI.js";
-import "./chunks/chunk.QBHZAR4C.js";
-import "./chunks/chunk.BXY667C7.js";
+import "./chunks/chunk.ANUZXLDU.js";
+import "./chunks/chunk.J6CGTLVH.js";
+import "./chunks/chunk.Y5TMYX2L.js";
 import "./chunks/chunk.2GFK6XTO.js";
 export {
   accordion_default as SynAccordion,

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

@@ -29,29 +29,6 @@
         }
       ]
     },
-    {
-      "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": "variant",
-          "description": "The badge's theme variant.",
-          "values": [
-            { "name": "primary" },
-            { "name": "success" },
-            { "name": "neutral" },
-            { "name": "warning" },
-            { "name": "danger" }
-          ]
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://synergy.style/components/badge"
-        }
-      ]
-    },
     {
       "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.",
@@ -90,6 +67,29 @@
         }
       ]
     },
+    {
+      "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": "variant",
+          "description": "The badge's theme variant.",
+          "values": [
+            { "name": "primary" },
+            { "name": "success" },
+            { "name": "neutral" },
+            { "name": "warning" },
+            { "name": "danger" }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://synergy.style/components/badge"
+        }
+      ]
+    },
     {
       "name": "syn-breadcrumb",
       "description": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.\n---\n\n\n### **Slots:**\n - _default_ - One or more breadcrumb items to display.\n- **separator** - The separator to use between breadcrumb items. Works best with `<syn-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",

package/package.json

@@ -4,7 +4,7 @@
     "url": "https://www.sick.com"
   },
   "name": "@synergy-design-system/components",
-  "version": "2.26.4",
+  "version": "2.27.0",
   "description": "",
   "repository": {
     "type": "git",
@@ -100,9 +100,9 @@
     "unist-util-visit": "^5.0.0",
     "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.18.1",
-    "@synergy-design-system/eslint-config-syn": "0.1.0"
+    "@synergy-design-system/tokens": "2.18.1"
   },
   "release": {
     "branches": [

package/dist/chunks/chunk.VJ5G35TH.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  /* 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    touch-action: none; /* Prevent misbehaviour 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    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(--full-thumb-size) / 2 * -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) 0;\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    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    cursor: grab;\n  }\n\n  .thumb.grabbed {\n    background: var(--syn-color-primary-950);\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;",
-  "names": []
-}