@sellmate/design-system 1.0.21 → 1.0.23

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 (222) hide show
  1. package/dist/cjs/app-globals-V2Kpy_OQ.js +5 -0
  2. package/dist/cjs/{select-keyboard-navigation-CtstKOb3.js → base-dropdown-event-BTPlZ1KF.js} +0 -38
  3. package/dist/cjs/component.button-C6xBMwHf.js +115 -0
  4. package/dist/cjs/design-system.cjs.js +4 -3
  5. package/dist/cjs/{index-D-PnW6jc.js → index-Qvv0fGgj.js} +9 -117
  6. package/dist/cjs/loader.cjs.js +4 -3
  7. package/dist/cjs/sd-badge.cjs.entry.js +2 -2
  8. package/dist/cjs/sd-button-v2.cjs.entry.js +86 -0
  9. package/dist/cjs/sd-button-v2.config-BK45EPK_.js +203 -0
  10. package/dist/cjs/sd-button_21.cjs.entry.js +121 -67
  11. package/dist/cjs/sd-card.cjs.entry.js +2 -2
  12. package/dist/cjs/sd-date-picker.cjs.entry.js +2 -2
  13. package/dist/cjs/sd-dropdown-button.cjs.entry.js +274 -0
  14. package/dist/cjs/sd-file-picker.cjs.entry.js +4 -4
  15. package/dist/cjs/sd-form.cjs.entry.js +1 -1
  16. package/dist/cjs/sd-guide.cjs.entry.js +3 -3
  17. package/dist/cjs/sd-popover.cjs.entry.js +4 -4
  18. package/dist/cjs/sd-progress.cjs.entry.js +3 -3
  19. package/dist/cjs/sd-radio-button-group.cjs.entry.js +1 -1
  20. package/dist/cjs/sd-radio-group.cjs.entry.js +1 -1
  21. package/dist/cjs/sd-select-multiple-group.cjs.entry.js +4 -3
  22. package/dist/cjs/sd-select-multiple.cjs.entry.js +5 -4
  23. package/dist/cjs/sd-select-option-group.cjs.entry.js +4 -4
  24. package/dist/cjs/sd-tabs.cjs.entry.js +7 -9
  25. package/dist/cjs/sd-tag.cjs.entry.js +96 -38
  26. package/dist/cjs/sd-toast.cjs.entry.js +3 -3
  27. package/dist/cjs/sd-toggle-button.cjs.entry.js +2 -2
  28. package/dist/cjs/sd-toggle.cjs.entry.js +2 -2
  29. package/dist/cjs/select-keyboard-navigation-s2wP37xZ.js +40 -0
  30. package/dist/cjs/{tooltipArrow-CMyNLSC-.js → tooltipArrow-Mb2Dhc7T.js} +1 -1
  31. package/dist/collection/collection-manifest.json +4 -2
  32. package/dist/collection/components/sd-badge/sd-badge.js +1 -1
  33. package/dist/collection/components/sd-button-v2/sd-button-v2.config.js +190 -0
  34. package/dist/collection/components/sd-button-v2/sd-button-v2.css +120 -0
  35. package/dist/collection/components/sd-button-v2/sd-button-v2.js +249 -0
  36. package/dist/collection/components/sd-card/sd-card.js +1 -1
  37. package/dist/collection/components/sd-date-picker/sd-date-picker.js +1 -1
  38. package/dist/collection/components/sd-date-range-picker/sd-date-range-picker.js +2 -2
  39. package/dist/collection/components/sd-dropdown-button/sd-dropdown-button.config.js +62 -0
  40. package/dist/collection/components/sd-dropdown-button/sd-dropdown-button.css +171 -0
  41. package/dist/collection/components/sd-dropdown-button/sd-dropdown-button.js +384 -0
  42. package/dist/collection/components/sd-field/sd-field.js +3 -3
  43. package/dist/collection/components/sd-file-picker/sd-file-picker.js +3 -3
  44. package/dist/collection/components/sd-floating-portal/sd-floating-portal.js +1 -1
  45. package/dist/collection/components/sd-guide/sd-guide.js +2 -2
  46. package/dist/collection/components/sd-icon/sd-icon.js +1 -1
  47. package/dist/collection/components/sd-input/sd-input.js +1 -1
  48. package/dist/collection/components/sd-loading-spinner/sd-loading-spinner.js +1 -1
  49. package/dist/collection/components/sd-number-input/sd-number-input.js +4 -4
  50. package/dist/collection/components/sd-pagination/sd-pagination.js +2 -2
  51. package/dist/collection/components/sd-popover/sd-popover.js +2 -2
  52. package/dist/collection/components/sd-portal/sd-portal.js +89 -19
  53. package/dist/collection/components/sd-progress/sd-progress.js +2 -2
  54. package/dist/collection/components/sd-select/sd-select-dropdown/sd-select-dropdown.js +2 -2
  55. package/dist/collection/components/sd-select/sd-select-option/sd-select-option.js +1 -1
  56. package/dist/collection/components/sd-select/sd-select-search-input/sd-select-search-input.js +3 -3
  57. package/dist/collection/components/sd-select-multiple/sd-select-multiple.js +1 -1
  58. package/dist/collection/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.js +3 -3
  59. package/dist/collection/components/sd-tabs/sd-tabs.js +6 -8
  60. package/dist/collection/components/sd-tag/sd-tag.config.js +70 -0
  61. package/dist/collection/components/sd-tag/sd-tag.css +26 -56
  62. package/dist/collection/components/sd-tag/sd-tag.js +51 -104
  63. package/dist/collection/components/sd-textarea/sd-textarea.js +2 -2
  64. package/dist/collection/components/sd-toast/sd-toast.js +2 -2
  65. package/dist/collection/components/sd-toggle/sd-toggle.js +1 -1
  66. package/dist/collection/components/sd-toggle-button/sd-toggle-button.js +1 -1
  67. package/dist/components/index.js +1 -1
  68. package/dist/components/{p-DdOM8yc2.js → p-2FdkYfts.js} +1 -1
  69. package/dist/components/{p-CWg2auF3.js → p-B1o7vc2v.js} +1 -1
  70. package/dist/components/p-B1vJXa29.js +1 -0
  71. package/dist/components/p-BFO8hHjW.js +1 -0
  72. package/dist/components/{p-CbQobmaB.js → p-BKTfQGcR.js} +1 -1
  73. package/dist/components/{p-D0U1cMbs.js → p-BNuWMSR_.js} +1 -1
  74. package/dist/components/{p-B-UC5tW2.js → p-BxXKe48B.js} +1 -1
  75. package/dist/components/p-CAZeEBeS.js +1 -0
  76. package/dist/components/{p-D35gOcGh.js → p-CDzGasXW.js} +1 -1
  77. package/dist/components/{p-MmKik3mL.js → p-CVvYLd5J.js} +1 -1
  78. package/dist/components/{p-CU5TiEeI.js → p-CdCMe4bN.js} +1 -1
  79. package/dist/components/{p-rn5S2icF.js → p-CwM24aVj.js} +1 -1
  80. package/dist/components/p-Cy6HMEsK.js +1 -0
  81. package/dist/components/{p-BVFlD1Lp.js → p-CzHa12Ax.js} +1 -1
  82. package/dist/components/{p-Cef06v8S.js → p-Czq-8oT7.js} +1 -1
  83. package/dist/components/{p-DdNQILvd.js → p-D-ian_bu.js} +1 -1
  84. package/dist/components/{p-qSu-ayDy.js → p-D9mJxIjm.js} +1 -1
  85. package/dist/components/{p-J-Yn0oS3.js → p-DYoNy5I7.js} +1 -1
  86. package/dist/components/p-Dc4UTGgQ.js +1 -0
  87. package/dist/components/p-Dun2lZmi.js +1 -0
  88. package/dist/components/{p-C1XPuuO-.js → p-G4t0nGLP.js} +1 -1
  89. package/dist/components/p-NAapFxTw.js +1 -0
  90. package/dist/components/p-VKF2AWs1.js +1 -0
  91. package/dist/components/{p-C0yQ73oI.js → p-hfbNb5UF.js} +1 -1
  92. package/dist/components/sd-badge.js +1 -1
  93. package/dist/components/sd-button-v2.d.ts +11 -0
  94. package/dist/components/sd-button-v2.js +1 -0
  95. package/dist/components/sd-button.js +1 -1
  96. package/dist/components/sd-card.js +1 -1
  97. package/dist/components/sd-checkbox.js +1 -1
  98. package/dist/components/sd-date-box.js +1 -1
  99. package/dist/components/sd-date-picker.js +1 -1
  100. package/dist/components/sd-date-range-picker.js +1 -1
  101. package/dist/components/sd-dropdown-button.d.ts +11 -0
  102. package/dist/components/sd-dropdown-button.js +1 -0
  103. package/dist/components/sd-field.js +1 -1
  104. package/dist/components/sd-file-picker.js +1 -1
  105. package/dist/components/sd-floating-portal.js +1 -1
  106. package/dist/components/sd-form.js +1 -1
  107. package/dist/components/sd-guide.js +1 -1
  108. package/dist/components/sd-icon.js +1 -1
  109. package/dist/components/sd-input.js +1 -1
  110. package/dist/components/sd-loading-spinner.js +1 -1
  111. package/dist/components/sd-modal-card.js +1 -1
  112. package/dist/components/sd-number-input.js +1 -1
  113. package/dist/components/sd-pagination.js +1 -1
  114. package/dist/components/sd-popover.js +1 -1
  115. package/dist/components/sd-portal.js +1 -1
  116. package/dist/components/sd-progress.js +1 -1
  117. package/dist/components/sd-radio-button-group.js +1 -1
  118. package/dist/components/sd-radio-group.js +1 -1
  119. package/dist/components/sd-radio.js +1 -1
  120. package/dist/components/sd-select-dropdown.js +1 -1
  121. package/dist/components/sd-select-multiple-group.js +1 -1
  122. package/dist/components/sd-select-multiple.js +1 -1
  123. package/dist/components/sd-select-option-group.js +1 -1
  124. package/dist/components/sd-select-option.js +1 -1
  125. package/dist/components/sd-select-search-input.js +1 -1
  126. package/dist/components/sd-select.js +1 -1
  127. package/dist/components/sd-table.js +1 -1
  128. package/dist/components/sd-tabs.js +1 -1
  129. package/dist/components/sd-tag.js +1 -1
  130. package/dist/components/sd-textarea.js +1 -1
  131. package/dist/components/sd-toast.js +1 -1
  132. package/dist/components/sd-toggle-button.js +1 -1
  133. package/dist/components/sd-toggle.js +1 -1
  134. package/dist/components/sd-tooltip.js +1 -1
  135. package/dist/design-system/design-system.esm.js +1 -1
  136. package/dist/design-system/{p-3d03b19e.entry.js → p-02c5ab69.entry.js} +1 -1
  137. package/dist/design-system/{p-3301c280.entry.js → p-1b80635f.entry.js} +1 -1
  138. package/dist/design-system/p-285cc646.entry.js +1 -0
  139. package/dist/design-system/{p-8fde8570.entry.js → p-3565f871.entry.js} +1 -1
  140. package/dist/design-system/{p-0406b7f9.entry.js → p-5032c700.entry.js} +1 -1
  141. package/dist/design-system/{p-d6b38732.entry.js → p-5094848f.entry.js} +1 -1
  142. package/dist/design-system/p-59a52297.entry.js +1 -0
  143. package/dist/design-system/p-712c1ef1.entry.js +1 -0
  144. package/dist/design-system/{p-3e07e92a.entry.js → p-83f320e6.entry.js} +1 -1
  145. package/dist/design-system/{p-32c27eca.entry.js → p-8b013328.entry.js} +1 -1
  146. package/dist/design-system/{p-d021a375.entry.js → p-9563ffe1.entry.js} +1 -1
  147. package/dist/design-system/p-B8tGP77V.js +2 -0
  148. package/dist/design-system/p-BeCHKP_I.js +1 -0
  149. package/dist/design-system/p-CRdYeSBK.js +1 -0
  150. package/dist/design-system/p-DQuL1Twl.js +1 -0
  151. package/dist/design-system/p-Dc4UTGgQ.js +1 -0
  152. package/dist/design-system/p-VKF2AWs1.js +1 -0
  153. package/dist/design-system/p-a3025f1f.entry.js +1 -0
  154. package/dist/design-system/p-b1e45f3f.entry.js +1 -0
  155. package/dist/design-system/{p-d344fa9d.entry.js → p-c0655cd1.entry.js} +1 -1
  156. package/dist/design-system/p-d8a141e7.entry.js +1 -0
  157. package/dist/design-system/p-df3d3a2a.entry.js +1 -0
  158. package/dist/design-system/{p-8f99cd66.entry.js → p-e6d84ecf.entry.js} +1 -1
  159. package/dist/design-system/p-e7d7ceb4.entry.js +1 -0
  160. package/dist/design-system/{p-646ed990.entry.js → p-ea26b8e9.entry.js} +1 -1
  161. package/dist/design-system/p-f1b31194.entry.js +1 -0
  162. package/dist/design-system/p-f81d3798.entry.js +1 -0
  163. package/dist/design-system/p-xxEHPVkL.js +1 -0
  164. package/dist/esm/app-globals-DQuL1Twl.js +3 -0
  165. package/dist/esm/{select-keyboard-navigation-D8-D-mJX.js → base-dropdown-event-CRdYeSBK.js} +1 -37
  166. package/dist/esm/component.button-Dc4UTGgQ.js +113 -0
  167. package/dist/esm/design-system.js +4 -3
  168. package/dist/esm/{index-C_an1PQ3.js → index-B8tGP77V.js} +10 -117
  169. package/dist/esm/loader.js +4 -3
  170. package/dist/esm/sd-badge.entry.js +2 -2
  171. package/dist/esm/sd-button-v2.config-BWmcscrt.js +193 -0
  172. package/dist/esm/sd-button-v2.entry.js +84 -0
  173. package/dist/esm/sd-button_21.entry.js +116 -62
  174. package/dist/esm/sd-card.entry.js +2 -2
  175. package/dist/esm/sd-date-picker.entry.js +2 -2
  176. package/dist/esm/sd-dropdown-button.entry.js +272 -0
  177. package/dist/esm/sd-file-picker.entry.js +4 -4
  178. package/dist/esm/sd-form.entry.js +1 -1
  179. package/dist/esm/sd-guide.entry.js +3 -3
  180. package/dist/esm/sd-popover.entry.js +4 -4
  181. package/dist/esm/sd-progress.entry.js +3 -3
  182. package/dist/esm/sd-radio-button-group.entry.js +1 -1
  183. package/dist/esm/sd-radio-group.entry.js +1 -1
  184. package/dist/esm/sd-select-multiple-group.entry.js +3 -2
  185. package/dist/esm/sd-select-multiple.entry.js +4 -3
  186. package/dist/esm/sd-select-option-group.entry.js +4 -4
  187. package/dist/esm/sd-tabs.entry.js +7 -9
  188. package/dist/esm/sd-tag.entry.js +96 -38
  189. package/dist/esm/sd-toast.entry.js +3 -3
  190. package/dist/esm/sd-toggle-button.entry.js +2 -2
  191. package/dist/esm/sd-toggle.entry.js +2 -2
  192. package/dist/esm/select-keyboard-navigation-xxEHPVkL.js +37 -0
  193. package/dist/esm/{tooltipArrow-BTp0AVR2.js → tooltipArrow-Pdc3NIc9.js} +1 -1
  194. package/dist/types/components/sd-button-v2/sd-button-v2.config.d.ts +178 -0
  195. package/dist/types/components/sd-button-v2/sd-button-v2.d.ts +18 -0
  196. package/dist/types/components/sd-dropdown-button/sd-dropdown-button.config.d.ts +55 -0
  197. package/dist/types/components/sd-dropdown-button/sd-dropdown-button.d.ts +34 -0
  198. package/dist/types/components/sd-portal/sd-portal.d.ts +9 -0
  199. package/dist/types/components/sd-tabs/sd-tabs.d.ts +1 -1
  200. package/dist/types/components/sd-tag/sd-tag.config.d.ts +23 -0
  201. package/dist/types/components/sd-tag/sd-tag.d.ts +6 -10
  202. package/dist/types/components.d.ts +168 -27
  203. package/dist/types/index.d.ts +2 -0
  204. package/hydrate/index.js +1069 -755
  205. package/hydrate/index.mjs +1069 -755
  206. package/package.json +2 -2
  207. package/dist/components/p-B82gJZ4z.js +0 -1
  208. package/dist/components/p-C6J-ZZxF.js +0 -1
  209. package/dist/components/p-CDehvEQ5.js +0 -1
  210. package/dist/components/p-CHAh-_qx.js +0 -1
  211. package/dist/components/p-CaEyReID.js +0 -1
  212. package/dist/design-system/p-103de692.entry.js +0 -1
  213. package/dist/design-system/p-3edd59b5.entry.js +0 -1
  214. package/dist/design-system/p-55c13597.entry.js +0 -1
  215. package/dist/design-system/p-679e4367.entry.js +0 -1
  216. package/dist/design-system/p-822233ee.entry.js +0 -1
  217. package/dist/design-system/p-Bak0zfmv.js +0 -1
  218. package/dist/design-system/p-C_an1PQ3.js +0 -2
  219. package/dist/design-system/p-D8-D-mJX.js +0 -1
  220. package/dist/design-system/p-ab3b6f63.entry.js +0 -1
  221. package/dist/design-system/p-de339565.entry.js +0 -1
  222. package/dist/design-system/p-fc0e636b.entry.js +0 -1
package/hydrate/index.js CHANGED
@@ -132,7 +132,7 @@ function hydrateFactory($stencilWindow, $stencilHydrateOpts, $stencilHydrateResu
132
132
 
133
133
 
134
134
  const NAMESPACE = 'design-system';
135
- const BUILD = /* design-system */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", slotRelocation: true, state: true, updatable: true};
135
+ const BUILD = /* design-system */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", shadowDom: false, slotRelocation: true, state: true, updatable: true};
136
136
 
137
137
  const globalStyles = ":root{--color-primary:#051D36;--sd-primary:#051D36;--color-secondary:#555555;--sd-secondary:#555555;--color-accent:#9C27B0;--sd-accent:#9C27B0;--color-positive:#0075FF;--sd-positive:#0075FF;--color-negative:#E30000;--sd-negative:#E30000;--color-info:#00CD52;--sd-info:#00CD52;--color-warning:#F2C037;--sd-warning:#F2C037;--color-caution_bg:#FEF1F1;--sd-caution_bg:#FEF1F1;--color-caution_icon:#FD9595;--sd-caution_icon:#FD9595;--color-header_alert:#FF7A00;--sd-header_alert:#FF7A00;--color-black:#000000;--sd-black:#000000;--color-grey_10:#F6F6F6;--sd-grey_10:#F6F6F6;--color-grey_20:#EEEEEE;--sd-grey_20:#EEEEEE;--color-grey_25:#E5E5E5;--sd-grey_25:#E5E5E5;--color-grey_30:#E1E1E1;--sd-grey_30:#E1E1E1;--color-grey_35:#D8D8D8;--sd-grey_35:#D8D8D8;--color-grey_45:#CCCCCC;--sd-grey_45:#CCCCCC;--color-grey_50:#BBBBBB;--sd-grey_50:#BBBBBB;--color-grey_55:#AAAAAA;--sd-grey_55:#AAAAAA;--color-grey_60:#999999;--sd-grey_60:#999999;--color-grey_65:#888888;--sd-grey_65:#888888;--color-grey_70:#737373;--sd-grey_70:#737373;--color-grey_80:#555555;--sd-grey_80:#555555;--color-grey_85:#444444;--sd-grey_85:#444444;--color-grey_90:#333333;--sd-grey_90:#333333;--color-grey_95:#222222;--sd-grey_95:#222222;--color-grey_05:#F9F9F9;--sd-grey_05:#F9F9F9;--color-white:#FFFFFF;--sd-white:#FFFFFF;--color-red_15:#FCEFEF;--sd-red_15:#FCEFEF;--color-red_20:#FCE6E6;--sd-red_20:#FCE6E6;--color-red_30:#FFD3D3;--sd-red_30:#FFD3D3;--color-red_45:#FFB5B5;--sd-red_45:#FFB5B5;--color-red_60:#FF7C7C;--sd-red_60:#FF7C7C;--color-red_70:#FB4444;--sd-red_70:#FB4444;--color-red_75:#E30000;--sd-red_75:#E30000;--color-red_80:#AD0000;--sd-red_80:#AD0000;--color-red_85:#820000;--sd-red_85:#820000;--color-red_90:#5E0000;--sd-red_90:#5E0000;--color-red_95:#440000;--sd-red_95:#440000;--color-red_99:#220000;--sd-red_99:#220000;--color-orange_10:#FEF1EA;--sd-orange_10:#FEF1EA;--color-orange_20:#FFEAD7;--sd-orange_20:#FFEAD7;--color-orange_35:#FFD5AF;--sd-orange_35:#FFD5AF;--color-orange_45:#FFBC81;--sd-orange_45:#FFBC81;--color-orange_55:#FFA452;--sd-orange_55:#FFA452;--color-orange_60:#FF7F22;--sd-orange_60:#FF7F22;--color-orange_65:#FF6B00;--sd-orange_65:#FF6B00;--color-orange_75:#CE4900;--sd-orange_75:#CE4900;--color-orange_85:#9B3700;--sd-orange_85:#9B3700;--color-orange_90:#752A00;--sd-orange_90:#752A00;--color-orange_95:#4D1B00;--sd-orange_95:#4D1B00;--color-orange_99:#2F1100;--sd-orange_99:#2F1100;--color-yellow_10:#FFF7DD;--sd-yellow_10:#FFF7DD;--color-yellow_20:#FEF1C4;--sd-yellow_20:#FEF1C4;--color-yellow_25:#FFE99E;--sd-yellow_25:#FFE99E;--color-yellow_30:#FEE17C;--sd-yellow_30:#FEE17C;--color-yellow_40:#FFD643;--sd-yellow_40:#FFD643;--color-yellow_45:#FFC700;--sd-yellow_45:#FFC700;--color-yellow_50:#EBB110;--sd-yellow_50:#EBB110;--color-yellow_60:#CA9612;--sd-yellow_60:#CA9612;--color-yellow_70:#916C0D;--sd-yellow_70:#916C0D;--color-yellow_80:#6C5002;--sd-yellow_80:#6C5002;--color-yellow_90:#453602;--sd-yellow_90:#453602;--color-yellow_95:#322700;--sd-yellow_95:#322700;--color-olive_10:#FBFBBF;--sd-olive_10:#FBFBBF;--color-olive_15:#FAFAA1;--sd-olive_15:#FAFAA1;--color-olive_20:#F6F65F;--sd-olive_20:#F6F65F;--color-olive_30:#EEEE37;--sd-olive_30:#EEEE37;--color-olive_45:#DDDD12;--sd-olive_45:#DDDD12;--color-olive_55:#C7C700;--sd-olive_55:#C7C700;--color-olive_65:#A5A500;--sd-olive_65:#A5A500;--color-olive_70:#838300;--sd-olive_70:#838300;--color-olive_80:#636300;--sd-olive_80:#636300;--color-olive_90:#454500;--sd-olive_90:#454500;--color-olive_95:#2C2C00;--sd-olive_95:#2C2C00;--color-olive_05:#FEFED9;--sd-olive_05:#FEFED9;--color-green_15:#E8F9EF;--sd-green_15:#E8F9EF;--color-green_25:#D4FAE3;--sd-green_25:#D4FAE3;--color-green_45:#ACF4C9;--sd-green_45:#ACF4C9;--color-green_55:#6DE39C;--sd-green_55:#6DE39C;--color-green_65:#2BCE6C;--sd-green_65:#2BCE6C;--color-green_70:#12B553;--sd-green_70:#12B553;--color-green_75:#00973C;--sd-green_75:#00973C;--color-green_80:#007B31;--sd-green_80:#007B31;--color-green_85:#006629;--sd-green_85:#006629;--color-green_90:#00461C;--sd-green_90:#00461C;--color-green_95:#003013;--sd-green_95:#003013;--color-green_99:#001D0B;--sd-green_99:#001D0B;--color-steelblue_10:#ECF8FD;--sd-steelblue_10:#ECF8FD;--color-steelblue_25:#D9F2FD;--sd-steelblue_25:#D9F2FD;--color-steelblue_45:#A4E2FD;--sd-steelblue_45:#A4E2FD;--color-steelblue_60:#50BFF0;--sd-steelblue_60:#50BFF0;--color-steelblue_65:#229FD7;--sd-steelblue_65:#229FD7;--color-steelblue_70:#128FC7;--sd-steelblue_70:#128FC7;--color-steelblue_75:#066D9B;--sd-steelblue_75:#066D9B;--color-steelblue_80:#06587D;--sd-steelblue_80:#06587D;--color-steelblue_85:#033F59;--sd-steelblue_85:#033F59;--color-steelblue_90:#032D40;--sd-steelblue_90:#032D40;--color-steelblue_95:#02212F;--sd-steelblue_95:#02212F;--color-steelblue_99:#021A25;--sd-steelblue_99:#021A25;--color-oceanblue_15:#EAF5FE;--sd-oceanblue_15:#EAF5FE;--color-oceanblue_25:#D5EBFE;--sd-oceanblue_25:#D5EBFE;--color-oceanblue_50:#9CD1FC;--sd-oceanblue_50:#9CD1FC;--color-oceanblue_60:#5CB0F3;--sd-oceanblue_60:#5CB0F3;--color-oceanblue_65:#1F8AE1;--sd-oceanblue_65:#1F8AE1;--color-oceanblue_70:#006AC1;--sd-oceanblue_70:#006AC1;--color-oceanblue_75:#025497;--sd-oceanblue_75:#025497;--color-oceanblue_80:#004177;--sd-oceanblue_80:#004177;--color-oceanblue_85:#07284A;--sd-oceanblue_85:#07284A;--color-oceanblue_90:#051D36;--sd-oceanblue_90:#051D36;--color-oceanblue_95:#03172D;--sd-oceanblue_95:#03172D;--color-oceanblue_99:#011428;--sd-oceanblue_99:#011428;--color-brilliantblue_10:#EFF6FF;--sd-brilliantblue_10:#EFF6FF;--color-brilliantblue_20:#E6F1FF;--sd-brilliantblue_20:#E6F1FF;--color-brilliantblue_25:#D9EAFF;--sd-brilliantblue_25:#D9EAFF;--color-brilliantblue_40:#BBDAFF;--sd-brilliantblue_40:#BBDAFF;--color-brilliantblue_50:#93C4FF;--sd-brilliantblue_50:#93C4FF;--color-brilliantblue_60:#64ABFF;--sd-brilliantblue_60:#64ABFF;--color-brilliantblue_70:#2D8DFF;--sd-brilliantblue_70:#2D8DFF;--color-brilliantblue_75:#0075FF;--sd-brilliantblue_75:#0075FF;--color-brilliantblue_80:#005CC9;--sd-brilliantblue_80:#005CC9;--color-brilliantblue_85:#004290;--sd-brilliantblue_85:#004290;--color-brilliantblue_90:#002B5E;--sd-brilliantblue_90:#002B5E;--color-brilliantblue_95:#001B39;--sd-brilliantblue_95:#001B39;--color-brilliantblue_99:#001226;--sd-brilliantblue_99:#001226;--color-brilliantblue_05:#F5FAFF;--sd-brilliantblue_05:#F5FAFF;--sd-system-typography-control-xs-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-font-size:12px;--sd-system-typography-control-xs-font-weight:500;--sd-system-typography-control-xs-text-decoration:none;--sd-system-typography-control-sm-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-sm-font-size:12px;--sd-system-typography-control-sm-font-weight:500;--sd-system-typography-control-sm-text-decoration:none;--sd-system-typography-control-md-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-md-font-size:16px;--sd-system-typography-control-md-font-weight:500;--sd-system-typography-control-md-text-decoration:none;--sd-system-typography-control-lg-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-lg-font-size:18px;--sd-system-typography-control-lg-font-weight:500;--sd-system-typography-control-lg-text-decoration:none;--sd-system-size-control-xs-height:24px;--sd-system-size-control-sm-height:28px;--sd-system-size-control-md-height:34px;--sd-system-size-control-lg-height:62px;--sd-system-size-icon-xs:12px;--sd-system-size-icon-sm:16px;--sd-system-size-icon-md:20px;--sd-system-size-icon-lg:24px;--sd-system-space-control-xs-padding-x:8px;--sd-system-space-control-xs-gap:4px;--sd-system-space-control-sm-padding-x:12px;--sd-system-space-control-sm-gap:6px;--sd-system-space-control-md-padding-x:20px;--sd-system-space-control-md-gap:8px;--sd-system-space-control-lg-padding-x:28px;--sd-system-space-control-lg-gap:12px;--sd-system-radius-control-default:4px;--sd-system-border-width-control-default:1px;--sd-system-color-bg-screen:#EEEEEE;--sd-system-color-bg-frame:#FFFFFF;--sd-system-color-bg-brand:#025497;--sd-system-color-bg-subtle:#1F8AE1;--sd-system-color-bg-accent-default:#0075FF;--sd-system-color-bg-accent-light:#F5FAFF;--sd-system-color-bg-danger-default:#E30000;--sd-system-color-bg-danger-light:#FCEFEF;--sd-system-color-bg-warning:#FF6B00;--sd-system-color-bg-progress:#0075FF;--sd-system-color-bg-success-default:#00973C;--sd-system-color-bg-success-light:#12B553;--sd-system-color-text-primary:#222222;--sd-system-color-text-secondary:#333333;--sd-system-color-text-tertiary:#555555;--sd-system-color-text-quaternary:#888888;--sd-system-color-text-brand:#005CC9;--sd-system-color-text-subtle:#066D9B;--sd-system-color-text-accent:#0075FF;--sd-system-color-text-danger-default:#E30000;--sd-system-color-text-danger-light:#FB4444;--sd-system-color-text-warning:#FF6B00;--sd-system-color-text-inverse:#FFFFFF;--sd-system-color-link-accent:#006AC1;--sd-system-color-icon-brand:#025497;--sd-system-color-icon-accent:#0075FF;--sd-system-color-icon-danger:#E30000;--sd-system-color-icon-success:#00973C;--sd-system-color-icon-inverse:#FFFFFF;--sd-system-color-control-bg-disabled:#E1E1E1;--sd-system-color-control-border-disabled:#CCCCCC;--sd-system-color-control-content-disabled:#888888;--sd-button-xs-height:24px;--sd-button-xs-padding-x:8px;--sd-button-xs-gap:4px;--sd-button-xs-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-xs-typography-font-size:12px;--sd-button-xs-typography-font-weight:500;--sd-button-xs-typography-text-decoration:none;--sd-button-sm-height:28px;--sd-button-sm-padding-x:12px;--sd-button-sm-gap:6px;--sd-button-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-sm-typography-font-size:12px;--sd-button-sm-typography-font-weight:500;--sd-button-sm-typography-text-decoration:none;--sd-button-md-height:34px;--sd-button-md-padding-x:20px;--sd-button-md-gap:8px;--sd-button-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-md-typography-font-size:16px;--sd-button-md-typography-font-weight:500;--sd-button-md-typography-text-decoration:none;--sd-button-lg-height:62px;--sd-button-lg-padding-x:28px;--sd-button-lg-gap:12px;--sd-button-lg-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-lg-typography-font-size:18px;--sd-button-lg-typography-font-weight:500;--sd-button-lg-typography-text-decoration:none;--sd-button-size-xs-icon:12px;--sd-button-size-sm-icon:16px;--sd-button-size-md-icon:20px;--sd-button-size-lg-icon:24px;--sd-button-radius-default:4px;--sd-button-border-width-default:1px;--sd-button-border-disabled:#CCCCCC;--sd-button-label-xs-min-width:36px;--sd-button-label-sm-min-width:70px;--sd-button-label-md-min-width:100px;--sd-button-label-lg-min-width:120px;--sd-button-leading-icon-xs-min-width:60px;--sd-button-leading-icon-sm-min-width:70px;--sd-button-leading-icon-md-min-width:100px;--sd-button-leading-icon-lg-min-width:120px;--sd-button-dropdown-xs-min-width:60px;--sd-button-dropdown-sm-min-width:76px;--sd-button-dropdown-md-min-width:106px;--sd-button-icon-only-xs-width:24px;--sd-button-icon-only-sm-width:28px;--sd-button-icon-only-md-width:34px;--sd-button-icon-only-lg-width:62px;--sd-button-bg-disabled:#E1E1E1;--sd-button-content-disabled:#888888;--sd-button-brand-strong-bg-default:#025497;--sd-button-brand-strong-bg-hover:#004177;--sd-button-brand-strong-content:#FFFFFF;--sd-button-brand-strong-dropdown-divider:#006AC1;--sd-button-brand-subtle-bg-default:#1F8AE1;--sd-button-brand-subtle-bg-hover:#006AC1;--sd-button-brand-subtle-content:#FFFFFF;--sd-button-brand-subtle-dropdown-divider:#5CB0F3;--sd-button-brand-outline-bg-default:#FFFFFF;--sd-button-brand-outline-bg-hover:#EAF5FE;--sd-button-brand-outline-border:#025497;--sd-button-brand-outline-content:#025497;--sd-button-neutral-subtle-bg-default:#FFFFFF;--sd-button-neutral-subtle-bg-hover:#EEEEEE;--sd-button-neutral-subtle-content:#333333;--sd-button-neutral-outline-bg-default:#FFFFFF;--sd-button-neutral-outline-bg-hover:#EEEEEE;--sd-button-neutral-outline-border:#888888;--sd-button-neutral-outline-content:#333333;--sd-button-danger-strong-bg-default:#E30000;--sd-button-danger-strong-bg-hover:#AD0000;--sd-button-danger-strong-content:#FFFFFF;--sd-button-danger-strong-dropdown-divider:#FF7C7C;--sd-button-danger-outline-bg-default:#FFFFFF;--sd-button-danger-outline-bg-hover:#FCEFEF;--sd-button-danger-outline-border:#E30000;--sd-button-danger-outline-content:#E30000}.bg-primary{background-color:var(--color-primary, #051d36)}.bg-secondary{background-color:var(--color-secondary, #555555)}.bg-accent{background-color:var(--color-accent, #9c27b0)}.bg-positive{background-color:var(--color-positive, #0075ff)}.bg-negative{background-color:var(--color-negative, #e30000)}.bg-info{background-color:var(--color-info, #00cd52)}.bg-warning{background-color:var(--color-warning, #f2c037)}.bg-red_99{background-color:var(--color-red_99, #220000)}.bg-red_95{background-color:var(--color-red_95, #440000)}.bg-red_90{background-color:var(--color-red_90, #5E0000)}.bg-red_85{background-color:var(--color-red_85, #820000)}.bg-red_80{background-color:var(--color-red_80, #AD0000)}.bg-red_75{background-color:var(--color-red_75, #E30000)}.bg-red_70{background-color:var(--color-red_70, #FB4444)}.bg-red_60{background-color:var(--color-red_60, #FF7C7C)}.bg-red_45{background-color:var(--color-red_45, #FFB5B5)}.bg-red_30{background-color:var(--color-red_30, #FFD3D3)}.bg-red_20{background-color:var(--color-red_20, #FCE6E6)}.bg-red_15{background-color:var(--color-red_15, #FCEFEF)}.bg-caution_bg{background-color:var(--color-caution_bg, #FEF1F1)}.bg-caution_icon{background-color:var(--color-caution_icon, #fd9595)}.bg-orange_99{background-color:var(--color-orange_99, #2F1100)}.bg-orange_95{background-color:var(--color-orange_95, #4D1B00)}.bg-orange_90{background-color:var(--color-orange_90, #752A00)}.bg-orange_85{background-color:var(--color-orange_85, #9B3700)}.bg-orange_75{background-color:var(--color-orange_75, #CE4900)}.bg-orange_65{background-color:var(--color-orange_65, #FF6B00)}.bg-orange_60{background-color:var(--color-orange_60, #FF7F22)}.bg-orange_55{background-color:var(--color-orange_55, #FFA452)}.bg-orange_45{background-color:var(--color-orange_45, #FFBC81)}.bg-orange_35{background-color:var(--color-orange_35, #FFD5AF)}.bg-orange_20{background-color:var(--color-orange_20, #FFEAD7)}.bg-orange_10{background-color:var(--color-orange_10, #FEF1EA)}.bg-header_alert{background-color:var(--color-header_alert, #FF7A00)}.bg-yellow_95{background-color:var(--color-yellow_95, #322700)}.bg-yellow_90{background-color:var(--color-yellow_90, #453702)}.bg-yellow_80{background-color:var(--color-yellow_80, #6C5602)}.bg-yellow_70{background-color:var(--color-yellow_70, #9C7A00)}.bg-yellow_60{background-color:var(--color-yellow_60, #C49900)}.bg-yellow_50{background-color:var(--color-yellow_50, #EBB800)}.bg-yellow_45{background-color:var(--color-yellow_45, #FFC700)}.bg-yellow_40{background-color:var(--color-yellow_40, #FFD643)}.bg-yellow_30{background-color:var(--color-yellow_30, #FEE17C)}.bg-yellow_25{background-color:var(--color-yellow_25, #FFE99E)}.bg-yellow_20{background-color:var(--color-yellow_20, #FEF1C4)}.bg-yellow_10{background-color:var(--color-yellow_10, #FFF7DD)}.bg-olive_95{background-color:var(--color-olive_95, #2C2C00)}.bg-olive_90{background-color:var(--color-olive_90, #454500)}.bg-olive_80{background-color:var(--color-olive_80, #636300)}.bg-olive_70{background-color:var(--color-olive_70, #838300)}.bg-olive_65{background-color:var(--color-olive_65, #A5A500)}.bg-olive_55{background-color:var(--color-olive_55, #C7C700)}.bg-olive_45{background-color:var(--color-olive_45, #DDDD12)}.bg-olive_30{background-color:var(--color-olive_30, #EEEE37)}.bg-olive_20{background-color:var(--color-olive_20, #F6F65F)}.bg-olive_15{background-color:var(--color-olive_15, #FAFAA1)}.bg-olive_10{background-color:var(--color-olive_10, #FBFBBF)}.bg-olive_05{background-color:var(--color-olive_05, #FEFED9)}.bg-green_99{background-color:var(--color-green_99, #001D0B)}.bg-green_95{background-color:var(--color-green_95, #003013)}.bg-green_90{background-color:var(--color-green_90, #00461C)}.bg-green_85{background-color:var(--color-green_85, #006629)}.bg-green_80{background-color:var(--color-green_80, #007B31)}.bg-green_75{background-color:var(--color-green_75, #00973C)}.bg-green_70{background-color:var(--color-green_70, #12B553)}.bg-green_65{background-color:var(--color-green_65, #2BCE6C)}.bg-green_55{background-color:var(--color-green_55, #6DE39C)}.bg-green_45{background-color:var(--color-green_45, #ACF4C9)}.bg-green_25{background-color:var(--color-green_25, #D4FAE3)}.bg-green_15{background-color:var(--color-green_15, #E8F9EF)}.bg-steelblue_99{background-color:var(--color-steelblue_99, #021a25)}.bg-steelblue_95{background-color:var(--color-steelblue_95, #02212f)}.bg-steelblue_90{background-color:var(--color-steelblue_90, #032d40)}.bg-steelblue_85{background-color:var(--color-steelblue_85, #033f59)}.bg-steelblue_80{background-color:var(--color-steelblue_80, #06587d)}.bg-steelblue_75{background-color:var(--color-steelblue_75, #066d9b)}.bg-steelblue_70{background-color:var(--color-steelblue_70, #128fc7)}.bg-steelblue_65{background-color:var(--color-steelblue_65, #229fd7)}.bg-steelblue_60{background-color:var(--color-steelblue_60, #50bff0)}.bg-steelblue_45{background-color:var(--color-steelblue_45, #a4e2fd)}.bg-steelblue_25{background-color:var(--color-steelblue_25, #d9f2fd)}.bg-steelblue_10{background-color:var(--color-steelblue_10, #ecf8fd)}.bg-oceanblue_99{background-color:var(--color-oceanblue_99, #011428)}.bg-oceanblue_95{background-color:var(--color-oceanblue_95, #03172d)}.bg-oceanblue_90{background-color:var(--color-oceanblue_90, #051d36)}.bg-oceanblue_85{background-color:var(--color-oceanblue_85, #07284a)}.bg-oceanblue_80{background-color:var(--color-oceanblue_80, #004177)}.bg-oceanblue_75{background-color:var(--color-oceanblue_75, #025497)}.bg-oceanblue_70{background-color:var(--color-oceanblue_70, #006ac1)}.bg-oceanblue_65{background-color:var(--color-oceanblue_65, #1f8ae1)}.bg-oceanblue_60{background-color:var(--color-oceanblue_60, #5cb0f3)}.bg-oceanblue_50{background-color:var(--color-oceanblue_50, #9cd1fc)}.bg-oceanblue_25{background-color:var(--color-oceanblue_25, #d5ebfe)}.bg-oceanblue_15{background-color:var(--color-oceanblue_15, #eaf5fe)}.bg-brilliantblue_99{background-color:var(--color-brilliantblue_99, #001226)}.bg-brilliantblue_95{background-color:var(--color-brilliantblue_95, #001b39)}.bg-brilliantblue_90{background-color:var(--color-brilliantblue_90, #002b5e)}.bg-brilliantblue_85{background-color:var(--color-brilliantblue_85, #004290)}.bg-brilliantblue_80{background-color:var(--color-brilliantblue_80, #005cc9)}.bg-brilliantblue_75{background-color:var(--color-brilliantblue_75, #0075ff)}.bg-brilliantblue_70{background-color:var(--color-brilliantblue_70, #2d8dff)}.bg-brilliantblue_60{background-color:var(--color-brilliantblue_60, #64abff)}.bg-brilliantblue_50{background-color:var(--color-brilliantblue_50, #93c4ff)}.bg-brilliantblue_40{background-color:var(--color-brilliantblue_40, #bbdaff)}.bg-brilliantblue_25{background-color:var(--color-brilliantblue_25, #d9eaff)}.bg-brilliantblue_20{background-color:var(--color-brilliantblue_20, #e6f1ff)}.bg-brilliantblue_10{background-color:var(--color-brilliantblue_10, #eff6ff)}.bg-brilliantblue_05{background-color:var(--color-brilliantblue_05, #f5faff)}.bg-grey_95{background-color:var(--color-grey_95, #222222)}.bg-grey_90{background-color:var(--color-grey_90, #333333)}.bg-grey_85{background-color:var(--color-grey_85, #444444)}.bg-grey_80{background-color:var(--color-grey_80, #555555)}.bg-grey_70{background-color:var(--color-grey_70, #737373)}.bg-grey_65{background-color:var(--color-grey_65, #888888)}.bg-grey_60{background-color:var(--color-grey_60, #999999)}.bg-grey_55{background-color:var(--color-grey_55, #aaaaaa)}.bg-grey_50{background-color:var(--color-grey_50, #bbbbbb)}.bg-grey_45{background-color:var(--color-grey_45, #cccccc)}.bg-grey_35{background-color:var(--color-grey_35, #D8D8D8)}.bg-grey_30{background-color:var(--color-grey_30, #e1e1e1)}.bg-grey_25{background-color:var(--color-grey_25, #E5E5E5)}.bg-grey_20{background-color:var(--color-grey_20, #eeeeee)}.bg-grey_10{background-color:var(--color-grey_10, #f6f6f6)}.bg-grey_05{background-color:var(--color-grey_05, #f9f9f9)}.bg-white{background-color:var(--color-white, #ffffff)}.bg-black{background-color:var(--color-black, #000000)}.text-primary{color:var(--color-primary, #051d36)}.text-secondary{color:var(--color-secondary, #555555)}.text-accent{color:var(--color-accent, #9c27b0)}.text-positive{color:var(--color-positive, #0075ff)}.text-negative{color:var(--color-negative, #e30000)}.text-info{color:var(--color-info, #00cd52)}.text-warning{color:var(--color-warning, #f2c037)}.text-red_99{color:var(--color-red_99, #220000)}.text-red_95{color:var(--color-red_95, #440000)}.text-red_90{color:var(--color-red_90, #5E0000)}.text-red_85{color:var(--color-red_85, #820000)}.text-red_80{color:var(--color-red_80, #AD0000)}.text-red_75{color:var(--color-red_75, #E30000)}.text-red_70{color:var(--color-red_70, #FB4444)}.text-red_60{color:var(--color-red_60, #FF7C7C)}.text-red_45{color:var(--color-red_45, #FFB5B5)}.text-red_30{color:var(--color-red_30, #FFD3D3)}.text-red_20{color:var(--color-red_20, #FCE6E6)}.text-red_15{color:var(--color-red_15, #FCEFEF)}.text-caution_bg{color:var(--color-caution_bg, #FEF1F1)}.text-caution_icon{color:var(--color-caution_icon, #fd9595)}.text-orange_99{color:var(--color-orange_99, #2F1100)}.text-orange_95{color:var(--color-orange_95, #4D1B00)}.text-orange_90{color:var(--color-orange_90, #752A00)}.text-orange_85{color:var(--color-orange_85, #9B3700)}.text-orange_75{color:var(--color-orange_75, #CE4900)}.text-orange_65{color:var(--color-orange_65, #FF6B00)}.text-orange_60{color:var(--color-orange_60, #FF7F22)}.text-orange_55{color:var(--color-orange_55, #FFA452)}.text-orange_45{color:var(--color-orange_45, #FFBC81)}.text-orange_35{color:var(--color-orange_35, #FFD5AF)}.text-orange_20{color:var(--color-orange_20, #FFEAD7)}.text-orange_10{color:var(--color-orange_10, #FEF1EA)}.text-header_alert{color:var(--color-header_alert, #FF7A00)}.text-yellow_95{color:var(--color-yellow_95, #322700)}.text-yellow_90{color:var(--color-yellow_90, #453702)}.text-yellow_80{color:var(--color-yellow_80, #6C5602)}.text-yellow_70{color:var(--color-yellow_70, #9C7A00)}.text-yellow_60{color:var(--color-yellow_60, #C49900)}.text-yellow_50{color:var(--color-yellow_50, #EBB800)}.text-yellow_45{color:var(--color-yellow_45, #FFC700)}.text-yellow_40{color:var(--color-yellow_40, #FFD643)}.text-yellow_30{color:var(--color-yellow_30, #FEE17C)}.text-yellow_25{color:var(--color-yellow_25, #FFE99E)}.text-yellow_20{color:var(--color-yellow_20, #FEF1C4)}.text-yellow_10{color:var(--color-yellow_10, #FFF7DD)}.text-olive_95{color:var(--color-olive_95, #2C2C00)}.text-olive_90{color:var(--color-olive_90, #454500)}.text-olive_80{color:var(--color-olive_80, #636300)}.text-olive_70{color:var(--color-olive_70, #838300)}.text-olive_65{color:var(--color-olive_65, #A5A500)}.text-olive_55{color:var(--color-olive_55, #C7C700)}.text-olive_45{color:var(--color-olive_45, #DDDD12)}.text-olive_30{color:var(--color-olive_30, #EEEE37)}.text-olive_20{color:var(--color-olive_20, #F6F65F)}.text-olive_15{color:var(--color-olive_15, #FAFAA1)}.text-olive_10{color:var(--color-olive_10, #FBFBBF)}.text-olive_05{color:var(--color-olive_05, #FEFED9)}.text-green_99{color:var(--color-green_99, #001D0B)}.text-green_95{color:var(--color-green_95, #003013)}.text-green_90{color:var(--color-green_90, #00461C)}.text-green_85{color:var(--color-green_85, #006629)}.text-green_80{color:var(--color-green_80, #007B31)}.text-green_75{color:var(--color-green_75, #00973C)}.text-green_70{color:var(--color-green_70, #12B553)}.text-green_65{color:var(--color-green_65, #2BCE6C)}.text-green_55{color:var(--color-green_55, #6DE39C)}.text-green_45{color:var(--color-green_45, #ACF4C9)}.text-green_25{color:var(--color-green_25, #D4FAE3)}.text-green_15{color:var(--color-green_15, #E8F9EF)}.text-steelblue_99{color:var(--color-steelblue_99, #021a25)}.text-steelblue_95{color:var(--color-steelblue_95, #02212f)}.text-steelblue_90{color:var(--color-steelblue_90, #032d40)}.text-steelblue_85{color:var(--color-steelblue_85, #033f59)}.text-steelblue_80{color:var(--color-steelblue_80, #06587d)}.text-steelblue_75{color:var(--color-steelblue_75, #066d9b)}.text-steelblue_70{color:var(--color-steelblue_70, #128fc7)}.text-steelblue_65{color:var(--color-steelblue_65, #229fd7)}.text-steelblue_60{color:var(--color-steelblue_60, #50bff0)}.text-steelblue_45{color:var(--color-steelblue_45, #a4e2fd)}.text-steelblue_25{color:var(--color-steelblue_25, #d9f2fd)}.text-steelblue_10{color:var(--color-steelblue_10, #ecf8fd)}.text-oceanblue_99{color:var(--color-oceanblue_99, #011428)}.text-oceanblue_95{color:var(--color-oceanblue_95, #03172d)}.text-oceanblue_90{color:var(--color-oceanblue_90, #051d36)}.text-oceanblue_85{color:var(--color-oceanblue_85, #07284a)}.text-oceanblue_80{color:var(--color-oceanblue_80, #004177)}.text-oceanblue_75{color:var(--color-oceanblue_75, #025497)}.text-oceanblue_70{color:var(--color-oceanblue_70, #006ac1)}.text-oceanblue_65{color:var(--color-oceanblue_65, #1f8ae1)}.text-oceanblue_60{color:var(--color-oceanblue_60, #5cb0f3)}.text-oceanblue_50{color:var(--color-oceanblue_50, #9cd1fc)}.text-oceanblue_25{color:var(--color-oceanblue_25, #d5ebfe)}.text-oceanblue_15{color:var(--color-oceanblue_15, #eaf5fe)}.text-brilliantblue_99{color:var(--color-brilliantblue_99, #001226)}.text-brilliantblue_95{color:var(--color-brilliantblue_95, #001b39)}.text-brilliantblue_90{color:var(--color-brilliantblue_90, #002b5e)}.text-brilliantblue_85{color:var(--color-brilliantblue_85, #004290)}.text-brilliantblue_80{color:var(--color-brilliantblue_80, #005cc9)}.text-brilliantblue_75{color:var(--color-brilliantblue_75, #0075ff)}.text-brilliantblue_70{color:var(--color-brilliantblue_70, #2d8dff)}.text-brilliantblue_60{color:var(--color-brilliantblue_60, #64abff)}.text-brilliantblue_50{color:var(--color-brilliantblue_50, #93c4ff)}.text-brilliantblue_40{color:var(--color-brilliantblue_40, #bbdaff)}.text-brilliantblue_25{color:var(--color-brilliantblue_25, #d9eaff)}.text-brilliantblue_20{color:var(--color-brilliantblue_20, #e6f1ff)}.text-brilliantblue_10{color:var(--color-brilliantblue_10, #eff6ff)}.text-brilliantblue_05{color:var(--color-brilliantblue_05, #f5faff)}.text-grey_95{color:var(--color-grey_95, #222222)}.text-grey_90{color:var(--color-grey_90, #333333)}.text-grey_85{color:var(--color-grey_85, #444444)}.text-grey_80{color:var(--color-grey_80, #555555)}.text-grey_70{color:var(--color-grey_70, #737373)}.text-grey_65{color:var(--color-grey_65, #888888)}.text-grey_60{color:var(--color-grey_60, #999999)}.text-grey_55{color:var(--color-grey_55, #aaaaaa)}.text-grey_50{color:var(--color-grey_50, #bbbbbb)}.text-grey_45{color:var(--color-grey_45, #cccccc)}.text-grey_35{color:var(--color-grey_35, #D8D8D8)}.text-grey_30{color:var(--color-grey_30, #e1e1e1)}.text-grey_25{color:var(--color-grey_25, #E5E5E5)}.text-grey_20{color:var(--color-grey_20, #eeeeee)}.text-grey_10{color:var(--color-grey_10, #f6f6f6)}.text-grey_05{color:var(--color-grey_05, #f9f9f9)}.text-white{color:var(--color-white, #ffffff)}.text-black{color:var(--color-black, #000000)}*,*::before,*::after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0}ul[role=list],ol[role=list]{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font-size:inherit}:target{scroll-margin-block:5ex}button{background:none;border:none;cursor:pointer;padding:0;outline:0}button:focus{outline:0 !important}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}input:autofill,input:autofill:hover,input:autofill:focus,input:autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}:host{display:inline-block;height:fit-content;line-height:0}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}input[type=text],input[type=number],input[type=password],input[type=email],input[type=tel],textarea{padding-block:0px;padding-inline:0px}.sd-hoverable:hover>.sd-focus-helper{background:currentColor;opacity:0.15}.sd-hoverable:hover>.sd-focus-helper:before{opacity:0.1}.sd-hoverable:hover>.sd-focus-helper:after{opacity:0.4}.sd-focus-helper{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;opacity:0;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before,.sd-focus-helper:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;border-radius:inherit;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.6s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before{background:#000000}.sd-focus-helper:after{background:#ffffff}";
138
138
 
@@ -742,7 +742,7 @@ var attachStyles = (hostRef) => {
742
742
  const flags = cmpMeta.$flags$;
743
743
  const endAttachStyles = createTime("attachStyles", cmpMeta.$tagName$);
744
744
  const scopeId2 = addStyle(
745
- elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(),
745
+ elm.getRootNode(),
746
746
  cmpMeta);
747
747
  if (flags & 10 /* needsScopedEncapsulation */) {
748
748
  elm["s-sc"] = scopeId2;
@@ -884,7 +884,7 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
884
884
  const childRenderNodes = [];
885
885
  const slotNodes = [];
886
886
  const slottedNodes = [];
887
- const shadowRootNodes = shadowRoot ? [] : null;
887
+ const shadowRootNodes = null;
888
888
  const vnode = newVNode(tagName, null);
889
889
  vnode.$elm$ = hostElm;
890
890
  let scopeId2;
@@ -1007,27 +1007,6 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
1007
1007
  slot.$elm$.parentElement.classList.add(scopeId2 + "-s");
1008
1008
  });
1009
1009
  }
1010
- if (shadowRoot && !shadowRoot.childNodes.length) {
1011
- let rnIdex = 0;
1012
- const rnLen = shadowRootNodes.length;
1013
- if (rnLen) {
1014
- for (rnIdex; rnIdex < rnLen; rnIdex++) {
1015
- const node = shadowRootNodes[rnIdex];
1016
- if (node) {
1017
- shadowRoot.appendChild(node);
1018
- }
1019
- }
1020
- Array.from(hostElm.childNodes).forEach((node) => {
1021
- if (typeof node["s-en"] !== "string" && typeof node["s-sn"] !== "string") {
1022
- if (node.nodeType === 1 /* ElementNode */ && node.slot && node.hidden) {
1023
- node.removeAttribute("hidden");
1024
- } else if (node.nodeType === 8 /* CommentNode */ && !node.nodeValue) {
1025
- node.parentNode.removeChild(node);
1026
- }
1027
- }
1028
- });
1029
- }
1030
- }
1031
1010
  hostRef.$hostElement$ = hostElm;
1032
1011
  endHydrate();
1033
1012
  };
@@ -1088,9 +1067,6 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
1088
1067
  parentVNode.$children$[childVNode.$index$] = childVNode;
1089
1068
  }
1090
1069
  parentVNode = childVNode;
1091
- if (shadowRootNodes && childVNode.$depth$ === "0") {
1092
- shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
1093
- }
1094
1070
  }
1095
1071
  }
1096
1072
  if (node.shadowRoot) {
@@ -1149,9 +1125,6 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
1149
1125
  }
1150
1126
  parentVNode.$children$[childVNode.$index$] = childVNode;
1151
1127
  }
1152
- if (shadowRootNodes && childVNode.$depth$ === "0") {
1153
- shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
1154
- }
1155
1128
  }
1156
1129
  } else if (childNodeType === COMMENT_NODE_ID) {
1157
1130
  childVNode.$elm$ = findCorrespondingNode(node, 8 /* CommentNode */);
@@ -1174,9 +1147,7 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
1174
1147
  slottedNodes
1175
1148
  );
1176
1149
  } else if (childNodeType === CONTENT_REF_ID) {
1177
- if (shadowRootNodes) {
1178
- node.remove();
1179
- } else {
1150
+ {
1180
1151
  hostElm["s-cr"] = node;
1181
1152
  node["s-cn"] = true;
1182
1153
  }
@@ -1238,22 +1209,7 @@ function addSlot(slotName, slotId, childVNode, node, parentVNode, childRenderNod
1238
1209
  childVNode.$name$ = slotName || null;
1239
1210
  childVNode.$tag$ = "slot";
1240
1211
  const parentNodeId = (parentVNode == null ? void 0 : parentVNode.$elm$) ? parentVNode.$elm$["s-id"] || parentVNode.$elm$.getAttribute("s-id") : "";
1241
- if (shadowRootNodes && win.document) {
1242
- const slot = childVNode.$elm$ = win.document.createElement(childVNode.$tag$);
1243
- if (childVNode.$name$) {
1244
- childVNode.$elm$.setAttribute("name", slotName);
1245
- }
1246
- if (parentVNode.$elm$.shadowRoot && parentNodeId && parentNodeId !== childVNode.$hostId$) {
1247
- internalCall(parentVNode.$elm$, "insertBefore")(slot, internalCall(parentVNode.$elm$, "children")[0]);
1248
- } else {
1249
- internalCall(internalCall(node, "parentNode"), "insertBefore")(slot, node);
1250
- }
1251
- addSlottedNodes(slottedNodes, slotId, slotName, node, childVNode.$hostId$);
1252
- node.remove();
1253
- if (childVNode.$depth$ === "0") {
1254
- shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
1255
- }
1256
- } else {
1212
+ {
1257
1213
  const slot = childVNode.$elm$;
1258
1214
  const shouldMove = parentNodeId && parentNodeId !== childVNode.$hostId$ && parentVNode.$elm$.shadowRoot;
1259
1215
  addSlottedNodes(slottedNodes, slotId, slotName, node, shouldMove ? parentNodeId : childVNode.$hostId$);
@@ -1290,417 +1246,6 @@ var findCorrespondingNode = (node, type) => {
1290
1246
  return sibling;
1291
1247
  };
1292
1248
 
1293
- // src/utils/regular-expression.ts
1294
- var escapeRegExpSpecialCharacters = (text) => {
1295
- return text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
1296
- };
1297
-
1298
- // src/utils/shadow-css.ts
1299
- /**
1300
- * @license
1301
- * Copyright Google Inc. All Rights Reserved.
1302
- *
1303
- * Use of this source code is governed by an MIT-style license that can be
1304
- * found in the LICENSE file at https://angular.io/license
1305
- *
1306
- * This file is a port of shadowCSS from `webcomponents.js` to TypeScript.
1307
- * https://github.com/webcomponents/webcomponentsjs/blob/4efecd7e0e/src/ShadowCSS/ShadowCSS.js
1308
- * https://github.com/angular/angular/blob/master/packages/compiler/src/shadow_css.ts
1309
- */
1310
- var safeSelector = (selector) => {
1311
- const placeholders = [];
1312
- let index = 0;
1313
- selector = selector.replace(/(\[\s*part~=\s*("[^"]*"|'[^']*')\s*\])/g, (_, keep) => {
1314
- const replaceBy = `__part-${index}__`;
1315
- placeholders.push(keep);
1316
- index++;
1317
- return replaceBy;
1318
- });
1319
- selector = selector.replace(/(\[[^\]]*\])/g, (_, keep) => {
1320
- const replaceBy = `__ph-${index}__`;
1321
- placeholders.push(keep);
1322
- index++;
1323
- return replaceBy;
1324
- });
1325
- const content = selector.replace(/(:nth-[-\w]+)(\([^)]+\))/g, (_, pseudo, exp) => {
1326
- const replaceBy = `__ph-${index}__`;
1327
- placeholders.push(exp);
1328
- index++;
1329
- return pseudo + replaceBy;
1330
- });
1331
- const ss = {
1332
- content,
1333
- placeholders
1334
- };
1335
- return ss;
1336
- };
1337
- var restoreSafeSelector = (placeholders, content) => {
1338
- content = content.replace(/__part-(\d+)__/g, (_, index) => placeholders[+index]);
1339
- return content.replace(/__ph-(\d+)__/g, (_, index) => placeholders[+index]);
1340
- };
1341
- var _polyfillHost = "-shadowcsshost";
1342
- var _polyfillSlotted = "-shadowcssslotted";
1343
- var _polyfillHostContext = "-shadowcsscontext";
1344
- var _parenSuffix = ")(?:\\(((?:\\([^)(]*\\)|[^)(]*)+?)\\))?([^,{]*)";
1345
- var _cssColonHostRe = new RegExp("(" + _polyfillHost + _parenSuffix, "gim");
1346
- var _cssColonHostContextRe = new RegExp("(" + _polyfillHostContext + _parenSuffix, "gim");
1347
- var _cssColonSlottedRe = new RegExp("(" + _polyfillSlotted + _parenSuffix, "gim");
1348
- var _polyfillHostNoCombinator = _polyfillHost + "-no-combinator";
1349
- var _polyfillHostNoCombinatorRe = /-shadowcsshost-no-combinator([^\s]*)/;
1350
- var _shadowDOMSelectorsRe = [/::shadow/g, /::content/g];
1351
- var _safePartRe = /__part-(\d+)__/g;
1352
- var _selectorReSuffix = "([>\\s~+[.,{:][\\s\\S]*)?$";
1353
- var _polyfillHostRe = /-shadowcsshost/gim;
1354
- var createSupportsRuleRe = (selector) => {
1355
- const safeSelector2 = escapeRegExpSpecialCharacters(selector);
1356
- return new RegExp(
1357
- // First capture group: match any context before the selector that's not inside @supports selector()
1358
- // Using negative lookahead to avoid matching inside @supports selector(...) condition
1359
- `(^|[^@]|@(?!supports\\s+selector\\s*\\([^{]*?${safeSelector2}))(${safeSelector2}\\b)`,
1360
- "g"
1361
- );
1362
- };
1363
- var _commentRe = /\/\*\s*[\s\S]*?\*\//g;
1364
- var stripComments = (input) => {
1365
- return input.replace(_commentRe, "");
1366
- };
1367
- var _commentWithHashRe = /\/\*\s*#\s*source(Mapping)?URL=[\s\S]+?\*\//g;
1368
- var extractCommentsWithHash = (input) => {
1369
- return input.match(_commentWithHashRe) || [];
1370
- };
1371
- var _ruleRe = /(\s*)([^;\{\}]+?)(\s*)((?:{%BLOCK%}?\s*;?)|(?:\s*;))/g;
1372
- var _curlyRe = /([{}])/g;
1373
- var _selectorPartsRe = /(^.*?[^\\])??((:+)(.*)|$)/;
1374
- var OPEN_CURLY = "{";
1375
- var CLOSE_CURLY = "}";
1376
- var BLOCK_PLACEHOLDER = "%BLOCK%";
1377
- var processRules = (input, ruleCallback) => {
1378
- const inputWithEscapedBlocks = escapeBlocks(input);
1379
- let nextBlockIndex = 0;
1380
- return inputWithEscapedBlocks.escapedString.replace(_ruleRe, (...m) => {
1381
- const selector = m[2];
1382
- let content = "";
1383
- let suffix = m[4];
1384
- let contentPrefix = "";
1385
- if (suffix && suffix.startsWith("{" + BLOCK_PLACEHOLDER)) {
1386
- content = inputWithEscapedBlocks.blocks[nextBlockIndex++];
1387
- suffix = suffix.substring(BLOCK_PLACEHOLDER.length + 1);
1388
- contentPrefix = "{";
1389
- }
1390
- const cssRule = {
1391
- selector,
1392
- content
1393
- };
1394
- const rule = ruleCallback(cssRule);
1395
- return `${m[1]}${rule.selector}${m[3]}${contentPrefix}${rule.content}${suffix}`;
1396
- });
1397
- };
1398
- var escapeBlocks = (input) => {
1399
- const inputParts = input.split(_curlyRe);
1400
- const resultParts = [];
1401
- const escapedBlocks = [];
1402
- let bracketCount = 0;
1403
- let currentBlockParts = [];
1404
- for (let partIndex = 0; partIndex < inputParts.length; partIndex++) {
1405
- const part = inputParts[partIndex];
1406
- if (part === CLOSE_CURLY) {
1407
- bracketCount--;
1408
- }
1409
- if (bracketCount > 0) {
1410
- currentBlockParts.push(part);
1411
- } else {
1412
- if (currentBlockParts.length > 0) {
1413
- escapedBlocks.push(currentBlockParts.join(""));
1414
- resultParts.push(BLOCK_PLACEHOLDER);
1415
- currentBlockParts = [];
1416
- }
1417
- resultParts.push(part);
1418
- }
1419
- if (part === OPEN_CURLY) {
1420
- bracketCount++;
1421
- }
1422
- }
1423
- if (currentBlockParts.length > 0) {
1424
- escapedBlocks.push(currentBlockParts.join(""));
1425
- resultParts.push(BLOCK_PLACEHOLDER);
1426
- }
1427
- const strEscapedBlocks = {
1428
- escapedString: resultParts.join(""),
1429
- blocks: escapedBlocks
1430
- };
1431
- return strEscapedBlocks;
1432
- };
1433
- var insertPolyfillHostInCssText = (cssText) => {
1434
- const supportsBlocks = [];
1435
- cssText = cssText.replace(/@supports\s+selector\s*\(\s*([^)]*)\s*\)/g, (_, selectorContent) => {
1436
- const placeholder = `__supports_${supportsBlocks.length}__`;
1437
- supportsBlocks.push(selectorContent);
1438
- return `@supports selector(${placeholder})`;
1439
- });
1440
- const _colonSlottedRe = createSupportsRuleRe("::slotted");
1441
- const _colonHostRe = createSupportsRuleRe(":host");
1442
- const _colonHostContextRe = createSupportsRuleRe(":host-context");
1443
- cssText = cssText.replace(_colonHostContextRe, `$1${_polyfillHostContext}`).replace(_colonHostRe, `$1${_polyfillHost}`).replace(_colonSlottedRe, `$1${_polyfillSlotted}`);
1444
- supportsBlocks.forEach((originalSelector, index) => {
1445
- cssText = cssText.replace(`__supports_${index}__`, originalSelector);
1446
- });
1447
- return cssText;
1448
- };
1449
- var convertColonRule = (cssText, regExp, partReplacer) => {
1450
- return cssText.replace(regExp, (...m) => {
1451
- if (m[2]) {
1452
- const parts = m[2].split(",");
1453
- const r = [];
1454
- for (let i2 = 0; i2 < parts.length; i2++) {
1455
- const p = parts[i2].trim();
1456
- if (!p) break;
1457
- r.push(partReplacer(_polyfillHostNoCombinator, p, m[3]));
1458
- }
1459
- return r.join(",");
1460
- } else {
1461
- return _polyfillHostNoCombinator + m[3];
1462
- }
1463
- });
1464
- };
1465
- var colonHostPartReplacer = (host, part, suffix) => {
1466
- return host + part.replace(_polyfillHost, "") + suffix;
1467
- };
1468
- var convertColonHost = (cssText) => {
1469
- return convertColonRule(cssText, _cssColonHostRe, colonHostPartReplacer);
1470
- };
1471
- var colonHostContextPartReplacer = (host, part, suffix) => {
1472
- if (part.indexOf(_polyfillHost) > -1) {
1473
- return colonHostPartReplacer(host, part, suffix);
1474
- } else {
1475
- return host + part + suffix + ", " + part + " " + host + suffix;
1476
- }
1477
- };
1478
- var convertColonSlotted = (cssText, slotScopeId) => {
1479
- const slotClass = "." + slotScopeId + " > ";
1480
- const selectors = [];
1481
- cssText = cssText.replace(_cssColonSlottedRe, (...m) => {
1482
- if (m[2]) {
1483
- const compound = m[2].trim();
1484
- const suffix = m[3];
1485
- const slottedSelector = slotClass + compound + suffix;
1486
- let prefixSelector = "";
1487
- for (let i2 = m[4] - 1; i2 >= 0; i2--) {
1488
- const char = m[5][i2];
1489
- if (char === "}" || char === ",") {
1490
- break;
1491
- }
1492
- prefixSelector = char + prefixSelector;
1493
- }
1494
- const orgSelector = (prefixSelector + slottedSelector).trim();
1495
- const addedSelector = `${prefixSelector.trimEnd()}${slottedSelector.trim()}`.trim();
1496
- if (orgSelector !== addedSelector) {
1497
- const updatedSelector = `${addedSelector}, ${orgSelector}`;
1498
- selectors.push({
1499
- orgSelector,
1500
- updatedSelector
1501
- });
1502
- }
1503
- return slottedSelector;
1504
- } else {
1505
- return _polyfillHostNoCombinator + m[3];
1506
- }
1507
- });
1508
- return {
1509
- selectors,
1510
- cssText
1511
- };
1512
- };
1513
- var convertColonHostContext = (cssText) => {
1514
- return convertColonRule(cssText, _cssColonHostContextRe, colonHostContextPartReplacer);
1515
- };
1516
- var convertShadowDOMSelectors = (cssText) => {
1517
- return _shadowDOMSelectorsRe.reduce((result, pattern) => result.replace(pattern, " "), cssText);
1518
- };
1519
- var makeScopeMatcher = (scopeSelector2) => {
1520
- const lre = /\[/g;
1521
- const rre = /\]/g;
1522
- scopeSelector2 = scopeSelector2.replace(lre, "\\[").replace(rre, "\\]");
1523
- return new RegExp("^(" + scopeSelector2 + ")" + _selectorReSuffix, "m");
1524
- };
1525
- var selectorNeedsScoping = (selector, scopeSelector2) => {
1526
- const re = makeScopeMatcher(scopeSelector2);
1527
- return !re.test(selector);
1528
- };
1529
- var injectScopingSelector = (selector, scopingSelector) => {
1530
- return selector.replace(_selectorPartsRe, (_, before = "", _colonGroup, colon = "", after = "") => {
1531
- return before + scopingSelector + colon + after;
1532
- });
1533
- };
1534
- var applySimpleSelectorScope = (selector, scopeSelector2, hostSelector) => {
1535
- _polyfillHostRe.lastIndex = 0;
1536
- if (_polyfillHostRe.test(selector)) {
1537
- const replaceBy = `.${hostSelector}`;
1538
- return selector.replace(_polyfillHostNoCombinatorRe, (_, selector2) => injectScopingSelector(selector2, replaceBy)).replace(_polyfillHostRe, replaceBy + " ");
1539
- }
1540
- return scopeSelector2 + " " + selector;
1541
- };
1542
- var applyStrictSelectorScope = (selector, scopeSelector2, hostSelector) => {
1543
- const isRe = /\[is=([^\]]*)\]/g;
1544
- scopeSelector2 = scopeSelector2.replace(isRe, (_, ...parts) => parts[0]);
1545
- const className = "." + scopeSelector2;
1546
- const _scopeSelectorPart = (p) => {
1547
- let scopedP = p.trim();
1548
- if (!scopedP) {
1549
- return "";
1550
- }
1551
- if (p.indexOf(_polyfillHostNoCombinator) > -1) {
1552
- scopedP = applySimpleSelectorScope(p, scopeSelector2, hostSelector);
1553
- } else {
1554
- const t = p.replace(_polyfillHostRe, "");
1555
- if (t.length > 0) {
1556
- scopedP = injectScopingSelector(t, className);
1557
- }
1558
- }
1559
- return scopedP;
1560
- };
1561
- const safeContent = safeSelector(selector);
1562
- selector = safeContent.content;
1563
- let scopedSelector = "";
1564
- let startIndex = 0;
1565
- let res;
1566
- const sep2 = /( |>|\+|~(?!=))(?=(?:[^()]*\([^()]*\))*[^()]*$)\s*/g;
1567
- const hasHost = selector.indexOf(_polyfillHostNoCombinator) > -1;
1568
- let shouldScope = !hasHost;
1569
- while ((res = sep2.exec(selector)) !== null) {
1570
- const separator = res[1];
1571
- const part2 = selector.slice(startIndex, res.index).trim();
1572
- shouldScope = shouldScope || part2.indexOf(_polyfillHostNoCombinator) > -1;
1573
- const scopedPart = shouldScope ? _scopeSelectorPart(part2) : part2;
1574
- scopedSelector += `${scopedPart} ${separator} `;
1575
- startIndex = sep2.lastIndex;
1576
- }
1577
- const part = selector.substring(startIndex);
1578
- shouldScope = !part.match(_safePartRe) && (shouldScope || part.indexOf(_polyfillHostNoCombinator) > -1);
1579
- scopedSelector += shouldScope ? _scopeSelectorPart(part) : part;
1580
- return restoreSafeSelector(safeContent.placeholders, scopedSelector);
1581
- };
1582
- var scopeSelector = (selector, scopeSelectorText, hostSelector, slotSelector) => {
1583
- return selector.split(",").map((shallowPart) => {
1584
- if (slotSelector && shallowPart.indexOf("." + slotSelector) > -1) {
1585
- return shallowPart.trim();
1586
- }
1587
- if (selectorNeedsScoping(shallowPart, scopeSelectorText)) {
1588
- return applyStrictSelectorScope(shallowPart, scopeSelectorText, hostSelector).trim();
1589
- } else {
1590
- return shallowPart.trim();
1591
- }
1592
- }).join(", ");
1593
- };
1594
- var scopeSelectors = (cssText, scopeSelectorText, hostSelector, slotSelector, commentOriginalSelector) => {
1595
- return processRules(cssText, (rule) => {
1596
- let selector = rule.selector;
1597
- let content = rule.content;
1598
- if (rule.selector[0] !== "@") {
1599
- selector = scopeSelector(rule.selector, scopeSelectorText, hostSelector, slotSelector);
1600
- } else if (rule.selector.startsWith("@media") || rule.selector.startsWith("@supports") || rule.selector.startsWith("@page") || rule.selector.startsWith("@document")) {
1601
- content = scopeSelectors(rule.content, scopeSelectorText, hostSelector, slotSelector);
1602
- }
1603
- const cssRule = {
1604
- selector: selector.replace(/\s{2,}/g, " ").trim(),
1605
- content
1606
- };
1607
- return cssRule;
1608
- });
1609
- };
1610
- var scopeCssText = (cssText, scopeId2, hostScopeId, slotScopeId, commentOriginalSelector) => {
1611
- cssText = insertPolyfillHostInCssText(cssText);
1612
- cssText = convertColonHost(cssText);
1613
- cssText = convertColonHostContext(cssText);
1614
- const slotted = convertColonSlotted(cssText, slotScopeId);
1615
- cssText = slotted.cssText;
1616
- cssText = convertShadowDOMSelectors(cssText);
1617
- if (scopeId2) {
1618
- cssText = scopeSelectors(cssText, scopeId2, hostScopeId, slotScopeId);
1619
- }
1620
- cssText = replaceShadowCssHost(cssText, hostScopeId);
1621
- cssText = cssText.replace(/>\s*\*\s+([^{, ]+)/gm, " $1 ");
1622
- return {
1623
- cssText: cssText.trim(),
1624
- // We need to replace the shadow CSS host string in each of these selectors since we created
1625
- // them prior to the replacement happening in the components CSS text.
1626
- slottedSelectors: slotted.selectors.map((ref) => ({
1627
- orgSelector: replaceShadowCssHost(ref.orgSelector, hostScopeId),
1628
- updatedSelector: replaceShadowCssHost(ref.updatedSelector, hostScopeId)
1629
- }))
1630
- };
1631
- };
1632
- var replaceShadowCssHost = (cssText, hostScopeId) => {
1633
- return cssText.replace(/-shadowcsshost-no-combinator/g, `.${hostScopeId}`);
1634
- };
1635
- var expandPartSelectors = (cssText) => {
1636
- const partSelectorRe = /([^\s,{][^,{]*?)::part\(\s*([^)]+?)\s*\)((?:[:.][^,{]*)*)/g;
1637
- return processRules(cssText, (rule) => {
1638
- if (rule.selector[0] === "@") {
1639
- return rule;
1640
- }
1641
- const selectors = rule.selector.split(",").map((sel) => {
1642
- const out = [sel.trim()];
1643
- let m;
1644
- while ((m = partSelectorRe.exec(sel)) !== null) {
1645
- const before = m[1].trimEnd();
1646
- const partNames = m[2].trim().split(/\s+/);
1647
- const after = m[3] || "";
1648
- const partAttr = partNames.flatMap((p) => {
1649
- if (!rule.selector.includes(`[part~="${p}"]`)) {
1650
- return [`[part~="${p}"]`];
1651
- }
1652
- return [];
1653
- }).join("");
1654
- const expanded = `${before} ${partAttr}${after}`;
1655
- if (!!partAttr && expanded !== sel.trim()) {
1656
- out.push(expanded);
1657
- }
1658
- }
1659
- return out.join(", ");
1660
- });
1661
- rule.selector = selectors.join(", ");
1662
- return rule;
1663
- });
1664
- };
1665
- var scopeCss = (cssText, scopeId2, commentOriginalSelector) => {
1666
- const hostScopeId = scopeId2 + "-h";
1667
- const slotScopeId = scopeId2 + "-s";
1668
- const commentsWithHash = extractCommentsWithHash(cssText);
1669
- cssText = stripComments(cssText);
1670
- const orgSelectors = [];
1671
- {
1672
- const processCommentedSelector = (rule) => {
1673
- const placeholder = `/*!@___${orgSelectors.length}___*/`;
1674
- const comment = `/*!@${rule.selector}*/`;
1675
- orgSelectors.push({ placeholder, comment });
1676
- rule.selector = placeholder + rule.selector;
1677
- return rule;
1678
- };
1679
- cssText = processRules(cssText, (rule) => {
1680
- if (rule.selector[0] !== "@") {
1681
- return processCommentedSelector(rule);
1682
- } else if (rule.selector.startsWith("@media") || rule.selector.startsWith("@supports") || rule.selector.startsWith("@page") || rule.selector.startsWith("@document")) {
1683
- rule.content = processRules(rule.content, processCommentedSelector);
1684
- return rule;
1685
- }
1686
- return rule;
1687
- });
1688
- }
1689
- const scoped = scopeCssText(cssText, scopeId2, hostScopeId, slotScopeId);
1690
- cssText = [scoped.cssText, ...commentsWithHash].join("\n");
1691
- {
1692
- orgSelectors.forEach(({ placeholder, comment }) => {
1693
- cssText = cssText.replace(placeholder, comment);
1694
- });
1695
- }
1696
- scoped.slottedSelectors.forEach((slottedSelector) => {
1697
- const regex = new RegExp(escapeRegExpSpecialCharacters(slottedSelector.orgSelector) + "(?=\\s*[,{]|$)", "g");
1698
- cssText = cssText.replace(regex, slottedSelector.updatedSelector);
1699
- });
1700
- cssText = expandPartSelectors(cssText);
1701
- return cssText;
1702
- };
1703
-
1704
1249
  // src/utils/remote-value.ts
1705
1250
  var RemoteValue = class _RemoteValue {
1706
1251
  /**
@@ -2186,9 +1731,6 @@ var putBackInOriginalLocation = (parentElm, recursive) => {
2186
1731
  var addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
2187
1732
  let containerElm = parentElm["s-cr"] && parentElm["s-cr"].parentNode || parentElm;
2188
1733
  let childNode;
2189
- if (containerElm.shadowRoot && containerElm.tagName === hostTagName) {
2190
- containerElm = containerElm.shadowRoot;
2191
- }
2192
1734
  if (parentVNode.$tag$ === "template") {
2193
1735
  containerElm = containerElm.content;
2194
1736
  }
@@ -2512,11 +2054,11 @@ var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
2512
2054
  rootVnode.$tag$ = null;
2513
2055
  rootVnode.$flags$ |= 4 /* isHost */;
2514
2056
  hostRef.$vnode$ = rootVnode;
2515
- rootVnode.$elm$ = oldVNode.$elm$ = hostElm.shadowRoot || hostElm ;
2057
+ rootVnode.$elm$ = oldVNode.$elm$ = hostElm;
2516
2058
  {
2517
2059
  scopeId = hostElm["s-sc"];
2518
2060
  }
2519
- useNativeShadowDom = !!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) && !(cmpMeta.$flags$ & 128 /* shadowNeedsScopedCss */);
2061
+ useNativeShadowDom = supportsShadow;
2520
2062
  {
2521
2063
  contentRef = hostElm["s-cr"];
2522
2064
  checkSlotFallbackVisibility = false;
@@ -3022,13 +2564,6 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
3022
2564
  const scopeId2 = getScopeId(cmpMeta);
3023
2565
  if (!styles.has(scopeId2) || BUILD.hotModuleReplacement) {
3024
2566
  const endRegisterStyles = createTime("registerStyles", cmpMeta.$tagName$);
3025
- {
3026
- if (cmpMeta.$flags$ & 128 /* shadowNeedsScopedCss */) {
3027
- style = scopeCss(style, scopeId2);
3028
- } else if (needsScopedSSR()) {
3029
- style = expandPartSelectors(style);
3030
- }
3031
- }
3032
2567
  registerStyle(scopeId2, style);
3033
2568
  endRegisterStyles();
3034
2569
  }
@@ -3073,10 +2608,7 @@ var connectedCallback = (elm) => {
3073
2608
  {
3074
2609
  hostId = elm.getAttribute(HYDRATE_ID);
3075
2610
  if (hostId) {
3076
- if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
3077
- const scopeId2 = addStyle(elm.shadowRoot, cmpMeta);
3078
- elm.classList.remove(scopeId2 + "-h", scopeId2 + "-s");
3079
- } else if (cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
2611
+ if (cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
3080
2612
  const scopeId2 = getScopeId(cmpMeta);
3081
2613
  elm["s-sc"] = scopeId2;
3082
2614
  }
@@ -4828,7 +4360,6 @@ function hydrateApp(win2, opts, results, afterHydrate, resolve) {
4828
4360
  const orgDocumentCreateElement = win2.document.createElement;
4829
4361
  const orgDocumentCreateElementNS = win2.document.createElementNS;
4830
4362
  const resolved2 = Promise.resolve();
4831
- setScopedSSR(opts);
4832
4363
  let tmrId;
4833
4364
  let ranCompleted = false;
4834
4365
  function hydratedComplete() {
@@ -5168,6 +4699,7 @@ var plt = {
5168
4699
  rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
5169
4700
  ce: (eventName, opts) => new win.CustomEvent(eventName, opts)
5170
4701
  };
4702
+ var supportsShadow = BUILD.shadowDom;
5171
4703
  var getHostRef = (ref) => {
5172
4704
  if (ref.__stencil__getHostRef) {
5173
4705
  return ref.__stencil__getHostRef();
@@ -5201,11 +4733,6 @@ var registerHost = (elm, cmpMeta) => {
5201
4733
  return hostRef;
5202
4734
  };
5203
4735
  var styles = /* @__PURE__ */ new Map();
5204
- var setScopedSSR = (opts) => {
5205
- scopedSSR = opts.serializeShadowRoot !== false && opts.serializeShadowRoot !== "declarative-shadow-dom";
5206
- };
5207
- var needsScopedSSR = () => scopedSSR;
5208
- var scopedSSR = false;
5209
4736
 
5210
4737
  const primary = "#051D36";
5211
4738
  const secondary = "#555555";
@@ -5483,7 +5010,7 @@ class SdBadge {
5483
5010
  label = '';
5484
5011
  render() {
5485
5012
  const resolvedColor = resolveColor(this.color);
5486
- return (hAsync("div", { key: 'eeb4866526fa9e628da7182d6caca317015d6452', class: `sd-badge sd-badge--${this.size}`, style: { '--sd-badge-color': resolvedColor } }, hAsync("div", { key: 'b14add6e76ab27eba5883c641e0ffa840e170ba2', class: "sd-badge__dot" }), hAsync("div", { key: 'a53d4d487a6c97f87189c555f0a95640186fdf93', class: "sd-badge__label" }, this.label)));
5013
+ return (hAsync("div", { key: 'a83ffeb7171c32bafc3312d95c9fed576d676a0d', class: `sd-badge sd-badge--${this.size}`, style: { '--sd-badge-color': resolvedColor } }, hAsync("div", { key: 'b6d84b2391d0e03edcab957b4edf73c765c04c35', class: "sd-badge__dot" }), hAsync("div", { key: 'f06b5639135d87d7346b46c90a28ddeb40b05c9f', class: "sd-badge__label" }, this.label)));
5487
5014
  }
5488
5015
  static get style() { return sdBadgeCss(); }
5489
5016
  static get cmpMeta() { return {
@@ -5514,8 +5041,103 @@ const size = {
5514
5041
  icon: "24"
5515
5042
  }
5516
5043
  };
5044
+ const border = {
5045
+ disabled: "#CCCCCC"
5046
+ };
5047
+ const dropdown = {
5048
+ xs: {
5049
+ minWidth: "60"
5050
+ },
5051
+ sm: {
5052
+ minWidth: "76"
5053
+ },
5054
+ md: {
5055
+ minWidth: "106"
5056
+ }
5057
+ };
5058
+ const bg = {
5059
+ disabled: "#E1E1E1"
5060
+ };
5061
+ const content = {
5062
+ disabled: "#888888"
5063
+ };
5064
+ const brand = {
5065
+ strong: {
5066
+ bg: {
5067
+ "default": "#025497",
5068
+ hover: "#004177"
5069
+ },
5070
+ content: "#FFFFFF",
5071
+ dropdown: {
5072
+ divider: "#006AC1"
5073
+ }
5074
+ },
5075
+ subtle: {
5076
+ bg: {
5077
+ "default": "#1F8AE1",
5078
+ hover: "#006AC1"
5079
+ },
5080
+ content: "#FFFFFF",
5081
+ dropdown: {
5082
+ divider: "#5CB0F3"
5083
+ }
5084
+ },
5085
+ outline: {
5086
+ bg: {
5087
+ "default": "#FFFFFF",
5088
+ hover: "#EAF5FE"
5089
+ },
5090
+ border: "#025497",
5091
+ content: "#025497"
5092
+ }
5093
+ };
5094
+ const neutral = {
5095
+ subtle: {
5096
+ bg: {
5097
+ "default": "#FFFFFF",
5098
+ hover: "#EEEEEE"
5099
+ },
5100
+ content: "#333333"
5101
+ },
5102
+ outline: {
5103
+ bg: {
5104
+ "default": "#FFFFFF",
5105
+ hover: "#EEEEEE"
5106
+ },
5107
+ border: "#888888",
5108
+ content: "#333333"
5109
+ }
5110
+ };
5111
+ const danger = {
5112
+ strong: {
5113
+ bg: {
5114
+ "default": "#E30000",
5115
+ hover: "#AD0000"
5116
+ },
5117
+ content: "#FFFFFF",
5118
+ dropdown: {
5119
+ divider: "#FF7C7C"
5120
+ }
5121
+ },
5122
+ outline: {
5123
+ bg: {
5124
+ "default": "#FFFFFF",
5125
+ hover: "#FCEFEF"
5126
+ },
5127
+ border: "#E30000",
5128
+ content: "#E30000"
5129
+ }
5130
+ };
5517
5131
  var buttonTokens = {
5518
- size: size};
5132
+ size: size,
5133
+ border: border,
5134
+ dropdown: dropdown,
5135
+ bg: bg,
5136
+ content: content,
5137
+ brand: brand,
5138
+ neutral: neutral,
5139
+ danger: danger
5140
+ };
5519
5141
 
5520
5142
  const sdButtonCss = () => `sd-button{display:inline-flex;width:fit-content;height:fit-content}.sd-button{--sd-button-height:34px;--sd-button-padding-x:20px;--sd-button-gap:8px;--sd-button-font-family:inherit;--sd-button-font-size:16px;--sd-button-font-weight:500;--sd-button-text-decoration:none;--sd-button-label-min-width:auto;--sd-button-icon-only-size:var(--sd-button-height);text-decoration:none;cursor:pointer;border-radius:var(--sd-button-radius-default, 4px);transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;border:none;padding:0 var(--sd-button-padding-x);min-width:var(--sd-button-min-width, auto);min-height:var(--sd-button-height);font-family:var(--sd-button-font-family);font-size:var(--sd-button-font-size);font-weight:var(--sd-button-font-weight);text-decoration:var(--sd-button-text-decoration)}.sd-button--xs{--sd-button-height:var(--sd-button-xs-height, 24px);--sd-button-padding-x:var(--sd-button-xs-padding-x, 8px);--sd-button-gap:var(--sd-button-xs-gap, 4px);--sd-button-font-family:var(--sd-button-xs-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-xs-typography-font-size, 12px);--sd-button-font-weight:var(--sd-button-xs-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-xs-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-xs-min-width, auto);--sd-button-icon-only-size:var(--sd-button-icon-only-xs-width, var(--sd-button-height));line-height:20px}.sd-button--sm{--sd-button-height:var(--sd-button-sm-height, 28px);--sd-button-padding-x:var(--sd-button-sm-padding-x, 12px);--sd-button-gap:var(--sd-button-sm-gap, 6px);--sd-button-font-family:var(--sd-button-sm-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-sm-typography-font-size, 12px);--sd-button-font-weight:var(--sd-button-sm-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-sm-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-sm-min-width, auto);--sd-button-icon-only-size:var(--sd-button-icon-only-sm-width, var(--sd-button-height));line-height:20px}.sd-button--md{--sd-button-height:var(--sd-button-md-height, 34px);--sd-button-padding-x:var(--sd-button-md-padding-x, 20px);--sd-button-gap:var(--sd-button-md-gap, 8px);--sd-button-font-family:var(--sd-button-md-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-md-typography-font-size, 16px);--sd-button-font-weight:var(--sd-button-md-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-md-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-md-min-width, auto);--sd-button-icon-only-size:var(--sd-button-icon-only-md-width, var(--sd-button-height));line-height:26px}.sd-button--lg{--sd-button-height:var(--sd-button-lg-height, 62px);--sd-button-padding-x:var(--sd-button-lg-padding-x, 28px);--sd-button-gap:var(--sd-button-lg-gap, 12px);--sd-button-font-family:var(--sd-button-lg-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-lg-typography-font-size, 18px);--sd-button-font-weight:var(--sd-button-lg-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-lg-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-lg-min-width, auto);--sd-button-icon-only-size:var(--sd-button-icon-only-lg-width, var(--sd-button-height));line-height:30px}.sd-button--has-label{--sd-button-min-width:var(--sd-button-label-min-width, auto)}.sd-button--primary{background-color:var(--button-color);color:white;transition:filter 0.2s ease}.sd-button--primary::before{content:"";position:absolute;inset:0;background:#000000;opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--primary:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.25}.sd-button--outline{background:white;border:var(--sd-button-border-width-default, 1px) solid var(--button-color);color:var(--button-color)}.sd-button--outline::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--outline:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--outline .sd-button__content{position:relative;z-index:1}.sd-button--ghost{background-color:transparent;color:var(--button-color);border-color:transparent}.sd-button--ghost::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--ghost:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--ghost .sd-button__content{position:relative;z-index:1}.sd-button--disabled{border:var(--sd-button-border-width-default, 1px) solid var(--sd-button-border-disabled, #CCCCCC);background:var(--sd-button-bg-disabled, #E1E1E1);color:var(--sd-button-content-disabled, #888888);cursor:not-allowed !important}.sd-button--icon-only{padding:0;width:var(--sd-button-icon-only-size, var(--sd-button-height));min-width:var(--sd-button-icon-only-size, var(--sd-button-height));height:var(--sd-button-icon-only-size, var(--sd-button-height))}.sd-button--no-hover:hover::before{opacity:0 !important}.sd-button .sd-button__content{display:inline-flex;align-items:center;justify-content:center;gap:var(--sd-button-gap);z-index:1;font-weight:inherit}`;
5521
5143
 
@@ -5599,6 +5221,290 @@ class SdButton {
5599
5221
  }; }
5600
5222
  }
5601
5223
 
5224
+ const BUTTON_FOCUS_RING_COLOR = '#0075FF';
5225
+ const PRESET_DEFAULT_COLORS = {
5226
+ primary: buttonTokens.brand.strong.bg.default,
5227
+ secondary: buttonTokens.brand.subtle.bg.default,
5228
+ primary_outline: buttonTokens.brand.outline.bg.default,
5229
+ neutral: buttonTokens.neutral.subtle.bg.default,
5230
+ neutral_outline: buttonTokens.neutral.outline.bg.default,
5231
+ danger: buttonTokens.danger.strong.bg.default,
5232
+ danger_outline: buttonTokens.danger.outline.bg.default,
5233
+ };
5234
+ const BUTTON_CONFIG = {
5235
+ primary_xs: {
5236
+ variant: 'primary',
5237
+ size: 'xs',
5238
+ color: PRESET_DEFAULT_COLORS.primary,
5239
+ },
5240
+ secondary_xs: {
5241
+ variant: 'primary',
5242
+ size: 'xs',
5243
+ color: PRESET_DEFAULT_COLORS.secondary,
5244
+ },
5245
+ primary_outline_xs: {
5246
+ variant: 'outline',
5247
+ size: 'xs',
5248
+ color: PRESET_DEFAULT_COLORS.primary_outline,
5249
+ },
5250
+ neutral_xs: {
5251
+ variant: 'primary',
5252
+ size: 'xs',
5253
+ color: PRESET_DEFAULT_COLORS.neutral,
5254
+ },
5255
+ neutral_outline_xs: {
5256
+ variant: 'outline',
5257
+ size: 'xs',
5258
+ color: PRESET_DEFAULT_COLORS.neutral_outline,
5259
+ },
5260
+ danger_xs: {
5261
+ variant: 'primary',
5262
+ size: 'xs',
5263
+ color: PRESET_DEFAULT_COLORS.danger,
5264
+ },
5265
+ danger_outline_xs: {
5266
+ variant: 'outline',
5267
+ size: 'xs',
5268
+ color: PRESET_DEFAULT_COLORS.danger_outline,
5269
+ },
5270
+ primary_sm: {
5271
+ variant: 'primary',
5272
+ size: 'sm',
5273
+ color: PRESET_DEFAULT_COLORS.primary,
5274
+ },
5275
+ secondary_sm: {
5276
+ variant: 'primary',
5277
+ size: 'sm',
5278
+ color: PRESET_DEFAULT_COLORS.secondary,
5279
+ },
5280
+ primary_outline_sm: {
5281
+ variant: 'outline',
5282
+ size: 'sm',
5283
+ color: PRESET_DEFAULT_COLORS.primary_outline,
5284
+ },
5285
+ neutral_sm: {
5286
+ variant: 'primary',
5287
+ size: 'sm',
5288
+ color: PRESET_DEFAULT_COLORS.neutral,
5289
+ },
5290
+ neutral_outline_sm: {
5291
+ variant: 'outline',
5292
+ size: 'sm',
5293
+ color: PRESET_DEFAULT_COLORS.neutral_outline,
5294
+ },
5295
+ danger_sm: {
5296
+ variant: 'primary',
5297
+ size: 'sm',
5298
+ color: PRESET_DEFAULT_COLORS.danger,
5299
+ },
5300
+ danger_outline_sm: {
5301
+ variant: 'outline',
5302
+ size: 'sm',
5303
+ color: PRESET_DEFAULT_COLORS.danger_outline,
5304
+ },
5305
+ primary_md: {
5306
+ variant: 'primary',
5307
+ size: 'md',
5308
+ color: PRESET_DEFAULT_COLORS.primary,
5309
+ },
5310
+ secondary_md: {
5311
+ variant: 'primary',
5312
+ size: 'md',
5313
+ color: PRESET_DEFAULT_COLORS.secondary,
5314
+ },
5315
+ primary_outline_md: {
5316
+ variant: 'outline',
5317
+ size: 'md',
5318
+ color: PRESET_DEFAULT_COLORS.primary_outline,
5319
+ },
5320
+ neutral_md: {
5321
+ variant: 'primary',
5322
+ size: 'md',
5323
+ color: PRESET_DEFAULT_COLORS.neutral,
5324
+ },
5325
+ neutral_outline_md: {
5326
+ variant: 'outline',
5327
+ size: 'md',
5328
+ color: PRESET_DEFAULT_COLORS.neutral_outline,
5329
+ },
5330
+ danger_md: {
5331
+ variant: 'primary',
5332
+ size: 'md',
5333
+ color: PRESET_DEFAULT_COLORS.danger,
5334
+ },
5335
+ danger_outline_md: {
5336
+ variant: 'outline',
5337
+ size: 'md',
5338
+ color: PRESET_DEFAULT_COLORS.danger_outline,
5339
+ },
5340
+ primary_lg: {
5341
+ variant: 'primary',
5342
+ size: 'lg',
5343
+ color: PRESET_DEFAULT_COLORS.primary,
5344
+ },
5345
+ secondary_lg: {
5346
+ variant: 'primary',
5347
+ size: 'lg',
5348
+ color: PRESET_DEFAULT_COLORS.secondary,
5349
+ },
5350
+ primary_outline_lg: {
5351
+ variant: 'outline',
5352
+ size: 'lg',
5353
+ color: PRESET_DEFAULT_COLORS.primary_outline,
5354
+ },
5355
+ neutral_lg: {
5356
+ variant: 'primary',
5357
+ size: 'lg',
5358
+ color: PRESET_DEFAULT_COLORS.neutral,
5359
+ },
5360
+ neutral_outline_lg: {
5361
+ variant: 'outline',
5362
+ size: 'lg',
5363
+ color: PRESET_DEFAULT_COLORS.neutral_outline,
5364
+ },
5365
+ danger_lg: {
5366
+ variant: 'primary',
5367
+ size: 'lg',
5368
+ color: PRESET_DEFAULT_COLORS.danger,
5369
+ },
5370
+ danger_outline_lg: {
5371
+ variant: 'outline',
5372
+ size: 'lg',
5373
+ color: PRESET_DEFAULT_COLORS.danger_outline,
5374
+ },
5375
+ };
5376
+ const BUTTON_ICON_SIZES = {
5377
+ xs: Number(buttonTokens.size.xs.icon),
5378
+ sm: Number(buttonTokens.size.sm.icon),
5379
+ md: Number(buttonTokens.size.md.icon),
5380
+ lg: Number(buttonTokens.size.lg.icon),
5381
+ };
5382
+ const PRESET_HOVER_BACKGROUNDS$1 = {
5383
+ primary: buttonTokens.brand.strong.bg.hover,
5384
+ secondary: buttonTokens.brand.subtle.bg.hover,
5385
+ primary_outline: buttonTokens.brand.outline.bg.hover,
5386
+ neutral: buttonTokens.neutral.subtle.bg.hover,
5387
+ neutral_outline: buttonTokens.neutral.outline.bg.hover,
5388
+ danger: buttonTokens.danger.strong.bg.hover,
5389
+ danger_outline: buttonTokens.danger.outline.bg.hover,
5390
+ };
5391
+ const PRESET_CONTENT_COLORS$1 = {
5392
+ primary: buttonTokens.brand.strong.content,
5393
+ secondary: buttonTokens.brand.subtle.content,
5394
+ primary_outline: buttonTokens.brand.outline.content,
5395
+ neutral: buttonTokens.neutral.subtle.content,
5396
+ neutral_outline: buttonTokens.neutral.outline.content,
5397
+ danger: buttonTokens.danger.strong.content,
5398
+ danger_outline: buttonTokens.danger.outline.content,
5399
+ };
5400
+ const PRESET_BORDER_COLORS$1 = {
5401
+ primary: 'transparent',
5402
+ secondary: 'transparent',
5403
+ primary_outline: buttonTokens.brand.outline.border,
5404
+ neutral: 'transparent',
5405
+ neutral_outline: buttonTokens.neutral.outline.border,
5406
+ danger: 'transparent',
5407
+ danger_outline: buttonTokens.danger.outline.border,
5408
+ };
5409
+ const DISABLED_CONTENT = buttonTokens.content.disabled;
5410
+ const SIZE_SUFFIX_PATTERN = /_(xs|sm|md|lg)$/;
5411
+ const isButtonV2Name = (value) => value in BUTTON_CONFIG;
5412
+ const getPresetName = (value) => value.replace(SIZE_SUFFIX_PATTERN, '');
5413
+
5414
+ const sdButtonV2Css = () => `sd-button-v2{display:inline-flex;width:fit-content;height:fit-content}.sd-button-v2{--sd-button-v2-height:34px;--sd-button-v2-padding-x:20px;--sd-button-v2-gap:8px;--sd-button-v2-font-family:inherit;--sd-button-v2-font-size:16px;--sd-button-v2-font-weight:500;--sd-button-v2-text-decoration:none;--sd-button-v2-label-min-width:auto;--sd-button-v2-icon-only-size:var(--sd-button-v2-height);--sd-button-v2-bg:#025497;--sd-button-v2-bg-hover:#004177;--sd-button-v2-border:transparent;--sd-button-v2-content:#ffffff;display:inline-flex;align-items:center;justify-content:center;min-height:var(--sd-button-v2-height);min-width:var(--sd-button-v2-min-width, auto);padding:0 var(--sd-button-v2-padding-x);border:var(--sd-button-border-width-default, 1px) solid var(--sd-button-v2-border);border-radius:var(--sd-button-radius-default, 4px);background:var(--sd-button-v2-bg);color:var(--sd-button-v2-content);cursor:pointer;box-sizing:border-box;font-family:var(--sd-button-v2-font-family);font-size:var(--sd-button-v2-font-size);font-weight:var(--sd-button-v2-font-weight);line-height:1;text-decoration:var(--sd-button-v2-text-decoration);transition:background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;white-space:nowrap;-webkit-user-select:none;user-select:none}.sd-button-v2:hover:not(.sd-button-v2--disabled){background:var(--sd-button-v2-bg-hover)}.sd-button-v2:focus-visible{outline:0;box-shadow:0 0 0 2px var(--sd-button-v2-accent)}.sd-button-v2--xs{--sd-button-v2-height:var(--sd-button-xs-height, 24px);--sd-button-v2-padding-x:var(--sd-button-xs-padding-x, 8px);--sd-button-v2-gap:var(--sd-button-xs-gap, 4px);--sd-button-v2-font-family:var(--sd-button-xs-typography-font-family, inherit);--sd-button-v2-font-size:var(--sd-button-xs-typography-font-size, 12px);--sd-button-v2-font-weight:var(--sd-button-xs-typography-font-weight, 500);--sd-button-v2-text-decoration:var(--sd-button-xs-typography-text-decoration, none);--sd-button-v2-label-min-width:var(--sd-button-label-xs-min-width, auto);--sd-button-v2-icon-only-size:var(--sd-button-icon-only-xs-width, var(--sd-button-v2-height))}.sd-button-v2--sm{--sd-button-v2-height:var(--sd-button-sm-height, 28px);--sd-button-v2-padding-x:var(--sd-button-sm-padding-x, 12px);--sd-button-v2-gap:var(--sd-button-sm-gap, 6px);--sd-button-v2-font-family:var(--sd-button-sm-typography-font-family, inherit);--sd-button-v2-font-size:var(--sd-button-sm-typography-font-size, 12px);--sd-button-v2-font-weight:var(--sd-button-sm-typography-font-weight, 500);--sd-button-v2-text-decoration:var(--sd-button-sm-typography-text-decoration, none);--sd-button-v2-label-min-width:var(--sd-button-label-sm-min-width, auto);--sd-button-v2-icon-only-size:var(--sd-button-icon-only-sm-width, var(--sd-button-v2-height))}.sd-button-v2--md{--sd-button-v2-height:var(--sd-button-md-height, 34px);--sd-button-v2-padding-x:var(--sd-button-md-padding-x, 20px);--sd-button-v2-gap:var(--sd-button-md-gap, 8px);--sd-button-v2-font-family:var(--sd-button-md-typography-font-family, inherit);--sd-button-v2-font-size:var(--sd-button-md-typography-font-size, 16px);--sd-button-v2-font-weight:var(--sd-button-md-typography-font-weight, 500);--sd-button-v2-text-decoration:var(--sd-button-md-typography-text-decoration, none);--sd-button-v2-label-min-width:var(--sd-button-label-md-min-width, auto);--sd-button-v2-icon-only-size:var(--sd-button-icon-only-md-width, var(--sd-button-v2-height))}.sd-button-v2--lg{--sd-button-v2-height:var(--sd-button-lg-height, 62px);--sd-button-v2-padding-x:var(--sd-button-lg-padding-x, 28px);--sd-button-v2-gap:var(--sd-button-lg-gap, 12px);--sd-button-v2-font-family:var(--sd-button-lg-typography-font-family, inherit);--sd-button-v2-font-size:var(--sd-button-lg-typography-font-size, 18px);--sd-button-v2-font-weight:var(--sd-button-lg-typography-font-weight, 500);--sd-button-v2-text-decoration:var(--sd-button-lg-typography-text-decoration, none);--sd-button-v2-label-min-width:var(--sd-button-label-lg-min-width, auto);--sd-button-v2-icon-only-size:var(--sd-button-icon-only-lg-width, var(--sd-button-v2-height))}.sd-button-v2--has-label{--sd-button-v2-min-width:var(--sd-button-v2-label-min-width, auto)}.sd-button-v2--icon-only{width:var(--sd-button-v2-icon-only-size, var(--sd-button-v2-height));min-width:var(--sd-button-v2-icon-only-size, var(--sd-button-v2-height));height:var(--sd-button-v2-icon-only-size, var(--sd-button-v2-height));padding:0}.sd-button-v2--icon-only .sd-button-v2__content{gap:0}.sd-button-v2--disabled{border-color:var(--sd-button-border-disabled, #CCCCCC);background:var(--sd-button-bg-disabled, #E1E1E1);color:var(--sd-button-content-disabled, #888888);cursor:not-allowed}.sd-button-v2 .sd-button-v2__content{display:inline-flex;align-items:center;justify-content:center;gap:var(--sd-button-v2-gap)}.sd-button-v2 .sd-button-v2__label{font:inherit}`;
5415
+
5416
+ class SdButtonV2 {
5417
+ constructor(hostRef) {
5418
+ registerInstance(this, hostRef);
5419
+ this.click = createEvent(this, "sdClick");
5420
+ }
5421
+ name = 'primary_sm';
5422
+ label = '';
5423
+ icon;
5424
+ ariaLabel = '';
5425
+ disabled = false;
5426
+ type = 'button';
5427
+ click;
5428
+ hasWarnedMissingAriaLabel = false;
5429
+ handleClick = (event) => {
5430
+ if (this.disabled) {
5431
+ event.preventDefault();
5432
+ return;
5433
+ }
5434
+ this.click.emit(event);
5435
+ };
5436
+ get resolvedConfig() {
5437
+ if (!isButtonV2Name(this.name)) {
5438
+ throw new Error(`Invalid sd-button-v2 name: ${this.name}`);
5439
+ }
5440
+ const config = BUTTON_CONFIG[this.name];
5441
+ const preset = getPresetName(this.name);
5442
+ return {
5443
+ config,
5444
+ preset,
5445
+ };
5446
+ }
5447
+ getButtonClasses(preset, size, hasLabel, iconOnly) {
5448
+ const classes = ['sd-button-v2', `sd-button-v2--${preset}`, `sd-button-v2--${size}`];
5449
+ if (this.disabled) {
5450
+ classes.push('sd-button-v2--disabled');
5451
+ }
5452
+ if (iconOnly) {
5453
+ classes.push('sd-button-v2--icon-only');
5454
+ }
5455
+ if (hasLabel) {
5456
+ classes.push('sd-button-v2--has-label');
5457
+ }
5458
+ return classes.join(' ');
5459
+ }
5460
+ componentWillRender() {
5461
+ this.warnIfMissingAriaLabel();
5462
+ }
5463
+ warnIfMissingAriaLabel() {
5464
+ const iconOnly = !this.label && Boolean(this.icon);
5465
+ const missingAriaLabel = iconOnly && !this.ariaLabel.trim();
5466
+ if (!missingAriaLabel) {
5467
+ this.hasWarnedMissingAriaLabel = false;
5468
+ return;
5469
+ }
5470
+ if (this.hasWarnedMissingAriaLabel) {
5471
+ return;
5472
+ }
5473
+ console.warn(`[sd-button-v2] icon-only buttons require \`ariaLabel\`. Received name="${this.name}" icon="${this.icon}".`);
5474
+ this.hasWarnedMissingAriaLabel = true;
5475
+ }
5476
+ render() {
5477
+ const { config, preset } = this.resolvedConfig;
5478
+ const hasLabel = Boolean(this.label);
5479
+ const iconOnly = !this.label && Boolean(this.icon);
5480
+ const accessibleName = iconOnly && this.ariaLabel.trim() ? this.ariaLabel : undefined;
5481
+ const iconColor = this.disabled ? DISABLED_CONTENT : PRESET_CONTENT_COLORS$1[preset];
5482
+ return (hAsync("button", { key: '9adec3868e5337822463a5a37a741ef146a081be', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type, disabled: this.disabled, "aria-label": accessibleName, style: {
5483
+ '--sd-button-v2-bg': config.variant === 'primary' ? config.color : '#FFFFFF',
5484
+ '--sd-button-v2-bg-hover': PRESET_HOVER_BACKGROUNDS$1[preset],
5485
+ '--sd-button-v2-border': PRESET_BORDER_COLORS$1[preset],
5486
+ '--sd-button-v2-content': PRESET_CONTENT_COLORS$1[preset],
5487
+ '--sd-button-v2-accent': BUTTON_FOCUS_RING_COLOR,
5488
+ }, onClick: this.handleClick }, hAsync("span", { key: '849c90886e77e792e4e34ef064352361a29664f0', class: "sd-button-v2__content" }, this.icon && (hAsync("sd-icon", { key: '5c5bc61ab43aa17124337a7107a3e6ab82f566ae', class: "sd-button-v2__icon", name: this.icon, size: BUTTON_ICON_SIZES[config.size], color: iconColor })), this.label && hAsync("span", { key: 'e2d1a5ce465f07310a4d03966609baaf7e968b0e', class: "sd-button-v2__label" }, this.label))));
5489
+ }
5490
+ static get style() { return sdButtonV2Css(); }
5491
+ static get cmpMeta() { return {
5492
+ "$flags$": 512,
5493
+ "$tagName$": "sd-button-v2",
5494
+ "$members$": {
5495
+ "name": [1],
5496
+ "label": [1],
5497
+ "icon": [1],
5498
+ "ariaLabel": [1, "aria-label"],
5499
+ "disabled": [4],
5500
+ "type": [1]
5501
+ },
5502
+ "$listeners$": undefined,
5503
+ "$lazyBundleId$": "-",
5504
+ "$attrsToReflect$": []
5505
+ }; }
5506
+ }
5507
+
5602
5508
  const sdCardCss = () => `sd-card{display:block;height:fit-content}sd-card .sd-card{border-radius:8px;background:white}sd-card .sd-card--bordered{border:1px solid #E1E1E1}`;
5603
5509
 
5604
5510
  class SdCard {
@@ -5608,7 +5514,7 @@ class SdCard {
5608
5514
  bordered = false;
5609
5515
  sdClass = '';
5610
5516
  render() {
5611
- return (hAsync(Fragment, { key: '155504b50cb1c21fc1f847af8a9e8b685f7881ef' }, hAsync("div", { key: 'c461e3e40da44586da5e02ad508bf59942a9e82a', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, hAsync("slot", { key: '0c0ee023155c08c565c3496c44699a900666b084' }))));
5517
+ return (hAsync(Fragment, { key: '3999f64f54054b3a1662fac4aacf9f6898acb957' }, hAsync("div", { key: '666b8e849b92a5e75d259ff079237911fd591cdd', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, hAsync("slot", { key: 'dc8f4ae80e9aca7a0aecaed81f45d40e7df2c067' }))));
5612
5518
  }
5613
5519
  static get style() { return sdCardCss(); }
5614
5520
  static get cmpMeta() { return {
@@ -5924,7 +5830,7 @@ class SdDatePicker {
5924
5830
  this.isOpen = false;
5925
5831
  };
5926
5832
  render() {
5927
- return (hAsync("div", { key: 'bb17d32f08d998e599c90cf1a7a35b17e19d3dc4', class: { 'sd-date-picker': true, 'sd-date-picker--disabled': this.disabled } }, hAsync("sd-input", { key: 'ae028d5999a8df40a83b0d77d2dd5c2e0d0d8eb0', ref: el => (this.inputEl = el), value: this.value, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-picker__input", onClick: () => this.openMenu() }, hAsync("sd-icon", { key: 'fbb954703d19161ab4507696a21278d5b4962b25', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (hAsync("sd-portal", { key: 'a335d5d317718e30be14fdb4aa1a63cb1347b929', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, hAsync("div", { key: '38deef7127db10c91a51b8d6cb017d85fce25888', class: "sd-date-picker__menu" }, hAsync("div", { key: 'f2ef8eb33086103df65b434360ecc1aac2949bf9', class: "sd-date-picker__header" }, hAsync("div", { key: '8b949551a157de1e2ded7f1de621ccacd136126e', class: "year-nav" }, hAsync("button", { key: 'b1bbd712094885223c21f030c32914d14f3904c2', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, hAsync("sd-icon", { key: '7bb6f5f216d02cde59eff87fcaebc32eccbaac25', name: "arrowLeft", size: "12", color: "#CCCCCC" })), hAsync("span", { key: '645c12556fe1b9f1d1c8f7c4cfe73c3b65ad7431', class: "year-nav__current" }, this.currentYear), hAsync("button", { key: 'f6cb58c23effd1aa0566aaacf41170482f03df51', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, hAsync("sd-icon", { key: 'e92ef17b8d50e5115a159d2dd984e738a920f065', name: "arrowRight", size: "12", color: "#CCCCCC" }))), hAsync("div", { key: '73018a9ca04929f4be017631e8e49a73cef71855', class: "month-nav" }, hAsync("button", { key: '0983ca35486b8ad29c09740848b4288b602d0cd9', type: "button", name: "prev-month", title: "Previous ", onClick: () => this.handleUpdateMonth('prev') }, hAsync("sd-icon", { key: '2c9257564786287f825c83391f3e05745c23cf9a', name: "arrowLeft", size: "12", color: "#CCCCCC" })), hAsync("span", { key: '0b9e048eeea62c452671b74db468aa5587e8ddbf', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), hAsync("button", { key: '3ead15a341d5e361e7fb9b1cb2842e5a38b0e03c', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, hAsync("sd-icon", { key: 'a3dbd8606dd51f72f1c315f2eea7ff089a95e6fa', name: "arrowRight", size: "12", color: "#CCCCCC" })))), hAsync("div", { key: '6bbadc79157ae64bf492a965b78d014dcd968ea6', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (hAsync("div", { key: day, class: "day" }, day)))), hAsync("div", { key: '972c00769b40eff8015b68e0a9479a6c7c6009db', class: "sd-date-picker__body" }, [
5833
+ return (hAsync("div", { key: 'cd2f9c240e1e67806d1d9334937a905330d29a1f', class: { 'sd-date-picker': true, 'sd-date-picker--disabled': this.disabled } }, hAsync("sd-input", { key: '1d77404494bd1fadf15d82dfabecbf61b73e5da8', ref: el => (this.inputEl = el), value: this.value, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-picker__input", onClick: () => this.openMenu() }, hAsync("sd-icon", { key: '627b76b7d276cff34224a130bb2596ca6f2ff49e', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (hAsync("sd-portal", { key: '9dd006a9051c22dd8084ae9cb72e82c9c0b9be2b', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, hAsync("div", { key: '5090eb945c7241f3224b3d2c7a5a96221cc46c04', class: "sd-date-picker__menu" }, hAsync("div", { key: 'fa127745062937dfe4f04773b7d6afa74d13bd7a', class: "sd-date-picker__header" }, hAsync("div", { key: '7c59917872614d1351a3dfe3783017bd6bc6b75c', class: "year-nav" }, hAsync("button", { key: '9e27d2d76ca72820d57c2d9ebc40fa842129da22', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, hAsync("sd-icon", { key: '17c8f872b7cfb2825d4c9528b5838487b97529f0', name: "arrowLeft", size: "12", color: "#CCCCCC" })), hAsync("span", { key: '41999c78367c90bc4d1d9bfdeb6e3d29d44df2c2', class: "year-nav__current" }, this.currentYear), hAsync("button", { key: '52953ec66118afd480e7ce6207a551f18b61ac6d', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, hAsync("sd-icon", { key: 'e740bcc2a23f4df850b4e2579ce0cae14419313c', name: "arrowRight", size: "12", color: "#CCCCCC" }))), hAsync("div", { key: '7fac86c6405a3936a1f0bdb51e5ca61463ef463a', class: "month-nav" }, hAsync("button", { key: '62e22a2063c7ea972bf74ea08af0d519a5250b3f', type: "button", name: "prev-month", title: "Previous ", onClick: () => this.handleUpdateMonth('prev') }, hAsync("sd-icon", { key: 'fa53cbb5f2e61a3b1f0807639ce2c81516a1ca57', name: "arrowLeft", size: "12", color: "#CCCCCC" })), hAsync("span", { key: '57eb7eaf1e3a11ba69cf4ef4af9852541abd7902', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), hAsync("button", { key: '08a783b73efd7a5df2638df7c8bcac5411b2e642', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, hAsync("sd-icon", { key: '4a5bb4f4e6f3105fc9fda008eb51a47efe606b81', name: "arrowRight", size: "12", color: "#CCCCCC" })))), hAsync("div", { key: '8dd540a7188716446b2e9bcda707d7458a2ea817', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (hAsync("div", { key: day, class: "day" }, day)))), hAsync("div", { key: 'f2da8d2325cb2fb9cb89d9c93d850cefc62235bf', class: "sd-date-picker__body" }, [
5928
5834
  ...this.calendar.prevMonthDays,
5929
5835
  ...this.calendar.days,
5930
5836
  ...this.calendar.afterMonthDays,
@@ -6049,101 +5955,472 @@ class SdDateRangePicker {
6049
5955
  formatDate(index, day) {
6050
5956
  return this.dateUtil.formatDate(index === 0 ? this.prevYear : this.nextYear, index === 0 ? this.prevMonth : this.nextMonth, day);
6051
5957
  }
6052
- getDateBoxType(date) {
6053
- const [start, end] = this.dateRange;
6054
- if (date === start)
6055
- return end ? 'start' : this.hoverDate < this.dateRange[0] ? 'end' : 'start';
6056
- if (date === end)
6057
- return 'end';
6058
- return '';
5958
+ getDateBoxType(date) {
5959
+ const [start, end] = this.dateRange;
5960
+ if (date === start)
5961
+ return end ? 'start' : this.hoverDate < this.dateRange[0] ? 'end' : 'start';
5962
+ if (date === end)
5963
+ return 'end';
5964
+ return '';
5965
+ }
5966
+ isDateInRange(date) {
5967
+ const [start, end] = this.dateRange;
5968
+ // 1. 날짜 범위가 완전히 선택된 경우
5969
+ if (start && end) {
5970
+ return date >= start && date <= end;
5971
+ }
5972
+ // 2. hover 상태의 날짜 범위를 확인
5973
+ if (!this.hoverDate || !start || end) {
5974
+ return false;
5975
+ }
5976
+ // 3. dateRange[0]과 hoverDate를 기준으로 범위 계산
5977
+ const [from, to] = start <= this.hoverDate ? [start, this.hoverDate] : [this.hoverDate, start];
5978
+ return date >= from && date <= to;
5979
+ }
5980
+ isDisabledDate(date) {
5981
+ const [start, end] = this.dateRange;
5982
+ if (this.maxRange && start && !end) {
5983
+ const minDate = addDays(start, -this.maxRange);
5984
+ const maxDate = addDays(start, this.maxRange);
5985
+ return !(minDate <= date && date <= maxDate);
5986
+ }
5987
+ if (!this.selectable || !this.selectable[0] || !this.selectable[1]) {
5988
+ return false;
5989
+ }
5990
+ return !(date >= this.selectable[0] && date <= this.selectable[1]);
5991
+ }
5992
+ /* ----------------------------------
5993
+ * Interaction
5994
+ * ---------------------------------- */
5995
+ openMenu() {
5996
+ if (this.disabled)
5997
+ return;
5998
+ this.tempDateRange = [...this.dateRange];
5999
+ this.resetCalendarByDateRange(this.dateRange);
6000
+ this.isOpen = true;
6001
+ }
6002
+ closeMenu = () => {
6003
+ if (!this.dateRange[0] || !this.dateRange[1]) {
6004
+ this.dateRange = [...this.tempDateRange];
6005
+ }
6006
+ this.isOpen = false;
6007
+ };
6008
+ handleDateClick(index, day) {
6009
+ this.setHoverDate('');
6010
+ const selectedDate = this.formatDate(index, day);
6011
+ if (!this.dateRange[0] || !!this.dateRange[1] || selectedDate < this.dateRange[0]) {
6012
+ this.setDateRange([selectedDate, '']);
6013
+ return; // 아직 완료 아님
6014
+ }
6015
+ const newRange = [this.dateRange[0], selectedDate];
6016
+ this.setDateRange(newRange);
6017
+ this.value = newRange;
6018
+ this.update.emit?.(newRange);
6019
+ }
6020
+ handleDateHover(index, day) {
6021
+ const hoverDate = this.formatDate(index, day);
6022
+ this.setHoverDate(hoverDate);
6023
+ }
6024
+ render() {
6025
+ return (hAsync("div", { key: '1862958ea2e972700ea83ed61f0285f09cf52c02', class: {
6026
+ 'sd-date-range-picker': true,
6027
+ 'sd-date-range-picker--disabled': this.disabled,
6028
+ } }, hAsync("sd-input", { key: '808670f22b59401c0125dd1191a6180cc6f72799', ref: el => (this.inputEl = el), value: !!this.dateRange[0] ? `${this.dateRange[0]} ~ ${this.dateRange[1]}` : '', label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-range-picker__input", onClick: () => this.openMenu() }, hAsync("sd-icon", { key: '123e8beb77c3fceaaa3a8d994f8a8539fe35d317', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (hAsync("sd-portal", { key: '448c174030598565f910df316002d78bdfec3f89', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.closeMenu }, hAsync("div", { key: 'b5cf493587c7831e59a6156df87cb56be6bd585b', class: "sd-date-range-picker__menu" }, hAsync("div", { key: 'c044d5377d0d88affecaa61eec2a2239b87158d8', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, hAsync("button", { key: 'c497891fe1d06b8f6c1a79000edc0e4f4fd79735', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, hAsync("sd-icon", { key: 'ad899e9daec0752b744bc73e9cbd99c6a731b7db', name: "arrowLeft", size: "12", color: "#CCCCCC" })), hAsync("div", { key: '595ac699adc90e8b15775ce47a2cda8bbc2f5c25', class: "header-label" }, this.prevYear), hAsync("button", { key: '684ce75f14b08cd57ce6f019a1dfb3ab384b0c11', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, hAsync("sd-icon", { key: '31dde7526d0ee3e7abf965eea6f825d557e7c745', name: "arrowRight", size: "12", color: "#CCCCCC" }))), hAsync("div", { key: '3e70334c95d29f302f2dc6d1cb7fbb3603c74a48', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (hAsync(Fragment, null, index === 1 && hAsync("div", { class: "separator" }), hAsync("div", { key: index, class: "calendar-container" }, hAsync("div", { class: "calendar-header" }, hAsync("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, hAsync("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
6029
+ ? `${this.prevYear}.${String(this.prevMonth).padStart(2, '0')}`
6030
+ : `${this.nextYear}.${String(this.nextMonth).padStart(2, '0')}`), hAsync("div", { class: "calendar-days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (hAsync("sd-date-box", { key: day, date: day, disabled: true, class: "day" })))), hAsync("div", { class: "calendar-body mt-12pxr grid grid-cols-7 gap-y-8pxr" }, [...calendar.prevMonthDays, ...calendar.days, ...calendar.afterMonthDays].map((day, idx) => (hAsync("sd-date-box", { key: `prev${day}_${idx}`, date: !day ? '' : Number(day), selected: this.dateRange.some(date => date === this.formatDate(index, Number(day))), type: this.getDateBoxType(this.formatDate(index, Number(day))), isToday: today === this.formatDate(index, Number(day)), disabled: !day ? true : this.isDisabledDate(this.formatDate(index, Number(day))), inRange: this.isDateInRange(this.formatDate(index, Number(day))), isStartDate: this.dateRange[0] === this.formatDate(index, Number(day)), isEndDate: this.dateRange[1] === this.formatDate(index, Number(day)), onSdClick: () => this.handleDateClick(index, Number(day)), onSdMouseOver: () => this.handleDateHover(index, Number(day)) }))))))))))))));
6031
+ }
6032
+ static get watchers() { return {
6033
+ "value": [{
6034
+ "onValueChange": 0
6035
+ }]
6036
+ }; }
6037
+ static get style() { return sdDateRangePickerCss(); }
6038
+ static get cmpMeta() { return {
6039
+ "$flags$": 514,
6040
+ "$tagName$": "sd-date-range-picker",
6041
+ "$members$": {
6042
+ "value": [1040],
6043
+ "label": [1],
6044
+ "selectable": [16],
6045
+ "maxRange": [2, "max-range"],
6046
+ "disabled": [4],
6047
+ "placeholder": [1],
6048
+ "isOpen": [32],
6049
+ "dateRange": [32],
6050
+ "hoverDate": [32],
6051
+ "prevYear": [32],
6052
+ "prevMonth": [32]
6053
+ },
6054
+ "$listeners$": undefined,
6055
+ "$lazyBundleId$": "-",
6056
+ "$attrsToReflect$": []
6057
+ }; }
6058
+ }
6059
+
6060
+ class DropdownManager {
6061
+ static instance;
6062
+ activeDropdowns = new Set();
6063
+ static getInstance() {
6064
+ if (!DropdownManager.instance) {
6065
+ DropdownManager.instance = new DropdownManager();
6066
+ }
6067
+ return DropdownManager.instance;
6068
+ }
6069
+ register(component) {
6070
+ this.activeDropdowns.add(component);
6071
+ }
6072
+ unregister(component) {
6073
+ this.activeDropdowns.delete(component);
6074
+ }
6075
+ openDropdown(targetComponent) {
6076
+ // 다른 모든 드롭다운 닫기
6077
+ this.activeDropdowns.forEach(component => {
6078
+ if (component !== targetComponent && component.isOpen) {
6079
+ component.closeDropdown();
6080
+ }
6081
+ });
6082
+ }
6083
+ closeAllDropdowns() {
6084
+ this.activeDropdowns.forEach(component => {
6085
+ if (component.isOpen) {
6086
+ component.closeDropdown();
6087
+ }
6088
+ });
6089
+ }
6090
+ }
6091
+ const dropdownManager = DropdownManager.getInstance();
6092
+
6093
+ // 여러 select를 동시에 사용할때에 이벤트 리스너의 등록이 충돌나는 문제를 해결하기 위한 Base class
6094
+ // 각 드롭다운 컴포넌트는 이 클래스를 상속 및 구현 필요
6095
+ // 기본적으로 click, keydown 추상 이벤트를 구현해야하고
6096
+ // isOpen가 true일때에만 이벤트 등록 그외에는 이벤트 클리닝을 수행
6097
+ // 추후 필요한 이벤트는 이곳에 추가하여 추가 구현 후 사용
6098
+ // 별도로 드롭다운 전용의 Base class가 아닌 공통적으로 사용할 수 있는 Base class가 필요할지 검토 필요
6099
+ class BaseDropdownEvent {
6100
+ documentClickHandler;
6101
+ documentKeydownHandler;
6102
+ // 컴포넌트 생명주기에서 호출할 메서드들
6103
+ initializeEvent() {
6104
+ dropdownManager.register(this);
6105
+ this.initializeEventHandlers();
6106
+ }
6107
+ cleanupEvent() {
6108
+ dropdownManager.unregister(this);
6109
+ this.cleanup();
6110
+ }
6111
+ initializeEventHandlers() {
6112
+ this.documentClickHandler = (event) => this.handleDocumentClick(event);
6113
+ this.documentKeydownHandler = (event) => this.handleDocumentKeydown(event);
6114
+ }
6115
+ addGlobalEventListeners() {
6116
+ if (this.documentClickHandler) {
6117
+ document.addEventListener('click', this.documentClickHandler);
6118
+ }
6119
+ if (this.documentKeydownHandler) {
6120
+ document.addEventListener('keydown', this.documentKeydownHandler);
6121
+ }
6122
+ }
6123
+ removeGlobalEventListeners() {
6124
+ if (this.documentClickHandler) {
6125
+ document.removeEventListener('click', this.documentClickHandler);
6126
+ }
6127
+ if (this.documentKeydownHandler) {
6128
+ document.removeEventListener('keydown', this.documentKeydownHandler);
6129
+ }
6130
+ }
6131
+ onDropdownToggle(isOpen) {
6132
+ if (isOpen && !this.disabled) {
6133
+ dropdownManager.openDropdown(this);
6134
+ this.addGlobalEventListeners();
6135
+ }
6136
+ else {
6137
+ this.removeGlobalEventListeners();
6138
+ }
6139
+ }
6140
+ cleanup() {
6141
+ this.removeGlobalEventListeners();
6142
+ }
6143
+ closeDropdown() {
6144
+ this.isOpen = false;
6145
+ }
6146
+ }
6147
+
6148
+ const color = {
6149
+ bg: {
6150
+ accent: {
6151
+ "default": "#0075FF"}},
6152
+ text: {
6153
+ secondary: "#333333",
6154
+ inverse: "#FFFFFF"
6155
+ }};
6156
+ var systemTokens = {
6157
+ color: color
6158
+ };
6159
+
6160
+ const UNSUPPORTED_DROPDOWN_BUTTON_NAMES = new Set([
6161
+ 'neutral_xs',
6162
+ 'neutral_sm',
6163
+ 'neutral_md',
6164
+ ]);
6165
+ const DROPDOWN_BUTTON_NAMES = Object.keys(BUTTON_CONFIG).filter((name) => !name.endsWith('_lg') && !UNSUPPORTED_DROPDOWN_BUTTON_NAMES.has(name));
6166
+ const DROPDOWN_BUTTON_CONFIG = Object.fromEntries(DROPDOWN_BUTTON_NAMES.map(name => [name, BUTTON_CONFIG[name]]));
6167
+ const DROPDOWN_BUTTON_MIN_WIDTHS = {
6168
+ xs: buttonTokens.dropdown.xs.minWidth,
6169
+ sm: buttonTokens.dropdown.sm.minWidth,
6170
+ md: buttonTokens.dropdown.md.minWidth,
6171
+ };
6172
+ const PRESET_HOVER_BACKGROUNDS = PRESET_HOVER_BACKGROUNDS$1;
6173
+ const PRESET_CONTENT_COLORS = PRESET_CONTENT_COLORS$1;
6174
+ const PRESET_BORDER_COLORS = PRESET_BORDER_COLORS$1;
6175
+ const PRESET_DIVIDER_COLORS = {
6176
+ primary: buttonTokens.brand.strong.dropdown.divider,
6177
+ secondary: buttonTokens.brand.subtle.dropdown.divider,
6178
+ primary_outline: PRESET_BORDER_COLORS.primary_outline,
6179
+ neutral: buttonTokens.neutral.outline.border,
6180
+ neutral_outline: PRESET_BORDER_COLORS.neutral_outline,
6181
+ danger: buttonTokens.danger.strong.dropdown.divider,
6182
+ danger_outline: PRESET_BORDER_COLORS.danger_outline,
6183
+ };
6184
+ const MENU_ITEM_COLOR = systemTokens.color.text.secondary;
6185
+ const MENU_ITEM_ACTIVE_BACKGROUND = systemTokens.color.bg.accent.default;
6186
+ const MENU_ITEM_ACTIVE_COLOR = systemTokens.color.text.inverse;
6187
+ const PRESET_MENU_ITEM_COLORS = {
6188
+ primary: MENU_ITEM_COLOR,
6189
+ secondary: MENU_ITEM_COLOR,
6190
+ primary_outline: MENU_ITEM_COLOR,
6191
+ neutral: MENU_ITEM_COLOR,
6192
+ neutral_outline: MENU_ITEM_COLOR,
6193
+ danger: MENU_ITEM_COLOR,
6194
+ danger_outline: MENU_ITEM_COLOR,
6195
+ };
6196
+ const PRESET_MENU_ITEM_ACTIVE_BACKGROUNDS = {
6197
+ primary: MENU_ITEM_ACTIVE_BACKGROUND,
6198
+ secondary: MENU_ITEM_ACTIVE_BACKGROUND,
6199
+ primary_outline: MENU_ITEM_ACTIVE_BACKGROUND,
6200
+ neutral: MENU_ITEM_ACTIVE_BACKGROUND,
6201
+ neutral_outline: MENU_ITEM_ACTIVE_BACKGROUND,
6202
+ danger: MENU_ITEM_ACTIVE_BACKGROUND,
6203
+ danger_outline: MENU_ITEM_ACTIVE_BACKGROUND,
6204
+ };
6205
+ const PRESET_MENU_ITEM_ACTIVE_COLORS = {
6206
+ primary: MENU_ITEM_ACTIVE_COLOR,
6207
+ secondary: MENU_ITEM_ACTIVE_COLOR,
6208
+ primary_outline: MENU_ITEM_ACTIVE_COLOR,
6209
+ neutral: MENU_ITEM_ACTIVE_COLOR,
6210
+ neutral_outline: MENU_ITEM_ACTIVE_COLOR,
6211
+ danger: MENU_ITEM_ACTIVE_COLOR,
6212
+ danger_outline: MENU_ITEM_ACTIVE_COLOR,
6213
+ };
6214
+ const DROPDOWN_DISABLED_BACKGROUND = buttonTokens.bg.disabled;
6215
+ const DROPDOWN_DISABLED_CONTENT = buttonTokens.content.disabled;
6216
+ const DROPDOWN_DISABLED_BORDER = buttonTokens.border.disabled;
6217
+ const isDropdownButtonName = (value) => value in DROPDOWN_BUTTON_CONFIG;
6218
+ const getDropdownButtonPreset = (value) => getPresetName(value);
6219
+
6220
+ const sdDropdownButtonCss = () => `sd-dropdown-button{display:inline-flex;width:fit-content;height:fit-content}.sd-dropdown-button{display:inline-flex;position:relative}.sd-dropdown-button__trigger{--sd-dropdown-button-height:var(--sd-button-md-height, 34px);--sd-dropdown-button-padding-x:var(--sd-button-md-padding-x, 20px);--sd-dropdown-button-gap:var(--sd-button-md-gap, 8px);--sd-dropdown-button-font-family:var(--sd-button-md-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-md-typography-font-size, 12px);--sd-dropdown-button-font-weight:var(--sd-button-md-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(--sd-button-md-typography-text-decoration, none);--sd-dropdown-button-bg:#025497;--sd-dropdown-button-bg-hover:#004177;--sd-dropdown-button-border:transparent;--sd-dropdown-button-content:#ffffff;--sd-dropdown-button-divider:#006ac1;--sd-dropdown-button-accent:#006ac1;--sd-dropdown-button-min-width:106px;--sd-dropdown-button-disabled-bg:var(--sd-button-bg-disabled, $grey_30);--sd-dropdown-button-disabled-content:var(--sd-button-content-disabled, $grey_65);--sd-dropdown-button-disabled-border:var(--sd-button-border-disabled, $grey_45);display:inline-flex;align-items:stretch;justify-content:space-between;min-width:var(--sd-dropdown-button-min-width);min-height:var(--sd-dropdown-button-height);padding:0;border:var(--sd-button-border-width-default, 1px) solid var(--sd-dropdown-button-border);border-radius:var(--sd-button-radius-default, 4px);background:var(--sd-dropdown-button-bg);color:var(--sd-dropdown-button-content);cursor:pointer;box-sizing:border-box;font-family:var(--sd-dropdown-button-font-family);font-size:var(--sd-dropdown-button-font-size);font-weight:var(--sd-dropdown-button-font-weight);line-height:1;text-decoration:var(--sd-dropdown-button-text-decoration);transition:background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;white-space:nowrap}.sd-dropdown-button__trigger:hover:not(.sd-dropdown-button__trigger--disabled){background:var(--sd-dropdown-button-bg-hover)}.sd-dropdown-button__trigger:focus-visible{outline:0;box-shadow:0 0 0 2px var(--sd-dropdown-button-accent)}.sd-dropdown-button__trigger--xs{--sd-dropdown-button-height:var(--sd-button-xs-height, 24px);--sd-dropdown-button-padding-x:var(--sd-button-xs-padding-x, 8px);--sd-dropdown-button-gap:var(--sd-button-xs-gap, 4px);--sd-dropdown-button-font-family:var(--sd-button-xs-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-xs-typography-font-size, 12px);--sd-dropdown-button-font-weight:var(--sd-button-xs-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(--sd-button-xs-typography-text-decoration, none)}.sd-dropdown-button__trigger--sm{--sd-dropdown-button-height:var(--sd-button-sm-height, 28px);--sd-dropdown-button-padding-x:var(--sd-button-sm-padding-x, 12px);--sd-dropdown-button-gap:var(--sd-button-sm-gap, 6px);--sd-dropdown-button-font-family:var(--sd-button-sm-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-sm-typography-font-size, 12px);--sd-dropdown-button-font-weight:var(--sd-button-sm-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(--sd-button-sm-typography-text-decoration, none)}.sd-dropdown-button__trigger--md{--sd-dropdown-button-height:var(--sd-button-md-height, 34px);--sd-dropdown-button-padding-x:var(--sd-button-md-padding-x, 20px);--sd-dropdown-button-gap:var(--sd-button-md-gap, 8px);--sd-dropdown-button-font-family:var(--sd-button-md-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-md-typography-font-size, 16px);--sd-dropdown-button-font-weight:var(--sd-button-md-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(--sd-button-md-typography-text-decoration, none)}.sd-dropdown-button__trigger--disabled{border-color:var(--sd-dropdown-button-disabled-border);background:var(--sd-dropdown-button-disabled-bg);color:var(--sd-dropdown-button-disabled-content);cursor:not-allowed}.sd-dropdown-button__trigger--disabled .sd-dropdown-button__trigger-divider{background:var(--sd-dropdown-button-disabled-border)}.sd-dropdown-button__trigger-label,.sd-dropdown-button__trigger-icon{display:inline-flex;align-items:center;justify-content:center}.sd-dropdown-button__trigger-label{flex:1 1 auto;min-width:0;padding:0 var(--sd-dropdown-button-padding-x)}.sd-dropdown-button__trigger-divider{align-self:stretch;width:1px;height:auto;background:var(--sd-dropdown-button-divider);opacity:0.9}.sd-dropdown-button__trigger-icon{flex:0 0 auto;min-width:calc(var(--sd-dropdown-button-height) - 2px);padding:0 calc(var(--sd-dropdown-button-gap) + 2px)}.sd-dropdown-button__menu{display:grid;width:max-content;min-width:max-content;max-width:calc(100vw - 24px);padding:4px 0;border:0;border-radius:4px;background:#FFFFFF;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1019607843);box-sizing:border-box;overflow:hidden}.sd-dropdown-button__menu-item{display:inline-flex;align-items:center;gap:8px;min-height:28px;width:100%;padding:0 12px;border:0;border-radius:0;background:transparent;color:var(--sd-dropdown-button-menu-item-color);cursor:pointer;box-sizing:border-box;font:inherit;text-align:left;transition:background-color 0.15s ease, color 0.15s ease}.sd-dropdown-button__menu-item--active{background:var(--sd-dropdown-button-menu-item-active-bg);color:var(--sd-dropdown-button-menu-item-active-color)}.sd-dropdown-button__menu-item--disabled{color:var(--sd-dropdown-button-disabled-content);cursor:not-allowed}.sd-dropdown-button__menu-item-icon{flex:0 0 auto}.sd-dropdown-button__menu-item-label{display:inline-flex;align-items:center;min-width:0;white-space:nowrap;font-size:12px}`;
6221
+
6222
+ class SdDropdownButton extends BaseDropdownEvent {
6223
+ constructor(hostRef) {
6224
+ super();
6225
+ registerInstance(this, hostRef);
6226
+ this.click = createEvent(this, "sdClick");
6227
+ this.dropDownShow = createEvent(this, "sdDropDownShow");
6228
+ }
6229
+ get el() { return getElement(this); }
6230
+ name = 'primary_sm';
6231
+ label = '';
6232
+ items = [];
6233
+ disabled = false;
6234
+ isOpen = false;
6235
+ itemIndex = -1;
6236
+ triggerRef;
6237
+ menuRef;
6238
+ click;
6239
+ dropDownShow;
6240
+ handleOpenChange(isOpen) {
6241
+ this.onDropdownToggle(isOpen);
6242
+ this.dropDownShow.emit({ isOpen });
6243
+ if (!isOpen) {
6244
+ this.itemIndex = -1;
6245
+ }
6246
+ }
6247
+ componentWillLoad() {
6248
+ this.initializeEvent();
6249
+ }
6250
+ disconnectedCallback() {
6251
+ this.cleanupEvent();
6252
+ }
6253
+ async sdOpen() {
6254
+ if (this.disabled || this.items.length === 0)
6255
+ return;
6256
+ this.isOpen = true;
6257
+ }
6258
+ async sdClose() {
6259
+ this.closeDropdown();
6260
+ }
6261
+ closeDropdown = () => {
6262
+ this.isOpen = false;
6263
+ };
6264
+ handleDocumentClick(event) {
6265
+ const target = event.target;
6266
+ if (!target)
6267
+ return;
6268
+ if (this.el.contains(target))
6269
+ return;
6270
+ if (this.menuRef?.contains(target))
6271
+ return;
6272
+ this.closeDropdown();
6273
+ }
6274
+ handleDocumentKeydown(event) {
6275
+ if (!this.isOpen)
6276
+ return;
6277
+ const targetKeys = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];
6278
+ if (!targetKeys.includes(event.key))
6279
+ return;
6280
+ event.preventDefault();
6281
+ event.stopPropagation();
6282
+ switch (event.key) {
6283
+ case 'ArrowDown':
6284
+ this.itemIndex = this.getNextEnabledIndex(1);
6285
+ break;
6286
+ case 'ArrowUp':
6287
+ this.itemIndex = this.getNextEnabledIndex(-1);
6288
+ break;
6289
+ case 'Enter':
6290
+ if (this.itemIndex < 0)
6291
+ return;
6292
+ this.selectItem(this.items[this.itemIndex]);
6293
+ break;
6294
+ case 'Escape':
6295
+ this.closeDropdown();
6296
+ break;
6297
+ }
6298
+ }
6299
+ get resolvedConfig() {
6300
+ if (!isDropdownButtonName(this.name)) {
6301
+ throw new Error(`Invalid sd-dropdown-button name: ${this.name}`);
6302
+ }
6303
+ const config = DROPDOWN_BUTTON_CONFIG[this.name];
6304
+ const preset = getDropdownButtonPreset(this.name);
6305
+ return {
6306
+ config,
6307
+ preset,
6308
+ };
6059
6309
  }
6060
- isDateInRange(date) {
6061
- const [start, end] = this.dateRange;
6062
- // 1. 날짜 범위가 완전히 선택된 경우
6063
- if (start && end) {
6064
- return date >= start && date <= end;
6310
+ getNextEnabledIndex(direction) {
6311
+ const enabledIndices = this.items.reduce((acc, item, index) => {
6312
+ if (!item.disabled) {
6313
+ acc.push(index);
6314
+ }
6315
+ return acc;
6316
+ }, []);
6317
+ if (enabledIndices.length === 0) {
6318
+ return -1;
6065
6319
  }
6066
- // 2. hover 상태의 날짜 범위를 확인
6067
- if (!this.hoverDate || !start || end) {
6068
- return false;
6320
+ const currentPosition = enabledIndices.indexOf(this.itemIndex);
6321
+ if (currentPosition === -1) {
6322
+ return direction === 1 ? enabledIndices[0] : enabledIndices[enabledIndices.length - 1];
6069
6323
  }
6070
- // 3. dateRange[0]과 hoverDate를 기준으로 범위 계산
6071
- const [from, to] = start <= this.hoverDate ? [start, this.hoverDate] : [this.hoverDate, start];
6072
- return date >= from && date <= to;
6324
+ const nextPosition = (currentPosition + direction + enabledIndices.length) % enabledIndices.length;
6325
+ return enabledIndices[nextPosition];
6073
6326
  }
6074
- isDisabledDate(date) {
6075
- const [start, end] = this.dateRange;
6076
- if (this.maxRange && start && !end) {
6077
- const minDate = addDays(start, -this.maxRange);
6078
- const maxDate = addDays(start, this.maxRange);
6079
- return !(minDate <= date && date <= maxDate);
6327
+ toggleDropdown = (event) => {
6328
+ event.stopPropagation();
6329
+ if (this.disabled || this.items.length === 0) {
6330
+ return;
6080
6331
  }
6081
- if (!this.selectable || !this.selectable[0] || !this.selectable[1]) {
6082
- return false;
6332
+ this.isOpen = !this.isOpen;
6333
+ };
6334
+ selectItem(item, event) {
6335
+ event?.stopPropagation();
6336
+ if (!item || item.disabled) {
6337
+ return;
6083
6338
  }
6084
- return !(date >= this.selectable[0] && date <= this.selectable[1]);
6339
+ this.click.emit(item.value);
6340
+ this.closeDropdown();
6085
6341
  }
6086
- /* ----------------------------------
6087
- * Interaction
6088
- * ---------------------------------- */
6089
- openMenu() {
6090
- if (this.disabled)
6091
- return;
6092
- this.tempDateRange = [...this.dateRange];
6093
- this.resetCalendarByDateRange(this.dateRange);
6094
- this.isOpen = true;
6342
+ getTriggerClasses(preset, size, disabled, isOpen) {
6343
+ const classes = [
6344
+ 'sd-dropdown-button__trigger',
6345
+ `sd-dropdown-button__trigger--${preset}`,
6346
+ `sd-dropdown-button__trigger--${size}`,
6347
+ ];
6348
+ if (disabled) {
6349
+ classes.push('sd-dropdown-button__trigger--disabled');
6350
+ }
6351
+ if (isOpen) {
6352
+ classes.push('sd-dropdown-button__trigger--open');
6353
+ }
6354
+ return classes.join(' ');
6095
6355
  }
6096
- closeMenu = () => {
6097
- if (!this.dateRange[0] || !this.dateRange[1]) {
6098
- this.dateRange = [...this.tempDateRange];
6356
+ getMenuItemClasses(isActive, isDisabled) {
6357
+ const classes = ['sd-dropdown-button__menu-item'];
6358
+ if (isActive) {
6359
+ classes.push('sd-dropdown-button__menu-item--active');
6099
6360
  }
6100
- this.isOpen = false;
6101
- };
6102
- handleDateClick(index, day) {
6103
- this.setHoverDate('');
6104
- const selectedDate = this.formatDate(index, day);
6105
- if (!this.dateRange[0] || !!this.dateRange[1] || selectedDate < this.dateRange[0]) {
6106
- this.setDateRange([selectedDate, '']);
6107
- return; // 아직 완료 아님
6361
+ if (isDisabled) {
6362
+ classes.push('sd-dropdown-button__menu-item--disabled');
6108
6363
  }
6109
- const newRange = [this.dateRange[0], selectedDate];
6110
- this.setDateRange(newRange);
6111
- this.value = newRange;
6112
- this.update.emit?.(newRange);
6364
+ return classes.join(' ');
6113
6365
  }
6114
- handleDateHover(index, day) {
6115
- const hoverDate = this.formatDate(index, day);
6116
- this.setHoverDate(hoverDate);
6366
+ renderDropdown(preset) {
6367
+ if (!this.isOpen || !this.triggerRef)
6368
+ return null;
6369
+ return (hAsync("sd-portal", { open: this.isOpen, parentRef: this.triggerRef, onSdClose: this.closeDropdown }, hAsync("div", { class: "sd-dropdown-button__menu", role: "menu", ref: el => (this.menuRef = el), style: {
6370
+ '--sd-dropdown-button-menu-item-color': PRESET_MENU_ITEM_COLORS[preset],
6371
+ '--sd-dropdown-button-menu-item-active-bg': PRESET_MENU_ITEM_ACTIVE_BACKGROUNDS[preset],
6372
+ '--sd-dropdown-button-menu-item-active-color': PRESET_MENU_ITEM_ACTIVE_COLORS[preset],
6373
+ '--sd-dropdown-button-menu-border': PRESET_BORDER_COLORS[preset] === 'transparent'
6374
+ ? PRESET_DIVIDER_COLORS[preset]
6375
+ : PRESET_BORDER_COLORS[preset],
6376
+ } }, this.items.map((item, index) => {
6377
+ const isActive = this.itemIndex === index && !item.disabled;
6378
+ const iconColor = item.disabled
6379
+ ? DROPDOWN_DISABLED_CONTENT
6380
+ : isActive
6381
+ ? PRESET_MENU_ITEM_ACTIVE_COLORS[preset]
6382
+ : PRESET_MENU_ITEM_COLORS[preset];
6383
+ return (hAsync("button", { type: "button", role: "menuitem", class: this.getMenuItemClasses(isActive, Boolean(item.disabled)), disabled: item.disabled, onClick: event => this.selectItem(item, event), onMouseEnter: () => {
6384
+ if (!item.disabled) {
6385
+ this.itemIndex = index;
6386
+ }
6387
+ } }, item.icon && (hAsync("sd-icon", { class: "sd-dropdown-button__menu-item-icon", name: item.icon, size: 12, color: iconColor })), hAsync("span", { class: "sd-dropdown-button__menu-item-label", innerHTML: item.label })));
6388
+ }))));
6117
6389
  }
6118
6390
  render() {
6119
- return (hAsync("div", { key: '96cd4e99ae976517e7b24c5ff3046af976adc5cb', class: {
6120
- 'sd-date-range-picker': true,
6121
- 'sd-date-range-picker--disabled': this.disabled,
6122
- } }, hAsync("sd-input", { key: 'a84838a1a84d990b289f0b753ccf3e2f45da4770', ref: el => (this.inputEl = el), value: !!this.dateRange[0] ? `${this.dateRange[0]} ~ ${this.dateRange[1]}` : '', label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-range-picker__input", onClick: () => this.openMenu() }, hAsync("sd-icon", { key: 'd926c672dcf457a68ebe644b32c90a03ba29b175', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (hAsync("sd-portal", { key: '0af519c7ac2ade00972e23b9ecb0344989d87f51', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.closeMenu }, hAsync("div", { key: 'd9109e573215092c6b386ae27ac7377c4347df4c', class: "sd-date-range-picker__menu" }, hAsync("div", { key: 'ca4743a26ed0571bc3b63218a32a113e50dbd81a', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, hAsync("button", { key: '6f0fe1ede6d171e749a241fbeec32056250709b9', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, hAsync("sd-icon", { key: '821526a069a845f271b0e5db607f747efe4e610c', name: "arrowLeft", size: "12", color: "#CCCCCC" })), hAsync("div", { key: 'e9402009c8b034953d7ff4be5a4eea64d7fed21d', class: "header-label" }, this.prevYear), hAsync("button", { key: 'b752631ab64e32a4a39c13898cc3db5e25897c4b', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, hAsync("sd-icon", { key: '62c6e0004ff1a0d8f260e11b9d17ea7ccca942ee', name: "arrowRight", size: "12", color: "#CCCCCC" }))), hAsync("div", { key: '3a05a7e02664be8d9dfb85d0bada03a2d352af12', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (hAsync(Fragment, null, index === 1 && hAsync("div", { class: "separator" }), hAsync("div", { key: index, class: "calendar-container" }, hAsync("div", { class: "calendar-header" }, hAsync("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, hAsync("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
6123
- ? `${this.prevYear}.${String(this.prevMonth).padStart(2, '0')}`
6124
- : `${this.nextYear}.${String(this.nextMonth).padStart(2, '0')}`), hAsync("div", { class: "calendar-days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (hAsync("sd-date-box", { key: day, date: day, disabled: true, class: "day" })))), hAsync("div", { class: "calendar-body mt-12pxr grid grid-cols-7 gap-y-8pxr" }, [...calendar.prevMonthDays, ...calendar.days, ...calendar.afterMonthDays].map((day, idx) => (hAsync("sd-date-box", { key: `prev${day}_${idx}`, date: !day ? '' : Number(day), selected: this.dateRange.some(date => date === this.formatDate(index, Number(day))), type: this.getDateBoxType(this.formatDate(index, Number(day))), isToday: today === this.formatDate(index, Number(day)), disabled: !day ? true : this.isDisabledDate(this.formatDate(index, Number(day))), inRange: this.isDateInRange(this.formatDate(index, Number(day))), isStartDate: this.dateRange[0] === this.formatDate(index, Number(day)), isEndDate: this.dateRange[1] === this.formatDate(index, Number(day)), onSdClick: () => this.handleDateClick(index, Number(day)), onSdMouseOver: () => this.handleDateHover(index, Number(day)) }))))))))))))));
6391
+ const { config, preset } = this.resolvedConfig;
6392
+ const chevronColor = this.disabled ? DROPDOWN_DISABLED_CONTENT : PRESET_CONTENT_COLORS[preset];
6393
+ return (hAsync("div", { key: '93869c11681e1ebaa54ff64fb940a9a5ae6b10e1', class: "sd-dropdown-button" }, hAsync("button", { key: 'e21f44d8b18ed969a30e37263d74327cae73b543', type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: {
6394
+ '--sd-dropdown-button-min-width': `${DROPDOWN_BUTTON_MIN_WIDTHS[config.size]}px`,
6395
+ '--sd-dropdown-button-bg': config.color,
6396
+ '--sd-dropdown-button-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
6397
+ '--sd-dropdown-button-border': PRESET_BORDER_COLORS[preset],
6398
+ '--sd-dropdown-button-content': PRESET_CONTENT_COLORS[preset],
6399
+ '--sd-dropdown-button-divider': PRESET_DIVIDER_COLORS[preset],
6400
+ '--sd-dropdown-button-accent': BUTTON_FOCUS_RING_COLOR,
6401
+ '--sd-dropdown-button-disabled-bg': DROPDOWN_DISABLED_BACKGROUND,
6402
+ '--sd-dropdown-button-disabled-content': DROPDOWN_DISABLED_CONTENT,
6403
+ '--sd-dropdown-button-disabled-border': DROPDOWN_DISABLED_BORDER,
6404
+ } }, hAsync("span", { key: '561db14272548fc4eb9ffcf750894198180c0d57', class: "sd-dropdown-button__trigger-label" }, this.label), hAsync("span", { key: '954a689fc1387fd5b37964188c209049f21f94ba', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), hAsync("span", { key: '41a603c6549fda954eca10081e2d4386c3284561', class: "sd-dropdown-button__trigger-icon", "aria-hidden": "true" }, hAsync("sd-icon", { key: 'f38cb3ee71cdcc11db5993d3aa96f7e1c23953d0', name: this.isOpen ? 'arrowUp' : 'arrowDown', size: 12, color: chevronColor }))), this.renderDropdown(preset)));
6125
6405
  }
6126
6406
  static get watchers() { return {
6127
- "value": [{
6128
- "onValueChange": 0
6407
+ "isOpen": [{
6408
+ "handleOpenChange": 0
6129
6409
  }]
6130
6410
  }; }
6131
- static get style() { return sdDateRangePickerCss(); }
6411
+ static get style() { return sdDropdownButtonCss(); }
6132
6412
  static get cmpMeta() { return {
6133
- "$flags$": 514,
6134
- "$tagName$": "sd-date-range-picker",
6413
+ "$flags$": 512,
6414
+ "$tagName$": "sd-dropdown-button",
6135
6415
  "$members$": {
6136
- "value": [1040],
6416
+ "name": [1],
6137
6417
  "label": [1],
6138
- "selectable": [16],
6139
- "maxRange": [2, "max-range"],
6418
+ "items": [16],
6140
6419
  "disabled": [4],
6141
- "placeholder": [1],
6142
6420
  "isOpen": [32],
6143
- "dateRange": [32],
6144
- "hoverDate": [32],
6145
- "prevYear": [32],
6146
- "prevMonth": [32]
6421
+ "itemIndex": [32],
6422
+ "sdOpen": [64],
6423
+ "sdClose": [64]
6147
6424
  },
6148
6425
  "$listeners$": undefined,
6149
6426
  "$lazyBundleId$": "-",
@@ -6271,15 +6548,15 @@ class SdField {
6271
6548
  }
6272
6549
  }
6273
6550
  render() {
6274
- return (hAsync("div", { key: '3c69abe493110b5665795706a9ae0e525f213aca', class: {
6551
+ return (hAsync("div", { key: '9ed0e615761d5c76dff1e95318b131bde22cd376', class: {
6275
6552
  'sd-field': true,
6276
6553
  'sd-field--has-label': !!this.label,
6277
6554
  'sd-field--has-label-inside': !!this.label && this.insideLabel,
6278
6555
  [this.fieldStatus]: !!this.fieldStatus,
6279
- } }, hAsync("div", { key: 'decc6821b7172f5ecc2343472014c08674725904', class: "sd-field__wrapper" }, this.renderLabel(this.label), hAsync("div", { key: 'ca5e93f049db10ecaaaab091fdf394ac4b55e292', class: {
6556
+ } }, hAsync("div", { key: '6d051479c9874f3c765d50096db80c73c4fc461b', class: "sd-field__wrapper" }, this.renderLabel(this.label), hAsync("div", { key: '64ea18d481f0ad689ed984cd40837717fb37a751', class: {
6280
6557
  'sd-field__control': true,
6281
6558
  'sd-field__control--label-inside ': !!this.label && this.insideLabel,
6282
- } }, hAsync("slot", { key: '7ee38983d32985f4b4a035830bcdca0e14b2cf71' }))), this.errorMsg && hAsync("div", { key: 'c2d6ef860ced48657b906806f2618594b094ea79', class: "sd-field__error-message" }, this.errorMsg)));
6559
+ } }, hAsync("slot", { key: '8e043b3e476e0d574612c892f6c8c0bca28c117f' }))), this.errorMsg && hAsync("div", { key: '22d42bacdbdfe85dbe08395d21e59a06946986f5', class: "sd-field__error-message" }, this.errorMsg)));
6283
6560
  }
6284
6561
  renderLabel(label) {
6285
6562
  if (!label)
@@ -6413,15 +6690,15 @@ class SdFilePicker {
6413
6690
  render() {
6414
6691
  const hasFiles = this.hasFiles();
6415
6692
  const displayText = this.getDisplayText();
6416
- return (hAsync("div", { key: '659ab6f0e1fedadfbef1838def391aab28ae6e62', class: {
6693
+ return (hAsync("div", { key: '8d0b3002090064a062df3bc21e54fb8011a520ed', class: {
6417
6694
  'sd-file-picker': true,
6418
6695
  [this.getStatusClass()]: true,
6419
6696
  'sd-file-picker--inline': this.inline,
6420
- }, onClick: this.handleClick, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, hAsync("input", { key: '55ffb6c1b3ff502b555cb48a31301ac9b30701a4', ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder }), hAsync("sd-icon", { key: 'b7755876e0f327d15a886a86592cd59bd3435202', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), hAsync("div", { key: 'e1e2004c64166eb2b611c48ca51cc793fb90434c', ref: el => (this.fileNamesRef = el), class: {
6697
+ }, onClick: this.handleClick, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, hAsync("input", { key: 'e58b89fa203a86286d088a7ec7b1be0f740b948a', ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder }), hAsync("sd-icon", { key: '42440a854a85aeed63f887b25fa13d9609202974', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), hAsync("div", { key: '25bd48b058fcff917aa1ee13c9cd991c49ef4aa1', ref: el => (this.fileNamesRef = el), class: {
6421
6698
  'sd-file-picker__text': true,
6422
6699
  'sd-file-picker__text--placeholder': !hasFiles,
6423
6700
  'sd-file-picker__text--active': hasFiles,
6424
- } }, displayText), !this.disabled && hasFiles && (hAsync("sd-icon", { key: '0a3c122382cab2148a88fbd4fdc9ff1f7cde757b', name: "close", size: 12, color: "#888888", class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (hAsync("div", { key: '628717309bf16c0906e9ac21ecbf14a416eea8d8', class: "sd-file-picker__tooltip" }, displayText))));
6701
+ } }, displayText), !this.disabled && hasFiles && (hAsync("sd-icon", { key: '9d82107ff69909519d1a3051054c42370e6b181c', name: "close", size: 12, color: "#888888", class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (hAsync("div", { key: '8c8dfeb9a82c4ca69e6ae88aa8f129c72d884b14', class: "sd-file-picker__tooltip" }, displayText))));
6425
6702
  }
6426
6703
  static get watchers() { return {
6427
6704
  "value": [{
@@ -6600,7 +6877,7 @@ class SdFloatingPopover {
6600
6877
  this.close.emit();
6601
6878
  }
6602
6879
  render() {
6603
- return hAsync("slot", { key: '2f33d335a7cf00ace576aed610a0e77d711a5b10' });
6880
+ return hAsync("slot", { key: 'fe02da5ce55072c8fa313e467967f2a1c18f86bb' });
6604
6881
  }
6605
6882
  static get style() { return sdFloatingPortalCss(); }
6606
6883
  static get cmpMeta() { return {
@@ -6757,9 +7034,9 @@ class SdGuide {
6757
7034
  };
6758
7035
  render() {
6759
7036
  const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
6760
- return (hAsync("div", { key: '2a7d3d040d3fbe7d0c22afc62d67a848fbae67d9', class: "sd-guide", style: {
7037
+ return (hAsync("div", { key: '69dc81c8fe0c5843e86709e72f0cdf3ecaf8c52a', class: "sd-guide", style: {
6761
7038
  '--sd-guide-color': GUIDE_ICON[this.type].color,
6762
- } }, hAsync("sd-button", { key: 'e354fa7a48aacabbd7688f9546d71ec138b4a648', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: this.label || GUIDE_LABEL[this.type], size: "sm", color: this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45', icon: iconName, iconColor: this.popupShow ? 'white' : iconColor, iconSize: iconSize, noHover: this.popupShow, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (hAsync("sd-portal", { key: '157583215cdba27ae493a07aaa3eb4a0e3923971', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, hAsync("div", { key: '6aaa8f4ee6f44225ee63ef740d7398e87207c0c0', style: { position: 'absolute', width: '0px', height: '0px' } }, hAsync("div", { key: '9184936963f96e2537b3713bd5ee38d0c058c72b', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, hAsync("sd-button", { key: 'a1f653f7e40f6ad4e97dca82e10d4f03843469fd', class: "sd-guide__popup__close", icon: "close", color: "grey_65", size: "md", variant: "ghost", noHover: true, onSdClick: this.closeDropdown }), hAsync("div", { key: '561433ec3fcf6f9de4badd8e24ffaffbab4e62df', class: "sd-guide__popup__header" }, hAsync("sd-icon", { key: '69aafb073fa680f8353deccb860320da083ff121', name: "helpOutline", size: 24, color: "green_65" }), hAsync("h3", { key: '71f7fcb3068d572523c6bf53276e654feb1056f6', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), hAsync("ul", { key: '407db996ded71b9a5786b1e7967349517c7eb877', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
7039
+ } }, hAsync("sd-button", { key: '254e03a9d2e4d36ca26a23158acc960dcfb90578', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: this.label || GUIDE_LABEL[this.type], size: "sm", color: this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45', icon: iconName, iconColor: this.popupShow ? 'white' : iconColor, iconSize: iconSize, noHover: this.popupShow, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (hAsync("sd-portal", { key: '701a049ebcabd0b29fa74fac246cecdedace2022', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, hAsync("div", { key: 'e8f8efcbcbe29d51a29a8ca3803ed0a754a42531', style: { position: 'absolute', width: '0px', height: '0px' } }, hAsync("div", { key: '5f54893503560535d6adedea41d81182c72b04e5', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, hAsync("sd-button", { key: '9747683a1123307a9e4214e0f4be63fd09af1fec', class: "sd-guide__popup__close", icon: "close", color: "grey_65", size: "md", variant: "ghost", noHover: true, onSdClick: this.closeDropdown }), hAsync("div", { key: '9fb06eaeae5fc0a805855b78b8d67583183f7a8c', class: "sd-guide__popup__header" }, hAsync("sd-icon", { key: 'ad4b7e1e5740bbd32877efc0a5614b4e657aca8a', name: "helpOutline", size: 24, color: "green_65" }), hAsync("h3", { key: '5cdf73e175a51b13ee2c5408014de27a9650ac20', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), hAsync("ul", { key: 'f02a8cf5ffe831d2a466e4357f7721c5622d7bee', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
6763
7040
  }
6764
7041
  // 현재 2depth까지만 스타일 적용
6765
7042
  renderListItem(message, depth = 0) {
@@ -8804,7 +9081,7 @@ class SdIcon {
8804
9081
  }
8805
9082
  render() {
8806
9083
  const IconComponent = Icons[this.name]?.[this.size];
8807
- return (hAsync("i", { key: '1d6a48769c99bbfe9576016e24766b8c82ab570e', class: this.getIconClasses(), style: this.iconStyle }, hAsync(IconComponent, { key: '3fdb4195ef13656e79b402a4eae2fb0210fb3a97', color: this.resolvedColor })));
9084
+ return (hAsync("i", { key: '69b8654e2fd745282c1878306a5c464ba0995468', class: this.getIconClasses(), style: this.iconStyle }, hAsync(IconComponent, { key: '64b00309d5ad7787c4fbf2c200719fd74062ccbd', color: this.resolvedColor })));
8808
9085
  }
8809
9086
  static get style() { return sdIconCss(); }
8810
9087
  static get cmpMeta() { return {
@@ -8929,7 +9206,7 @@ class SdInput {
8929
9206
  }
8930
9207
  };
8931
9208
  render() {
8932
- return (hAsync("sd-field", { key: '87f02ba890fd952f89eb86d200318038137ba1a4', name: this.name, label: this.label, insideLabel: this.insideLabel, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, hAsync("label", { key: '0bb5824067b33c178b1f60ececdccfe0a3d5f294', class: "sd-input__content", style: { width: '100%' } }, hAsync("slot", { key: '6f67712b4ca708ba511c57379a6b5118732f146a', name: "prefix" }), hAsync("input", { key: 'b337a1161dedb41ed29a690fa963c0ac60dd0c79', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), hAsync("slot", { key: 'bf45d9fd71551dc6a3bb96cdc44512796beee923', name: "suffix" }), this.clearable && this.internalValue && (hAsync("sd-icon", { key: 'aed0a5d9115ba8b7601dc62423349bee1a9978c7', name: "close", color: "grey_65", size: "16", class: "sd-input__clear-icon", onClick: async () => {
9209
+ return (hAsync("sd-field", { key: '7f32214220ee8dc3e830597b84f846096b48b305', name: this.name, label: this.label, insideLabel: this.insideLabel, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, hAsync("label", { key: '71b1f7ce70d475e28f1d9f29c9a49b3f2f548f53', class: "sd-input__content", style: { width: '100%' } }, hAsync("slot", { key: 'c0c92d686b4cee0930716a47a701459c3afc41ff', name: "prefix" }), hAsync("input", { key: '1cdacf0a76d118c0711bae5b1263650c195db838', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), hAsync("slot", { key: '7786756fca59c02dfb159f10e2925f73b64f0366', name: "suffix" }), this.clearable && this.internalValue && (hAsync("sd-icon", { key: '82b24cae340687d7412ec5210548ad92e33be744', name: "close", color: "grey_65", size: "16", class: "sd-input__clear-icon", onClick: async () => {
8933
9210
  this.internalValue = '';
8934
9211
  await this.formField?.sdValidate();
8935
9212
  } })))));
@@ -8992,7 +9269,7 @@ class SdLoadingSpinner {
8992
9269
  return resolveColor(this.color);
8993
9270
  }
8994
9271
  render() {
8995
- return (hAsync(Fragment, { key: 'c3b3448fcc65334af3246f80157b195ec5595afe' }, hAsync("svg", { key: '24701b65d17e56434cf46b72dbd5acec208b5dc8', class: "sd-loading-spinner", width: "72px", height: "72px", viewBox: "25 25 50 50", style: { color: this.resolvedColor } }, hAsync("circle", { key: 'e19c68c082348d36eecd05fa561eee91182349f2', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
9272
+ return (hAsync(Fragment, { key: '2b60d18fe2f1dc23d90c5552202cdea60a91b2c0' }, hAsync("svg", { key: 'd8e8716433c206019384899897b052d28d486f92', class: "sd-loading-spinner", width: "72px", height: "72px", viewBox: "25 25 50 50", style: { color: this.resolvedColor } }, hAsync("circle", { key: 'c9aaffe398dd40ccea3a2d8a89cb880e3eeb5a6d', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
8996
9273
  }
8997
9274
  static get style() { return sdLoadingSpinnerCss(); }
8998
9275
  static get cmpMeta() { return {
@@ -9314,17 +9591,17 @@ class SdNumberInput {
9314
9591
  const inputStyles = {
9315
9592
  textAlign: this.useButton ? 'center' : 'right',
9316
9593
  };
9317
- return (hAsync("sd-field", { key: '7aa387eeb5850052e121931b3f8183373b4319aa', name: this.name, label: this.label, insideLabel: this.insideLabel, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, ref: el => (this.formField = el), style: inputWidth }, hAsync("label", { key: 'f5bbb6c76e32de4aefe59c6958a38e1a560f05c9', class: {
9594
+ return (hAsync("sd-field", { key: 'e72a01e264aa4d680aa740f5098e3be9bb7ac8ac', name: this.name, label: this.label, insideLabel: this.insideLabel, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, ref: el => (this.formField = el), style: inputWidth }, hAsync("label", { key: '3006df4eaf22ecf7e9ad330270623ba7cbbf9c9a', class: {
9318
9595
  'sd-number-input': true,
9319
9596
  [this.getInputStatus()]: true,
9320
9597
  'sd-number-input--with-buttons': this.useButton,
9321
- }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, hAsync("input", { key: 'fc26b7cf0d121025c9a748b158640e03188d72d3', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__input ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, style: inputStyles, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.useButton && (hAsync("div", { key: 'c9325ea7dd19c02fead55a0d63ac0b7b16143d08', class: "sd-number-input__buttons" }, hAsync("button", { key: 'ec96811ce7046a3fe9506ca0635db97413d8283a', type: "button", class: {
9598
+ }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, hAsync("input", { key: 'e52177d9c7266a1630d9287fdc155f12a5dc7cca', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__input ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, style: inputStyles, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.useButton && (hAsync("div", { key: '18f45963c22ee6a1cdd52e45b41191c3726328ce', class: "sd-number-input__buttons" }, hAsync("button", { key: '73658fecb2300094b1880cae4595975b777b802a', type: "button", class: {
9322
9599
  'sd-number-input__button': true,
9323
9600
  'sd-number-input__button--decrement': true,
9324
- }, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: '70311a7723356ecc88125042d366bf567b0b5a2a', name: "minus", size: 12, color: this.isDecrementDisabled() ? 'grey_45' : 'brilliantblue_70' })), hAsync("button", { key: 'b7086218dc98fec4287e4becb0d834634fd52055', type: "button", class: {
9601
+ }, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: 'd2b4d8eb6b7f5dd30ba704c7d7b35051a5b0df7b', name: "minus", size: 12, color: this.isDecrementDisabled() ? 'grey_45' : 'brilliantblue_70' })), hAsync("button", { key: 'ddcd2255b7870657afbb6549cdc185a804aa3dbf', type: "button", class: {
9325
9602
  'sd-number-input__button': true,
9326
9603
  'sd-number-input__button--increment': true,
9327
- }, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: 'b945a1561978dc4bba1868fa57652e94a6bcfc34', name: "add", size: 12, color: this.isIncrementDisabled() ? 'grey_45' : 'brilliantblue_70' })))))));
9604
+ }, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: '971098976698154e8e644a93265dc746177c2ce0', name: "add", size: 12, color: this.isIncrementDisabled() ? 'grey_45' : 'brilliantblue_70' })))))));
9328
9605
  }
9329
9606
  static get watchers() { return {
9330
9607
  "value": [{
@@ -9448,12 +9725,12 @@ class SdPagination {
9448
9725
  }
9449
9726
  }
9450
9727
  render() {
9451
- return (hAsync("div", { key: 'feed08139c382f91539bc316a967ed1738529688', class: this.paginationClasses }, hAsync("div", { key: '42c908d7a685f2acab29a94d040e4f4c513fff38', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (hAsync("div", { class: "pagination-info" }, hAsync("span", { class: "current-page" }, this.currentPage), hAsync("span", null, "/"), hAsync("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (hAsync("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
9728
+ return (hAsync("div", { key: '8ab0a0f2dfb17154eaba138aa0688606500be296', class: this.paginationClasses }, hAsync("div", { key: '04b985f2d3e06ef35b18d6d375021499f36952f1', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (hAsync("div", { class: "pagination-info" }, hAsync("span", { class: "current-page" }, this.currentPage), hAsync("span", null, "/"), hAsync("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (hAsync("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
9452
9729
  'pagination-btn': true,
9453
9730
  'pagination-btn--selected': this.currentPage === n,
9454
9731
  }, disabled: this.currentPage === n, style: {
9455
9732
  '--pagination-btn-width': `${this.buttonWidth}px`,
9456
- }, onClick: () => this.handlePageChange(n) }, n)))), hAsync("div", { key: '2be11ae773c0bce71ecaf53f99daff3f5b2d567d', class: "append-btns" }, this.renderNextButtons())));
9733
+ }, onClick: () => this.handlePageChange(n) }, n)))), hAsync("div", { key: 'c2ef87605487622bed06cac8d13d180f4af23e76', class: "append-btns" }, this.renderNextButtons())));
9457
9734
  }
9458
9735
  static get style() { return sdPaginationCss(); }
9459
9736
  static get cmpMeta() { return {
@@ -9507,11 +9784,11 @@ class SdPopover {
9507
9784
  this.showPopover = false;
9508
9785
  };
9509
9786
  render() {
9510
- return (hAsync(Fragment, { key: '883bea0d5ef88bb63b4a1a2d778aedf0bce6f000' }, this.label ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onSdClick: () => (this.showPopover = !this.showPopover) })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (hAsync("sd-floating-portal", { key: 'f38658d537cd8cebb84e579b02c73209e8a81d3a', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, hAsync("div", { key: '472702d7d51c08051670012fc2e930f41ad7f1b5', class: {
9787
+ return (hAsync(Fragment, { key: 'fae8880113285544053957bb096c6618dfddc7ec' }, this.label ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onSdClick: () => (this.showPopover = !this.showPopover) })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (hAsync("sd-floating-portal", { key: '45323134dcbce4014492dde03c1416deda339ee1', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, hAsync("div", { key: 'c662820224d2c90bb806d2ac010cc95a53308b3a', class: {
9511
9788
  'sd-floating-menu': true,
9512
9789
  [`sd-floating-menu--${this.placement}`]: true,
9513
9790
  [this.menuClass]: !!this.menuClass,
9514
- } }, hAsync("i", { key: '1895eba14b74f393c7221db83fdf97e9a8f3a1aa', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, hAsync(TooltipArrow, { key: '4307eb8e750dc36cae5477b366a4ea08a59a5a45' })), hAsync("div", { key: '840d94cf1d4e3c63346cd48a2d47c1c0b0633046', class: "sd-floating-menu__content" }, this.menuTitle && hAsync("div", { key: 'ede807dfdb2efc2a8bf8f89ef597965092c79211', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (hAsync("div", { key: '613ea1b46810eec1958b735fc23811d66ff2ebf8', class: "sd-floating-menu__messages" }, this.messages.map(message => (hAsync("div", null, message))))), this.buttons.length > 0 && (hAsync("div", { key: '06712ed73687c0e99778d5fda6d75a4e07d815dd', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (hAsync("sd-button", { ...button })))))), this.useClose && (hAsync("button", { key: '20d628d8d31bd6464c26f3cf5ba894c5c3a2428f', title: "close", class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, hAsync("sd-icon", { key: 'cd1dcbe02ed55a25364e88621db5ab287eb7ed8e', name: "close", size: "12", color: "gery_55" }))))))));
9791
+ } }, hAsync("i", { key: '55bc21085df77a027d252d5c3ef6d665207c71f6', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, hAsync(TooltipArrow, { key: 'a9bb570b87481c0fe897e65ada655537dd4b8724' })), hAsync("div", { key: '5f28d241157a9f5481fc7fa4e48fd00fac1def5a', class: "sd-floating-menu__content" }, this.menuTitle && hAsync("div", { key: 'cc1dcbe2703dca70004159aa9fe8b18b122d8dbc', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (hAsync("div", { key: 'f7b72df569c2dce9e6c85bcd9509e38ac9cbbb80', class: "sd-floating-menu__messages" }, this.messages.map(message => (hAsync("div", null, message))))), this.buttons.length > 0 && (hAsync("div", { key: 'd01d2bc92e79454d747b2fd976bfeb431d4d90fe', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (hAsync("sd-button", { ...button })))))), this.useClose && (hAsync("button", { key: '9cf8cbd72d5bec64636b778ea0642d56c3229590', title: "close", class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, hAsync("sd-icon", { key: '6df940385a9472e73b408cc51c647c98c95a9af7', name: "close", size: "12", color: "gery_55" }))))))));
9515
9792
  }
9516
9793
  static get watchers() { return {
9517
9794
  "show": [{
@@ -9562,25 +9839,31 @@ class SdPortal {
9562
9839
  wrapper;
9563
9840
  rafId;
9564
9841
  isInsideClick = false;
9842
+ handleObservedScroll = () => this.updatePosition();
9565
9843
  resizeObserver;
9566
9844
  mutationObserver;
9845
+ scrollParents = [];
9846
+ isObserved = false;
9847
+ handleOpenChange() {
9848
+ this.syncPortalState();
9849
+ }
9567
9850
  componentDidLoad() {
9568
9851
  this.container = this.resolveContainer();
9569
- this.createWrapper();
9570
- this.moveSlotContent();
9571
- this.updatePosition();
9572
- this.observeParent();
9852
+ this.syncPortalState();
9573
9853
  }
9574
9854
  componentDidRender() {
9575
- if (!this.wrapper)
9576
- return;
9577
- this.wrapper.style.display = this.open ? 'block' : 'none';
9578
- if (this.open)
9579
- this.updatePosition();
9855
+ this.syncPortalState();
9580
9856
  }
9581
9857
  disconnectedCallback() {
9582
9858
  this.unobserveParent();
9583
- this.wrapper?.remove();
9859
+ if (this.wrapper?.parentNode) {
9860
+ try {
9861
+ this.wrapper.parentNode.removeChild(this.wrapper);
9862
+ }
9863
+ catch {
9864
+ // Stencil spec mock DOM can already detach the wrapper before this callback runs.
9865
+ }
9866
+ }
9584
9867
  }
9585
9868
  resolveContainer() {
9586
9869
  const el = typeof this.to === 'string' ? document.querySelector(this.to) : this.to;
@@ -9595,6 +9878,26 @@ class SdPortal {
9595
9878
  });
9596
9879
  this.container.appendChild(this.wrapper);
9597
9880
  }
9881
+ ensureWrapper() {
9882
+ if (this.wrapper)
9883
+ return;
9884
+ this.container ||= this.resolveContainer();
9885
+ this.createWrapper();
9886
+ this.moveSlotContent();
9887
+ }
9888
+ syncPortalState() {
9889
+ if (!this.open) {
9890
+ this.wrapper && (this.wrapper.style.display = 'none');
9891
+ this.unobserveParent();
9892
+ return;
9893
+ }
9894
+ this.ensureWrapper();
9895
+ if (!this.wrapper)
9896
+ return;
9897
+ this.wrapper.style.display = 'block';
9898
+ this.observeParent();
9899
+ this.updatePosition();
9900
+ }
9598
9901
  moveSlotContent() {
9599
9902
  if (!this.wrapper)
9600
9903
  return;
@@ -9636,19 +9939,57 @@ class SdPortal {
9636
9939
  }
9637
9940
  // parentRef의 이동 / 크기변경 감지
9638
9941
  observeParent() {
9639
- if (!this.parentRef)
9942
+ if (!this.parentRef || this.isObserved)
9640
9943
  return;
9641
- this.resizeObserver = new ResizeObserver(() => this.updatePosition());
9642
- this.resizeObserver.observe(this.parentRef);
9643
- this.mutationObserver = new MutationObserver(() => this.updatePosition());
9644
- this.mutationObserver.observe(document.body, {
9645
- childList: true,
9646
- subtree: true,
9647
- });
9944
+ this.observeScrollParents(this.parentRef);
9945
+ if (typeof ResizeObserver !== 'undefined') {
9946
+ this.resizeObserver = new ResizeObserver(() => this.updatePosition());
9947
+ this.resizeObserver.observe(this.parentRef);
9948
+ }
9949
+ if (typeof MutationObserver !== 'undefined') {
9950
+ this.mutationObserver = new MutationObserver(() => this.updatePosition());
9951
+ this.mutationObserver.observe(document.body, {
9952
+ childList: true,
9953
+ subtree: true,
9954
+ });
9955
+ }
9956
+ this.isObserved = true;
9648
9957
  }
9649
9958
  unobserveParent() {
9959
+ if (!this.isObserved)
9960
+ return;
9961
+ this.unobserveScrollParents();
9650
9962
  this.resizeObserver?.disconnect();
9963
+ this.resizeObserver = undefined;
9651
9964
  this.mutationObserver?.disconnect();
9965
+ this.mutationObserver = undefined;
9966
+ this.isObserved = false;
9967
+ }
9968
+ observeScrollParents(element) {
9969
+ const nextScrollParents = this.getScrollParents(element);
9970
+ nextScrollParents.forEach(parent => {
9971
+ parent.addEventListener('scroll', this.handleObservedScroll, { passive: true });
9972
+ });
9973
+ this.scrollParents = nextScrollParents;
9974
+ }
9975
+ unobserveScrollParents() {
9976
+ this.scrollParents.forEach(parent => {
9977
+ parent.removeEventListener('scroll', this.handleObservedScroll);
9978
+ });
9979
+ this.scrollParents = [];
9980
+ }
9981
+ getScrollParents(element) {
9982
+ const scrollParents = [];
9983
+ let currentElement = element.parentElement;
9984
+ while (currentElement) {
9985
+ const { overflow, overflowX, overflowY } = getComputedStyle(currentElement);
9986
+ const isScrollable = [overflow, overflowX, overflowY].some(value => /(auto|scroll|overlay)/.test(value));
9987
+ if (isScrollable) {
9988
+ scrollParents.push(currentElement);
9989
+ }
9990
+ currentElement = currentElement.parentElement;
9991
+ }
9992
+ return scrollParents;
9652
9993
  }
9653
9994
  // 외부 클릭 감지
9654
9995
  handleMouseDown(e) {
@@ -9664,8 +10005,13 @@ class SdPortal {
9664
10005
  this.close.emit();
9665
10006
  }
9666
10007
  render() {
9667
- return hAsync("slot", { key: 'ba2bf5df16f9bef0acef1ac8a08b090a23d02bc7' });
10008
+ return hAsync("slot", { key: 'ceaa6bed28e3b1bd1a539091434fd7acee6a0e4b' });
9668
10009
  }
10010
+ static get watchers() { return {
10011
+ "open": [{
10012
+ "handleOpenChange": 0
10013
+ }]
10014
+ }; }
9669
10015
  static get cmpMeta() { return {
9670
10016
  "$flags$": 772,
9671
10017
  "$tagName$": "sd-portal",
@@ -9721,10 +10067,10 @@ class SdProgress {
9721
10067
  return this.statusColor[this.progressStatus];
9722
10068
  }
9723
10069
  render() {
9724
- return (hAsync("div", { key: '43da9dac67e760bfe53b8db11c27eef7ef0d8b3b', style: {
10070
+ return (hAsync("div", { key: 'a9b7c4a0bb44f7455ea21f632d3ec8edbcc97522', style: {
9725
10071
  '--progress-color': this.progressColor,
9726
10072
  '--progress-percentage': `${this.progressPercentage}%`,
9727
- } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && hAsync("div", { key: 'af4b1c44f655546fede8ad548bddc6afb7810d2b', class: "sd-progress__label" }, this.label)));
10073
+ } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && hAsync("div", { key: 'ff0dfde8b43315883d2e4f17aa5e426fb6bf54ee', class: "sd-progress__label" }, this.label)));
9728
10074
  }
9729
10075
  renderBarProgress() {
9730
10076
  return (hAsync("div", { class: `sd-progress__bar sd-progress__bar--${this.progressStatus}` }, hAsync("div", { class: ['sd-progress__bar__percent', this.progressPercentage < 100 ? 'proceed' : ''].join(' ') }), hAsync("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--left" }, this.progressPercentage, "%"), hAsync("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--right" }, this.progressPercentage, "%")));
@@ -9922,94 +10268,6 @@ class SdRadioGroup {
9922
10268
  }; }
9923
10269
  }
9924
10270
 
9925
- class DropdownManager {
9926
- static instance;
9927
- activeDropdowns = new Set();
9928
- static getInstance() {
9929
- if (!DropdownManager.instance) {
9930
- DropdownManager.instance = new DropdownManager();
9931
- }
9932
- return DropdownManager.instance;
9933
- }
9934
- register(component) {
9935
- this.activeDropdowns.add(component);
9936
- }
9937
- unregister(component) {
9938
- this.activeDropdowns.delete(component);
9939
- }
9940
- openDropdown(targetComponent) {
9941
- // 다른 모든 드롭다운 닫기
9942
- this.activeDropdowns.forEach(component => {
9943
- if (component !== targetComponent && component.isOpen) {
9944
- component.closeDropdown();
9945
- }
9946
- });
9947
- }
9948
- closeAllDropdowns() {
9949
- this.activeDropdowns.forEach(component => {
9950
- if (component.isOpen) {
9951
- component.closeDropdown();
9952
- }
9953
- });
9954
- }
9955
- }
9956
- const dropdownManager = DropdownManager.getInstance();
9957
-
9958
- // 여러 select를 동시에 사용할때에 이벤트 리스너의 등록이 충돌나는 문제를 해결하기 위한 Base class
9959
- // 각 드롭다운 컴포넌트는 이 클래스를 상속 및 구현 필요
9960
- // 기본적으로 click, keydown 추상 이벤트를 구현해야하고
9961
- // isOpen가 true일때에만 이벤트 등록 그외에는 이벤트 클리닝을 수행
9962
- // 추후 필요한 이벤트는 이곳에 추가하여 추가 구현 후 사용
9963
- // 별도로 드롭다운 전용의 Base class가 아닌 공통적으로 사용할 수 있는 Base class가 필요할지 검토 필요
9964
- class BaseDropdownEvent {
9965
- documentClickHandler;
9966
- documentKeydownHandler;
9967
- // 컴포넌트 생명주기에서 호출할 메서드들
9968
- initializeEvent() {
9969
- dropdownManager.register(this);
9970
- this.initializeEventHandlers();
9971
- }
9972
- cleanupEvent() {
9973
- dropdownManager.unregister(this);
9974
- this.cleanup();
9975
- }
9976
- initializeEventHandlers() {
9977
- this.documentClickHandler = (event) => this.handleDocumentClick(event);
9978
- this.documentKeydownHandler = (event) => this.handleDocumentKeydown(event);
9979
- }
9980
- addGlobalEventListeners() {
9981
- if (this.documentClickHandler) {
9982
- document.addEventListener('click', this.documentClickHandler);
9983
- }
9984
- if (this.documentKeydownHandler) {
9985
- document.addEventListener('keydown', this.documentKeydownHandler);
9986
- }
9987
- }
9988
- removeGlobalEventListeners() {
9989
- if (this.documentClickHandler) {
9990
- document.removeEventListener('click', this.documentClickHandler);
9991
- }
9992
- if (this.documentKeydownHandler) {
9993
- document.removeEventListener('keydown', this.documentKeydownHandler);
9994
- }
9995
- }
9996
- onDropdownToggle(isOpen) {
9997
- if (isOpen && !this.disabled) {
9998
- dropdownManager.openDropdown(this);
9999
- this.addGlobalEventListeners();
10000
- }
10001
- else {
10002
- this.removeGlobalEventListeners();
10003
- }
10004
- }
10005
- cleanup() {
10006
- this.removeGlobalEventListeners();
10007
- }
10008
- closeDropdown() {
10009
- this.isOpen = false;
10010
- }
10011
- }
10012
-
10013
10271
  class SelectKeyboardNavigation {
10014
10272
  isSearchable;
10015
10273
  filteredOptions;
@@ -10391,10 +10649,10 @@ class SdSelectDropdown {
10391
10649
  this.isScrolled = scrollTop > 0;
10392
10650
  };
10393
10651
  render() {
10394
- return (hAsync("div", { key: 'ff55e2e133114accc2641a0025bdcf551eda3511', class: {
10652
+ return (hAsync("div", { key: '5e56cf091a3c3d510bf932933c33a8c3d85e23ef', class: {
10395
10653
  'sd-select-dropdown': true,
10396
10654
  'sd-select-dropdown--ready': this.isDropdownReady,
10397
- }, style: this.dropdownSize, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (hAsync("sd-select-search-input", { key: 'bfcee14aa06a9a259dd8e67013ed1074c1f9c318', ref: el => (this.searchRef = el), isScrolled: this.isScrolled, searchText: this.searchText, onSdSearchInput: (event) => (this.searchText = event.detail || ''), onSdSearchFocus: () => (this.itemIndex = -1) })), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (hAsync("slot", { name: `option-${option.value}` }, hAsync("sd-select-option", { option: option, index: index, isSelected: this.isOptionSelected(option.value), isFocused: index === this.itemIndex, onOptionClick: ({ detail }) => this.optionClick.emit(detail), useCheckbox: this.useCheckbox }))))) : (hAsync("slot", { name: "option-placeholder" }, hAsync("div", { class: 'sd-select-option-placeholder' }, this.optionPlaceholder)))));
10655
+ }, style: this.dropdownSize, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (hAsync("sd-select-search-input", { key: 'd965a2a5f31507fb6dca30968edf6334d42b4160', ref: el => (this.searchRef = el), isScrolled: this.isScrolled, searchText: this.searchText, onSdSearchInput: (event) => (this.searchText = event.detail || ''), onSdSearchFocus: () => (this.itemIndex = -1) })), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (hAsync("slot", { name: `option-${option.value}` }, hAsync("sd-select-option", { option: option, index: index, isSelected: this.isOptionSelected(option.value), isFocused: index === this.itemIndex, onOptionClick: ({ detail }) => this.optionClick.emit(detail), useCheckbox: this.useCheckbox }))))) : (hAsync("slot", { name: "option-placeholder" }, hAsync("div", { class: 'sd-select-option-placeholder' }, this.optionPlaceholder)))));
10398
10656
  }
10399
10657
  static get watchers() { return {
10400
10658
  "filteredOptions": [{
@@ -10580,7 +10838,7 @@ class SdSelectMultiple extends BaseDropdownEvent {
10580
10838
  this.handleOptionSelection(option);
10581
10839
  };
10582
10840
  render() {
10583
- return (hAsync("sd-field", { key: 'e445d2c3f80d78be0e74b1f54371eb27d9c316e8', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, hAsync("div", { key: '9fad0ed744cafb9e1e5f16ee413f36edd8f2c1f3', class: {
10841
+ return (hAsync("sd-field", { key: '9395a273b4205854e6fd7e96f26f93c201e6e959', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, hAsync("div", { key: '451758e8c90b79e7ddb3b35226d28ee4a43a3832', class: {
10584
10842
  'sd-select-multiple': true,
10585
10843
  'sd-select-multiple--open': this.isOpen,
10586
10844
  'sd-select-multiple--disabled': this.disabled,
@@ -11173,7 +11431,7 @@ class SdSelectOption {
11173
11431
  }
11174
11432
  };
11175
11433
  render() {
11176
- return (hAsync("div", { key: 'a4fcca24b0bdde4f4665585c6cede84bd3b64d59', class: {
11434
+ return (hAsync("div", { key: '2f88e7ffe5bce12bc3f352d47d0ebed51a1c69ac', class: {
11177
11435
  'sd-select__option': true,
11178
11436
  'sd-select__option--selected': this.isSelected,
11179
11437
  'sd-select__option--disabled': !!this.option.disabled,
@@ -11259,7 +11517,7 @@ class SdSelectOptionGroup {
11259
11517
  }
11260
11518
  };
11261
11519
  render() {
11262
- return (hAsync("div", { key: '8e88aacd2c3122a563fcf78bcbe9731b6a29d8c5', class: {
11520
+ return (hAsync("div", { key: '7581caff61d1257d653b6f58b8d76c21225b3cc5', class: {
11263
11521
  'sd-select__option-group': true,
11264
11522
  'sd-select__option-group--selected': !!this.isSelected,
11265
11523
  'sd-select__option-group--disabled': !!this.option.disabled,
@@ -11268,10 +11526,10 @@ class SdSelectOptionGroup {
11268
11526
  'sd-select__option-group--group': this.option.type === 'group',
11269
11527
  'sd-select__option-group--subgroup': this.option.type === 'subgroup',
11270
11528
  'sd-select__option-group--item': this.option.type === 'item',
11271
- }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, hAsync("div", { key: 'be4bc7f2867ea5c86505bc9284ac3de46f7077f9', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (hAsync("sd-checkbox", { key: '00063ab3a6f1d4f44671ac82dd05524968bec668', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
11529
+ }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, hAsync("div", { key: 'ddb33f6afaa6bc6d6dd3dc494f6ec74b9c023a42', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (hAsync("sd-checkbox", { key: '14f2c7fc347718d2909e5006bf2500a9a51b0a66', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
11272
11530
  e.preventDefault();
11273
11531
  this.handleClick(this.option, this.isSelected, e);
11274
- } })), hAsync("span", { key: '802c908d44bf1c0db5d64bf4c8d4bab4ebe2b87c', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (hAsync("span", { key: 'efd26a2d6e4e2662410de3755b70a2a2585ad0c4', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
11532
+ } })), hAsync("span", { key: '99415ed662cc2f8f29d31e3811eb4496f8fcac47', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (hAsync("span", { key: 'a3c7dc6455a94ecd4587f8b13b4d1f10e3b58819', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
11275
11533
  }
11276
11534
  static get style() { return sdSelectOptionGroupCss(); }
11277
11535
  static get cmpMeta() { return {
@@ -11320,17 +11578,17 @@ class SdSelectSearchInput {
11320
11578
  input?.focus({ preventScroll: true });
11321
11579
  }
11322
11580
  render() {
11323
- return (hAsync("div", { key: 'b19a029ef82d876c984c1f827d7a0f29bb823f5d', class: {
11581
+ return (hAsync("div", { key: 'da5faa18fac3c974dcfef4050efe580edcb1bb42', class: {
11324
11582
  'sd-select-search-input': true,
11325
11583
  'sd-select-search-input--scrolled': !!this.isScrolled,
11326
- }, onClick: event => event.stopPropagation() }, hAsync("sd-input", { key: '8e27f40e1b507f0c5cb2d4bde48750cd0089a9da', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdUpdate: event => {
11584
+ }, onClick: event => event.stopPropagation() }, hAsync("sd-input", { key: 'c469ef89d7600626b19ecd94416849825736ff9f', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdUpdate: event => {
11327
11585
  this.searchInput.emit(String(event?.detail));
11328
11586
  }, onSdFocus: () => {
11329
11587
  this.searchFocus.emit();
11330
11588
  }, onKeyDown: event => {
11331
11589
  if (event.code === 'Enter')
11332
11590
  event.stopPropagation();
11333
- } }, hAsync("sd-icon", { key: '2b38a07cbc0bb0d7dd020ece45f18bdff4c262e5', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
11591
+ } }, hAsync("sd-icon", { key: '478a6adda3b53aabf614028bd57a8f987f93cdb6', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
11334
11592
  }
11335
11593
  static get style() { return sdSelectSearchInputCss(); }
11336
11594
  static get cmpMeta() { return {
@@ -12242,16 +12500,14 @@ class SdTabs {
12242
12500
  }
12243
12501
  return classes.join(' ');
12244
12502
  }
12245
- getBadgeColors(tab) {
12246
- if (this.isTabSelected(tab)) {
12247
- return { bgColor: '#E6F1FF', textColor: '#0075FF' };
12248
- }
12249
- return { bgColor: '#E5E5E5', textColor: '#737373' };
12503
+ getBadgeName(tab) {
12504
+ const color = this.isTabSelected(tab) ? 'blue' : 'grey';
12505
+ return `square_${this.size}_${color}`;
12250
12506
  }
12251
12507
  render() {
12252
- return (hAsync("div", { key: '1b63c97e7b40d35ceadcc07da1087ee54d3c5f8f', class: this.getContainerClasses() }, this.tabs.map((tab, index) => {
12253
- const badgeColors = this.getBadgeColors(tab);
12254
- return (hAsync("div", { key: `tab-${index}`, class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab.value) }, hAsync("span", { "data-label": tab.label, class: "sd-tabs__label" }, tab.label), tab.badge && (hAsync("sd-tag", { size: this.size, label: tab.badge.toString(), bgColor: badgeColors.bgColor, textColor: badgeColors.textColor, rounded: false }))));
12508
+ return (hAsync("div", { key: 'bc86d4c1775bed6c2d323c9446e2c50631afed7c', class: this.getContainerClasses() }, this.tabs.map((tab, index) => {
12509
+ const badgeName = this.getBadgeName(tab);
12510
+ return (hAsync("div", { key: `tab-${index}`, class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab.value) }, hAsync("span", { "data-label": tab.label, class: "sd-tabs__label" }, tab.label), tab.badge && (hAsync("sd-tag", { name: badgeName, label: tab.badge.toString() }))));
12255
12511
  })));
12256
12512
  }
12257
12513
  static get watchers() { return {
@@ -12275,65 +12531,121 @@ class SdTabs {
12275
12531
  }; }
12276
12532
  }
12277
12533
 
12278
- const sdTagCss = () => `:host{display:inline-block}:host([full-width]){display:block}.sd-tag{display:inline-flex;width:100%;align-items:center;justify-content:center;gap:8px;text-decoration:none;border:1px solid transparent;border-radius:4px;transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box}.sd-tag__content{display:inline-block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sd-tag--custom-color{background:var(--tag-bg-color);color:var(--tag-text-color)}.sd-tag--sm{padding:0 6px;font-size:11px;line-height:18px;height:20px;border-radius:4px}.sd-tag--md{padding:0 8px;font-size:12px;font-weight:700;line-height:20px;height:24px;border-radius:4px}.sd-tag--lg{padding:0 10px;font-size:14px;font-weight:700;line-height:24px;min-height:28px;border-radius:5px}.sd-tag--rounded.sd-tag--sm{border-radius:20px}.sd-tag--rounded.sd-tag--md{border-radius:20px}.sd-tag--rounded.sd-tag--lg{border-radius:15px}`;
12279
-
12280
- const TAG_COLORS = {
12281
- grey: 'bg-grey_20 text-grey_70',
12282
- red: 'bg-red_15 text-red_70',
12283
- orange: 'bg-orange_10 text-orange_65',
12284
- yellow: 'bg-yellow_10 text-yellow_70',
12285
- green: 'bg-green_15 text-green_75',
12286
- blue: 'bg-brilliantblue_20 text-brilliantblue_75',
12287
- darkblue: 'bg-oceanblue_15 text-oceanblue_70',
12288
- indigo: 'bg-brilliantblue_10 text-brilliantblue_85',
12534
+ const TAG_SHAPES = ['square', 'pill'];
12535
+ const TAG_SIZES = ['sm', 'md', 'lg'];
12536
+ const TAG_COLORS = [
12537
+ 'grey',
12538
+ 'red',
12539
+ 'orange',
12540
+ 'yellow',
12541
+ 'green',
12542
+ 'blue',
12543
+ 'darkblue',
12544
+ 'indigo',
12545
+ ];
12546
+ const TAG_COLOR_CONFIG = {
12547
+ grey: { background: '#EEEEEE', content: '#737373', icon: '#737373' },
12548
+ red: { background: '#FCEFEF', content: '#FB4444', icon: '#FB4444' },
12549
+ orange: { background: '#FEF1EA', content: '#FF6B00', icon: '#FF6B00' },
12550
+ yellow: { background: '#FFF7DD', content: '#916C0D', icon: '#CA9611' },
12551
+ green: { background: '#E8F9EF', content: '#00973C', icon: '#12B553' },
12552
+ blue: { background: '#E6F1FF', content: '#0075FF', icon: '#0075FF' },
12553
+ darkblue: { background: '#EAF5FE', content: '#006AC1', icon: '#006AC1' },
12554
+ indigo: { background: '#EFF6FF', content: '#004290', icon: '#004290' },
12555
+ };
12556
+ const SQUARE_SIZE_CONFIG = {
12557
+ sm: {
12558
+ height: '20px',
12559
+ paddingX: '6px',
12560
+ gap: '4px',
12561
+ fontSize: '11px',
12562
+ fontWeight: '500',
12563
+ iconSize: 12,
12564
+ radius: '4px',
12565
+ },
12566
+ md: {
12567
+ height: '24px',
12568
+ paddingX: '8px',
12569
+ gap: '4px',
12570
+ fontSize: '12px',
12571
+ fontWeight: '700',
12572
+ iconSize: 16,
12573
+ radius: '4px',
12574
+ },
12575
+ lg: {
12576
+ height: '28px',
12577
+ paddingX: '10px',
12578
+ gap: '4px',
12579
+ fontSize: '14px',
12580
+ fontWeight: '700',
12581
+ iconSize: 16,
12582
+ radius: '5px',
12583
+ },
12584
+ };
12585
+ const PILL_SIZE_CONFIG = {
12586
+ sm: { ...SQUARE_SIZE_CONFIG.sm, radius: '999px' },
12587
+ md: { ...SQUARE_SIZE_CONFIG.md, radius: '999px' },
12588
+ lg: { ...SQUARE_SIZE_CONFIG.lg, radius: '999px' },
12289
12589
  };
12590
+ const TAG_CONFIG = Object.fromEntries(TAG_SHAPES.flatMap(shape => TAG_SIZES.flatMap(size => TAG_COLORS.map(color => {
12591
+ const sizeConfig = shape === 'square' ? SQUARE_SIZE_CONFIG[size] : PILL_SIZE_CONFIG[size];
12592
+ return [
12593
+ `${shape}_${size}_${color}`,
12594
+ {
12595
+ shape,
12596
+ size,
12597
+ color,
12598
+ ...sizeConfig,
12599
+ ...TAG_COLOR_CONFIG[color],
12600
+ },
12601
+ ];
12602
+ }))));
12603
+ const isTagName = (value) => Object.prototype.hasOwnProperty.call(TAG_CONFIG, value);
12604
+
12605
+ const sdTagCss = () => `sd-tag{display:inline-flex;width:fit-content;height:fit-content}.sd-tag{display:inline-flex;align-items:center;justify-content:center;gap:var(--sd-tag-gap, 5px);min-height:var(--sd-tag-height, 24px);padding:0 var(--sd-tag-padding-x, 8px);border-radius:var(--sd-tag-radius, 4px);background:var(--sd-tag-background, #f3f3f3);color:var(--sd-tag-content, #7a7a7a);box-sizing:border-box;white-space:nowrap;-webkit-user-select:none;user-select:none}.sd-tag__icon{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center}.sd-tag__label{display:inline-flex;align-items:center;justify-content:center;min-width:0;font-size:var(--sd-tag-font-size, 12px);font-weight:var(--sd-tag-font-weight, 700);line-height:1}`;
12606
+
12290
12607
  class SdTag {
12291
12608
  constructor(hostRef) {
12292
12609
  registerInstance(this, hostRef);
12293
12610
  }
12294
- get el() { return getElement(this); }
12295
- size = 'md';
12296
- color = 'grey';
12297
- rounded = false;
12611
+ name = 'square_md_grey';
12298
12612
  label = '';
12299
- bgColor;
12300
- textColor;
12301
- getTagClasses() {
12302
- const classes = ['sd-tag', `sd-tag--${this.size}`];
12303
- if (this.rounded) {
12304
- classes.push('sd-tag--rounded');
12305
- }
12306
- if (this.color && !this.bgColor && !this.textColor) {
12307
- classes.push(TAG_COLORS[this.color]);
12308
- }
12309
- if (this.bgColor || this.textColor) {
12310
- classes.push('sd-tag--custom-color');
12613
+ icon;
12614
+ isLeft = true;
12615
+ get resolvedConfig() {
12616
+ if (!isTagName(this.name)) {
12617
+ throw new Error(`Invalid sd-tag name: ${this.name}`);
12311
12618
  }
12312
- return classes.join(' ');
12619
+ return TAG_CONFIG[this.name];
12313
12620
  }
12314
- renderContent() {
12315
- return [
12316
- hAsync("span", { class: "sd-tag__content" }, hAsync("slot", null, this.label)),
12317
- ];
12621
+ renderIcon(color, size) {
12622
+ if (!this.icon)
12623
+ return null;
12624
+ return hAsync("sd-icon", { class: "sd-tag__icon", name: this.icon, size: size, color: color });
12318
12625
  }
12319
12626
  render() {
12320
- const tagClasses = this.getTagClasses();
12321
- return (hAsync("span", { key: '9745415753fe657bf5e7e5ca9eb6e02f8c953bfd', class: tagClasses, style: {
12322
- '--tag-bg-color': this.bgColor,
12323
- '--tag-text-color': this.textColor,
12324
- }, "aria-label": this.label || 'tag' }, this.renderContent()));
12627
+ const config = this.resolvedConfig;
12628
+ const iconNode = this.renderIcon(config.icon, config.iconSize);
12629
+ return (hAsync("span", { key: '5f9ee005b146997dd13bb3e6a06680ff8574bd14', class: "sd-tag", style: {
12630
+ '--sd-tag-background': config.background,
12631
+ '--sd-tag-content': config.content,
12632
+ '--sd-tag-height': config.height,
12633
+ '--sd-tag-padding-x': config.paddingX,
12634
+ '--sd-tag-gap': config.gap,
12635
+ '--sd-tag-font-size': config.fontSize,
12636
+ '--sd-tag-font-weight': config.fontWeight,
12637
+ '--sd-tag-radius': config.radius,
12638
+ }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, hAsync("span", { key: 'b123ab6ac015db640e4dc3edc5e2cf90ec5e0ecf', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
12325
12639
  }
12326
12640
  static get style() { return sdTagCss(); }
12327
12641
  static get cmpMeta() { return {
12328
- "$flags$": 777,
12642
+ "$flags$": 512,
12329
12643
  "$tagName$": "sd-tag",
12330
12644
  "$members$": {
12331
- "size": [1],
12332
- "color": [1],
12333
- "rounded": [4],
12645
+ "name": [1],
12334
12646
  "label": [1],
12335
- "bgColor": [1, "bg-color"],
12336
- "textColor": [1, "text-color"]
12647
+ "icon": [1],
12648
+ "isLeft": [4, "is-left"]
12337
12649
  },
12338
12650
  "$listeners$": undefined,
12339
12651
  "$lazyBundleId$": "-",
@@ -12425,10 +12737,10 @@ class SdTextarea {
12425
12737
  }
12426
12738
  render() {
12427
12739
  const maxLengthCounter = this.getMaxLengthCounter();
12428
- return (hAsync("div", { key: '888d11be57629e83e1215daddab63351a323672f', class: {
12740
+ return (hAsync("div", { key: '5f087de7fd28e3f5fa3315c37b8974e7f5878149', class: {
12429
12741
  'sd-textarea': true,
12430
12742
  [this.getTextareaStatus()]: true,
12431
- }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, hAsync("div", { key: '1f91a1e435b2dba1817ce181f91bdf3829142682', class: "sd-textarea__content" }, hAsync("textarea", { key: 'd883f4cdfd56220cf4382893f94a469f7afd7ff2', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, autofocus: this.autoFocus, maxLength: this.maxLength, onInput: this.handleInput.bind(this), onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) })), this.hasFooter() && (hAsync("div", { key: 'e9350d8e49eb87b2caddfc24079ece0d59c79739', class: "sd-textarea__footer" }, this.helpText !== undefined && hAsync("span", { key: 'cda9e2b8b0c15fbc7356597d4363d438688c8e4e', class: "sd-textarea__help-text" }, this.helpText), maxLengthCounter !== null && hAsync("span", { key: '491e990142e07837169e84a3fcc3e80c00bc7153', class: "sd-textarea__counter" }, maxLengthCounter)))));
12743
+ }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, hAsync("div", { key: 'fb9e5c4e98cadbf1a694bce4f9fed498bdc8e7cd', class: "sd-textarea__content" }, hAsync("textarea", { key: 'b0414813c34a127becd94ec6fc2e516c375d8eea', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, autofocus: this.autoFocus, maxLength: this.maxLength, onInput: this.handleInput.bind(this), onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) })), this.hasFooter() && (hAsync("div", { key: 'fe3f278f3a7d438f8fce8ca4043e00ec0220efd6', class: "sd-textarea__footer" }, this.helpText !== undefined && hAsync("span", { key: '16d15de3ff1e49de16b67088d52f7f2848f2e283', class: "sd-textarea__help-text" }, this.helpText), maxLengthCounter !== null && hAsync("span", { key: '84b4adbd09b7af30dbc68b5f3e6473e97fe4c76e', class: "sd-textarea__counter" }, maxLengthCounter)))));
12432
12744
  }
12433
12745
  static get watchers() { return {
12434
12746
  "value": [{
@@ -12509,10 +12821,10 @@ class SdToast {
12509
12821
  background: resolveColor(colorTokens.background),
12510
12822
  text: resolveColor(colorTokens.text),
12511
12823
  };
12512
- return (hAsync("div", { key: '8118f67a55a3080ea91ffdfbd929bbe3464ab044', style: {
12824
+ return (hAsync("div", { key: '16579a21c0eec78e609b0cf82fcf2d040b8b3388', style: {
12513
12825
  '--sd-toast-bg': colors.background,
12514
12826
  '--sd-toast-text': colors.text,
12515
- } }, hAsync("div", { key: 'f05c16b0c8ef6de2d62161f80591cb3a82c24434', class: this.getContainerClasses(), role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (hAsync("div", { key: 'b16fee2031c4093c263229d2ef07ad8f6e69778b', class: "sd-toast__icon" }, hAsync("sd-icon", { key: 'cd8b4c4d9cbc329fdfc99236ca56a49658c0ca8c', name: this.icon, size: 16, color: colors.text }))), hAsync("div", { key: '888748872d886745ace2ef8491d7098528df8a46', class: "sd-toast__content" }, hAsync("span", { key: '31b285a6b6a03b833577b4a9fb860fd76e066cb6', class: "sd-toast__message" }, this.message)), this.link && (hAsync("a", { key: '61d1aacf70e7062abbedd2364474e7da990f485f', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (hAsync("sd-button", { key: '94aa75ef25ee18f0577d5539337152d654dab5c1', class: `sd-toast__button ${this.type === 'basicLight' ? 'text-white' : ''}`, label: this.buttonLabel, variant: "primary", color: this.type === 'basicLight' ? 'oceanblue_75' : 'white', size: "sm", onSdClick: this.handleButtonClick, style: this.type !== 'basicLight' ? { '--button-text-color': resolveColor('grey_95') } : {} })), this.useClose && (hAsync("button", { key: 'db0b83f7030feb5459597156c2d25f3437b91904', type: "button", class: "sd-toast__close", onClick: this.handleClose, "aria-label": "Close", title: "Close" }, hAsync("sd-icon", { key: 'a3aab6c19c32043182f2d05d2583271520458493', name: "close", size: 12, color: colors.text }))))));
12827
+ } }, hAsync("div", { key: '108e47983e1ad99ed462a4fa00c29aa9e3393b8b', class: this.getContainerClasses(), role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (hAsync("div", { key: 'd034c9aaafc272d51de96de6ccefe49208aba7e3', class: "sd-toast__icon" }, hAsync("sd-icon", { key: '14b97c4cbe7134f67d919abcf4e10cf673dd909d', name: this.icon, size: 16, color: colors.text }))), hAsync("div", { key: '1cecb89bdb19742a7df04625e8f070cd2c207b5e', class: "sd-toast__content" }, hAsync("span", { key: '1daf2a2bea963b7b68c580b30c4c8fa2f3a26c8f', class: "sd-toast__message" }, this.message)), this.link && (hAsync("a", { key: '8f7961c2c14806aa1323e378f57d74e47614772c', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (hAsync("sd-button", { key: '89cba5e58ff368aea05130b799d903d4cf85b120', class: `sd-toast__button ${this.type === 'basicLight' ? 'text-white' : ''}`, label: this.buttonLabel, variant: "primary", color: this.type === 'basicLight' ? 'oceanblue_75' : 'white', size: "sm", onSdClick: this.handleButtonClick, style: this.type !== 'basicLight' ? { '--button-text-color': resolveColor('grey_95') } : {} })), this.useClose && (hAsync("button", { key: '0e7fc0737824b61166cbff82a410948ca1745842', type: "button", class: "sd-toast__close", onClick: this.handleClose, "aria-label": "Close", title: "Close" }, hAsync("sd-icon", { key: '82d203f6eb584cb04566e8f3b1bd7a86ca50bba4', name: "close", size: 12, color: colors.text }))))));
12516
12828
  }
12517
12829
  static get style() { return sdToastCss(); }
12518
12830
  static get cmpMeta() { return {
@@ -12569,7 +12881,7 @@ class SdToggle {
12569
12881
  this.change.emit(newValue);
12570
12882
  };
12571
12883
  render() {
12572
- return (hAsync("label", { key: 'c0fcd12c231fdb995b5edae756157c58b352fd0f', "aria-label": this.label || 'toggle', class: this.toggleClasses }, hAsync("input", { key: 'e50042ae04830f4c276d8140725ab62cc2d0490d', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && hAsync("span", { key: '99f9506a2dcea8cfd85aabf6b71243c116a2bf11', class: "sd-toggle__label" }, this.label), hAsync("div", { key: '424e1ae78d5684051bd7a2b3ba89f6760f773f1c', class: "sd-toggle__track" }, hAsync("div", { key: '29aab89e58022ce22f026fb694bb9b1e4531d8cf', class: "sd-toggle__thumb" }))));
12884
+ return (hAsync("label", { key: '9a8a0221e093040e446bc193f682070aa1f95c6c', "aria-label": this.label || 'toggle', class: this.toggleClasses }, hAsync("input", { key: '4a2e3c626bfa4e439676cc40df619bd284d0178a', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && hAsync("span", { key: '1eecfd810c17610604d6cf93c6f664690f17ff6a', class: "sd-toggle__label" }, this.label), hAsync("div", { key: '9f082e2f6036e338f2afb6fb719b4ff8d3a01d99', class: "sd-toggle__track" }, hAsync("div", { key: '1d8b1bd11b05091a368c681ead7e79a0e453d510', class: "sd-toggle__thumb" }))));
12573
12885
  }
12574
12886
  static get style() { return sdToggleCss(); }
12575
12887
  static get cmpMeta() { return {
@@ -12625,7 +12937,7 @@ class SdToggleButton {
12625
12937
  this.change.emit(newValue);
12626
12938
  };
12627
12939
  render() {
12628
- return (hAsync("label", { key: '6f8d9e738490ef344ff26a4026b9de17af68041e', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, hAsync("input", { key: '6d9d45c451301c4635e610fd70280be1fe65b316', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
12940
+ return (hAsync("label", { key: '174a62904591e559232574d207ff4ad9c0113ad8', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, hAsync("input", { key: '7bbd96a0563a8cadcfb7ab9d8e1fb3767508d6bf', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
12629
12941
  }
12630
12942
  static get style() { return sdToggleButtonCss(); }
12631
12943
  static get cmpMeta() { return {
@@ -12725,11 +13037,13 @@ class SdTooltip {
12725
13037
  registerComponents([
12726
13038
  SdBadge,
12727
13039
  SdButton,
13040
+ SdButtonV2,
12728
13041
  SdCard,
12729
13042
  SdCheckbox,
12730
13043
  SdDateBox,
12731
13044
  SdDatePicker,
12732
13045
  SdDateRangePicker,
13046
+ SdDropdownButton,
12733
13047
  SdField,
12734
13048
  SdFilePicker,
12735
13049
  SdFloatingPopover,