@synergy-design-system/components 1.15.0 → 1.16.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 (207) hide show
  1. package/dist/chunks/{chunk.NBHBC5FQ.js → chunk.2URWP5LD.js} +9 -3
  2. package/dist/chunks/chunk.2URWP5LD.js.map +7 -0
  3. package/dist/chunks/{chunk.FHEH5OSL.js → chunk.3EONOQ2P.js} +2 -2
  4. package/dist/chunks/{chunk.5UETQYQR.js → chunk.3M6IVPMZ.js} +4 -4
  5. package/dist/chunks/{chunk.H46CGP6A.js → chunk.4MBMY5UE.js} +2 -2
  6. package/dist/chunks/{chunk.4LD5UMX7.js → chunk.4RMP4EST.js} +2 -2
  7. package/dist/chunks/{chunk.2BEBXBDJ.js → chunk.5I7DR4UT.js} +2 -2
  8. package/dist/chunks/{chunk.O3A57CXO.js → chunk.5OV7FNMN.js} +3 -3
  9. package/dist/chunks/{chunk.3JBPXBYC.js → chunk.6V72DOSV.js} +15 -16
  10. package/dist/chunks/chunk.6V72DOSV.js.map +7 -0
  11. package/dist/chunks/{chunk.GCHIBXQT.js → chunk.7NH6SYGG.js} +20 -16
  12. package/dist/chunks/chunk.7NH6SYGG.js.map +7 -0
  13. package/dist/chunks/{chunk.WCIAL36G.js → chunk.7PYQKCMR.js} +3 -3
  14. package/dist/chunks/{chunk.IUHZVWPW.js → chunk.ABSGP4AA.js} +2 -2
  15. package/dist/chunks/{chunk.4QS5IWYB.js → chunk.AW2HNLNP.js} +1 -9
  16. package/dist/chunks/{chunk.4QS5IWYB.js.map → chunk.AW2HNLNP.js.map} +2 -2
  17. package/dist/chunks/{chunk.V6OK2ECX.js → chunk.BKRTJVKH.js} +2 -2
  18. package/dist/chunks/{chunk.VUROYPEC.js → chunk.BQ3U6CVQ.js} +3 -3
  19. package/dist/chunks/{chunk.SE4NF6AN.js → chunk.CCITL3IY.js} +14 -11
  20. package/dist/chunks/chunk.CCITL3IY.js.map +7 -0
  21. package/dist/chunks/{chunk.GARWLAOJ.js → chunk.CNKXQN5I.js} +4 -4
  22. package/dist/chunks/{chunk.TFWNKCFJ.js → chunk.CXLJMDBV.js} +2 -2
  23. package/dist/chunks/{chunk.OVUVBTHH.js → chunk.D63XRN3X.js} +2 -2
  24. package/dist/chunks/{chunk.TRMXLYYL.js → chunk.E3MWAHV4.js} +2 -2
  25. package/dist/chunks/{chunk.ZMIBKG2N.js → chunk.EHMIJIZ2.js} +2 -2
  26. package/dist/chunks/{chunk.3QNVV7DW.js → chunk.ENAW6YL5.js} +6 -6
  27. package/dist/chunks/{chunk.QJGWS4TQ.js → chunk.EQ2W2Z5B.js} +2 -2
  28. package/dist/chunks/{chunk.KUO3KJOC.js → chunk.GBARDV25.js} +2 -2
  29. package/dist/chunks/{chunk.LNUIMITL.js → chunk.H3GKRGN6.js} +6 -6
  30. package/dist/chunks/{chunk.MMDRQ7JM.js → chunk.HZTZOBNJ.js} +2 -2
  31. package/dist/chunks/{chunk.WHYX7AY4.js → chunk.I3SSNN7J.js} +9 -3
  32. package/dist/chunks/chunk.I3SSNN7J.js.map +7 -0
  33. package/dist/chunks/{chunk.VZEN3JIH.js → chunk.INLTRHSF.js} +2 -2
  34. package/dist/chunks/{chunk.4TWUWTOI.js → chunk.IVHB4EQ6.js} +3 -3
  35. package/dist/chunks/chunk.IVHB4EQ6.js.map +7 -0
  36. package/dist/chunks/{chunk.SBHXUKMY.js → chunk.J3HTR5NX.js} +2 -2
  37. package/dist/chunks/{chunk.RRWSXFQ5.js → chunk.JDBDBGQP.js} +3 -2
  38. package/dist/chunks/{chunk.RRWSXFQ5.js.map → chunk.JDBDBGQP.js.map} +2 -2
  39. package/dist/chunks/{chunk.G7XEHN2F.js → chunk.JJZKPNJZ.js} +2 -2
  40. package/dist/chunks/{chunk.SZCGMXW5.js → chunk.JUJZBRXD.js} +2 -2
  41. package/dist/chunks/chunk.JUJZBRXD.js.map +7 -0
  42. package/dist/chunks/{chunk.ON2HXIFZ.js → chunk.K2H37OYP.js} +6 -6
  43. package/dist/chunks/{chunk.ON2HXIFZ.js.map → chunk.K2H37OYP.js.map} +2 -2
  44. package/dist/chunks/{chunk.BHTLGDWT.js → chunk.K6AHAO25.js} +3 -3
  45. package/dist/chunks/{chunk.FKT4RXN7.js → chunk.KJ7V3TWI.js} +2 -2
  46. package/dist/chunks/{chunk.JL53VHSP.js → chunk.LFNAPJXT.js} +3 -3
  47. package/dist/chunks/{chunk.YNWVXDDQ.js → chunk.LOUVN7OA.js} +3 -3
  48. package/dist/chunks/{chunk.3STW62TA.js → chunk.NIYKFSPR.js} +2 -1
  49. package/dist/chunks/{chunk.3STW62TA.js.map → chunk.NIYKFSPR.js.map} +2 -2
  50. package/dist/chunks/{chunk.KC6TXACE.js → chunk.NLWT6VZN.js} +2 -2
  51. package/dist/chunks/{chunk.JUD3T56D.js → chunk.NOB4TQLJ.js} +2 -2
  52. package/dist/chunks/{chunk.H7APDHTS.js → chunk.O3AC2EVL.js} +3 -3
  53. package/dist/chunks/{chunk.P43W2NFX.js → chunk.OCH36GVS.js} +2 -2
  54. package/dist/chunks/{chunk.T43ZXJKG.js → chunk.OEMIM5RD.js} +3 -3
  55. package/dist/chunks/{chunk.MJYZDU37.js → chunk.ONVWJKVD.js} +3 -3
  56. package/dist/chunks/{chunk.XSVH753L.js → chunk.PCI22DJU.js} +2 -2
  57. package/dist/chunks/{chunk.CHJC6OSN.js → chunk.PGM6WEYY.js} +2 -2
  58. package/dist/chunks/{chunk.SJMMPKWP.js → chunk.Q4CRAGN3.js} +11 -11
  59. package/dist/chunks/{chunk.SJMMPKWP.js.map → chunk.Q4CRAGN3.js.map} +1 -1
  60. package/dist/chunks/{chunk.JCFKRHGM.js → chunk.Q7WVOJG4.js} +2 -2
  61. package/dist/chunks/{chunk.ZIQXX272.js → chunk.QPK7SLOE.js} +2 -2
  62. package/dist/chunks/{chunk.2QYALZBT.js → chunk.RIJKFEYZ.js} +14 -7
  63. package/dist/chunks/chunk.RIJKFEYZ.js.map +7 -0
  64. package/dist/chunks/{chunk.63JWIOGL.js → chunk.SAHA7Z3T.js} +2 -2
  65. package/dist/chunks/{chunk.IJCD3LMC.js → chunk.SHOXPF5L.js} +2 -2
  66. package/dist/chunks/{chunk.VPW6WZNZ.js → chunk.SOAZXMVH.js} +2 -2
  67. package/dist/chunks/{chunk.ADRKUQGR.js → chunk.TAO5QIIQ.js} +2 -1
  68. package/dist/chunks/{chunk.ADRKUQGR.js.map → chunk.TAO5QIIQ.js.map} +2 -2
  69. package/dist/chunks/{chunk.YBPWZ4QI.js → chunk.TUFBQA52.js} +2 -2
  70. package/dist/chunks/{chunk.FYN26TFO.js → chunk.TWZC4LT2.js} +4 -4
  71. package/dist/chunks/{chunk.IYGOMLU7.js → chunk.U2H36O5J.js} +6 -6
  72. package/dist/chunks/{chunk.VDA7H6VI.js → chunk.UHVHULGW.js} +5 -5
  73. package/dist/chunks/{chunk.MCJTXOVV.js → chunk.VCFVQ6KS.js} +2 -2
  74. package/dist/chunks/{chunk.MCJTXOVV.js.map → chunk.VCFVQ6KS.js.map} +1 -1
  75. package/dist/chunks/{chunk.OLUNOSLX.js → chunk.WM7IMLTR.js} +2 -2
  76. package/dist/chunks/{chunk.2LMCM7HQ.js → chunk.WMYFFFHI.js} +2 -2
  77. package/dist/chunks/{chunk.SWPVARPP.js → chunk.WPAPTZLW.js} +2 -2
  78. package/dist/chunks/{chunk.EFV5UWMX.js → chunk.WZWI3VYU.js} +2 -2
  79. package/dist/chunks/{chunk.V3JANQYN.js → chunk.XADGSL34.js} +2 -2
  80. package/dist/chunks/{chunk.WV2VTAP2.js → chunk.ZM72G6GO.js} +3 -3
  81. package/dist/components/badge/badge.component.js +2 -2
  82. package/dist/components/badge/badge.js +3 -3
  83. package/dist/components/button/button.component.js +6 -6
  84. package/dist/components/button/button.js +7 -7
  85. package/dist/components/button/button.styles.js +1 -1
  86. package/dist/components/button-group/button-group.component.js +2 -2
  87. package/dist/components/button-group/button-group.js +3 -3
  88. package/dist/components/checkbox/checkbox.component.js +5 -5
  89. package/dist/components/checkbox/checkbox.js +6 -6
  90. package/dist/components/checkbox/checkbox.styles.js +1 -1
  91. package/dist/components/divider/divider.component.js +2 -2
  92. package/dist/components/divider/divider.js +3 -3
  93. package/dist/components/drawer/drawer.component.js +5 -5
  94. package/dist/components/drawer/drawer.js +6 -6
  95. package/dist/components/dropdown/dropdown.component.d.ts +4 -0
  96. package/dist/components/dropdown/dropdown.component.js +3 -3
  97. package/dist/components/dropdown/dropdown.js +4 -4
  98. package/dist/components/header/header.component.js +4 -4
  99. package/dist/components/header/header.js +5 -5
  100. package/dist/components/icon/icon.component.js +2 -2
  101. package/dist/components/icon/icon.js +3 -3
  102. package/dist/components/icon-button/icon-button.component.js +3 -3
  103. package/dist/components/icon-button/icon-button.js +4 -4
  104. package/dist/components/input/input.component.js +6 -6
  105. package/dist/components/input/input.js +7 -7
  106. package/dist/components/input/input.styles.js +1 -1
  107. package/dist/components/menu/menu.component.js +2 -2
  108. package/dist/components/menu/menu.js +3 -3
  109. package/dist/components/menu-item/menu-item.component.js +6 -6
  110. package/dist/components/menu-item/menu-item.js +7 -7
  111. package/dist/components/menu-item/submenu-controller.js +1 -1
  112. package/dist/components/menu-label/menu-label.component.js +3 -3
  113. package/dist/components/menu-label/menu-label.js +4 -4
  114. package/dist/components/nav-item/nav-item.component.js +3 -3
  115. package/dist/components/nav-item/nav-item.js +4 -4
  116. package/dist/components/optgroup/optgroup.component.js +3 -3
  117. package/dist/components/optgroup/optgroup.js +4 -4
  118. package/dist/components/option/option.component.js +3 -3
  119. package/dist/components/option/option.js +4 -4
  120. package/dist/components/popup/popup.component.d.ts +1 -0
  121. package/dist/components/popup/popup.component.js +2 -2
  122. package/dist/components/popup/popup.js +3 -3
  123. package/dist/components/prio-nav/prio-nav.component.js +8 -8
  124. package/dist/components/prio-nav/prio-nav.js +9 -9
  125. package/dist/components/radio/radio.component.js +3 -3
  126. package/dist/components/radio/radio.js +4 -4
  127. package/dist/components/radio-button/radio-button.component.js +4 -4
  128. package/dist/components/radio-button/radio-button.js +5 -5
  129. package/dist/components/radio-button/radio-button.styles.js +2 -2
  130. package/dist/components/radio-group/radio-group.component.js +4 -4
  131. package/dist/components/radio-group/radio-group.js +5 -5
  132. package/dist/components/select/select.component.js +8 -8
  133. package/dist/components/select/select.js +9 -9
  134. package/dist/components/side-nav/side-nav.component.js +7 -7
  135. package/dist/components/side-nav/side-nav.js +8 -8
  136. package/dist/components/spinner/spinner.component.js +2 -2
  137. package/dist/components/switch/switch.component.js +4 -4
  138. package/dist/components/switch/switch.js +5 -5
  139. package/dist/components/switch/switch.styles.js +1 -1
  140. package/dist/components/tag/tag.component.js +4 -4
  141. package/dist/components/tag/tag.js +5 -5
  142. package/dist/components/textarea/textarea.component.js +3 -3
  143. package/dist/components/textarea/textarea.js +4 -4
  144. package/dist/custom-elements.json +164 -141
  145. package/dist/synergy.js +65 -65
  146. package/dist/themes/utility.css +2 -1
  147. package/dist/utilities/form.js +2 -2
  148. package/dist/vscode.html-custom-data.json +26 -17
  149. package/package.json +3 -3
  150. package/dist/chunks/chunk.2QYALZBT.js.map +0 -7
  151. package/dist/chunks/chunk.3JBPXBYC.js.map +0 -7
  152. package/dist/chunks/chunk.4TWUWTOI.js.map +0 -7
  153. package/dist/chunks/chunk.GCHIBXQT.js.map +0 -7
  154. package/dist/chunks/chunk.NBHBC5FQ.js.map +0 -7
  155. package/dist/chunks/chunk.SE4NF6AN.js.map +0 -7
  156. package/dist/chunks/chunk.SZCGMXW5.js.map +0 -7
  157. package/dist/chunks/chunk.WHYX7AY4.js.map +0 -7
  158. /package/dist/chunks/{chunk.FHEH5OSL.js.map → chunk.3EONOQ2P.js.map} +0 -0
  159. /package/dist/chunks/{chunk.5UETQYQR.js.map → chunk.3M6IVPMZ.js.map} +0 -0
  160. /package/dist/chunks/{chunk.H46CGP6A.js.map → chunk.4MBMY5UE.js.map} +0 -0
  161. /package/dist/chunks/{chunk.4LD5UMX7.js.map → chunk.4RMP4EST.js.map} +0 -0
  162. /package/dist/chunks/{chunk.2BEBXBDJ.js.map → chunk.5I7DR4UT.js.map} +0 -0
  163. /package/dist/chunks/{chunk.O3A57CXO.js.map → chunk.5OV7FNMN.js.map} +0 -0
  164. /package/dist/chunks/{chunk.WCIAL36G.js.map → chunk.7PYQKCMR.js.map} +0 -0
  165. /package/dist/chunks/{chunk.IUHZVWPW.js.map → chunk.ABSGP4AA.js.map} +0 -0
  166. /package/dist/chunks/{chunk.V6OK2ECX.js.map → chunk.BKRTJVKH.js.map} +0 -0
  167. /package/dist/chunks/{chunk.VUROYPEC.js.map → chunk.BQ3U6CVQ.js.map} +0 -0
  168. /package/dist/chunks/{chunk.GARWLAOJ.js.map → chunk.CNKXQN5I.js.map} +0 -0
  169. /package/dist/chunks/{chunk.TFWNKCFJ.js.map → chunk.CXLJMDBV.js.map} +0 -0
  170. /package/dist/chunks/{chunk.OVUVBTHH.js.map → chunk.D63XRN3X.js.map} +0 -0
  171. /package/dist/chunks/{chunk.TRMXLYYL.js.map → chunk.E3MWAHV4.js.map} +0 -0
  172. /package/dist/chunks/{chunk.ZMIBKG2N.js.map → chunk.EHMIJIZ2.js.map} +0 -0
  173. /package/dist/chunks/{chunk.3QNVV7DW.js.map → chunk.ENAW6YL5.js.map} +0 -0
  174. /package/dist/chunks/{chunk.QJGWS4TQ.js.map → chunk.EQ2W2Z5B.js.map} +0 -0
  175. /package/dist/chunks/{chunk.KUO3KJOC.js.map → chunk.GBARDV25.js.map} +0 -0
  176. /package/dist/chunks/{chunk.LNUIMITL.js.map → chunk.H3GKRGN6.js.map} +0 -0
  177. /package/dist/chunks/{chunk.MMDRQ7JM.js.map → chunk.HZTZOBNJ.js.map} +0 -0
  178. /package/dist/chunks/{chunk.VZEN3JIH.js.map → chunk.INLTRHSF.js.map} +0 -0
  179. /package/dist/chunks/{chunk.SBHXUKMY.js.map → chunk.J3HTR5NX.js.map} +0 -0
  180. /package/dist/chunks/{chunk.G7XEHN2F.js.map → chunk.JJZKPNJZ.js.map} +0 -0
  181. /package/dist/chunks/{chunk.BHTLGDWT.js.map → chunk.K6AHAO25.js.map} +0 -0
  182. /package/dist/chunks/{chunk.FKT4RXN7.js.map → chunk.KJ7V3TWI.js.map} +0 -0
  183. /package/dist/chunks/{chunk.JL53VHSP.js.map → chunk.LFNAPJXT.js.map} +0 -0
  184. /package/dist/chunks/{chunk.YNWVXDDQ.js.map → chunk.LOUVN7OA.js.map} +0 -0
  185. /package/dist/chunks/{chunk.KC6TXACE.js.map → chunk.NLWT6VZN.js.map} +0 -0
  186. /package/dist/chunks/{chunk.JUD3T56D.js.map → chunk.NOB4TQLJ.js.map} +0 -0
  187. /package/dist/chunks/{chunk.H7APDHTS.js.map → chunk.O3AC2EVL.js.map} +0 -0
  188. /package/dist/chunks/{chunk.P43W2NFX.js.map → chunk.OCH36GVS.js.map} +0 -0
  189. /package/dist/chunks/{chunk.T43ZXJKG.js.map → chunk.OEMIM5RD.js.map} +0 -0
  190. /package/dist/chunks/{chunk.MJYZDU37.js.map → chunk.ONVWJKVD.js.map} +0 -0
  191. /package/dist/chunks/{chunk.XSVH753L.js.map → chunk.PCI22DJU.js.map} +0 -0
  192. /package/dist/chunks/{chunk.CHJC6OSN.js.map → chunk.PGM6WEYY.js.map} +0 -0
  193. /package/dist/chunks/{chunk.JCFKRHGM.js.map → chunk.Q7WVOJG4.js.map} +0 -0
  194. /package/dist/chunks/{chunk.ZIQXX272.js.map → chunk.QPK7SLOE.js.map} +0 -0
  195. /package/dist/chunks/{chunk.63JWIOGL.js.map → chunk.SAHA7Z3T.js.map} +0 -0
  196. /package/dist/chunks/{chunk.IJCD3LMC.js.map → chunk.SHOXPF5L.js.map} +0 -0
  197. /package/dist/chunks/{chunk.VPW6WZNZ.js.map → chunk.SOAZXMVH.js.map} +0 -0
  198. /package/dist/chunks/{chunk.YBPWZ4QI.js.map → chunk.TUFBQA52.js.map} +0 -0
  199. /package/dist/chunks/{chunk.FYN26TFO.js.map → chunk.TWZC4LT2.js.map} +0 -0
  200. /package/dist/chunks/{chunk.IYGOMLU7.js.map → chunk.U2H36O5J.js.map} +0 -0
  201. /package/dist/chunks/{chunk.VDA7H6VI.js.map → chunk.UHVHULGW.js.map} +0 -0
  202. /package/dist/chunks/{chunk.OLUNOSLX.js.map → chunk.WM7IMLTR.js.map} +0 -0
  203. /package/dist/chunks/{chunk.2LMCM7HQ.js.map → chunk.WMYFFFHI.js.map} +0 -0
  204. /package/dist/chunks/{chunk.SWPVARPP.js.map → chunk.WPAPTZLW.js.map} +0 -0
  205. /package/dist/chunks/{chunk.EFV5UWMX.js.map → chunk.WZWI3VYU.js.map} +0 -0
  206. /package/dist/chunks/{chunk.V3JANQYN.js.map → chunk.XADGSL34.js.map} +0 -0
  207. /package/dist/chunks/{chunk.WV2VTAP2.js.map → chunk.ZM72G6GO.js.map} +0 -0
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  radio_button_styles_default
3
- } from "./chunk.ZIQXX272.js";
3
+ } from "./chunk.QPK7SLOE.js";
4
4
  import {
5
5
  HasSlotController
6
6
  } from "./chunk.66WXVGAW.js";
@@ -10,7 +10,7 @@ import {
10
10
  import {
11
11
  SynergyElement,
12
12
  component_styles_default
13
- } from "./chunk.MCJTXOVV.js";
13
+ } from "./chunk.VCFVQ6KS.js";
14
14
  import {
15
15
  __decorateClass
16
16
  } from "./chunk.QNDC5KWA.js";
@@ -125,4 +125,4 @@ __decorateClass([
125
125
  export {
126
126
  SynRadioButton
127
127
  };
128
- //# sourceMappingURL=chunk.WCIAL36G.js.map
128
+ //# sourceMappingURL=chunk.7PYQKCMR.js.map
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  SynPopup
3
- } from "./chunk.4TWUWTOI.js";
3
+ } from "./chunk.IVHB4EQ6.js";
4
4
 
5
5
  // src/components/popup/popup.ts
6
6
  var popup_default = SynPopup;
@@ -9,4 +9,4 @@ SynPopup.define("syn-popup");
9
9
  export {
10
10
  popup_default
11
11
  };
12
- //# sourceMappingURL=chunk.IUHZVWPW.js.map
12
+ //# sourceMappingURL=chunk.ABSGP4AA.js.map
@@ -232,10 +232,6 @@ var input_styles_default = css`
232
232
  * Clearable + Password Toggle
233
233
  */
234
234
 
235
- .input__clear:not(.input__clear--visible) {
236
- visibility: hidden;
237
- }
238
-
239
235
  .input__clear,
240
236
  .input__password-toggle {
241
237
  display: inline-flex;
@@ -260,10 +256,6 @@ var input_styles_default = css`
260
256
  outline: none;
261
257
  }
262
258
 
263
- .input--empty .input__clear {
264
- visibility: hidden;
265
- }
266
-
267
259
  /* Don't show the browser's password toggle in Edge */
268
260
  ::-ms-reveal {
269
261
  display: none;
@@ -284,4 +276,4 @@ var input_styles_default = css`
284
276
  export {
285
277
  input_styles_default
286
278
  };
287
- //# sourceMappingURL=chunk.4QS5IWYB.js.map
279
+ //# sourceMappingURL=chunk.AW2HNLNP.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/components/input/input.styles.ts"],
4
- "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n// Removing this comment will prevent it from being managed by it.\n// ---------------------------------------------------------------------\n\n/* eslint-disable */\nimport { css } from 'lit';\n\nexport default css`\n\t/* stylelint-disable */\n :host {\n display: block;\n }\n\n .input {\n flex: 1 1 auto;\n display: inline-flex;\n align-items: stretch;\n justify-content: start;\n position: relative;\n width: 100%;\n font-family: var(--syn-input-font-family);\n font-weight: var(--syn-input-font-weight);\n letter-spacing: var(--syn-input-letter-spacing);\n vertical-align: middle;\n overflow: hidden;\n cursor: text;\n transition:\n var(--syn-transition-fast) color,\n var(--syn-transition-fast) border,\n var(--syn-transition-fast) box-shadow,\n var(--syn-transition-fast) background-color;\n }\n\n /* Standard inputs */\n .input--standard {\n background-color: var(--syn-input-background-color);\n border: solid var(--syn-input-border-width) var(--syn-input-border-color);\n }\n\n .input--standard:hover:not(.input--disabled) {\n background-color: var(--syn-input-background-color-hover);\n border-color: var(--syn-input-border-color-hover);\n }\n\n .input--standard.input--focused:not(.input--disabled) {\n background-color: var(--syn-input-background-color-focus);\n border-color: var(--syn-input-border-color-focus);\n box-shadow: 0 0 0 var(--syn-focus-ring-width) var(--syn-input-focus-ring-color);\n }\n\n .input--standard.input--focused:not(.input--disabled) .input__control {\n color: var(--syn-input-color-focus);\n }\n\n .input--standard.input--disabled {\n background-color: var(--syn-input-background-color-disabled);\n border-color: var(--syn-input-border-color-disabled);\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .input--standard.input--disabled .input__control {\n color: var(--syn-input-color-disabled);\n }\n\n .input--standard.input--disabled .input__control::placeholder {\n color: var(--syn-input-placeholder-color-disabled);\n }\n\n /* Readonly inputs */\n .input--readonly {\n border: none;\n background-color: var(--syn-input-readonly-background-color);\n color: var(--syn-input-color);\n }\n\n .input--readonly:hover:not(.input--disabled) {\n background-color: var(--syn-input-readonly-background-color-hover);\n }\n\n .input--readonly.input--focused:not(.input--disabled) {\n background-color: var(--syn-input-readonly-background-color-focus);\n outline: var(--syn-focus-ring);\n outline-offset: var(--syn-focus-ring-offset);\n }\n\n .input--readonly.input--disabled {\n background-color: var(--syn-input-readonly-background-color-disabled);\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .input__control {\n flex: 1 1 auto;\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n min-width: 0;\n height: 100%;\n color: var(--syn-input-color);\n border: none;\n background: inherit;\n box-shadow: none;\n padding: 0;\n margin: 0;\n cursor: inherit;\n -webkit-appearance: none;\n }\n\n .input__control::-webkit-search-decoration,\n .input__control::-webkit-search-cancel-button,\n .input__control::-webkit-search-results-button,\n .input__control::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n .input__control:-webkit-autofill,\n .input__control:-webkit-autofill:hover,\n .input__control:-webkit-autofill:focus,\n .input__control:-webkit-autofill:active {\n box-shadow: 0 0 0 var(--syn-input-height-large) var(--syn-input-background-color-hover) inset !important;\n -webkit-text-fill-color: var(--syn-color-primary-500);\n caret-color: var(--syn-input-color);\n }\n\n .input--readonly .input__control:-webkit-autofill,\n .input--readonly .input__control:-webkit-autofill:hover,\n .input--readonly .input__control:-webkit-autofill:focus,\n .input--readonly .input__control:-webkit-autofill:active {\n box-shadow: 0 0 0 var(--syn-input-height-large) var(--syn-input-readonly-background-color) inset !important;\n }\n\n .input__control::placeholder {\n color: var(--syn-input-placeholder-color);\n user-select: none;\n -webkit-user-select: none;\n }\n\n .input:hover:not(.input--disabled) .input__control {\n color: var(--syn-input-color-hover);\n }\n\n .input__control:focus {\n outline: none;\n }\n\n .input__prefix,\n .input__suffix {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n cursor: default;\n }\n\n .input__prefix ::slotted(syn-icon),\n .input__suffix ::slotted(syn-icon) {\n color: var(--syn-input-icon-color);\n }\n\n /*\n * Size modifiers\n */\n\n .input--small {\n border-radius: var(--syn-input-border-radius-small);\n font-size: var(--syn-input-font-size-small);\n height: var(--syn-input-height-small);\n }\n\n .input--small .input__control {\n height: calc(var(--syn-input-height-small) - var(--syn-input-border-width) * 2);\n padding: 0 var(--syn-input-spacing-small);\n }\n\n .input--small .input__clear,\n .input--small .input__password-toggle {\n width: calc(1em + var(--syn-input-spacing-small) * 2);\n }\n\n .input--small .input__prefix ::slotted(*) {\n margin-inline-start: var(--syn-input-spacing-small);\n }\n\n .input--small .input__suffix ::slotted(*) {\n margin-inline-end: var(--syn-input-spacing-small);\n }\n\n .input--medium {\n border-radius: var(--syn-input-border-radius-medium);\n font-size: var(--syn-input-font-size-medium);\n height: var(--syn-input-height-medium);\n }\n\n .input--medium .input__control {\n height: calc(var(--syn-input-height-medium) - var(--syn-input-border-width) * 2);\n padding: 0 var(--syn-input-spacing-medium);\n }\n\n .input--medium .input__clear,\n .input--medium .input__password-toggle {\n width: calc(1em + var(--syn-input-spacing-medium) * 2);\n }\n\n .input--medium .input__prefix ::slotted(*) {\n margin-inline-start: var(--syn-input-spacing-medium);\n }\n\n .input--medium .input__suffix ::slotted(*) {\n margin-inline-end: var(--syn-input-spacing-medium);\n }\n\n .input--large {\n border-radius: var(--syn-input-border-radius-large);\n font-size: var(--syn-input-font-size-large);\n height: var(--syn-input-height-large);\n }\n\n .input--large .input__control {\n height: calc(var(--syn-input-height-large) - var(--syn-input-border-width) * 2);\n padding: 0 var(--syn-input-spacing-large);\n }\n\n .input--large .input__clear,\n .input--large .input__password-toggle {\n width: calc(1em + var(--syn-input-spacing-large) * 2);\n }\n\n .input--large .input__prefix ::slotted(*) {\n margin-inline-start: var(--syn-input-spacing-large);\n }\n\n .input--large .input__suffix ::slotted(*) {\n margin-inline-end: var(--syn-input-spacing-large);\n }\n\n /*\n * Clearable + Password Toggle\n */\n\n .input__clear:not(.input__clear--visible) {\n visibility: hidden;\n }\n\n .input__clear,\n .input__password-toggle {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: inherit;\n color: var(--syn-input-icon-color);\n border: none;\n background: none;\n padding: 0;\n transition: var(--syn-transition-fast) color;\n cursor: pointer;\n }\n\n .input__clear:hover,\n .input__password-toggle:hover {\n color: var(--syn-input-icon-color-hover);\n }\n\n .input__clear:focus,\n .input__password-toggle:focus {\n outline: none;\n }\n\n .input--empty .input__clear {\n visibility: hidden;\n }\n\n /* Don't show the browser's password toggle in Edge */\n ::-ms-reveal {\n display: none;\n }\n\n /* Hide the built-in number spinner */\n input[type='number']::-webkit-outer-spin-button,\n input[type='number']::-webkit-inner-spin-button {\n -webkit-appearance: none;\n display: none;\n }\n\n input[type='number'] {\n -moz-appearance: textfield;\n }\n`;\n"],
5
- "mappings": ";AAMA,SAAS,WAAW;AAEpB,IAAO,uBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
4
+ "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n// Removing this comment will prevent it from being managed by it.\n// ---------------------------------------------------------------------\n\n/* eslint-disable */\nimport { css } from 'lit';\n\nexport default css`\n\t/* stylelint-disable */\n :host {\n display: block;\n }\n\n .input {\n flex: 1 1 auto;\n display: inline-flex;\n align-items: stretch;\n justify-content: start;\n position: relative;\n width: 100%;\n font-family: var(--syn-input-font-family);\n font-weight: var(--syn-input-font-weight);\n letter-spacing: var(--syn-input-letter-spacing);\n vertical-align: middle;\n overflow: hidden;\n cursor: text;\n transition:\n var(--syn-transition-fast) color,\n var(--syn-transition-fast) border,\n var(--syn-transition-fast) box-shadow,\n var(--syn-transition-fast) background-color;\n }\n\n /* Standard inputs */\n .input--standard {\n background-color: var(--syn-input-background-color);\n border: solid var(--syn-input-border-width) var(--syn-input-border-color);\n }\n\n .input--standard:hover:not(.input--disabled) {\n background-color: var(--syn-input-background-color-hover);\n border-color: var(--syn-input-border-color-hover);\n }\n\n .input--standard.input--focused:not(.input--disabled) {\n background-color: var(--syn-input-background-color-focus);\n border-color: var(--syn-input-border-color-focus);\n box-shadow: 0 0 0 var(--syn-focus-ring-width) var(--syn-input-focus-ring-color);\n }\n\n .input--standard.input--focused:not(.input--disabled) .input__control {\n color: var(--syn-input-color-focus);\n }\n\n .input--standard.input--disabled {\n background-color: var(--syn-input-background-color-disabled);\n border-color: var(--syn-input-border-color-disabled);\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .input--standard.input--disabled .input__control {\n color: var(--syn-input-color-disabled);\n }\n\n .input--standard.input--disabled .input__control::placeholder {\n color: var(--syn-input-placeholder-color-disabled);\n }\n\n /* Readonly inputs */\n .input--readonly {\n border: none;\n background-color: var(--syn-input-readonly-background-color);\n color: var(--syn-input-color);\n }\n\n .input--readonly:hover:not(.input--disabled) {\n background-color: var(--syn-input-readonly-background-color-hover);\n }\n\n .input--readonly.input--focused:not(.input--disabled) {\n background-color: var(--syn-input-readonly-background-color-focus);\n outline: var(--syn-focus-ring);\n outline-offset: var(--syn-focus-ring-offset);\n }\n\n .input--readonly.input--disabled {\n background-color: var(--syn-input-readonly-background-color-disabled);\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .input__control {\n flex: 1 1 auto;\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n min-width: 0;\n height: 100%;\n color: var(--syn-input-color);\n border: none;\n background: inherit;\n box-shadow: none;\n padding: 0;\n margin: 0;\n cursor: inherit;\n -webkit-appearance: none;\n }\n\n .input__control::-webkit-search-decoration,\n .input__control::-webkit-search-cancel-button,\n .input__control::-webkit-search-results-button,\n .input__control::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n .input__control:-webkit-autofill,\n .input__control:-webkit-autofill:hover,\n .input__control:-webkit-autofill:focus,\n .input__control:-webkit-autofill:active {\n box-shadow: 0 0 0 var(--syn-input-height-large) var(--syn-input-background-color-hover) inset !important;\n -webkit-text-fill-color: var(--syn-color-primary-500);\n caret-color: var(--syn-input-color);\n }\n\n .input--readonly .input__control:-webkit-autofill,\n .input--readonly .input__control:-webkit-autofill:hover,\n .input--readonly .input__control:-webkit-autofill:focus,\n .input--readonly .input__control:-webkit-autofill:active {\n box-shadow: 0 0 0 var(--syn-input-height-large) var(--syn-input-readonly-background-color) inset !important;\n }\n\n .input__control::placeholder {\n color: var(--syn-input-placeholder-color);\n user-select: none;\n -webkit-user-select: none;\n }\n\n .input:hover:not(.input--disabled) .input__control {\n color: var(--syn-input-color-hover);\n }\n\n .input__control:focus {\n outline: none;\n }\n\n .input__prefix,\n .input__suffix {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n cursor: default;\n }\n\n .input__prefix ::slotted(syn-icon),\n .input__suffix ::slotted(syn-icon) {\n color: var(--syn-input-icon-color);\n }\n\n /*\n * Size modifiers\n */\n\n .input--small {\n border-radius: var(--syn-input-border-radius-small);\n font-size: var(--syn-input-font-size-small);\n height: var(--syn-input-height-small);\n }\n\n .input--small .input__control {\n height: calc(var(--syn-input-height-small) - var(--syn-input-border-width) * 2);\n padding: 0 var(--syn-input-spacing-small);\n }\n\n .input--small .input__clear,\n .input--small .input__password-toggle {\n width: calc(1em + var(--syn-input-spacing-small) * 2);\n }\n\n .input--small .input__prefix ::slotted(*) {\n margin-inline-start: var(--syn-input-spacing-small);\n }\n\n .input--small .input__suffix ::slotted(*) {\n margin-inline-end: var(--syn-input-spacing-small);\n }\n\n .input--medium {\n border-radius: var(--syn-input-border-radius-medium);\n font-size: var(--syn-input-font-size-medium);\n height: var(--syn-input-height-medium);\n }\n\n .input--medium .input__control {\n height: calc(var(--syn-input-height-medium) - var(--syn-input-border-width) * 2);\n padding: 0 var(--syn-input-spacing-medium);\n }\n\n .input--medium .input__clear,\n .input--medium .input__password-toggle {\n width: calc(1em + var(--syn-input-spacing-medium) * 2);\n }\n\n .input--medium .input__prefix ::slotted(*) {\n margin-inline-start: var(--syn-input-spacing-medium);\n }\n\n .input--medium .input__suffix ::slotted(*) {\n margin-inline-end: var(--syn-input-spacing-medium);\n }\n\n .input--large {\n border-radius: var(--syn-input-border-radius-large);\n font-size: var(--syn-input-font-size-large);\n height: var(--syn-input-height-large);\n }\n\n .input--large .input__control {\n height: calc(var(--syn-input-height-large) - var(--syn-input-border-width) * 2);\n padding: 0 var(--syn-input-spacing-large);\n }\n\n .input--large .input__clear,\n .input--large .input__password-toggle {\n width: calc(1em + var(--syn-input-spacing-large) * 2);\n }\n\n .input--large .input__prefix ::slotted(*) {\n margin-inline-start: var(--syn-input-spacing-large);\n }\n\n .input--large .input__suffix ::slotted(*) {\n margin-inline-end: var(--syn-input-spacing-large);\n }\n\n /*\n * Clearable + Password Toggle\n */\n\n .input__clear,\n .input__password-toggle {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: inherit;\n color: var(--syn-input-icon-color);\n border: none;\n background: none;\n padding: 0;\n transition: var(--syn-transition-fast) color;\n cursor: pointer;\n }\n\n .input__clear:hover,\n .input__password-toggle:hover {\n color: var(--syn-input-icon-color-hover);\n }\n\n .input__clear:focus,\n .input__password-toggle:focus {\n outline: none;\n }\n\n /* Don't show the browser's password toggle in Edge */\n ::-ms-reveal {\n display: none;\n }\n\n /* Hide the built-in number spinner */\n input[type='number']::-webkit-outer-spin-button,\n input[type='number']::-webkit-inner-spin-button {\n -webkit-appearance: none;\n display: none;\n }\n\n input[type='number'] {\n -moz-appearance: textfield;\n }\n`;\n"],
5
+ "mappings": ";AAMA,SAAS,WAAW;AAEpB,IAAO,uBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
6
6
  "names": []
7
7
  }
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  SynInput
3
- } from "./chunk.3JBPXBYC.js";
3
+ } from "./chunk.6V72DOSV.js";
4
4
 
5
5
  // src/components/input/input.ts
6
6
  var input_default = SynInput;
@@ -9,4 +9,4 @@ SynInput.define("syn-input");
9
9
  export {
10
10
  input_default
11
11
  };
12
- //# sourceMappingURL=chunk.V6OK2ECX.js.map
12
+ //# sourceMappingURL=chunk.BKRTJVKH.js.map
@@ -3,7 +3,7 @@ import {
3
3
  } from "./chunk.KG52EHDB.js";
4
4
  import {
5
5
  SynDivider
6
- } from "./chunk.YBPWZ4QI.js";
6
+ } from "./chunk.TUFBQA52.js";
7
7
  import {
8
8
  HasSlotController
9
9
  } from "./chunk.66WXVGAW.js";
@@ -12,7 +12,7 @@ import {
12
12
  } from "./chunk.AVTU2BGE.js";
13
13
  import {
14
14
  SynergyElement
15
- } from "./chunk.MCJTXOVV.js";
15
+ } from "./chunk.VCFVQ6KS.js";
16
16
  import {
17
17
  __decorateClass
18
18
  } from "./chunk.QNDC5KWA.js";
@@ -93,4 +93,4 @@ __decorateClass([
93
93
  export {
94
94
  SynOptgroup
95
95
  };
96
- //# sourceMappingURL=chunk.VUROYPEC.js.map
96
+ //# sourceMappingURL=chunk.BQ3U6CVQ.js.map
@@ -4,7 +4,7 @@ import {
4
4
  import {
5
5
  SynergyElement,
6
6
  component_styles_default
7
- } from "./chunk.MCJTXOVV.js";
7
+ } from "./chunk.VCFVQ6KS.js";
8
8
  import {
9
9
  __decorateClass
10
10
  } from "./chunk.QNDC5KWA.js";
@@ -20,19 +20,19 @@ var SynButtonGroup = class extends SynergyElement {
20
20
  }
21
21
  handleFocus(event) {
22
22
  const button = findButton(event.target);
23
- button == null ? void 0 : button.classList.add("syn-button-group__button--focus");
23
+ button == null ? void 0 : button.toggleAttribute("data-syn-button-group__button--focus", true);
24
24
  }
25
25
  handleBlur(event) {
26
26
  const button = findButton(event.target);
27
- button == null ? void 0 : button.classList.remove("syn-button-group__button--focus");
27
+ button == null ? void 0 : button.toggleAttribute("data-syn-button-group__button--focus", false);
28
28
  }
29
29
  handleMouseOver(event) {
30
30
  const button = findButton(event.target);
31
- button == null ? void 0 : button.classList.add("syn-button-group__button--hover");
31
+ button == null ? void 0 : button.toggleAttribute("data-syn-button-group__button--hover", true);
32
32
  }
33
33
  handleMouseOut(event) {
34
34
  const button = findButton(event.target);
35
- button == null ? void 0 : button.classList.remove("syn-button-group__button--hover");
35
+ button == null ? void 0 : button.toggleAttribute("data-syn-button-group__button--hover", false);
36
36
  }
37
37
  handleSlotChange() {
38
38
  const slottedElements = [...this.defaultSlot.assignedElements({ flatten: true })];
@@ -40,11 +40,14 @@ var SynButtonGroup = class extends SynergyElement {
40
40
  const index = slottedElements.indexOf(el);
41
41
  const button = findButton(el);
42
42
  if (button) {
43
- button.classList.add("syn-button-group__button");
44
- button.classList.toggle("syn-button-group__button--first", index === 0);
45
- button.classList.toggle("syn-button-group__button--inner", index > 0 && index < slottedElements.length - 1);
46
- button.classList.toggle("syn-button-group__button--last", index === slottedElements.length - 1);
47
- button.classList.toggle("syn-button-group__button--radio", button.tagName.toLowerCase() === "syn-radio-button");
43
+ button.toggleAttribute("data-syn-button-group__button", true);
44
+ button.toggleAttribute("data-syn-button-group__button--first", index === 0);
45
+ button.toggleAttribute("data-syn-button-group__button--inner", index > 0 && index < slottedElements.length - 1);
46
+ button.toggleAttribute("data-syn-button-group__button--last", index === slottedElements.length - 1);
47
+ button.toggleAttribute(
48
+ "data-syn-button-group__button--radio",
49
+ button.tagName.toLowerCase() === "syn-radio-button"
50
+ );
48
51
  }
49
52
  });
50
53
  }
@@ -84,4 +87,4 @@ function findButton(el) {
84
87
  export {
85
88
  SynButtonGroup
86
89
  };
87
- //# sourceMappingURL=chunk.SE4NF6AN.js.map
90
+ //# sourceMappingURL=chunk.CCITL3IY.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/components/button-group/button-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 { html } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport styles from './button-group.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Button groups can be used to group related buttons into sections.\n * @documentation https://synergy.style/components/button-group\n * @status stable\n * @since 2.0\n *\n * @slot - One or more `<syn-button>` elements to display in the button group.\n *\n * @csspart base - The component's base wrapper.\n */\nexport default class SynButtonGroup extends SynergyElement {\n static styles: CSSResultGroup = [componentStyles, styles];\n\n @query('slot') defaultSlot: HTMLSlotElement;\n\n @state() disableRole = false;\n\n /**\n * A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive\n * devices when interacting with the control and is strongly recommended.\n */\n @property() label = '';\n\n private handleFocus(event: Event) {\n const button = findButton(event.target as HTMLElement);\n button?.toggleAttribute('data-syn-button-group__button--focus', true);\n }\n\n private handleBlur(event: Event) {\n const button = findButton(event.target as HTMLElement);\n button?.toggleAttribute('data-syn-button-group__button--focus', false);\n }\n\n private handleMouseOver(event: Event) {\n const button = findButton(event.target as HTMLElement);\n button?.toggleAttribute('data-syn-button-group__button--hover', true);\n }\n\n private handleMouseOut(event: Event) {\n const button = findButton(event.target as HTMLElement);\n button?.toggleAttribute('data-syn-button-group__button--hover', false);\n }\n\n private handleSlotChange() {\n const slottedElements = [...this.defaultSlot.assignedElements({ flatten: true })] as HTMLElement[];\n\n slottedElements.forEach(el => {\n const index = slottedElements.indexOf(el);\n const button = findButton(el);\n\n if (button) {\n button.toggleAttribute('data-syn-button-group__button', true);\n button.toggleAttribute('data-syn-button-group__button--first', index === 0);\n button.toggleAttribute('data-syn-button-group__button--inner', index > 0 && index < slottedElements.length - 1);\n button.toggleAttribute('data-syn-button-group__button--last', index === slottedElements.length - 1);\n button.toggleAttribute(\n 'data-syn-button-group__button--radio',\n button.tagName.toLowerCase() === 'syn-radio-button'\n );\n }\n });\n }\n\n render() {\n // eslint-disable-next-line lit-a11y/mouse-events-have-key-events\n return html`\n <div\n part=\"base\"\n class=\"button-group\"\n role=\"${this.disableRole ? 'presentation' : 'group'}\"\n aria-label=${this.label}\n @focusout=${this.handleBlur}\n @focusin=${this.handleFocus}\n @mouseover=${this.handleMouseOver}\n @mouseout=${this.handleMouseOut}\n >\n <slot @slotchange=${this.handleSlotChange}></slot>\n </div>\n `;\n }\n}\n\nfunction findButton(el: HTMLElement) {\n const selector = 'syn-button, syn-radio-button';\n\n // The button could be the target element or a child of it (e.g. a dropdown or tooltip anchor)\n return el.closest(selector) ?? el.querySelector(selector);\n}\n"],
5
+ "mappings": ";;;;;;;;;;;;AAMA,SAAS,YAAY;AACrB,SAAS,UAAU,OAAO,aAAa;AAgBvC,IAAqB,iBAArB,cAA4C,eAAe;AAAA,EAA3D;AAAA;AAKW,uBAAc;AAMX,iBAAQ;AAAA;AAAA,EAEZ,YAAY,OAAc;AAChC,UAAM,SAAS,WAAW,MAAM,MAAqB;AACrD,qCAAQ,gBAAgB,wCAAwC;AAAA,EAClE;AAAA,EAEQ,WAAW,OAAc;AAC/B,UAAM,SAAS,WAAW,MAAM,MAAqB;AACrD,qCAAQ,gBAAgB,wCAAwC;AAAA,EAClE;AAAA,EAEQ,gBAAgB,OAAc;AACpC,UAAM,SAAS,WAAW,MAAM,MAAqB;AACrD,qCAAQ,gBAAgB,wCAAwC;AAAA,EAClE;AAAA,EAEQ,eAAe,OAAc;AACnC,UAAM,SAAS,WAAW,MAAM,MAAqB;AACrD,qCAAQ,gBAAgB,wCAAwC;AAAA,EAClE;AAAA,EAEQ,mBAAmB;AACzB,UAAM,kBAAkB,CAAC,GAAG,KAAK,YAAY,iBAAiB,EAAE,SAAS,KAAK,CAAC,CAAC;AAEhF,oBAAgB,QAAQ,QAAM;AAC5B,YAAM,QAAQ,gBAAgB,QAAQ,EAAE;AACxC,YAAM,SAAS,WAAW,EAAE;AAE5B,UAAI,QAAQ;AACV,eAAO,gBAAgB,iCAAiC,IAAI;AAC5D,eAAO,gBAAgB,wCAAwC,UAAU,CAAC;AAC1E,eAAO,gBAAgB,wCAAwC,QAAQ,KAAK,QAAQ,gBAAgB,SAAS,CAAC;AAC9G,eAAO,gBAAgB,uCAAuC,UAAU,gBAAgB,SAAS,CAAC;AAClG,eAAO;AAAA,UACL;AAAA,UACA,OAAO,QAAQ,YAAY,MAAM;AAAA,QACnC;AAAA,MACF;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAEA,SAAS;AAEP,WAAO;AAAA;AAAA;AAAA;AAAA,gBAIK,KAAK,cAAc,iBAAiB,OAAO;AAAA,qBACtC,KAAK,KAAK;AAAA,oBACX,KAAK,UAAU;AAAA,mBAChB,KAAK,WAAW;AAAA,qBACd,KAAK,eAAe;AAAA,oBACrB,KAAK,cAAc;AAAA;AAAA,4BAEX,KAAK,gBAAgB;AAAA;AAAA;AAAA,EAG/C;AACF;AAtEqB,eACZ,SAAyB,CAAC,0BAAiB,2BAAM;AAEzC;AAAA,EAAd,MAAM,MAAM;AAAA,GAHM,eAGJ;AAEN;AAAA,EAAR,MAAM;AAAA,GALY,eAKV;AAMG;AAAA,EAAX,SAAS;AAAA,GAXS,eAWP;AA6Dd,SAAS,WAAW,IAAiB;AA/FrC;AAgGE,QAAM,WAAW;AAGjB,UAAO,QAAG,QAAQ,QAAQ,MAAnB,YAAwB,GAAG,cAAc,QAAQ;AAC1D;",
6
+ "names": []
7
+ }
@@ -3,7 +3,7 @@ import {
3
3
  } from "./chunk.W5JK7V7K.js";
4
4
  import {
5
5
  switch_styles_default
6
- } from "./chunk.ADRKUQGR.js";
6
+ } from "./chunk.TAO5QIIQ.js";
7
7
  import {
8
8
  defaultValue
9
9
  } from "./chunk.WFAJR3FN.js";
@@ -13,7 +13,7 @@ import {
13
13
  } from "./chunk.TTL762VF.js";
14
14
  import {
15
15
  FormControlController
16
- } from "./chunk.SZCGMXW5.js";
16
+ } from "./chunk.JUJZBRXD.js";
17
17
  import {
18
18
  HasSlotController
19
19
  } from "./chunk.66WXVGAW.js";
@@ -23,7 +23,7 @@ import {
23
23
  import {
24
24
  SynergyElement,
25
25
  component_styles_default
26
- } from "./chunk.MCJTXOVV.js";
26
+ } from "./chunk.VCFVQ6KS.js";
27
27
  import {
28
28
  __decorateClass
29
29
  } from "./chunk.QNDC5KWA.js";
@@ -247,4 +247,4 @@ __decorateClass([
247
247
  export {
248
248
  SynSwitch
249
249
  };
250
- //# sourceMappingURL=chunk.GARWLAOJ.js.map
250
+ //# sourceMappingURL=chunk.CNKXQN5I.js.map
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  SynRadioButton
3
- } from "./chunk.WCIAL36G.js";
3
+ } from "./chunk.7PYQKCMR.js";
4
4
 
5
5
  // src/components/radio-button/radio-button.ts
6
6
  var radio_button_default = SynRadioButton;
@@ -9,4 +9,4 @@ SynRadioButton.define("syn-radio-button");
9
9
  export {
10
10
  radio_button_default
11
11
  };
12
- //# sourceMappingURL=chunk.TFWNKCFJ.js.map
12
+ //# sourceMappingURL=chunk.CXLJMDBV.js.map
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  SynSelect
3
- } from "./chunk.GCHIBXQT.js";
3
+ } from "./chunk.7NH6SYGG.js";
4
4
 
5
5
  // src/components/select/select.ts
6
6
  var select_default = SynSelect;
@@ -9,4 +9,4 @@ SynSelect.define("syn-select");
9
9
  export {
10
10
  select_default
11
11
  };
12
- //# sourceMappingURL=chunk.OVUVBTHH.js.map
12
+ //# sourceMappingURL=chunk.D63XRN3X.js.map
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  SynBadge
3
- } from "./chunk.SWPVARPP.js";
3
+ } from "./chunk.WPAPTZLW.js";
4
4
 
5
5
  // src/components/badge/badge.ts
6
6
  var badge_default = SynBadge;
@@ -9,4 +9,4 @@ SynBadge.define("syn-badge");
9
9
  export {
10
10
  badge_default
11
11
  };
12
- //# sourceMappingURL=chunk.TRMXLYYL.js.map
12
+ //# sourceMappingURL=chunk.E3MWAHV4.js.map
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  SynOption
3
- } from "./chunk.JL53VHSP.js";
3
+ } from "./chunk.LFNAPJXT.js";
4
4
 
5
5
  // src/components/option/option.ts
6
6
  var option_default = SynOption;
@@ -9,4 +9,4 @@ SynOption.define("syn-option");
9
9
  export {
10
10
  option_default
11
11
  };
12
- //# sourceMappingURL=chunk.ZMIBKG2N.js.map
12
+ //# sourceMappingURL=chunk.EHMIJIZ2.js.map
@@ -1,19 +1,19 @@
1
1
  import {
2
2
  SynSpinner
3
- } from "./chunk.FKT4RXN7.js";
3
+ } from "./chunk.KJ7V3TWI.js";
4
4
  import {
5
5
  button_styles_default
6
- } from "./chunk.SJMMPKWP.js";
6
+ } from "./chunk.Q4CRAGN3.js";
7
7
  import {
8
8
  FormControlController,
9
9
  validValidityState
10
- } from "./chunk.SZCGMXW5.js";
10
+ } from "./chunk.JUJZBRXD.js";
11
11
  import {
12
12
  HasSlotController
13
13
  } from "./chunk.66WXVGAW.js";
14
14
  import {
15
15
  SynIcon
16
- } from "./chunk.WHYX7AY4.js";
16
+ } from "./chunk.I3SSNN7J.js";
17
17
  import {
18
18
  watch
19
19
  } from "./chunk.AVTU2BGE.js";
@@ -23,7 +23,7 @@ import {
23
23
  import {
24
24
  SynergyElement,
25
25
  component_styles_default
26
- } from "./chunk.MCJTXOVV.js";
26
+ } from "./chunk.VCFVQ6KS.js";
27
27
  import {
28
28
  button_custom_styles_default
29
29
  } from "./chunk.K55MKNUR.js";
@@ -273,4 +273,4 @@ __decorateClass([
273
273
  export {
274
274
  SynButton
275
275
  };
276
- //# sourceMappingURL=chunk.3QNVV7DW.js.map
276
+ //# sourceMappingURL=chunk.ENAW6YL5.js.map
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  SynNavItem
3
- } from "./chunk.MJYZDU37.js";
3
+ } from "./chunk.ONVWJKVD.js";
4
4
 
5
5
  // src/components/nav-item/nav-item.ts
6
6
  var nav_item_default = SynNavItem;
@@ -9,4 +9,4 @@ SynNavItem.define("syn-nav-item");
9
9
  export {
10
10
  nav_item_default
11
11
  };
12
- //# sourceMappingURL=chunk.QJGWS4TQ.js.map
12
+ //# sourceMappingURL=chunk.EQ2W2Z5B.js.map
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  formCollections
3
- } from "./chunk.SZCGMXW5.js";
3
+ } from "./chunk.JUJZBRXD.js";
4
4
 
5
5
  // src/utilities/form.ts
6
6
  function serialize(form) {
@@ -39,4 +39,4 @@ export {
39
39
  serialize,
40
40
  getFormControls
41
41
  };
42
- //# sourceMappingURL=chunk.KUO3KJOC.js.map
42
+ //# sourceMappingURL=chunk.GBARDV25.js.map
@@ -6,20 +6,20 @@ import {
6
6
  } from "./chunk.PDHVYHXD.js";
7
7
  import {
8
8
  SubmenuController
9
- } from "./chunk.RRWSXFQ5.js";
9
+ } from "./chunk.JDBDBGQP.js";
10
10
  import {
11
11
  SynPopup
12
- } from "./chunk.4TWUWTOI.js";
12
+ } from "./chunk.IVHB4EQ6.js";
13
13
  import {
14
14
  SynSpinner
15
- } from "./chunk.FKT4RXN7.js";
15
+ } from "./chunk.KJ7V3TWI.js";
16
16
  import {
17
17
  HasSlotController,
18
18
  getTextContent
19
19
  } from "./chunk.66WXVGAW.js";
20
20
  import {
21
21
  SynIcon
22
- } from "./chunk.WHYX7AY4.js";
22
+ } from "./chunk.I3SSNN7J.js";
23
23
  import {
24
24
  watch
25
25
  } from "./chunk.AVTU2BGE.js";
@@ -29,7 +29,7 @@ import {
29
29
  import {
30
30
  SynergyElement,
31
31
  component_styles_default
32
- } from "./chunk.MCJTXOVV.js";
32
+ } from "./chunk.VCFVQ6KS.js";
33
33
  import {
34
34
  __decorateClass
35
35
  } from "./chunk.QNDC5KWA.js";
@@ -191,4 +191,4 @@ __decorateClass([
191
191
  export {
192
192
  SynMenuItem
193
193
  };
194
- //# sourceMappingURL=chunk.LNUIMITL.js.map
194
+ //# sourceMappingURL=chunk.H3GKRGN6.js.map
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  SynSwitch
3
- } from "./chunk.GARWLAOJ.js";
3
+ } from "./chunk.CNKXQN5I.js";
4
4
 
5
5
  // src/components/switch/switch.ts
6
6
  var switch_default = SynSwitch;
@@ -9,4 +9,4 @@ SynSwitch.define("syn-switch");
9
9
  export {
10
10
  switch_default
11
11
  };
12
- //# sourceMappingURL=chunk.MMDRQ7JM.js.map
12
+ //# sourceMappingURL=chunk.HZTZOBNJ.js.map
@@ -15,7 +15,7 @@ import {
15
15
  import {
16
16
  SynergyElement,
17
17
  component_styles_default
18
- } from "./chunk.MCJTXOVV.js";
18
+ } from "./chunk.VCFVQ6KS.js";
19
19
  import {
20
20
  __decorateClass
21
21
  } from "./chunk.QNDC5KWA.js";
@@ -41,9 +41,15 @@ var SynIcon = class extends SynergyElement {
41
41
  var _a;
42
42
  let fileData;
43
43
  if (library == null ? void 0 : library.spriteSheet) {
44
- return html`<svg part="svg">
44
+ this.svg = html`<svg part="svg">
45
45
  <use part="use" href="${url}"></use>
46
46
  </svg>`;
47
+ await this.updateComplete;
48
+ const svg = this.shadowRoot.querySelector("[part='svg']");
49
+ if (typeof library.mutator === "function") {
50
+ library.mutator(svg);
51
+ }
52
+ return this.svg;
47
53
  }
48
54
  try {
49
55
  fileData = await fetch(url, { mode: "cors" });
@@ -176,4 +182,4 @@ __decorateClass([
176
182
  export {
177
183
  SynIcon
178
184
  };
179
- //# sourceMappingURL=chunk.WHYX7AY4.js.map
185
+ //# sourceMappingURL=chunk.I3SSNN7J.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/components/icon/icon.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 { getIconLibrary, type IconLibrary, unwatchIcon, watchIcon } from './library.js';\nimport { html } from 'lit';\nimport { isTemplateResult } from 'lit/directive-helpers.js';\nimport { property, state } from 'lit/decorators.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport styles from './icon.styles.js';\nimport customStyles from './icon.custom.styles.js';\nimport type { CSSResultGroup, HTMLTemplateResult } from 'lit';\n\nconst CACHEABLE_ERROR = Symbol();\nconst RETRYABLE_ERROR = Symbol();\ntype SVGResult = HTMLTemplateResult | SVGSVGElement | typeof RETRYABLE_ERROR | typeof CACHEABLE_ERROR;\n\nlet parser: DOMParser;\nconst iconCache = new Map<string, Promise<SVGResult>>();\n\ninterface IconSource {\n url?: string;\n fromLibrary: boolean;\n}\n\n/**\n * @summary Icons are symbols that can be used to represent various options within an application.\n * @documentation https://synergy.style/components/icon\n * @status stable\n * @since 2.0\n *\n * @event syn-load - Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit.\n * @event syn-error - Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit.\n *\n * @csspart svg - The internal SVG element.\n * @csspart use - The <use> element generated when using `spriteSheet: true`\n */\nexport default class SynIcon extends SynergyElement {\n static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n\n private initialRender = false;\n\n /** Given a URL, this function returns the resulting SVG element or an appropriate error symbol. */\n private async resolveIcon(url: string, library?: IconLibrary): Promise<SVGResult> {\n let fileData: Response;\n\n if (library?.spriteSheet) {\n this.svg = html`<svg part=\"svg\">\n <use part=\"use\" href=\"${url}\"></use>\n </svg>`;\n\n // Using a templateResult requires the SVG to be written to the DOM first before we can grab the SVGElement\n // to be passed to the library's mutator function.\n await this.updateComplete;\n\n const svg = this.shadowRoot!.querySelector(\"[part='svg']\")!;\n\n if (typeof library.mutator === 'function') {\n library.mutator(svg as SVGElement);\n }\n\n return this.svg;\n }\n\n try {\n fileData = await fetch(url, { mode: 'cors' });\n if (!fileData.ok) return fileData.status === 410 ? CACHEABLE_ERROR : RETRYABLE_ERROR;\n } catch {\n return RETRYABLE_ERROR;\n }\n\n try {\n const div = document.createElement('div');\n div.innerHTML = await fileData.text();\n\n const svg = div.firstElementChild;\n if (svg?.tagName?.toLowerCase() !== 'svg') return CACHEABLE_ERROR;\n\n if (!parser) parser = new DOMParser();\n const doc = parser.parseFromString(svg.outerHTML, 'text/html');\n\n const svgEl = doc.body.querySelector('svg');\n if (!svgEl) return CACHEABLE_ERROR;\n\n svgEl.part.add('svg');\n return document.adoptNode(svgEl);\n } catch {\n return CACHEABLE_ERROR;\n }\n }\n\n @state() private svg: SVGElement | HTMLTemplateResult | null = null;\n\n /** The name of the icon to draw. Available names depend on the icon library being used. */\n @property({ reflect: true }) name?: string;\n\n /**\n * An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\n * can result in XSS attacks.\n */\n @property() src?: string;\n\n /**\n * An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\n * ignored by assistive devices.\n */\n @property() label = '';\n\n /** The name of a registered custom icon library. */\n @property({ reflect: true }) library = 'default';\n\n connectedCallback() {\n super.connectedCallback();\n watchIcon(this);\n }\n\n firstUpdated() {\n this.initialRender = true;\n this.setIcon();\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n unwatchIcon(this);\n }\n\n private getIconSource(): IconSource {\n const library = getIconLibrary(this.library);\n if (this.name && library) {\n return {\n url: library.resolver(this.name),\n fromLibrary: true\n };\n }\n\n return {\n url: this.src,\n fromLibrary: false\n };\n }\n\n @watch('label')\n handleLabelChange() {\n const hasLabel = typeof this.label === 'string' && this.label.length > 0;\n\n if (hasLabel) {\n this.setAttribute('role', 'img');\n this.setAttribute('aria-label', this.label);\n this.removeAttribute('aria-hidden');\n } else {\n this.removeAttribute('role');\n this.removeAttribute('aria-label');\n this.setAttribute('aria-hidden', 'true');\n }\n }\n\n @watch(['name', 'src', 'library'])\n async setIcon() {\n const { url, fromLibrary } = this.getIconSource();\n const library = fromLibrary ? getIconLibrary(this.library) : undefined;\n\n if (!url) {\n this.svg = null;\n return;\n }\n\n let iconResolver = iconCache.get(url);\n if (!iconResolver) {\n iconResolver = this.resolveIcon(url, library);\n iconCache.set(url, iconResolver);\n }\n\n // If we haven't rendered yet, exit early. This avoids unnecessary work due to watching multiple props.\n if (!this.initialRender) {\n return;\n }\n\n const svg = await iconResolver;\n\n if (svg === RETRYABLE_ERROR) {\n iconCache.delete(url);\n }\n\n if (url !== this.getIconSource().url) {\n // If the url has changed while fetching the icon, ignore this request\n return;\n }\n\n if (isTemplateResult(svg)) {\n this.svg = svg;\n return;\n }\n\n switch (svg) {\n case RETRYABLE_ERROR:\n case CACHEABLE_ERROR:\n this.svg = null;\n this.emit('syn-error');\n break;\n default:\n this.svg = svg.cloneNode(true) as SVGElement;\n library?.mutator?.(this.svg);\n this.emit('syn-load');\n }\n }\n\n render() {\n return this.svg;\n }\n}\n"],
5
+ "mappings": "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",
6
+ "names": []
7
+ }
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  SynButtonGroup
3
- } from "./chunk.SE4NF6AN.js";
3
+ } from "./chunk.CCITL3IY.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.VZEN3JIH.js.map
12
+ //# sourceMappingURL=chunk.INLTRHSF.js.map
@@ -4,7 +4,7 @@ import {
4
4
  import {
5
5
  SynergyElement,
6
6
  component_styles_default
7
- } from "./chunk.MCJTXOVV.js";
7
+ } from "./chunk.VCFVQ6KS.js";
8
8
  import {
9
9
  __decorateClass,
10
10
  __spreadProps,
@@ -18,7 +18,7 @@ import { html } from "lit";
18
18
  import { offsetParent } from "composed-offset-position";
19
19
  import { property, query } from "lit/decorators.js";
20
20
  function isVirtualElement(e) {
21
- return e !== null && typeof e === "object" && "getBoundingClientRect" in e;
21
+ return e !== null && typeof e === "object" && "getBoundingClientRect" in e && ("contextElement" in e ? e instanceof Element : true);
22
22
  }
23
23
  var SynPopup = class extends SynergyElement {
24
24
  constructor() {
@@ -409,4 +409,4 @@ __decorateClass([
409
409
  export {
410
410
  SynPopup
411
411
  };
412
- //# sourceMappingURL=chunk.4TWUWTOI.js.map
412
+ //# sourceMappingURL=chunk.IVHB4EQ6.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/components/popup/popup.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 { arrow, autoUpdate, computePosition, flip, offset, platform, shift, size } from '@floating-ui/dom';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { html } from 'lit';\nimport { offsetParent } from 'composed-offset-position';\nimport { property, query } from 'lit/decorators.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport styles from './popup.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\nexport interface VirtualElement {\n getBoundingClientRect: () => DOMRect;\n contextElement?: Element;\n}\n\nfunction isVirtualElement(e: unknown): e is VirtualElement {\n return (\n e !== null &&\n typeof e === 'object' &&\n 'getBoundingClientRect' in e &&\n ('contextElement' in e ? e instanceof Element : true)\n );\n}\n\n/**\n * @summary Popup is a utility that lets you declaratively anchor \"popup\" containers to another element.\n * @documentation https://synergy.style/components/popup\n * @status stable\n * @since 2.0\n *\n * @event syn-reposition - Emitted when the popup is repositioned. This event can fire a lot, so avoid putting expensive\n * operations in your listener or consider debouncing it.\n *\n * @slot - The popup's content.\n * @slot anchor - The element the popup will be anchored to. If the anchor lives outside of the popup, you can use the\n * `anchor` attribute or property instead.\n *\n * @csspart arrow - The arrow's container. Avoid setting `top|bottom|left|right` properties, as these values are\n * assigned dynamically as the popup moves. This is most useful for applying a background color to match the popup, and\n * maybe a border or box shadow.\n * @csspart popup - The popup's container. Useful for setting a background color, box shadow, etc.\n * @csspart hover-bridge - The hover bridge element. Only available when the `hover-bridge` option is enabled.\n *\n * @cssproperty [--arrow-size=6px] - The size of the arrow. Note that an arrow won't be shown unless the `arrow`\n * attribute is used.\n * @cssproperty [--arrow-color=var(--syn-color-neutral-0)] - The color of the arrow.\n * @cssproperty [--auto-size-available-width] - A read-only custom property that determines the amount of width the\n * popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only\n * available when using `auto-size`.\n * @cssproperty [--auto-size-available-height] - A read-only custom property that determines the amount of height the\n * popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only\n * available when using `auto-size`.\n */\nexport default class SynPopup extends SynergyElement {\n static styles: CSSResultGroup = [componentStyles, styles];\n\n private anchorEl: Element | VirtualElement | null;\n private cleanup: ReturnType<typeof autoUpdate> | undefined;\n\n /** A reference to the internal popup container. Useful for animating and styling the popup with JavaScript. */\n @query('.popup') popup: HTMLElement;\n @query('.popup__arrow') private arrowEl: HTMLElement;\n\n /**\n * The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide the anchor\n * element `id`, a DOM element reference, or a `VirtualElement`. If the anchor lives inside the popup, use the\n * `anchor` slot instead.\n */\n @property() anchor: Element | string | VirtualElement;\n\n /**\n * Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn\n * down and the popup will be hidden.\n */\n @property({ type: Boolean, reflect: true }) active = false;\n\n /**\n * The preferred placement of the popup. Note that the actual placement will vary as configured to keep the\n * panel inside of the viewport.\n */\n @property({ reflect: true }) placement:\n | 'top'\n | 'top-start'\n | 'top-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'right'\n | 'right-start'\n | 'right-end'\n | 'left'\n | 'left-start'\n | 'left-end' = 'top';\n\n /**\n * Determines how the popup is positioned. The `absolute` strategy works well in most cases, but if overflow is\n * clipped, using a `fixed` position strategy can often workaround it.\n */\n @property({ reflect: true }) strategy: 'absolute' | 'fixed' = 'absolute';\n\n /** The distance in pixels from which to offset the panel away from its anchor. */\n @property({ type: Number }) distance = 0;\n\n /** The distance in pixels from which to offset the panel along its anchor. */\n @property({ type: Number }) skidding = 0;\n\n /**\n * Attaches an arrow to the popup. The arrow's size and color can be customized using the `--arrow-size` and\n * `--arrow-color` custom properties. For additional customizations, you can also target the arrow using\n * `::part(arrow)` in your stylesheet.\n */\n @property({ type: Boolean }) arrow = false;\n\n /**\n * The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the\n * anchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will\n * align the arrow to the start, end, or center of the popover instead.\n */\n @property({ attribute: 'arrow-placement' }) arrowPlacement: 'start' | 'end' | 'center' | 'anchor' = 'anchor';\n\n /**\n * The amount of padding between the arrow and the edges of the popup. If the popup has a border-radius, for example,\n * this will prevent it from overflowing the corners.\n */\n @property({ attribute: 'arrow-padding', type: Number }) arrowPadding = 10;\n\n /**\n * When set, placement of the popup will flip to the opposite site to keep it in view. You can use\n * `flipFallbackPlacements` to further configure how the fallback placement is determined.\n */\n @property({ type: Boolean }) flip = false;\n\n /**\n * If the preferred placement doesn't fit, popup will be tested in these fallback placements until one fits. Must be a\n * string of any number of placements separated by a space, e.g. \"top bottom left\". If no placement fits, the flip\n * fallback strategy will be used instead.\n * */\n @property({\n attribute: 'flip-fallback-placements',\n converter: {\n fromAttribute: (value: string) => {\n return value\n .split(' ')\n .map(p => p.trim())\n .filter(p => p !== '');\n },\n toAttribute: (value: []) => {\n return value.join(' ');\n }\n }\n })\n flipFallbackPlacements = '';\n\n /**\n * When neither the preferred placement nor the fallback placements fit, this value will be used to determine whether\n * the popup should be positioned using the best available fit based on available space or as it was initially\n * preferred.\n */\n @property({ attribute: 'flip-fallback-strategy' }) flipFallbackStrategy: 'best-fit' | 'initial' = 'best-fit';\n\n /**\n * The flip boundary describes clipping element(s) that overflow will be checked relative to when flipping. By\n * default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\n * change the boundary by passing a reference to one or more elements to this property.\n */\n @property({ type: Object }) flipBoundary: Element | Element[];\n\n /** The amount of padding, in pixels, to exceed before the flip behavior will occur. */\n @property({ attribute: 'flip-padding', type: Number }) flipPadding = 0;\n\n /** Moves the popup along the axis to keep it in view when clipped. */\n @property({ type: Boolean }) shift = false;\n\n /**\n * The shift boundary describes clipping element(s) that overflow will be checked relative to when shifting. By\n * default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\n * change the boundary by passing a reference to one or more elements to this property.\n */\n @property({ type: Object }) shiftBoundary: Element | Element[];\n\n /** The amount of padding, in pixels, to exceed before the shift behavior will occur. */\n @property({ attribute: 'shift-padding', type: Number }) shiftPadding = 0;\n\n /** When set, this will cause the popup to automatically resize itself to prevent it from overflowing. */\n @property({ attribute: 'auto-size' }) autoSize: 'horizontal' | 'vertical' | 'both';\n\n /** Syncs the popup's width or height to that of the anchor element. */\n @property() sync: 'width' | 'height' | 'both';\n\n /**\n * The auto-size boundary describes clipping element(s) that overflow will be checked relative to when resizing. By\n * default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\n * change the boundary by passing a reference to one or more elements to this property.\n */\n @property({ type: Object }) autoSizeBoundary: Element | Element[];\n\n /** The amount of padding, in pixels, to exceed before the auto-size behavior will occur. */\n @property({ attribute: 'auto-size-padding', type: Number }) autoSizePadding = 0;\n\n /**\n * When a gap exists between the anchor and the popup element, this option will add a \"hover bridge\" that fills the\n * gap using an invisible element. This makes listening for events such as `mouseenter` and `mouseleave` more sane\n * because the pointer never technically leaves the element. The hover bridge will only be drawn when the popover is\n * active.\n */\n @property({ attribute: 'hover-bridge', type: Boolean }) hoverBridge = false;\n\n async connectedCallback() {\n super.connectedCallback();\n\n // Start the positioner after the first update\n await this.updateComplete;\n this.start();\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.stop();\n }\n\n async updated(changedProps: Map<string, unknown>) {\n super.updated(changedProps);\n\n // Start or stop the positioner when active changes\n if (changedProps.has('active')) {\n if (this.active) {\n this.start();\n } else {\n this.stop();\n }\n }\n\n // Update the anchor when anchor changes\n if (changedProps.has('anchor')) {\n this.handleAnchorChange();\n }\n\n // All other properties will trigger a reposition when active\n if (this.active) {\n await this.updateComplete;\n this.reposition();\n }\n }\n\n private async handleAnchorChange() {\n await this.stop();\n\n if (this.anchor && typeof this.anchor === 'string') {\n // Locate the anchor by id\n const root = this.getRootNode() as Document | ShadowRoot;\n this.anchorEl = root.getElementById(this.anchor);\n } else if (this.anchor instanceof Element || isVirtualElement(this.anchor)) {\n // Use the anchor's reference\n this.anchorEl = this.anchor;\n } else {\n // Look for a slotted anchor\n this.anchorEl = this.querySelector<HTMLElement>('[slot=\"anchor\"]');\n }\n\n // If the anchor is a <slot>, we'll use the first assigned element as the target since slots use `display: contents`\n // and positioning can't be calculated on them\n if (this.anchorEl instanceof HTMLSlotElement) {\n this.anchorEl = this.anchorEl.assignedElements({ flatten: true })[0] as HTMLElement;\n }\n\n // If the anchor is valid, start it up\n if (this.anchorEl) {\n this.start();\n }\n }\n\n private start() {\n // We can't start the positioner without an anchor\n if (!this.anchorEl) {\n return;\n }\n\n this.cleanup = autoUpdate(this.anchorEl, this.popup, () => {\n this.reposition();\n });\n }\n\n private async stop(): Promise<void> {\n return new Promise(resolve => {\n if (this.cleanup) {\n this.cleanup();\n this.cleanup = undefined;\n this.removeAttribute('data-current-placement');\n this.style.removeProperty('--auto-size-available-width');\n this.style.removeProperty('--auto-size-available-height');\n requestAnimationFrame(() => resolve());\n } else {\n resolve();\n }\n });\n }\n\n /** Forces the popup to recalculate and reposition itself. */\n reposition() {\n // Nothing to do if the popup is inactive or the anchor doesn't exist\n if (!this.active || !this.anchorEl) {\n return;\n }\n\n //\n // NOTE: Floating UI middlewares are order dependent: https://floating-ui.com/docs/middleware\n //\n const middleware = [\n // The offset middleware goes first\n offset({ mainAxis: this.distance, crossAxis: this.skidding })\n ];\n\n // First we sync width/height\n if (this.sync) {\n middleware.push(\n size({\n apply: ({ rects }) => {\n const syncWidth = this.sync === 'width' || this.sync === 'both';\n const syncHeight = this.sync === 'height' || this.sync === 'both';\n this.popup.style.width = syncWidth ? `${rects.reference.width}px` : '';\n this.popup.style.height = syncHeight ? `${rects.reference.height}px` : '';\n }\n })\n );\n } else {\n // Cleanup styles if we're not matching width/height\n this.popup.style.width = '';\n this.popup.style.height = '';\n }\n\n // Then we flip\n if (this.flip) {\n middleware.push(\n flip({\n boundary: this.flipBoundary,\n // @ts-expect-error - We're converting a string attribute to an array here\n fallbackPlacements: this.flipFallbackPlacements,\n fallbackStrategy: this.flipFallbackStrategy === 'best-fit' ? 'bestFit' : 'initialPlacement',\n padding: this.flipPadding\n })\n );\n }\n\n // Then we shift\n if (this.shift) {\n middleware.push(\n shift({\n boundary: this.shiftBoundary,\n padding: this.shiftPadding\n })\n );\n }\n\n // Now we adjust the size as needed\n if (this.autoSize) {\n middleware.push(\n size({\n boundary: this.autoSizeBoundary,\n padding: this.autoSizePadding,\n apply: ({ availableWidth, availableHeight }) => {\n if (this.autoSize === 'vertical' || this.autoSize === 'both') {\n this.style.setProperty('--auto-size-available-height', `${availableHeight}px`);\n } else {\n this.style.removeProperty('--auto-size-available-height');\n }\n\n if (this.autoSize === 'horizontal' || this.autoSize === 'both') {\n this.style.setProperty('--auto-size-available-width', `${availableWidth}px`);\n } else {\n this.style.removeProperty('--auto-size-available-width');\n }\n }\n })\n );\n } else {\n // Cleanup styles if we're no longer using auto-size\n this.style.removeProperty('--auto-size-available-width');\n this.style.removeProperty('--auto-size-available-height');\n }\n\n // Finally, we add an arrow\n if (this.arrow) {\n middleware.push(\n arrow({\n element: this.arrowEl,\n padding: this.arrowPadding\n })\n );\n }\n\n //\n // Use custom positioning logic if the strategy is absolute. Otherwise, fall back to the default logic.\n //\n // More info: https://github.com/synergy-design-system/synergy/issues/1135\n //\n const getOffsetParent =\n this.strategy === 'absolute'\n ? (element: Element) => platform.getOffsetParent(element, offsetParent)\n : platform.getOffsetParent;\n\n computePosition(this.anchorEl, this.popup, {\n placement: this.placement,\n middleware,\n strategy: this.strategy,\n platform: {\n ...platform,\n getOffsetParent\n }\n }).then(({ x, y, middlewareData, placement }) => {\n //\n // Even though we have our own localization utility, it uses different heuristics to determine RTL. Because of\n // that, we'll use the same approach that Floating UI uses.\n //\n // Source: https://github.com/floating-ui/floating-ui/blob/cb3b6ab07f95275730d3e6e46c702f8d4908b55c/packages/dom/src/utils/getDocumentRect.ts#L31\n //\n const isRtl = getComputedStyle(this).direction === 'rtl';\n const staticSide = { top: 'bottom', right: 'left', bottom: 'top', left: 'right' }[placement.split('-')[0]]!;\n\n this.setAttribute('data-current-placement', placement);\n\n Object.assign(this.popup.style, {\n left: `${x}px`,\n top: `${y}px`\n });\n\n if (this.arrow) {\n const arrowX = middlewareData.arrow!.x;\n const arrowY = middlewareData.arrow!.y;\n let top = '';\n let right = '';\n let bottom = '';\n let left = '';\n\n if (this.arrowPlacement === 'start') {\n // Start\n const value = typeof arrowX === 'number' ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : '';\n top = typeof arrowY === 'number' ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : '';\n right = isRtl ? value : '';\n left = isRtl ? '' : value;\n } else if (this.arrowPlacement === 'end') {\n // End\n const value = typeof arrowX === 'number' ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : '';\n right = isRtl ? '' : value;\n left = isRtl ? value : '';\n bottom = typeof arrowY === 'number' ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : '';\n } else if (this.arrowPlacement === 'center') {\n // Center\n left = typeof arrowX === 'number' ? `calc(50% - var(--arrow-size-diagonal))` : '';\n top = typeof arrowY === 'number' ? `calc(50% - var(--arrow-size-diagonal))` : '';\n } else {\n // Anchor (default)\n left = typeof arrowX === 'number' ? `${arrowX}px` : '';\n top = typeof arrowY === 'number' ? `${arrowY}px` : '';\n }\n\n Object.assign(this.arrowEl.style, {\n top,\n right,\n bottom,\n left,\n [staticSide]: 'calc(var(--arrow-size-diagonal) * -1)'\n });\n }\n });\n\n // Wait until the new position is drawn before updating the hover bridge, otherwise it can get out of sync\n requestAnimationFrame(() => this.updateHoverBridge());\n\n this.emit('syn-reposition');\n }\n\n private updateHoverBridge = () => {\n if (this.hoverBridge && this.anchorEl) {\n const anchorRect = this.anchorEl.getBoundingClientRect();\n const popupRect = this.popup.getBoundingClientRect();\n const isVertical = this.placement.includes('top') || this.placement.includes('bottom');\n let topLeftX = 0;\n let topLeftY = 0;\n let topRightX = 0;\n let topRightY = 0;\n let bottomLeftX = 0;\n let bottomLeftY = 0;\n let bottomRightX = 0;\n let bottomRightY = 0;\n\n if (isVertical) {\n if (anchorRect.top < popupRect.top) {\n // Anchor is above\n topLeftX = anchorRect.left;\n topLeftY = anchorRect.bottom;\n topRightX = anchorRect.right;\n topRightY = anchorRect.bottom;\n\n bottomLeftX = popupRect.left;\n bottomLeftY = popupRect.top;\n bottomRightX = popupRect.right;\n bottomRightY = popupRect.top;\n } else {\n // Anchor is below\n topLeftX = popupRect.left;\n topLeftY = popupRect.bottom;\n topRightX = popupRect.right;\n topRightY = popupRect.bottom;\n\n bottomLeftX = anchorRect.left;\n bottomLeftY = anchorRect.top;\n bottomRightX = anchorRect.right;\n bottomRightY = anchorRect.top;\n }\n } else {\n if (anchorRect.left < popupRect.left) {\n // Anchor is on the left\n topLeftX = anchorRect.right;\n topLeftY = anchorRect.top;\n topRightX = popupRect.left;\n topRightY = popupRect.top;\n\n bottomLeftX = anchorRect.right;\n bottomLeftY = anchorRect.bottom;\n bottomRightX = popupRect.left;\n bottomRightY = popupRect.bottom;\n } else {\n // Anchor is on the right\n topLeftX = popupRect.right;\n topLeftY = popupRect.top;\n topRightX = anchorRect.left;\n topRightY = anchorRect.top;\n\n bottomLeftX = popupRect.right;\n bottomLeftY = popupRect.bottom;\n bottomRightX = anchorRect.left;\n bottomRightY = anchorRect.bottom;\n }\n }\n\n this.style.setProperty('--hover-bridge-top-left-x', `${topLeftX}px`);\n this.style.setProperty('--hover-bridge-top-left-y', `${topLeftY}px`);\n this.style.setProperty('--hover-bridge-top-right-x', `${topRightX}px`);\n this.style.setProperty('--hover-bridge-top-right-y', `${topRightY}px`);\n this.style.setProperty('--hover-bridge-bottom-left-x', `${bottomLeftX}px`);\n this.style.setProperty('--hover-bridge-bottom-left-y', `${bottomLeftY}px`);\n this.style.setProperty('--hover-bridge-bottom-right-x', `${bottomRightX}px`);\n this.style.setProperty('--hover-bridge-bottom-right-y', `${bottomRightY}px`);\n }\n };\n\n render() {\n return html`\n <slot name=\"anchor\" @slotchange=${this.handleAnchorChange}></slot>\n\n <span\n part=\"hover-bridge\"\n class=${classMap({\n 'popup-hover-bridge': true,\n 'popup-hover-bridge--visible': this.hoverBridge && this.active\n })}\n ></span>\n\n <div\n part=\"popup\"\n class=${classMap({\n popup: true,\n 'popup--active': this.active,\n 'popup--fixed': this.strategy === 'fixed',\n 'popup--has-arrow': this.arrow\n })}\n >\n <slot></slot>\n ${this.arrow ? html`<div part=\"arrow\" class=\"popup__arrow\" role=\"presentation\"></div>` : ''}\n </div>\n `;\n }\n}\n"],
5
+ "mappings": "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",
6
+ "names": []
7
+ }