ranui 0.1.10-alpha.7 → 0.2.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (326) hide show
  1. package/README.md +397 -0
  2. package/README.zh-CN.md +369 -0
  3. package/dist/assets/image/failImage.d.ts +2 -0
  4. package/dist/bin/generate-component-api.d.ts +1 -0
  5. package/dist/bin/generate-style-docs.d.ts +1 -0
  6. package/dist/build/config.bundle.d.ts +2 -0
  7. package/dist/build/config.d.ts +3 -0
  8. package/dist/build/config.es.d.ts +2 -0
  9. package/dist/build/config.umd.d.ts +1 -0
  10. package/dist/builder.d.ts +11 -0
  11. package/dist/builder.js +39 -0
  12. package/dist/button-DukaD6uL.js +117 -0
  13. package/dist/button.js +3 -5
  14. package/dist/card-DQUJoDUQ.js +60 -0
  15. package/dist/card.js +5 -0
  16. package/dist/checkbox-iHZQb-yQ.js +94 -0
  17. package/dist/checkbox.js +3 -5
  18. package/dist/colorpicker-Ch67dWa_.js +302 -0
  19. package/dist/colorpicker.js +3 -9
  20. package/dist/components/button/index.d.ts +44 -0
  21. package/dist/components/card/index.d.ts +21 -0
  22. package/dist/components/checkbox/index.d.ts +35 -0
  23. package/dist/components/colorpicker/index.d.ts +88 -0
  24. package/dist/components/dropdown/index.d.ts +32 -0
  25. package/dist/components/form/index.d.ts +15 -0
  26. package/dist/components/icon/index.d.ts +58 -0
  27. package/dist/components/image/index.d.ts +25 -0
  28. package/dist/components/input/index.d.ts +229 -0
  29. package/dist/components/link/index.d.ts +21 -0
  30. package/dist/components/loading/index.d.ts +76 -0
  31. package/dist/components/math/index.d.ts +16 -0
  32. package/dist/components/message/container.d.ts +8 -0
  33. package/dist/components/message/index.d.ts +32 -0
  34. package/dist/components/modal/index.d.ts +100 -0
  35. package/dist/components/player/core/constants.d.ts +5 -0
  36. package/dist/components/player/core/controller.d.ts +33 -0
  37. package/dist/components/player/core/events.d.ts +10 -0
  38. package/dist/components/player/core/fullscreen.d.ts +5 -0
  39. package/dist/components/player/core/levels.d.ts +20 -0
  40. package/dist/components/player/core/media.d.ts +50 -0
  41. package/dist/components/player/core/playback.d.ts +14 -0
  42. package/dist/components/player/core/progress.d.ts +2 -0
  43. package/dist/components/player/core/state.d.ts +27 -0
  44. package/dist/components/player/core/view.d.ts +39 -0
  45. package/dist/components/player/index.d.ts +277 -0
  46. package/dist/components/popover/content/index.d.ts +12 -0
  47. package/dist/components/popover/index.d.ts +95 -0
  48. package/dist/components/progress/index.d.ts +40 -0
  49. package/dist/components/radar/index.d.ts +52 -0
  50. package/dist/components/route/index.d.ts +26 -0
  51. package/dist/components/router/index.d.ts +24 -0
  52. package/dist/components/scratch/index.d.ts +19 -0
  53. package/dist/components/section/index.d.ts +23 -0
  54. package/dist/components/select/dropdown-item/index.d.ts +21 -0
  55. package/dist/components/select/index.d.ts +135 -0
  56. package/dist/components/select/option/index.d.ts +19 -0
  57. package/dist/components/skeleton/index.d.ts +13 -0
  58. package/dist/components/tab/index.d.ts +58 -0
  59. package/dist/components/tabpane/index.d.ts +33 -0
  60. package/dist/demo/i18n.d.ts +4 -0
  61. package/dist/demo/index.d.ts +3 -0
  62. package/dist/demo/register-icons.d.ts +1 -0
  63. package/dist/dropdown-C5362qTy.js +82 -0
  64. package/dist/dropdown.js +6 -0
  65. package/dist/events-C59wGdni.js +30 -0
  66. package/dist/factory-BdsO0dEW.js +165 -0
  67. package/dist/form-05Lxxl3D.js +44 -0
  68. package/dist/form.js +5 -0
  69. package/dist/icon-DmoEnao5.js +165 -0
  70. package/dist/icon.js +4 -4
  71. package/dist/{index-KS2nvVcO.js → image-6GayFDqX.js} +58 -71
  72. package/dist/image.js +3 -2
  73. package/dist/index.cjs +35 -0
  74. package/dist/index.d.ts +277 -116
  75. package/dist/index.iife.js +306 -0
  76. package/dist/index.js +78 -38
  77. package/dist/input-DoraIb3x.js +198 -0
  78. package/dist/input.js +2 -3
  79. package/dist/katex-es-Bpesphgp.js +23682 -0
  80. package/dist/katex-es-Cnq5Pk8K.cjs +261 -0
  81. package/dist/link-BW-gvrpN.js +77 -0
  82. package/dist/link.js +6 -0
  83. package/dist/loading-Mko22ncl.js +206 -0
  84. package/dist/loading.js +4 -6
  85. package/dist/math-B5PpSnFR.js +52 -0
  86. package/dist/math.js +2 -4
  87. package/dist/message-CQENvkoi.js +137 -0
  88. package/dist/message.js +3 -4
  89. package/dist/mocks-CMGoftIc.js +179 -0
  90. package/dist/modal-DruDj3AB.js +350 -0
  91. package/dist/modal.js +3 -2
  92. package/dist/player-CvfmwWUa.js +13536 -0
  93. package/dist/player.js +3 -6
  94. package/dist/playwright.config.d.ts +2 -0
  95. package/dist/plugins/load-svg.d.ts +9 -0
  96. package/dist/popover-BCvHwLZb.js +213 -0
  97. package/dist/popover.js +3 -5
  98. package/dist/progress-BWkNf2J5.js +123 -0
  99. package/dist/progress.js +3 -5
  100. package/dist/radar-CWsawt2g.js +181 -0
  101. package/dist/radar.js +3 -4
  102. package/dist/ranui.css +1 -0
  103. package/dist/route-BY_E6-2C.js +88 -0
  104. package/dist/route.js +6 -0
  105. package/dist/router-BDcv4F-2.js +79 -0
  106. package/dist/router.js +6 -0
  107. package/dist/scratch-Dbd9G6Q6.js +60 -0
  108. package/dist/scratch.js +4 -0
  109. package/dist/section-CNTvgdQ-.js +63 -0
  110. package/dist/section.js +5 -0
  111. package/dist/select-BmhCUTLb.js +433 -0
  112. package/dist/select.js +3 -8
  113. package/dist/signal-XHfNsQNW.js +57 -0
  114. package/dist/skeleton-DPv9nFhL.js +32 -0
  115. package/dist/skeleton.js +3 -2
  116. package/dist/ssg.js +21 -0
  117. package/dist/ssr-DSGwPtEd.js +34 -0
  118. package/dist/ssr-stream.d.ts +1 -0
  119. package/dist/ssr-stream.js +87 -0
  120. package/dist/ssr.d.ts +1 -0
  121. package/dist/ssr.js +7 -0
  122. package/dist/style.d.ts +1 -0
  123. package/dist/style.js +0 -0
  124. package/dist/tab-C9swK-hm.js +185 -0
  125. package/dist/tab.js +3 -4
  126. package/dist/tabpane-B_M-Jokw.js +87 -0
  127. package/dist/tabpane.js +3 -2
  128. package/dist/test/e2e/button.spec.d.ts +1 -0
  129. package/dist/test/e2e/checkbox.spec.d.ts +1 -0
  130. package/dist/test/e2e/helpers.d.ts +13 -0
  131. package/dist/test/e2e/icon.spec.d.ts +1 -0
  132. package/dist/test/e2e/image.spec.d.ts +1 -0
  133. package/dist/test/e2e/input.spec.d.ts +1 -0
  134. package/dist/test/e2e/loading.spec.d.ts +1 -0
  135. package/dist/test/e2e/message.spec.d.ts +1 -0
  136. package/dist/test/e2e/modal.spec.d.ts +1 -0
  137. package/dist/test/e2e/popover.spec.d.ts +1 -0
  138. package/dist/test/e2e/progress.spec.d.ts +1 -0
  139. package/dist/test/e2e/radar.spec.d.ts +1 -0
  140. package/dist/test/e2e/select.spec.d.ts +1 -0
  141. package/dist/test/e2e/skeleton.spec.d.ts +1 -0
  142. package/dist/test/e2e/tab.spec.d.ts +1 -0
  143. package/dist/test/e2e/visual/colorpicker.spec.d.ts +1 -0
  144. package/dist/test/e2e/visual/components.spec.d.ts +1 -0
  145. package/dist/test/e2e/visual/player.spec.d.ts +1 -0
  146. package/dist/test/integration/composition.test.d.ts +23 -0
  147. package/dist/test/setup.d.ts +0 -0
  148. package/dist/test/ssr/builder.core.ssr.test.d.ts +1 -0
  149. package/dist/test/ssr/builder.factory.ssr.test.d.ts +1 -0
  150. package/dist/test/ssr/builder.mocks.test.d.ts +1 -0
  151. package/dist/test/ssr/components/button.test.d.ts +1 -0
  152. package/dist/test/ssr/css-vars.test.d.ts +1 -0
  153. package/dist/test/ssr/registry.test.d.ts +1 -0
  154. package/dist/test/ssr/router.ssg.test.d.ts +2 -0
  155. package/dist/test/ssr/snapshots/button.test.d.ts +1 -0
  156. package/dist/test/ssr/stream.test.d.ts +2 -0
  157. package/dist/test/ssr/theme.tokens.ssr.test.d.ts +1 -0
  158. package/dist/test/unit/builder.core.browser.test.d.ts +1 -0
  159. package/dist/test/unit/builder.escape.test.d.ts +1 -0
  160. package/dist/test/unit/builder.selectors.test.d.ts +1 -0
  161. package/dist/test/unit/button.contract.test.d.ts +1 -0
  162. package/dist/test/unit/card.contract.test.d.ts +1 -0
  163. package/dist/test/unit/checkbox.contract.test.d.ts +1 -0
  164. package/dist/test/unit/colorpicker.color.utils.test.d.ts +1 -0
  165. package/dist/test/unit/colorpicker.contract.test.d.ts +1 -0
  166. package/dist/test/unit/colorpicker.methods.test.d.ts +1 -0
  167. package/dist/test/unit/component.helpers.test.d.ts +1 -0
  168. package/dist/test/unit/dropdown-item.contract.test.d.ts +1 -0
  169. package/dist/test/unit/dropdown.contract.test.d.ts +1 -0
  170. package/dist/test/unit/form.contract.test.d.ts +1 -0
  171. package/dist/test/unit/helpers/component.d.ts +3 -0
  172. package/dist/test/unit/helpers/dom.d.ts +2 -0
  173. package/dist/test/unit/icon.contract.test.d.ts +1 -0
  174. package/dist/test/unit/image.contract.test.d.ts +1 -0
  175. package/dist/test/unit/input.contract.test.d.ts +1 -0
  176. package/dist/test/unit/link.contract.test.d.ts +1 -0
  177. package/dist/test/unit/loading.contract.test.d.ts +1 -0
  178. package/dist/test/unit/math.contract.test.d.ts +1 -0
  179. package/dist/test/unit/message.component.test.d.ts +1 -0
  180. package/dist/test/unit/message.container.test.d.ts +1 -0
  181. package/dist/test/unit/modal.contract.test.d.ts +1 -0
  182. package/dist/test/unit/option.contract.test.d.ts +1 -0
  183. package/dist/test/unit/package-exports.source.test.d.ts +1 -0
  184. package/dist/test/unit/player-controls.test.d.ts +1 -0
  185. package/dist/test/unit/player-core.test.d.ts +1 -0
  186. package/dist/test/unit/player-event-handlers.test.d.ts +1 -0
  187. package/dist/test/unit/player-events.test.d.ts +1 -0
  188. package/dist/test/unit/player-fullscreen.test.d.ts +1 -0
  189. package/dist/test/unit/player-interactions.test.d.ts +1 -0
  190. package/dist/test/unit/player-levels.test.d.ts +1 -0
  191. package/dist/test/unit/player-media.test.d.ts +1 -0
  192. package/dist/test/unit/player-playback.test.d.ts +1 -0
  193. package/dist/test/unit/player.contract.test.d.ts +1 -0
  194. package/dist/test/unit/popover-accessibility.test.d.ts +1 -0
  195. package/dist/test/unit/popover.contract.test.d.ts +2 -0
  196. package/dist/test/unit/progress.contract.test.d.ts +1 -0
  197. package/dist/test/unit/radar.contract.test.d.ts +1 -0
  198. package/dist/test/unit/route.contract.test.d.ts +1 -0
  199. package/dist/test/unit/router.contract.test.d.ts +2 -0
  200. package/dist/test/unit/scratch.contract.test.d.ts +1 -0
  201. package/dist/test/unit/select-accessibility.test.d.ts +1 -0
  202. package/dist/test/unit/select-option.contract.test.d.ts +1 -0
  203. package/dist/test/unit/select.contract.test.d.ts +1 -0
  204. package/dist/test/unit/skeleton.contract.test.d.ts +1 -0
  205. package/dist/test/unit/ssr.test.d.ts +1 -0
  206. package/dist/test/unit/tab.contract.test.d.ts +2 -0
  207. package/dist/test/unit/theme.semantic-tokens.test.d.ts +1 -0
  208. package/dist/test/unit/theme.skin-tokens.test.d.ts +1 -0
  209. package/dist/test/unit/utils.dom.test.d.ts +1 -0
  210. package/dist/test/unit/utils.error.test.d.ts +1 -0
  211. package/dist/test/unit/utils.i18n.test.d.ts +1 -0
  212. package/dist/test/unit/utils.image.test.d.ts +1 -0
  213. package/dist/test/unit/utils.math.test.d.ts +1 -0
  214. package/dist/test/unit/utils.router.test.d.ts +1 -0
  215. package/dist/test/unit/utils.signal.test.d.ts +1 -0
  216. package/dist/test/unit/utils.ssr-stream.test.d.ts +1 -0
  217. package/dist/test/unit/utils.style.test.d.ts +1 -0
  218. package/dist/test/unit/utils.theme.test.d.ts +1 -0
  219. package/dist/test/unit/utils.tween.test.d.ts +1 -0
  220. package/dist/tsconfig.json +9 -9
  221. package/dist/typings.d.ts +163 -116
  222. package/dist/utils/builder/core.d.ts +70 -0
  223. package/dist/utils/builder/env.d.ts +1 -0
  224. package/dist/utils/builder/escape.d.ts +2 -0
  225. package/dist/utils/builder/events.d.ts +55 -0
  226. package/dist/utils/builder/factory.d.ts +18 -0
  227. package/dist/utils/builder/index.d.ts +9 -0
  228. package/dist/utils/builder/mocks.d.ts +62 -0
  229. package/dist/utils/builder/selectors.d.ts +4 -0
  230. package/dist/utils/builder/signal.d.ts +87 -0
  231. package/dist/utils/color.d.ts +52 -0
  232. package/dist/utils/component.d.ts +16 -0
  233. package/dist/utils/dom.d.ts +39 -0
  234. package/dist/utils/error.d.ts +6 -0
  235. package/dist/utils/i18n/index.d.ts +53 -0
  236. package/dist/utils/i18n.js +88 -0
  237. package/dist/utils/image.d.ts +39 -0
  238. package/dist/utils/index.d.ts +8 -0
  239. package/dist/utils/math.d.ts +26 -0
  240. package/dist/utils/router/index.d.ts +128 -0
  241. package/dist/utils/router.js +197 -0
  242. package/dist/utils/ssg.d.ts +49 -0
  243. package/dist/utils/ssr-registry.d.ts +8 -0
  244. package/dist/utils/ssr-stream.d.ts +23 -0
  245. package/dist/utils/ssr.d.ts +17 -0
  246. package/dist/utils/style.d.ts +12 -0
  247. package/dist/utils/theme.d.ts +9 -0
  248. package/dist/utils/tween.d.ts +21 -0
  249. package/dist/utils/video.d.ts +40 -0
  250. package/dist/utils-D4pPF77E.js +689 -0
  251. package/dist/vite.config.d.ts +6 -0
  252. package/dist/vitest.config.d.ts +2 -0
  253. package/dist/vitest.config.ssr.d.ts +2 -0
  254. package/docs/COMPONENTS.md +326 -0
  255. package/docs/DESIGN.md +182 -0
  256. package/docs/style-tokens-public.md +880 -0
  257. package/package.json +138 -74
  258. package/typings.d.ts +163 -116
  259. package/dist/_commonjs-dynamic-modules-DLbDWi6a.js +0 -12
  260. package/dist/add-user-BN1JlY7e.js +0 -4
  261. package/dist/arrow-down-Beig7FXI.js +0 -652
  262. package/dist/book-nTEFXU2x.js +0 -4
  263. package/dist/check-circle-fill-B_pd8ZSs.js +0 -4
  264. package/dist/check-circle-szyAJiap.js +0 -4
  265. package/dist/close-CFnkhudp.js +0 -4
  266. package/dist/close-circle-CwmuN2C6.js +0 -4
  267. package/dist/close-circle-fill-jSqPPw9i.js +0 -4
  268. package/dist/colz-DJZvo_8B.js +0 -232
  269. package/dist/docx-CHkPTdGU.js +0 -3665
  270. package/dist/drop-4j4abxje.js +0 -36
  271. package/dist/eye-D_mEt17f.js +0 -4
  272. package/dist/eye-close-BVr3NJtg.js +0 -4
  273. package/dist/home-BUQ4USMk.js +0 -4
  274. package/dist/iconShadowless.js +0 -6
  275. package/dist/index-BZR0HaP2.js +0 -40
  276. package/dist/index-Bl6-5Hp8.js +0 -63701
  277. package/dist/index-C0Xh8vJ3.js +0 -146
  278. package/dist/index-C4Sv0T51.js +0 -495
  279. package/dist/index-CGEx9VOA.js +0 -17106
  280. package/dist/index-CILRcFIV.js +0 -100
  281. package/dist/index-CQTJoWhb.js +0 -19
  282. package/dist/index-CWNtaUwu.js +0 -308
  283. package/dist/index-CjSKJE6S.js +0 -158
  284. package/dist/index-Ck9TOxFh.js +0 -279
  285. package/dist/index-CryFK9u4.js +0 -320
  286. package/dist/index-D4twPONc.js +0 -187
  287. package/dist/index-D83djTVa.js +0 -659
  288. package/dist/index-DAxs7Dd2.js +0 -119
  289. package/dist/index-DBecKjmY.js +0 -279
  290. package/dist/index-DC5EA657.js +0 -91
  291. package/dist/index-DHTzB_6b.js +0 -9575
  292. package/dist/index-DL-1C2RQ.js +0 -496
  293. package/dist/index-DN-kAx-A.js +0 -72
  294. package/dist/index-TlwIh-o2.js +0 -306
  295. package/dist/index-WfFw4LJT.js +0 -490
  296. package/dist/index-lLO-8KJ1.js +0 -204
  297. package/dist/index-oD-_YELB.js +0 -511
  298. package/dist/index-qvcQTV5_.js +0 -105
  299. package/dist/info-circle-COnL5bTJ.js +0 -4
  300. package/dist/info-circle-fill-CFeVMdci.js +0 -4
  301. package/dist/inputShadowless.js +0 -6
  302. package/dist/jszip.min-Dhs3nUkD.js +0 -2346
  303. package/dist/katex-es-B5r5vt3m.js +0 -14628
  304. package/dist/loading-Dcc5RApI.js +0 -4
  305. package/dist/loading-scene-BMc2wqKm.js +0 -4
  306. package/dist/lock-Cr7BnmWN.js +0 -4
  307. package/dist/message-D36_Zo2l.js +0 -4
  308. package/dist/pdf-Cx0VWKFo.js +0 -118
  309. package/dist/power-off-lQRbiBak.js +0 -4
  310. package/dist/preview-CJbz9GjO.js +0 -4
  311. package/dist/preview.js +0 -7
  312. package/dist/selectShadowless.js +0 -564
  313. package/dist/setting-DemlgzVC.js +0 -4
  314. package/dist/shadowless.js +0 -8
  315. package/dist/sprite-CH2zLtZy.js +0 -141
  316. package/dist/style.css +0 -1
  317. package/dist/team-tl4NJXPC.js +0 -4
  318. package/dist/umd/index.umd.cjs +0 -60
  319. package/dist/umd/shadowless/shadowless.umd.cjs +0 -1
  320. package/dist/umd/shadowless/style.css +0 -1
  321. package/dist/umd/style.css +0 -1
  322. package/dist/unlock-CeU74z9n.js +0 -4
  323. package/dist/user-B-eVXwuk.js +0 -4
  324. package/dist/warning-circle-DDUgEDIv.js +0 -4
  325. package/dist/warning-circle-fill-lODUKz0i.js +0 -4
  326. package/readme.md +0 -176
package/README.zh-CN.md ADDED
@@ -0,0 +1,369 @@
1
+ # ranui
2
+
3
+ 基于 `Web Components` 的实验性组件库。组件使用 Shadow DOM 封装、CSS Token 主题体系，并提供 SSR / Declarative Shadow DOM 支持。
4
+
5
+ ---
6
+
7
+ <a href="https://github.com/chaxus/ran"><img src="https://img.shields.io/github/actions/workflow/status/chaxus/ran/ci.yml" alt="Build Status"></a>
8
+ <a href="https://github.com/chaxus/ran"><img src="https://img.shields.io/npm/v/ranui.svg" alt="npm-v"></a>
9
+ <a href="https://github.com/chaxus/ran"><img src="https://img.shields.io/npm/dt/ranui.svg" alt="npm-d"></a>
10
+ <a href="https://github.com/chaxus/ran"><img src="https://img.badgesize.io/https:/unpkg.com/ranui/dist/umd/shadowless/shadowless.umd.cjs?label=brotli&compression=brotli" alt="brotli"></a>
11
+ <a href="https://github.com/chaxus/ran"><img src="https://img.shields.io/badge/module%20formats-umd%2C%20esm-green.svg" alt="module formats: umd, esm"></a>
12
+
13
+ **中文** | [English](./README.md)
14
+
15
+ ## ⚠️ 重要说明
16
+
17
+ 这是一个**实验性 UI 库**，处于早期开发阶段。虽然功能可用，但主要用于学习和实验。
18
+
19
+ **关键要点：**
20
+
21
+ - 🚧 **早期开发**: 功能仍在开发和完善中
22
+ - 🧪 **实验性**: API 可能会频繁变化
23
+ - 📚 **学习导向**: 主要用于学习 Web Components 和 UI 开发
24
+
25
+ ## 特点
26
+
27
+ 1. **跨框架兼容：** 与 React, Vue, Preact, SolidJS, Svelte 等兼容。可以和遵循 W3C 标准的任何 JavaScript 项目集成。
28
+ 2. **原生体验：** 易于入门，像使用原生 HTML 标签一样使用 `<r-button>`、`<r-modal>` 等自定义元素。
29
+ 3. **模块化设计：** 可选导入和全量导入，以增强可维护性和可伸缩性。
30
+ 4. **Shadow DOM 封装：** 组件内部样式默认隔离，并通过 CSS Token、`::part()` 和 `sheet` 属性开放可控的样式覆盖能力。
31
+ 5. **支持类型校验：** 基于 TypeScript 构建，具有类型支持，确保代码的健壮性和可维护性。
32
+ 6. **SSR 友好：** 通过 `defineSSR`、`renderToString` 和 Declarative Shadow DOM 支持服务端渲染场景。
33
+ 7. **无障碍：** ARIA 角色/状态、完整键盘导航、表单参与控件（`<r-checkbox>`/`<r-input>`/`<r-select>` 可被原生 `FormData` 收集）、live-region 提示，并尊重 `prefers-reduced-motion`。
34
+
35
+ ## 安装
36
+
37
+ 使用 npm:
38
+
39
+ ```console
40
+ npm install ranui --save
41
+ ```
42
+
43
+ ## 文档和示例
44
+
45
+ [See components and use examples](https://chaxus.github.io/ran/cn/src/ranui/)
46
+
47
+ ### 样式定制文档
48
+
49
+ 当前样式系统已统一为 CSS Token 与 `::part()` 规范。
50
+
51
+ - 样式覆盖规范：[docs/style-override.md](./docs/style-override.md)
52
+ - 完整 Token/Part 清单（自动生成）: [docs/style-tokens-parts.md](./docs/style-tokens-parts.md)
53
+ - 面向使用方的公开样式 API（自动生成）: [docs/style-tokens-public.md](./docs/style-tokens-public.md)
54
+ - 公开 Token 过滤配置：[docs/style-token-filter.json](./docs/style-token-filter.json)
55
+
56
+ 可通过以下命令刷新样式文档：
57
+
58
+ ```bash
59
+ pnpm doc:style
60
+ ```
61
+
62
+ ### 主题与主题包
63
+
64
+ RanUI 支持亮色、暗色与系统主题，并提供多个 CSS-only 主题包。
65
+
66
+ ```ts
67
+ import { initTheme, setTheme, setThemePack, setThemeToken } from 'ranui';
68
+ import 'ranui/theme-packs/pixel-retro';
69
+
70
+ initTheme();
71
+ setTheme('system');
72
+ setThemePack('pixel-retro');
73
+ setThemeToken('--ran-color-primary', '#2563eb');
74
+ ```
75
+
76
+ 可用主题包包括 `windows-98`、`windows-xp`、`system-6`、`wired`、`paper`、`pixel-retro`、`neo-brutalism`。使用 `setThemePack('default')` 可恢复默认主题包。
77
+
78
+ ## 引入方式
79
+
80
+ 支持按需导入，以显著减少包体积大小
81
+
82
+ ```js
83
+ import 'ranui/button';
84
+ ```
85
+
86
+ 如果遇到样式问题，可以选择手动导入样式文件
87
+
88
+ ```js
89
+ import 'ranui/style';
90
+ ```
91
+
92
+ 如果遇到类型问题，可以选择手动导入类型文件
93
+
94
+ ```ts
95
+ import 'ranui/typings';
96
+ // 或者
97
+ import 'ranui/dist/index.d.ts';
98
+ // 或者
99
+ import 'ranui/type';
100
+ // 或者
101
+ import 'ranui/dist/typings';
102
+ ```
103
+
104
+ 并不是都要，选一个能生效的就行
105
+
106
+ 也支持全量导入
107
+
108
+ ```ts
109
+ import 'ranui';
110
+ ```
111
+
112
+ - ES module
113
+
114
+ ```js
115
+ import 'ranui';
116
+ ```
117
+
118
+ 或者
119
+
120
+ ```js
121
+ import 'ranui/button';
122
+ ```
123
+
124
+ - UMD, IIFE, CJS
125
+
126
+ ```html
127
+ <script src="./ranui/dist/umd/index.umd.cjs"></script>
128
+ ```
129
+
130
+ ## 使用方式
131
+
132
+ 它是基于`Web Components`的组件，你可以不用关注框架就可以使用它。
133
+
134
+ 在大多数情况下，您可以像使用本地 `div` 标签一样使用它
135
+
136
+ 下面是一些例子：
137
+
138
+ - html
139
+ - js
140
+ - jsx
141
+ - vue
142
+ - tsx
143
+
144
+ ### html
145
+
146
+ ```html
147
+ <script src="./ranui/dist/umd/index.umd.cjs"></script>
148
+
149
+ <body>
150
+ <r-button>Button</r-button>
151
+ </body>
152
+ ```
153
+
154
+ ### js
155
+
156
+ ```js
157
+ import 'ranui';
158
+
159
+ const Button = document.createElement('r-button');
160
+ Button.textContent = 'this is button text';
161
+ document.body.appendChild(Button);
162
+ ```
163
+
164
+ ### jsx
165
+
166
+ ```jsx
167
+ import 'ranui';
168
+
169
+ const App = () => {
170
+ return (
171
+ <>
172
+ <r-button>Button</r-button>
173
+ </>
174
+ );
175
+ };
176
+ ```
177
+
178
+ ### vue
179
+
180
+ ```vue
181
+ <template>
182
+ <r-button></r-button>
183
+ </template>
184
+ <script>
185
+ import 'ranui';
186
+ </script>
187
+ ```
188
+
189
+ ### tsx
190
+
191
+ ```tsx
192
+ import 'ranui/button';
193
+
194
+ const Button = () => {
195
+ return (
196
+ <div>
197
+ <r-button type="primary">button</r-button>
198
+ </div>
199
+ );
200
+ };
201
+ ```
202
+
203
+ ### Message 位置与容器配置
204
+
205
+ `window.message` 现已支持自定义顶部偏移、层级和挂载容器：
206
+
207
+ ```ts
208
+ import 'ranui/message';
209
+
210
+ const customRoot = document.getElementById('custom-message-root');
211
+
212
+ window.message?.success({
213
+ content: '保存成功',
214
+ duration: 2000,
215
+ top: 24,
216
+ zIndex: 3000,
217
+ getContainer: () => customRoot,
218
+ });
219
+ ```
220
+
221
+ `top` 支持 `number | string`（`24` 会转成 `24px`，`'2rem'` 会保留原单位）。
222
+
223
+ `zIndex` 支持 `number | string`。
224
+
225
+ `getContainer` 需要返回 `HTMLElement`；未传时默认挂载到 `document.body`。
226
+
227
+ ### 响应式原语
228
+
229
+ `signal`、`createEffect`、`computed`、`batch` 与 DOM builder 一起提供，用于在无框架依赖的情况下构建响应式页面区块。设计参考 SwiftUI 的 `@Observable`，并借鉴 Solid.js 补充了两个正确性改进：effect 重新执行前自动清理过期订阅；`batch()` 将多次 signal 写入合并为一次 effect flush，与 SwiftUI 自动合并变更的行为对齐。
230
+
231
+ ```ts
232
+ import { signal, createEffect, computed, batch, EventManager, Div, ButtonBuilder } from 'ranui/builder';
233
+
234
+ function initCounter(container: HTMLElement) {
235
+ const [count, setCount] = signal(0);
236
+ const [step, setStep] = signal(1);
237
+ const doubled = computed(() => count() * 2);
238
+ const scope = new EventManager();
239
+
240
+ const label = Div().build();
241
+ const view = Div()
242
+ .children(
243
+ label,
244
+ ButtonBuilder()
245
+ .text('+')
246
+ .listen(scope, 'click', () => setCount((n) => n + step())),
247
+ ButtonBuilder()
248
+ .text('重置')
249
+ .listen(
250
+ scope,
251
+ 'click',
252
+ () =>
253
+ batch(() => {
254
+ setCount(0);
255
+ setStep(1);
256
+ }), // 两次写入 → 一次 flush
257
+ ),
258
+ )
259
+ .build();
260
+
261
+ const dispose = createEffect(() => {
262
+ label.textContent = `${count()} (×2 = ${doubled()})`;
263
+ });
264
+
265
+ container.appendChild(view);
266
+ return () => {
267
+ dispose();
268
+ scope.abort();
269
+ }; // 区块销毁时清理
270
+ }
271
+ ```
272
+
273
+ 详细 API 请参考 [工具文档](./utils/README.zh-CN.md)。
274
+
275
+ ### 路由
276
+
277
+ RanUI 内置客户端路由，提供声明式组件和 JavaScript API 两种方式。
278
+
279
+ **声明式组件：**
280
+
281
+ ```html
282
+ <r-router>
283
+ <nav>
284
+ <r-link href="/">首页</r-link>
285
+ <r-link href="/about">关于</r-link>
286
+ </nav>
287
+
288
+ <r-route path="/" exact><h2>首页</h2></r-route>
289
+ <r-route path="/about"><h2>关于</h2></r-route>
290
+ <r-route path="/users/:id"><h2>用户详情</h2></r-route>
291
+ </r-router>
292
+ ```
293
+
294
+ **JavaScript API，含导航守卫：**
295
+
296
+ ```ts
297
+ import { createRouter } from 'ranui';
298
+
299
+ const router = createRouter({
300
+ mode: 'history',
301
+ routes: [
302
+ { path: '/', exact: true, meta: { title: '首页' } },
303
+ { path: '/users/:id', meta: { requiresAuth: true } },
304
+ ],
305
+ viewTransition: 'spa', // 'spa' | 'mpa' | 'both'
306
+ });
307
+
308
+ router.beforeEach((to, from, next) => {
309
+ if (to.meta?.requiresAuth && !isLoggedIn()) next('/login');
310
+ else next();
311
+ });
312
+
313
+ router.push('/users/42');
314
+ ```
315
+
316
+ 纯 MPA 站点（无需 JS router）可使用 `enableMpaViewTransitions()` 注入 `@view-transition { navigation: auto }`。共享元素过渡动画通过标准 `view-transition-name` CSS 属性实现。
317
+
318
+ ```ts
319
+ import { enableMpaViewTransitions } from 'ranui';
320
+ enableMpaViewTransitions();
321
+ ```
322
+
323
+ 完整 API（守卫、`onPageSwap`/`onPageReveal`、元素级动画命名）请参考 [路由文档](https://chaxus.github.io/ran/cn/src/ranui/router/)。
324
+
325
+ ### SSR & Builder (推荐)
326
+
327
+ 对于需要服务端渲染 (SSR) 或更声明式构建 UI 的场景，RanUI 内部使用 `builder`、SSR registry 与 Declarative Shadow DOM。组件会通过 `ensureShadowRoot` 复用已有 Shadow Root，并通过 `ensureShadowElement` 保持初始化幂等。
328
+
329
+ 源码内的 SSR 渲染示例：
330
+
331
+ ```ts
332
+ import { Button } from '@/components/button';
333
+ import { renderToString } from '@/utils/ssr';
334
+
335
+ const button = new Button();
336
+ button.setAttribute('effect', 'true');
337
+
338
+ // 输出包含 Declarative Shadow DOM 的 HTML 字符串
339
+ const html = renderToString(button);
340
+ ```
341
+
342
+ 更多细节请查看 [Utility Documentation](./utils/README.md)。
343
+
344
+ ## 组件开发约定
345
+
346
+ 新增或维护组件时请遵循当前包内约定：
347
+
348
+ - 组件继承 `RanElement`，不要直接继承浏览器环境下的 `HTMLElement`。
349
+ - 使用 `ensureShadowRoot` 创建或复用 Shadow Root，不要直接调用 `attachShadow`。
350
+ - 使用 `ensureShadowElement` 构建 Shadow DOM 子树，保证重复构造时幂等。
351
+ - `observedAttributes` 包含 `sheet`，并通过 `syncSheetAttribute` 同步组件级样式覆盖。
352
+ - `attributeChangedCallback` 首行使用 `if (old === next) return;` 避免重复同步。
353
+ - 使用 `defineSSR('r-name', Component)` 注册组件，而不是直接调用 `customElements.define`。
354
+ - 在 `index.ts` 中同时添加类型导出和副作用导入；在 `vite.config.ts`、`package.json` 中补齐独立入口与导出。
355
+ - 在 `connectedCallback` 中使用 `@/utils/builder` 导出的 `EventManager` 管理生命周期事件；在 `disconnectedCallback` 中调用 `manager.abort()` 一次清理所有监听器，不要逐个调用 `removeEventListener`。
356
+
357
+ ## 贡献
358
+
359
+ 我们欢迎学习者和开发者的贡献！这是一个实验性项目，请对开发过程保持耐心。
360
+
361
+ ## 贡献者
362
+
363
+ <a href="https://github.com/chaxus/ran/graphs/contributors">
364
+ <img src="https://contrib.rocks/image?repo=chaxus/ran" />
365
+ </a>
366
+
367
+ ## Meta
368
+
369
+ [LICENSE (MIT)](/LICENSE)
package/dist/assets/image/failImage.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const failImage = "\n data:image/png;base64,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\n";
2
+ export default failImage;
package/dist/bin/generate-component-api.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/bin/generate-style-docs.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/build/config.bundle.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const _default: import("vite").UserConfig;
2
+ export default _default;
package/dist/build/config.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export declare const TIME_OUT = 1000;
2
+ export declare const PORT = 5173;
3
+ export declare const DEV_SERVER = "http://localhost:5173/";
package/dist/build/config.es.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const _default: import("vite").UserConfig;
2
+ export default _default;
package/dist/build/config.umd.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { default } from './config.bundle';
package/dist/builder.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ export { isSSR } from './utils/builder/env';
2
+ export { EventManager } from './utils/builder/events';
3
+ export { signal, createEffect, computed, batch } from './utils/builder/signal';
4
+ export type { Getter, Setter, SignalOptions } from './utils/builder/signal';
5
+ export { escapeHtml, escapeHtmlAttribute } from './utils/builder/escape';
6
+ export { matchSelector, collectMatches } from './utils/builder/selectors';
7
+ export type { MockNode } from './utils/builder/selectors';
8
+ export { DocumentFragmentMock, HTMLElementMock, ShadowRootMock } from './utils/builder/mocks';
9
+ export { createRef, ElementBuilder, ShadowBuilder } from './utils/builder/core';
10
+ export type { Ref } from './utils/builder/core';
11
+ export { View, Div, Span, Slot, ButtonBuilder, InputBuilder, Style, Label, Ul, Li, Section, Article, Nav, Header, Footer, Main, DeclarativeShadow, } from './utils/builder/factory';
package/dist/builder.js ADDED
@@ -0,0 +1,39 @@
1
+ import { a as s, c as e, i as t, n as o, o as r, r as c, s as i, t as l } from "./mocks-CMGoftIc.js";
2
+ import { t as n } from "./events-C59wGdni.js";
3
+ import { i as d, n as u, r as S, t as f } from "./signal-XHfNsQNW.js";
4
+ import { _ as M, a as v, b as B, c as b, d as g, f as w, g as E, h as H, i as k, l as D, m as L, n as R, o as y, p as A, r as F, s as x, t as I, u as N, v as T, y as U } from "./factory-BdsO0dEW.js";
5
+ export {
6
+ I as Article,
7
+ R as ButtonBuilder,
8
+ F as DeclarativeShadow,
9
+ k as Div,
10
+ l as DocumentFragmentMock,
11
+ T as ElementBuilder,
12
+ n as EventManager,
13
+ v as Footer,
14
+ o as HTMLElementMock,
15
+ y as Header,
16
+ x as InputBuilder,
17
+ b as Label,
18
+ D as Li,
19
+ N as Main,
20
+ g as Nav,
21
+ w as Section,
22
+ U as ShadowBuilder,
23
+ c as ShadowRootMock,
24
+ A as Slot,
25
+ L as Span,
26
+ H as Style,
27
+ E as Ul,
28
+ M as View,
29
+ f as batch,
30
+ t as collectMatches,
31
+ u as computed,
32
+ S as createEffect,
33
+ B as createRef,
34
+ r as escapeHtml,
35
+ i as escapeHtmlAttribute,
36
+ e as isSSR,
37
+ s as matchSelector,
38
+ d as signal
39
+ };
package/dist/button-DukaD6uL.js ADDED
@@ -0,0 +1,117 @@
1
+ import { C as i, c as b, d as l, f as d, p as a, s as h } from "./utils-D4pPF77E.js";
2
+ import { t as u } from "./events-C59wGdni.js";
3
+ import { _ as v, i as s, p as f } from "./factory-BdsO0dEW.js";
4
+ import { a as p, n as g } from "./ssr-DSGwPtEd.js";
5
+ var m = '.remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transparent}.remove-wap-active-focus:active,.remove-wap-active-focus:focus{outline:0;-webkit-tap-highlight-color:transparent}:host{box-sizing:var(--ran-btn-box-sizing, border-box);position:var(--ran-btn-position, relative);display:var(--ran-btn-display, inline-flex);background-image:var(--ran-btn-background-image, none);box-shadow:var(--ran-btn-box-shadow, var(--ran-skin-raised-shadow, 0 2px #00000004));cursor:var(--ran-btn-cursor, pointer);-webkit-user-select:var(--ran-btn-user-select, none);user-select:var(--ran-btn-user-select, none);touch-action:var(--ran-btn-touch-action, manipulation);overflow:var(--ran-btn-overflow, hidden);pointer-events:var(--ran-btn-pointer-events, auto)}:host .ran-btn{box-sizing:var(--ran-btn-contain-box-sizing, border-box);position:var(--ran-btn-contain-position, relative);display:var(--ran-btn-contain-display, block);background-image:var(--ran-btn-contain-background-image, none);cursor:var(--ran-btn-contain-cursor, pointer);transition:var(--ran-btn-contain-transition, all var(--ran-motion-duration-base, .2s) cubic-bezier(.645, .045, .355, 1));-webkit-user-select:var(--ran-btn-contain-user-select, none);user-select:var(--ran-btn-contain-user-select, none);touch-action:var(--ran-btn-contain-touch-action, manipulation);background:var(--ran-btn-contain-background, var(--ran-color-bg-elevated, #fff))}:host,:host(:active),:host(:focus){outline:0;-webkit-tap-highlight-color:transparent}:host .ran-btn,:host(:active) .ran-btn,:host(:focus) .ran-btn{outline:var(--ran-btn-contain-outline, 0)}:host(:focus-visible){outline:var(--ran-btn-focus-outline, 2px solid var(--ran-color-primary));outline-offset:var(--ran-btn-focus-outline-offset, 2px)}:host([type="primary"]) .ran-btn-content{background-color:var(--ran-btn-content-background-color, var(--ran-color-primary, #1890ff));background-image:var(--ran-btn-content-background-image, none);border-color:var(--ran-btn-content-border-color, var(--ran-color-primary, #1890ff));color:var(--ran-btn-content-color, #fff)}:host([type="primary"]:not([disabled])) .ran-btn:after{background-image:var(--ran-btn-after-background-image, radial-gradient(circle, #fff 10%, transparent 10.01%))}:host([type="primary"]:not([disabled]):active) .ran-btn-content{background-color:var(--ran-btn-content-active-background-color, var(--ran-color-primary-active, #005ff2));border-color:var(--ran-btn-content-active-border-color, var(--ran-color-primary-active, #005ff2))}@media(min-width:1024px){:host(:not([disabled]):hover) .ran-btn-content{border-color:var(--ran-btn-content-hover-border-color, var(--ran-color-primary, #1890ff));color:var(--ran-btn-content-hover-color, var(--ran-color-primary, #1890ff))}:host([type="primary"]:not([disabled]):hover) .ran-btn-content{background-color:var(--ran-btn-content-hover-background-color, var(--ran-color-primary-hover, #0059ec));border-color:var(--ran-btn-content-hover-border-color, var(--ran-color-primary-hover, #0059ec));color:var(--ran-btn-content-hover-color, #fff)}:host([type="warning"]:not([disabled]):hover) .ran-btn-content{border-color:var(--ran-btn-content-warning-border-color, var(--ran-color-danger, #ff4d4f));background-color:var(--ran-btn-content-warning-background-color, var(--ran-color-danger, #ff4d4f));color:var(--ran-btn-content-warning-color, #fff)}}:host([type="warning"]) .ran-btn-content{border-color:var(--ran-btn-content-warning-border-color, var(--ran-color-danger, #ff4d4f));background-color:var(--ran-btn-content-warning-background-color, var(--ran-color-danger, #ff4d4f));background-image:var(--ran-btn-content-background-image, none);color:var(--ran-btn-content-warning-color, #fff)}:host([type="warning"]:not([disabled])) .ran-btn:after{background-image:var(--ran-btn-after-background-image, radial-gradient(circle, #fff 10%, transparent 10.01%))}:host([type="text"]) .ran-btn-content{border:var(--ran-btn-content-text-border, none)}:host([disabled]){cursor:var(--ran-btn-disabled-cursor, not-allowed);pointer-events:var(--ran-btn-disabled-pointer-events, all);opacity:var(--ran-btn-disabled-opacity, .6)}:host([disabled]) .ran-btn{cursor:var(--ran-btn-disabled-container-cursor, not-allowed);pointer-events:var(--ran-btn-disabled-container-pointer-events, all);opacity:var(--ran-btn-disabled-container-opacity, .6)}:host(:not([disabled]):active) .ran-btn:after{transform:var(--ran-btn-after-transform, translate(-50%, -50%) scale(0));opacity:var(--ran-btn-after-opacity, .3);transition:var(--ran-btn-after-transition, 0s)}@media(min-width:1024px){:host(:not([disabled],[effect])) .ran-btn:after{content:"";display:block;position:absolute;width:100%;height:100%;left:var(--ran-x, 0);top:var(--ran-y, 0);pointer-events:none;background-image:radial-gradient(circle,var(--ran-color-primary, #1890ff) 10%,transparent 10.01%);background-repeat:no-repeat;background-position:50%;transform:translate(-50%,-50%) scale(10);opacity:0;transition:transform .3s,opacity .8s}}:host .slot{display:var(--ran-btn-slot-display, block)}.ran-btn-content{display:var(--ran-btn-content-display, flex);justify-content:var(--ran-btn-content-display, space-between);align-items:var(--ran-btn-content-align-items, center);padding:var(--ran-btn-content-padding, 4px 15px);border:var(--ran-btn-content-border, 1px solid transparent);border-image-source:var(--ran-btn-content-border-image-source, none);border-image-slice:var(--ran-btn-content-border-image-slice, 8);border-image-width:var(--ran-btn-content-border-image-width, 4px);border-image-outset:0;border-image-repeat:stretch;border-radius:var(--ran-btn-content-border-radius, var(--ran-radius-sm, 6px));border-color:var(--ran-btn-content-border-color, var(--ran-color-border, #d9d9d9));color:var(--ran-btn-content-color, var(--ran-color-text, #000000d9));line-height:var(--ran-btn-content-line-height, 22px);font-size:var(--ran-btn-content-font-size, 14px);font-weight:var(--ran-btn-content-font-weight, 400);font-family:var(--ran-btn-content-font-family, var(--ran-skin-font-family, inherit));white-space:var(--ran-btn-content-white-space, nowrap);text-align:var(--ran-btn-content-text-align, center);box-sizing:var(--ran-btn-content-box-sizing, border-box)}.ran-btn-content .icon{margin-right:var(--ran-btn-icon-margin-right, 2px)}', y = class extends g {
6
+ _btn;
7
+ _btnContent;
8
+ _iconElement;
9
+ _slot;
10
+ _shadowDom;
11
+ _events = new u();
12
+ debounceTimeId;
13
+ static get observedAttributes() {
14
+ return [
15
+ "disabled",
16
+ "icon",
17
+ "effect",
18
+ "iconSize",
19
+ "type",
20
+ "sheet"
21
+ ];
22
+ }
23
+ constructor() {
24
+ super(), this._shadowDom = b(this, m);
25
+ const t = h(this._shadowDom, ".ran-btn", () => s().class("ran-btn").attr("part", "button").role("button").tabIndex(0).children(s().class("ran-btn-content").attr("part", "content").children(f().class("slot"))).build());
26
+ this._btn = t, this._btnContent = t.querySelector(".ran-btn-content"), this._slot = t.querySelector("slot");
27
+ }
28
+ get sheet() {
29
+ return this.getAttribute("sheet") || "";
30
+ }
31
+ set sheet(t) {
32
+ this.setAttribute("sheet", t || ""), this.handlerExternalCss();
33
+ }
34
+ get disabled() {
35
+ return a(this);
36
+ }
37
+ set disabled(t) {
38
+ !t || t === "false" ? (this.removeAttribute("disabled"), this.removeAttribute("aria-disabled")) : (this.setAttribute("disabled", ""), this.setAttribute("aria-disabled", "true"));
39
+ }
40
+ get iconSize() {
41
+ return this.getAttribute("iconSize") || "";
42
+ }
43
+ set iconSize(t) {
44
+ !t || t === "false" ? this.removeAttribute("iconSize") : (this.setAttribute("iconSize", t), this.setIcon());
45
+ }
46
+ get icon() {
47
+ return this.getAttribute("icon") || "";
48
+ }
49
+ set icon(t) {
50
+ !t || t === "false" ? this.removeAttribute("icon") : (this.setAttribute("icon", t), this.setIcon());
51
+ }
52
+ get effect() {
53
+ return this.getAttribute("effect") || "";
54
+ }
55
+ set effect(t) {
56
+ d.includes(t) || !t ? this.removeAttribute("effect") : this.setAttribute("effect", t);
57
+ }
58
+ get type() {
59
+ return this.getAttribute("type") || "";
60
+ }
61
+ set type(t) {
62
+ t ? this.setAttribute("type", t) : this.removeAttribute("type");
63
+ }
64
+ setIcon = () => {
65
+ if (typeof document > "u" || !this._slot) return;
66
+ const t = this.icon;
67
+ if (!t) {
68
+ this._iconElement && (this._iconElement.remove(), this._iconElement = void 0);
69
+ return;
70
+ }
71
+ if (this._iconElement) this._iconElement.setAttribute("name", t);
72
+ else {
73
+ let r = this._shadowDom.querySelector("r-icon");
74
+ r || (r = v("r-icon").attr("color", "currentColor").class("icon").build(), this._slot.insertAdjacentElement("beforebegin", r)), this._iconElement = r, this._iconElement.setAttribute("name", t);
75
+ }
76
+ const { width: n, height: e } = this._slot.getBoundingClientRect(), o = Math.min(n, e) || 16, c = this.iconSize || `${o > 5 ? o - 5 : o}`;
77
+ this._iconElement.setAttribute("size", String(c));
78
+ };
79
+ mousedown = (t) => {
80
+ if (i() === "pc" && !this.disabled) {
81
+ this.debounceMouseEvent();
82
+ const { left: n, top: e } = this.getBoundingClientRect();
83
+ this._btn.style.setProperty("--ran-x", `${t.clientX - n}px`), this._btn.style.setProperty("--ran-y", `${t.clientY - e}px`);
84
+ }
85
+ };
86
+ mouseup = () => {
87
+ i() === "pc" && (this.debounceTimeId || (this.debounceTimeId = setTimeout(() => {
88
+ this._btn.style.removeProperty("--ran-x"), this._btn.style.removeProperty("--ran-y"), this.debounceMouseEvent();
89
+ }, 600)));
90
+ };
91
+ keydown = (t) => {
92
+ a(this) || (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.click());
93
+ };
94
+ debounceMouseEvent = () => {
95
+ this.debounceTimeId && (clearTimeout(this.debounceTimeId), this.debounceTimeId = void 0);
96
+ };
97
+ handlerExternalCss = () => {
98
+ l(this, this._shadowDom, "sheet", null, this.sheet);
99
+ };
100
+ syncA11yState = () => {
101
+ const t = a(this);
102
+ this._btn.setAttribute("aria-disabled", t ? "true" : "false"), this._btn.tabIndex = t ? -1 : 0, t ? (this.setAttribute("aria-disabled", "true"), this._btnContent.setAttribute("disabled", "true")) : (this.removeAttribute("aria-disabled"), this._btnContent.removeAttribute("disabled"));
103
+ };
104
+ connectedCallback() {
105
+ this.handlerExternalCss(), this.setIcon(), this.syncA11yState(), this._events.on(this._btn, "mousedown", this.mousedown).on(this._btn, "mouseup", this.mouseup).on(this._btn, "keydown", this.keydown);
106
+ }
107
+ disconnectedCallback() {
108
+ this.debounceMouseEvent(), this._events.abort();
109
+ }
110
+ attributeChangedCallback(t, n, e) {
111
+ n !== e && (t === "disabled" && this._btnContent && this.syncA11yState(), (t === "icon" || t === "iconSize") && this.setIcon(), t === "sheet" && this.handlerExternalCss());
112
+ }
113
+ };
114
+ p("r-button", y);
115
+ export {
116
+ y as t
117
+ };
package/dist/button.js CHANGED
@@ -1,7 +1,5 @@
1
- import { B, a } from "./index-D4twPONc.js";
2
- import "./arrow-down-Beig7FXI.js";
3
- import "./index-DC5EA657.js";
1
+ import { t as o } from "./button-DukaD6uL.js";
4
2
  export {
5
- B as Button,
6
- a as default
3
+ o as Button,
4
+ o as default
7
5
  };
package/dist/card-DQUJoDUQ.js ADDED
@@ -0,0 +1,60 @@
1
+ import { c as d, d as o, l as a, s as c, u as i } from "./utils-D4pPF77E.js";
2
+ import { i as r, p as s } from "./factory-BdsO0dEW.js";
3
+ import { a as l, n as h } from "./ssr-DSGwPtEd.js";
4
+ var p = ".remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transparent}.remove-wap-active-focus:active,.remove-wap-active-focus:focus{outline:0;-webkit-tap-highlight-color:transparent}:host{display:var(--ran-card-display, block);box-sizing:border-box;min-height:var(--ran-card-min-height, 0)}.ran-card{display:grid;align-content:start;gap:var(--ran-card-gap, 14px);height:100%;min-width:0;padding:var(--ran-card-padding, 16px);border-width:var(--ran-skin-border-width, 1px);border-style:var(--ran-skin-border-style, solid);border-color:var(--ran-color-border, #d9d9d9);border-radius:var(--ran-card-radius, var(--ran-radius-md));background:var(--ran-card-background, var(--ran-color-bg-muted));box-shadow:var(--ran-card-shadow, none);box-sizing:border-box}.ran-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.ran-card-title-area{flex:1;min-width:0}.ran-card-title{margin:0;color:var(--ran-card-title-color, var(--ran-color-text));font-size:var(--ran-card-title-font-size, 16px);font-weight:var(--ran-card-title-font-weight, 600);line-height:1.3}.ran-card-title:empty{display:none}.ran-card-description{margin:4px 0 0;color:var(--ran-card-description-color, var(--ran-color-text-secondary));font-size:var(--ran-card-description-font-size, 14px);line-height:1.5}.ran-card-description:empty{display:none}.ran-card-body,.ran-card-footer{min-width:0}:host(:not([title]):not([description])) .ran-card-header{display:none}", g = class extends h {
5
+ _shadowDom;
6
+ _titleEl;
7
+ _descriptionEl;
8
+ _headerEl;
9
+ _footerEl;
10
+ static get observedAttributes() {
11
+ return [
12
+ "title",
13
+ "description",
14
+ "sheet"
15
+ ];
16
+ }
17
+ constructor() {
18
+ super(), this._shadowDom = d(this, p);
19
+ const t = c(this._shadowDom, ".ran-card", () => r().class("ran-card").attr("part", "card").children(r().class("ran-card-header").attr("part", "header").children(r().class("ran-card-title-area").children(r().class("ran-card-title").attr("part", "title"), r().class("ran-card-description").attr("part", "description")), s().attr("name", "extra").attr("part", "extra")), r().class("ran-card-body").attr("part", "body").children(s()), r().class("ran-card-footer").attr("part", "footer").children(s().attr("name", "footer"))).build());
20
+ this._headerEl = t.querySelector(".ran-card-header"), this._titleEl = t.querySelector(".ran-card-title"), this._descriptionEl = t.querySelector(".ran-card-description"), this._footerEl = t.querySelector(".ran-card-footer"), this._footerEl.style.display = "none";
21
+ const e = this._footerEl.querySelector('slot[name="footer"]');
22
+ e.addEventListener("slotchange", () => {
23
+ this._footerEl.style.display = e.assignedElements().length > 0 ? "" : "none";
24
+ });
25
+ }
26
+ get title() {
27
+ return a(this, "title");
28
+ }
29
+ set title(t) {
30
+ i(this, "title", t);
31
+ }
32
+ get description() {
33
+ return a(this, "description");
34
+ }
35
+ set description(t) {
36
+ i(this, "description", t);
37
+ }
38
+ get sheet() {
39
+ return a(this, "sheet");
40
+ }
41
+ set sheet(t) {
42
+ i(this, "sheet", t);
43
+ }
44
+ _syncTitle() {
45
+ this._titleEl.textContent = this.getAttribute("title") ?? "";
46
+ }
47
+ _syncDescription() {
48
+ this._descriptionEl.textContent = this.getAttribute("description") ?? "";
49
+ }
50
+ connectedCallback() {
51
+ this._syncTitle(), this._syncDescription(), o(this, this._shadowDom, "sheet", null, this.sheet);
52
+ }
53
+ attributeChangedCallback(t, e, n) {
54
+ e !== n && (t === "title" && this._syncTitle(), t === "description" && this._syncDescription(), t === "sheet" && o(this, this._shadowDom, t, e, n));
55
+ }
56
+ };
57
+ l("r-card", g);
58
+ export {
59
+ g as t
60
+ };
package/dist/card.js ADDED
@@ -0,0 +1,5 @@
1
+ import { t as r } from "./card-DQUJoDUQ.js";
2
+ export {
3
+ r as Card,
4
+ r as default
5
+ };