@synergy-design-system/components 2.40.1 → 2.41.0

package/dist/chunks/{chunk.IPUTRTZB.js → chunk.DK6CCDDS.js}

@@ -1,6 +1,6 @@
 import {
   SynHeader
-} from "./chunk.YPSNAYJN.js";
+} from "./chunk.CV26ERJX.js";
 
 // src/components/header/header.ts
 var header_default = SynHeader;
@@ -9,4 +9,4 @@ SynHeader.define("syn-header");
 export {
   header_default
 };
-//# sourceMappingURL=chunk.IPUTRTZB.js.map
+//# sourceMappingURL=chunk.DK6CCDDS.js.map

package/dist/chunks/{chunk.QO2QG7IJ.js → chunk.DNCMD7TK.js}

@@ -1,6 +1,6 @@
 import {
   SynIcon
-} from "./chunk.2XG4KPH5.js";
+} from "./chunk.ANTV6GHN.js";
 
 // src/components/icon/icon.ts
 var icon_default = SynIcon;
@@ -9,4 +9,4 @@ SynIcon.define("syn-icon");
 export {
   icon_default
 };
-//# sourceMappingURL=chunk.QO2QG7IJ.js.map
+//# sourceMappingURL=chunk.DNCMD7TK.js.map

package/dist/chunks/{chunk.2WXD4VUE.js → chunk.DRSMY244.js}

@@ -3,25 +3,25 @@ import {
   isBlurEvent,
   isInvalidEvent,
   normalizeEventAttribute
-} from "./chunk.AA6DKLWU.js";
+} from "./chunk.GC5EJY5N.js";
 import {
   validate_styles_default
 } from "./chunk.MVM3NN6Y.js";
 import {
   SynAlert
-} from "./chunk.DXG6TLJT.js";
-import {
-  watch
-} from "./chunk.BVZQ6QSY.js";
+} from "./chunk.G2QUOR3C.js";
 import {
   enableDefaultSettings
 } from "./chunk.E5UUNP6E.js";
+import {
+  watch
+} from "./chunk.BVZQ6QSY.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.F54ODM5Z.js";
+} from "./chunk.O26BA6SP.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -333,4 +333,4 @@ SynValidate = __decorateClass([
 export {
   SynValidate
 };
-//# sourceMappingURL=chunk.2WXD4VUE.js.map
+//# sourceMappingURL=chunk.DRSMY244.js.map

package/dist/chunks/{chunk.LYI4H3ZC.js → chunk.DYZB3YXJ.js}

@@ -1,6 +1,6 @@
 import {
   SynDivider
-} from "./chunk.XL6JK6XI.js";
+} from "./chunk.WWTMT7MH.js";
 
 // src/components/divider/divider.ts
 var divider_default = SynDivider;
@@ -9,4 +9,4 @@ SynDivider.define("syn-divider");
 export {
   divider_default
 };
-//# sourceMappingURL=chunk.LYI4H3ZC.js.map
+//# sourceMappingURL=chunk.DYZB3YXJ.js.map

package/dist/chunks/{chunk.I77D2ORF.js → chunk.EHKC25S6.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.DZ7YIR5N.js";
 import {
   SynIcon
-} from "./chunk.2XG4KPH5.js";
+} from "./chunk.ANTV6GHN.js";
 import {
   enableDefaultSettings
 } from "./chunk.E5UUNP6E.js";
@@ -15,7 +15,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.F54ODM5Z.js";
+} from "./chunk.O26BA6SP.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -144,4 +144,4 @@ SynIconButton = __decorateClass([
 export {
   SynIconButton
 };
-//# sourceMappingURL=chunk.I77D2ORF.js.map
+//# sourceMappingURL=chunk.EHKC25S6.js.map

package/dist/chunks/{chunk.ZOA5KDCL.js → chunk.EMWIWC4T.js}

@@ -17,18 +17,18 @@ import {
 import {
   HasSlotController
 } from "./chunk.WVVQK5TE.js";
-import {
-  watch
-} from "./chunk.BVZQ6QSY.js";
 import {
   enableDefaultSettings
 } from "./chunk.E5UUNP6E.js";
+import {
+  watch
+} from "./chunk.BVZQ6QSY.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.F54ODM5Z.js";
+} from "./chunk.O26BA6SP.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -255,4 +255,4 @@ SynSwitch = __decorateClass([
 export {
   SynSwitch
 };
-//# sourceMappingURL=chunk.ZOA5KDCL.js.map
+//# sourceMappingURL=chunk.EMWIWC4T.js.map

package/dist/chunks/{chunk.SSKPVU2O.js → chunk.EUBPO72E.js}

@@ -1,6 +1,6 @@
 import {
   SynProgressRing
-} from "./chunk.KWGOX2WS.js";
+} from "./chunk.7SM76XN3.js";
 
 // src/components/progress-ring/progress-ring.ts
 var progress_ring_default = SynProgressRing;
@@ -9,4 +9,4 @@ SynProgressRing.define("syn-progress-ring");
 export {
   progress_ring_default
 };
-//# sourceMappingURL=chunk.SSKPVU2O.js.map
+//# sourceMappingURL=chunk.EUBPO72E.js.map

package/dist/chunks/{chunk.RYANMKQO.js → chunk.F2BVDCBM.js}

@@ -1,9 +1,9 @@
 import {
   SynOption
-} from "./chunk.R467YNG5.js";
+} from "./chunk.5MLUG7BJ.js";
 import {
   SynPopup
-} from "./chunk.KZA6DSRS.js";
+} from "./chunk.O6ZIVKB2.js";
 import {
   defaultOptionRenderer
 } from "./chunk.HVVPX2VA.js";
@@ -51,22 +51,22 @@ import {
 } from "./chunk.WVVQK5TE.js";
 import {
   SynIcon
-} from "./chunk.2XG4KPH5.js";
-import {
-  watch
-} from "./chunk.BVZQ6QSY.js";
+} from "./chunk.ANTV6GHN.js";
 import {
   LocalizeController
 } from "./chunk.OAQRCZOO.js";
 import {
   enableDefaultSettings
 } from "./chunk.E5UUNP6E.js";
+import {
+  watch
+} from "./chunk.BVZQ6QSY.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.F54ODM5Z.js";
+} from "./chunk.O26BA6SP.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -935,4 +935,4 @@ setDefaultAnimation("combobox.hide", {
 export {
   SynCombobox
 };
-//# sourceMappingURL=chunk.RYANMKQO.js.map
+//# sourceMappingURL=chunk.F2BVDCBM.js.map

package/dist/chunks/{chunk.D2W5VAE6.js → chunk.F6HVXULL.js}

@@ -1,6 +1,6 @@
 import {
   SynRange
-} from "./chunk.ZAK6JLAP.js";
+} from "./chunk.KSRG4GV2.js";
 
 // src/components/range/range.ts
 var range_default = SynRange;
@@ -9,4 +9,4 @@ SynRange.define("syn-range");
 export {
   range_default
 };
-//# sourceMappingURL=chunk.D2W5VAE6.js.map
+//# sourceMappingURL=chunk.F6HVXULL.js.map

package/dist/chunks/{chunk.DXG6TLJT.js → chunk.G2QUOR3C.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.WXVOTRW5.js";
 import {
   SynIconButton
-} from "./chunk.I77D2ORF.js";
+} from "./chunk.EHKC25S6.js";
 import {
   waitForEvent
 } from "./chunk.C2ENQBPM.js";
@@ -18,27 +18,27 @@ import {
 import {
   HasSlotController
 } from "./chunk.WVVQK5TE.js";
-import {
-  alert_custom_styles_default
-} from "./chunk.QBHZAR4C.js";
-import {
-  alert_styles_default
-} from "./chunk.BXY667C7.js";
-import {
-  watch
-} from "./chunk.BVZQ6QSY.js";
 import {
   LocalizeController
 } from "./chunk.OAQRCZOO.js";
 import {
   enableDefaultSettings
 } from "./chunk.E5UUNP6E.js";
+import {
+  watch
+} from "./chunk.BVZQ6QSY.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.F54ODM5Z.js";
+} from "./chunk.O26BA6SP.js";
+import {
+  alert_custom_styles_default
+} from "./chunk.QBHZAR4C.js";
+import {
+  alert_styles_default
+} from "./chunk.BXY667C7.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -288,4 +288,4 @@ setDefaultAnimation("alert.hide", {
 export {
   SynAlert
 };
-//# sourceMappingURL=chunk.DXG6TLJT.js.map
+//# sourceMappingURL=chunk.G2QUOR3C.js.map

package/dist/chunks/{chunk.AA6DKLWU.js → chunk.GC5EJY5N.js}

@@ -1,6 +1,6 @@
 import {
   SynergyElement
-} from "./chunk.F54ODM5Z.js";
+} from "./chunk.O26BA6SP.js";
 
 // src/components/validate/utility.ts
 var WhitelistedSynergyFormEventNames = [
@@ -33,4 +33,4 @@ export {
   normalizeEventAttribute,
   getEventNameForElement
 };
-//# sourceMappingURL=chunk.AA6DKLWU.js.map
+//# sourceMappingURL=chunk.GC5EJY5N.js.map

package/dist/chunks/{chunk.5WSEP6GG.js → chunk.GCLPRSGD.js}

@@ -16,7 +16,7 @@ import {
 } from "./chunk.WXVOTRW5.js";
 import {
   SynIconButton
-} from "./chunk.I77D2ORF.js";
+} from "./chunk.EHKC25S6.js";
 import {
   waitForEvent
 } from "./chunk.C2ENQBPM.js";
@@ -31,18 +31,18 @@ import {
 import {
   HasSlotController
 } from "./chunk.WVVQK5TE.js";
-import {
-  watch
-} from "./chunk.BVZQ6QSY.js";
 import {
   LocalizeController
 } from "./chunk.OAQRCZOO.js";
+import {
+  watch
+} from "./chunk.BVZQ6QSY.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.F54ODM5Z.js";
+} from "./chunk.O26BA6SP.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -407,4 +407,4 @@ setDefaultAnimation("drawer.overlay.hide", {
 export {
   SynDrawer
 };
-//# sourceMappingURL=chunk.5WSEP6GG.js.map
+//# sourceMappingURL=chunk.GCLPRSGD.js.map

package/dist/chunks/{chunk.ZTUVBMBQ.js → chunk.GGIPFQ7C.js}

@@ -3,13 +3,13 @@ import {
 } from "./chunk.NFXT5LNY.js";
 import {
   input_custom_styles_default
-} from "./chunk.M6PF4GYJ.js";
+} from "./chunk.KEKVEOAM.js";
 import {
   input_styles_default
 } from "./chunk.XAQKFEHH.js";
 import {
   SynDivider
-} from "./chunk.XL6JK6XI.js";
+} from "./chunk.WWTMT7MH.js";
 import {
   defaultValue
 } from "./chunk.3NXKLKWH.js";
@@ -25,10 +25,7 @@ import {
 } from "./chunk.WVVQK5TE.js";
 import {
   SynIcon
-} from "./chunk.2XG4KPH5.js";
-import {
-  watch
-} from "./chunk.BVZQ6QSY.js";
+} from "./chunk.ANTV6GHN.js";
 import {
   LocalizeController
 } from "./chunk.OAQRCZOO.js";
@@ -40,12 +37,15 @@ import {
   modernNumericStrategy,
   nativeNumericStrategy
 } from "./chunk.RB2JR2ND.js";
+import {
+  watch
+} from "./chunk.BVZQ6QSY.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.F54ODM5Z.js";
+} from "./chunk.O26BA6SP.js";
 import {
   __decorateClass,
   __privateAdd,
@@ -859,4 +859,4 @@ SynInput = __decorateClass([
 export {
   SynInput
 };
-//# sourceMappingURL=chunk.ZTUVBMBQ.js.map
+//# sourceMappingURL=chunk.GGIPFQ7C.js.map

package/dist/chunks/{chunk.4ISA763I.js → chunk.GHBAAK5L.js}

@@ -1,6 +1,6 @@
 import {
   SynCard
-} from "./chunk.BHLPIBJ4.js";
+} from "./chunk.H6IS7W22.js";
 
 // src/components/card/card.ts
 var card_default = SynCard;
@@ -9,4 +9,4 @@ SynCard.define("syn-card");
 export {
   card_default
 };
-//# sourceMappingURL=chunk.4ISA763I.js.map
+//# sourceMappingURL=chunk.GHBAAK5L.js.map

package/dist/chunks/{chunk.2SDC5GWD.js → chunk.GHX2ERYE.js}

@@ -1,6 +1,6 @@
 import {
   SynButtonGroup
-} from "./chunk.4FU25Z5S.js";
+} from "./chunk.SYOWTC5H.js";
 
 // src/components/button-group/button-group.ts
 var button_group_default = SynButtonGroup;
@@ -9,4 +9,4 @@ SynButtonGroup.define("syn-button-group");
 export {
   button_group_default
 };
-//# sourceMappingURL=chunk.2SDC5GWD.js.map
+//# sourceMappingURL=chunk.GHX2ERYE.js.map

package/dist/chunks/{chunk.J3ZZSOFW.js → chunk.GWDX2TDQ.js}

@@ -1,6 +1,6 @@
 import {
   SynRadioButton
-} from "./chunk.MNKSFYBX.js";
+} from "./chunk.4BXBM2TB.js";
 
 // src/components/radio-button/radio-button.ts
 var radio_button_default = SynRadioButton;
@@ -9,4 +9,4 @@ SynRadioButton.define("syn-radio-button");
 export {
   radio_button_default
 };
-//# sourceMappingURL=chunk.J3ZZSOFW.js.map
+//# sourceMappingURL=chunk.GWDX2TDQ.js.map

package/dist/chunks/{chunk.BHLPIBJ4.js → chunk.H6IS7W22.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.F54ODM5Z.js";
+} from "./chunk.O26BA6SP.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -55,4 +55,4 @@ __decorateClass([
 export {
   SynCard
 };
-//# sourceMappingURL=chunk.BHLPIBJ4.js.map
+//# sourceMappingURL=chunk.H6IS7W22.js.map

package/dist/chunks/{chunk.DPKFHLEJ.js → chunk.HDVFGAQ4.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.F54ODM5Z.js";
+} from "./chunk.O26BA6SP.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -64,4 +64,4 @@ __decorateClass([
 export {
   SynTabPanel
 };
-//# sourceMappingURL=chunk.DPKFHLEJ.js.map
+//# sourceMappingURL=chunk.HDVFGAQ4.js.map

package/dist/chunks/{chunk.DI7MARZL.js → chunk.I5FFQGAJ.js}

@@ -16,7 +16,7 @@ import {
 } from "./chunk.WXVOTRW5.js";
 import {
   SynIconButton
-} from "./chunk.I77D2ORF.js";
+} from "./chunk.EHKC25S6.js";
 import {
   waitForEvent
 } from "./chunk.C2ENQBPM.js";
@@ -31,18 +31,18 @@ import {
 import {
   HasSlotController
 } from "./chunk.WVVQK5TE.js";
-import {
-  watch
-} from "./chunk.BVZQ6QSY.js";
 import {
   LocalizeController
 } from "./chunk.OAQRCZOO.js";
+import {
+  watch
+} from "./chunk.BVZQ6QSY.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.F54ODM5Z.js";
+} from "./chunk.O26BA6SP.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -292,4 +292,4 @@ setDefaultAnimation("dialog.overlay.hide", {
 export {
   SynDialog
 };
-//# sourceMappingURL=chunk.DI7MARZL.js.map
+//# sourceMappingURL=chunk.I5FFQGAJ.js.map

package/dist/chunks/{chunk.5QCLYHN7.js → chunk.IXVHLUVG.js}

@@ -1,6 +1,6 @@
 import {
   SynSpinner
-} from "./chunk.C6HSIJI5.js";
+} from "./chunk.U2PKBJUV.js";
 import {
   FormControlController,
   validValidityState
@@ -17,22 +17,22 @@ import {
 } from "./chunk.WVVQK5TE.js";
 import {
   SynIcon
-} from "./chunk.2XG4KPH5.js";
-import {
-  watch
-} from "./chunk.BVZQ6QSY.js";
+} from "./chunk.ANTV6GHN.js";
 import {
   LocalizeController
 } from "./chunk.OAQRCZOO.js";
 import {
   enableDefaultSettings
 } from "./chunk.E5UUNP6E.js";
+import {
+  watch
+} from "./chunk.BVZQ6QSY.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.F54ODM5Z.js";
+} from "./chunk.O26BA6SP.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -295,4 +295,4 @@ SynButton = __decorateClass([
 export {
   SynButton
 };
-//# sourceMappingURL=chunk.5QCLYHN7.js.map
+//# sourceMappingURL=chunk.IXVHLUVG.js.map

package/dist/chunks/{chunk.K544FE2V.js → chunk.J36J66QT.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.O644HRW3.js";
 import {
   SynPopup
-} from "./chunk.KZA6DSRS.js";
+} from "./chunk.O6ZIVKB2.js";
 import {
   waitForEvent
 } from "./chunk.C2ENQBPM.js";
@@ -19,18 +19,18 @@ import {
   getAnimation,
   setDefaultAnimation
 } from "./chunk.7JGKUB4A.js";
-import {
-  watch
-} from "./chunk.BVZQ6QSY.js";
 import {
   LocalizeController
 } from "./chunk.OAQRCZOO.js";
+import {
+  watch
+} from "./chunk.BVZQ6QSY.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.F54ODM5Z.js";
+} from "./chunk.O26BA6SP.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -275,4 +275,4 @@ setDefaultAnimation("tooltip.hide", {
 export {
   SynTooltip
 };
-//# sourceMappingURL=chunk.K544FE2V.js.map
+//# sourceMappingURL=chunk.J36J66QT.js.map

package/dist/chunks/{chunk.S4F4ABM7.js → chunk.JV2XHD5E.js}

@@ -1,6 +1,6 @@
 import {
   SynSwitch
-} from "./chunk.ZOA5KDCL.js";
+} from "./chunk.EMWIWC4T.js";
 
 // src/components/switch/switch.ts
 var switch_default = SynSwitch;
@@ -9,4 +9,4 @@ SynSwitch.define("syn-switch");
 export {
   switch_default
 };
-//# sourceMappingURL=chunk.S4F4ABM7.js.map
+//# sourceMappingURL=chunk.JV2XHD5E.js.map

package/dist/chunks/{chunk.M6PF4GYJ.js → chunk.KEKVEOAM.js}

@@ -225,7 +225,7 @@ var input_custom_styles_default = css`
     align-items: center;
     background: none;
     border: none;
-    color: var(--syn-color-primary-600);
+    color: var(--syn-interactive-primary-color);
     cursor: pointer;
     display: flex;
     padding: var(--syn-spacing-x-small);
@@ -245,11 +245,11 @@ var input_custom_styles_default = css`
   }
 
   .input__number-stepper-button:hover:not([disabled]) {
-    color: var(--syn-color-primary-900)
+    color: var(--syn-interactive-primary-color-hover)
   }
 
   .input__number-stepper-button:active:not([disabled]) {
-    color: var(--syn-color-primary-950)
+    color: var(--syn-interactive-primary-color-active)
   }
 
   .input__number-stepper-button[disabled] {
@@ -280,4 +280,4 @@ var input_custom_styles_default = css`
 export {
   input_custom_styles_default
 };
-//# sourceMappingURL=chunk.M6PF4GYJ.js.map
+//# sourceMappingURL=chunk.KEKVEOAM.js.map

package/dist/chunks/{chunk.M6PF4GYJ.js.map → chunk.KEKVEOAM.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/input/input.custom.styles.ts"],
-  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  /**\n  * Fixes overflowing of the syn-input in flex and grid containers with fix width (https://github.com/synergy-design-system/synergy-design-system/issues/761)\n  */\n  .input__control {\n    width: 100%;\n  }\n\n  /** #429: Use token for opacity */\n  .input--standard.input--disabled,\n  .input--readonly.input--disabled {\n    opacity: var(--syn-input-disabled-opacity);\n  }\n\n  /**\n  * Min-width size adjusted for each size so 2 full digits are shown for type number\n  */ \n \n  :host([size=\"small\"][type=\"number\"]:not([no-spin-buttons])) {\n    min-width: calc(var(--syn-input-font-size-small)*8.3);\n  }\n\n  :host([size=\"medium\"][type=\"number\"]:not([no-spin-buttons])) {\n    min-width: calc(var(--syn-input-font-size-medium)*9.4);\n  }\n\n  :host([size=\"large\"][type=\"number\"]:not([no-spin-buttons])) {\n    min-width: calc(var(--syn-input-font-size-large)*10);\n  }\n\n   /**\n   * Clearable + Password Toggle\n   */\n   .input__clear {\n    color: var(--syn-input-icon-icon-clearable-color);\n  }\n\n  .input--small .input__clear,\n  .input--small .input__password-toggle {\n    font-size: var(--syn-font-size-medium);\n    padding-left: var(--syn-spacing-x-small);\n    padding-right: var(--syn-spacing-small);\n    width: auto;\n  }\n\n  .input--medium .input__clear,\n  .input--medium .input__password-toggle {\n    font-size: var(--syn-font-size-x-large);\n    padding-left: var(--syn-spacing-small);\n    padding-right: var(--syn-spacing-medium);\n    width: auto;\n  }\n\n  .input--large .input__clear,\n  .input--large .input__password-toggle {\n    font-size: var(--syn-font-size-2x-large);\n    padding-left: var(--syn-spacing-medium);\n    padding-right: var(--syn-spacing-large);\n    width: auto;\n  }\n\n  /* Prefix / Suffix color */\n  .input__prefix ::slotted(*),\n  .input__suffix ::slotted(*) {\n    color: var(--syn-input-icon-color);\n  }\n\n\n  /* PADDINGS */\n  .input--small .input__control {\n    padding: var(--syn-spacing-3x-small) var(--syn-input-spacing-small);\n  }\n\n  .input--medium .input__control {\n    padding: var(--syn-spacing-x-small) var(--syn-input-spacing-medium);\n  }\n\n  .input--large .input__control {\n    padding: var(--syn-input-spacing-small) var(--syn-input-spacing-large);\n  }\n\n  .input--small .input__prefix ::slotted(*) {\n    margin-inline: var(--syn-input-spacing-small) var(--syn-spacing-x-small);\n  }\n\n  .input--medium .input__prefix ::slotted(*) {\n    margin-inline: var(--syn-input-spacing-medium) var(--syn-input-spacing-small);\n  }\n\n  .input--large .input__prefix ::slotted(*) {\n    margin-inline: var(--syn-input-spacing-large) var(--syn-input-spacing-medium);\n  }\n\n  .input--small .input__suffix ::slotted(*) {\n    margin-inline: var(--syn-spacing-x-small) var(--syn-input-spacing-small);\n  }\n\n  .input--medium .input__suffix ::slotted(*) {\n    margin-inline: var(--syn-input-spacing-small) var(--syn-input-spacing-medium);\n  }\n\n  .input--large .input__suffix ::slotted(*) {\n    margin-inline: var(--syn-input-spacing-medium) var(--syn-input-spacing-large);\n  }\n\n  .input__clear + .input__suffix ::slotted(*),\n  .input__password-toggle + .input__suffix ::slotted(*) {\n    margin-inline-start: 0;  \n  }\n\n  .input--small .input__clear + .input__password-toggle {\n    padding-left: var(--syn-spacing-2x-small);\n  }\n\n  .input--medium .input__clear + .input__password-toggle {\n    padding-left: calc(var(--syn-spacing-2x-small) + var(--syn-spacing-3x-small));\n  }\n\n  .input--large .input__clear + .input__password-toggle {\n    padding-left: var(--syn-spacing-x-small);\n  }\n\n  .input--small .input__clear:has(+ .input__password-toggle) {\n    padding-right: var(--syn-spacing-2x-small);\n  }\n\n  .input--medium .input__clear:has(+ .input__password-toggle) {\n    padding-right: calc(var(--syn-spacing-2x-small) + var(--syn-spacing-3x-small));\n  }\n\n  .input--large .input__clear:has(+ .input__password-toggle) {\n    padding-right: var(--syn-spacing-x-small);\n  }\n\n  .form-control--has-suffix .input--large .input__clear:has(+ .input__suffix),\n  .form-control--has-suffix .input--large .input__password-toggle:has(+ .input__suffix) {\n    padding-right: var(--syn-spacing-medium);\n  }\n\n  .form-control--has-suffix .input--small .input__clear:has(+ .input__suffix),\n  .form-control--has-suffix .input--small .input__password-toggle:has(+ .input__suffix) {\n    padding-right: var(--syn-spacing-x-small);\n  }\n\n  .form-control--has-suffix .input--medium .input__clear:has(+ .input__suffix),\n  .form-control--has-suffix .input--medium .input__password-toggle:has(+ .input__suffix) {\n    padding-right: var(--syn-spacing-small);\n  }\n\n  /* Fixes wrong paddings on some suffix special cases: https://github.com/synergy-design-system/synergy-design-system/issues/817  */\n  .form-control--has-prefix .input__control {\n    padding-left: 0;\n  }\n\n  /* Fixes wrong paddings on some suffix special cases: https://github.com/synergy-design-system/synergy-design-system/issues/817  */\n  .form-control--has-suffix .input__control,\n  .input:has(.input__clear) .input__control,\n  .input:has(.input__password-toggle) .input__control {\n    padding-right: 0;\n  }\n\n  :host([type='number']) .input--large:not(.input--no-spin-buttons) .input__clear,\n  :host([type='number']) .input--large:not(.input--no-spin-buttons) .input__password-toggle {\n    padding-right: var(--syn-spacing-medium);\n  }\n\n  /* ICONS SIZE */\n   .input--small .input__prefix ::slotted(syn-icon),\n   .input--small .input__suffix ::slotted(syn-icon) {\n    font-size: var(--syn-font-size-medium);\n   }\n\n  .input--medium .input__prefix ::slotted(syn-icon),\n  .input--medium .input__suffix ::slotted(syn-icon) {\n    font-size: var(--syn-font-size-x-large);\n   }\n\n  .input--large .input__prefix ::slotted(syn-icon),\n  .input--large .input__suffix ::slotted(syn-icon) {\n    font-size: var(--syn-font-size-2x-large);\n   }\n\n  :host([data-user-invalid]) .input--standard {\n    border-color: var(--syn-input-border-color-focus-error);\n  }\n\n  :host([data-user-invalid]) .input--standard.input--focused:not(.input--disabled) {\n    border-color: var(--syn-input-border-color-focus-error);\n    box-shadow: 0 0 0 var(--syn-focus-ring-width) var(--syn-input-focus-ring-error);\n  }\n\n  .input--standard.input--disabled .input__suffix, \n  .input--standard.input--disabled .input__prefix {\n    cursor: not-allowed;\n  } \n\n\n  /**\n  * Number stepper\n  */\n  .input__number-stepper {\n    align-items: center;\n    display: flex;\n  }\n\n  .input--small .input__number-stepper {\n    margin-left: var(--syn-spacing-2x-small);\n  }\n\n  .input--medium .input__number-stepper {\n    margin-right: var(--syn-spacing-2x-small);\n  }\n\n  .input--large .input__number-stepper {\n    margin-right: var(--syn-spacing-x-small);\n  }\n\n\n  /**\n  * Number stepper buttons\n  */\n  .input__number-stepper-button {\n    align-items: center;\n    background: none;\n    border: none;\n    color: var(--syn-color-primary-600);\n    cursor: pointer;\n    display: flex;\n    padding: var(--syn-spacing-x-small);\n    transition: var(--syn-transition-x-fast) color;\n  }\n\n  .input--small .input__number-stepper-button {\n    font-size: var(--syn-font-size-medium);\n  }\n\n  .input--medium .input__number-stepper-button {\n    font-size: var(--syn-font-size-x-large);\n  }\n\n  .input--large .input__number-stepper-button {\n    font-size: var(--syn-font-size-2x-large);\n  }\n\n  .input__number-stepper-button:hover:not([disabled]) {\n    color: var(--syn-color-primary-900)\n  }\n\n  .input__number-stepper-button:active:not([disabled]) {\n    color: var(--syn-color-primary-950)\n  }\n\n  .input__number-stepper-button[disabled] {\n    color: var(--syn-color-neutral-400);\n    cursor: not-allowed;\n    opacity: var(--syn-input-disabled-opacity);\n  }\n\n  /**\n  * Number stepper divider\n  */\n  .input--small .input__number-divider {\n    height: var(--syn-font-size-medium);\n    margin: 0;\n  }\n\n  .input--medium .input__number-divider {\n    height: var(--syn-font-size-x-large);\n    margin: 0 var(--syn-spacing-2x-small);\n  }\n\n  .input--large .input__number-divider {\n    height: var(--syn-font-size-2x-large);\n    margin: 0 var(--syn-spacing-x-small);\n  }\n`;\n"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  /**\n  * Fixes overflowing of the syn-input in flex and grid containers with fix width (https://github.com/synergy-design-system/synergy-design-system/issues/761)\n  */\n  .input__control {\n    width: 100%;\n  }\n\n  /** #429: Use token for opacity */\n  .input--standard.input--disabled,\n  .input--readonly.input--disabled {\n    opacity: var(--syn-input-disabled-opacity);\n  }\n\n  /**\n  * Min-width size adjusted for each size so 2 full digits are shown for type number\n  */ \n \n  :host([size=\"small\"][type=\"number\"]:not([no-spin-buttons])) {\n    min-width: calc(var(--syn-input-font-size-small)*8.3);\n  }\n\n  :host([size=\"medium\"][type=\"number\"]:not([no-spin-buttons])) {\n    min-width: calc(var(--syn-input-font-size-medium)*9.4);\n  }\n\n  :host([size=\"large\"][type=\"number\"]:not([no-spin-buttons])) {\n    min-width: calc(var(--syn-input-font-size-large)*10);\n  }\n\n   /**\n   * Clearable + Password Toggle\n   */\n   .input__clear {\n    color: var(--syn-input-icon-icon-clearable-color);\n  }\n\n  .input--small .input__clear,\n  .input--small .input__password-toggle {\n    font-size: var(--syn-font-size-medium);\n    padding-left: var(--syn-spacing-x-small);\n    padding-right: var(--syn-spacing-small);\n    width: auto;\n  }\n\n  .input--medium .input__clear,\n  .input--medium .input__password-toggle {\n    font-size: var(--syn-font-size-x-large);\n    padding-left: var(--syn-spacing-small);\n    padding-right: var(--syn-spacing-medium);\n    width: auto;\n  }\n\n  .input--large .input__clear,\n  .input--large .input__password-toggle {\n    font-size: var(--syn-font-size-2x-large);\n    padding-left: var(--syn-spacing-medium);\n    padding-right: var(--syn-spacing-large);\n    width: auto;\n  }\n\n  /* Prefix / Suffix color */\n  .input__prefix ::slotted(*),\n  .input__suffix ::slotted(*) {\n    color: var(--syn-input-icon-color);\n  }\n\n\n  /* PADDINGS */\n  .input--small .input__control {\n    padding: var(--syn-spacing-3x-small) var(--syn-input-spacing-small);\n  }\n\n  .input--medium .input__control {\n    padding: var(--syn-spacing-x-small) var(--syn-input-spacing-medium);\n  }\n\n  .input--large .input__control {\n    padding: var(--syn-input-spacing-small) var(--syn-input-spacing-large);\n  }\n\n  .input--small .input__prefix ::slotted(*) {\n    margin-inline: var(--syn-input-spacing-small) var(--syn-spacing-x-small);\n  }\n\n  .input--medium .input__prefix ::slotted(*) {\n    margin-inline: var(--syn-input-spacing-medium) var(--syn-input-spacing-small);\n  }\n\n  .input--large .input__prefix ::slotted(*) {\n    margin-inline: var(--syn-input-spacing-large) var(--syn-input-spacing-medium);\n  }\n\n  .input--small .input__suffix ::slotted(*) {\n    margin-inline: var(--syn-spacing-x-small) var(--syn-input-spacing-small);\n  }\n\n  .input--medium .input__suffix ::slotted(*) {\n    margin-inline: var(--syn-input-spacing-small) var(--syn-input-spacing-medium);\n  }\n\n  .input--large .input__suffix ::slotted(*) {\n    margin-inline: var(--syn-input-spacing-medium) var(--syn-input-spacing-large);\n  }\n\n  .input__clear + .input__suffix ::slotted(*),\n  .input__password-toggle + .input__suffix ::slotted(*) {\n    margin-inline-start: 0;  \n  }\n\n  .input--small .input__clear + .input__password-toggle {\n    padding-left: var(--syn-spacing-2x-small);\n  }\n\n  .input--medium .input__clear + .input__password-toggle {\n    padding-left: calc(var(--syn-spacing-2x-small) + var(--syn-spacing-3x-small));\n  }\n\n  .input--large .input__clear + .input__password-toggle {\n    padding-left: var(--syn-spacing-x-small);\n  }\n\n  .input--small .input__clear:has(+ .input__password-toggle) {\n    padding-right: var(--syn-spacing-2x-small);\n  }\n\n  .input--medium .input__clear:has(+ .input__password-toggle) {\n    padding-right: calc(var(--syn-spacing-2x-small) + var(--syn-spacing-3x-small));\n  }\n\n  .input--large .input__clear:has(+ .input__password-toggle) {\n    padding-right: var(--syn-spacing-x-small);\n  }\n\n  .form-control--has-suffix .input--large .input__clear:has(+ .input__suffix),\n  .form-control--has-suffix .input--large .input__password-toggle:has(+ .input__suffix) {\n    padding-right: var(--syn-spacing-medium);\n  }\n\n  .form-control--has-suffix .input--small .input__clear:has(+ .input__suffix),\n  .form-control--has-suffix .input--small .input__password-toggle:has(+ .input__suffix) {\n    padding-right: var(--syn-spacing-x-small);\n  }\n\n  .form-control--has-suffix .input--medium .input__clear:has(+ .input__suffix),\n  .form-control--has-suffix .input--medium .input__password-toggle:has(+ .input__suffix) {\n    padding-right: var(--syn-spacing-small);\n  }\n\n  /* Fixes wrong paddings on some suffix special cases: https://github.com/synergy-design-system/synergy-design-system/issues/817  */\n  .form-control--has-prefix .input__control {\n    padding-left: 0;\n  }\n\n  /* Fixes wrong paddings on some suffix special cases: https://github.com/synergy-design-system/synergy-design-system/issues/817  */\n  .form-control--has-suffix .input__control,\n  .input:has(.input__clear) .input__control,\n  .input:has(.input__password-toggle) .input__control {\n    padding-right: 0;\n  }\n\n  :host([type='number']) .input--large:not(.input--no-spin-buttons) .input__clear,\n  :host([type='number']) .input--large:not(.input--no-spin-buttons) .input__password-toggle {\n    padding-right: var(--syn-spacing-medium);\n  }\n\n  /* ICONS SIZE */\n   .input--small .input__prefix ::slotted(syn-icon),\n   .input--small .input__suffix ::slotted(syn-icon) {\n    font-size: var(--syn-font-size-medium);\n   }\n\n  .input--medium .input__prefix ::slotted(syn-icon),\n  .input--medium .input__suffix ::slotted(syn-icon) {\n    font-size: var(--syn-font-size-x-large);\n   }\n\n  .input--large .input__prefix ::slotted(syn-icon),\n  .input--large .input__suffix ::slotted(syn-icon) {\n    font-size: var(--syn-font-size-2x-large);\n   }\n\n  :host([data-user-invalid]) .input--standard {\n    border-color: var(--syn-input-border-color-focus-error);\n  }\n\n  :host([data-user-invalid]) .input--standard.input--focused:not(.input--disabled) {\n    border-color: var(--syn-input-border-color-focus-error);\n    box-shadow: 0 0 0 var(--syn-focus-ring-width) var(--syn-input-focus-ring-error);\n  }\n\n  .input--standard.input--disabled .input__suffix, \n  .input--standard.input--disabled .input__prefix {\n    cursor: not-allowed;\n  } \n\n\n  /**\n  * Number stepper\n  */\n  .input__number-stepper {\n    align-items: center;\n    display: flex;\n  }\n\n  .input--small .input__number-stepper {\n    margin-left: var(--syn-spacing-2x-small);\n  }\n\n  .input--medium .input__number-stepper {\n    margin-right: var(--syn-spacing-2x-small);\n  }\n\n  .input--large .input__number-stepper {\n    margin-right: var(--syn-spacing-x-small);\n  }\n\n\n  /**\n  * Number stepper buttons\n  */\n  .input__number-stepper-button {\n    align-items: center;\n    background: none;\n    border: none;\n    color: var(--syn-interactive-primary-color);\n    cursor: pointer;\n    display: flex;\n    padding: var(--syn-spacing-x-small);\n    transition: var(--syn-transition-x-fast) color;\n  }\n\n  .input--small .input__number-stepper-button {\n    font-size: var(--syn-font-size-medium);\n  }\n\n  .input--medium .input__number-stepper-button {\n    font-size: var(--syn-font-size-x-large);\n  }\n\n  .input--large .input__number-stepper-button {\n    font-size: var(--syn-font-size-2x-large);\n  }\n\n  .input__number-stepper-button:hover:not([disabled]) {\n    color: var(--syn-interactive-primary-color-hover)\n  }\n\n  .input__number-stepper-button:active:not([disabled]) {\n    color: var(--syn-interactive-primary-color-active)\n  }\n\n  .input__number-stepper-button[disabled] {\n    color: var(--syn-color-neutral-400);\n    cursor: not-allowed;\n    opacity: var(--syn-input-disabled-opacity);\n  }\n\n  /**\n  * Number stepper divider\n  */\n  .input--small .input__number-divider {\n    height: var(--syn-font-size-medium);\n    margin: 0;\n  }\n\n  .input--medium .input__number-divider {\n    height: var(--syn-font-size-x-large);\n    margin: 0 var(--syn-spacing-2x-small);\n  }\n\n  .input--large .input__number-divider {\n    height: var(--syn-font-size-2x-large);\n    margin: 0 var(--syn-spacing-x-small);\n  }\n`;\n"],
   "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,8BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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": []
 }