@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.mjs CHANGED
@@ -130,7 +130,7 @@ function hydrateFactory($stencilWindow, $stencilHydrateOpts, $stencilHydrateResu
130
130
 
131
131
 
132
132
  const NAMESPACE = 'design-system';
133
- const BUILD = /* design-system */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", slotRelocation: true, state: true, updatable: true};
133
+ const BUILD = /* design-system */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", shadowDom: false, slotRelocation: true, state: true, updatable: true};
134
134
 
135
135
  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}";
136
136
 
@@ -740,7 +740,7 @@ var attachStyles = (hostRef) => {
740
740
  const flags = cmpMeta.$flags$;
741
741
  const endAttachStyles = createTime("attachStyles", cmpMeta.$tagName$);
742
742
  const scopeId2 = addStyle(
743
- elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(),
743
+ elm.getRootNode(),
744
744
  cmpMeta);
745
745
  if (flags & 10 /* needsScopedEncapsulation */) {
746
746
  elm["s-sc"] = scopeId2;
@@ -882,7 +882,7 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
882
882
  const childRenderNodes = [];
883
883
  const slotNodes = [];
884
884
  const slottedNodes = [];
885
- const shadowRootNodes = shadowRoot ? [] : null;
885
+ const shadowRootNodes = null;
886
886
  const vnode = newVNode(tagName, null);
887
887
  vnode.$elm$ = hostElm;
888
888
  let scopeId2;
@@ -1005,27 +1005,6 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
1005
1005
  slot.$elm$.parentElement.classList.add(scopeId2 + "-s");
1006
1006
  });
1007
1007
  }
1008
- if (shadowRoot && !shadowRoot.childNodes.length) {
1009
- let rnIdex = 0;
1010
- const rnLen = shadowRootNodes.length;
1011
- if (rnLen) {
1012
- for (rnIdex; rnIdex < rnLen; rnIdex++) {
1013
- const node = shadowRootNodes[rnIdex];
1014
- if (node) {
1015
- shadowRoot.appendChild(node);
1016
- }
1017
- }
1018
- Array.from(hostElm.childNodes).forEach((node) => {
1019
- if (typeof node["s-en"] !== "string" && typeof node["s-sn"] !== "string") {
1020
- if (node.nodeType === 1 /* ElementNode */ && node.slot && node.hidden) {
1021
- node.removeAttribute("hidden");
1022
- } else if (node.nodeType === 8 /* CommentNode */ && !node.nodeValue) {
1023
- node.parentNode.removeChild(node);
1024
- }
1025
- }
1026
- });
1027
- }
1028
- }
1029
1008
  hostRef.$hostElement$ = hostElm;
1030
1009
  endHydrate();
1031
1010
  };
@@ -1086,9 +1065,6 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
1086
1065
  parentVNode.$children$[childVNode.$index$] = childVNode;
1087
1066
  }
1088
1067
  parentVNode = childVNode;
1089
- if (shadowRootNodes && childVNode.$depth$ === "0") {
1090
- shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
1091
- }
1092
1068
  }
1093
1069
  }
1094
1070
  if (node.shadowRoot) {
@@ -1147,9 +1123,6 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
1147
1123
  }
1148
1124
  parentVNode.$children$[childVNode.$index$] = childVNode;
1149
1125
  }
1150
- if (shadowRootNodes && childVNode.$depth$ === "0") {
1151
- shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
1152
- }
1153
1126
  }
1154
1127
  } else if (childNodeType === COMMENT_NODE_ID) {
1155
1128
  childVNode.$elm$ = findCorrespondingNode(node, 8 /* CommentNode */);
@@ -1172,9 +1145,7 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
1172
1145
  slottedNodes
1173
1146
  );
1174
1147
  } else if (childNodeType === CONTENT_REF_ID) {
1175
- if (shadowRootNodes) {
1176
- node.remove();
1177
- } else {
1148
+ {
1178
1149
  hostElm["s-cr"] = node;
1179
1150
  node["s-cn"] = true;
1180
1151
  }
@@ -1236,22 +1207,7 @@ function addSlot(slotName, slotId, childVNode, node, parentVNode, childRenderNod
1236
1207
  childVNode.$name$ = slotName || null;
1237
1208
  childVNode.$tag$ = "slot";
1238
1209
  const parentNodeId = (parentVNode == null ? void 0 : parentVNode.$elm$) ? parentVNode.$elm$["s-id"] || parentVNode.$elm$.getAttribute("s-id") : "";
1239
- if (shadowRootNodes && win.document) {
1240
- const slot = childVNode.$elm$ = win.document.createElement(childVNode.$tag$);
1241
- if (childVNode.$name$) {
1242
- childVNode.$elm$.setAttribute("name", slotName);
1243
- }
1244
- if (parentVNode.$elm$.shadowRoot && parentNodeId && parentNodeId !== childVNode.$hostId$) {
1245
- internalCall(parentVNode.$elm$, "insertBefore")(slot, internalCall(parentVNode.$elm$, "children")[0]);
1246
- } else {
1247
- internalCall(internalCall(node, "parentNode"), "insertBefore")(slot, node);
1248
- }
1249
- addSlottedNodes(slottedNodes, slotId, slotName, node, childVNode.$hostId$);
1250
- node.remove();
1251
- if (childVNode.$depth$ === "0") {
1252
- shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
1253
- }
1254
- } else {
1210
+ {
1255
1211
  const slot = childVNode.$elm$;
1256
1212
  const shouldMove = parentNodeId && parentNodeId !== childVNode.$hostId$ && parentVNode.$elm$.shadowRoot;
1257
1213
  addSlottedNodes(slottedNodes, slotId, slotName, node, shouldMove ? parentNodeId : childVNode.$hostId$);
@@ -1288,417 +1244,6 @@ var findCorrespondingNode = (node, type) => {
1288
1244
  return sibling;
1289
1245
  };
1290
1246
 
1291
- // src/utils/regular-expression.ts
1292
- var escapeRegExpSpecialCharacters = (text) => {
1293
- return text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
1294
- };
1295
-
1296
- // src/utils/shadow-css.ts
1297
- /**
1298
- * @license
1299
- * Copyright Google Inc. All Rights Reserved.
1300
- *
1301
- * Use of this source code is governed by an MIT-style license that can be
1302
- * found in the LICENSE file at https://angular.io/license
1303
- *
1304
- * This file is a port of shadowCSS from `webcomponents.js` to TypeScript.
1305
- * https://github.com/webcomponents/webcomponentsjs/blob/4efecd7e0e/src/ShadowCSS/ShadowCSS.js
1306
- * https://github.com/angular/angular/blob/master/packages/compiler/src/shadow_css.ts
1307
- */
1308
- var safeSelector = (selector) => {
1309
- const placeholders = [];
1310
- let index = 0;
1311
- selector = selector.replace(/(\[\s*part~=\s*("[^"]*"|'[^']*')\s*\])/g, (_, keep) => {
1312
- const replaceBy = `__part-${index}__`;
1313
- placeholders.push(keep);
1314
- index++;
1315
- return replaceBy;
1316
- });
1317
- selector = selector.replace(/(\[[^\]]*\])/g, (_, keep) => {
1318
- const replaceBy = `__ph-${index}__`;
1319
- placeholders.push(keep);
1320
- index++;
1321
- return replaceBy;
1322
- });
1323
- const content = selector.replace(/(:nth-[-\w]+)(\([^)]+\))/g, (_, pseudo, exp) => {
1324
- const replaceBy = `__ph-${index}__`;
1325
- placeholders.push(exp);
1326
- index++;
1327
- return pseudo + replaceBy;
1328
- });
1329
- const ss = {
1330
- content,
1331
- placeholders
1332
- };
1333
- return ss;
1334
- };
1335
- var restoreSafeSelector = (placeholders, content) => {
1336
- content = content.replace(/__part-(\d+)__/g, (_, index) => placeholders[+index]);
1337
- return content.replace(/__ph-(\d+)__/g, (_, index) => placeholders[+index]);
1338
- };
1339
- var _polyfillHost = "-shadowcsshost";
1340
- var _polyfillSlotted = "-shadowcssslotted";
1341
- var _polyfillHostContext = "-shadowcsscontext";
1342
- var _parenSuffix = ")(?:\\(((?:\\([^)(]*\\)|[^)(]*)+?)\\))?([^,{]*)";
1343
- var _cssColonHostRe = new RegExp("(" + _polyfillHost + _parenSuffix, "gim");
1344
- var _cssColonHostContextRe = new RegExp("(" + _polyfillHostContext + _parenSuffix, "gim");
1345
- var _cssColonSlottedRe = new RegExp("(" + _polyfillSlotted + _parenSuffix, "gim");
1346
- var _polyfillHostNoCombinator = _polyfillHost + "-no-combinator";
1347
- var _polyfillHostNoCombinatorRe = /-shadowcsshost-no-combinator([^\s]*)/;
1348
- var _shadowDOMSelectorsRe = [/::shadow/g, /::content/g];
1349
- var _safePartRe = /__part-(\d+)__/g;
1350
- var _selectorReSuffix = "([>\\s~+[.,{:][\\s\\S]*)?$";
1351
- var _polyfillHostRe = /-shadowcsshost/gim;
1352
- var createSupportsRuleRe = (selector) => {
1353
- const safeSelector2 = escapeRegExpSpecialCharacters(selector);
1354
- return new RegExp(
1355
- // First capture group: match any context before the selector that's not inside @supports selector()
1356
- // Using negative lookahead to avoid matching inside @supports selector(...) condition
1357
- `(^|[^@]|@(?!supports\\s+selector\\s*\\([^{]*?${safeSelector2}))(${safeSelector2}\\b)`,
1358
- "g"
1359
- );
1360
- };
1361
- var _commentRe = /\/\*\s*[\s\S]*?\*\//g;
1362
- var stripComments = (input) => {
1363
- return input.replace(_commentRe, "");
1364
- };
1365
- var _commentWithHashRe = /\/\*\s*#\s*source(Mapping)?URL=[\s\S]+?\*\//g;
1366
- var extractCommentsWithHash = (input) => {
1367
- return input.match(_commentWithHashRe) || [];
1368
- };
1369
- var _ruleRe = /(\s*)([^;\{\}]+?)(\s*)((?:{%BLOCK%}?\s*;?)|(?:\s*;))/g;
1370
- var _curlyRe = /([{}])/g;
1371
- var _selectorPartsRe = /(^.*?[^\\])??((:+)(.*)|$)/;
1372
- var OPEN_CURLY = "{";
1373
- var CLOSE_CURLY = "}";
1374
- var BLOCK_PLACEHOLDER = "%BLOCK%";
1375
- var processRules = (input, ruleCallback) => {
1376
- const inputWithEscapedBlocks = escapeBlocks(input);
1377
- let nextBlockIndex = 0;
1378
- return inputWithEscapedBlocks.escapedString.replace(_ruleRe, (...m) => {
1379
- const selector = m[2];
1380
- let content = "";
1381
- let suffix = m[4];
1382
- let contentPrefix = "";
1383
- if (suffix && suffix.startsWith("{" + BLOCK_PLACEHOLDER)) {
1384
- content = inputWithEscapedBlocks.blocks[nextBlockIndex++];
1385
- suffix = suffix.substring(BLOCK_PLACEHOLDER.length + 1);
1386
- contentPrefix = "{";
1387
- }
1388
- const cssRule = {
1389
- selector,
1390
- content
1391
- };
1392
- const rule = ruleCallback(cssRule);
1393
- return `${m[1]}${rule.selector}${m[3]}${contentPrefix}${rule.content}${suffix}`;
1394
- });
1395
- };
1396
- var escapeBlocks = (input) => {
1397
- const inputParts = input.split(_curlyRe);
1398
- const resultParts = [];
1399
- const escapedBlocks = [];
1400
- let bracketCount = 0;
1401
- let currentBlockParts = [];
1402
- for (let partIndex = 0; partIndex < inputParts.length; partIndex++) {
1403
- const part = inputParts[partIndex];
1404
- if (part === CLOSE_CURLY) {
1405
- bracketCount--;
1406
- }
1407
- if (bracketCount > 0) {
1408
- currentBlockParts.push(part);
1409
- } else {
1410
- if (currentBlockParts.length > 0) {
1411
- escapedBlocks.push(currentBlockParts.join(""));
1412
- resultParts.push(BLOCK_PLACEHOLDER);
1413
- currentBlockParts = [];
1414
- }
1415
- resultParts.push(part);
1416
- }
1417
- if (part === OPEN_CURLY) {
1418
- bracketCount++;
1419
- }
1420
- }
1421
- if (currentBlockParts.length > 0) {
1422
- escapedBlocks.push(currentBlockParts.join(""));
1423
- resultParts.push(BLOCK_PLACEHOLDER);
1424
- }
1425
- const strEscapedBlocks = {
1426
- escapedString: resultParts.join(""),
1427
- blocks: escapedBlocks
1428
- };
1429
- return strEscapedBlocks;
1430
- };
1431
- var insertPolyfillHostInCssText = (cssText) => {
1432
- const supportsBlocks = [];
1433
- cssText = cssText.replace(/@supports\s+selector\s*\(\s*([^)]*)\s*\)/g, (_, selectorContent) => {
1434
- const placeholder = `__supports_${supportsBlocks.length}__`;
1435
- supportsBlocks.push(selectorContent);
1436
- return `@supports selector(${placeholder})`;
1437
- });
1438
- const _colonSlottedRe = createSupportsRuleRe("::slotted");
1439
- const _colonHostRe = createSupportsRuleRe(":host");
1440
- const _colonHostContextRe = createSupportsRuleRe(":host-context");
1441
- cssText = cssText.replace(_colonHostContextRe, `$1${_polyfillHostContext}`).replace(_colonHostRe, `$1${_polyfillHost}`).replace(_colonSlottedRe, `$1${_polyfillSlotted}`);
1442
- supportsBlocks.forEach((originalSelector, index) => {
1443
- cssText = cssText.replace(`__supports_${index}__`, originalSelector);
1444
- });
1445
- return cssText;
1446
- };
1447
- var convertColonRule = (cssText, regExp, partReplacer) => {
1448
- return cssText.replace(regExp, (...m) => {
1449
- if (m[2]) {
1450
- const parts = m[2].split(",");
1451
- const r = [];
1452
- for (let i2 = 0; i2 < parts.length; i2++) {
1453
- const p = parts[i2].trim();
1454
- if (!p) break;
1455
- r.push(partReplacer(_polyfillHostNoCombinator, p, m[3]));
1456
- }
1457
- return r.join(",");
1458
- } else {
1459
- return _polyfillHostNoCombinator + m[3];
1460
- }
1461
- });
1462
- };
1463
- var colonHostPartReplacer = (host, part, suffix) => {
1464
- return host + part.replace(_polyfillHost, "") + suffix;
1465
- };
1466
- var convertColonHost = (cssText) => {
1467
- return convertColonRule(cssText, _cssColonHostRe, colonHostPartReplacer);
1468
- };
1469
- var colonHostContextPartReplacer = (host, part, suffix) => {
1470
- if (part.indexOf(_polyfillHost) > -1) {
1471
- return colonHostPartReplacer(host, part, suffix);
1472
- } else {
1473
- return host + part + suffix + ", " + part + " " + host + suffix;
1474
- }
1475
- };
1476
- var convertColonSlotted = (cssText, slotScopeId) => {
1477
- const slotClass = "." + slotScopeId + " > ";
1478
- const selectors = [];
1479
- cssText = cssText.replace(_cssColonSlottedRe, (...m) => {
1480
- if (m[2]) {
1481
- const compound = m[2].trim();
1482
- const suffix = m[3];
1483
- const slottedSelector = slotClass + compound + suffix;
1484
- let prefixSelector = "";
1485
- for (let i2 = m[4] - 1; i2 >= 0; i2--) {
1486
- const char = m[5][i2];
1487
- if (char === "}" || char === ",") {
1488
- break;
1489
- }
1490
- prefixSelector = char + prefixSelector;
1491
- }
1492
- const orgSelector = (prefixSelector + slottedSelector).trim();
1493
- const addedSelector = `${prefixSelector.trimEnd()}${slottedSelector.trim()}`.trim();
1494
- if (orgSelector !== addedSelector) {
1495
- const updatedSelector = `${addedSelector}, ${orgSelector}`;
1496
- selectors.push({
1497
- orgSelector,
1498
- updatedSelector
1499
- });
1500
- }
1501
- return slottedSelector;
1502
- } else {
1503
- return _polyfillHostNoCombinator + m[3];
1504
- }
1505
- });
1506
- return {
1507
- selectors,
1508
- cssText
1509
- };
1510
- };
1511
- var convertColonHostContext = (cssText) => {
1512
- return convertColonRule(cssText, _cssColonHostContextRe, colonHostContextPartReplacer);
1513
- };
1514
- var convertShadowDOMSelectors = (cssText) => {
1515
- return _shadowDOMSelectorsRe.reduce((result, pattern) => result.replace(pattern, " "), cssText);
1516
- };
1517
- var makeScopeMatcher = (scopeSelector2) => {
1518
- const lre = /\[/g;
1519
- const rre = /\]/g;
1520
- scopeSelector2 = scopeSelector2.replace(lre, "\\[").replace(rre, "\\]");
1521
- return new RegExp("^(" + scopeSelector2 + ")" + _selectorReSuffix, "m");
1522
- };
1523
- var selectorNeedsScoping = (selector, scopeSelector2) => {
1524
- const re = makeScopeMatcher(scopeSelector2);
1525
- return !re.test(selector);
1526
- };
1527
- var injectScopingSelector = (selector, scopingSelector) => {
1528
- return selector.replace(_selectorPartsRe, (_, before = "", _colonGroup, colon = "", after = "") => {
1529
- return before + scopingSelector + colon + after;
1530
- });
1531
- };
1532
- var applySimpleSelectorScope = (selector, scopeSelector2, hostSelector) => {
1533
- _polyfillHostRe.lastIndex = 0;
1534
- if (_polyfillHostRe.test(selector)) {
1535
- const replaceBy = `.${hostSelector}`;
1536
- return selector.replace(_polyfillHostNoCombinatorRe, (_, selector2) => injectScopingSelector(selector2, replaceBy)).replace(_polyfillHostRe, replaceBy + " ");
1537
- }
1538
- return scopeSelector2 + " " + selector;
1539
- };
1540
- var applyStrictSelectorScope = (selector, scopeSelector2, hostSelector) => {
1541
- const isRe = /\[is=([^\]]*)\]/g;
1542
- scopeSelector2 = scopeSelector2.replace(isRe, (_, ...parts) => parts[0]);
1543
- const className = "." + scopeSelector2;
1544
- const _scopeSelectorPart = (p) => {
1545
- let scopedP = p.trim();
1546
- if (!scopedP) {
1547
- return "";
1548
- }
1549
- if (p.indexOf(_polyfillHostNoCombinator) > -1) {
1550
- scopedP = applySimpleSelectorScope(p, scopeSelector2, hostSelector);
1551
- } else {
1552
- const t = p.replace(_polyfillHostRe, "");
1553
- if (t.length > 0) {
1554
- scopedP = injectScopingSelector(t, className);
1555
- }
1556
- }
1557
- return scopedP;
1558
- };
1559
- const safeContent = safeSelector(selector);
1560
- selector = safeContent.content;
1561
- let scopedSelector = "";
1562
- let startIndex = 0;
1563
- let res;
1564
- const sep2 = /( |>|\+|~(?!=))(?=(?:[^()]*\([^()]*\))*[^()]*$)\s*/g;
1565
- const hasHost = selector.indexOf(_polyfillHostNoCombinator) > -1;
1566
- let shouldScope = !hasHost;
1567
- while ((res = sep2.exec(selector)) !== null) {
1568
- const separator = res[1];
1569
- const part2 = selector.slice(startIndex, res.index).trim();
1570
- shouldScope = shouldScope || part2.indexOf(_polyfillHostNoCombinator) > -1;
1571
- const scopedPart = shouldScope ? _scopeSelectorPart(part2) : part2;
1572
- scopedSelector += `${scopedPart} ${separator} `;
1573
- startIndex = sep2.lastIndex;
1574
- }
1575
- const part = selector.substring(startIndex);
1576
- shouldScope = !part.match(_safePartRe) && (shouldScope || part.indexOf(_polyfillHostNoCombinator) > -1);
1577
- scopedSelector += shouldScope ? _scopeSelectorPart(part) : part;
1578
- return restoreSafeSelector(safeContent.placeholders, scopedSelector);
1579
- };
1580
- var scopeSelector = (selector, scopeSelectorText, hostSelector, slotSelector) => {
1581
- return selector.split(",").map((shallowPart) => {
1582
- if (slotSelector && shallowPart.indexOf("." + slotSelector) > -1) {
1583
- return shallowPart.trim();
1584
- }
1585
- if (selectorNeedsScoping(shallowPart, scopeSelectorText)) {
1586
- return applyStrictSelectorScope(shallowPart, scopeSelectorText, hostSelector).trim();
1587
- } else {
1588
- return shallowPart.trim();
1589
- }
1590
- }).join(", ");
1591
- };
1592
- var scopeSelectors = (cssText, scopeSelectorText, hostSelector, slotSelector, commentOriginalSelector) => {
1593
- return processRules(cssText, (rule) => {
1594
- let selector = rule.selector;
1595
- let content = rule.content;
1596
- if (rule.selector[0] !== "@") {
1597
- selector = scopeSelector(rule.selector, scopeSelectorText, hostSelector, slotSelector);
1598
- } else if (rule.selector.startsWith("@media") || rule.selector.startsWith("@supports") || rule.selector.startsWith("@page") || rule.selector.startsWith("@document")) {
1599
- content = scopeSelectors(rule.content, scopeSelectorText, hostSelector, slotSelector);
1600
- }
1601
- const cssRule = {
1602
- selector: selector.replace(/\s{2,}/g, " ").trim(),
1603
- content
1604
- };
1605
- return cssRule;
1606
- });
1607
- };
1608
- var scopeCssText = (cssText, scopeId2, hostScopeId, slotScopeId, commentOriginalSelector) => {
1609
- cssText = insertPolyfillHostInCssText(cssText);
1610
- cssText = convertColonHost(cssText);
1611
- cssText = convertColonHostContext(cssText);
1612
- const slotted = convertColonSlotted(cssText, slotScopeId);
1613
- cssText = slotted.cssText;
1614
- cssText = convertShadowDOMSelectors(cssText);
1615
- if (scopeId2) {
1616
- cssText = scopeSelectors(cssText, scopeId2, hostScopeId, slotScopeId);
1617
- }
1618
- cssText = replaceShadowCssHost(cssText, hostScopeId);
1619
- cssText = cssText.replace(/>\s*\*\s+([^{, ]+)/gm, " $1 ");
1620
- return {
1621
- cssText: cssText.trim(),
1622
- // We need to replace the shadow CSS host string in each of these selectors since we created
1623
- // them prior to the replacement happening in the components CSS text.
1624
- slottedSelectors: slotted.selectors.map((ref) => ({
1625
- orgSelector: replaceShadowCssHost(ref.orgSelector, hostScopeId),
1626
- updatedSelector: replaceShadowCssHost(ref.updatedSelector, hostScopeId)
1627
- }))
1628
- };
1629
- };
1630
- var replaceShadowCssHost = (cssText, hostScopeId) => {
1631
- return cssText.replace(/-shadowcsshost-no-combinator/g, `.${hostScopeId}`);
1632
- };
1633
- var expandPartSelectors = (cssText) => {
1634
- const partSelectorRe = /([^\s,{][^,{]*?)::part\(\s*([^)]+?)\s*\)((?:[:.][^,{]*)*)/g;
1635
- return processRules(cssText, (rule) => {
1636
- if (rule.selector[0] === "@") {
1637
- return rule;
1638
- }
1639
- const selectors = rule.selector.split(",").map((sel) => {
1640
- const out = [sel.trim()];
1641
- let m;
1642
- while ((m = partSelectorRe.exec(sel)) !== null) {
1643
- const before = m[1].trimEnd();
1644
- const partNames = m[2].trim().split(/\s+/);
1645
- const after = m[3] || "";
1646
- const partAttr = partNames.flatMap((p) => {
1647
- if (!rule.selector.includes(`[part~="${p}"]`)) {
1648
- return [`[part~="${p}"]`];
1649
- }
1650
- return [];
1651
- }).join("");
1652
- const expanded = `${before} ${partAttr}${after}`;
1653
- if (!!partAttr && expanded !== sel.trim()) {
1654
- out.push(expanded);
1655
- }
1656
- }
1657
- return out.join(", ");
1658
- });
1659
- rule.selector = selectors.join(", ");
1660
- return rule;
1661
- });
1662
- };
1663
- var scopeCss = (cssText, scopeId2, commentOriginalSelector) => {
1664
- const hostScopeId = scopeId2 + "-h";
1665
- const slotScopeId = scopeId2 + "-s";
1666
- const commentsWithHash = extractCommentsWithHash(cssText);
1667
- cssText = stripComments(cssText);
1668
- const orgSelectors = [];
1669
- {
1670
- const processCommentedSelector = (rule) => {
1671
- const placeholder = `/*!@___${orgSelectors.length}___*/`;
1672
- const comment = `/*!@${rule.selector}*/`;
1673
- orgSelectors.push({ placeholder, comment });
1674
- rule.selector = placeholder + rule.selector;
1675
- return rule;
1676
- };
1677
- cssText = processRules(cssText, (rule) => {
1678
- if (rule.selector[0] !== "@") {
1679
- return processCommentedSelector(rule);
1680
- } else if (rule.selector.startsWith("@media") || rule.selector.startsWith("@supports") || rule.selector.startsWith("@page") || rule.selector.startsWith("@document")) {
1681
- rule.content = processRules(rule.content, processCommentedSelector);
1682
- return rule;
1683
- }
1684
- return rule;
1685
- });
1686
- }
1687
- const scoped = scopeCssText(cssText, scopeId2, hostScopeId, slotScopeId);
1688
- cssText = [scoped.cssText, ...commentsWithHash].join("\n");
1689
- {
1690
- orgSelectors.forEach(({ placeholder, comment }) => {
1691
- cssText = cssText.replace(placeholder, comment);
1692
- });
1693
- }
1694
- scoped.slottedSelectors.forEach((slottedSelector) => {
1695
- const regex = new RegExp(escapeRegExpSpecialCharacters(slottedSelector.orgSelector) + "(?=\\s*[,{]|$)", "g");
1696
- cssText = cssText.replace(regex, slottedSelector.updatedSelector);
1697
- });
1698
- cssText = expandPartSelectors(cssText);
1699
- return cssText;
1700
- };
1701
-
1702
1247
  // src/utils/remote-value.ts
1703
1248
  var RemoteValue = class _RemoteValue {
1704
1249
  /**
@@ -2184,9 +1729,6 @@ var putBackInOriginalLocation = (parentElm, recursive) => {
2184
1729
  var addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
2185
1730
  let containerElm = parentElm["s-cr"] && parentElm["s-cr"].parentNode || parentElm;
2186
1731
  let childNode;
2187
- if (containerElm.shadowRoot && containerElm.tagName === hostTagName) {
2188
- containerElm = containerElm.shadowRoot;
2189
- }
2190
1732
  if (parentVNode.$tag$ === "template") {
2191
1733
  containerElm = containerElm.content;
2192
1734
  }
@@ -2510,11 +2052,11 @@ var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
2510
2052
  rootVnode.$tag$ = null;
2511
2053
  rootVnode.$flags$ |= 4 /* isHost */;
2512
2054
  hostRef.$vnode$ = rootVnode;
2513
- rootVnode.$elm$ = oldVNode.$elm$ = hostElm.shadowRoot || hostElm ;
2055
+ rootVnode.$elm$ = oldVNode.$elm$ = hostElm;
2514
2056
  {
2515
2057
  scopeId = hostElm["s-sc"];
2516
2058
  }
2517
- useNativeShadowDom = !!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) && !(cmpMeta.$flags$ & 128 /* shadowNeedsScopedCss */);
2059
+ useNativeShadowDom = supportsShadow;
2518
2060
  {
2519
2061
  contentRef = hostElm["s-cr"];
2520
2062
  checkSlotFallbackVisibility = false;
@@ -3020,13 +2562,6 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
3020
2562
  const scopeId2 = getScopeId(cmpMeta);
3021
2563
  if (!styles.has(scopeId2) || BUILD.hotModuleReplacement) {
3022
2564
  const endRegisterStyles = createTime("registerStyles", cmpMeta.$tagName$);
3023
- {
3024
- if (cmpMeta.$flags$ & 128 /* shadowNeedsScopedCss */) {
3025
- style = scopeCss(style, scopeId2);
3026
- } else if (needsScopedSSR()) {
3027
- style = expandPartSelectors(style);
3028
- }
3029
- }
3030
2565
  registerStyle(scopeId2, style);
3031
2566
  endRegisterStyles();
3032
2567
  }
@@ -3071,10 +2606,7 @@ var connectedCallback = (elm) => {
3071
2606
  {
3072
2607
  hostId = elm.getAttribute(HYDRATE_ID);
3073
2608
  if (hostId) {
3074
- if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
3075
- const scopeId2 = addStyle(elm.shadowRoot, cmpMeta);
3076
- elm.classList.remove(scopeId2 + "-h", scopeId2 + "-s");
3077
- } else if (cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
2609
+ if (cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
3078
2610
  const scopeId2 = getScopeId(cmpMeta);
3079
2611
  elm["s-sc"] = scopeId2;
3080
2612
  }
@@ -4826,7 +4358,6 @@ function hydrateApp(win2, opts, results, afterHydrate, resolve) {
4826
4358
  const orgDocumentCreateElement = win2.document.createElement;
4827
4359
  const orgDocumentCreateElementNS = win2.document.createElementNS;
4828
4360
  const resolved2 = Promise.resolve();
4829
- setScopedSSR(opts);
4830
4361
  let tmrId;
4831
4362
  let ranCompleted = false;
4832
4363
  function hydratedComplete() {
@@ -5166,6 +4697,7 @@ var plt = {
5166
4697
  rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
5167
4698
  ce: (eventName, opts) => new win.CustomEvent(eventName, opts)
5168
4699
  };
4700
+ var supportsShadow = BUILD.shadowDom;
5169
4701
  var getHostRef = (ref) => {
5170
4702
  if (ref.__stencil__getHostRef) {
5171
4703
  return ref.__stencil__getHostRef();
@@ -5199,11 +4731,6 @@ var registerHost = (elm, cmpMeta) => {
5199
4731
  return hostRef;
5200
4732
  };
5201
4733
  var styles = /* @__PURE__ */ new Map();
5202
- var setScopedSSR = (opts) => {
5203
- scopedSSR = opts.serializeShadowRoot !== false && opts.serializeShadowRoot !== "declarative-shadow-dom";
5204
- };
5205
- var needsScopedSSR = () => scopedSSR;
5206
- var scopedSSR = false;
5207
4734
 
5208
4735
  const primary = "#051D36";
5209
4736
  const secondary = "#555555";
@@ -5481,7 +5008,7 @@ class SdBadge {
5481
5008
  label = '';
5482
5009
  render() {
5483
5010
  const resolvedColor = resolveColor(this.color);
5484
- 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)));
5011
+ 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)));
5485
5012
  }
5486
5013
  static get style() { return sdBadgeCss(); }
5487
5014
  static get cmpMeta() { return {
@@ -5512,8 +5039,103 @@ const size = {
5512
5039
  icon: "24"
5513
5040
  }
5514
5041
  };
5042
+ const border = {
5043
+ disabled: "#CCCCCC"
5044
+ };
5045
+ const dropdown = {
5046
+ xs: {
5047
+ minWidth: "60"
5048
+ },
5049
+ sm: {
5050
+ minWidth: "76"
5051
+ },
5052
+ md: {
5053
+ minWidth: "106"
5054
+ }
5055
+ };
5056
+ const bg = {
5057
+ disabled: "#E1E1E1"
5058
+ };
5059
+ const content = {
5060
+ disabled: "#888888"
5061
+ };
5062
+ const brand = {
5063
+ strong: {
5064
+ bg: {
5065
+ "default": "#025497",
5066
+ hover: "#004177"
5067
+ },
5068
+ content: "#FFFFFF",
5069
+ dropdown: {
5070
+ divider: "#006AC1"
5071
+ }
5072
+ },
5073
+ subtle: {
5074
+ bg: {
5075
+ "default": "#1F8AE1",
5076
+ hover: "#006AC1"
5077
+ },
5078
+ content: "#FFFFFF",
5079
+ dropdown: {
5080
+ divider: "#5CB0F3"
5081
+ }
5082
+ },
5083
+ outline: {
5084
+ bg: {
5085
+ "default": "#FFFFFF",
5086
+ hover: "#EAF5FE"
5087
+ },
5088
+ border: "#025497",
5089
+ content: "#025497"
5090
+ }
5091
+ };
5092
+ const neutral = {
5093
+ subtle: {
5094
+ bg: {
5095
+ "default": "#FFFFFF",
5096
+ hover: "#EEEEEE"
5097
+ },
5098
+ content: "#333333"
5099
+ },
5100
+ outline: {
5101
+ bg: {
5102
+ "default": "#FFFFFF",
5103
+ hover: "#EEEEEE"
5104
+ },
5105
+ border: "#888888",
5106
+ content: "#333333"
5107
+ }
5108
+ };
5109
+ const danger = {
5110
+ strong: {
5111
+ bg: {
5112
+ "default": "#E30000",
5113
+ hover: "#AD0000"
5114
+ },
5115
+ content: "#FFFFFF",
5116
+ dropdown: {
5117
+ divider: "#FF7C7C"
5118
+ }
5119
+ },
5120
+ outline: {
5121
+ bg: {
5122
+ "default": "#FFFFFF",
5123
+ hover: "#FCEFEF"
5124
+ },
5125
+ border: "#E30000",
5126
+ content: "#E30000"
5127
+ }
5128
+ };
5515
5129
  var buttonTokens = {
5516
- size: size};
5130
+ size: size,
5131
+ border: border,
5132
+ dropdown: dropdown,
5133
+ bg: bg,
5134
+ content: content,
5135
+ brand: brand,
5136
+ neutral: neutral,
5137
+ danger: danger
5138
+ };
5517
5139
 
5518
5140
  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}`;
5519
5141
 
@@ -5597,6 +5219,290 @@ class SdButton {
5597
5219
  }; }
5598
5220
  }
5599
5221
 
5222
+ const BUTTON_FOCUS_RING_COLOR = '#0075FF';
5223
+ const PRESET_DEFAULT_COLORS = {
5224
+ primary: buttonTokens.brand.strong.bg.default,
5225
+ secondary: buttonTokens.brand.subtle.bg.default,
5226
+ primary_outline: buttonTokens.brand.outline.bg.default,
5227
+ neutral: buttonTokens.neutral.subtle.bg.default,
5228
+ neutral_outline: buttonTokens.neutral.outline.bg.default,
5229
+ danger: buttonTokens.danger.strong.bg.default,
5230
+ danger_outline: buttonTokens.danger.outline.bg.default,
5231
+ };
5232
+ const BUTTON_CONFIG = {
5233
+ primary_xs: {
5234
+ variant: 'primary',
5235
+ size: 'xs',
5236
+ color: PRESET_DEFAULT_COLORS.primary,
5237
+ },
5238
+ secondary_xs: {
5239
+ variant: 'primary',
5240
+ size: 'xs',
5241
+ color: PRESET_DEFAULT_COLORS.secondary,
5242
+ },
5243
+ primary_outline_xs: {
5244
+ variant: 'outline',
5245
+ size: 'xs',
5246
+ color: PRESET_DEFAULT_COLORS.primary_outline,
5247
+ },
5248
+ neutral_xs: {
5249
+ variant: 'primary',
5250
+ size: 'xs',
5251
+ color: PRESET_DEFAULT_COLORS.neutral,
5252
+ },
5253
+ neutral_outline_xs: {
5254
+ variant: 'outline',
5255
+ size: 'xs',
5256
+ color: PRESET_DEFAULT_COLORS.neutral_outline,
5257
+ },
5258
+ danger_xs: {
5259
+ variant: 'primary',
5260
+ size: 'xs',
5261
+ color: PRESET_DEFAULT_COLORS.danger,
5262
+ },
5263
+ danger_outline_xs: {
5264
+ variant: 'outline',
5265
+ size: 'xs',
5266
+ color: PRESET_DEFAULT_COLORS.danger_outline,
5267
+ },
5268
+ primary_sm: {
5269
+ variant: 'primary',
5270
+ size: 'sm',
5271
+ color: PRESET_DEFAULT_COLORS.primary,
5272
+ },
5273
+ secondary_sm: {
5274
+ variant: 'primary',
5275
+ size: 'sm',
5276
+ color: PRESET_DEFAULT_COLORS.secondary,
5277
+ },
5278
+ primary_outline_sm: {
5279
+ variant: 'outline',
5280
+ size: 'sm',
5281
+ color: PRESET_DEFAULT_COLORS.primary_outline,
5282
+ },
5283
+ neutral_sm: {
5284
+ variant: 'primary',
5285
+ size: 'sm',
5286
+ color: PRESET_DEFAULT_COLORS.neutral,
5287
+ },
5288
+ neutral_outline_sm: {
5289
+ variant: 'outline',
5290
+ size: 'sm',
5291
+ color: PRESET_DEFAULT_COLORS.neutral_outline,
5292
+ },
5293
+ danger_sm: {
5294
+ variant: 'primary',
5295
+ size: 'sm',
5296
+ color: PRESET_DEFAULT_COLORS.danger,
5297
+ },
5298
+ danger_outline_sm: {
5299
+ variant: 'outline',
5300
+ size: 'sm',
5301
+ color: PRESET_DEFAULT_COLORS.danger_outline,
5302
+ },
5303
+ primary_md: {
5304
+ variant: 'primary',
5305
+ size: 'md',
5306
+ color: PRESET_DEFAULT_COLORS.primary,
5307
+ },
5308
+ secondary_md: {
5309
+ variant: 'primary',
5310
+ size: 'md',
5311
+ color: PRESET_DEFAULT_COLORS.secondary,
5312
+ },
5313
+ primary_outline_md: {
5314
+ variant: 'outline',
5315
+ size: 'md',
5316
+ color: PRESET_DEFAULT_COLORS.primary_outline,
5317
+ },
5318
+ neutral_md: {
5319
+ variant: 'primary',
5320
+ size: 'md',
5321
+ color: PRESET_DEFAULT_COLORS.neutral,
5322
+ },
5323
+ neutral_outline_md: {
5324
+ variant: 'outline',
5325
+ size: 'md',
5326
+ color: PRESET_DEFAULT_COLORS.neutral_outline,
5327
+ },
5328
+ danger_md: {
5329
+ variant: 'primary',
5330
+ size: 'md',
5331
+ color: PRESET_DEFAULT_COLORS.danger,
5332
+ },
5333
+ danger_outline_md: {
5334
+ variant: 'outline',
5335
+ size: 'md',
5336
+ color: PRESET_DEFAULT_COLORS.danger_outline,
5337
+ },
5338
+ primary_lg: {
5339
+ variant: 'primary',
5340
+ size: 'lg',
5341
+ color: PRESET_DEFAULT_COLORS.primary,
5342
+ },
5343
+ secondary_lg: {
5344
+ variant: 'primary',
5345
+ size: 'lg',
5346
+ color: PRESET_DEFAULT_COLORS.secondary,
5347
+ },
5348
+ primary_outline_lg: {
5349
+ variant: 'outline',
5350
+ size: 'lg',
5351
+ color: PRESET_DEFAULT_COLORS.primary_outline,
5352
+ },
5353
+ neutral_lg: {
5354
+ variant: 'primary',
5355
+ size: 'lg',
5356
+ color: PRESET_DEFAULT_COLORS.neutral,
5357
+ },
5358
+ neutral_outline_lg: {
5359
+ variant: 'outline',
5360
+ size: 'lg',
5361
+ color: PRESET_DEFAULT_COLORS.neutral_outline,
5362
+ },
5363
+ danger_lg: {
5364
+ variant: 'primary',
5365
+ size: 'lg',
5366
+ color: PRESET_DEFAULT_COLORS.danger,
5367
+ },
5368
+ danger_outline_lg: {
5369
+ variant: 'outline',
5370
+ size: 'lg',
5371
+ color: PRESET_DEFAULT_COLORS.danger_outline,
5372
+ },
5373
+ };
5374
+ const BUTTON_ICON_SIZES = {
5375
+ xs: Number(buttonTokens.size.xs.icon),
5376
+ sm: Number(buttonTokens.size.sm.icon),
5377
+ md: Number(buttonTokens.size.md.icon),
5378
+ lg: Number(buttonTokens.size.lg.icon),
5379
+ };
5380
+ const PRESET_HOVER_BACKGROUNDS$1 = {
5381
+ primary: buttonTokens.brand.strong.bg.hover,
5382
+ secondary: buttonTokens.brand.subtle.bg.hover,
5383
+ primary_outline: buttonTokens.brand.outline.bg.hover,
5384
+ neutral: buttonTokens.neutral.subtle.bg.hover,
5385
+ neutral_outline: buttonTokens.neutral.outline.bg.hover,
5386
+ danger: buttonTokens.danger.strong.bg.hover,
5387
+ danger_outline: buttonTokens.danger.outline.bg.hover,
5388
+ };
5389
+ const PRESET_CONTENT_COLORS$1 = {
5390
+ primary: buttonTokens.brand.strong.content,
5391
+ secondary: buttonTokens.brand.subtle.content,
5392
+ primary_outline: buttonTokens.brand.outline.content,
5393
+ neutral: buttonTokens.neutral.subtle.content,
5394
+ neutral_outline: buttonTokens.neutral.outline.content,
5395
+ danger: buttonTokens.danger.strong.content,
5396
+ danger_outline: buttonTokens.danger.outline.content,
5397
+ };
5398
+ const PRESET_BORDER_COLORS$1 = {
5399
+ primary: 'transparent',
5400
+ secondary: 'transparent',
5401
+ primary_outline: buttonTokens.brand.outline.border,
5402
+ neutral: 'transparent',
5403
+ neutral_outline: buttonTokens.neutral.outline.border,
5404
+ danger: 'transparent',
5405
+ danger_outline: buttonTokens.danger.outline.border,
5406
+ };
5407
+ const DISABLED_CONTENT = buttonTokens.content.disabled;
5408
+ const SIZE_SUFFIX_PATTERN = /_(xs|sm|md|lg)$/;
5409
+ const isButtonV2Name = (value) => value in BUTTON_CONFIG;
5410
+ const getPresetName = (value) => value.replace(SIZE_SUFFIX_PATTERN, '');
5411
+
5412
+ 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}`;
5413
+
5414
+ class SdButtonV2 {
5415
+ constructor(hostRef) {
5416
+ registerInstance(this, hostRef);
5417
+ this.click = createEvent(this, "sdClick");
5418
+ }
5419
+ name = 'primary_sm';
5420
+ label = '';
5421
+ icon;
5422
+ ariaLabel = '';
5423
+ disabled = false;
5424
+ type = 'button';
5425
+ click;
5426
+ hasWarnedMissingAriaLabel = false;
5427
+ handleClick = (event) => {
5428
+ if (this.disabled) {
5429
+ event.preventDefault();
5430
+ return;
5431
+ }
5432
+ this.click.emit(event);
5433
+ };
5434
+ get resolvedConfig() {
5435
+ if (!isButtonV2Name(this.name)) {
5436
+ throw new Error(`Invalid sd-button-v2 name: ${this.name}`);
5437
+ }
5438
+ const config = BUTTON_CONFIG[this.name];
5439
+ const preset = getPresetName(this.name);
5440
+ return {
5441
+ config,
5442
+ preset,
5443
+ };
5444
+ }
5445
+ getButtonClasses(preset, size, hasLabel, iconOnly) {
5446
+ const classes = ['sd-button-v2', `sd-button-v2--${preset}`, `sd-button-v2--${size}`];
5447
+ if (this.disabled) {
5448
+ classes.push('sd-button-v2--disabled');
5449
+ }
5450
+ if (iconOnly) {
5451
+ classes.push('sd-button-v2--icon-only');
5452
+ }
5453
+ if (hasLabel) {
5454
+ classes.push('sd-button-v2--has-label');
5455
+ }
5456
+ return classes.join(' ');
5457
+ }
5458
+ componentWillRender() {
5459
+ this.warnIfMissingAriaLabel();
5460
+ }
5461
+ warnIfMissingAriaLabel() {
5462
+ const iconOnly = !this.label && Boolean(this.icon);
5463
+ const missingAriaLabel = iconOnly && !this.ariaLabel.trim();
5464
+ if (!missingAriaLabel) {
5465
+ this.hasWarnedMissingAriaLabel = false;
5466
+ return;
5467
+ }
5468
+ if (this.hasWarnedMissingAriaLabel) {
5469
+ return;
5470
+ }
5471
+ console.warn(`[sd-button-v2] icon-only buttons require \`ariaLabel\`. Received name="${this.name}" icon="${this.icon}".`);
5472
+ this.hasWarnedMissingAriaLabel = true;
5473
+ }
5474
+ render() {
5475
+ const { config, preset } = this.resolvedConfig;
5476
+ const hasLabel = Boolean(this.label);
5477
+ const iconOnly = !this.label && Boolean(this.icon);
5478
+ const accessibleName = iconOnly && this.ariaLabel.trim() ? this.ariaLabel : undefined;
5479
+ const iconColor = this.disabled ? DISABLED_CONTENT : PRESET_CONTENT_COLORS$1[preset];
5480
+ return (hAsync("button", { key: '9adec3868e5337822463a5a37a741ef146a081be', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type, disabled: this.disabled, "aria-label": accessibleName, style: {
5481
+ '--sd-button-v2-bg': config.variant === 'primary' ? config.color : '#FFFFFF',
5482
+ '--sd-button-v2-bg-hover': PRESET_HOVER_BACKGROUNDS$1[preset],
5483
+ '--sd-button-v2-border': PRESET_BORDER_COLORS$1[preset],
5484
+ '--sd-button-v2-content': PRESET_CONTENT_COLORS$1[preset],
5485
+ '--sd-button-v2-accent': BUTTON_FOCUS_RING_COLOR,
5486
+ }, 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))));
5487
+ }
5488
+ static get style() { return sdButtonV2Css(); }
5489
+ static get cmpMeta() { return {
5490
+ "$flags$": 512,
5491
+ "$tagName$": "sd-button-v2",
5492
+ "$members$": {
5493
+ "name": [1],
5494
+ "label": [1],
5495
+ "icon": [1],
5496
+ "ariaLabel": [1, "aria-label"],
5497
+ "disabled": [4],
5498
+ "type": [1]
5499
+ },
5500
+ "$listeners$": undefined,
5501
+ "$lazyBundleId$": "-",
5502
+ "$attrsToReflect$": []
5503
+ }; }
5504
+ }
5505
+
5600
5506
  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}`;
5601
5507
 
5602
5508
  class SdCard {
@@ -5606,7 +5512,7 @@ class SdCard {
5606
5512
  bordered = false;
5607
5513
  sdClass = '';
5608
5514
  render() {
5609
- return (hAsync(Fragment, { key: '155504b50cb1c21fc1f847af8a9e8b685f7881ef' }, hAsync("div", { key: 'c461e3e40da44586da5e02ad508bf59942a9e82a', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, hAsync("slot", { key: '0c0ee023155c08c565c3496c44699a900666b084' }))));
5515
+ return (hAsync(Fragment, { key: '3999f64f54054b3a1662fac4aacf9f6898acb957' }, hAsync("div", { key: '666b8e849b92a5e75d259ff079237911fd591cdd', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, hAsync("slot", { key: 'dc8f4ae80e9aca7a0aecaed81f45d40e7df2c067' }))));
5610
5516
  }
5611
5517
  static get style() { return sdCardCss(); }
5612
5518
  static get cmpMeta() { return {
@@ -5922,7 +5828,7 @@ class SdDatePicker {
5922
5828
  this.isOpen = false;
5923
5829
  };
5924
5830
  render() {
5925
- 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" }, [
5831
+ 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" }, [
5926
5832
  ...this.calendar.prevMonthDays,
5927
5833
  ...this.calendar.days,
5928
5834
  ...this.calendar.afterMonthDays,
@@ -6047,101 +5953,472 @@ class SdDateRangePicker {
6047
5953
  formatDate(index, day) {
6048
5954
  return this.dateUtil.formatDate(index === 0 ? this.prevYear : this.nextYear, index === 0 ? this.prevMonth : this.nextMonth, day);
6049
5955
  }
6050
- getDateBoxType(date) {
6051
- const [start, end] = this.dateRange;
6052
- if (date === start)
6053
- return end ? 'start' : this.hoverDate < this.dateRange[0] ? 'end' : 'start';
6054
- if (date === end)
6055
- return 'end';
6056
- return '';
5956
+ getDateBoxType(date) {
5957
+ const [start, end] = this.dateRange;
5958
+ if (date === start)
5959
+ return end ? 'start' : this.hoverDate < this.dateRange[0] ? 'end' : 'start';
5960
+ if (date === end)
5961
+ return 'end';
5962
+ return '';
5963
+ }
5964
+ isDateInRange(date) {
5965
+ const [start, end] = this.dateRange;
5966
+ // 1. 날짜 범위가 완전히 선택된 경우
5967
+ if (start && end) {
5968
+ return date >= start && date <= end;
5969
+ }
5970
+ // 2. hover 상태의 날짜 범위를 확인
5971
+ if (!this.hoverDate || !start || end) {
5972
+ return false;
5973
+ }
5974
+ // 3. dateRange[0]과 hoverDate를 기준으로 범위 계산
5975
+ const [from, to] = start <= this.hoverDate ? [start, this.hoverDate] : [this.hoverDate, start];
5976
+ return date >= from && date <= to;
5977
+ }
5978
+ isDisabledDate(date) {
5979
+ const [start, end] = this.dateRange;
5980
+ if (this.maxRange && start && !end) {
5981
+ const minDate = addDays(start, -this.maxRange);
5982
+ const maxDate = addDays(start, this.maxRange);
5983
+ return !(minDate <= date && date <= maxDate);
5984
+ }
5985
+ if (!this.selectable || !this.selectable[0] || !this.selectable[1]) {
5986
+ return false;
5987
+ }
5988
+ return !(date >= this.selectable[0] && date <= this.selectable[1]);
5989
+ }
5990
+ /* ----------------------------------
5991
+ * Interaction
5992
+ * ---------------------------------- */
5993
+ openMenu() {
5994
+ if (this.disabled)
5995
+ return;
5996
+ this.tempDateRange = [...this.dateRange];
5997
+ this.resetCalendarByDateRange(this.dateRange);
5998
+ this.isOpen = true;
5999
+ }
6000
+ closeMenu = () => {
6001
+ if (!this.dateRange[0] || !this.dateRange[1]) {
6002
+ this.dateRange = [...this.tempDateRange];
6003
+ }
6004
+ this.isOpen = false;
6005
+ };
6006
+ handleDateClick(index, day) {
6007
+ this.setHoverDate('');
6008
+ const selectedDate = this.formatDate(index, day);
6009
+ if (!this.dateRange[0] || !!this.dateRange[1] || selectedDate < this.dateRange[0]) {
6010
+ this.setDateRange([selectedDate, '']);
6011
+ return; // 아직 완료 아님
6012
+ }
6013
+ const newRange = [this.dateRange[0], selectedDate];
6014
+ this.setDateRange(newRange);
6015
+ this.value = newRange;
6016
+ this.update.emit?.(newRange);
6017
+ }
6018
+ handleDateHover(index, day) {
6019
+ const hoverDate = this.formatDate(index, day);
6020
+ this.setHoverDate(hoverDate);
6021
+ }
6022
+ render() {
6023
+ return (hAsync("div", { key: '1862958ea2e972700ea83ed61f0285f09cf52c02', class: {
6024
+ 'sd-date-range-picker': true,
6025
+ 'sd-date-range-picker--disabled': this.disabled,
6026
+ } }, 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
6027
+ ? `${this.prevYear}.${String(this.prevMonth).padStart(2, '0')}`
6028
+ : `${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)) }))))))))))))));
6029
+ }
6030
+ static get watchers() { return {
6031
+ "value": [{
6032
+ "onValueChange": 0
6033
+ }]
6034
+ }; }
6035
+ static get style() { return sdDateRangePickerCss(); }
6036
+ static get cmpMeta() { return {
6037
+ "$flags$": 514,
6038
+ "$tagName$": "sd-date-range-picker",
6039
+ "$members$": {
6040
+ "value": [1040],
6041
+ "label": [1],
6042
+ "selectable": [16],
6043
+ "maxRange": [2, "max-range"],
6044
+ "disabled": [4],
6045
+ "placeholder": [1],
6046
+ "isOpen": [32],
6047
+ "dateRange": [32],
6048
+ "hoverDate": [32],
6049
+ "prevYear": [32],
6050
+ "prevMonth": [32]
6051
+ },
6052
+ "$listeners$": undefined,
6053
+ "$lazyBundleId$": "-",
6054
+ "$attrsToReflect$": []
6055
+ }; }
6056
+ }
6057
+
6058
+ class DropdownManager {
6059
+ static instance;
6060
+ activeDropdowns = new Set();
6061
+ static getInstance() {
6062
+ if (!DropdownManager.instance) {
6063
+ DropdownManager.instance = new DropdownManager();
6064
+ }
6065
+ return DropdownManager.instance;
6066
+ }
6067
+ register(component) {
6068
+ this.activeDropdowns.add(component);
6069
+ }
6070
+ unregister(component) {
6071
+ this.activeDropdowns.delete(component);
6072
+ }
6073
+ openDropdown(targetComponent) {
6074
+ // 다른 모든 드롭다운 닫기
6075
+ this.activeDropdowns.forEach(component => {
6076
+ if (component !== targetComponent && component.isOpen) {
6077
+ component.closeDropdown();
6078
+ }
6079
+ });
6080
+ }
6081
+ closeAllDropdowns() {
6082
+ this.activeDropdowns.forEach(component => {
6083
+ if (component.isOpen) {
6084
+ component.closeDropdown();
6085
+ }
6086
+ });
6087
+ }
6088
+ }
6089
+ const dropdownManager = DropdownManager.getInstance();
6090
+
6091
+ // 여러 select를 동시에 사용할때에 이벤트 리스너의 등록이 충돌나는 문제를 해결하기 위한 Base class
6092
+ // 각 드롭다운 컴포넌트는 이 클래스를 상속 및 구현 필요
6093
+ // 기본적으로 click, keydown 추상 이벤트를 구현해야하고
6094
+ // isOpen가 true일때에만 이벤트 등록 그외에는 이벤트 클리닝을 수행
6095
+ // 추후 필요한 이벤트는 이곳에 추가하여 추가 구현 후 사용
6096
+ // 별도로 드롭다운 전용의 Base class가 아닌 공통적으로 사용할 수 있는 Base class가 필요할지 검토 필요
6097
+ class BaseDropdownEvent {
6098
+ documentClickHandler;
6099
+ documentKeydownHandler;
6100
+ // 컴포넌트 생명주기에서 호출할 메서드들
6101
+ initializeEvent() {
6102
+ dropdownManager.register(this);
6103
+ this.initializeEventHandlers();
6104
+ }
6105
+ cleanupEvent() {
6106
+ dropdownManager.unregister(this);
6107
+ this.cleanup();
6108
+ }
6109
+ initializeEventHandlers() {
6110
+ this.documentClickHandler = (event) => this.handleDocumentClick(event);
6111
+ this.documentKeydownHandler = (event) => this.handleDocumentKeydown(event);
6112
+ }
6113
+ addGlobalEventListeners() {
6114
+ if (this.documentClickHandler) {
6115
+ document.addEventListener('click', this.documentClickHandler);
6116
+ }
6117
+ if (this.documentKeydownHandler) {
6118
+ document.addEventListener('keydown', this.documentKeydownHandler);
6119
+ }
6120
+ }
6121
+ removeGlobalEventListeners() {
6122
+ if (this.documentClickHandler) {
6123
+ document.removeEventListener('click', this.documentClickHandler);
6124
+ }
6125
+ if (this.documentKeydownHandler) {
6126
+ document.removeEventListener('keydown', this.documentKeydownHandler);
6127
+ }
6128
+ }
6129
+ onDropdownToggle(isOpen) {
6130
+ if (isOpen && !this.disabled) {
6131
+ dropdownManager.openDropdown(this);
6132
+ this.addGlobalEventListeners();
6133
+ }
6134
+ else {
6135
+ this.removeGlobalEventListeners();
6136
+ }
6137
+ }
6138
+ cleanup() {
6139
+ this.removeGlobalEventListeners();
6140
+ }
6141
+ closeDropdown() {
6142
+ this.isOpen = false;
6143
+ }
6144
+ }
6145
+
6146
+ const color = {
6147
+ bg: {
6148
+ accent: {
6149
+ "default": "#0075FF"}},
6150
+ text: {
6151
+ secondary: "#333333",
6152
+ inverse: "#FFFFFF"
6153
+ }};
6154
+ var systemTokens = {
6155
+ color: color
6156
+ };
6157
+
6158
+ const UNSUPPORTED_DROPDOWN_BUTTON_NAMES = new Set([
6159
+ 'neutral_xs',
6160
+ 'neutral_sm',
6161
+ 'neutral_md',
6162
+ ]);
6163
+ const DROPDOWN_BUTTON_NAMES = Object.keys(BUTTON_CONFIG).filter((name) => !name.endsWith('_lg') && !UNSUPPORTED_DROPDOWN_BUTTON_NAMES.has(name));
6164
+ const DROPDOWN_BUTTON_CONFIG = Object.fromEntries(DROPDOWN_BUTTON_NAMES.map(name => [name, BUTTON_CONFIG[name]]));
6165
+ const DROPDOWN_BUTTON_MIN_WIDTHS = {
6166
+ xs: buttonTokens.dropdown.xs.minWidth,
6167
+ sm: buttonTokens.dropdown.sm.minWidth,
6168
+ md: buttonTokens.dropdown.md.minWidth,
6169
+ };
6170
+ const PRESET_HOVER_BACKGROUNDS = PRESET_HOVER_BACKGROUNDS$1;
6171
+ const PRESET_CONTENT_COLORS = PRESET_CONTENT_COLORS$1;
6172
+ const PRESET_BORDER_COLORS = PRESET_BORDER_COLORS$1;
6173
+ const PRESET_DIVIDER_COLORS = {
6174
+ primary: buttonTokens.brand.strong.dropdown.divider,
6175
+ secondary: buttonTokens.brand.subtle.dropdown.divider,
6176
+ primary_outline: PRESET_BORDER_COLORS.primary_outline,
6177
+ neutral: buttonTokens.neutral.outline.border,
6178
+ neutral_outline: PRESET_BORDER_COLORS.neutral_outline,
6179
+ danger: buttonTokens.danger.strong.dropdown.divider,
6180
+ danger_outline: PRESET_BORDER_COLORS.danger_outline,
6181
+ };
6182
+ const MENU_ITEM_COLOR = systemTokens.color.text.secondary;
6183
+ const MENU_ITEM_ACTIVE_BACKGROUND = systemTokens.color.bg.accent.default;
6184
+ const MENU_ITEM_ACTIVE_COLOR = systemTokens.color.text.inverse;
6185
+ const PRESET_MENU_ITEM_COLORS = {
6186
+ primary: MENU_ITEM_COLOR,
6187
+ secondary: MENU_ITEM_COLOR,
6188
+ primary_outline: MENU_ITEM_COLOR,
6189
+ neutral: MENU_ITEM_COLOR,
6190
+ neutral_outline: MENU_ITEM_COLOR,
6191
+ danger: MENU_ITEM_COLOR,
6192
+ danger_outline: MENU_ITEM_COLOR,
6193
+ };
6194
+ const PRESET_MENU_ITEM_ACTIVE_BACKGROUNDS = {
6195
+ primary: MENU_ITEM_ACTIVE_BACKGROUND,
6196
+ secondary: MENU_ITEM_ACTIVE_BACKGROUND,
6197
+ primary_outline: MENU_ITEM_ACTIVE_BACKGROUND,
6198
+ neutral: MENU_ITEM_ACTIVE_BACKGROUND,
6199
+ neutral_outline: MENU_ITEM_ACTIVE_BACKGROUND,
6200
+ danger: MENU_ITEM_ACTIVE_BACKGROUND,
6201
+ danger_outline: MENU_ITEM_ACTIVE_BACKGROUND,
6202
+ };
6203
+ const PRESET_MENU_ITEM_ACTIVE_COLORS = {
6204
+ primary: MENU_ITEM_ACTIVE_COLOR,
6205
+ secondary: MENU_ITEM_ACTIVE_COLOR,
6206
+ primary_outline: MENU_ITEM_ACTIVE_COLOR,
6207
+ neutral: MENU_ITEM_ACTIVE_COLOR,
6208
+ neutral_outline: MENU_ITEM_ACTIVE_COLOR,
6209
+ danger: MENU_ITEM_ACTIVE_COLOR,
6210
+ danger_outline: MENU_ITEM_ACTIVE_COLOR,
6211
+ };
6212
+ const DROPDOWN_DISABLED_BACKGROUND = buttonTokens.bg.disabled;
6213
+ const DROPDOWN_DISABLED_CONTENT = buttonTokens.content.disabled;
6214
+ const DROPDOWN_DISABLED_BORDER = buttonTokens.border.disabled;
6215
+ const isDropdownButtonName = (value) => value in DROPDOWN_BUTTON_CONFIG;
6216
+ const getDropdownButtonPreset = (value) => getPresetName(value);
6217
+
6218
+ 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}`;
6219
+
6220
+ class SdDropdownButton extends BaseDropdownEvent {
6221
+ constructor(hostRef) {
6222
+ super();
6223
+ registerInstance(this, hostRef);
6224
+ this.click = createEvent(this, "sdClick");
6225
+ this.dropDownShow = createEvent(this, "sdDropDownShow");
6226
+ }
6227
+ get el() { return getElement(this); }
6228
+ name = 'primary_sm';
6229
+ label = '';
6230
+ items = [];
6231
+ disabled = false;
6232
+ isOpen = false;
6233
+ itemIndex = -1;
6234
+ triggerRef;
6235
+ menuRef;
6236
+ click;
6237
+ dropDownShow;
6238
+ handleOpenChange(isOpen) {
6239
+ this.onDropdownToggle(isOpen);
6240
+ this.dropDownShow.emit({ isOpen });
6241
+ if (!isOpen) {
6242
+ this.itemIndex = -1;
6243
+ }
6244
+ }
6245
+ componentWillLoad() {
6246
+ this.initializeEvent();
6247
+ }
6248
+ disconnectedCallback() {
6249
+ this.cleanupEvent();
6250
+ }
6251
+ async sdOpen() {
6252
+ if (this.disabled || this.items.length === 0)
6253
+ return;
6254
+ this.isOpen = true;
6255
+ }
6256
+ async sdClose() {
6257
+ this.closeDropdown();
6258
+ }
6259
+ closeDropdown = () => {
6260
+ this.isOpen = false;
6261
+ };
6262
+ handleDocumentClick(event) {
6263
+ const target = event.target;
6264
+ if (!target)
6265
+ return;
6266
+ if (this.el.contains(target))
6267
+ return;
6268
+ if (this.menuRef?.contains(target))
6269
+ return;
6270
+ this.closeDropdown();
6271
+ }
6272
+ handleDocumentKeydown(event) {
6273
+ if (!this.isOpen)
6274
+ return;
6275
+ const targetKeys = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];
6276
+ if (!targetKeys.includes(event.key))
6277
+ return;
6278
+ event.preventDefault();
6279
+ event.stopPropagation();
6280
+ switch (event.key) {
6281
+ case 'ArrowDown':
6282
+ this.itemIndex = this.getNextEnabledIndex(1);
6283
+ break;
6284
+ case 'ArrowUp':
6285
+ this.itemIndex = this.getNextEnabledIndex(-1);
6286
+ break;
6287
+ case 'Enter':
6288
+ if (this.itemIndex < 0)
6289
+ return;
6290
+ this.selectItem(this.items[this.itemIndex]);
6291
+ break;
6292
+ case 'Escape':
6293
+ this.closeDropdown();
6294
+ break;
6295
+ }
6296
+ }
6297
+ get resolvedConfig() {
6298
+ if (!isDropdownButtonName(this.name)) {
6299
+ throw new Error(`Invalid sd-dropdown-button name: ${this.name}`);
6300
+ }
6301
+ const config = DROPDOWN_BUTTON_CONFIG[this.name];
6302
+ const preset = getDropdownButtonPreset(this.name);
6303
+ return {
6304
+ config,
6305
+ preset,
6306
+ };
6057
6307
  }
6058
- isDateInRange(date) {
6059
- const [start, end] = this.dateRange;
6060
- // 1. 날짜 범위가 완전히 선택된 경우
6061
- if (start && end) {
6062
- return date >= start && date <= end;
6308
+ getNextEnabledIndex(direction) {
6309
+ const enabledIndices = this.items.reduce((acc, item, index) => {
6310
+ if (!item.disabled) {
6311
+ acc.push(index);
6312
+ }
6313
+ return acc;
6314
+ }, []);
6315
+ if (enabledIndices.length === 0) {
6316
+ return -1;
6063
6317
  }
6064
- // 2. hover 상태의 날짜 범위를 확인
6065
- if (!this.hoverDate || !start || end) {
6066
- return false;
6318
+ const currentPosition = enabledIndices.indexOf(this.itemIndex);
6319
+ if (currentPosition === -1) {
6320
+ return direction === 1 ? enabledIndices[0] : enabledIndices[enabledIndices.length - 1];
6067
6321
  }
6068
- // 3. dateRange[0]과 hoverDate를 기준으로 범위 계산
6069
- const [from, to] = start <= this.hoverDate ? [start, this.hoverDate] : [this.hoverDate, start];
6070
- return date >= from && date <= to;
6322
+ const nextPosition = (currentPosition + direction + enabledIndices.length) % enabledIndices.length;
6323
+ return enabledIndices[nextPosition];
6071
6324
  }
6072
- isDisabledDate(date) {
6073
- const [start, end] = this.dateRange;
6074
- if (this.maxRange && start && !end) {
6075
- const minDate = addDays(start, -this.maxRange);
6076
- const maxDate = addDays(start, this.maxRange);
6077
- return !(minDate <= date && date <= maxDate);
6325
+ toggleDropdown = (event) => {
6326
+ event.stopPropagation();
6327
+ if (this.disabled || this.items.length === 0) {
6328
+ return;
6078
6329
  }
6079
- if (!this.selectable || !this.selectable[0] || !this.selectable[1]) {
6080
- return false;
6330
+ this.isOpen = !this.isOpen;
6331
+ };
6332
+ selectItem(item, event) {
6333
+ event?.stopPropagation();
6334
+ if (!item || item.disabled) {
6335
+ return;
6081
6336
  }
6082
- return !(date >= this.selectable[0] && date <= this.selectable[1]);
6337
+ this.click.emit(item.value);
6338
+ this.closeDropdown();
6083
6339
  }
6084
- /* ----------------------------------
6085
- * Interaction
6086
- * ---------------------------------- */
6087
- openMenu() {
6088
- if (this.disabled)
6089
- return;
6090
- this.tempDateRange = [...this.dateRange];
6091
- this.resetCalendarByDateRange(this.dateRange);
6092
- this.isOpen = true;
6340
+ getTriggerClasses(preset, size, disabled, isOpen) {
6341
+ const classes = [
6342
+ 'sd-dropdown-button__trigger',
6343
+ `sd-dropdown-button__trigger--${preset}`,
6344
+ `sd-dropdown-button__trigger--${size}`,
6345
+ ];
6346
+ if (disabled) {
6347
+ classes.push('sd-dropdown-button__trigger--disabled');
6348
+ }
6349
+ if (isOpen) {
6350
+ classes.push('sd-dropdown-button__trigger--open');
6351
+ }
6352
+ return classes.join(' ');
6093
6353
  }
6094
- closeMenu = () => {
6095
- if (!this.dateRange[0] || !this.dateRange[1]) {
6096
- this.dateRange = [...this.tempDateRange];
6354
+ getMenuItemClasses(isActive, isDisabled) {
6355
+ const classes = ['sd-dropdown-button__menu-item'];
6356
+ if (isActive) {
6357
+ classes.push('sd-dropdown-button__menu-item--active');
6097
6358
  }
6098
- this.isOpen = false;
6099
- };
6100
- handleDateClick(index, day) {
6101
- this.setHoverDate('');
6102
- const selectedDate = this.formatDate(index, day);
6103
- if (!this.dateRange[0] || !!this.dateRange[1] || selectedDate < this.dateRange[0]) {
6104
- this.setDateRange([selectedDate, '']);
6105
- return; // 아직 완료 아님
6359
+ if (isDisabled) {
6360
+ classes.push('sd-dropdown-button__menu-item--disabled');
6106
6361
  }
6107
- const newRange = [this.dateRange[0], selectedDate];
6108
- this.setDateRange(newRange);
6109
- this.value = newRange;
6110
- this.update.emit?.(newRange);
6362
+ return classes.join(' ');
6111
6363
  }
6112
- handleDateHover(index, day) {
6113
- const hoverDate = this.formatDate(index, day);
6114
- this.setHoverDate(hoverDate);
6364
+ renderDropdown(preset) {
6365
+ if (!this.isOpen || !this.triggerRef)
6366
+ return null;
6367
+ 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: {
6368
+ '--sd-dropdown-button-menu-item-color': PRESET_MENU_ITEM_COLORS[preset],
6369
+ '--sd-dropdown-button-menu-item-active-bg': PRESET_MENU_ITEM_ACTIVE_BACKGROUNDS[preset],
6370
+ '--sd-dropdown-button-menu-item-active-color': PRESET_MENU_ITEM_ACTIVE_COLORS[preset],
6371
+ '--sd-dropdown-button-menu-border': PRESET_BORDER_COLORS[preset] === 'transparent'
6372
+ ? PRESET_DIVIDER_COLORS[preset]
6373
+ : PRESET_BORDER_COLORS[preset],
6374
+ } }, this.items.map((item, index) => {
6375
+ const isActive = this.itemIndex === index && !item.disabled;
6376
+ const iconColor = item.disabled
6377
+ ? DROPDOWN_DISABLED_CONTENT
6378
+ : isActive
6379
+ ? PRESET_MENU_ITEM_ACTIVE_COLORS[preset]
6380
+ : PRESET_MENU_ITEM_COLORS[preset];
6381
+ return (hAsync("button", { type: "button", role: "menuitem", class: this.getMenuItemClasses(isActive, Boolean(item.disabled)), disabled: item.disabled, onClick: event => this.selectItem(item, event), onMouseEnter: () => {
6382
+ if (!item.disabled) {
6383
+ this.itemIndex = index;
6384
+ }
6385
+ } }, 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 })));
6386
+ }))));
6115
6387
  }
6116
6388
  render() {
6117
- return (hAsync("div", { key: '96cd4e99ae976517e7b24c5ff3046af976adc5cb', class: {
6118
- 'sd-date-range-picker': true,
6119
- 'sd-date-range-picker--disabled': this.disabled,
6120
- } }, 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
6121
- ? `${this.prevYear}.${String(this.prevMonth).padStart(2, '0')}`
6122
- : `${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)) }))))))))))))));
6389
+ const { config, preset } = this.resolvedConfig;
6390
+ const chevronColor = this.disabled ? DROPDOWN_DISABLED_CONTENT : PRESET_CONTENT_COLORS[preset];
6391
+ 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: {
6392
+ '--sd-dropdown-button-min-width': `${DROPDOWN_BUTTON_MIN_WIDTHS[config.size]}px`,
6393
+ '--sd-dropdown-button-bg': config.color,
6394
+ '--sd-dropdown-button-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
6395
+ '--sd-dropdown-button-border': PRESET_BORDER_COLORS[preset],
6396
+ '--sd-dropdown-button-content': PRESET_CONTENT_COLORS[preset],
6397
+ '--sd-dropdown-button-divider': PRESET_DIVIDER_COLORS[preset],
6398
+ '--sd-dropdown-button-accent': BUTTON_FOCUS_RING_COLOR,
6399
+ '--sd-dropdown-button-disabled-bg': DROPDOWN_DISABLED_BACKGROUND,
6400
+ '--sd-dropdown-button-disabled-content': DROPDOWN_DISABLED_CONTENT,
6401
+ '--sd-dropdown-button-disabled-border': DROPDOWN_DISABLED_BORDER,
6402
+ } }, 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)));
6123
6403
  }
6124
6404
  static get watchers() { return {
6125
- "value": [{
6126
- "onValueChange": 0
6405
+ "isOpen": [{
6406
+ "handleOpenChange": 0
6127
6407
  }]
6128
6408
  }; }
6129
- static get style() { return sdDateRangePickerCss(); }
6409
+ static get style() { return sdDropdownButtonCss(); }
6130
6410
  static get cmpMeta() { return {
6131
- "$flags$": 514,
6132
- "$tagName$": "sd-date-range-picker",
6411
+ "$flags$": 512,
6412
+ "$tagName$": "sd-dropdown-button",
6133
6413
  "$members$": {
6134
- "value": [1040],
6414
+ "name": [1],
6135
6415
  "label": [1],
6136
- "selectable": [16],
6137
- "maxRange": [2, "max-range"],
6416
+ "items": [16],
6138
6417
  "disabled": [4],
6139
- "placeholder": [1],
6140
6418
  "isOpen": [32],
6141
- "dateRange": [32],
6142
- "hoverDate": [32],
6143
- "prevYear": [32],
6144
- "prevMonth": [32]
6419
+ "itemIndex": [32],
6420
+ "sdOpen": [64],
6421
+ "sdClose": [64]
6145
6422
  },
6146
6423
  "$listeners$": undefined,
6147
6424
  "$lazyBundleId$": "-",
@@ -6269,15 +6546,15 @@ class SdField {
6269
6546
  }
6270
6547
  }
6271
6548
  render() {
6272
- return (hAsync("div", { key: '3c69abe493110b5665795706a9ae0e525f213aca', class: {
6549
+ return (hAsync("div", { key: '9ed0e615761d5c76dff1e95318b131bde22cd376', class: {
6273
6550
  'sd-field': true,
6274
6551
  'sd-field--has-label': !!this.label,
6275
6552
  'sd-field--has-label-inside': !!this.label && this.insideLabel,
6276
6553
  [this.fieldStatus]: !!this.fieldStatus,
6277
- } }, hAsync("div", { key: 'decc6821b7172f5ecc2343472014c08674725904', class: "sd-field__wrapper" }, this.renderLabel(this.label), hAsync("div", { key: 'ca5e93f049db10ecaaaab091fdf394ac4b55e292', class: {
6554
+ } }, hAsync("div", { key: '6d051479c9874f3c765d50096db80c73c4fc461b', class: "sd-field__wrapper" }, this.renderLabel(this.label), hAsync("div", { key: '64ea18d481f0ad689ed984cd40837717fb37a751', class: {
6278
6555
  'sd-field__control': true,
6279
6556
  'sd-field__control--label-inside ': !!this.label && this.insideLabel,
6280
- } }, hAsync("slot", { key: '7ee38983d32985f4b4a035830bcdca0e14b2cf71' }))), this.errorMsg && hAsync("div", { key: 'c2d6ef860ced48657b906806f2618594b094ea79', class: "sd-field__error-message" }, this.errorMsg)));
6557
+ } }, hAsync("slot", { key: '8e043b3e476e0d574612c892f6c8c0bca28c117f' }))), this.errorMsg && hAsync("div", { key: '22d42bacdbdfe85dbe08395d21e59a06946986f5', class: "sd-field__error-message" }, this.errorMsg)));
6281
6558
  }
6282
6559
  renderLabel(label) {
6283
6560
  if (!label)
@@ -6411,15 +6688,15 @@ class SdFilePicker {
6411
6688
  render() {
6412
6689
  const hasFiles = this.hasFiles();
6413
6690
  const displayText = this.getDisplayText();
6414
- return (hAsync("div", { key: '659ab6f0e1fedadfbef1838def391aab28ae6e62', class: {
6691
+ return (hAsync("div", { key: '8d0b3002090064a062df3bc21e54fb8011a520ed', class: {
6415
6692
  'sd-file-picker': true,
6416
6693
  [this.getStatusClass()]: true,
6417
6694
  'sd-file-picker--inline': this.inline,
6418
- }, 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: {
6695
+ }, 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: {
6419
6696
  'sd-file-picker__text': true,
6420
6697
  'sd-file-picker__text--placeholder': !hasFiles,
6421
6698
  'sd-file-picker__text--active': hasFiles,
6422
- } }, 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))));
6699
+ } }, 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))));
6423
6700
  }
6424
6701
  static get watchers() { return {
6425
6702
  "value": [{
@@ -6598,7 +6875,7 @@ class SdFloatingPopover {
6598
6875
  this.close.emit();
6599
6876
  }
6600
6877
  render() {
6601
- return hAsync("slot", { key: '2f33d335a7cf00ace576aed610a0e77d711a5b10' });
6878
+ return hAsync("slot", { key: 'fe02da5ce55072c8fa313e467967f2a1c18f86bb' });
6602
6879
  }
6603
6880
  static get style() { return sdFloatingPortalCss(); }
6604
6881
  static get cmpMeta() { return {
@@ -6755,9 +7032,9 @@ class SdGuide {
6755
7032
  };
6756
7033
  render() {
6757
7034
  const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
6758
- return (hAsync("div", { key: '2a7d3d040d3fbe7d0c22afc62d67a848fbae67d9', class: "sd-guide", style: {
7035
+ return (hAsync("div", { key: '69dc81c8fe0c5843e86709e72f0cdf3ecaf8c52a', class: "sd-guide", style: {
6759
7036
  '--sd-guide-color': GUIDE_ICON[this.type].color,
6760
- } }, 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))))))));
7037
+ } }, 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))))))));
6761
7038
  }
6762
7039
  // 현재 2depth까지만 스타일 적용
6763
7040
  renderListItem(message, depth = 0) {
@@ -8802,7 +9079,7 @@ class SdIcon {
8802
9079
  }
8803
9080
  render() {
8804
9081
  const IconComponent = Icons[this.name]?.[this.size];
8805
- return (hAsync("i", { key: '1d6a48769c99bbfe9576016e24766b8c82ab570e', class: this.getIconClasses(), style: this.iconStyle }, hAsync(IconComponent, { key: '3fdb4195ef13656e79b402a4eae2fb0210fb3a97', color: this.resolvedColor })));
9082
+ return (hAsync("i", { key: '69b8654e2fd745282c1878306a5c464ba0995468', class: this.getIconClasses(), style: this.iconStyle }, hAsync(IconComponent, { key: '64b00309d5ad7787c4fbf2c200719fd74062ccbd', color: this.resolvedColor })));
8806
9083
  }
8807
9084
  static get style() { return sdIconCss(); }
8808
9085
  static get cmpMeta() { return {
@@ -8927,7 +9204,7 @@ class SdInput {
8927
9204
  }
8928
9205
  };
8929
9206
  render() {
8930
- 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 () => {
9207
+ 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 () => {
8931
9208
  this.internalValue = '';
8932
9209
  await this.formField?.sdValidate();
8933
9210
  } })))));
@@ -8990,7 +9267,7 @@ class SdLoadingSpinner {
8990
9267
  return resolveColor(this.color);
8991
9268
  }
8992
9269
  render() {
8993
- 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" }))));
9270
+ 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" }))));
8994
9271
  }
8995
9272
  static get style() { return sdLoadingSpinnerCss(); }
8996
9273
  static get cmpMeta() { return {
@@ -9312,17 +9589,17 @@ class SdNumberInput {
9312
9589
  const inputStyles = {
9313
9590
  textAlign: this.useButton ? 'center' : 'right',
9314
9591
  };
9315
- 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: {
9592
+ 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: {
9316
9593
  'sd-number-input': true,
9317
9594
  [this.getInputStatus()]: true,
9318
9595
  'sd-number-input--with-buttons': this.useButton,
9319
- }, 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: {
9596
+ }, 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: {
9320
9597
  'sd-number-input__button': true,
9321
9598
  'sd-number-input__button--decrement': true,
9322
- }, 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: {
9599
+ }, 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: {
9323
9600
  'sd-number-input__button': true,
9324
9601
  'sd-number-input__button--increment': true,
9325
- }, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: 'b945a1561978dc4bba1868fa57652e94a6bcfc34', name: "add", size: 12, color: this.isIncrementDisabled() ? 'grey_45' : 'brilliantblue_70' })))))));
9602
+ }, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: '971098976698154e8e644a93265dc746177c2ce0', name: "add", size: 12, color: this.isIncrementDisabled() ? 'grey_45' : 'brilliantblue_70' })))))));
9326
9603
  }
9327
9604
  static get watchers() { return {
9328
9605
  "value": [{
@@ -9446,12 +9723,12 @@ class SdPagination {
9446
9723
  }
9447
9724
  }
9448
9725
  render() {
9449
- 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: {
9726
+ 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: {
9450
9727
  'pagination-btn': true,
9451
9728
  'pagination-btn--selected': this.currentPage === n,
9452
9729
  }, disabled: this.currentPage === n, style: {
9453
9730
  '--pagination-btn-width': `${this.buttonWidth}px`,
9454
- }, onClick: () => this.handlePageChange(n) }, n)))), hAsync("div", { key: '2be11ae773c0bce71ecaf53f99daff3f5b2d567d', class: "append-btns" }, this.renderNextButtons())));
9731
+ }, onClick: () => this.handlePageChange(n) }, n)))), hAsync("div", { key: 'c2ef87605487622bed06cac8d13d180f4af23e76', class: "append-btns" }, this.renderNextButtons())));
9455
9732
  }
9456
9733
  static get style() { return sdPaginationCss(); }
9457
9734
  static get cmpMeta() { return {
@@ -9505,11 +9782,11 @@ class SdPopover {
9505
9782
  this.showPopover = false;
9506
9783
  };
9507
9784
  render() {
9508
- 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: {
9785
+ 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: {
9509
9786
  'sd-floating-menu': true,
9510
9787
  [`sd-floating-menu--${this.placement}`]: true,
9511
9788
  [this.menuClass]: !!this.menuClass,
9512
- } }, 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" }))))))));
9789
+ } }, 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" }))))))));
9513
9790
  }
9514
9791
  static get watchers() { return {
9515
9792
  "show": [{
@@ -9560,25 +9837,31 @@ class SdPortal {
9560
9837
  wrapper;
9561
9838
  rafId;
9562
9839
  isInsideClick = false;
9840
+ handleObservedScroll = () => this.updatePosition();
9563
9841
  resizeObserver;
9564
9842
  mutationObserver;
9843
+ scrollParents = [];
9844
+ isObserved = false;
9845
+ handleOpenChange() {
9846
+ this.syncPortalState();
9847
+ }
9565
9848
  componentDidLoad() {
9566
9849
  this.container = this.resolveContainer();
9567
- this.createWrapper();
9568
- this.moveSlotContent();
9569
- this.updatePosition();
9570
- this.observeParent();
9850
+ this.syncPortalState();
9571
9851
  }
9572
9852
  componentDidRender() {
9573
- if (!this.wrapper)
9574
- return;
9575
- this.wrapper.style.display = this.open ? 'block' : 'none';
9576
- if (this.open)
9577
- this.updatePosition();
9853
+ this.syncPortalState();
9578
9854
  }
9579
9855
  disconnectedCallback() {
9580
9856
  this.unobserveParent();
9581
- this.wrapper?.remove();
9857
+ if (this.wrapper?.parentNode) {
9858
+ try {
9859
+ this.wrapper.parentNode.removeChild(this.wrapper);
9860
+ }
9861
+ catch {
9862
+ // Stencil spec mock DOM can already detach the wrapper before this callback runs.
9863
+ }
9864
+ }
9582
9865
  }
9583
9866
  resolveContainer() {
9584
9867
  const el = typeof this.to === 'string' ? document.querySelector(this.to) : this.to;
@@ -9593,6 +9876,26 @@ class SdPortal {
9593
9876
  });
9594
9877
  this.container.appendChild(this.wrapper);
9595
9878
  }
9879
+ ensureWrapper() {
9880
+ if (this.wrapper)
9881
+ return;
9882
+ this.container ||= this.resolveContainer();
9883
+ this.createWrapper();
9884
+ this.moveSlotContent();
9885
+ }
9886
+ syncPortalState() {
9887
+ if (!this.open) {
9888
+ this.wrapper && (this.wrapper.style.display = 'none');
9889
+ this.unobserveParent();
9890
+ return;
9891
+ }
9892
+ this.ensureWrapper();
9893
+ if (!this.wrapper)
9894
+ return;
9895
+ this.wrapper.style.display = 'block';
9896
+ this.observeParent();
9897
+ this.updatePosition();
9898
+ }
9596
9899
  moveSlotContent() {
9597
9900
  if (!this.wrapper)
9598
9901
  return;
@@ -9634,19 +9937,57 @@ class SdPortal {
9634
9937
  }
9635
9938
  // parentRef의 이동 / 크기변경 감지
9636
9939
  observeParent() {
9637
- if (!this.parentRef)
9940
+ if (!this.parentRef || this.isObserved)
9638
9941
  return;
9639
- this.resizeObserver = new ResizeObserver(() => this.updatePosition());
9640
- this.resizeObserver.observe(this.parentRef);
9641
- this.mutationObserver = new MutationObserver(() => this.updatePosition());
9642
- this.mutationObserver.observe(document.body, {
9643
- childList: true,
9644
- subtree: true,
9645
- });
9942
+ this.observeScrollParents(this.parentRef);
9943
+ if (typeof ResizeObserver !== 'undefined') {
9944
+ this.resizeObserver = new ResizeObserver(() => this.updatePosition());
9945
+ this.resizeObserver.observe(this.parentRef);
9946
+ }
9947
+ if (typeof MutationObserver !== 'undefined') {
9948
+ this.mutationObserver = new MutationObserver(() => this.updatePosition());
9949
+ this.mutationObserver.observe(document.body, {
9950
+ childList: true,
9951
+ subtree: true,
9952
+ });
9953
+ }
9954
+ this.isObserved = true;
9646
9955
  }
9647
9956
  unobserveParent() {
9957
+ if (!this.isObserved)
9958
+ return;
9959
+ this.unobserveScrollParents();
9648
9960
  this.resizeObserver?.disconnect();
9961
+ this.resizeObserver = undefined;
9649
9962
  this.mutationObserver?.disconnect();
9963
+ this.mutationObserver = undefined;
9964
+ this.isObserved = false;
9965
+ }
9966
+ observeScrollParents(element) {
9967
+ const nextScrollParents = this.getScrollParents(element);
9968
+ nextScrollParents.forEach(parent => {
9969
+ parent.addEventListener('scroll', this.handleObservedScroll, { passive: true });
9970
+ });
9971
+ this.scrollParents = nextScrollParents;
9972
+ }
9973
+ unobserveScrollParents() {
9974
+ this.scrollParents.forEach(parent => {
9975
+ parent.removeEventListener('scroll', this.handleObservedScroll);
9976
+ });
9977
+ this.scrollParents = [];
9978
+ }
9979
+ getScrollParents(element) {
9980
+ const scrollParents = [];
9981
+ let currentElement = element.parentElement;
9982
+ while (currentElement) {
9983
+ const { overflow, overflowX, overflowY } = getComputedStyle(currentElement);
9984
+ const isScrollable = [overflow, overflowX, overflowY].some(value => /(auto|scroll|overlay)/.test(value));
9985
+ if (isScrollable) {
9986
+ scrollParents.push(currentElement);
9987
+ }
9988
+ currentElement = currentElement.parentElement;
9989
+ }
9990
+ return scrollParents;
9650
9991
  }
9651
9992
  // 외부 클릭 감지
9652
9993
  handleMouseDown(e) {
@@ -9662,8 +10003,13 @@ class SdPortal {
9662
10003
  this.close.emit();
9663
10004
  }
9664
10005
  render() {
9665
- return hAsync("slot", { key: 'ba2bf5df16f9bef0acef1ac8a08b090a23d02bc7' });
10006
+ return hAsync("slot", { key: 'ceaa6bed28e3b1bd1a539091434fd7acee6a0e4b' });
9666
10007
  }
10008
+ static get watchers() { return {
10009
+ "open": [{
10010
+ "handleOpenChange": 0
10011
+ }]
10012
+ }; }
9667
10013
  static get cmpMeta() { return {
9668
10014
  "$flags$": 772,
9669
10015
  "$tagName$": "sd-portal",
@@ -9719,10 +10065,10 @@ class SdProgress {
9719
10065
  return this.statusColor[this.progressStatus];
9720
10066
  }
9721
10067
  render() {
9722
- return (hAsync("div", { key: '43da9dac67e760bfe53b8db11c27eef7ef0d8b3b', style: {
10068
+ return (hAsync("div", { key: 'a9b7c4a0bb44f7455ea21f632d3ec8edbcc97522', style: {
9723
10069
  '--progress-color': this.progressColor,
9724
10070
  '--progress-percentage': `${this.progressPercentage}%`,
9725
- } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && hAsync("div", { key: 'af4b1c44f655546fede8ad548bddc6afb7810d2b', class: "sd-progress__label" }, this.label)));
10071
+ } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && hAsync("div", { key: 'ff0dfde8b43315883d2e4f17aa5e426fb6bf54ee', class: "sd-progress__label" }, this.label)));
9726
10072
  }
9727
10073
  renderBarProgress() {
9728
10074
  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, "%")));
@@ -9920,94 +10266,6 @@ class SdRadioGroup {
9920
10266
  }; }
9921
10267
  }
9922
10268
 
9923
- class DropdownManager {
9924
- static instance;
9925
- activeDropdowns = new Set();
9926
- static getInstance() {
9927
- if (!DropdownManager.instance) {
9928
- DropdownManager.instance = new DropdownManager();
9929
- }
9930
- return DropdownManager.instance;
9931
- }
9932
- register(component) {
9933
- this.activeDropdowns.add(component);
9934
- }
9935
- unregister(component) {
9936
- this.activeDropdowns.delete(component);
9937
- }
9938
- openDropdown(targetComponent) {
9939
- // 다른 모든 드롭다운 닫기
9940
- this.activeDropdowns.forEach(component => {
9941
- if (component !== targetComponent && component.isOpen) {
9942
- component.closeDropdown();
9943
- }
9944
- });
9945
- }
9946
- closeAllDropdowns() {
9947
- this.activeDropdowns.forEach(component => {
9948
- if (component.isOpen) {
9949
- component.closeDropdown();
9950
- }
9951
- });
9952
- }
9953
- }
9954
- const dropdownManager = DropdownManager.getInstance();
9955
-
9956
- // 여러 select를 동시에 사용할때에 이벤트 리스너의 등록이 충돌나는 문제를 해결하기 위한 Base class
9957
- // 각 드롭다운 컴포넌트는 이 클래스를 상속 및 구현 필요
9958
- // 기본적으로 click, keydown 추상 이벤트를 구현해야하고
9959
- // isOpen가 true일때에만 이벤트 등록 그외에는 이벤트 클리닝을 수행
9960
- // 추후 필요한 이벤트는 이곳에 추가하여 추가 구현 후 사용
9961
- // 별도로 드롭다운 전용의 Base class가 아닌 공통적으로 사용할 수 있는 Base class가 필요할지 검토 필요
9962
- class BaseDropdownEvent {
9963
- documentClickHandler;
9964
- documentKeydownHandler;
9965
- // 컴포넌트 생명주기에서 호출할 메서드들
9966
- initializeEvent() {
9967
- dropdownManager.register(this);
9968
- this.initializeEventHandlers();
9969
- }
9970
- cleanupEvent() {
9971
- dropdownManager.unregister(this);
9972
- this.cleanup();
9973
- }
9974
- initializeEventHandlers() {
9975
- this.documentClickHandler = (event) => this.handleDocumentClick(event);
9976
- this.documentKeydownHandler = (event) => this.handleDocumentKeydown(event);
9977
- }
9978
- addGlobalEventListeners() {
9979
- if (this.documentClickHandler) {
9980
- document.addEventListener('click', this.documentClickHandler);
9981
- }
9982
- if (this.documentKeydownHandler) {
9983
- document.addEventListener('keydown', this.documentKeydownHandler);
9984
- }
9985
- }
9986
- removeGlobalEventListeners() {
9987
- if (this.documentClickHandler) {
9988
- document.removeEventListener('click', this.documentClickHandler);
9989
- }
9990
- if (this.documentKeydownHandler) {
9991
- document.removeEventListener('keydown', this.documentKeydownHandler);
9992
- }
9993
- }
9994
- onDropdownToggle(isOpen) {
9995
- if (isOpen && !this.disabled) {
9996
- dropdownManager.openDropdown(this);
9997
- this.addGlobalEventListeners();
9998
- }
9999
- else {
10000
- this.removeGlobalEventListeners();
10001
- }
10002
- }
10003
- cleanup() {
10004
- this.removeGlobalEventListeners();
10005
- }
10006
- closeDropdown() {
10007
- this.isOpen = false;
10008
- }
10009
- }
10010
-
10011
10269
  class SelectKeyboardNavigation {
10012
10270
  isSearchable;
10013
10271
  filteredOptions;
@@ -10389,10 +10647,10 @@ class SdSelectDropdown {
10389
10647
  this.isScrolled = scrollTop > 0;
10390
10648
  };
10391
10649
  render() {
10392
- return (hAsync("div", { key: 'ff55e2e133114accc2641a0025bdcf551eda3511', class: {
10650
+ return (hAsync("div", { key: '5e56cf091a3c3d510bf932933c33a8c3d85e23ef', class: {
10393
10651
  'sd-select-dropdown': true,
10394
10652
  'sd-select-dropdown--ready': this.isDropdownReady,
10395
- }, 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)))));
10653
+ }, 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)))));
10396
10654
  }
10397
10655
  static get watchers() { return {
10398
10656
  "filteredOptions": [{
@@ -10578,7 +10836,7 @@ class SdSelectMultiple extends BaseDropdownEvent {
10578
10836
  this.handleOptionSelection(option);
10579
10837
  };
10580
10838
  render() {
10581
- 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: {
10839
+ 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: {
10582
10840
  'sd-select-multiple': true,
10583
10841
  'sd-select-multiple--open': this.isOpen,
10584
10842
  'sd-select-multiple--disabled': this.disabled,
@@ -11171,7 +11429,7 @@ class SdSelectOption {
11171
11429
  }
11172
11430
  };
11173
11431
  render() {
11174
- return (hAsync("div", { key: 'a4fcca24b0bdde4f4665585c6cede84bd3b64d59', class: {
11432
+ return (hAsync("div", { key: '2f88e7ffe5bce12bc3f352d47d0ebed51a1c69ac', class: {
11175
11433
  'sd-select__option': true,
11176
11434
  'sd-select__option--selected': this.isSelected,
11177
11435
  'sd-select__option--disabled': !!this.option.disabled,
@@ -11257,7 +11515,7 @@ class SdSelectOptionGroup {
11257
11515
  }
11258
11516
  };
11259
11517
  render() {
11260
- return (hAsync("div", { key: '8e88aacd2c3122a563fcf78bcbe9731b6a29d8c5', class: {
11518
+ return (hAsync("div", { key: '7581caff61d1257d653b6f58b8d76c21225b3cc5', class: {
11261
11519
  'sd-select__option-group': true,
11262
11520
  'sd-select__option-group--selected': !!this.isSelected,
11263
11521
  'sd-select__option-group--disabled': !!this.option.disabled,
@@ -11266,10 +11524,10 @@ class SdSelectOptionGroup {
11266
11524
  'sd-select__option-group--group': this.option.type === 'group',
11267
11525
  'sd-select__option-group--subgroup': this.option.type === 'subgroup',
11268
11526
  'sd-select__option-group--item': this.option.type === 'item',
11269
- }, 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 => {
11527
+ }, 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 => {
11270
11528
  e.preventDefault();
11271
11529
  this.handleClick(this.option, this.isSelected, e);
11272
- } })), 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})`)))));
11530
+ } })), 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})`)))));
11273
11531
  }
11274
11532
  static get style() { return sdSelectOptionGroupCss(); }
11275
11533
  static get cmpMeta() { return {
@@ -11318,17 +11576,17 @@ class SdSelectSearchInput {
11318
11576
  input?.focus({ preventScroll: true });
11319
11577
  }
11320
11578
  render() {
11321
- return (hAsync("div", { key: 'b19a029ef82d876c984c1f827d7a0f29bb823f5d', class: {
11579
+ return (hAsync("div", { key: 'da5faa18fac3c974dcfef4050efe580edcb1bb42', class: {
11322
11580
  'sd-select-search-input': true,
11323
11581
  'sd-select-search-input--scrolled': !!this.isScrolled,
11324
- }, 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 => {
11582
+ }, 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 => {
11325
11583
  this.searchInput.emit(String(event?.detail));
11326
11584
  }, onSdFocus: () => {
11327
11585
  this.searchFocus.emit();
11328
11586
  }, onKeyDown: event => {
11329
11587
  if (event.code === 'Enter')
11330
11588
  event.stopPropagation();
11331
- } }, hAsync("sd-icon", { key: '2b38a07cbc0bb0d7dd020ece45f18bdff4c262e5', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
11589
+ } }, hAsync("sd-icon", { key: '478a6adda3b53aabf614028bd57a8f987f93cdb6', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
11332
11590
  }
11333
11591
  static get style() { return sdSelectSearchInputCss(); }
11334
11592
  static get cmpMeta() { return {
@@ -12240,16 +12498,14 @@ class SdTabs {
12240
12498
  }
12241
12499
  return classes.join(' ');
12242
12500
  }
12243
- getBadgeColors(tab) {
12244
- if (this.isTabSelected(tab)) {
12245
- return { bgColor: '#E6F1FF', textColor: '#0075FF' };
12246
- }
12247
- return { bgColor: '#E5E5E5', textColor: '#737373' };
12501
+ getBadgeName(tab) {
12502
+ const color = this.isTabSelected(tab) ? 'blue' : 'grey';
12503
+ return `square_${this.size}_${color}`;
12248
12504
  }
12249
12505
  render() {
12250
- return (hAsync("div", { key: '1b63c97e7b40d35ceadcc07da1087ee54d3c5f8f', class: this.getContainerClasses() }, this.tabs.map((tab, index) => {
12251
- const badgeColors = this.getBadgeColors(tab);
12252
- 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 }))));
12506
+ return (hAsync("div", { key: 'bc86d4c1775bed6c2d323c9446e2c50631afed7c', class: this.getContainerClasses() }, this.tabs.map((tab, index) => {
12507
+ const badgeName = this.getBadgeName(tab);
12508
+ 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() }))));
12253
12509
  })));
12254
12510
  }
12255
12511
  static get watchers() { return {
@@ -12273,65 +12529,121 @@ class SdTabs {
12273
12529
  }; }
12274
12530
  }
12275
12531
 
12276
- 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}`;
12277
-
12278
- const TAG_COLORS = {
12279
- grey: 'bg-grey_20 text-grey_70',
12280
- red: 'bg-red_15 text-red_70',
12281
- orange: 'bg-orange_10 text-orange_65',
12282
- yellow: 'bg-yellow_10 text-yellow_70',
12283
- green: 'bg-green_15 text-green_75',
12284
- blue: 'bg-brilliantblue_20 text-brilliantblue_75',
12285
- darkblue: 'bg-oceanblue_15 text-oceanblue_70',
12286
- indigo: 'bg-brilliantblue_10 text-brilliantblue_85',
12532
+ const TAG_SHAPES = ['square', 'pill'];
12533
+ const TAG_SIZES = ['sm', 'md', 'lg'];
12534
+ const TAG_COLORS = [
12535
+ 'grey',
12536
+ 'red',
12537
+ 'orange',
12538
+ 'yellow',
12539
+ 'green',
12540
+ 'blue',
12541
+ 'darkblue',
12542
+ 'indigo',
12543
+ ];
12544
+ const TAG_COLOR_CONFIG = {
12545
+ grey: { background: '#EEEEEE', content: '#737373', icon: '#737373' },
12546
+ red: { background: '#FCEFEF', content: '#FB4444', icon: '#FB4444' },
12547
+ orange: { background: '#FEF1EA', content: '#FF6B00', icon: '#FF6B00' },
12548
+ yellow: { background: '#FFF7DD', content: '#916C0D', icon: '#CA9611' },
12549
+ green: { background: '#E8F9EF', content: '#00973C', icon: '#12B553' },
12550
+ blue: { background: '#E6F1FF', content: '#0075FF', icon: '#0075FF' },
12551
+ darkblue: { background: '#EAF5FE', content: '#006AC1', icon: '#006AC1' },
12552
+ indigo: { background: '#EFF6FF', content: '#004290', icon: '#004290' },
12553
+ };
12554
+ const SQUARE_SIZE_CONFIG = {
12555
+ sm: {
12556
+ height: '20px',
12557
+ paddingX: '6px',
12558
+ gap: '4px',
12559
+ fontSize: '11px',
12560
+ fontWeight: '500',
12561
+ iconSize: 12,
12562
+ radius: '4px',
12563
+ },
12564
+ md: {
12565
+ height: '24px',
12566
+ paddingX: '8px',
12567
+ gap: '4px',
12568
+ fontSize: '12px',
12569
+ fontWeight: '700',
12570
+ iconSize: 16,
12571
+ radius: '4px',
12572
+ },
12573
+ lg: {
12574
+ height: '28px',
12575
+ paddingX: '10px',
12576
+ gap: '4px',
12577
+ fontSize: '14px',
12578
+ fontWeight: '700',
12579
+ iconSize: 16,
12580
+ radius: '5px',
12581
+ },
12582
+ };
12583
+ const PILL_SIZE_CONFIG = {
12584
+ sm: { ...SQUARE_SIZE_CONFIG.sm, radius: '999px' },
12585
+ md: { ...SQUARE_SIZE_CONFIG.md, radius: '999px' },
12586
+ lg: { ...SQUARE_SIZE_CONFIG.lg, radius: '999px' },
12287
12587
  };
12588
+ const TAG_CONFIG = Object.fromEntries(TAG_SHAPES.flatMap(shape => TAG_SIZES.flatMap(size => TAG_COLORS.map(color => {
12589
+ const sizeConfig = shape === 'square' ? SQUARE_SIZE_CONFIG[size] : PILL_SIZE_CONFIG[size];
12590
+ return [
12591
+ `${shape}_${size}_${color}`,
12592
+ {
12593
+ shape,
12594
+ size,
12595
+ color,
12596
+ ...sizeConfig,
12597
+ ...TAG_COLOR_CONFIG[color],
12598
+ },
12599
+ ];
12600
+ }))));
12601
+ const isTagName = (value) => Object.prototype.hasOwnProperty.call(TAG_CONFIG, value);
12602
+
12603
+ 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}`;
12604
+
12288
12605
  class SdTag {
12289
12606
  constructor(hostRef) {
12290
12607
  registerInstance(this, hostRef);
12291
12608
  }
12292
- get el() { return getElement(this); }
12293
- size = 'md';
12294
- color = 'grey';
12295
- rounded = false;
12609
+ name = 'square_md_grey';
12296
12610
  label = '';
12297
- bgColor;
12298
- textColor;
12299
- getTagClasses() {
12300
- const classes = ['sd-tag', `sd-tag--${this.size}`];
12301
- if (this.rounded) {
12302
- classes.push('sd-tag--rounded');
12303
- }
12304
- if (this.color && !this.bgColor && !this.textColor) {
12305
- classes.push(TAG_COLORS[this.color]);
12306
- }
12307
- if (this.bgColor || this.textColor) {
12308
- classes.push('sd-tag--custom-color');
12611
+ icon;
12612
+ isLeft = true;
12613
+ get resolvedConfig() {
12614
+ if (!isTagName(this.name)) {
12615
+ throw new Error(`Invalid sd-tag name: ${this.name}`);
12309
12616
  }
12310
- return classes.join(' ');
12617
+ return TAG_CONFIG[this.name];
12311
12618
  }
12312
- renderContent() {
12313
- return [
12314
- hAsync("span", { class: "sd-tag__content" }, hAsync("slot", null, this.label)),
12315
- ];
12619
+ renderIcon(color, size) {
12620
+ if (!this.icon)
12621
+ return null;
12622
+ return hAsync("sd-icon", { class: "sd-tag__icon", name: this.icon, size: size, color: color });
12316
12623
  }
12317
12624
  render() {
12318
- const tagClasses = this.getTagClasses();
12319
- return (hAsync("span", { key: '9745415753fe657bf5e7e5ca9eb6e02f8c953bfd', class: tagClasses, style: {
12320
- '--tag-bg-color': this.bgColor,
12321
- '--tag-text-color': this.textColor,
12322
- }, "aria-label": this.label || 'tag' }, this.renderContent()));
12625
+ const config = this.resolvedConfig;
12626
+ const iconNode = this.renderIcon(config.icon, config.iconSize);
12627
+ return (hAsync("span", { key: '5f9ee005b146997dd13bb3e6a06680ff8574bd14', class: "sd-tag", style: {
12628
+ '--sd-tag-background': config.background,
12629
+ '--sd-tag-content': config.content,
12630
+ '--sd-tag-height': config.height,
12631
+ '--sd-tag-padding-x': config.paddingX,
12632
+ '--sd-tag-gap': config.gap,
12633
+ '--sd-tag-font-size': config.fontSize,
12634
+ '--sd-tag-font-weight': config.fontWeight,
12635
+ '--sd-tag-radius': config.radius,
12636
+ }, "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));
12323
12637
  }
12324
12638
  static get style() { return sdTagCss(); }
12325
12639
  static get cmpMeta() { return {
12326
- "$flags$": 777,
12640
+ "$flags$": 512,
12327
12641
  "$tagName$": "sd-tag",
12328
12642
  "$members$": {
12329
- "size": [1],
12330
- "color": [1],
12331
- "rounded": [4],
12643
+ "name": [1],
12332
12644
  "label": [1],
12333
- "bgColor": [1, "bg-color"],
12334
- "textColor": [1, "text-color"]
12645
+ "icon": [1],
12646
+ "isLeft": [4, "is-left"]
12335
12647
  },
12336
12648
  "$listeners$": undefined,
12337
12649
  "$lazyBundleId$": "-",
@@ -12423,10 +12735,10 @@ class SdTextarea {
12423
12735
  }
12424
12736
  render() {
12425
12737
  const maxLengthCounter = this.getMaxLengthCounter();
12426
- return (hAsync("div", { key: '888d11be57629e83e1215daddab63351a323672f', class: {
12738
+ return (hAsync("div", { key: '5f087de7fd28e3f5fa3315c37b8974e7f5878149', class: {
12427
12739
  'sd-textarea': true,
12428
12740
  [this.getTextareaStatus()]: true,
12429
- }, 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)))));
12741
+ }, 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)))));
12430
12742
  }
12431
12743
  static get watchers() { return {
12432
12744
  "value": [{
@@ -12507,10 +12819,10 @@ class SdToast {
12507
12819
  background: resolveColor(colorTokens.background),
12508
12820
  text: resolveColor(colorTokens.text),
12509
12821
  };
12510
- return (hAsync("div", { key: '8118f67a55a3080ea91ffdfbd929bbe3464ab044', style: {
12822
+ return (hAsync("div", { key: '16579a21c0eec78e609b0cf82fcf2d040b8b3388', style: {
12511
12823
  '--sd-toast-bg': colors.background,
12512
12824
  '--sd-toast-text': colors.text,
12513
- } }, 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 }))))));
12825
+ } }, 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 }))))));
12514
12826
  }
12515
12827
  static get style() { return sdToastCss(); }
12516
12828
  static get cmpMeta() { return {
@@ -12567,7 +12879,7 @@ class SdToggle {
12567
12879
  this.change.emit(newValue);
12568
12880
  };
12569
12881
  render() {
12570
- 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" }))));
12882
+ 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" }))));
12571
12883
  }
12572
12884
  static get style() { return sdToggleCss(); }
12573
12885
  static get cmpMeta() { return {
@@ -12623,7 +12935,7 @@ class SdToggleButton {
12623
12935
  this.change.emit(newValue);
12624
12936
  };
12625
12937
  render() {
12626
- 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 })));
12938
+ 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 })));
12627
12939
  }
12628
12940
  static get style() { return sdToggleButtonCss(); }
12629
12941
  static get cmpMeta() { return {
@@ -12723,11 +13035,13 @@ class SdTooltip {
12723
13035
  registerComponents([
12724
13036
  SdBadge,
12725
13037
  SdButton,
13038
+ SdButtonV2,
12726
13039
  SdCard,
12727
13040
  SdCheckbox,
12728
13041
  SdDateBox,
12729
13042
  SdDatePicker,
12730
13043
  SdDateRangePicker,
13044
+ SdDropdownButton,
12731
13045
  SdField,
12732
13046
  SdFilePicker,
12733
13047
  SdFloatingPopover,