@synergy-design-system/components 1.0.0-main.16 → 1.0.0-main.18

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 (85) hide show
  1. package/dist/chunks/{chunk.5WKWPLZF.js → chunk.4ILZNGUL.js} +2 -2
  2. package/dist/chunks/{chunk.J7AP3MQW.js → chunk.56MNILGQ.js} +2 -2
  3. package/dist/chunks/{chunk.IA3FW6K7.js → chunk.5QRUWFI5.js} +2 -2
  4. package/dist/chunks/{chunk.XXWBR5EK.js → chunk.62X7ZGQY.js} +2 -2
  5. package/dist/chunks/{chunk.WFO756B3.js → chunk.7S62S2TT.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.EWHUFP2W.js → chunk.AHR2SOZU.js} +2 -2
  9. package/dist/chunks/{chunk.EWHUFP2W.js.map → chunk.AHR2SOZU.js.map} +1 -1
  10. package/dist/chunks/{chunk.JGET5UN2.js → chunk.APLCM4BH.js} +2 -2
  11. package/dist/chunks/chunk.GIJUJLZE.js +212 -0
  12. package/dist/chunks/chunk.GIJUJLZE.js.map +7 -0
  13. package/dist/chunks/{chunk.7CGR37HY.js → chunk.I73ADQGY.js} +3 -3
  14. package/dist/chunks/{chunk.5SPWHWSQ.js → chunk.ICBK5NRT.js} +2 -2
  15. package/dist/chunks/{chunk.WQHRM3KZ.js → chunk.JU2SCUTB.js} +3 -3
  16. package/dist/chunks/{chunk.3RQHUJCD.js → chunk.L3KHEGJG.js} +2 -2
  17. package/dist/chunks/chunk.MNMITYTH.js +184 -0
  18. package/dist/chunks/chunk.MNMITYTH.js.map +7 -0
  19. package/dist/chunks/{chunk.BMZD77BE.js → chunk.MX3M2JLJ.js} +2 -2
  20. package/dist/chunks/{chunk.A3X4576O.js → chunk.PJQO5573.js} +2 -2
  21. package/dist/chunks/{chunk.AFFMWUZK.js → chunk.PNV7T55D.js} +4 -4
  22. package/dist/chunks/chunk.SKVC23DX.js +12 -0
  23. package/dist/chunks/chunk.SKVC23DX.js.map +7 -0
  24. package/dist/chunks/{chunk.NDPBQ2G4.js → chunk.T6GAYTFL.js} +2 -2
  25. package/dist/chunks/{chunk.2OSWOROK.js → chunk.TGOEMTRU.js} +2 -2
  26. package/dist/chunks/{chunk.BSFEGJUV.js → chunk.TJX5N2II.js} +3 -3
  27. package/dist/chunks/{chunk.FWAZLBJ5.js → chunk.V3A65IMI.js} +3 -3
  28. package/dist/chunks/{chunk.JTNO62RV.js → chunk.X4XOYOXV.js} +2 -2
  29. package/dist/chunks/{chunk.RWLYEO7Y.js → chunk.YMJBCHGO.js} +2 -2
  30. package/dist/components/button/button.component.js +4 -4
  31. package/dist/components/button/button.js +5 -5
  32. package/dist/components/button-group/button-group.component.js +2 -2
  33. package/dist/components/button-group/button-group.js +3 -3
  34. package/dist/components/checkbox/checkbox.component.js +3 -3
  35. package/dist/components/checkbox/checkbox.js +4 -4
  36. package/dist/components/icon/icon.component.js +2 -2
  37. package/dist/components/icon/icon.js +3 -3
  38. package/dist/components/input/input.component.js +3 -3
  39. package/dist/components/input/input.js +4 -4
  40. package/dist/components/radio/radio.component.js +3 -3
  41. package/dist/components/radio/radio.js +4 -4
  42. package/dist/components/radio-button/radio-button.component.js +2 -2
  43. package/dist/components/radio-button/radio-button.js +3 -3
  44. package/dist/components/radio-group/radio-group.component.js +3 -3
  45. package/dist/components/radio-group/radio-group.js +4 -4
  46. package/dist/components/spinner/spinner.component.js +2 -2
  47. package/dist/components/switch/switch.component.d.ts +86 -0
  48. package/dist/components/switch/switch.component.js +15 -0
  49. package/dist/components/switch/switch.component.js.map +7 -0
  50. package/dist/components/switch/switch.custom.styles.d.ts +2 -0
  51. package/dist/components/switch/switch.custom.styles.js +8 -0
  52. package/dist/components/switch/switch.custom.styles.js.map +7 -0
  53. package/dist/components/switch/switch.d.ts +8 -0
  54. package/dist/components/switch/switch.js +16 -0
  55. package/dist/components/switch/switch.js.map +7 -0
  56. package/dist/components/switch/switch.styles.d.ts +2 -0
  57. package/dist/components/switch/switch.styles.js +10 -0
  58. package/dist/components/switch/switch.styles.js.map +7 -0
  59. package/dist/components/textarea/textarea.component.js +2 -2
  60. package/dist/components/textarea/textarea.js +3 -3
  61. package/dist/custom-elements.json +416 -1
  62. package/dist/synergy.d.ts +1 -0
  63. package/dist/synergy.js +30 -23
  64. package/dist/vscode.html-custom-data.json +52 -0
  65. package/dist/web-types.json +132 -1
  66. package/package.json +6 -6
  67. /package/dist/chunks/{chunk.5WKWPLZF.js.map → chunk.4ILZNGUL.js.map} +0 -0
  68. /package/dist/chunks/{chunk.J7AP3MQW.js.map → chunk.56MNILGQ.js.map} +0 -0
  69. /package/dist/chunks/{chunk.IA3FW6K7.js.map → chunk.5QRUWFI5.js.map} +0 -0
  70. /package/dist/chunks/{chunk.XXWBR5EK.js.map → chunk.62X7ZGQY.js.map} +0 -0
  71. /package/dist/chunks/{chunk.WFO756B3.js.map → chunk.7S62S2TT.js.map} +0 -0
  72. /package/dist/chunks/{chunk.JGET5UN2.js.map → chunk.APLCM4BH.js.map} +0 -0
  73. /package/dist/chunks/{chunk.7CGR37HY.js.map → chunk.I73ADQGY.js.map} +0 -0
  74. /package/dist/chunks/{chunk.5SPWHWSQ.js.map → chunk.ICBK5NRT.js.map} +0 -0
  75. /package/dist/chunks/{chunk.WQHRM3KZ.js.map → chunk.JU2SCUTB.js.map} +0 -0
  76. /package/dist/chunks/{chunk.3RQHUJCD.js.map → chunk.L3KHEGJG.js.map} +0 -0
  77. /package/dist/chunks/{chunk.BMZD77BE.js.map → chunk.MX3M2JLJ.js.map} +0 -0
  78. /package/dist/chunks/{chunk.A3X4576O.js.map → chunk.PJQO5573.js.map} +0 -0
  79. /package/dist/chunks/{chunk.AFFMWUZK.js.map → chunk.PNV7T55D.js.map} +0 -0
  80. /package/dist/chunks/{chunk.NDPBQ2G4.js.map → chunk.T6GAYTFL.js.map} +0 -0
  81. /package/dist/chunks/{chunk.2OSWOROK.js.map → chunk.TGOEMTRU.js.map} +0 -0
  82. /package/dist/chunks/{chunk.BSFEGJUV.js.map → chunk.TJX5N2II.js.map} +0 -0
  83. /package/dist/chunks/{chunk.FWAZLBJ5.js.map → chunk.V3A65IMI.js.map} +0 -0
  84. /package/dist/chunks/{chunk.JTNO62RV.js.map → chunk.X4XOYOXV.js.map} +0 -0
  85. /package/dist/chunks/{chunk.RWLYEO7Y.js.map → chunk.YMJBCHGO.js.map} +0 -0
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  SynTextarea
3
- } from "./chunk.JGET5UN2.js";
3
+ } from "./chunk.APLCM4BH.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.5WKWPLZF.js.map
12
+ //# sourceMappingURL=chunk.4ILZNGUL.js.map
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  SynIcon
3
- } from "./chunk.RWLYEO7Y.js";
3
+ } from "./chunk.YMJBCHGO.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.J7AP3MQW.js.map
12
+ //# sourceMappingURL=chunk.56MNILGQ.js.map
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  SynergyElement
3
- } from "./chunk.EWHUFP2W.js";
3
+ } from "./chunk.AHR2SOZU.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.IA3FW6K7.js.map
86
+ //# sourceMappingURL=chunk.5QRUWFI5.js.map
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  SynButtonGroup
3
- } from "./chunk.IA3FW6K7.js";
3
+ } from "./chunk.5QRUWFI5.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.XXWBR5EK.js.map
12
+ //# sourceMappingURL=chunk.62X7ZGQY.js.map
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  SynRadio
3
- } from "./chunk.BSFEGJUV.js";
3
+ } from "./chunk.TJX5N2II.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.WFO756B3.js.map
12
+ //# sourceMappingURL=chunk.7S62S2TT.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
+ }
@@ -48,7 +48,7 @@ var SynergyElement = class extends LitElement {
48
48
  };
49
49
  /* eslint-disable */
50
50
  // @ts-expect-error This is auto-injected at build time.
51
- SynergyElement.version = "1.0.0-main.16";
51
+ SynergyElement.version = "1.0.0-main.18";
52
52
  SynergyElement.dependencies = {};
53
53
  __decorateClass([
54
54
  property()
@@ -60,4 +60,4 @@ __decorateClass([
60
60
  export {
61
61
  SynergyElement
62
62
  };
63
- //# sourceMappingURL=chunk.EWHUFP2W.js.map
63
+ //# sourceMappingURL=chunk.AHR2SOZU.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/internal/synergy-element.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 { LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\n// Match event type name strings that are registered on GlobalEventHandlersEventMap...\ntype EventTypeRequiresDetail<T> = T extends keyof GlobalEventHandlersEventMap\n ? // ...where the event detail is an object...\n GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>>\n ? // ...that is non-empty...\n GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>>\n ? never\n : // ...and has at least one non-optional property\n Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail']\n ? never\n : T\n : never\n : never;\n\n// The inverse of the above (match any type that doesn't match EventTypeRequiresDetail)\ntype EventTypeDoesNotRequireDetail<T> = T extends keyof GlobalEventHandlersEventMap\n ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>>\n ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>>\n ? T\n : Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail']\n ? T\n : never\n : T\n : T;\n\n// `keyof EventTypesWithRequiredDetail` lists all registered event types that require detail\ntype EventTypesWithRequiredDetail = {\n [EventType in keyof GlobalEventHandlersEventMap as EventTypeRequiresDetail<EventType>]: true;\n};\n\n// `keyof EventTypesWithoutRequiredDetail` lists all registered event types that do NOT require detail\ntype EventTypesWithoutRequiredDetail = {\n [EventType in keyof GlobalEventHandlersEventMap as EventTypeDoesNotRequireDetail<EventType>]: true;\n};\n\n// Helper to make a specific property of an object non-optional\ntype WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] };\n\n// Given an event name string, get a valid type for the options to initialize the event that is more restrictive than\n// just CustomEventInit when appropriate (validate the type of the event detail, and require it to be provided if the\n// event requires it)\ntype SynEventInit<T> = T extends keyof GlobalEventHandlersEventMap\n ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>>\n ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>>\n ? CustomEventInit<GlobalEventHandlersEventMap[T]['detail']>\n : Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail']\n ? CustomEventInit<GlobalEventHandlersEventMap[T]['detail']>\n : WithRequired<CustomEventInit<GlobalEventHandlersEventMap[T]['detail']>, 'detail'>\n : CustomEventInit\n : CustomEventInit;\n\n// Given an event name string, get the type of the event\ntype GetCustomEventType<T> = T extends keyof GlobalEventHandlersEventMap\n ? GlobalEventHandlersEventMap[T] extends CustomEvent<unknown>\n ? GlobalEventHandlersEventMap[T]\n : CustomEvent<unknown>\n : CustomEvent<unknown>;\n\n// `keyof ValidEventTypeMap` is equivalent to `keyof GlobalEventHandlersEventMap` but gives a nicer error message\ntype ValidEventTypeMap = EventTypesWithRequiredDetail | EventTypesWithoutRequiredDetail;\n\nexport default class SynergyElement extends LitElement {\n // Make localization attributes reactive\n @property() dir: string;\n @property() lang: string;\n\n /** Emits a custom event with more convenient defaults. */\n emit<T extends string & keyof EventTypesWithoutRequiredDetail>(\n name: EventTypeDoesNotRequireDetail<T>,\n options?: SynEventInit<T> | undefined\n ): GetCustomEventType<T>;\n emit<T extends string & keyof EventTypesWithRequiredDetail>(\n name: EventTypeRequiresDetail<T>,\n options: SynEventInit<T>\n ): GetCustomEventType<T>;\n emit<T extends string & keyof ValidEventTypeMap>(\n name: T,\n options?: SynEventInit<T> | undefined\n ): GetCustomEventType<T> {\n const event = new CustomEvent(name, {\n bubbles: true,\n cancelable: false,\n composed: true,\n detail: {},\n ...options\n });\n\n this.dispatchEvent(event);\n\n return event as GetCustomEventType<T>;\n }\n\n /* eslint-disable */\n // @ts-expect-error This is auto-injected at build time.\n static version = \"1.0.0-main.16\";\n \n\n static define(name: string, elementConstructor = this, options: ElementDefinitionOptions = {}) {\n const currentlyRegisteredConstructor = customElements.get(name) as\n | CustomElementConstructor\n | typeof SynergyElement;\n\n if (!currentlyRegisteredConstructor) {\n customElements.define(name, class extends elementConstructor {} as unknown as CustomElementConstructor, options);\n return;\n }\n\n let newVersion = ' (unknown version)';\n let existingVersion = newVersion;\n\n if ('version' in elementConstructor && elementConstructor.version) {\n newVersion = ' v' + elementConstructor.version;\n }\n\n if ('version' in currentlyRegisteredConstructor && currentlyRegisteredConstructor.version) {\n existingVersion = ' v' + currentlyRegisteredConstructor.version;\n }\n\n // Need to make sure we're not working with null or empty strings before doing version comparisons.\n if (newVersion && existingVersion && newVersion === existingVersion) {\n // If versions match, we don't need to warn anyone. Carry on.\n return;\n }\n\n console.warn(\n `Attempted to register <${name}>${newVersion}, but <${name}>${existingVersion} has already been registered.`\n );\n }\n\n static dependencies: Record<string, typeof SynergyElement> = {};\n\n constructor() {\n super();\n Object.entries((this.constructor as typeof SynergyElement).dependencies).forEach(([name, component]) => {\n (this.constructor as typeof SynergyElement).define(name, component);\n });\n }\n}\n\nexport interface SynergyFormControl extends SynergyElement {\n // Form attributes\n name: string;\n value: unknown;\n disabled?: boolean;\n defaultValue?: unknown;\n defaultChecked?: boolean;\n form?: string;\n\n // Constraint validation attributes\n pattern?: string;\n min?: number | string | Date;\n max?: number | string | Date;\n step?: number | 'any';\n required?: boolean;\n minlength?: number;\n maxlength?: number;\n\n // Form validation properties\n readonly validity: ValidityState;\n readonly validationMessage: string;\n\n // Form validation methods\n checkValidity: () => boolean;\n getForm: () => HTMLFormElement | null;\n reportValidity: () => boolean;\n setCustomValidity: (message: string) => void;\n}\n"],
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 { LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\n// Match event type name strings that are registered on GlobalEventHandlersEventMap...\ntype EventTypeRequiresDetail<T> = T extends keyof GlobalEventHandlersEventMap\n ? // ...where the event detail is an object...\n GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>>\n ? // ...that is non-empty...\n GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>>\n ? never\n : // ...and has at least one non-optional property\n Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail']\n ? never\n : T\n : never\n : never;\n\n// The inverse of the above (match any type that doesn't match EventTypeRequiresDetail)\ntype EventTypeDoesNotRequireDetail<T> = T extends keyof GlobalEventHandlersEventMap\n ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>>\n ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>>\n ? T\n : Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail']\n ? T\n : never\n : T\n : T;\n\n// `keyof EventTypesWithRequiredDetail` lists all registered event types that require detail\ntype EventTypesWithRequiredDetail = {\n [EventType in keyof GlobalEventHandlersEventMap as EventTypeRequiresDetail<EventType>]: true;\n};\n\n// `keyof EventTypesWithoutRequiredDetail` lists all registered event types that do NOT require detail\ntype EventTypesWithoutRequiredDetail = {\n [EventType in keyof GlobalEventHandlersEventMap as EventTypeDoesNotRequireDetail<EventType>]: true;\n};\n\n// Helper to make a specific property of an object non-optional\ntype WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] };\n\n// Given an event name string, get a valid type for the options to initialize the event that is more restrictive than\n// just CustomEventInit when appropriate (validate the type of the event detail, and require it to be provided if the\n// event requires it)\ntype SynEventInit<T> = T extends keyof GlobalEventHandlersEventMap\n ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>>\n ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>>\n ? CustomEventInit<GlobalEventHandlersEventMap[T]['detail']>\n : Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail']\n ? CustomEventInit<GlobalEventHandlersEventMap[T]['detail']>\n : WithRequired<CustomEventInit<GlobalEventHandlersEventMap[T]['detail']>, 'detail'>\n : CustomEventInit\n : CustomEventInit;\n\n// Given an event name string, get the type of the event\ntype GetCustomEventType<T> = T extends keyof GlobalEventHandlersEventMap\n ? GlobalEventHandlersEventMap[T] extends CustomEvent<unknown>\n ? GlobalEventHandlersEventMap[T]\n : CustomEvent<unknown>\n : CustomEvent<unknown>;\n\n// `keyof ValidEventTypeMap` is equivalent to `keyof GlobalEventHandlersEventMap` but gives a nicer error message\ntype ValidEventTypeMap = EventTypesWithRequiredDetail | EventTypesWithoutRequiredDetail;\n\nexport default class SynergyElement extends LitElement {\n // Make localization attributes reactive\n @property() dir: string;\n @property() lang: string;\n\n /** Emits a custom event with more convenient defaults. */\n emit<T extends string & keyof EventTypesWithoutRequiredDetail>(\n name: EventTypeDoesNotRequireDetail<T>,\n options?: SynEventInit<T> | undefined\n ): GetCustomEventType<T>;\n emit<T extends string & keyof EventTypesWithRequiredDetail>(\n name: EventTypeRequiresDetail<T>,\n options: SynEventInit<T>\n ): GetCustomEventType<T>;\n emit<T extends string & keyof ValidEventTypeMap>(\n name: T,\n options?: SynEventInit<T> | undefined\n ): GetCustomEventType<T> {\n const event = new CustomEvent(name, {\n bubbles: true,\n cancelable: false,\n composed: true,\n detail: {},\n ...options\n });\n\n this.dispatchEvent(event);\n\n return event as GetCustomEventType<T>;\n }\n\n /* eslint-disable */\n // @ts-expect-error This is auto-injected at build time.\n static version = \"1.0.0-main.18\";\n \n\n static define(name: string, elementConstructor = this, options: ElementDefinitionOptions = {}) {\n const currentlyRegisteredConstructor = customElements.get(name) as\n | CustomElementConstructor\n | typeof SynergyElement;\n\n if (!currentlyRegisteredConstructor) {\n customElements.define(name, class extends elementConstructor {} as unknown as CustomElementConstructor, options);\n return;\n }\n\n let newVersion = ' (unknown version)';\n let existingVersion = newVersion;\n\n if ('version' in elementConstructor && elementConstructor.version) {\n newVersion = ' v' + elementConstructor.version;\n }\n\n if ('version' in currentlyRegisteredConstructor && currentlyRegisteredConstructor.version) {\n existingVersion = ' v' + currentlyRegisteredConstructor.version;\n }\n\n // Need to make sure we're not working with null or empty strings before doing version comparisons.\n if (newVersion && existingVersion && newVersion === existingVersion) {\n // If versions match, we don't need to warn anyone. Carry on.\n return;\n }\n\n console.warn(\n `Attempted to register <${name}>${newVersion}, but <${name}>${existingVersion} has already been registered.`\n );\n }\n\n static dependencies: Record<string, typeof SynergyElement> = {};\n\n constructor() {\n super();\n Object.entries((this.constructor as typeof SynergyElement).dependencies).forEach(([name, component]) => {\n (this.constructor as typeof SynergyElement).define(name, component);\n });\n }\n}\n\nexport interface SynergyFormControl extends SynergyElement {\n // Form attributes\n name: string;\n value: unknown;\n disabled?: boolean;\n defaultValue?: unknown;\n defaultChecked?: boolean;\n form?: string;\n\n // Constraint validation attributes\n pattern?: string;\n min?: number | string | Date;\n max?: number | string | Date;\n step?: number | 'any';\n required?: boolean;\n minlength?: number;\n maxlength?: number;\n\n // Form validation properties\n readonly validity: ValidityState;\n readonly validationMessage: string;\n\n // Form validation methods\n checkValidity: () => boolean;\n getForm: () => HTMLFormElement | null;\n reportValidity: () => boolean;\n setCustomValidity: (message: string) => void;\n}\n"],
5
5
  "mappings": ";;;;;;AAMA,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AA+DzB,IAAqB,iBAArB,cAA4C,WAAW;AAAA,EAsErD,cAAc;AACZ,UAAM;AACN,WAAO,QAAS,KAAK,YAAsC,YAAY,EAAE,QAAQ,CAAC,CAAC,MAAM,SAAS,MAAM;AACtG,MAAC,KAAK,YAAsC,OAAO,MAAM,SAAS;AAAA,IACpE,CAAC;AAAA,EACH;AAAA,EA7DA,KACE,MACA,SACuB;AACvB,UAAM,QAAQ,IAAI,YAAY,MAAM;AAAA,MAClC,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,QAAQ,CAAC;AAAA,OACN,QACJ;AAED,SAAK,cAAc,KAAK;AAExB,WAAO;AAAA,EACT;AAAA,EAOA,OAAO,OAAO,MAAc,qBAAqB,MAAM,UAAoC,CAAC,GAAG;AAC7F,UAAM,iCAAiC,eAAe,IAAI,IAAI;AAI9D,QAAI,CAAC,gCAAgC;AACnC,qBAAe,OAAO,MAAM,cAAc,mBAAmB;AAAA,MAAC,GAA0C,OAAO;AAC/G;AAAA,IACF;AAEA,QAAI,aAAa;AACjB,QAAI,kBAAkB;AAEtB,QAAI,aAAa,sBAAsB,mBAAmB,SAAS;AACjE,mBAAa,OAAO,mBAAmB;AAAA,IACzC;AAEA,QAAI,aAAa,kCAAkC,+BAA+B,SAAS;AACzF,wBAAkB,OAAO,+BAA+B;AAAA,IAC1D;AAGA,QAAI,cAAc,mBAAmB,eAAe,iBAAiB;AAEnE;AAAA,IACF;AAEA,YAAQ;AAAA,MACN,0BAA0B,IAAI,IAAI,UAAU,UAAU,IAAI,IAAI,eAAe;AAAA,IAC/E;AAAA,EACF;AAUF;AAAA;AAAA;AA5EqB,eAiCZ,UAAU;AAjCE,eAoEZ,eAAsD,CAAC;AAlElD;AAAA,EAAX,SAAS;AAAA,GAFS,eAEP;AACA;AAAA,EAAX,SAAS;AAAA,GAHS,eAGP;",
6
6
  "names": []
7
7
  }
@@ -15,7 +15,7 @@ import {
15
15
  } from "./chunk.VZ7S7YYN.js";
16
16
  import {
17
17
  SynergyElement
18
- } from "./chunk.EWHUFP2W.js";
18
+ } from "./chunk.AHR2SOZU.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.JGET5UN2.js.map
360
+ //# sourceMappingURL=chunk.APLCM4BH.js.map
@@ -0,0 +1,212 @@
1
+ import {
2
+ switch_styles_default
3
+ } from "./chunk.MNMITYTH.js";
4
+ import {
5
+ defaultValue
6
+ } from "./chunk.WFAJR3FN.js";
7
+ import {
8
+ FormControlController
9
+ } from "./chunk.P2LNG2PZ.js";
10
+ import {
11
+ watch
12
+ } from "./chunk.VZ7S7YYN.js";
13
+ import {
14
+ SynergyElement
15
+ } from "./chunk.AHR2SOZU.js";
16
+ import {
17
+ __decorateClass
18
+ } from "./chunk.DJOAQ4JU.js";
19
+
20
+ // src/components/switch/switch.component.ts
21
+ import { classMap } from "lit/directives/class-map.js";
22
+ import { html } from "lit";
23
+ import { ifDefined } from "lit/directives/if-defined.js";
24
+ import { live } from "lit/directives/live.js";
25
+ import { property, query, state } from "lit/decorators.js";
26
+ var SynSwitch = class extends SynergyElement {
27
+ constructor() {
28
+ super(...arguments);
29
+ this.formControlController = new FormControlController(this, {
30
+ value: (control) => control.checked ? control.value || "on" : void 0,
31
+ defaultValue: (control) => control.defaultChecked,
32
+ setValue: (control, checked) => control.checked = checked
33
+ });
34
+ this.hasFocus = false;
35
+ this.title = "";
36
+ this.name = "";
37
+ this.size = "medium";
38
+ this.disabled = false;
39
+ this.checked = false;
40
+ this.defaultChecked = false;
41
+ this.form = "";
42
+ this.required = false;
43
+ }
44
+ /** Gets the validity state object */
45
+ get validity() {
46
+ return this.input.validity;
47
+ }
48
+ /** Gets the validation message */
49
+ get validationMessage() {
50
+ return this.input.validationMessage;
51
+ }
52
+ firstUpdated() {
53
+ this.formControlController.updateValidity();
54
+ }
55
+ handleBlur() {
56
+ this.hasFocus = false;
57
+ this.emit("syn-blur");
58
+ }
59
+ handleInput() {
60
+ this.emit("syn-input");
61
+ }
62
+ handleInvalid(event) {
63
+ this.formControlController.setValidity(false);
64
+ this.formControlController.emitInvalidEvent(event);
65
+ }
66
+ handleClick() {
67
+ this.checked = !this.checked;
68
+ this.emit("syn-change");
69
+ }
70
+ handleFocus() {
71
+ this.hasFocus = true;
72
+ this.emit("syn-focus");
73
+ }
74
+ handleKeyDown(event) {
75
+ if (event.key === "ArrowLeft") {
76
+ event.preventDefault();
77
+ this.checked = false;
78
+ this.emit("syn-change");
79
+ this.emit("syn-input");
80
+ }
81
+ if (event.key === "ArrowRight") {
82
+ event.preventDefault();
83
+ this.checked = true;
84
+ this.emit("syn-change");
85
+ this.emit("syn-input");
86
+ }
87
+ }
88
+ handleCheckedChange() {
89
+ this.input.checked = this.checked;
90
+ this.formControlController.updateValidity();
91
+ }
92
+ handleDisabledChange() {
93
+ this.formControlController.setValidity(true);
94
+ }
95
+ /** Simulates a click on the switch. */
96
+ click() {
97
+ this.input.click();
98
+ }
99
+ /** Sets focus on the switch. */
100
+ focus(options) {
101
+ this.input.focus(options);
102
+ }
103
+ /** Removes focus from the switch. */
104
+ blur() {
105
+ this.input.blur();
106
+ }
107
+ /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
108
+ checkValidity() {
109
+ return this.input.checkValidity();
110
+ }
111
+ /** Gets the associated form, if one exists. */
112
+ getForm() {
113
+ return this.formControlController.getForm();
114
+ }
115
+ /** Checks for validity and shows the browser's validation message if the control is invalid. */
116
+ reportValidity() {
117
+ return this.input.reportValidity();
118
+ }
119
+ /** Sets a custom validation message. Pass an empty string to restore validity. */
120
+ setCustomValidity(message) {
121
+ this.input.setCustomValidity(message);
122
+ this.formControlController.updateValidity();
123
+ }
124
+ render() {
125
+ return html`
126
+ <label
127
+ part="base"
128
+ class=${classMap({
129
+ switch: true,
130
+ "switch--checked": this.checked,
131
+ "switch--disabled": this.disabled,
132
+ "switch--focused": this.hasFocus,
133
+ "switch--small": this.size === "small",
134
+ "switch--medium": this.size === "medium",
135
+ "switch--large": this.size === "large"
136
+ })}
137
+ >
138
+ <input
139
+ class="switch__input"
140
+ type="checkbox"
141
+ title=${this.title}
142
+ name=${this.name}
143
+ value=${ifDefined(this.value)}
144
+ .checked=${live(this.checked)}
145
+ .disabled=${this.disabled}
146
+ .required=${this.required}
147
+ role="switch"
148
+ aria-checked=${this.checked ? "true" : "false"}
149
+ @click=${this.handleClick}
150
+ @input=${this.handleInput}
151
+ @invalid=${this.handleInvalid}
152
+ @blur=${this.handleBlur}
153
+ @focus=${this.handleFocus}
154
+ @keydown=${this.handleKeyDown}
155
+ />
156
+
157
+ <span part="control" class="switch__control">
158
+ <span part="thumb" class="switch__thumb"></span>
159
+ </span>
160
+
161
+ <div part="label" class="switch__label">
162
+ <slot></slot>
163
+ </div>
164
+ </label>
165
+ `;
166
+ }
167
+ };
168
+ SynSwitch.styles = switch_styles_default;
169
+ __decorateClass([
170
+ query('input[type="checkbox"]')
171
+ ], SynSwitch.prototype, "input", 2);
172
+ __decorateClass([
173
+ state()
174
+ ], SynSwitch.prototype, "hasFocus", 2);
175
+ __decorateClass([
176
+ property()
177
+ ], SynSwitch.prototype, "title", 2);
178
+ __decorateClass([
179
+ property()
180
+ ], SynSwitch.prototype, "name", 2);
181
+ __decorateClass([
182
+ property()
183
+ ], SynSwitch.prototype, "value", 2);
184
+ __decorateClass([
185
+ property({ reflect: true })
186
+ ], SynSwitch.prototype, "size", 2);
187
+ __decorateClass([
188
+ property({ type: Boolean, reflect: true })
189
+ ], SynSwitch.prototype, "disabled", 2);
190
+ __decorateClass([
191
+ property({ type: Boolean, reflect: true })
192
+ ], SynSwitch.prototype, "checked", 2);
193
+ __decorateClass([
194
+ defaultValue("checked")
195
+ ], SynSwitch.prototype, "defaultChecked", 2);
196
+ __decorateClass([
197
+ property({ reflect: true })
198
+ ], SynSwitch.prototype, "form", 2);
199
+ __decorateClass([
200
+ property({ type: Boolean, reflect: true })
201
+ ], SynSwitch.prototype, "required", 2);
202
+ __decorateClass([
203
+ watch("checked", { waitUntilFirstUpdate: true })
204
+ ], SynSwitch.prototype, "handleCheckedChange", 1);
205
+ __decorateClass([
206
+ watch("disabled", { waitUntilFirstUpdate: true })
207
+ ], SynSwitch.prototype, "handleDisabledChange", 1);
208
+
209
+ export {
210
+ SynSwitch
211
+ };
212
+ //# sourceMappingURL=chunk.GIJUJLZE.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/components/switch/switch.component.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 { classMap } from 'lit/directives/class-map.js';\nimport { defaultValue } from '../../internal/default-value.js';\nimport { FormControlController } from '../../internal/form.js';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport { watch } from '../../internal/watch.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport styles from './switch.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport type { SynergyFormControl } from '../../internal/synergy-element.js';\n\n/**\n * @summary Switches allow the user to toggle an option on or off.\n * @documentation https://synergy.style/components/switch\n * @status stable\n * @since 2.0\n *\n * @slot - The switch's label.\n *\n * @event syn-blur - Emitted when the control loses focus.\n * @event syn-change - Emitted when the control's checked state changes.\n * @event syn-input - Emitted when the control receives input.\n * @event syn-focus - Emitted when the control gains focus.\n * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart base - The component's base wrapper.\n * @csspart control - The control that houses the switch's thumb.\n * @csspart thumb - The switch's thumb.\n * @csspart label - The switch's label.\n *\n * @cssproperty --width - The width of the switch.\n * @cssproperty --height - The height of the switch.\n * @cssproperty --thumb-size - The size of the thumb.\n */\nexport default class SynSwitch extends SynergyElement implements SynergyFormControl {\n static styles: CSSResultGroup = styles;\n\n private readonly formControlController = new FormControlController(this, {\n value: (control: SynSwitch) => (control.checked ? control.value || 'on' : undefined),\n defaultValue: (control: SynSwitch) => control.defaultChecked,\n setValue: (control: SynSwitch, checked: boolean) => (control.checked = checked)\n });\n\n @query('input[type=\"checkbox\"]') input: HTMLInputElement;\n\n @state() private hasFocus = false;\n @property() title = ''; // make reactive to pass through\n\n /** The name of the switch, submitted as a name/value pair with form data. */\n @property() name = '';\n\n /** The current value of the switch, submitted as a name/value pair with form data. */\n @property() value: string;\n\n /** The switch's size. */\n @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n /** Disables the switch. */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /** Draws the switch in a checked state. */\n @property({ type: Boolean, reflect: true }) checked = false;\n\n /** The default value of the form control. Primarily used for resetting the form control. */\n @defaultValue('checked') defaultChecked = false;\n\n /**\n * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\n * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in\n * the same document or shadow root for this to work.\n */\n @property({ reflect: true }) form = '';\n\n /** Makes the switch a required field. */\n @property({ type: Boolean, reflect: true }) required = false;\n\n /** Gets the validity state object */\n get validity() {\n return this.input.validity;\n }\n\n /** Gets the validation message */\n get validationMessage() {\n return this.input.validationMessage;\n }\n\n firstUpdated() {\n this.formControlController.updateValidity();\n }\n\n private handleBlur() {\n this.hasFocus = false;\n this.emit('syn-blur');\n }\n\n private handleInput() {\n this.emit('syn-input');\n }\n\n private handleInvalid(event: Event) {\n this.formControlController.setValidity(false);\n this.formControlController.emitInvalidEvent(event);\n }\n\n private handleClick() {\n this.checked = !this.checked;\n this.emit('syn-change');\n }\n\n private handleFocus() {\n this.hasFocus = true;\n this.emit('syn-focus');\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'ArrowLeft') {\n event.preventDefault();\n this.checked = false;\n this.emit('syn-change');\n this.emit('syn-input');\n }\n\n if (event.key === 'ArrowRight') {\n event.preventDefault();\n this.checked = true;\n this.emit('syn-change');\n this.emit('syn-input');\n }\n }\n\n @watch('checked', { waitUntilFirstUpdate: true })\n handleCheckedChange() {\n this.input.checked = this.checked; // force a sync update\n this.formControlController.updateValidity();\n }\n\n @watch('disabled', { waitUntilFirstUpdate: true })\n handleDisabledChange() {\n // Disabled form controls are always valid\n this.formControlController.setValidity(true);\n }\n\n /** Simulates a click on the switch. */\n click() {\n this.input.click();\n }\n\n /** Sets focus on the switch. */\n focus(options?: FocusOptions) {\n this.input.focus(options);\n }\n\n /** Removes focus from the switch. */\n blur() {\n this.input.blur();\n }\n\n /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */\n checkValidity() {\n return this.input.checkValidity();\n }\n\n /** Gets the associated form, if one exists. */\n getForm(): HTMLFormElement | null {\n return this.formControlController.getForm();\n }\n\n /** Checks for validity and shows the browser's validation message if the control is invalid. */\n reportValidity() {\n return this.input.reportValidity();\n }\n\n /** Sets a custom validation message. Pass an empty string to restore validity. */\n setCustomValidity(message: string) {\n this.input.setCustomValidity(message);\n this.formControlController.updateValidity();\n }\n\n render() {\n return html`\n <label\n part=\"base\"\n class=${classMap({\n switch: true,\n 'switch--checked': this.checked,\n 'switch--disabled': this.disabled,\n 'switch--focused': this.hasFocus,\n 'switch--small': this.size === 'small',\n 'switch--medium': this.size === 'medium',\n 'switch--large': this.size === 'large'\n })}\n >\n <input\n class=\"switch__input\"\n type=\"checkbox\"\n title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}\n name=${this.name}\n value=${ifDefined(this.value)}\n .checked=${live(this.checked)}\n .disabled=${this.disabled}\n .required=${this.required}\n role=\"switch\"\n aria-checked=${this.checked ? 'true' : 'false'}\n @click=${this.handleClick}\n @input=${this.handleInput}\n @invalid=${this.handleInvalid}\n @blur=${this.handleBlur}\n @focus=${this.handleFocus}\n @keydown=${this.handleKeyDown}\n />\n\n <span part=\"control\" class=\"switch__control\">\n <span part=\"thumb\" class=\"switch__thumb\"></span>\n </span>\n\n <div part=\"label\" class=\"switch__label\">\n <slot></slot>\n </div>\n </label>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'syn-switch': SynSwitch;\n }\n}\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;AAMA,SAAS,gBAAgB;AAGzB,SAAS,YAAY;AACrB,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AACrB,SAAS,UAAU,OAAO,aAAa;AA8BvC,IAAqB,YAArB,cAAuC,eAA6C;AAAA,EAApF;AAAA;AAGE,SAAiB,wBAAwB,IAAI,sBAAsB,MAAM;AAAA,MACvE,OAAO,CAAC,YAAwB,QAAQ,UAAU,QAAQ,SAAS,OAAO;AAAA,MAC1E,cAAc,CAAC,YAAuB,QAAQ;AAAA,MAC9C,UAAU,CAAC,SAAoB,YAAsB,QAAQ,UAAU;AAAA,IACzE,CAAC;AAIQ,SAAQ,WAAW;AAChB,iBAAQ;AAGR,gBAAO;AAMU,gBAAqC;AAGtB,oBAAW;AAGX,mBAAU;AAG7B,0BAAiB;AAOb,gBAAO;AAGQ,oBAAW;AAAA;AAAA;AAAA,EAGvD,IAAI,WAAW;AACb,WAAO,KAAK,MAAM;AAAA,EACpB;AAAA;AAAA,EAGA,IAAI,oBAAoB;AACtB,WAAO,KAAK,MAAM;AAAA,EACpB;AAAA,EAEA,eAAe;AACb,SAAK,sBAAsB,eAAe;AAAA,EAC5C;AAAA,EAEQ,aAAa;AACnB,SAAK,WAAW;AAChB,SAAK,KAAK,UAAU;AAAA,EACtB;AAAA,EAEQ,cAAc;AACpB,SAAK,KAAK,WAAW;AAAA,EACvB;AAAA,EAEQ,cAAc,OAAc;AAClC,SAAK,sBAAsB,YAAY,KAAK;AAC5C,SAAK,sBAAsB,iBAAiB,KAAK;AAAA,EACnD;AAAA,EAEQ,cAAc;AACpB,SAAK,UAAU,CAAC,KAAK;AACrB,SAAK,KAAK,YAAY;AAAA,EACxB;AAAA,EAEQ,cAAc;AACpB,SAAK,WAAW;AAChB,SAAK,KAAK,WAAW;AAAA,EACvB;AAAA,EAEQ,cAAc,OAAsB;AAC1C,QAAI,MAAM,QAAQ,aAAa;AAC7B,YAAM,eAAe;AACrB,WAAK,UAAU;AACf,WAAK,KAAK,YAAY;AACtB,WAAK,KAAK,WAAW;AAAA,IACvB;AAEA,QAAI,MAAM,QAAQ,cAAc;AAC9B,YAAM,eAAe;AACrB,WAAK,UAAU;AACf,WAAK,KAAK,YAAY;AACtB,WAAK,KAAK,WAAW;AAAA,IACvB;AAAA,EACF;AAAA,EAGA,sBAAsB;AACpB,SAAK,MAAM,UAAU,KAAK;AAC1B,SAAK,sBAAsB,eAAe;AAAA,EAC5C;AAAA,EAGA,uBAAuB;AAErB,SAAK,sBAAsB,YAAY,IAAI;AAAA,EAC7C;AAAA;AAAA,EAGA,QAAQ;AACN,SAAK,MAAM,MAAM;AAAA,EACnB;AAAA;AAAA,EAGA,MAAM,SAAwB;AAC5B,SAAK,MAAM,MAAM,OAAO;AAAA,EAC1B;AAAA;AAAA,EAGA,OAAO;AACL,SAAK,MAAM,KAAK;AAAA,EAClB;AAAA;AAAA,EAGA,gBAAgB;AACd,WAAO,KAAK,MAAM,cAAc;AAAA,EAClC;AAAA;AAAA,EAGA,UAAkC;AAChC,WAAO,KAAK,sBAAsB,QAAQ;AAAA,EAC5C;AAAA;AAAA,EAGA,iBAAiB;AACf,WAAO,KAAK,MAAM,eAAe;AAAA,EACnC;AAAA;AAAA,EAGA,kBAAkB,SAAiB;AACjC,SAAK,MAAM,kBAAkB,OAAO;AACpC,SAAK,sBAAsB,eAAe;AAAA,EAC5C;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,gBAGK,SAAS;AAAA,MACf,QAAQ;AAAA,MACR,mBAAmB,KAAK;AAAA,MACxB,oBAAoB,KAAK;AAAA,MACzB,mBAAmB,KAAK;AAAA,MACxB,iBAAiB,KAAK,SAAS;AAAA,MAC/B,kBAAkB,KAAK,SAAS;AAAA,MAChC,iBAAiB,KAAK,SAAS;AAAA,IACjC,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKQ,KAAK,KAAuF;AAAA,iBAC7F,KAAK,IAAI;AAAA,kBACR,UAAU,KAAK,KAAK,CAAC;AAAA,qBAClB,KAAK,KAAK,OAAO,CAAC;AAAA,sBACjB,KAAK,QAAQ;AAAA,sBACb,KAAK,QAAQ;AAAA;AAAA,yBAEV,KAAK,UAAU,SAAS,OAAO;AAAA,mBACrC,KAAK,WAAW;AAAA,mBAChB,KAAK,WAAW;AAAA,qBACd,KAAK,aAAa;AAAA,kBACrB,KAAK,UAAU;AAAA,mBACd,KAAK,WAAW;AAAA,qBACd,KAAK,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYrC;AACF;AA3LqB,UACZ,SAAyB;AAQC;AAAA,EAAhC,MAAM,wBAAwB;AAAA,GATZ,UASc;AAEhB;AAAA,EAAhB,MAAM;AAAA,GAXY,UAWF;AACL;AAAA,EAAX,SAAS;AAAA,GAZS,UAYP;AAGA;AAAA,EAAX,SAAS;AAAA,GAfS,UAeP;AAGA;AAAA,EAAX,SAAS;AAAA,GAlBS,UAkBP;AAGiB;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GArBR,UAqBU;AAGe;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAxBvB,UAwByB;AAGA;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GA3BvB,UA2ByB;AAGnB;AAAA,EAAxB,aAAa,SAAS;AAAA,GA9BJ,UA8BM;AAOI;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GArCR,UAqCU;AAGe;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAxCvB,UAwCyB;AAyD5C;AAAA,EADC,MAAM,WAAW,EAAE,sBAAsB,KAAK,CAAC;AAAA,GAhG7B,UAiGnB;AAMA;AAAA,EADC,MAAM,YAAY,EAAE,sBAAsB,KAAK,CAAC;AAAA,GAtG9B,UAuGnB;",
6
+ "names": []
7
+ }
@@ -15,10 +15,10 @@ import {
15
15
  } from "./chunk.VZ7S7YYN.js";
16
16
  import {
17
17
  SynButtonGroup
18
- } from "./chunk.IA3FW6K7.js";
18
+ } from "./chunk.5QRUWFI5.js";
19
19
  import {
20
20
  SynergyElement
21
- } from "./chunk.EWHUFP2W.js";
21
+ } from "./chunk.AHR2SOZU.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.7CGR37HY.js.map
351
+ //# sourceMappingURL=chunk.I73ADQGY.js.map
@@ -6,7 +6,7 @@ import {
6
6
  } from "./chunk.R6VNLE6N.js";
7
7
  import {
8
8
  SynergyElement
9
- } from "./chunk.EWHUFP2W.js";
9
+ } from "./chunk.AHR2SOZU.js";
10
10
 
11
11
  // src/components/spinner/spinner.component.ts
12
12
  import { html } from "lit";
@@ -29,4 +29,4 @@ SynSpinner.styles = spinner_styles_default;
29
29
  export {
30
30
  SynSpinner
31
31
  };
32
- //# sourceMappingURL=chunk.5SPWHWSQ.js.map
32
+ //# sourceMappingURL=chunk.ICBK5NRT.js.map
@@ -9,13 +9,13 @@ import {
9
9
  } from "./chunk.P2LNG2PZ.js";
10
10
  import {
11
11
  SynIcon
12
- } from "./chunk.RWLYEO7Y.js";
12
+ } from "./chunk.YMJBCHGO.js";
13
13
  import {
14
14
  watch
15
15
  } from "./chunk.VZ7S7YYN.js";
16
16
  import {
17
17
  SynergyElement
18
- } from "./chunk.EWHUFP2W.js";
18
+ } from "./chunk.AHR2SOZU.js";
19
19
  import {
20
20
  __decorateClass
21
21
  } from "./chunk.DJOAQ4JU.js";
@@ -221,4 +221,4 @@ __decorateClass([
221
221
  export {
222
222
  SynCheckbox
223
223
  };
224
- //# sourceMappingURL=chunk.WQHRM3KZ.js.map
224
+ //# sourceMappingURL=chunk.JU2SCUTB.js.map
@@ -9,7 +9,7 @@ import {
9
9
  } from "./chunk.VZ7S7YYN.js";
10
10
  import {
11
11
  SynergyElement
12
- } from "./chunk.EWHUFP2W.js";
12
+ } from "./chunk.AHR2SOZU.js";
13
13
  import {
14
14
  __decorateClass
15
15
  } from "./chunk.DJOAQ4JU.js";
@@ -124,4 +124,4 @@ __decorateClass([
124
124
  export {
125
125
  SynRadioButton
126
126
  };
127
- //# sourceMappingURL=chunk.3RQHUJCD.js.map
127
+ //# sourceMappingURL=chunk.L3KHEGJG.js.map