@synergy-design-system/components 1.0.0-main.8 → 1.0.0

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 (212) hide show
  1. package/LICENSE +5 -24
  2. package/README.md +1 -1
  3. package/dist/chunks/chunk.23HTU3YE.js +189 -0
  4. package/dist/chunks/chunk.23HTU3YE.js.map +7 -0
  5. package/dist/chunks/chunk.2XZKXVMR.js +44 -0
  6. package/dist/chunks/chunk.2XZKXVMR.js.map +7 -0
  7. package/dist/chunks/chunk.3AQETYIY.js +12 -0
  8. package/dist/chunks/chunk.3AQETYIY.js.map +7 -0
  9. package/dist/chunks/chunk.45DBFNVM.js +12 -0
  10. package/dist/chunks/chunk.45DBFNVM.js.map +7 -0
  11. package/dist/chunks/chunk.4CBN5LPQ.js +137 -0
  12. package/dist/chunks/chunk.4CBN5LPQ.js.map +7 -0
  13. package/dist/chunks/chunk.4I6M5V6O.js +56 -0
  14. package/dist/chunks/chunk.4I6M5V6O.js.map +7 -0
  15. package/dist/chunks/{chunk.5OIEI73E.js → chunk.4XAK6MOQ.js} +2 -2
  16. package/dist/chunks/chunk.4ZURABYO.js +24 -0
  17. package/dist/chunks/{chunk.BREU4ILT.js.map → chunk.4ZURABYO.js.map} +3 -3
  18. package/dist/chunks/{chunk.5SUEJSIW.js → chunk.5ECUVPQI.js} +13 -31
  19. package/dist/chunks/{chunk.5SUEJSIW.js.map → chunk.5ECUVPQI.js.map} +3 -3
  20. package/dist/chunks/{chunk.53ZDJY4Q.js → chunk.6I3HJMNQ.js} +2 -2
  21. package/dist/chunks/{chunk.53ZDJY4Q.js.map → chunk.6I3HJMNQ.js.map} +1 -1
  22. package/dist/chunks/chunk.7CU3ERWO.js +86 -0
  23. package/dist/chunks/chunk.7CU3ERWO.js.map +7 -0
  24. package/dist/chunks/chunk.AFEABUNX.js +107 -0
  25. package/dist/chunks/chunk.AFEABUNX.js.map +7 -0
  26. package/dist/chunks/chunk.BP34OPXK.js +12 -0
  27. package/dist/chunks/chunk.BP34OPXK.js.map +7 -0
  28. package/dist/chunks/chunk.C6BQ2APJ.js +12 -0
  29. package/dist/chunks/chunk.C6BQ2APJ.js.map +7 -0
  30. package/dist/chunks/{chunk.G3PDKNFK.js → chunk.EMVM7VFZ.js} +15 -13
  31. package/dist/chunks/chunk.EMVM7VFZ.js.map +7 -0
  32. package/dist/chunks/chunk.F4MRQLNL.js +25 -0
  33. package/dist/chunks/chunk.F4MRQLNL.js.map +7 -0
  34. package/dist/chunks/chunk.FVSP4LXX.js +138 -0
  35. package/dist/chunks/chunk.FVSP4LXX.js.map +7 -0
  36. package/dist/chunks/chunk.GNAJOKCJ.js +32 -0
  37. package/dist/chunks/chunk.GNAJOKCJ.js.map +7 -0
  38. package/dist/chunks/{chunk.4SJKXOCV.js → chunk.HPTHXM7Q.js} +2 -2
  39. package/dist/chunks/chunk.HSZXAY7K.js +12 -0
  40. package/dist/chunks/chunk.HSZXAY7K.js.map +7 -0
  41. package/dist/chunks/{chunk.5ZMQBOV3.js → chunk.IV4DT254.js} +2 -2
  42. package/dist/chunks/{chunk.DI6S4YNU.js → chunk.J36DIOVR.js} +11 -38
  43. package/dist/chunks/{chunk.DI6S4YNU.js.map → chunk.J36DIOVR.js.map} +4 -4
  44. package/dist/chunks/chunk.JBYBQ5TQ.js +132 -0
  45. package/dist/chunks/chunk.JBYBQ5TQ.js.map +7 -0
  46. package/dist/chunks/chunk.JHXCBOUD.js +123 -0
  47. package/dist/chunks/chunk.JHXCBOUD.js.map +7 -0
  48. package/dist/chunks/{chunk.B7XEALID.js → chunk.KZT2HFEV.js} +2 -2
  49. package/dist/chunks/chunk.MNMITYTH.js +184 -0
  50. package/dist/chunks/chunk.MNMITYTH.js.map +7 -0
  51. package/dist/chunks/chunk.NKIYFJN2.js +1 -0
  52. package/dist/chunks/chunk.NKIYFJN2.js.map +7 -0
  53. package/dist/chunks/chunk.OVVMSN4D.js +37 -0
  54. package/dist/chunks/chunk.OVVMSN4D.js.map +7 -0
  55. package/dist/chunks/{chunk.Q77OTWF2.js → chunk.OXUFFH57.js} +6 -66
  56. package/dist/chunks/{chunk.Q77OTWF2.js.map → chunk.OXUFFH57.js.map} +4 -4
  57. package/dist/chunks/{chunk.WDCAHRYG.js → chunk.P2LNG2PZ.js} +4 -2
  58. package/dist/chunks/chunk.PBWBRVMW.js +111 -0
  59. package/dist/chunks/chunk.PBWBRVMW.js.map +7 -0
  60. package/dist/chunks/chunk.PJO6TM3T.js +10 -0
  61. package/dist/chunks/{chunk.ILONRPL4.js.map → chunk.PJO6TM3T.js.map} +2 -2
  62. package/dist/chunks/chunk.Q6AHDRN2.js +12 -0
  63. package/dist/chunks/chunk.Q6AHDRN2.js.map +7 -0
  64. package/dist/chunks/chunk.QBOOYQY4.js +360 -0
  65. package/dist/chunks/chunk.QBOOYQY4.js.map +7 -0
  66. package/dist/chunks/{chunk.BREU4ILT.js → chunk.RSONAU45.js} +6 -1
  67. package/dist/chunks/chunk.RSONAU45.js.map +7 -0
  68. package/dist/chunks/chunk.TPRFDNQ5.js +12 -0
  69. package/dist/chunks/chunk.TPRFDNQ5.js.map +7 -0
  70. package/dist/chunks/chunk.TS36BW77.js +224 -0
  71. package/dist/chunks/chunk.TS36BW77.js.map +7 -0
  72. package/dist/chunks/chunk.V6VND4OF.js +49 -0
  73. package/dist/chunks/chunk.V6VND4OF.js.map +7 -0
  74. package/dist/chunks/chunk.VZ7S7YYN.js +34 -0
  75. package/dist/chunks/chunk.VZ7S7YYN.js.map +7 -0
  76. package/dist/chunks/chunk.W46CFM2R.js +90 -0
  77. package/dist/chunks/chunk.W46CFM2R.js.map +7 -0
  78. package/dist/chunks/chunk.WFAJR3FN.js +25 -0
  79. package/dist/chunks/chunk.WFAJR3FN.js.map +7 -0
  80. package/dist/chunks/chunk.X6ZVJSXL.js +212 -0
  81. package/dist/chunks/chunk.X6ZVJSXL.js.map +7 -0
  82. package/dist/chunks/chunk.YBIBWRKC.js +19 -0
  83. package/dist/chunks/chunk.YBIBWRKC.js.map +7 -0
  84. package/dist/chunks/chunk.YBZOIKAS.js +127 -0
  85. package/dist/chunks/chunk.YBZOIKAS.js.map +7 -0
  86. package/dist/chunks/{chunk.P22LQI5J.js → chunk.YTS5TRJZ.js} +6 -6
  87. package/dist/chunks/chunk.YTS5TRJZ.js.map +7 -0
  88. package/dist/chunks/{chunk.WTCUSH7V.js → chunk.Z3RZUTQU.js} +2 -2
  89. package/dist/chunks/chunk.ZJHB2ZWN.js +351 -0
  90. package/dist/chunks/chunk.ZJHB2ZWN.js.map +7 -0
  91. package/dist/chunks/chunk.ZSHYGTD6.js +12 -0
  92. package/dist/chunks/chunk.ZSHYGTD6.js.map +7 -0
  93. package/dist/components/button/button.component.d.ts +1 -1
  94. package/dist/components/button/button.component.js +13 -11
  95. package/dist/components/button/button.custom.styles.js +1 -1
  96. package/dist/components/button/button.js +14 -12
  97. package/dist/components/button/button.styles.js +2 -2
  98. package/dist/components/button-group/button-group.component.d.ts +28 -0
  99. package/dist/components/button-group/button-group.component.js +11 -0
  100. package/dist/components/button-group/button-group.component.js.map +7 -0
  101. package/dist/components/button-group/button-group.d.ts +8 -0
  102. package/dist/components/button-group/button-group.js +12 -0
  103. package/dist/components/button-group/button-group.js.map +7 -0
  104. package/dist/components/button-group/button-group.styles.d.ts +2 -0
  105. package/dist/components/button-group/button-group.styles.js +9 -0
  106. package/dist/components/button-group/button-group.styles.js.map +7 -0
  107. package/dist/components/checkbox/checkbox.component.d.ts +93 -0
  108. package/dist/components/checkbox/checkbox.component.js +22 -0
  109. package/dist/components/checkbox/checkbox.component.js.map +7 -0
  110. package/dist/components/checkbox/checkbox.custom.styles.js +3 -6
  111. package/dist/components/checkbox/checkbox.custom.styles.js.map +3 -3
  112. package/dist/components/checkbox/checkbox.d.ts +8 -0
  113. package/dist/components/checkbox/checkbox.js +23 -0
  114. package/dist/components/checkbox/checkbox.js.map +7 -0
  115. package/dist/components/checkbox/checkbox.styles.d.ts +2 -0
  116. package/dist/components/checkbox/checkbox.styles.js +10 -0
  117. package/dist/components/checkbox/checkbox.styles.js.map +7 -0
  118. package/dist/components/icon/icon.component.js +7 -5
  119. package/dist/components/icon/icon.custom.styles.d.ts +2 -0
  120. package/dist/components/icon/icon.custom.styles.js +8 -0
  121. package/dist/components/icon/icon.custom.styles.js.map +7 -0
  122. package/dist/components/icon/icon.js +9 -10
  123. package/dist/components/icon/icon.js.map +3 -3
  124. package/dist/components/icon/icon.styles.js +2 -1
  125. package/dist/components/icon/library.js +2 -2
  126. package/dist/components/icon/library.system.js +1 -1
  127. package/dist/components/input/input.component.js +14 -10
  128. package/dist/components/input/input.custom.styles.js +1 -1
  129. package/dist/components/input/input.js +15 -11
  130. package/dist/components/input/input.styles.js +3 -2
  131. package/dist/components/radio/radio.component.d.ts +53 -0
  132. package/dist/components/radio/radio.component.js +20 -0
  133. package/dist/components/radio/radio.component.js.map +7 -0
  134. package/dist/components/radio/radio.custom.styles.d.ts +2 -0
  135. package/dist/components/radio/radio.custom.styles.js +8 -0
  136. package/dist/components/radio/radio.custom.styles.js.map +7 -0
  137. package/dist/components/radio/radio.d.ts +8 -0
  138. package/dist/components/radio/radio.js +21 -0
  139. package/dist/components/radio/radio.js.map +7 -0
  140. package/dist/components/radio/radio.styles.d.ts +2 -0
  141. package/dist/components/radio/radio.styles.js +10 -0
  142. package/dist/components/radio/radio.styles.js.map +7 -0
  143. package/dist/components/radio-button/radio-button.component.d.ts +53 -0
  144. package/dist/components/radio-button/radio-button.component.js +15 -0
  145. package/dist/components/radio-button/radio-button.component.js.map +7 -0
  146. package/dist/components/radio-button/radio-button.d.ts +8 -0
  147. package/dist/components/radio-button/radio-button.js +16 -0
  148. package/dist/components/radio-button/radio-button.js.map +7 -0
  149. package/dist/components/radio-button/radio-button.styles.d.ts +2 -0
  150. package/dist/components/radio-button/radio-button.styles.js +11 -0
  151. package/dist/components/radio-button/radio-button.styles.js.map +7 -0
  152. package/dist/components/radio-group/radio-group.component.d.ts +89 -0
  153. package/dist/components/radio-group/radio-group.component.js +18 -0
  154. package/dist/components/radio-group/radio-group.component.js.map +7 -0
  155. package/dist/components/radio-group/radio-group.custom.styles.d.ts +2 -0
  156. package/dist/components/radio-group/radio-group.custom.styles.js +8 -0
  157. package/dist/components/radio-group/radio-group.custom.styles.js.map +7 -0
  158. package/dist/components/radio-group/radio-group.d.ts +8 -0
  159. package/dist/components/radio-group/radio-group.js +19 -0
  160. package/dist/components/radio-group/radio-group.js.map +7 -0
  161. package/dist/components/radio-group/radio-group.styles.d.ts +2 -0
  162. package/dist/components/radio-group/radio-group.styles.js +11 -0
  163. package/dist/components/radio-group/radio-group.styles.js.map +7 -0
  164. package/dist/components/spinner/spinner.component.js +2 -2
  165. package/dist/components/switch/switch.component.d.ts +86 -0
  166. package/dist/components/switch/switch.component.js +15 -0
  167. package/dist/components/switch/switch.component.js.map +7 -0
  168. package/dist/components/switch/switch.custom.styles.d.ts +2 -0
  169. package/dist/components/switch/switch.custom.styles.js +8 -0
  170. package/dist/components/switch/switch.custom.styles.js.map +7 -0
  171. package/dist/components/switch/switch.d.ts +8 -0
  172. package/dist/components/switch/switch.js +16 -0
  173. package/dist/components/switch/switch.js.map +7 -0
  174. package/dist/components/switch/switch.styles.d.ts +2 -0
  175. package/dist/components/switch/switch.styles.js +10 -0
  176. package/dist/components/switch/switch.styles.js.map +7 -0
  177. package/dist/components/textarea/textarea.component.d.ts +131 -0
  178. package/dist/components/textarea/textarea.component.js +17 -0
  179. package/dist/components/textarea/textarea.component.js.map +7 -0
  180. package/dist/components/textarea/textarea.custom.styles.js +3 -6
  181. package/dist/components/textarea/textarea.custom.styles.js.map +3 -3
  182. package/dist/components/textarea/textarea.d.ts +8 -0
  183. package/dist/components/textarea/textarea.js +18 -0
  184. package/dist/components/textarea/textarea.js.map +7 -0
  185. package/dist/components/textarea/textarea.styles.d.ts +2 -0
  186. package/dist/components/textarea/textarea.styles.js +11 -0
  187. package/dist/components/textarea/textarea.styles.js.map +7 -0
  188. package/dist/custom-elements.json +3112 -520
  189. package/dist/internal/test.d.ts +28 -0
  190. package/dist/styles/form-control.custom.styles.d.ts +2 -0
  191. package/dist/synergy.d.ts +11 -1
  192. package/dist/synergy.js +87 -21
  193. package/dist/utilities/form.js +2 -2
  194. package/dist/utilities/icon-library.d.ts +1 -0
  195. package/dist/utilities/icon-library.js +14 -0
  196. package/dist/utilities/icon-library.js.map +7 -0
  197. package/dist/vscode.html-custom-data.json +390 -1
  198. package/dist/web-types.json +868 -10
  199. package/package.json +23 -16
  200. package/dist/chunks/chunk.DREO4ZTN.js +0 -10
  201. package/dist/chunks/chunk.DREO4ZTN.js.map +0 -7
  202. package/dist/chunks/chunk.G3PDKNFK.js.map +0 -7
  203. package/dist/chunks/chunk.ILONRPL4.js +0 -10
  204. package/dist/chunks/chunk.P22LQI5J.js.map +0 -7
  205. package/dist/chunks/chunk.U7ZJ22QM.js +0 -128
  206. package/dist/chunks/chunk.U7ZJ22QM.js.map +0 -7
  207. /package/dist/chunks/{chunk.5OIEI73E.js.map → chunk.4XAK6MOQ.js.map} +0 -0
  208. /package/dist/chunks/{chunk.4SJKXOCV.js.map → chunk.HPTHXM7Q.js.map} +0 -0
  209. /package/dist/chunks/{chunk.5ZMQBOV3.js.map → chunk.IV4DT254.js.map} +0 -0
  210. /package/dist/chunks/{chunk.B7XEALID.js.map → chunk.KZT2HFEV.js.map} +0 -0
  211. /package/dist/chunks/{chunk.WDCAHRYG.js.map → chunk.P2LNG2PZ.js.map} +0 -0
  212. /package/dist/chunks/{chunk.WTCUSH7V.js.map → chunk.Z3RZUTQU.js.map} +0 -0
@@ -0,0 +1,351 @@
1
+ import {
2
+ radio_group_styles_default
3
+ } from "./chunk.4I6M5V6O.js";
4
+ import {
5
+ HasSlotController
6
+ } from "./chunk.XGXFE6IF.js";
7
+ import {
8
+ FormControlController,
9
+ customErrorValidityState,
10
+ validValidityState,
11
+ valueMissingValidityState
12
+ } from "./chunk.P2LNG2PZ.js";
13
+ import {
14
+ watch
15
+ } from "./chunk.VZ7S7YYN.js";
16
+ import {
17
+ SynButtonGroup
18
+ } from "./chunk.7CU3ERWO.js";
19
+ import {
20
+ SynergyElement
21
+ } from "./chunk.6I3HJMNQ.js";
22
+ import {
23
+ __decorateClass
24
+ } from "./chunk.DJOAQ4JU.js";
25
+
26
+ // src/components/radio-group/radio-group.component.ts
27
+ import { classMap } from "lit/directives/class-map.js";
28
+ import { html } from "lit";
29
+ import { property, query, state } from "lit/decorators.js";
30
+ var SynRadioGroup = class extends SynergyElement {
31
+ constructor() {
32
+ super(...arguments);
33
+ this.formControlController = new FormControlController(this);
34
+ this.hasSlotController = new HasSlotController(this, "help-text", "label");
35
+ this.customValidityMessage = "";
36
+ this.hasButtonGroup = false;
37
+ this.errorMessage = "";
38
+ this.defaultValue = "";
39
+ this.label = "";
40
+ this.helpText = "";
41
+ this.name = "option";
42
+ this.value = "";
43
+ this.size = "medium";
44
+ this.form = "";
45
+ this.required = false;
46
+ }
47
+ /** Gets the validity state object */
48
+ get validity() {
49
+ const isRequiredAndEmpty = this.required && !this.value;
50
+ const hasCustomValidityMessage = this.customValidityMessage !== "";
51
+ if (hasCustomValidityMessage) {
52
+ return customErrorValidityState;
53
+ } else if (isRequiredAndEmpty) {
54
+ return valueMissingValidityState;
55
+ }
56
+ return validValidityState;
57
+ }
58
+ /** Gets the validation message */
59
+ get validationMessage() {
60
+ const isRequiredAndEmpty = this.required && !this.value;
61
+ const hasCustomValidityMessage = this.customValidityMessage !== "";
62
+ if (hasCustomValidityMessage) {
63
+ return this.customValidityMessage;
64
+ } else if (isRequiredAndEmpty) {
65
+ return this.validationInput.validationMessage;
66
+ }
67
+ return "";
68
+ }
69
+ connectedCallback() {
70
+ super.connectedCallback();
71
+ this.defaultValue = this.value;
72
+ }
73
+ firstUpdated() {
74
+ this.formControlController.updateValidity();
75
+ }
76
+ getAllRadios() {
77
+ return [...this.querySelectorAll("syn-radio, syn-radio-button")];
78
+ }
79
+ handleRadioClick(event) {
80
+ const target = event.target.closest("syn-radio, syn-radio-button");
81
+ const radios = this.getAllRadios();
82
+ const oldValue = this.value;
83
+ if (target.disabled) {
84
+ return;
85
+ }
86
+ this.value = target.value;
87
+ radios.forEach((radio) => radio.checked = radio === target);
88
+ if (this.value !== oldValue) {
89
+ this.emit("syn-change");
90
+ this.emit("syn-input");
91
+ }
92
+ }
93
+ handleKeyDown(event) {
94
+ var _a;
95
+ if (!["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", " "].includes(event.key)) {
96
+ return;
97
+ }
98
+ const radios = this.getAllRadios().filter((radio) => !radio.disabled);
99
+ const checkedRadio = (_a = radios.find((radio) => radio.checked)) != null ? _a : radios[0];
100
+ const incr = event.key === " " ? 0 : ["ArrowUp", "ArrowLeft"].includes(event.key) ? -1 : 1;
101
+ const oldValue = this.value;
102
+ let index = radios.indexOf(checkedRadio) + incr;
103
+ if (index < 0) {
104
+ index = radios.length - 1;
105
+ }
106
+ if (index > radios.length - 1) {
107
+ index = 0;
108
+ }
109
+ this.getAllRadios().forEach((radio) => {
110
+ radio.checked = false;
111
+ if (!this.hasButtonGroup) {
112
+ radio.tabIndex = -1;
113
+ }
114
+ });
115
+ this.value = radios[index].value;
116
+ radios[index].checked = true;
117
+ if (!this.hasButtonGroup) {
118
+ radios[index].tabIndex = 0;
119
+ radios[index].focus();
120
+ } else {
121
+ radios[index].shadowRoot.querySelector("button").focus();
122
+ }
123
+ if (this.value !== oldValue) {
124
+ this.emit("syn-change");
125
+ this.emit("syn-input");
126
+ }
127
+ event.preventDefault();
128
+ }
129
+ handleLabelClick() {
130
+ const radios = this.getAllRadios();
131
+ const checked = radios.find((radio) => radio.checked);
132
+ const radioToFocus = checked || radios[0];
133
+ if (radioToFocus) {
134
+ radioToFocus.focus();
135
+ }
136
+ }
137
+ handleInvalid(event) {
138
+ this.formControlController.setValidity(false);
139
+ this.formControlController.emitInvalidEvent(event);
140
+ }
141
+ async syncRadioElements() {
142
+ var _a, _b;
143
+ const radios = this.getAllRadios();
144
+ await Promise.all(
145
+ // Sync the checked state and size
146
+ radios.map(async (radio) => {
147
+ await radio.updateComplete;
148
+ radio.checked = radio.value === this.value;
149
+ radio.size = this.size;
150
+ })
151
+ );
152
+ this.hasButtonGroup = radios.some((radio) => radio.tagName.toLowerCase() === "syn-radio-button");
153
+ if (!radios.some((radio) => radio.checked)) {
154
+ if (this.hasButtonGroup) {
155
+ const buttonRadio = (_a = radios[0].shadowRoot) == null ? void 0 : _a.querySelector("button");
156
+ if (buttonRadio) {
157
+ buttonRadio.tabIndex = 0;
158
+ }
159
+ } else {
160
+ radios[0].tabIndex = 0;
161
+ }
162
+ }
163
+ if (this.hasButtonGroup) {
164
+ const buttonGroup = (_b = this.shadowRoot) == null ? void 0 : _b.querySelector("syn-button-group");
165
+ if (buttonGroup) {
166
+ buttonGroup.disableRole = true;
167
+ }
168
+ }
169
+ }
170
+ syncRadios() {
171
+ if (customElements.get("syn-radio") && customElements.get("syn-radio-button")) {
172
+ this.syncRadioElements();
173
+ return;
174
+ }
175
+ if (customElements.get("syn-radio")) {
176
+ this.syncRadioElements();
177
+ } else {
178
+ customElements.whenDefined("syn-radio").then(() => this.syncRadios());
179
+ }
180
+ if (customElements.get("syn-radio-button")) {
181
+ this.syncRadioElements();
182
+ } else {
183
+ customElements.whenDefined("syn-radio-button").then(() => this.syncRadios());
184
+ }
185
+ }
186
+ updateCheckedRadio() {
187
+ const radios = this.getAllRadios();
188
+ radios.forEach((radio) => radio.checked = radio.value === this.value);
189
+ this.formControlController.setValidity(this.validity.valid);
190
+ }
191
+ handleSizeChange() {
192
+ this.syncRadios();
193
+ }
194
+ handleValueChange() {
195
+ if (this.hasUpdated) {
196
+ this.updateCheckedRadio();
197
+ }
198
+ }
199
+ /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
200
+ checkValidity() {
201
+ const isRequiredAndEmpty = this.required && !this.value;
202
+ const hasCustomValidityMessage = this.customValidityMessage !== "";
203
+ if (isRequiredAndEmpty || hasCustomValidityMessage) {
204
+ this.formControlController.emitInvalidEvent();
205
+ return false;
206
+ }
207
+ return true;
208
+ }
209
+ /** Gets the associated form, if one exists. */
210
+ getForm() {
211
+ return this.formControlController.getForm();
212
+ }
213
+ /** Checks for validity and shows the browser's validation message if the control is invalid. */
214
+ reportValidity() {
215
+ const isValid = this.validity.valid;
216
+ this.errorMessage = this.customValidityMessage || isValid ? "" : this.validationInput.validationMessage;
217
+ this.formControlController.setValidity(isValid);
218
+ this.validationInput.hidden = true;
219
+ clearTimeout(this.validationTimeout);
220
+ if (!isValid) {
221
+ this.validationInput.hidden = false;
222
+ this.validationInput.reportValidity();
223
+ this.validationTimeout = setTimeout(() => this.validationInput.hidden = true, 1e4);
224
+ }
225
+ return isValid;
226
+ }
227
+ /** Sets a custom validation message. Pass an empty string to restore validity. */
228
+ setCustomValidity(message = "") {
229
+ this.customValidityMessage = message;
230
+ this.errorMessage = message;
231
+ this.validationInput.setCustomValidity(message);
232
+ this.formControlController.updateValidity();
233
+ }
234
+ render() {
235
+ const hasLabelSlot = this.hasSlotController.test("label");
236
+ const hasHelpTextSlot = this.hasSlotController.test("help-text");
237
+ const hasLabel = this.label ? true : !!hasLabelSlot;
238
+ const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
239
+ const defaultSlot = html`
240
+ <slot @slotchange=${this.syncRadios} @click=${this.handleRadioClick} @keydown=${this.handleKeyDown}></slot>
241
+ `;
242
+ return html`
243
+ <fieldset
244
+ part="form-control"
245
+ class=${classMap({
246
+ "form-control": true,
247
+ "form-control--small": this.size === "small",
248
+ "form-control--medium": this.size === "medium",
249
+ "form-control--large": this.size === "large",
250
+ "form-control--radio-group": true,
251
+ "form-control--has-label": hasLabel,
252
+ "form-control--has-help-text": hasHelpText
253
+ })}
254
+ role="radiogroup"
255
+ aria-labelledby="label"
256
+ aria-describedby="help-text"
257
+ aria-errormessage="error-message"
258
+ >
259
+ <label
260
+ part="form-control-label"
261
+ id="label"
262
+ class="form-control__label"
263
+ aria-hidden=${hasLabel ? "false" : "true"}
264
+ @click=${this.handleLabelClick}
265
+ >
266
+ <slot name="label">${this.label}</slot>
267
+ </label>
268
+
269
+ <div part="form-control-input" class="form-control-input">
270
+ <div class="visually-hidden">
271
+ <div id="error-message" aria-live="assertive">${this.errorMessage}</div>
272
+ <label class="radio-group__validation">
273
+ <input
274
+ type="text"
275
+ class="radio-group__validation-input"
276
+ ?required=${this.required}
277
+ tabindex="-1"
278
+ hidden
279
+ @invalid=${this.handleInvalid}
280
+ />
281
+ </label>
282
+ </div>
283
+
284
+ ${this.hasButtonGroup ? html`
285
+ <syn-button-group part="button-group" exportparts="base:button-group__base" role="presentation">
286
+ ${defaultSlot}
287
+ </syn-button-group>
288
+ ` : defaultSlot}
289
+ </div>
290
+
291
+ <div
292
+ part="form-control-help-text"
293
+ id="help-text"
294
+ class="form-control__help-text"
295
+ aria-hidden=${hasHelpText ? "false" : "true"}
296
+ >
297
+ <slot name="help-text">${this.helpText}</slot>
298
+ </div>
299
+ </fieldset>
300
+ `;
301
+ }
302
+ };
303
+ SynRadioGroup.styles = radio_group_styles_default;
304
+ SynRadioGroup.dependencies = { "syn-button-group": SynButtonGroup };
305
+ __decorateClass([
306
+ query("slot:not([name])")
307
+ ], SynRadioGroup.prototype, "defaultSlot", 2);
308
+ __decorateClass([
309
+ query(".radio-group__validation-input")
310
+ ], SynRadioGroup.prototype, "validationInput", 2);
311
+ __decorateClass([
312
+ state()
313
+ ], SynRadioGroup.prototype, "hasButtonGroup", 2);
314
+ __decorateClass([
315
+ state()
316
+ ], SynRadioGroup.prototype, "errorMessage", 2);
317
+ __decorateClass([
318
+ state()
319
+ ], SynRadioGroup.prototype, "defaultValue", 2);
320
+ __decorateClass([
321
+ property()
322
+ ], SynRadioGroup.prototype, "label", 2);
323
+ __decorateClass([
324
+ property({ attribute: "help-text" })
325
+ ], SynRadioGroup.prototype, "helpText", 2);
326
+ __decorateClass([
327
+ property()
328
+ ], SynRadioGroup.prototype, "name", 2);
329
+ __decorateClass([
330
+ property({ reflect: true })
331
+ ], SynRadioGroup.prototype, "value", 2);
332
+ __decorateClass([
333
+ property({ reflect: true })
334
+ ], SynRadioGroup.prototype, "size", 2);
335
+ __decorateClass([
336
+ property({ reflect: true })
337
+ ], SynRadioGroup.prototype, "form", 2);
338
+ __decorateClass([
339
+ property({ type: Boolean, reflect: true })
340
+ ], SynRadioGroup.prototype, "required", 2);
341
+ __decorateClass([
342
+ watch("size", { waitUntilFirstUpdate: true })
343
+ ], SynRadioGroup.prototype, "handleSizeChange", 1);
344
+ __decorateClass([
345
+ watch("value")
346
+ ], SynRadioGroup.prototype, "handleValueChange", 1);
347
+
348
+ export {
349
+ SynRadioGroup
350
+ };
351
+ //# sourceMappingURL=chunk.ZJHB2ZWN.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/components/radio-group/radio-group.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 {\n customErrorValidityState,\n FormControlController,\n validValidityState,\n valueMissingValidityState\n} from '../../internal/form.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport { html } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { watch } from '../../internal/watch.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport SynButtonGroup from '../button-group/button-group.component.js';\nimport styles from './radio-group.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport type { SynergyFormControl } from '../../internal/synergy-element.js';\nimport type SynRadio from '../radio/radio.js';\nimport type SynRadioButton from '../radio-button/radio-button.js';\n\n/**\n * @summary Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.\n * @documentation https://synergy.style/components/radio-group\n * @status stable\n * @since 2.0\n *\n * @dependency syn-button-group\n *\n * @slot - The default slot where `<syn-radio>` or `<syn-radio-button>` elements are placed.\n * @slot label - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label`\n * attribute.\n *\n * @event syn-change - Emitted when the radio group's selected value changes.\n * @event syn-input - Emitted when the radio group receives user input.\n * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart form-control - The form control that wraps the label, input, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-input - The input's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart button-group - The button group that wraps radio buttons.\n * @csspart button-group__base - The button group's `base` part.\n */\nexport default class SynRadioGroup extends SynergyElement implements SynergyFormControl {\n static styles: CSSResultGroup = styles;\n static dependencies = { 'syn-button-group': SynButtonGroup };\n\n protected readonly formControlController = new FormControlController(this);\n private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');\n private customValidityMessage = '';\n private validationTimeout: number;\n\n @query('slot:not([name])') defaultSlot: HTMLSlotElement;\n @query('.radio-group__validation-input') validationInput: HTMLInputElement;\n\n @state() private hasButtonGroup = false;\n @state() private errorMessage = '';\n @state() defaultValue = '';\n\n /**\n * The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\n * instead.\n */\n @property() label = '';\n\n /** The radio groups's help text. If you need to display HTML, use the `help-text` slot instead. */\n @property({ attribute: 'help-text' }) helpText = '';\n\n /** The name of the radio group, submitted as a name/value pair with form data. */\n @property() name = 'option';\n\n /** The current value of the radio group, submitted as a name/value pair with form data. */\n @property({ reflect: true }) value = '';\n\n /** The radio group's size. This size will be applied to all child radios and radio buttons. */\n @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\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 /** Ensures a child radio is checked before allowing the containing form to submit. */\n @property({ type: Boolean, reflect: true }) required = false;\n\n /** Gets the validity state object */\n get validity() {\n const isRequiredAndEmpty = this.required && !this.value;\n const hasCustomValidityMessage = this.customValidityMessage !== '';\n\n if (hasCustomValidityMessage) {\n return customErrorValidityState;\n } else if (isRequiredAndEmpty) {\n return valueMissingValidityState;\n }\n\n return validValidityState;\n }\n\n /** Gets the validation message */\n get validationMessage() {\n const isRequiredAndEmpty = this.required && !this.value;\n const hasCustomValidityMessage = this.customValidityMessage !== '';\n\n if (hasCustomValidityMessage) {\n return this.customValidityMessage;\n } else if (isRequiredAndEmpty) {\n return this.validationInput.validationMessage;\n }\n\n return '';\n }\n\n connectedCallback() {\n super.connectedCallback();\n this.defaultValue = this.value;\n }\n\n firstUpdated() {\n this.formControlController.updateValidity();\n }\n\n private getAllRadios() {\n return [...this.querySelectorAll<SynRadio | SynRadioButton>('syn-radio, syn-radio-button')];\n }\n\n private handleRadioClick(event: MouseEvent) {\n const target = (event.target as HTMLElement).closest<SynRadio | SynRadioButton>('syn-radio, syn-radio-button')!;\n const radios = this.getAllRadios();\n const oldValue = this.value;\n\n if (target.disabled) {\n return;\n }\n\n this.value = target.value;\n radios.forEach(radio => (radio.checked = radio === target));\n\n if (this.value !== oldValue) {\n this.emit('syn-change');\n this.emit('syn-input');\n }\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', ' '].includes(event.key)) {\n return;\n }\n\n const radios = this.getAllRadios().filter(radio => !radio.disabled);\n const checkedRadio = radios.find(radio => radio.checked) ?? radios[0];\n const incr = event.key === ' ' ? 0 : ['ArrowUp', 'ArrowLeft'].includes(event.key) ? -1 : 1;\n const oldValue = this.value;\n let index = radios.indexOf(checkedRadio) + incr;\n\n if (index < 0) {\n index = radios.length - 1;\n }\n\n if (index > radios.length - 1) {\n index = 0;\n }\n\n this.getAllRadios().forEach(radio => {\n radio.checked = false;\n\n if (!this.hasButtonGroup) {\n radio.tabIndex = -1;\n }\n });\n\n this.value = radios[index].value;\n radios[index].checked = true;\n\n if (!this.hasButtonGroup) {\n radios[index].tabIndex = 0;\n radios[index].focus();\n } else {\n radios[index].shadowRoot!.querySelector('button')!.focus();\n }\n\n if (this.value !== oldValue) {\n this.emit('syn-change');\n this.emit('syn-input');\n }\n\n event.preventDefault();\n }\n\n private handleLabelClick() {\n const radios = this.getAllRadios();\n const checked = radios.find(radio => radio.checked);\n const radioToFocus = checked || radios[0];\n\n // Move focus to the checked radio (or the first one if none are checked) when clicking the label\n if (radioToFocus) {\n radioToFocus.focus();\n }\n }\n\n private handleInvalid(event: Event) {\n this.formControlController.setValidity(false);\n this.formControlController.emitInvalidEvent(event);\n }\n\n private async syncRadioElements() {\n const radios = this.getAllRadios();\n\n await Promise.all(\n // Sync the checked state and size\n radios.map(async radio => {\n await radio.updateComplete;\n radio.checked = radio.value === this.value;\n radio.size = this.size;\n })\n );\n\n this.hasButtonGroup = radios.some(radio => radio.tagName.toLowerCase() === 'syn-radio-button');\n\n if (!radios.some(radio => radio.checked)) {\n if (this.hasButtonGroup) {\n const buttonRadio = radios[0].shadowRoot?.querySelector('button');\n\n if (buttonRadio) {\n buttonRadio.tabIndex = 0;\n }\n } else {\n radios[0].tabIndex = 0;\n }\n }\n\n if (this.hasButtonGroup) {\n const buttonGroup = this.shadowRoot?.querySelector('syn-button-group');\n\n if (buttonGroup) {\n buttonGroup.disableRole = true;\n }\n }\n }\n\n private syncRadios() {\n if (customElements.get('syn-radio') && customElements.get('syn-radio-button')) {\n this.syncRadioElements();\n return;\n }\n\n if (customElements.get('syn-radio')) {\n this.syncRadioElements();\n } else {\n customElements.whenDefined('syn-radio').then(() => this.syncRadios());\n }\n\n if (customElements.get('syn-radio-button')) {\n this.syncRadioElements();\n } else {\n // Rerun this handler when <syn-radio> or <syn-radio-button> is registered\n customElements.whenDefined('syn-radio-button').then(() => this.syncRadios());\n }\n }\n\n private updateCheckedRadio() {\n const radios = this.getAllRadios();\n radios.forEach(radio => (radio.checked = radio.value === this.value));\n this.formControlController.setValidity(this.validity.valid);\n }\n\n @watch('size', { waitUntilFirstUpdate: true })\n handleSizeChange() {\n this.syncRadios();\n }\n\n @watch('value')\n handleValueChange() {\n if (this.hasUpdated) {\n this.updateCheckedRadio();\n }\n }\n\n /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */\n checkValidity() {\n const isRequiredAndEmpty = this.required && !this.value;\n const hasCustomValidityMessage = this.customValidityMessage !== '';\n\n if (isRequiredAndEmpty || hasCustomValidityMessage) {\n this.formControlController.emitInvalidEvent();\n return false;\n }\n\n return true;\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(): boolean {\n const isValid = this.validity.valid;\n\n this.errorMessage = this.customValidityMessage || isValid ? '' : this.validationInput.validationMessage;\n this.formControlController.setValidity(isValid);\n this.validationInput.hidden = true;\n clearTimeout(this.validationTimeout);\n\n if (!isValid) {\n // Show the browser's constraint validation message\n this.validationInput.hidden = false;\n this.validationInput.reportValidity();\n this.validationTimeout = setTimeout(() => (this.validationInput.hidden = true), 10000) as unknown as number;\n }\n\n return isValid;\n }\n\n /** Sets a custom validation message. Pass an empty string to restore validity. */\n setCustomValidity(message = '') {\n this.customValidityMessage = message;\n this.errorMessage = message;\n this.validationInput.setCustomValidity(message);\n this.formControlController.updateValidity();\n }\n\n render() {\n const hasLabelSlot = this.hasSlotController.test('label');\n const hasHelpTextSlot = this.hasSlotController.test('help-text');\n const hasLabel = this.label ? true : !!hasLabelSlot;\n const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;\n const defaultSlot = html`\n <slot @slotchange=${this.syncRadios} @click=${this.handleRadioClick} @keydown=${this.handleKeyDown}></slot>\n `;\n\n return html`\n <fieldset\n part=\"form-control\"\n class=${classMap({\n 'form-control': true,\n 'form-control--small': this.size === 'small',\n 'form-control--medium': this.size === 'medium',\n 'form-control--large': this.size === 'large',\n 'form-control--radio-group': true,\n 'form-control--has-label': hasLabel,\n 'form-control--has-help-text': hasHelpText\n })}\n role=\"radiogroup\"\n aria-labelledby=\"label\"\n aria-describedby=\"help-text\"\n aria-errormessage=\"error-message\"\n >\n <label\n part=\"form-control-label\"\n id=\"label\"\n class=\"form-control__label\"\n aria-hidden=${hasLabel ? 'false' : 'true'}\n @click=${this.handleLabelClick}\n >\n <slot name=\"label\">${this.label}</slot>\n </label>\n\n <div part=\"form-control-input\" class=\"form-control-input\">\n <div class=\"visually-hidden\">\n <div id=\"error-message\" aria-live=\"assertive\">${this.errorMessage}</div>\n <label class=\"radio-group__validation\">\n <input\n type=\"text\"\n class=\"radio-group__validation-input\"\n ?required=${this.required}\n tabindex=\"-1\"\n hidden\n @invalid=${this.handleInvalid}\n />\n </label>\n </div>\n\n ${this.hasButtonGroup\n ? html`\n <syn-button-group part=\"button-group\" exportparts=\"base:button-group__base\" role=\"presentation\">\n ${defaultSlot}\n </syn-button-group>\n `\n : defaultSlot}\n </div>\n\n <div\n part=\"form-control-help-text\"\n id=\"help-text\"\n class=\"form-control__help-text\"\n aria-hidden=${hasHelpText ? 'false' : 'true'}\n >\n <slot name=\"help-text\">${this.helpText}</slot>\n </div>\n </fieldset>\n `;\n }\n}\n"],
5
+ "mappings": "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",
6
+ "names": []
7
+ }
@@ -0,0 +1,12 @@
1
+ import {
2
+ SynRadioGroup
3
+ } from "./chunk.ZJHB2ZWN.js";
4
+
5
+ // src/components/radio-group/radio-group.ts
6
+ var radio_group_default = SynRadioGroup;
7
+ SynRadioGroup.define("syn-radio-group");
8
+
9
+ export {
10
+ radio_group_default
11
+ };
12
+ //# sourceMappingURL=chunk.ZSHYGTD6.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/components/radio-group/radio-group.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 SynRadioGroup from './radio-group.component.js';\n\nexport * from './radio-group.component.js';\nexport default SynRadioGroup;\n\nSynRadioGroup.define('syn-radio-group');\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'syn-radio-group': SynRadioGroup;\n }\n}\n"],
5
+ "mappings": ";;;;;AASA,IAAO,sBAAQ;AAEf,cAAc,OAAO,iBAAiB;",
6
+ "names": []
7
+ }
@@ -41,7 +41,7 @@ export default class SynButton extends SynergyElement implements SynergyFormCont
41
41
  invalid: boolean;
42
42
  title: string;
43
43
  /** The button's theme variant. */
44
- variant: 'default' | 'outline' | 'text';
44
+ variant: 'filled' | 'outline' | 'text';
45
45
  /** The button's size. */
46
46
  size: 'small' | 'medium' | 'large';
47
47
  /** Draws the button with a caret. Used to indicate that the button triggers a dropdown menu or similar behavior. */
@@ -1,21 +1,23 @@
1
1
  import {
2
2
  SynButton
3
- } from "../../chunks/chunk.G3PDKNFK.js";
4
- import "../../chunks/chunk.5ZMQBOV3.js";
3
+ } from "../../chunks/chunk.EMVM7VFZ.js";
4
+ import "../../chunks/chunk.IV4DT254.js";
5
5
  import "../../chunks/chunk.N2I6HVX3.js";
6
- import "../../chunks/chunk.XGXFE6IF.js";
7
6
  import "../../chunks/chunk.R6VNLE6N.js";
8
7
  import "../../chunks/chunk.A3SKDWCT.js";
9
- import "../../chunks/chunk.WDCAHRYG.js";
10
- import "../../chunks/chunk.P22LQI5J.js";
11
- import "../../chunks/chunk.DREO4ZTN.js";
12
- import "../../chunks/chunk.DI6S4YNU.js";
13
- import "../../chunks/chunk.53ZDJY4Q.js";
14
- import "../../chunks/chunk.BREU4ILT.js";
15
- import "../../chunks/chunk.5OIEI73E.js";
8
+ import "../../chunks/chunk.XGXFE6IF.js";
9
+ import "../../chunks/chunk.P2LNG2PZ.js";
10
+ import "../../chunks/chunk.J36DIOVR.js";
11
+ import "../../chunks/chunk.VZ7S7YYN.js";
12
+ import "../../chunks/chunk.4XAK6MOQ.js";
16
13
  import "../../chunks/chunk.6C4JXZZN.js";
17
- import "../../chunks/chunk.U7ZJ22QM.js";
14
+ import "../../chunks/chunk.GNAJOKCJ.js";
15
+ import "../../chunks/chunk.RSONAU45.js";
16
+ import "../../chunks/chunk.PJO6TM3T.js";
18
17
  import "../../chunks/chunk.C7624ITA.js";
18
+ import "../../chunks/chunk.YTS5TRJZ.js";
19
+ import "../../chunks/chunk.FVSP4LXX.js";
20
+ import "../../chunks/chunk.6I3HJMNQ.js";
19
21
  import "../../chunks/chunk.O7USYXBT.js";
20
22
  import "../../chunks/chunk.DJOAQ4JU.js";
21
23
  export {
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  button_custom_styles_default
3
- } from "../../chunks/chunk.DREO4ZTN.js";
3
+ } from "../../chunks/chunk.FVSP4LXX.js";
4
4
  import "../../chunks/chunk.DJOAQ4JU.js";
5
5
  export {
6
6
  button_custom_styles_default as default
@@ -1,22 +1,24 @@
1
1
  import {
2
2
  button_default
3
- } from "../../chunks/chunk.4SJKXOCV.js";
4
- import "../../chunks/chunk.G3PDKNFK.js";
5
- import "../../chunks/chunk.5ZMQBOV3.js";
3
+ } from "../../chunks/chunk.HPTHXM7Q.js";
4
+ import "../../chunks/chunk.EMVM7VFZ.js";
5
+ import "../../chunks/chunk.IV4DT254.js";
6
6
  import "../../chunks/chunk.N2I6HVX3.js";
7
- import "../../chunks/chunk.XGXFE6IF.js";
8
7
  import "../../chunks/chunk.R6VNLE6N.js";
9
8
  import "../../chunks/chunk.A3SKDWCT.js";
10
- import "../../chunks/chunk.WDCAHRYG.js";
11
- import "../../chunks/chunk.P22LQI5J.js";
12
- import "../../chunks/chunk.DREO4ZTN.js";
13
- import "../../chunks/chunk.DI6S4YNU.js";
14
- import "../../chunks/chunk.53ZDJY4Q.js";
15
- import "../../chunks/chunk.BREU4ILT.js";
16
- import "../../chunks/chunk.5OIEI73E.js";
9
+ import "../../chunks/chunk.XGXFE6IF.js";
10
+ import "../../chunks/chunk.P2LNG2PZ.js";
11
+ import "../../chunks/chunk.J36DIOVR.js";
12
+ import "../../chunks/chunk.VZ7S7YYN.js";
13
+ import "../../chunks/chunk.4XAK6MOQ.js";
17
14
  import "../../chunks/chunk.6C4JXZZN.js";
18
- import "../../chunks/chunk.U7ZJ22QM.js";
15
+ import "../../chunks/chunk.GNAJOKCJ.js";
16
+ import "../../chunks/chunk.RSONAU45.js";
17
+ import "../../chunks/chunk.PJO6TM3T.js";
19
18
  import "../../chunks/chunk.C7624ITA.js";
19
+ import "../../chunks/chunk.YTS5TRJZ.js";
20
+ import "../../chunks/chunk.FVSP4LXX.js";
21
+ import "../../chunks/chunk.6I3HJMNQ.js";
20
22
  import "../../chunks/chunk.O7USYXBT.js";
21
23
  import "../../chunks/chunk.DJOAQ4JU.js";
22
24
  export {
@@ -1,7 +1,7 @@
1
1
  import {
2
2
  button_styles_default
3
- } from "../../chunks/chunk.P22LQI5J.js";
4
- import "../../chunks/chunk.DREO4ZTN.js";
3
+ } from "../../chunks/chunk.YTS5TRJZ.js";
4
+ import "../../chunks/chunk.FVSP4LXX.js";
5
5
  import "../../chunks/chunk.O7USYXBT.js";
6
6
  import "../../chunks/chunk.DJOAQ4JU.js";
7
7
  export {
@@ -0,0 +1,28 @@
1
+ import SynergyElement from '../../internal/synergy-element.js';
2
+ import type { CSSResultGroup } from 'lit';
3
+ /**
4
+ * @summary Button groups can be used to group related buttons into sections.
5
+ * @documentation https://synergy.style/components/button-group
6
+ * @status stable
7
+ * @since 2.0
8
+ *
9
+ * @slot - One or more `<syn-button>` elements to display in the button group.
10
+ *
11
+ * @csspart base - The component's base wrapper.
12
+ */
13
+ export default class SynButtonGroup extends SynergyElement {
14
+ static styles: CSSResultGroup;
15
+ defaultSlot: HTMLSlotElement;
16
+ disableRole: boolean;
17
+ /**
18
+ * A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive
19
+ * devices when interacting with the control and is strongly recommended.
20
+ */
21
+ label: string;
22
+ private handleFocus;
23
+ private handleBlur;
24
+ private handleMouseOver;
25
+ private handleMouseOut;
26
+ private handleSlotChange;
27
+ render(): import("lit").TemplateResult<1>;
28
+ }
@@ -0,0 +1,11 @@
1
+ import {
2
+ SynButtonGroup
3
+ } from "../../chunks/chunk.7CU3ERWO.js";
4
+ import "../../chunks/chunk.6I3HJMNQ.js";
5
+ import "../../chunks/chunk.4ZURABYO.js";
6
+ import "../../chunks/chunk.O7USYXBT.js";
7
+ import "../../chunks/chunk.DJOAQ4JU.js";
8
+ export {
9
+ SynButtonGroup as default
10
+ };
11
+ //# sourceMappingURL=button-group.component.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": [],
4
+ "sourcesContent": [],
5
+ "mappings": "",
6
+ "names": []
7
+ }
@@ -0,0 +1,8 @@
1
+ import SynButtonGroup from './button-group.component.js';
2
+ export * from './button-group.component.js';
3
+ export default SynButtonGroup;
4
+ declare global {
5
+ interface HTMLElementTagNameMap {
6
+ 'syn-button-group': SynButtonGroup;
7
+ }
8
+ }
@@ -0,0 +1,12 @@
1
+ import {
2
+ button_group_default
3
+ } from "../../chunks/chunk.TPRFDNQ5.js";
4
+ import "../../chunks/chunk.7CU3ERWO.js";
5
+ import "../../chunks/chunk.6I3HJMNQ.js";
6
+ import "../../chunks/chunk.4ZURABYO.js";
7
+ import "../../chunks/chunk.O7USYXBT.js";
8
+ import "../../chunks/chunk.DJOAQ4JU.js";
9
+ export {
10
+ button_group_default as default
11
+ };
12
+ //# sourceMappingURL=button-group.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": [],
4
+ "sourcesContent": [],
5
+ "mappings": "",
6
+ "names": []
7
+ }
@@ -0,0 +1,2 @@
1
+ declare const _default: import("lit").CSSResult;
2
+ export default _default;
@@ -0,0 +1,9 @@
1
+ import {
2
+ button_group_styles_default
3
+ } from "../../chunks/chunk.4ZURABYO.js";
4
+ import "../../chunks/chunk.O7USYXBT.js";
5
+ import "../../chunks/chunk.DJOAQ4JU.js";
6
+ export {
7
+ button_group_styles_default as default
8
+ };
9
+ //# sourceMappingURL=button-group.styles.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": [],
4
+ "sourcesContent": [],
5
+ "mappings": "",
6
+ "names": []
7
+ }