@synergy-design-system/components 1.0.0-main.17 → 1.0.0-main.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (93) hide show
  1. package/LICENSE +5 -24
  2. package/dist/chunks/{chunk.AC72SG2F.js → chunk.36WJCPWJ.js} +4 -4
  3. package/dist/chunks/{chunk.4JOMEFHA.js → chunk.4XAK6MOQ.js} +2 -2
  4. package/dist/chunks/{chunk.6RANOXJK.js → chunk.6HOJNR5P.js} +2 -2
  5. package/dist/chunks/{chunk.SDBXQYGM.js → chunk.ACJLZOKO.js} +2 -2
  6. package/dist/chunks/chunk.AFEABUNX.js +107 -0
  7. package/dist/chunks/chunk.AFEABUNX.js.map +7 -0
  8. package/dist/chunks/{chunk.ZLFNI7BI.js → chunk.AN3MCZ5L.js} +2 -2
  9. package/dist/chunks/{chunk.KCA3BG3W.js → chunk.B2VXDAMH.js} +2 -2
  10. package/dist/chunks/{chunk.GLYODAYL.js → chunk.CGHM66CT.js} +2 -2
  11. package/dist/chunks/{chunk.66VFBEAZ.js → chunk.D2Z6ZJXY.js} +3 -3
  12. package/dist/chunks/{chunk.HB6CB6XA.js → chunk.DO6FDFLR.js} +3 -3
  13. package/dist/chunks/{chunk.FJRJZ6RE.js → chunk.ELVQAMXS.js} +2 -2
  14. package/dist/chunks/{chunk.TS3BXLB7.js → chunk.F4TIM42X.js} +2 -2
  15. package/dist/chunks/{chunk.WQ3IDDAS.js → chunk.FT2URWZV.js} +2 -2
  16. package/dist/chunks/{chunk.SDBSVMIH.js → chunk.GK6FOY6O.js} +2 -2
  17. package/dist/chunks/{chunk.O764J4CP.js → chunk.GNAJOKCJ.js} +3 -1
  18. package/dist/chunks/{chunk.O764J4CP.js.map → chunk.GNAJOKCJ.js.map} +2 -2
  19. package/dist/chunks/{chunk.6ZXWKDC3.js → chunk.L6IGKNDY.js} +3 -3
  20. package/dist/chunks/chunk.MNMITYTH.js +184 -0
  21. package/dist/chunks/chunk.MNMITYTH.js.map +7 -0
  22. package/dist/chunks/{chunk.5555WGU3.js → chunk.MXJIZZJQ.js} +2 -2
  23. package/dist/chunks/{chunk.UAY5JJC6.js → chunk.QAB6MVFI.js} +3 -3
  24. package/dist/chunks/chunk.T7HUHZ5Q.js +12 -0
  25. package/dist/chunks/chunk.T7HUHZ5Q.js.map +7 -0
  26. package/dist/chunks/{chunk.5ENQHYQ2.js → chunk.TTYVMQM7.js} +3 -3
  27. package/dist/chunks/{chunk.5F5XNVZM.js → chunk.U3DCFCX3.js} +2 -2
  28. package/dist/chunks/{chunk.5F5XNVZM.js.map → chunk.U3DCFCX3.js.map} +1 -1
  29. package/dist/chunks/{chunk.SZ6N6QU7.js → chunk.UIG4NCKL.js} +2 -2
  30. package/dist/chunks/{chunk.K4NFW3LK.js → chunk.UWJKSEFE.js} +2 -2
  31. package/dist/chunks/chunk.WY3ORLFU.js +212 -0
  32. package/dist/chunks/chunk.WY3ORLFU.js.map +7 -0
  33. package/dist/chunks/{chunk.5M3MSGTH.js → chunk.ZQ2MDF3U.js} +2 -2
  34. package/dist/components/button/button.component.js +6 -6
  35. package/dist/components/button/button.js +7 -7
  36. package/dist/components/button-group/button-group.component.js +2 -2
  37. package/dist/components/button-group/button-group.js +3 -3
  38. package/dist/components/checkbox/checkbox.component.js +5 -5
  39. package/dist/components/checkbox/checkbox.js +6 -6
  40. package/dist/components/icon/icon.component.js +4 -4
  41. package/dist/components/icon/icon.js +5 -5
  42. package/dist/components/icon/library.js +2 -2
  43. package/dist/components/icon/library.system.js +1 -1
  44. package/dist/components/input/input.component.js +5 -5
  45. package/dist/components/input/input.js +6 -6
  46. package/dist/components/radio/radio.component.js +5 -5
  47. package/dist/components/radio/radio.js +6 -6
  48. package/dist/components/radio-button/radio-button.component.js +2 -2
  49. package/dist/components/radio-button/radio-button.js +3 -3
  50. package/dist/components/radio-group/radio-group.component.js +3 -3
  51. package/dist/components/radio-group/radio-group.js +4 -4
  52. package/dist/components/spinner/spinner.component.js +2 -2
  53. package/dist/components/switch/switch.component.d.ts +86 -0
  54. package/dist/components/switch/switch.component.js +15 -0
  55. package/dist/components/switch/switch.component.js.map +7 -0
  56. package/dist/components/switch/switch.custom.styles.d.ts +2 -0
  57. package/dist/components/switch/switch.custom.styles.js +8 -0
  58. package/dist/components/switch/switch.custom.styles.js.map +7 -0
  59. package/dist/components/switch/switch.d.ts +8 -0
  60. package/dist/components/switch/switch.js +16 -0
  61. package/dist/components/switch/switch.js.map +7 -0
  62. package/dist/components/switch/switch.styles.d.ts +2 -0
  63. package/dist/components/switch/switch.styles.js +10 -0
  64. package/dist/components/switch/switch.styles.js.map +7 -0
  65. package/dist/components/textarea/textarea.component.js +2 -2
  66. package/dist/components/textarea/textarea.js +3 -3
  67. package/dist/custom-elements.json +629 -214
  68. package/dist/synergy.d.ts +1 -0
  69. package/dist/synergy.js +32 -25
  70. package/dist/utilities/icon-library.js +2 -2
  71. package/dist/vscode.html-custom-data.json +69 -17
  72. package/dist/web-types.json +161 -30
  73. package/package.json +6 -6
  74. /package/dist/chunks/{chunk.AC72SG2F.js.map → chunk.36WJCPWJ.js.map} +0 -0
  75. /package/dist/chunks/{chunk.4JOMEFHA.js.map → chunk.4XAK6MOQ.js.map} +0 -0
  76. /package/dist/chunks/{chunk.6RANOXJK.js.map → chunk.6HOJNR5P.js.map} +0 -0
  77. /package/dist/chunks/{chunk.SDBXQYGM.js.map → chunk.ACJLZOKO.js.map} +0 -0
  78. /package/dist/chunks/{chunk.ZLFNI7BI.js.map → chunk.AN3MCZ5L.js.map} +0 -0
  79. /package/dist/chunks/{chunk.KCA3BG3W.js.map → chunk.B2VXDAMH.js.map} +0 -0
  80. /package/dist/chunks/{chunk.GLYODAYL.js.map → chunk.CGHM66CT.js.map} +0 -0
  81. /package/dist/chunks/{chunk.66VFBEAZ.js.map → chunk.D2Z6ZJXY.js.map} +0 -0
  82. /package/dist/chunks/{chunk.HB6CB6XA.js.map → chunk.DO6FDFLR.js.map} +0 -0
  83. /package/dist/chunks/{chunk.FJRJZ6RE.js.map → chunk.ELVQAMXS.js.map} +0 -0
  84. /package/dist/chunks/{chunk.TS3BXLB7.js.map → chunk.F4TIM42X.js.map} +0 -0
  85. /package/dist/chunks/{chunk.WQ3IDDAS.js.map → chunk.FT2URWZV.js.map} +0 -0
  86. /package/dist/chunks/{chunk.SDBSVMIH.js.map → chunk.GK6FOY6O.js.map} +0 -0
  87. /package/dist/chunks/{chunk.6ZXWKDC3.js.map → chunk.L6IGKNDY.js.map} +0 -0
  88. /package/dist/chunks/{chunk.5555WGU3.js.map → chunk.MXJIZZJQ.js.map} +0 -0
  89. /package/dist/chunks/{chunk.UAY5JJC6.js.map → chunk.QAB6MVFI.js.map} +0 -0
  90. /package/dist/chunks/{chunk.5ENQHYQ2.js.map → chunk.TTYVMQM7.js.map} +0 -0
  91. /package/dist/chunks/{chunk.SZ6N6QU7.js.map → chunk.UIG4NCKL.js.map} +0 -0
  92. /package/dist/chunks/{chunk.K4NFW3LK.js.map → chunk.UWJKSEFE.js.map} +0 -0
  93. /package/dist/chunks/{chunk.5M3MSGTH.js.map → chunk.ZQ2MDF3U.js.map} +0 -0
package/LICENSE CHANGED
@@ -1,28 +1,9 @@
1
- BSD 3-Clause License
1
+ The MIT License
2
2
 
3
- Copyright (c) 2023, SickDesignSystem
3
+ Copyright 2023 SICK AG
4
4
 
5
- Redistribution and use in source and binary forms, with or without
6
- modification, are permitted provided that the following conditions are met:
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
7
6
 
8
- 1. Redistributions of source code must retain the above copyright notice, this
9
- list of conditions and the following disclaimer.
7
+ The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
10
8
 
11
- 2. Redistributions in binary form must reproduce the above copyright notice,
12
- this list of conditions and the following disclaimer in the documentation
13
- and/or other materials provided with the distribution.
14
-
15
- 3. Neither the name of the copyright holder nor the names of its
16
- contributors may be used to endorse or promote products derived from
17
- this software without specific prior written permission.
18
-
19
- THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
20
- AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
21
- IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
22
- DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
23
- FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
24
- DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
25
- SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
26
- CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
27
- OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
28
- OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
9
+ THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  SynSpinner
3
- } from "./chunk.SZ6N6QU7.js";
3
+ } from "./chunk.UIG4NCKL.js";
4
4
  import {
5
5
  LocalizeController
6
6
  } from "./chunk.R6VNLE6N.js";
@@ -13,7 +13,7 @@ import {
13
13
  } from "./chunk.P2LNG2PZ.js";
14
14
  import {
15
15
  SynIcon
16
- } from "./chunk.UAY5JJC6.js";
16
+ } from "./chunk.QAB6MVFI.js";
17
17
  import {
18
18
  watch
19
19
  } from "./chunk.VZ7S7YYN.js";
@@ -22,7 +22,7 @@ import {
22
22
  } from "./chunk.YTS5TRJZ.js";
23
23
  import {
24
24
  SynergyElement
25
- } from "./chunk.5F5XNVZM.js";
25
+ } from "./chunk.U3DCFCX3.js";
26
26
  import {
27
27
  __decorateClass
28
28
  } from "./chunk.DJOAQ4JU.js";
@@ -277,4 +277,4 @@ __decorateClass([
277
277
  export {
278
278
  SynButton
279
279
  };
280
- //# sourceMappingURL=chunk.AC72SG2F.js.map
280
+ //# sourceMappingURL=chunk.36WJCPWJ.js.map
@@ -3,7 +3,7 @@ import {
3
3
  } from "./chunk.6C4JXZZN.js";
4
4
  import {
5
5
  library_system_default
6
- } from "./chunk.O764J4CP.js";
6
+ } from "./chunk.GNAJOKCJ.js";
7
7
 
8
8
  // src/components/icon/library.ts
9
9
  var registry = [library_default_default, library_system_default];
@@ -42,4 +42,4 @@ export {
42
42
  registerIconLibrary,
43
43
  unregisterIconLibrary
44
44
  };
45
- //# sourceMappingURL=chunk.4JOMEFHA.js.map
45
+ //# sourceMappingURL=chunk.4XAK6MOQ.js.map
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  SynButtonGroup
3
- } from "./chunk.SDBSVMIH.js";
3
+ } from "./chunk.GK6FOY6O.js";
4
4
 
5
5
  // src/components/button-group/button-group.ts
6
6
  var button_group_default = SynButtonGroup;
@@ -9,4 +9,4 @@ SynButtonGroup.define("syn-button-group");
9
9
  export {
10
10
  button_group_default
11
11
  };
12
- //# sourceMappingURL=chunk.6RANOXJK.js.map
12
+ //# sourceMappingURL=chunk.6HOJNR5P.js.map
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  SynInput
3
- } from "./chunk.6ZXWKDC3.js";
3
+ } from "./chunk.L6IGKNDY.js";
4
4
 
5
5
  // src/components/input/input.ts
6
6
  var input_default = SynInput;
@@ -9,4 +9,4 @@ SynInput.define("syn-input");
9
9
  export {
10
10
  input_default
11
11
  };
12
- //# sourceMappingURL=chunk.SDBXQYGM.js.map
12
+ //# sourceMappingURL=chunk.ACJLZOKO.js.map
@@ -0,0 +1,107 @@
1
+ // src/components/switch/switch.custom.styles.ts
2
+ import { css } from "lit";
3
+ var switch_custom_styles_default = css`
4
+ :host([size='small']) {
5
+ --height: calc(var(--syn-font-size-medium) + 2px);
6
+ --thumb-size: var(--syn-font-size-small);
7
+ --width: calc((var(--height) * 2) - 6px);
8
+ }
9
+
10
+ :host([size='medium']) {
11
+ --height: var(--syn-font-size-large);
12
+ --thumb-size: var(--syn-font-size-medium);
13
+ --width: calc((var(--height) * 2) - 6px);
14
+ }
15
+
16
+ :host([size='large']) {
17
+ --height: calc(var(--syn-toggle-size-large) + 4px);
18
+ --thumb-size: var(--syn-toggle-size-large);
19
+ --width: calc((var(--height) * 2) - 6px);
20
+ }
21
+
22
+ .switch.switch--small {
23
+ padding: var(--syn-spacing-2x-small) 0;
24
+ }
25
+
26
+ .switch.switch--medium {
27
+ padding: var(--syn-spacing-2x-small) 0;
28
+ }
29
+
30
+ .switch.switch--large {
31
+ padding: var(--syn-spacing-3x-small) 0;
32
+ }
33
+
34
+ .switch__control {
35
+ background-color: var(--syn-color-neutral-600);
36
+ border: solid var(--syn-border-width-medium) var(--syn-color-neutral-600);
37
+ }
38
+
39
+ .switch__control .switch__thumb {
40
+ border: none;
41
+ }
42
+
43
+ /* Hover */
44
+ .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover {
45
+ background-color: var(--syn-color-neutral-900);
46
+ border-color: var(--syn-color-neutral-900);
47
+ }
48
+
49
+ .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover .switch__thumb {
50
+ background-color: var(--syn-color-neutral-0);
51
+ }
52
+
53
+ /* Checked + hover */
54
+ .switch.switch--checked:not(.switch--disabled) .switch__control:hover {
55
+ background-color: var(--syn-color-primary-900);
56
+ border-color: var(--syn-color-primary-900);
57
+ }
58
+
59
+ .switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb {
60
+ background-color: var(--syn-color-neutral-0);
61
+ }
62
+
63
+ /* Focus */
64
+ .switch:not(.switch--checked):not(.switch--disabled) .switch__input:focus-visible ~ .switch__control {
65
+ background-color: var(--syn-color-neutral-600);
66
+ border-color: var(--syn-color-neutral-600);
67
+ outline: var(--syn-focus-ring);
68
+ outline-offset: var(--syn-focus-ring-offset);
69
+ }
70
+
71
+ .switch:not(.switch--checked):not(.switch--disabled) .switch__input:focus-visible ~ .switch__control .switch__thumb {
72
+ background-color: var(--syn-color-neutral-0);
73
+ outline: none;
74
+ }
75
+
76
+ /* Checked + focus */
77
+ .switch.switch--checked:not(.switch--disabled) .switch__input:focus-visible ~ .switch__control {
78
+ background-color: var(--syn-color-primary-900);
79
+ border-color: var(--syn-color-primary-900);
80
+ outline: var(--syn-focus-ring);
81
+ outline-offset: var(--syn-focus-ring-offset);
82
+ }
83
+
84
+ .switch.switch--checked:not(.switch--disabled) .switch__input:focus-visible ~ .switch__control .switch__thumb {
85
+ background-color: var(--syn-color-neutral-0);
86
+ outline: none;
87
+ }
88
+
89
+ .switch__label {
90
+ margin-inline-start: var(--syn-spacing-x-small);
91
+ }
92
+
93
+ :host([data-user-invalid]) .switch:not(.switch--checked):not(.switch--disabled) .switch__control {
94
+ background-color: var(--syn-color-error-700);
95
+ border-color: var(--syn-color-error-700);
96
+ }
97
+
98
+ :host([data-user-invalid]) .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover {
99
+ background-color: var(--syn-color-error-900);
100
+ border-color: var(--syn-color-error-900);
101
+ }
102
+ `;
103
+
104
+ export {
105
+ switch_custom_styles_default
106
+ };
107
+ //# sourceMappingURL=chunk.AFEABUNX.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/components/switch/switch.custom.styles.ts"],
4
+ "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n:host([size='small']) {\n --height: calc(var(--syn-font-size-medium) + 2px);\n --thumb-size: var(--syn-font-size-small);\n --width: calc((var(--height) * 2) - 6px);\n }\n\n :host([size='medium']) {\n --height: var(--syn-font-size-large);\n --thumb-size: var(--syn-font-size-medium);\n --width: calc((var(--height) * 2) - 6px);\n }\n\n :host([size='large']) {\n --height: calc(var(--syn-toggle-size-large) + 4px);\n --thumb-size: var(--syn-toggle-size-large);\n --width: calc((var(--height) * 2) - 6px);\n }\n\n .switch.switch--small {\n padding: var(--syn-spacing-2x-small) 0;\n }\n\n .switch.switch--medium {\n padding: var(--syn-spacing-2x-small) 0;\n }\n\n .switch.switch--large {\n padding: var(--syn-spacing-3x-small) 0;\n }\n\n .switch__control {\n background-color: var(--syn-color-neutral-600);\n border: solid var(--syn-border-width-medium) var(--syn-color-neutral-600);\n }\n\n .switch__control .switch__thumb {\n border: none;\n }\n\n /* Hover */\n .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover {\n background-color: var(--syn-color-neutral-900);\n border-color: var(--syn-color-neutral-900);\n }\n\n .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover .switch__thumb {\n background-color: var(--syn-color-neutral-0);\n }\n\n /* Checked + hover */\n .switch.switch--checked:not(.switch--disabled) .switch__control:hover {\n background-color: var(--syn-color-primary-900);\n border-color: var(--syn-color-primary-900);\n }\n\n .switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb {\n background-color: var(--syn-color-neutral-0);\n }\n\n /* Focus */\n .switch:not(.switch--checked):not(.switch--disabled) .switch__input:focus-visible ~ .switch__control {\n background-color: var(--syn-color-neutral-600);\n border-color: var(--syn-color-neutral-600);\n outline: var(--syn-focus-ring);\n outline-offset: var(--syn-focus-ring-offset);\n }\n\n .switch:not(.switch--checked):not(.switch--disabled) .switch__input:focus-visible ~ .switch__control .switch__thumb {\n background-color: var(--syn-color-neutral-0);\n outline: none;\n }\n\n /* Checked + focus */\n .switch.switch--checked:not(.switch--disabled) .switch__input:focus-visible ~ .switch__control {\n background-color: var(--syn-color-primary-900);\n border-color: var(--syn-color-primary-900);\n outline: var(--syn-focus-ring);\n outline-offset: var(--syn-focus-ring-offset);\n }\n\n .switch.switch--checked:not(.switch--disabled) .switch__input:focus-visible ~ .switch__control .switch__thumb {\n background-color: var(--syn-color-neutral-0);\n outline: none;\n }\n\n .switch__label {\n margin-inline-start: var(--syn-spacing-x-small);\n }\n \n :host([data-user-invalid]) .switch:not(.switch--checked):not(.switch--disabled) .switch__control {\n background-color: var(--syn-color-error-700);\n border-color: var(--syn-color-error-700);\n }\n\n :host([data-user-invalid]) .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover {\n background-color: var(--syn-color-error-900);\n border-color: var(--syn-color-error-900);\n }\n `;\n"],
5
+ "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,+BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
6
+ "names": []
7
+ }
@@ -15,7 +15,7 @@ import {
15
15
  } from "./chunk.VZ7S7YYN.js";
16
16
  import {
17
17
  SynergyElement
18
- } from "./chunk.5F5XNVZM.js";
18
+ } from "./chunk.U3DCFCX3.js";
19
19
  import {
20
20
  __decorateClass
21
21
  } from "./chunk.DJOAQ4JU.js";
@@ -357,4 +357,4 @@ __decorateClass([
357
357
  export {
358
358
  SynTextarea
359
359
  };
360
- //# sourceMappingURL=chunk.ZLFNI7BI.js.map
360
+ //# sourceMappingURL=chunk.AN3MCZ5L.js.map
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  SynIcon
3
- } from "./chunk.UAY5JJC6.js";
3
+ } from "./chunk.QAB6MVFI.js";
4
4
 
5
5
  // src/components/icon/icon.ts
6
6
  var icon_default = SynIcon;
@@ -9,4 +9,4 @@ SynIcon.define("syn-icon");
9
9
  export {
10
10
  icon_default
11
11
  };
12
- //# sourceMappingURL=chunk.KCA3BG3W.js.map
12
+ //# sourceMappingURL=chunk.B2VXDAMH.js.map
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  SynRadio
3
- } from "./chunk.66VFBEAZ.js";
3
+ } from "./chunk.D2Z6ZJXY.js";
4
4
 
5
5
  // src/components/radio/radio.ts
6
6
  var radio_default = SynRadio;
@@ -9,4 +9,4 @@ SynRadio.define("syn-radio");
9
9
  export {
10
10
  radio_default
11
11
  };
12
- //# sourceMappingURL=chunk.GLYODAYL.js.map
12
+ //# sourceMappingURL=chunk.CGHM66CT.js.map
@@ -3,13 +3,13 @@ import {
3
3
  } from "./chunk.JBYBQ5TQ.js";
4
4
  import {
5
5
  SynIcon
6
- } from "./chunk.UAY5JJC6.js";
6
+ } from "./chunk.QAB6MVFI.js";
7
7
  import {
8
8
  watch
9
9
  } from "./chunk.VZ7S7YYN.js";
10
10
  import {
11
11
  SynergyElement
12
- } from "./chunk.5F5XNVZM.js";
12
+ } from "./chunk.U3DCFCX3.js";
13
13
  import {
14
14
  __decorateClass
15
15
  } from "./chunk.DJOAQ4JU.js";
@@ -108,4 +108,4 @@ __decorateClass([
108
108
  export {
109
109
  SynRadio
110
110
  };
111
- //# sourceMappingURL=chunk.66VFBEAZ.js.map
111
+ //# sourceMappingURL=chunk.D2Z6ZJXY.js.map
@@ -15,10 +15,10 @@ import {
15
15
  } from "./chunk.VZ7S7YYN.js";
16
16
  import {
17
17
  SynButtonGroup
18
- } from "./chunk.SDBSVMIH.js";
18
+ } from "./chunk.GK6FOY6O.js";
19
19
  import {
20
20
  SynergyElement
21
- } from "./chunk.5F5XNVZM.js";
21
+ } from "./chunk.U3DCFCX3.js";
22
22
  import {
23
23
  __decorateClass
24
24
  } from "./chunk.DJOAQ4JU.js";
@@ -348,4 +348,4 @@ __decorateClass([
348
348
  export {
349
349
  SynRadioGroup
350
350
  };
351
- //# sourceMappingURL=chunk.HB6CB6XA.js.map
351
+ //# sourceMappingURL=chunk.DO6FDFLR.js.map
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  SynRadioGroup
3
- } from "./chunk.HB6CB6XA.js";
3
+ } from "./chunk.DO6FDFLR.js";
4
4
 
5
5
  // src/components/radio-group/radio-group.ts
6
6
  var radio_group_default = SynRadioGroup;
@@ -9,4 +9,4 @@ SynRadioGroup.define("syn-radio-group");
9
9
  export {
10
10
  radio_group_default
11
11
  };
12
- //# sourceMappingURL=chunk.FJRJZ6RE.js.map
12
+ //# sourceMappingURL=chunk.ELVQAMXS.js.map
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  SynTextarea
3
- } from "./chunk.ZLFNI7BI.js";
3
+ } from "./chunk.AN3MCZ5L.js";
4
4
 
5
5
  // src/components/textarea/textarea.ts
6
6
  var textarea_default = SynTextarea;
@@ -9,4 +9,4 @@ SynTextarea.define("syn-textarea");
9
9
  export {
10
10
  textarea_default
11
11
  };
12
- //# sourceMappingURL=chunk.TS3BXLB7.js.map
12
+ //# sourceMappingURL=chunk.F4TIM42X.js.map
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  SynRadioButton
3
- } from "./chunk.5M3MSGTH.js";
3
+ } from "./chunk.ZQ2MDF3U.js";
4
4
 
5
5
  // src/components/radio-button/radio-button.ts
6
6
  var radio_button_default = SynRadioButton;
@@ -9,4 +9,4 @@ SynRadioButton.define("syn-radio-button");
9
9
  export {
10
10
  radio_button_default
11
11
  };
12
- //# sourceMappingURL=chunk.WQ3IDDAS.js.map
12
+ //# sourceMappingURL=chunk.FT2URWZV.js.map
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  SynergyElement
3
- } from "./chunk.5F5XNVZM.js";
3
+ } from "./chunk.U3DCFCX3.js";
4
4
  import {
5
5
  button_group_styles_default
6
6
  } from "./chunk.4ZURABYO.js";
@@ -83,4 +83,4 @@ function findButton(el) {
83
83
  export {
84
84
  SynButtonGroup
85
85
  };
86
- //# sourceMappingURL=chunk.SDBSVMIH.js.map
86
+ //# sourceMappingURL=chunk.GK6FOY6O.js.map
@@ -10,6 +10,8 @@ var icons = {
10
10
  <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill='currentColor'><path d="M12 4.5C7 4.5 2.73 7.61 1 12C2.73 16.39 7 19.5 12 19.5C17 19.5 21.27 16.39 23 12C21.27 7.61 17 4.5 12 4.5ZM12 17C9.24 17 7 14.76 7 12C7 9.24 9.24 7 12 7C14.76 7 17 9.24 17 12C17 14.76 14.76 17 12 17ZM12 9C10.34 9 9 10.34 9 12C9 13.66 10.34 15 12 15C13.66 15 15 13.66 15 12C15 10.34 13.66 9 12 9Z"/></svg>`,
11
11
  "indeterminate": `
12
12
  <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill='currentColor'><path d="M19 13H5V11H19V13Z"/></svg>`,
13
+ "radio": `
14
+ <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill='currentColor'><path d="M17 12C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12C7 9.23858 9.23858 7 12 7C14.7614 7 17 9.23858 17 12Z"/></svg>`,
13
15
  "x-circle-fill": `
14
16
  <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill='currentColor'><path d="M12 2C6.47 2 2 6.47 2 12C2 17.53 6.47 22 12 22C17.53 22 22 17.53 22 12C22 6.47 17.53 2 12 2ZM17 15.59L15.59 17L12 13.41L8.41 17L7 15.59L10.59 12L7 8.41L8.41 7L12 10.59L15.59 7L17 8.41L13.41 12L17 15.59Z"/></svg>`
15
17
  };
@@ -27,4 +29,4 @@ var library_system_default = systemLibrary;
27
29
  export {
28
30
  library_system_default
29
31
  };
30
- //# sourceMappingURL=chunk.O764J4CP.js.map
32
+ //# sourceMappingURL=chunk.GNAJOKCJ.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/components/icon/library.system.ts"],
4
- "sourcesContent": ["/* eslint-disable */\nimport type { IconLibrary } from './library.js';\n\n//\n// System icons are a separate library to ensure they're always available, regardless of how the default icon library is\n// configured or if its icons resolve properly.\n//\n// All Synergy components must use the system library instead of the default library. For visual consistency, system\n// icons are a subset of Bootstrap Icons.\n//\n// **Start system icons**\nconst icons = {\n\t'caret': `\n\t\t<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill='currentColor'><path d=\"M16.59 8.295L12 12.875L7.41 8.295L6 9.705L12 15.705L18 9.705L16.59 8.295Z\"/></svg>`,\n\t'check': `\n\t\t<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill='currentColor'><path d=\"M8.79496 15.875L4.62496 11.705L3.20496 13.115L8.79496 18.705L20.795 6.705L19.385 5.295L8.79496 15.875Z\"/></svg>`,\n\t'eye-slash': `\n\t\t<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill='currentColor'><path d=\"M12.005 6.5C14.765 6.5 17.005 8.74 17.005 11.5C17.005 12.15 16.875 12.76 16.645 13.33L19.565 16.25C21.075 14.99 22.265 13.36 22.995 11.5C21.265 7.11 16.995 4 11.995 4C10.595 4 9.255 4.25 8.01501 4.7L10.175 6.86C10.745 6.63 11.355 6.5 12.005 6.5ZM2.005 3.77L4.745 6.51C3.085 7.8 1.785 9.52 1.005 11.5C2.735 15.89 7.005 19 12.005 19C13.555 19 15.035 18.7 16.385 18.16L16.805 18.58L19.735 21.5L21.005 20.23L3.275 2.5L2.005 3.77ZM7.53501 9.3L9.085 10.85C9.035 11.06 9.005 11.28 9.005 11.5C9.005 13.16 10.345 14.5 12.005 14.5C12.225 14.5 12.445 14.47 12.655 14.42L14.205 15.97C13.535 16.3 12.795 16.5 12.005 16.5C9.245 16.5 7.005 14.26 7.005 11.5C7.005 10.71 7.20501 9.97 7.53501 9.3ZM11.845 8.52L14.995 11.67L15.015 11.51C15.015 9.85 13.675 8.51 12.015 8.51L11.845 8.52Z\"/></svg>`,\n\t'eye': `\n\t\t<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill='currentColor'><path d=\"M12 4.5C7 4.5 2.73 7.61 1 12C2.73 16.39 7 19.5 12 19.5C17 19.5 21.27 16.39 23 12C21.27 7.61 17 4.5 12 4.5ZM12 17C9.24 17 7 14.76 7 12C7 9.24 9.24 7 12 7C14.76 7 17 9.24 17 12C17 14.76 14.76 17 12 17ZM12 9C10.34 9 9 10.34 9 12C9 13.66 10.34 15 12 15C13.66 15 15 13.66 15 12C15 10.34 13.66 9 12 9Z\"/></svg>`,\n\t'indeterminate': `\n\t\t<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill='currentColor'><path d=\"M19 13H5V11H19V13Z\"/></svg>`,\n\t'x-circle-fill': `\n\t\t<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill='currentColor'><path d=\"M12 2C6.47 2 2 6.47 2 12C2 17.53 6.47 22 12 22C17.53 22 22 17.53 22 12C22 6.47 17.53 2 12 2ZM17 15.59L15.59 17L12 13.41L8.41 17L7 15.59L10.59 12L7 8.41L8.41 7L12 10.59L15.59 7L17 8.41L13.41 12L17 15.59Z\"/></svg>`\n};\n// **End system icons**\n\nconst systemLibrary: IconLibrary = {\n name: 'system',\n resolver: (name: keyof typeof icons) => {\n if (name in icons) {\n return `data:image/svg+xml,${encodeURIComponent(icons[name])}`;\n }\n return '';\n }\n};\n\nexport default systemLibrary;\n"],
5
- "mappings": ";AAWA,IAAM,QAAQ;AAAA,EACb,SAAS;AAAA;AAAA,EAET,SAAS;AAAA;AAAA,EAET,aAAa;AAAA;AAAA,EAEb,OAAO;AAAA;AAAA,EAEP,iBAAiB;AAAA;AAAA,EAEjB,iBAAiB;AAAA;AAElB;AAGA,IAAM,gBAA6B;AAAA,EACjC,MAAM;AAAA,EACN,UAAU,CAAC,SAA6B;AACtC,QAAI,QAAQ,OAAO;AACjB,aAAO,sBAAsB,mBAAmB,MAAM,IAAI,CAAC,CAAC;AAAA,IAC9D;AACA,WAAO;AAAA,EACT;AACF;AAEA,IAAO,yBAAQ;",
4
+ "sourcesContent": ["/* eslint-disable */\nimport type { IconLibrary } from './library.js';\n\n//\n// System icons are a separate library to ensure they're always available, regardless of how the default icon library is\n// configured or if its icons resolve properly.\n//\n// All Synergy components must use the system library instead of the default library. For visual consistency, system\n// icons are a subset of Bootstrap Icons.\n//\n// **Start system icons**\nconst icons = {\n\t'caret': `\n\t\t<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill='currentColor'><path d=\"M16.59 8.295L12 12.875L7.41 8.295L6 9.705L12 15.705L18 9.705L16.59 8.295Z\"/></svg>`,\n\t'check': `\n\t\t<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill='currentColor'><path d=\"M8.79496 15.875L4.62496 11.705L3.20496 13.115L8.79496 18.705L20.795 6.705L19.385 5.295L8.79496 15.875Z\"/></svg>`,\n\t'eye-slash': `\n\t\t<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill='currentColor'><path d=\"M12.005 6.5C14.765 6.5 17.005 8.74 17.005 11.5C17.005 12.15 16.875 12.76 16.645 13.33L19.565 16.25C21.075 14.99 22.265 13.36 22.995 11.5C21.265 7.11 16.995 4 11.995 4C10.595 4 9.255 4.25 8.01501 4.7L10.175 6.86C10.745 6.63 11.355 6.5 12.005 6.5ZM2.005 3.77L4.745 6.51C3.085 7.8 1.785 9.52 1.005 11.5C2.735 15.89 7.005 19 12.005 19C13.555 19 15.035 18.7 16.385 18.16L16.805 18.58L19.735 21.5L21.005 20.23L3.275 2.5L2.005 3.77ZM7.53501 9.3L9.085 10.85C9.035 11.06 9.005 11.28 9.005 11.5C9.005 13.16 10.345 14.5 12.005 14.5C12.225 14.5 12.445 14.47 12.655 14.42L14.205 15.97C13.535 16.3 12.795 16.5 12.005 16.5C9.245 16.5 7.005 14.26 7.005 11.5C7.005 10.71 7.20501 9.97 7.53501 9.3ZM11.845 8.52L14.995 11.67L15.015 11.51C15.015 9.85 13.675 8.51 12.015 8.51L11.845 8.52Z\"/></svg>`,\n\t'eye': `\n\t\t<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill='currentColor'><path d=\"M12 4.5C7 4.5 2.73 7.61 1 12C2.73 16.39 7 19.5 12 19.5C17 19.5 21.27 16.39 23 12C21.27 7.61 17 4.5 12 4.5ZM12 17C9.24 17 7 14.76 7 12C7 9.24 9.24 7 12 7C14.76 7 17 9.24 17 12C17 14.76 14.76 17 12 17ZM12 9C10.34 9 9 10.34 9 12C9 13.66 10.34 15 12 15C13.66 15 15 13.66 15 12C15 10.34 13.66 9 12 9Z\"/></svg>`,\n\t'indeterminate': `\n\t\t<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill='currentColor'><path d=\"M19 13H5V11H19V13Z\"/></svg>`,\n\t'radio': `\n\t\t<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill='currentColor'><path d=\"M17 12C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12C7 9.23858 9.23858 7 12 7C14.7614 7 17 9.23858 17 12Z\"/></svg>`,\n\t'x-circle-fill': `\n\t\t<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill='currentColor'><path d=\"M12 2C6.47 2 2 6.47 2 12C2 17.53 6.47 22 12 22C17.53 22 22 17.53 22 12C22 6.47 17.53 2 12 2ZM17 15.59L15.59 17L12 13.41L8.41 17L7 15.59L10.59 12L7 8.41L8.41 7L12 10.59L15.59 7L17 8.41L13.41 12L17 15.59Z\"/></svg>`\n};\n// **End system icons**\n\nconst systemLibrary: IconLibrary = {\n name: 'system',\n resolver: (name: keyof typeof icons) => {\n if (name in icons) {\n return `data:image/svg+xml,${encodeURIComponent(icons[name])}`;\n }\n return '';\n }\n};\n\nexport default systemLibrary;\n"],
5
+ "mappings": ";AAWA,IAAM,QAAQ;AAAA,EACb,SAAS;AAAA;AAAA,EAET,SAAS;AAAA;AAAA,EAET,aAAa;AAAA;AAAA,EAEb,OAAO;AAAA;AAAA,EAEP,iBAAiB;AAAA;AAAA,EAEjB,SAAS;AAAA;AAAA,EAET,iBAAiB;AAAA;AAElB;AAGA,IAAM,gBAA6B;AAAA,EACjC,MAAM;AAAA,EACN,UAAU,CAAC,SAA6B;AACtC,QAAI,QAAQ,OAAO;AACjB,aAAO,sBAAsB,mBAAmB,MAAM,IAAI,CAAC,CAAC;AAAA,IAC9D;AACA,WAAO;AAAA,EACT;AACF;AAEA,IAAO,yBAAQ;",
6
6
  "names": []
7
7
  }
@@ -15,13 +15,13 @@ import {
15
15
  } from "./chunk.P2LNG2PZ.js";
16
16
  import {
17
17
  SynIcon
18
- } from "./chunk.UAY5JJC6.js";
18
+ } from "./chunk.QAB6MVFI.js";
19
19
  import {
20
20
  watch
21
21
  } from "./chunk.VZ7S7YYN.js";
22
22
  import {
23
23
  SynergyElement
24
- } from "./chunk.5F5XNVZM.js";
24
+ } from "./chunk.U3DCFCX3.js";
25
25
  import {
26
26
  __decorateClass
27
27
  } from "./chunk.DJOAQ4JU.js";
@@ -477,4 +477,4 @@ __decorateClass([
477
477
  export {
478
478
  SynInput
479
479
  };
480
- //# sourceMappingURL=chunk.6ZXWKDC3.js.map
480
+ //# sourceMappingURL=chunk.L6IGKNDY.js.map
@@ -0,0 +1,184 @@
1
+ import {
2
+ switch_custom_styles_default
3
+ } from "./chunk.AFEABUNX.js";
4
+ import {
5
+ component_styles_default
6
+ } from "./chunk.O7USYXBT.js";
7
+
8
+ // src/components/switch/switch.styles.ts
9
+ import { css } from "lit";
10
+ var switch_styles_default = css`
11
+ /* stylelint-disable */
12
+ ${component_styles_default}
13
+
14
+ :host {
15
+ display: inline-block;
16
+ }
17
+
18
+ :host([size='small']) {
19
+ --height: var(--syn-toggle-size-small);
20
+ --thumb-size: calc(var(--syn-toggle-size-small) + 4px);
21
+ --width: calc(var(--height) * 2);
22
+
23
+ font-size: var(--syn-input-font-size-small);
24
+ }
25
+
26
+ :host([size='medium']) {
27
+ --height: var(--syn-toggle-size-medium);
28
+ --thumb-size: calc(var(--syn-toggle-size-medium) + 4px);
29
+ --width: calc(var(--height) * 2);
30
+
31
+ font-size: var(--syn-input-font-size-medium);
32
+ }
33
+
34
+ :host([size='large']) {
35
+ --height: var(--syn-toggle-size-large);
36
+ --thumb-size: calc(var(--syn-toggle-size-large) + 4px);
37
+ --width: calc(var(--height) * 2);
38
+
39
+ font-size: var(--syn-input-font-size-large);
40
+ }
41
+
42
+ .switch {
43
+ position: relative;
44
+ display: inline-flex;
45
+ align-items: center;
46
+ font-family: var(--syn-input-font-family);
47
+ font-size: inherit;
48
+ font-weight: var(--syn-input-font-weight);
49
+ color: var(--syn-input-label-color);
50
+ vertical-align: middle;
51
+ cursor: pointer;
52
+ }
53
+
54
+ .switch__control {
55
+ flex: 0 0 auto;
56
+ position: relative;
57
+ display: inline-flex;
58
+ align-items: center;
59
+ justify-content: center;
60
+ width: var(--width);
61
+ height: var(--height);
62
+ background-color: var(--syn-color-neutral-400);
63
+ border: solid var(--syn-input-border-width) var(--syn-color-neutral-400);
64
+ border-radius: var(--height);
65
+ transition:
66
+ var(--syn-transition-fast) border-color,
67
+ var(--syn-transition-fast) background-color;
68
+ }
69
+
70
+ .switch__control .switch__thumb {
71
+ width: var(--thumb-size);
72
+ height: var(--thumb-size);
73
+ background-color: var(--syn-color-neutral-0);
74
+ border-radius: 50%;
75
+ border: solid var(--syn-input-border-width) var(--syn-color-neutral-400);
76
+ translate: calc((var(--width) - var(--height)) / -2);
77
+ transition:
78
+ var(--syn-transition-fast) translate ease,
79
+ var(--syn-transition-fast) background-color,
80
+ var(--syn-transition-fast) border-color,
81
+ var(--syn-transition-fast) box-shadow;
82
+ }
83
+
84
+ .switch__input {
85
+ position: absolute;
86
+ opacity: 0;
87
+ padding: 0;
88
+ margin: 0;
89
+ pointer-events: none;
90
+ }
91
+
92
+ /* Hover */
93
+ .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover {
94
+ background-color: var(--syn-color-neutral-400);
95
+ border-color: var(--syn-color-neutral-400);
96
+ }
97
+
98
+ .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover .switch__thumb {
99
+ background-color: var(--syn-color-neutral-0);
100
+ border-color: var(--syn-color-neutral-400);
101
+ }
102
+
103
+ /* Focus */
104
+ .switch:not(.switch--checked):not(.switch--disabled) .switch__input:focus-visible ~ .switch__control {
105
+ background-color: var(--syn-color-neutral-400);
106
+ border-color: var(--syn-color-neutral-400);
107
+ }
108
+
109
+ .switch:not(.switch--checked):not(.switch--disabled) .switch__input:focus-visible ~ .switch__control .switch__thumb {
110
+ background-color: var(--syn-color-neutral-0);
111
+ border-color: var(--syn-color-primary-600);
112
+ outline: var(--syn-focus-ring);
113
+ outline-offset: var(--syn-focus-ring-offset);
114
+ }
115
+
116
+ /* Checked */
117
+ .switch--checked .switch__control {
118
+ background-color: var(--syn-color-primary-600);
119
+ border-color: var(--syn-color-primary-600);
120
+ }
121
+
122
+ .switch--checked .switch__control .switch__thumb {
123
+ background-color: var(--syn-color-neutral-0);
124
+ border-color: var(--syn-color-primary-600);
125
+ translate: calc((var(--width) - var(--height)) / 2);
126
+ }
127
+
128
+ /* Checked + hover */
129
+ .switch.switch--checked:not(.switch--disabled) .switch__control:hover {
130
+ background-color: var(--syn-color-primary-600);
131
+ border-color: var(--syn-color-primary-600);
132
+ }
133
+
134
+ .switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb {
135
+ background-color: var(--syn-color-neutral-0);
136
+ border-color: var(--syn-color-primary-600);
137
+ }
138
+
139
+ /* Checked + focus */
140
+ .switch.switch--checked:not(.switch--disabled) .switch__input:focus-visible ~ .switch__control {
141
+ background-color: var(--syn-color-primary-600);
142
+ border-color: var(--syn-color-primary-600);
143
+ }
144
+
145
+ .switch.switch--checked:not(.switch--disabled) .switch__input:focus-visible ~ .switch__control .switch__thumb {
146
+ background-color: var(--syn-color-neutral-0);
147
+ border-color: var(--syn-color-primary-600);
148
+ outline: var(--syn-focus-ring);
149
+ outline-offset: var(--syn-focus-ring-offset);
150
+ }
151
+
152
+ /* Disabled */
153
+ .switch--disabled {
154
+ opacity: 0.5;
155
+ cursor: not-allowed;
156
+ }
157
+
158
+ .switch__label {
159
+ display: inline-block;
160
+ line-height: var(--height);
161
+ margin-inline-start: 0.5em;
162
+ user-select: none;
163
+ -webkit-user-select: none;
164
+ }
165
+
166
+ :host([required]) .switch__label::after {
167
+ content: var(--syn-input-required-content);
168
+ margin-inline-start: var(--syn-input-required-content-offset);
169
+ }
170
+
171
+ @media (forced-colors: active) {
172
+ .switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb,
173
+ .switch--checked .switch__control .switch__thumb {
174
+ background-color: ButtonText;
175
+ }
176
+ }
177
+
178
+ ${switch_custom_styles_default}
179
+ `;
180
+
181
+ export {
182
+ switch_styles_default
183
+ };
184
+ //# sourceMappingURL=chunk.MNMITYTH.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/components/switch/switch.styles.ts"],
4
+ "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n// Removing this comment will prevent it from being managed by it.\n// ---------------------------------------------------------------------\n\n/* eslint-disable */\nimport { css } from 'lit';\nimport customStyles from './switch.custom.styles.js';\nimport componentStyles from '../../styles/component.styles.js';\n\nexport default css`\n\t/* stylelint-disable */\n ${componentStyles}\n\n :host {\n display: inline-block;\n }\n\n :host([size='small']) {\n --height: var(--syn-toggle-size-small);\n --thumb-size: calc(var(--syn-toggle-size-small) + 4px);\n --width: calc(var(--height) * 2);\n\n font-size: var(--syn-input-font-size-small);\n }\n\n :host([size='medium']) {\n --height: var(--syn-toggle-size-medium);\n --thumb-size: calc(var(--syn-toggle-size-medium) + 4px);\n --width: calc(var(--height) * 2);\n\n font-size: var(--syn-input-font-size-medium);\n }\n\n :host([size='large']) {\n --height: var(--syn-toggle-size-large);\n --thumb-size: calc(var(--syn-toggle-size-large) + 4px);\n --width: calc(var(--height) * 2);\n\n font-size: var(--syn-input-font-size-large);\n }\n\n .switch {\n position: relative;\n display: inline-flex;\n align-items: center;\n font-family: var(--syn-input-font-family);\n font-size: inherit;\n font-weight: var(--syn-input-font-weight);\n color: var(--syn-input-label-color);\n vertical-align: middle;\n cursor: pointer;\n }\n\n .switch__control {\n flex: 0 0 auto;\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--width);\n height: var(--height);\n background-color: var(--syn-color-neutral-400);\n border: solid var(--syn-input-border-width) var(--syn-color-neutral-400);\n border-radius: var(--height);\n transition:\n var(--syn-transition-fast) border-color,\n var(--syn-transition-fast) background-color;\n }\n\n .switch__control .switch__thumb {\n width: var(--thumb-size);\n height: var(--thumb-size);\n background-color: var(--syn-color-neutral-0);\n border-radius: 50%;\n border: solid var(--syn-input-border-width) var(--syn-color-neutral-400);\n translate: calc((var(--width) - var(--height)) / -2);\n transition:\n var(--syn-transition-fast) translate ease,\n var(--syn-transition-fast) background-color,\n var(--syn-transition-fast) border-color,\n var(--syn-transition-fast) box-shadow;\n }\n\n .switch__input {\n position: absolute;\n opacity: 0;\n padding: 0;\n margin: 0;\n pointer-events: none;\n }\n\n /* Hover */\n .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover {\n background-color: var(--syn-color-neutral-400);\n border-color: var(--syn-color-neutral-400);\n }\n\n .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover .switch__thumb {\n background-color: var(--syn-color-neutral-0);\n border-color: var(--syn-color-neutral-400);\n }\n\n /* Focus */\n .switch:not(.switch--checked):not(.switch--disabled) .switch__input:focus-visible ~ .switch__control {\n background-color: var(--syn-color-neutral-400);\n border-color: var(--syn-color-neutral-400);\n }\n\n .switch:not(.switch--checked):not(.switch--disabled) .switch__input:focus-visible ~ .switch__control .switch__thumb {\n background-color: var(--syn-color-neutral-0);\n border-color: var(--syn-color-primary-600);\n outline: var(--syn-focus-ring);\n outline-offset: var(--syn-focus-ring-offset);\n }\n\n /* Checked */\n .switch--checked .switch__control {\n background-color: var(--syn-color-primary-600);\n border-color: var(--syn-color-primary-600);\n }\n\n .switch--checked .switch__control .switch__thumb {\n background-color: var(--syn-color-neutral-0);\n border-color: var(--syn-color-primary-600);\n translate: calc((var(--width) - var(--height)) / 2);\n }\n\n /* Checked + hover */\n .switch.switch--checked:not(.switch--disabled) .switch__control:hover {\n background-color: var(--syn-color-primary-600);\n border-color: var(--syn-color-primary-600);\n }\n\n .switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb {\n background-color: var(--syn-color-neutral-0);\n border-color: var(--syn-color-primary-600);\n }\n\n /* Checked + focus */\n .switch.switch--checked:not(.switch--disabled) .switch__input:focus-visible ~ .switch__control {\n background-color: var(--syn-color-primary-600);\n border-color: var(--syn-color-primary-600);\n }\n\n .switch.switch--checked:not(.switch--disabled) .switch__input:focus-visible ~ .switch__control .switch__thumb {\n background-color: var(--syn-color-neutral-0);\n border-color: var(--syn-color-primary-600);\n outline: var(--syn-focus-ring);\n outline-offset: var(--syn-focus-ring-offset);\n }\n\n /* Disabled */\n .switch--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .switch__label {\n display: inline-block;\n line-height: var(--height);\n margin-inline-start: 0.5em;\n user-select: none;\n -webkit-user-select: none;\n }\n\n :host([required]) .switch__label::after {\n content: var(--syn-input-required-content);\n margin-inline-start: var(--syn-input-required-content-offset);\n }\n\n @media (forced-colors: active) {\n .switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb,\n .switch--checked .switch__control .switch__thumb {\n background-color: ButtonText;\n }\n }\n\n ${customStyles}\n`;\n\n"],
5
+ "mappings": ";;;;;;;;AAMA,SAAS,WAAW;AAIpB,IAAO,wBAAQ;AAAA;AAAA,IAEX,wBAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAsKf,4BAAY;AAAA;",
6
+ "names": []
7
+ }