@fangxinyan/lumina 0.6.18 → 0.7.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 (462) hide show
  1. package/dist/{Alert-HVPI6L4V.css → Alert-DJ3K7N7L.css} +9 -9
  2. package/dist/Alert.cjs +5 -3
  3. package/dist/Alert.d.cts +2 -2
  4. package/dist/Alert.d.ts +2 -2
  5. package/dist/Alert.js +4 -2
  6. package/dist/{AppShell-FZCD4C56.css → AppShell-OWJRJ4ZD.css} +57 -22
  7. package/dist/AppShell.cjs +8 -5
  8. package/dist/AppShell.d.cts +19 -16
  9. package/dist/AppShell.d.ts +19 -16
  10. package/dist/AppShell.js +4 -1
  11. package/dist/{AutoComplete-4YZBMW4E.css → AutoComplete-PNCYHU2T.css} +8 -8
  12. package/dist/AutoComplete.cjs +9 -6
  13. package/dist/AutoComplete.d.cts +2 -1
  14. package/dist/AutoComplete.d.ts +2 -1
  15. package/dist/AutoComplete.js +8 -5
  16. package/dist/Avatar-YBU2YZTW.css +48 -0
  17. package/dist/Avatar.cjs +4 -2
  18. package/dist/Avatar.d.cts +6 -2
  19. package/dist/Avatar.d.ts +6 -2
  20. package/dist/Avatar.js +3 -1
  21. package/dist/Badge-DBWJEV4C.css +22 -0
  22. package/dist/Badge.cjs +4 -2
  23. package/dist/Badge.d.cts +6 -2
  24. package/dist/Badge.d.ts +6 -2
  25. package/dist/Badge.js +3 -1
  26. package/dist/{Button-TUMZUQLI.css → Button-ILNZUX2N.css} +28 -21
  27. package/dist/Button.cjs +6 -4
  28. package/dist/Button.d.cts +2 -14
  29. package/dist/Button.d.ts +2 -14
  30. package/dist/Button.js +4 -2
  31. package/dist/{Calendar-I6NHCXIB.css → Calendar-QJ5HWEJQ.css} +26 -26
  32. package/dist/Calendar.cjs +5 -3
  33. package/dist/Calendar.d.cts +8 -4
  34. package/dist/Calendar.d.ts +8 -4
  35. package/dist/Calendar.js +4 -2
  36. package/dist/Card-VPMTWAWZ.css +98 -0
  37. package/dist/Card.cjs +7 -3
  38. package/dist/Card.d.cts +8 -4
  39. package/dist/Card.d.ts +8 -4
  40. package/dist/Card.js +6 -2
  41. package/dist/Cascader-YBVDK6DC.css +168 -0
  42. package/dist/Cascader.cjs +9 -6
  43. package/dist/Cascader.d.cts +21 -3
  44. package/dist/Cascader.d.ts +21 -3
  45. package/dist/Cascader.js +8 -5
  46. package/dist/Checkbox-IHFML4FV.css +50 -0
  47. package/dist/Checkbox.cjs +5 -3
  48. package/dist/Checkbox.d.cts +10 -2
  49. package/dist/Checkbox.d.ts +10 -2
  50. package/dist/Checkbox.js +4 -2
  51. package/dist/{Collapse-UNBHEPYP.css → Collapse-BTSBHBSY.css} +12 -7
  52. package/dist/Collapse.cjs +5 -3
  53. package/dist/Collapse.d.cts +2 -2
  54. package/dist/Collapse.d.ts +2 -2
  55. package/dist/Collapse.js +4 -2
  56. package/dist/{ColorPicker-LPG6QPYF.css → ColorPicker-GRZOKR5O.css} +17 -32
  57. package/dist/ColorPicker.cjs +9 -3
  58. package/dist/ColorPicker.d.cts +7 -11
  59. package/dist/ColorPicker.d.ts +7 -11
  60. package/dist/ColorPicker.js +8 -2
  61. package/dist/{CommandPalette-RTKWNH2D.css → CommandPalette-GHTX7AAA.css} +22 -23
  62. package/dist/CommandPalette.cjs +8 -5
  63. package/dist/CommandPalette.d.cts +5 -28
  64. package/dist/CommandPalette.d.ts +5 -28
  65. package/dist/CommandPalette.js +7 -4
  66. package/dist/{ContextMenu-WRR2SSWL.css → ContextMenu-NG524Y2P.css} +17 -17
  67. package/dist/ContextMenu.cjs +5 -2
  68. package/dist/ContextMenu.d.cts +2 -19
  69. package/dist/ContextMenu.d.ts +2 -19
  70. package/dist/ContextMenu.js +4 -1
  71. package/dist/{DatePicker-VDVSIARF.css → DatePicker-ZSFDXAYD.css} +4 -4
  72. package/dist/DatePicker.cjs +11 -8
  73. package/dist/DatePicker.d.cts +4 -7
  74. package/dist/DatePicker.d.ts +4 -7
  75. package/dist/DatePicker.js +10 -7
  76. package/dist/{DateTimePicker-DRX7XA74.css → DateTimePicker-EWSISVIF.css} +17 -17
  77. package/dist/DateTimePicker.cjs +11 -8
  78. package/dist/DateTimePicker.d.cts +4 -8
  79. package/dist/DateTimePicker.d.ts +4 -8
  80. package/dist/DateTimePicker.js +10 -7
  81. package/dist/{Divider-RPQCVH3J.css → Divider-OI2BXPBU.css} +10 -10
  82. package/dist/Divider.cjs +4 -2
  83. package/dist/Divider.d.cts +2 -2
  84. package/dist/Divider.d.ts +2 -2
  85. package/dist/Divider.js +3 -1
  86. package/dist/{Drawer-7KICRM4L.css → Drawer-VCXAXWV6.css} +30 -17
  87. package/dist/Drawer.cjs +6 -3
  88. package/dist/Drawer.d.cts +25 -3
  89. package/dist/Drawer.d.ts +25 -3
  90. package/dist/Drawer.js +5 -2
  91. package/dist/{Empty-CZTRZMZQ.css → Empty-U5CBLCAL.css} +5 -5
  92. package/dist/Empty.cjs +4 -2
  93. package/dist/Empty.d.cts +2 -2
  94. package/dist/Empty.d.ts +2 -2
  95. package/dist/Empty.js +3 -1
  96. package/dist/{Form-NGCQWTMZ.css → Form-DNEDZRJA.css} +7 -7
  97. package/dist/Form.cjs +7 -4
  98. package/dist/Form.d.cts +4 -3
  99. package/dist/Form.d.ts +4 -3
  100. package/dist/Form.js +4 -1
  101. package/dist/Icon-HJSUVW4O.css +12 -0
  102. package/dist/Icon.cjs +51 -49
  103. package/dist/Icon.d.cts +8 -8
  104. package/dist/Icon.d.ts +8 -8
  105. package/dist/Icon.js +3 -1
  106. package/dist/{Image-NISJRUWX.css → Image-CZJPPURT.css} +25 -23
  107. package/dist/Image.cjs +10 -7
  108. package/dist/Image.d.cts +5 -24
  109. package/dist/Image.d.ts +5 -24
  110. package/dist/Image.js +6 -3
  111. package/dist/{Input-7GDPGP3E.css → Input-ZUASNDXM.css} +15 -15
  112. package/dist/Input.cjs +7 -5
  113. package/dist/Input.d.cts +2 -1
  114. package/dist/Input.d.ts +2 -1
  115. package/dist/Input.js +5 -3
  116. package/dist/{InputNumber-VXQIWLQC.css → InputNumber-6NHBMRT4.css} +7 -7
  117. package/dist/InputNumber.cjs +7 -5
  118. package/dist/InputNumber.d.cts +2 -1
  119. package/dist/InputNumber.d.ts +2 -1
  120. package/dist/InputNumber.js +6 -4
  121. package/dist/List-6BQIFAIT.css +42 -0
  122. package/dist/List.cjs +4 -2
  123. package/dist/List.d.cts +2 -2
  124. package/dist/List.d.ts +2 -2
  125. package/dist/List.js +3 -1
  126. package/dist/{Message-H222YGR6.css → Message-OTZWQTQ5.css} +13 -13
  127. package/dist/Message.cjs +9 -6
  128. package/dist/Message.d.cts +18 -2
  129. package/dist/Message.d.ts +18 -2
  130. package/dist/Message.js +5 -2
  131. package/dist/{Modal-ZFWNFEA5.css → Modal-UI2FXNDR.css} +29 -18
  132. package/dist/Modal.cjs +7 -4
  133. package/dist/Modal.d.cts +13 -2
  134. package/dist/Modal.d.ts +13 -2
  135. package/dist/Modal.js +6 -3
  136. package/dist/Pagination-POJTWMYR.css +70 -0
  137. package/dist/Pagination.cjs +11 -8
  138. package/dist/Pagination.d.cts +2 -2
  139. package/dist/Pagination.d.ts +2 -2
  140. package/dist/Pagination.js +10 -7
  141. package/dist/{Popover-Y3LDCJPW.css → Popover-LCXLR3EU.css} +13 -14
  142. package/dist/Popover.cjs +6 -3
  143. package/dist/Popover.d.cts +3 -10
  144. package/dist/Popover.d.ts +3 -10
  145. package/dist/Popover.js +5 -2
  146. package/dist/Progress-33WE2NI7.css +90 -0
  147. package/dist/Progress.cjs +4 -2
  148. package/dist/Progress.d.cts +4 -2
  149. package/dist/Progress.d.ts +4 -2
  150. package/dist/Progress.js +3 -1
  151. package/dist/{Radio-IQKASYDF.css → Radio-RL7232MZ.css} +21 -13
  152. package/dist/Radio.cjs +5 -3
  153. package/dist/Radio.d.cts +18 -5
  154. package/dist/Radio.d.ts +18 -5
  155. package/dist/Radio.js +3 -1
  156. package/dist/{Select-YZ2NUJSX.css → Select-TU37MAHZ.css} +64 -40
  157. package/dist/Select.cjs +10 -7
  158. package/dist/Select.d.cts +24 -3
  159. package/dist/Select.d.ts +24 -3
  160. package/dist/Select.js +9 -6
  161. package/dist/{Skeleton-CVWH2VWN.css → Skeleton-FMFE3BRI.css} +9 -4
  162. package/dist/Skeleton.cjs +4 -2
  163. package/dist/Skeleton.d.cts +2 -4
  164. package/dist/Skeleton.d.ts +2 -4
  165. package/dist/Skeleton.js +3 -1
  166. package/dist/Slider-FZ5MI4X2.css +145 -0
  167. package/dist/Slider.cjs +4 -2
  168. package/dist/Slider.d.cts +6 -5
  169. package/dist/Slider.d.ts +6 -5
  170. package/dist/Slider.js +3 -1
  171. package/dist/{Spin-GONGPV4Q.css → Spin-F5YIEENO.css} +15 -9
  172. package/dist/Spin.cjs +4 -2
  173. package/dist/Spin.d.cts +2 -2
  174. package/dist/Spin.d.ts +2 -2
  175. package/dist/Spin.js +3 -1
  176. package/dist/{Splitter-DHNOY4NC.css → Splitter-IQ3PFIKK.css} +4 -4
  177. package/dist/Splitter.cjs +4 -2
  178. package/dist/Splitter.d.cts +8 -12
  179. package/dist/Splitter.d.ts +8 -12
  180. package/dist/Splitter.js +3 -1
  181. package/dist/{StatusBar-FJKEEPXU.css → StatusBar-TCGR3LXP.css} +23 -9
  182. package/dist/StatusBar.cjs +5 -3
  183. package/dist/StatusBar.d.cts +5 -17
  184. package/dist/StatusBar.d.ts +5 -17
  185. package/dist/StatusBar.js +3 -1
  186. package/dist/{Surface-UDDN3DGL.css → Surface-CTN775GD.css} +10 -10
  187. package/dist/Surface.cjs +6 -5
  188. package/dist/Surface.d.cts +10 -1
  189. package/dist/Surface.d.ts +10 -1
  190. package/dist/Surface.js +4 -3
  191. package/dist/{Switch-COAQIOMH.css → Switch-TATU3LPB.css} +16 -8
  192. package/dist/Switch.cjs +4 -2
  193. package/dist/Switch.d.cts +10 -4
  194. package/dist/Switch.d.ts +10 -4
  195. package/dist/Switch.js +3 -1
  196. package/dist/{Table-IWHIIGRJ.css → Table-W4HPZ7MZ.css} +78 -53
  197. package/dist/Table.cjs +14 -10
  198. package/dist/Table.d.cts +32 -3
  199. package/dist/Table.d.ts +32 -3
  200. package/dist/Table.js +13 -9
  201. package/dist/{TablePro-3NGWERWT.css → TablePro-WYE6TXWJ.css} +5 -5
  202. package/dist/TablePro.cjs +15 -11
  203. package/dist/TablePro.d.cts +1 -0
  204. package/dist/TablePro.d.ts +1 -0
  205. package/dist/TablePro.js +14 -10
  206. package/dist/{Tabs-X5U5PCPV.css → Tabs-A3IG6UZ6.css} +10 -10
  207. package/dist/Tabs.cjs +4 -2
  208. package/dist/Tabs.d.cts +2 -2
  209. package/dist/Tabs.d.ts +2 -2
  210. package/dist/Tabs.js +3 -1
  211. package/dist/Tag-5GIZLRAH.css +42 -0
  212. package/dist/Tag.cjs +5 -3
  213. package/dist/Tag.d.cts +2 -2
  214. package/dist/Tag.d.ts +2 -2
  215. package/dist/Tag.js +4 -2
  216. package/dist/{Textarea-YHWKHIFE.css → Textarea-ZGHBZNLX.css} +10 -10
  217. package/dist/Textarea.cjs +6 -4
  218. package/dist/Textarea.d.cts +2 -4
  219. package/dist/Textarea.d.ts +2 -4
  220. package/dist/Textarea.js +4 -2
  221. package/dist/Theme-CLedeJ_C.d.ts +193 -0
  222. package/dist/Theme-uQq2B0Yk.d.cts +193 -0
  223. package/dist/Theme.cjs +57 -11
  224. package/dist/Theme.d.cts +26 -145
  225. package/dist/Theme.d.ts +26 -145
  226. package/dist/Theme.js +3 -1
  227. package/dist/{ThemePanel-TEHB2JCQ.css → ThemePanel-EHNAS4RN.css} +52 -52
  228. package/dist/ThemePanel.cjs +17 -15
  229. package/dist/ThemePanel.d.cts +3 -13
  230. package/dist/ThemePanel.d.ts +3 -13
  231. package/dist/ThemePanel.js +14 -12
  232. package/dist/{TimePicker-ZBJOXH3U.css → TimePicker-WJ3FSK6A.css} +17 -17
  233. package/dist/TimePicker.cjs +10 -7
  234. package/dist/TimePicker.d.cts +2 -8
  235. package/dist/TimePicker.d.ts +2 -8
  236. package/dist/TimePicker.js +9 -6
  237. package/dist/{Timeline-CRFZ3I2W.css → Timeline-FUFO2UGY.css} +28 -13
  238. package/dist/Timeline.cjs +5 -3
  239. package/dist/Timeline.d.cts +2 -7
  240. package/dist/Timeline.d.ts +2 -7
  241. package/dist/Timeline.js +4 -2
  242. package/dist/{Tooltip-5FSPJWLX.css → Tooltip-2EUNTOTW.css} +3 -3
  243. package/dist/Tooltip.cjs +6 -3
  244. package/dist/Tooltip.d.cts +2 -2
  245. package/dist/Tooltip.d.ts +2 -2
  246. package/dist/Tooltip.js +5 -2
  247. package/dist/{Typography-32QQLD4F.css → Typography-CQ2OZXQH.css} +105 -42
  248. package/dist/Typography.cjs +11 -8
  249. package/dist/Typography.d.cts +12 -36
  250. package/dist/Typography.d.ts +12 -36
  251. package/dist/Typography.js +6 -3
  252. package/dist/chunk-2A4GYSN4.js +294 -0
  253. package/dist/{chunk-QMX67CVT.cjs → chunk-2AUXUZ3Z.cjs} +56 -31
  254. package/dist/chunk-2BIOTRQC.js +40 -0
  255. package/dist/{chunk-A6O25EP2.js → chunk-2HIN5NFM.js} +14 -6
  256. package/dist/{chunk-I7TOBKJO.js → chunk-3DKFS44V.js} +84 -23
  257. package/dist/{chunk-E22OIVYP.js → chunk-3EHJ5QI3.js} +202 -69
  258. package/dist/{chunk-X5MYHDEQ.cjs → chunk-3EMWDDWK.cjs} +372 -117
  259. package/dist/chunk-3F424R5P.js +143 -0
  260. package/dist/chunk-3IZZBM56.js +269 -0
  261. package/dist/{chunk-DUFRASGO.js → chunk-3QXP2ZNP.js} +18 -23
  262. package/dist/{chunk-5QEI7GGA.cjs → chunk-434Y2JVW.cjs} +60 -27
  263. package/dist/{chunk-SOCYOUGM.js → chunk-4SKHRPDH.js} +168 -64
  264. package/dist/{chunk-L6GIV5DQ.cjs → chunk-56I6ZKGU.cjs} +40 -22
  265. package/dist/{chunk-R3DTXVP2.js → chunk-5AXNUX3J.js} +8 -5
  266. package/dist/chunk-5CZA33BK.cjs +229 -0
  267. package/dist/{chunk-6K5YI4ZE.js → chunk-62VV5COT.js} +16 -6
  268. package/dist/chunk-6DKPJ5LV.cjs +294 -0
  269. package/dist/{chunk-OTSDPQPV.js → chunk-6RQJXSWN.js} +50 -30
  270. package/dist/{chunk-V5KUC5VH.cjs → chunk-77HU7JWK.cjs} +40 -13
  271. package/dist/chunk-7QAVPVMW.js +180 -0
  272. package/dist/chunk-7VLAHOA7.cjs +191 -0
  273. package/dist/chunk-ALAG4ZUH.js +72 -0
  274. package/dist/chunk-ARUN2DMD.js +39 -0
  275. package/dist/chunk-AUO2YYHB.js +248 -0
  276. package/dist/{chunk-6MEOLYNQ.js → chunk-AURYNA6G.js} +6 -5
  277. package/dist/chunk-BIPOXOHP.cjs +287 -0
  278. package/dist/{chunk-V5SQOZPF.js → chunk-BJDQVVCG.js} +38 -20
  279. package/dist/{chunk-BVQOJKRX.js → chunk-BKW5PXEO.js} +115 -72
  280. package/dist/{chunk-UW57F3UO.cjs → chunk-D7YSY5RZ.cjs} +208 -75
  281. package/dist/chunk-DRDDQCDD.js +322 -0
  282. package/dist/chunk-DU2DSERH.js +190 -0
  283. package/dist/{chunk-PSQ3HNZP.cjs → chunk-E66PSVBU.cjs} +106 -19
  284. package/dist/{chunk-UGAN4BBW.js → chunk-EA3NZBCZ.js} +251 -125
  285. package/dist/chunk-EAUB6FEN.js +262 -0
  286. package/dist/chunk-EE5KXDRK.cjs +1223 -0
  287. package/dist/chunk-EE7IJ3MB.js +1 -0
  288. package/dist/{chunk-NXBFEIUX.cjs → chunk-ENFLP7SN.cjs} +255 -129
  289. package/dist/chunk-EUTK2ZRJ.cjs +61 -0
  290. package/dist/{chunk-HSAJUEO7.cjs → chunk-F7WUCOBP.cjs} +150 -86
  291. package/dist/{chunk-YB3IWIOJ.cjs → chunk-FJB3243S.cjs} +18 -23
  292. package/dist/chunk-FKCPSVC4.cjs +188 -0
  293. package/dist/chunk-FMUHLIHB.cjs +94 -0
  294. package/dist/chunk-FY73C7JK.js +520 -0
  295. package/dist/{chunk-6EOSMK34.cjs → chunk-G5LCOBOT.cjs} +20 -1
  296. package/dist/{chunk-5ERD3W24.cjs → chunk-GFKWSDD6.cjs} +18 -8
  297. package/dist/{chunk-T2O4DTDE.cjs → chunk-GTFP7HA3.cjs} +58 -32
  298. package/dist/chunk-HQFKXTX6.js +60 -0
  299. package/dist/chunk-HSDMJUB6.cjs +319 -0
  300. package/dist/chunk-HVPUGYBY.js +166 -0
  301. package/dist/chunk-HYHBCHFM.cjs +167 -0
  302. package/dist/chunk-HYJSMFZA.cjs +2 -0
  303. package/dist/chunk-I4YPBAQ5.js +163 -0
  304. package/dist/{chunk-IPSNC5VZ.js → chunk-JHM7MN3G.js} +15 -7
  305. package/dist/{chunk-4ACCOYBY.cjs → chunk-JINKQT6H.cjs} +20 -8
  306. package/dist/{chunk-6Q76VLCE.cjs → chunk-JKUXA3U6.cjs} +50 -30
  307. package/dist/{chunk-D7GK6H6V.js → chunk-K5HGHOG7.js} +50 -21
  308. package/dist/chunk-KATJAJUU.js +78 -0
  309. package/dist/chunk-KCDOC3HS.cjs +100 -0
  310. package/dist/{chunk-M4NJTJKV.cjs → chunk-LDX6Q6RK.cjs} +8 -5
  311. package/dist/chunk-LEDESWNL.js +83 -0
  312. package/dist/chunk-LG62MPMU.cjs +213 -0
  313. package/dist/{chunk-7NTTRKNT.js → chunk-LJVQQEME.js} +54 -28
  314. package/dist/chunk-LOWTSOWT.js +199 -0
  315. package/dist/{chunk-FDZG27IG.js → chunk-LQMOYVQF.js} +57 -32
  316. package/dist/{chunk-P2OQTJZP.cjs → chunk-MCDW3VKZ.cjs} +17 -6
  317. package/dist/{chunk-BT2RXFT4.cjs → chunk-MUZQWIMR.cjs} +121 -78
  318. package/dist/chunk-NRJXZPZR.cjs +351 -0
  319. package/dist/chunk-O6G3F5L4.js +311 -0
  320. package/dist/{chunk-3VSHGM54.js → chunk-OLYSSZHP.js} +126 -68
  321. package/dist/{chunk-A4Z7PLHV.cjs → chunk-PIJV2FHO.cjs} +135 -77
  322. package/dist/{chunk-FYSXJXNW.js → chunk-PQOBBASY.js} +10 -9
  323. package/dist/chunk-Q565GDVK.cjs +205 -0
  324. package/dist/{chunk-FDUQPAQE.cjs → chunk-Q5HLC56A.cjs} +122 -28
  325. package/dist/chunk-QDCPVI3S.cjs +333 -0
  326. package/dist/{chunk-ZR4IMROK.js → chunk-QDMFXRPI.js} +122 -28
  327. package/dist/chunk-QDY56GGO.js +234 -0
  328. package/dist/{chunk-4KDABJSY.cjs → chunk-QNQSNVCU.cjs} +86 -25
  329. package/dist/chunk-QYPA77OI.cjs +55 -0
  330. package/dist/chunk-RAK6CENJ.js +83 -0
  331. package/dist/{chunk-BW76ENTW.cjs → chunk-RERMZNF3.cjs} +10 -9
  332. package/dist/chunk-RMGFRAZ2.cjs +270 -0
  333. package/dist/chunk-RPO7657K.js +228 -0
  334. package/dist/chunk-STQDKMS5.cjs +288 -0
  335. package/dist/{chunk-HG6YS4I7.js → chunk-SXLRWYQQ.js} +71 -24
  336. package/dist/{chunk-SW2HMNCA.cjs → chunk-T4RR6NVU.cjs} +17 -9
  337. package/dist/{chunk-6SPMHY54.js → chunk-TSL3F2K3.js} +20 -2
  338. package/dist/{chunk-BNY2NVTL.cjs → chunk-TYZ6L7E6.cjs} +48 -28
  339. package/dist/{chunk-MOZ52KN6.js → chunk-U3SG2YT2.js} +39 -12
  340. package/dist/{chunk-POU3W5J3.cjs → chunk-U5YYOOLC.cjs} +13 -6
  341. package/dist/chunk-U7VEPMCX.cjs +221 -0
  342. package/dist/chunk-UE4HFGJ6.js +264 -0
  343. package/dist/chunk-ULTDRMGN.js +1175 -0
  344. package/dist/{chunk-6HF6UF73.js → chunk-UQI4R32R.js} +368 -113
  345. package/dist/{chunk-MWEHU7YO.cjs → chunk-VA3JWOAB.cjs} +172 -68
  346. package/dist/chunk-VQEMMJHC.js +33 -0
  347. package/dist/{chunk-S2ZGXBUH.cjs → chunk-VVRXNGYL.cjs} +218 -42
  348. package/dist/{chunk-JMFHL7GN.cjs → chunk-VX6MZO4K.cjs} +100 -22
  349. package/dist/{chunk-2FOC3D6X.js → chunk-WMZV7PNO.js} +19 -7
  350. package/dist/{chunk-MYW7LNB2.cjs → chunk-WROF2PVG.cjs} +40 -21
  351. package/dist/chunk-XZXY3XCL.cjs +105 -0
  352. package/dist/{chunk-5VOUUQF5.js → chunk-Y22PTPA7.js} +145 -81
  353. package/dist/chunk-Y2MT6PI6.js +207 -0
  354. package/dist/chunk-YAYSXZZZ.cjs +82 -0
  355. package/dist/{chunk-6LN4VVX7.js → chunk-YBGMTQ2V.js} +48 -28
  356. package/dist/{chunk-TYLDISRK.js → chunk-YKHIIC7M.js} +13 -6
  357. package/dist/{chunk-3VXGZ3SJ.js → chunk-YPMQC5HX.js} +57 -24
  358. package/dist/{chunk-UWL6DRZW.cjs → chunk-YUJ7Z6N2.cjs} +74 -27
  359. package/dist/{chunk-LEMMFFEY.cjs → chunk-ZEYK37VW.cjs} +15 -7
  360. package/dist/{chunk-ES7AWMNH.cjs → chunk-ZHVR4YPB.cjs} +6 -5
  361. package/dist/{chunk-MPOO5VPW.cjs → chunk-ZYIE3BH7.cjs} +50 -21
  362. package/dist/componentThemeTypes-Jt4B5aU8.d.cts +77 -0
  363. package/dist/componentThemeTypes-Jt4B5aU8.d.ts +77 -0
  364. package/dist/index.cjs +253 -206
  365. package/dist/index.d.cts +11 -9
  366. package/dist/index.d.ts +11 -9
  367. package/dist/index.js +56 -53
  368. package/dist/styles.css +1628 -701
  369. package/dist/{tokens-RYJ3DFTU.css → tokens-CEJVVA3G.css} +10 -0
  370. package/dist/tokens.css +10 -0
  371. package/docs/llms/appshell.md +9 -6
  372. package/docs/llms/autocomplete.md +8 -2
  373. package/docs/llms/avatar.md +2 -0
  374. package/docs/llms/badge.md +2 -0
  375. package/docs/llms/calendar.md +7 -2
  376. package/docs/llms/card.md +20 -1
  377. package/docs/llms/cascader.md +27 -5
  378. package/docs/llms/checkbox.md +13 -0
  379. package/docs/llms/collapse.md +13 -5
  380. package/docs/llms/colorpicker.md +4 -3
  381. package/docs/llms/commandpalette.md +10 -2
  382. package/docs/llms/contextmenu.md +14 -2
  383. package/docs/llms/datepicker.md +7 -0
  384. package/docs/llms/datetimepicker.md +7 -0
  385. package/docs/llms/drawer.md +20 -4
  386. package/docs/llms/form.md +5 -2
  387. package/docs/llms/icon.md +25 -1
  388. package/docs/llms/image.md +3 -3
  389. package/docs/llms/list.md +11 -0
  390. package/docs/llms/message.md +31 -8
  391. package/docs/llms/modal.md +20 -8
  392. package/docs/llms/pagination.md +12 -4
  393. package/docs/llms/popover.md +11 -1
  394. package/docs/llms/progress.md +1 -0
  395. package/docs/llms/radio.md +13 -0
  396. package/docs/llms/select.md +29 -2
  397. package/docs/llms/sidebar.md +24 -0
  398. package/docs/llms/slider.md +5 -2
  399. package/docs/llms/splitter.md +5 -2
  400. package/docs/llms/switch.md +13 -0
  401. package/docs/llms/table.md +7 -8
  402. package/docs/llms/theme.md +83 -28
  403. package/docs/llms/themepanel.md +1 -0
  404. package/docs/llms/titlebar.md +1 -0
  405. package/docs/llms/tooltip.md +7 -2
  406. package/docs/llms/typography.md +27 -3
  407. package/docs/llms/windowcontrols.md +11 -3
  408. package/docs/llms.md +2 -2
  409. package/package.json +212 -2
  410. package/dist/Avatar-TNPOHVY5.css +0 -40
  411. package/dist/Badge-DPGLV3D3.css +0 -22
  412. package/dist/Card-W3ATFUJW.css +0 -77
  413. package/dist/Cascader-ANEQUPMI.css +0 -150
  414. package/dist/Checkbox-EDNPZRIP.css +0 -42
  415. package/dist/List-LSMU5QAC.css +0 -26
  416. package/dist/Pagination-YSZSNFHG.css +0 -68
  417. package/dist/Progress-CZNXCYGW.css +0 -80
  418. package/dist/Slider-UM2IZZBH.css +0 -127
  419. package/dist/Tag-G2XWAL7A.css +0 -42
  420. package/dist/chunk-262ED6WQ.cjs +0 -88
  421. package/dist/chunk-4HJBF4GY.js +0 -218
  422. package/dist/chunk-4TTRHEGM.cjs +0 -217
  423. package/dist/chunk-5A6KSYWA.cjs +0 -67
  424. package/dist/chunk-5MOYKVB7.js +0 -192
  425. package/dist/chunk-7IO3EOHN.cjs +0 -200
  426. package/dist/chunk-7QXP6DXC.cjs +0 -129
  427. package/dist/chunk-AAPZLBHQ.js +0 -165
  428. package/dist/chunk-ARUPS7JH.js +0 -66
  429. package/dist/chunk-ATUPFAPZ.cjs +0 -76
  430. package/dist/chunk-CFZVWY5N.js +0 -178
  431. package/dist/chunk-DSLYWX4O.js +0 -25
  432. package/dist/chunk-FQJY4D3T.cjs +0 -47
  433. package/dist/chunk-GNV6W4BN.js +0 -495
  434. package/dist/chunk-HBO7ZDEQ.js +0 -29
  435. package/dist/chunk-I777JTTG.js +0 -150
  436. package/dist/chunk-IOAOG5L7.js +0 -191
  437. package/dist/chunk-IOUAZYK2.cjs +0 -116
  438. package/dist/chunk-IZHH6CVY.js +0 -123
  439. package/dist/chunk-JFL2WMJZ.js +0 -106
  440. package/dist/chunk-KMPFESEV.js +0 -41
  441. package/dist/chunk-KYV75JPQ.js +0 -147
  442. package/dist/chunk-N7OQNSII.cjs +0 -145
  443. package/dist/chunk-P64NPZBG.js +0 -113
  444. package/dist/chunk-PKNRTFNE.cjs +0 -526
  445. package/dist/chunk-PU7VXDAS.js +0 -64
  446. package/dist/chunk-RFI5R42I.cjs +0 -138
  447. package/dist/chunk-RR2BKV65.js +0 -39
  448. package/dist/chunk-RSSOX4RQ.cjs +0 -240
  449. package/dist/chunk-RZEFKXL3.cjs +0 -104
  450. package/dist/chunk-S7IHWY24.js +0 -81
  451. package/dist/chunk-SOQ56ZI2.cjs +0 -49
  452. package/dist/chunk-TBNPJPYG.cjs +0 -61
  453. package/dist/chunk-TJECLLN4.js +0 -344
  454. package/dist/chunk-ULUD3FED.cjs +0 -138
  455. package/dist/chunk-VA2I7ZAL.cjs +0 -190
  456. package/dist/chunk-VS3I5OKA.cjs +0 -214
  457. package/dist/chunk-WMGMIE2D.js +0 -113
  458. package/dist/chunk-X7XP6GEI.cjs +0 -63
  459. package/dist/chunk-XCXUGHDF.js +0 -91
  460. package/dist/chunk-YAFDVNXT.js +0 -27
  461. package/dist/chunk-ZD3L4V3H.js +0 -54
  462. package/dist/chunk-ZTCRD2FL.js +0 -45
package/dist/styles.css CHANGED
@@ -126,6 +126,15 @@
126
126
  --dur: 220ms;
127
127
  --dur-slow: 360ms;
128
128
  }
129
+ /* 尊重系统的减少动态效果偏好,同时保持组件状态切换事件可完成。 */
130
+ @media (prefers-reduced-motion: reduce) {
131
+ :root,
132
+ [data-theme] {
133
+ --dur-fast: 0.01ms;
134
+ --dur: 0.01ms;
135
+ --dur-slow: 0.01ms;
136
+ }
137
+ }
129
138
  /* Explicit light reset for scoped ThemeProvider instances.
130
139
  :root already has these defaults, but nested [data-theme="light"] must not
131
140
  inherit a dark or custom parent surface. */
@@ -259,8 +268,19 @@ input, textarea, select { font-family: inherit; color: inherit; }
259
268
  @keyframes fadeIn { from { opacity: 0; } }
260
269
  @keyframes menuIn { from { opacity: 0; transform: translateY(-4px); } }
261
270
  /* Components — order mirrors the original monolithic components.css section order. */
271
+ .named-icon.spinning > svg {
272
+ animation: spin 0.9s linear infinite;
273
+ }
274
+ svg[data-lumina-icon-color],
275
+ .named-icon[data-lumina-icon-color] {
276
+ color: var(--lmn-icon-fg, var(--fg));
277
+ }
278
+ @media (prefers-reduced-motion: reduce) {
279
+ .named-icon.spinning > svg { animation: none; }
280
+ }
262
281
  /* ============ Button ============ */
263
282
  .btn {
283
+ --button-bg: var(--lmn-button-bg, var(--bg));
264
284
  display: inline-flex;
265
285
  align-items: center;
266
286
  justify-content: center;
@@ -272,9 +292,9 @@ input, textarea, select { font-family: inherit; color: inherit; }
272
292
  font-size: var(--fs-md);
273
293
  font-weight: 500;
274
294
  font-family: inherit;
275
- color: var(--fg);
276
- background: var(--bg);
277
- box-shadow: var(--neu-shadow-control);
295
+ color: var(--lmn-button-fg, var(--fg));
296
+ background: var(--button-bg);
297
+ box-shadow: var(--lmn-button-neu-shadow-control, var(--neu-shadow-control));
278
298
  cursor: pointer;
279
299
  user-select: none;
280
300
  white-space: nowrap;
@@ -305,40 +325,42 @@ input, textarea, select { font-family: inherit; color: inherit; }
305
325
  overflow: visible;
306
326
  }
307
327
  .btn.primary {
308
- color: var(--accent-ink);
309
- background: color-mix(in oklch, var(--accent-soft) 62%, var(--bg));
328
+ --button-bg: color-mix(in oklch, var(--lmn-button-accent-soft, var(--accent-soft)) 62%, var(--lmn-button-bg, var(--bg)));
329
+ color: var(--lmn-button-accent-ink, var(--accent-ink));
330
+ background: var(--button-bg);
310
331
  font-weight: 600;
311
332
  }
312
333
  .btn.ghost {
313
334
  background: transparent;
314
335
  box-shadow: none;
315
- color: var(--fg-muted);
336
+ color: var(--lmn-button-fg-muted, var(--fg-muted));
316
337
  }
317
- .btn.danger { color: var(--danger); }
338
+ .btn.danger { color: var(--lmn-button-danger, var(--danger)); }
318
339
  .btn:hover {
319
- box-shadow: var(--neu-shadow-panel);
340
+ background: var(--lmn-button-hover-background, var(--button-bg));
341
+ box-shadow: var(--lmn-button-neu-shadow-panel, var(--neu-shadow-panel));
320
342
  }
321
343
  .btn.ghost:hover {
322
- background: var(--bg);
344
+ background: var(--lmn-button-hover-background, var(--lmn-button-bg, var(--bg)));
323
345
  border-color: transparent;
324
- box-shadow: var(--neu-shadow-subtle);
325
- color: var(--fg);
346
+ box-shadow: var(--lmn-button-neu-shadow-subtle, var(--neu-shadow-subtle));
347
+ color: var(--lmn-button-fg, var(--fg));
326
348
  }
327
349
  .btn.danger:hover {
328
- color: var(--danger);
350
+ color: var(--lmn-button-danger, var(--danger));
329
351
  }
330
352
  .btn:active,
331
353
  .btn.pressed {
332
- box-shadow: var(--neu-shadow-inset-strong);
354
+ box-shadow: var(--lmn-button-neu-shadow-inset-strong, var(--neu-shadow-inset-strong));
333
355
  }
334
356
  .btn.ghost:active,
335
357
  .btn.ghost.pressed {
336
- background: var(--bg);
337
- color: var(--fg);
358
+ background: var(--lmn-button-bg, var(--bg));
359
+ color: var(--lmn-button-fg, var(--fg));
338
360
  }
339
361
  .btn.danger:active,
340
362
  .btn.danger.pressed {
341
- color: var(--danger);
363
+ color: var(--lmn-button-danger, var(--danger));
342
364
  }
343
365
  .btn.icon { width: var(--ctrl-h); padding: 0; }
344
366
  .btn.sm { height: var(--ctrl-h-sm); padding: 0 var(--ctrl-pad-x-sm); font-size: var(--fs-sm); border-radius: var(--r-sm); }
@@ -347,17 +369,17 @@ input, textarea, select { font-family: inherit; color: inherit; }
347
369
  .btn.lg.icon { width: var(--ctrl-h-lg); padding: 0; }
348
370
  .btn.block { width: 100%; flex-shrink: 1; }
349
371
  .btn[disabled], .btn.disabled, .btn:disabled {
350
- color: var(--fg-subtle);
372
+ color: var(--lmn-button-fg-subtle, var(--fg-subtle));
351
373
  cursor: not-allowed;
352
374
  border-color: transparent;
353
- box-shadow: var(--neu-shadow-subtle);
375
+ box-shadow: var(--lmn-button-neu-shadow-subtle, var(--neu-shadow-subtle));
354
376
  transform: none;
355
377
  }
356
378
  .btn[disabled]:hover, .btn:disabled:hover, .btn.disabled:hover {
357
- color: var(--fg-subtle);
358
- background: var(--bg);
379
+ color: var(--lmn-button-fg-subtle, var(--fg-subtle));
380
+ background: var(--lmn-button-bg, var(--bg));
359
381
  border-color: transparent;
360
- box-shadow: var(--neu-shadow-subtle);
382
+ box-shadow: var(--lmn-button-neu-shadow-subtle, var(--neu-shadow-subtle));
361
383
  transform: none;
362
384
  }
363
385
  .btn.loading { cursor: wait; }
@@ -369,6 +391,9 @@ input, textarea, select { font-family: inherit; color: inherit; }
369
391
  animation: spin 0.8s linear infinite;
370
392
  display: inline-block;
371
393
  }
394
+ @media (prefers-reduced-motion: reduce) {
395
+ .btn .spinner { animation: none; }
396
+ }
372
397
  /* ============ Input ============ */
373
398
  .input-shell {
374
399
  display: inline-flex;
@@ -378,7 +403,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
378
403
  }
379
404
  .input-count {
380
405
  font-size: var(--fs-xs);
381
- color: var(--fg-subtle);
406
+ color: var(--lmn-input-fg-subtle, var(--fg-subtle));
382
407
  font-variant-numeric: tabular-nums;
383
408
  text-align: right;
384
409
  }
@@ -390,19 +415,19 @@ input, textarea, select { font-family: inherit; color: inherit; }
390
415
  height: var(--ctrl-h);
391
416
  padding: 0 var(--ctrl-pad-x);
392
417
  border-radius: var(--r-md);
393
- background: var(--bg);
394
- box-shadow: var(--neu-shadow-inset);
418
+ background: var(--lmn-input-bg, var(--bg));
419
+ box-shadow: var(--lmn-input-neu-shadow-inset, var(--neu-shadow-inset));
395
420
  transition: box-shadow var(--dur) var(--ease);
396
421
  gap: 8px;
397
422
  }
398
423
  .input-wrap.sm { height: var(--field-h-sm); padding: 0 var(--ctrl-pad-x-sm); border-radius: var(--r-sm); gap: 6px; }
399
424
  .input-wrap.lg { height: var(--field-h-lg); padding: 0 var(--ctrl-pad-x); border-radius: var(--r-lg); gap: 10px; }
400
- .input-wrap:focus-within { box-shadow: var(--neu-shadow-inset), 0 0 0 2px var(--accent-glow); }
401
- .input-wrap.invalid { box-shadow: var(--neu-shadow-inset), 0 0 0 2px color-mix(in oklch, var(--danger) 30%, transparent); }
425
+ .input-wrap:focus-within { box-shadow: var(--lmn-input-neu-shadow-inset, var(--neu-shadow-inset)), 0 0 0 2px var(--lmn-input-accent-glow, var(--accent-glow)); }
426
+ .input-wrap.invalid { box-shadow: var(--lmn-input-neu-shadow-inset, var(--neu-shadow-inset)), 0 0 0 2px color-mix(in oklch, var(--lmn-input-danger, var(--danger)) 30%, transparent); }
402
427
  .input-wrap.disabled { opacity: 0.6; cursor: not-allowed; }
403
428
  .input-wrap .lead,
404
429
  .input-wrap .trail {
405
- color: var(--fg-subtle);
430
+ color: var(--lmn-input-fg-subtle, var(--fg-subtle));
406
431
  flex-shrink: 0;
407
432
  display: inline-flex;
408
433
  align-items: center;
@@ -418,13 +443,13 @@ input, textarea, select { font-family: inherit; color: inherit; }
418
443
  }
419
444
  .input-wrap .lead.interactive,
420
445
  .input-wrap .trail.interactive { cursor: pointer; pointer-events: auto; }
421
- .input-wrap .trail:hover { color: var(--fg); }
446
+ .input-wrap .trail:hover { color: var(--lmn-input-fg, var(--fg)); }
422
447
  .input-wrap .lead:not(.interactive),
423
448
  .input-wrap .trail:not(.interactive) { pointer-events: none; }
424
449
  .input-wrap .input-affix {
425
450
  display: inline-flex;
426
451
  align-items: center;
427
- color: var(--fg-muted);
452
+ color: var(--lmn-input-fg-muted, var(--fg-muted));
428
453
  font-size: var(--fs-md);
429
454
  white-space: nowrap;
430
455
  user-select: none;
@@ -439,20 +464,20 @@ input, textarea, select { font-family: inherit; color: inherit; }
439
464
  width: 18px;
440
465
  height: 18px;
441
466
  border-radius: 999px;
442
- color: var(--fg-subtle);
467
+ color: var(--lmn-input-fg-subtle, var(--fg-subtle));
443
468
  background: transparent;
444
469
  cursor: pointer;
445
470
  flex-shrink: 0;
446
471
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
447
472
  }
448
473
  .input-wrap .input-clear:hover {
449
- color: var(--fg);
450
- background: var(--bg-sunken);
474
+ color: var(--lmn-input-fg, var(--fg));
475
+ background: var(--lmn-input-bg-sunken, var(--bg-sunken));
451
476
  }
452
477
  .input-password-toggle {
453
478
  border: none;
454
479
  background: transparent;
455
- color: var(--fg-subtle);
480
+ color: var(--lmn-input-fg-subtle, var(--fg-subtle));
456
481
  padding: 0;
457
482
  display: inline-flex;
458
483
  align-items: center;
@@ -461,7 +486,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
461
486
  font-family: inherit;
462
487
  flex-shrink: 0;
463
488
  }
464
- .input-password-toggle:hover { color: var(--fg); }
489
+ .input-password-toggle:hover { color: var(--lmn-input-fg, var(--fg)); }
465
490
  .input-wrap > .input {
466
491
  flex: 1;
467
492
  min-width: 0;
@@ -471,15 +496,105 @@ input, textarea, select { font-family: inherit; color: inherit; }
471
496
  border: none;
472
497
  background: transparent;
473
498
  box-shadow: none;
474
- color: var(--fg);
499
+ color: var(--lmn-input-fg, var(--fg));
475
500
  font-size: var(--fs-md);
476
501
  font-family: inherit;
477
502
  outline: none;
478
503
  }
479
504
  .input-wrap.sm > .input { font-size: var(--fs-sm); }
480
505
  .input-wrap.lg > .input { font-size: var(--fs-lg); }
481
- .input-wrap > .input::placeholder { color: var(--fg-subtle); }
506
+ .input-wrap > .input::placeholder { color: var(--lmn-input-fg-subtle, var(--fg-subtle)); }
482
507
  .input-wrap.disabled > .input { cursor: not-allowed; }
508
+ /* ============ InputNumber ============ */
509
+ .ipn-steppers {
510
+ display: inline-flex;
511
+ flex-direction: column;
512
+ align-self: stretch;
513
+ margin: 4px -6px 4px 6px;
514
+ width: 16px;
515
+ border-left: 1px solid var(--lmn-input-divider, var(--divider));
516
+ overflow: hidden;
517
+ border-top-right-radius: calc(var(--r-md) - 4px);
518
+ border-bottom-right-radius: calc(var(--r-md) - 4px);
519
+ }
520
+ .input-wrap.sm .ipn-steppers { margin: 3px -4px 3px 6px; width: 14px; }
521
+ .input-wrap.lg .ipn-steppers { margin: 5px -6px 5px 8px; width: 18px; }
522
+ .ipn-step {
523
+ flex: 1;
524
+ display: inline-flex;
525
+ align-items: center;
526
+ justify-content: center;
527
+ padding: 0;
528
+ border: none;
529
+ background: transparent;
530
+ color: var(--lmn-input-fg-subtle, var(--fg-subtle));
531
+ cursor: pointer;
532
+ transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
533
+ }
534
+ .ipn-step.up:not(.down) { border-bottom: 1px solid var(--lmn-input-divider, var(--divider)); }
535
+ .ipn-step.up { border-bottom: 1px solid var(--lmn-input-divider, var(--divider)); }
536
+ .ipn-step:hover:not(:disabled) {
537
+ color: var(--lmn-input-accent-ink, var(--accent-ink));
538
+ background: var(--lmn-input-bg-sunken, var(--bg-sunken));
539
+ }
540
+ .ipn-step:active:not(:disabled) {
541
+ color: var(--lmn-input-accent, var(--accent));
542
+ }
543
+ .ipn-step:disabled {
544
+ cursor: not-allowed;
545
+ opacity: 0.35;
546
+ }
547
+ /* ============ AutoComplete ============ */
548
+ .autocomplete {
549
+ display: inline-block;
550
+ width: 100%;
551
+ position: relative;
552
+ }
553
+ .autocomplete-panel {
554
+ z-index: 1500;
555
+ background: var(--lmn-auto-complete-bg, var(--bg));
556
+ border-radius: var(--r-md);
557
+ box-shadow: var(--lmn-auto-complete-neu-shadow-float, var(--neu-shadow-float));
558
+ padding: 6px;
559
+ max-height: 280px;
560
+ overflow-y: auto;
561
+ animation: menuIn var(--dur) var(--ease);
562
+ display: flex;
563
+ flex-direction: column;
564
+ gap: 1px;
565
+ }
566
+ .autocomplete-item {
567
+ display: flex;
568
+ align-items: center;
569
+ width: 100%;
570
+ padding: 8px 10px;
571
+ border: none;
572
+ background: transparent;
573
+ box-shadow: none;
574
+ color: var(--lmn-auto-complete-fg, var(--fg));
575
+ font: inherit;
576
+ font-size: 13px;
577
+ text-align: left;
578
+ border-radius: var(--r-sm);
579
+ cursor: pointer;
580
+ transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
581
+ box-shadow var(--dur-fast) var(--ease);
582
+ }
583
+ .autocomplete-item:disabled {
584
+ color: var(--lmn-auto-complete-fg-subtle, var(--fg-subtle));
585
+ cursor: not-allowed;
586
+ }
587
+ .autocomplete-item.active:not(:disabled) {
588
+ background: var(--lmn-auto-complete-bg, var(--bg));
589
+ color: var(--lmn-auto-complete-accent-ink, var(--accent-ink));
590
+ box-shadow: var(--lmn-auto-complete-neu-shadow-inset, var(--neu-shadow-inset));
591
+ }
592
+ .autocomplete-empty {
593
+ padding: 16px 12px;
594
+ text-align: center;
595
+ color: var(--lmn-auto-complete-fg-subtle, var(--fg-subtle));
596
+ font-size: 13px;
597
+ }
483
598
  /* ============ Textarea ============ */
484
599
  .textarea-shell {
485
600
  display: inline-flex;
@@ -489,7 +604,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
489
604
  }
490
605
  .textarea-count {
491
606
  font-size: 11px;
492
- color: var(--fg-subtle);
607
+ color: var(--lmn-textarea-fg-subtle, var(--fg-subtle));
493
608
  font-variant-numeric: tabular-nums;
494
609
  text-align: right;
495
610
  }
@@ -504,14 +619,14 @@ input, textarea, select { font-family: inherit; color: inherit; }
504
619
  width: 18px;
505
620
  height: 18px;
506
621
  border-radius: 999px;
507
- color: var(--fg-subtle);
622
+ color: var(--lmn-textarea-fg-subtle, var(--fg-subtle));
508
623
  background: transparent;
509
624
  cursor: pointer;
510
625
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
511
626
  }
512
627
  .textarea-wrap .textarea-clear:hover {
513
- color: var(--fg);
514
- background: var(--bg-sunken);
628
+ color: var(--lmn-textarea-fg, var(--fg));
629
+ background: var(--lmn-textarea-bg-sunken, var(--bg-sunken));
515
630
  }
516
631
  .textarea {
517
632
  width: 100%;
@@ -519,9 +634,9 @@ input, textarea, select { font-family: inherit; color: inherit; }
519
634
  padding: 12px 14px;
520
635
  border: none;
521
636
  border-radius: var(--r-md);
522
- background: var(--bg);
523
- box-shadow: var(--neu-shadow-inset);
524
- color: var(--fg);
637
+ background: var(--lmn-textarea-bg, var(--bg));
638
+ box-shadow: var(--lmn-textarea-neu-shadow-inset, var(--neu-shadow-inset));
639
+ color: var(--lmn-textarea-fg, var(--fg));
525
640
  font-size: 13px;
526
641
  font-family: inherit;
527
642
  line-height: 1.55;
@@ -529,9 +644,9 @@ input, textarea, select { font-family: inherit; color: inherit; }
529
644
  outline: none;
530
645
  transition: box-shadow var(--dur) var(--ease);
531
646
  }
532
- .textarea:focus { box-shadow: var(--neu-shadow-inset), 0 0 0 2px var(--accent-glow); }
533
- .textarea.invalid { box-shadow: var(--neu-shadow-inset), 0 0 0 2px color-mix(in oklch, var(--danger) 30%, transparent); }
534
- .textarea::placeholder { color: var(--fg-subtle); }
647
+ .textarea:focus { box-shadow: var(--lmn-textarea-neu-shadow-inset, var(--neu-shadow-inset)), 0 0 0 2px var(--lmn-textarea-accent-glow, var(--accent-glow)); }
648
+ .textarea.invalid { box-shadow: var(--lmn-textarea-neu-shadow-inset, var(--neu-shadow-inset)), 0 0 0 2px color-mix(in oklch, var(--lmn-textarea-danger, var(--danger)) 30%, transparent); }
649
+ .textarea::placeholder { color: var(--lmn-textarea-fg-subtle, var(--fg-subtle)); }
535
650
  /* ============ Switch ============ */
536
651
  .switch {
537
652
  --w: 46px;
@@ -540,11 +655,19 @@ input, textarea, select { font-family: inherit; color: inherit; }
540
655
  align-items: center;
541
656
  gap: 10px;
542
657
  font-size: 13px;
543
- color: var(--fg);
658
+ color: var(--lmn-switch-fg, var(--fg));
544
659
  cursor: pointer;
545
660
  user-select: none;
546
661
  }
547
662
  .switch.disabled { opacity: 0.5; cursor: not-allowed; }
663
+ .switch-native {
664
+ position: absolute;
665
+ width: 1px;
666
+ height: 1px;
667
+ opacity: 0;
668
+ pointer-events: none;
669
+ }
670
+ .switch:focus-within .switch-track { outline: 2px solid var(--lmn-switch-accent, var(--accent)); outline-offset: 2px; }
548
671
  .switch-track {
549
672
  position: relative;
550
673
  width: var(--w);
@@ -552,8 +675,8 @@ input, textarea, select { font-family: inherit; color: inherit; }
552
675
  border: none;
553
676
  padding: 0;
554
677
  border-radius: 999px;
555
- background: var(--bg);
556
- box-shadow: var(--neu-shadow-inset);
678
+ background: var(--lmn-switch-bg, var(--bg));
679
+ box-shadow: var(--lmn-switch-neu-shadow-inset, var(--neu-shadow-inset));
557
680
  cursor: inherit;
558
681
  flex-shrink: 0;
559
682
  transition: all var(--dur) var(--ease);
@@ -571,15 +694,15 @@ input, textarea, select { font-family: inherit; color: inherit; }
571
694
  width: calc(var(--h) - 6px);
572
695
  height: calc(var(--h) - 6px);
573
696
  border-radius: 999px;
574
- background: var(--bg-raised);
575
- box-shadow: var(--neu-shadow-control);
697
+ background: var(--lmn-switch-bg-raised, var(--bg-raised));
698
+ box-shadow: var(--lmn-switch-neu-shadow-control, var(--neu-shadow-control));
576
699
  transition: all var(--dur) var(--ease);
577
700
  z-index: 1;
578
701
  }
579
702
  .switch.on .switch-thumb {
580
703
  transform: translateX(calc(var(--w) - var(--h)));
581
- background: var(--accent);
582
- box-shadow: 0 2px 8px var(--accent-glow), 0 0 0 1px color-mix(in oklch, var(--accent) 40%, transparent);
704
+ background: var(--lmn-switch-accent, var(--accent));
705
+ box-shadow: 0 2px 8px var(--lmn-switch-accent-glow, var(--accent-glow)), 0 0 0 1px color-mix(in oklch, var(--lmn-switch-accent, var(--accent)) 40%, transparent);
583
706
  }
584
707
  /* Inline content (checkedChildren / unCheckedChildren) */
585
708
  .switch-inner {
@@ -617,7 +740,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
617
740
  .switch-inner-off {
618
741
  right: 8px;
619
742
  left: calc(var(--h) - 2px);
620
- color: var(--fg-muted);
743
+ color: var(--lmn-switch-fg-muted, var(--fg-muted));
621
744
  opacity: 1;
622
745
  transform: translateX(0);
623
746
  }
@@ -633,37 +756,45 @@ input, textarea, select { font-family: inherit; color: inherit; }
633
756
  cursor: pointer;
634
757
  user-select: none;
635
758
  font-size: 13px;
636
- color: var(--fg);
759
+ color: var(--lmn-checkbox-fg, var(--fg));
637
760
  }
638
761
  .checkbox.disabled { opacity: 0.5; cursor: not-allowed; }
762
+ .checkbox-native {
763
+ position: absolute;
764
+ width: 1px;
765
+ height: 1px;
766
+ opacity: 0;
767
+ pointer-events: none;
768
+ }
769
+ .checkbox:focus-within .checkbox-box { outline: 2px solid var(--lmn-checkbox-accent, var(--accent)); outline-offset: 2px; }
639
770
  .checkbox-box {
640
771
  width: 20px; height: 20px;
641
772
  border: none;
642
773
  padding: 0;
643
774
  border-radius: 7px;
644
- background: var(--bg);
645
- box-shadow: var(--neu-shadow-inset);
775
+ background: var(--lmn-checkbox-bg, var(--bg));
776
+ box-shadow: var(--lmn-checkbox-neu-shadow-inset, var(--neu-shadow-inset));
646
777
  display: grid;
647
778
  place-items: center;
648
779
  flex-shrink: 0;
649
780
  cursor: inherit;
650
- color: var(--bg);
781
+ color: var(--lmn-checkbox-bg, var(--bg));
651
782
  transition: all var(--dur) var(--ease);
652
783
  }
653
784
  .checkbox-box svg { opacity: 0; transform: scale(0.6); transition: all var(--dur) var(--ease); }
654
785
  .checkbox.checked .checkbox-box {
655
- background: var(--accent);
656
- box-shadow: var(--neu-shadow-control), 0 2px 8px var(--accent-glow);
786
+ background: var(--lmn-checkbox-accent, var(--accent));
787
+ box-shadow: var(--lmn-checkbox-neu-shadow-control, var(--neu-shadow-control)), 0 2px 8px var(--lmn-checkbox-accent-glow, var(--accent-glow));
657
788
  }
658
789
  .checkbox.checked .checkbox-box svg { opacity: 1; transform: scale(1); }
659
790
  .checkbox.indeterminate .checkbox-box {
660
- background: var(--accent);
661
- box-shadow: var(--neu-shadow-control), 0 2px 8px var(--accent-glow);
791
+ background: var(--lmn-checkbox-accent, var(--accent));
792
+ box-shadow: var(--lmn-checkbox-neu-shadow-control, var(--neu-shadow-control)), 0 2px 8px var(--lmn-checkbox-accent-glow, var(--accent-glow));
662
793
  }
663
794
  .checkbox.indeterminate .checkbox-box::after {
664
795
  content: "";
665
796
  width: 10px; height: 2px;
666
- background: var(--bg);
797
+ background: var(--lmn-checkbox-bg, var(--bg));
667
798
  border-radius: 2px;
668
799
  }
669
800
  .checkbox.indeterminate .checkbox-box svg { display: none; }
@@ -675,24 +806,32 @@ input, textarea, select { font-family: inherit; color: inherit; }
675
806
  cursor: pointer;
676
807
  user-select: none;
677
808
  font-size: 13px;
678
- color: var(--fg);
809
+ color: var(--lmn-radio-fg, var(--fg));
679
810
  }
680
811
  .radio.disabled { opacity: 0.5; cursor: not-allowed; }
812
+ .radio-native {
813
+ position: absolute;
814
+ width: 1px;
815
+ height: 1px;
816
+ opacity: 0;
817
+ pointer-events: none;
818
+ }
819
+ .radio:focus-within .radio-dot { outline: 2px solid var(--lmn-radio-accent, var(--accent)); outline-offset: 2px; }
681
820
  .radio-dot {
682
821
  width: 20px; height: 20px;
683
822
  border: none;
684
823
  padding: 0;
685
824
  border-radius: 999px;
686
- background: var(--bg);
687
- box-shadow: var(--neu-shadow-inset);
825
+ background: var(--lmn-radio-bg, var(--bg));
826
+ box-shadow: var(--lmn-radio-neu-shadow-inset, var(--neu-shadow-inset));
688
827
  cursor: inherit;
689
828
  position: relative;
690
829
  flex-shrink: 0;
691
830
  transition: all var(--dur) var(--ease);
692
831
  }
693
832
  .radio.checked .radio-dot {
694
- background: var(--accent);
695
- box-shadow: var(--neu-shadow-control), 0 2px 8px var(--accent-glow);
833
+ background: var(--lmn-radio-accent, var(--accent));
834
+ box-shadow: var(--lmn-radio-neu-shadow-control, var(--neu-shadow-control)), 0 2px 8px var(--lmn-radio-accent-glow, var(--accent-glow));
696
835
  }
697
836
  .radio.checked .radio-dot::after {
698
837
  content: "";
@@ -701,7 +840,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
701
840
  transform: translate(-50%, -50%);
702
841
  width: 8px; height: 8px;
703
842
  border-radius: 999px;
704
- background: var(--bg);
843
+ background: var(--lmn-radio-bg, var(--bg));
705
844
  }
706
845
  .radio-group { display: flex; gap: 14px; }
707
846
  .radio-group.vertical { flex-direction: column; gap: 10px; }
@@ -711,8 +850,8 @@ input, textarea, select { font-family: inherit; color: inherit; }
711
850
  display: inline-flex;
712
851
  padding: 4px;
713
852
  border-radius: var(--r-md);
714
- background: var(--bg);
715
- box-shadow: var(--neu-shadow-inset);
853
+ background: var(--lmn-radio-bg, var(--bg));
854
+ box-shadow: var(--lmn-radio-neu-shadow-inset, var(--neu-shadow-inset));
716
855
  gap: 2px;
717
856
  flex-wrap: nowrap;
718
857
  }
@@ -722,14 +861,14 @@ input, textarea, select { font-family: inherit; color: inherit; }
722
861
  height: 32px;
723
862
  padding: 6px 14px;
724
863
  border-radius: calc(var(--r-md) - 4px);
725
- color: var(--fg-muted);
864
+ color: var(--lmn-radio-fg-muted, var(--fg-muted));
726
865
  font-size: 12px;
727
866
  gap: 6px;
728
867
  transition: all var(--dur-fast) var(--ease);
729
868
  }
730
- .radio-group.segmented .radio:hover { color: var(--fg); }
869
+ .radio-group.segmented .radio:hover { color: var(--lmn-radio-fg, var(--fg)); }
731
870
  .radio-group.segmented .radio.checked {
732
- color: var(--accent-ink);
871
+ color: var(--lmn-radio-accent-ink, var(--accent-ink));
733
872
  font-weight: 600;
734
873
  }
735
874
  .radio-group.segmented .radio-dot { display: none; }
@@ -743,8 +882,8 @@ input, textarea, select { font-family: inherit; color: inherit; }
743
882
  bottom: 4px;
744
883
  left: 0;
745
884
  border-radius: calc(var(--r-md) - 4px);
746
- background: var(--bg);
747
- box-shadow: var(--neu-shadow-control);
885
+ background: var(--lmn-radio-bg, var(--bg));
886
+ box-shadow: var(--lmn-radio-neu-shadow-control, var(--neu-shadow-control));
748
887
  pointer-events: none;
749
888
  transition:
750
889
  transform var(--dur-slow) var(--ease),
@@ -782,16 +921,16 @@ input, textarea, select { font-family: inherit; color: inherit; }
782
921
  width: 100%;
783
922
  height: 10px;
784
923
  border-radius: 999px;
785
- background: var(--bg);
786
- box-shadow: var(--neu-shadow-inset);
924
+ background: var(--lmn-slider-bg, var(--bg));
925
+ box-shadow: var(--lmn-slider-neu-shadow-inset, var(--neu-shadow-inset));
787
926
  touch-action: none;
788
927
  z-index: 1;
789
928
  }
790
929
  .slider-fill {
791
930
  position: absolute;
792
931
  top: 0; bottom: 0;
793
- background: linear-gradient(90deg, color-mix(in oklch, var(--accent) 70%, white), var(--accent));
794
- box-shadow: 0 0 12px var(--accent-glow);
932
+ background: linear-gradient(90deg, color-mix(in oklch, var(--lmn-slider-accent, var(--accent)) 70%, white), var(--lmn-slider-accent, var(--accent)));
933
+ box-shadow: 0 0 12px var(--lmn-slider-accent-glow, var(--accent-glow));
795
934
  border-radius: 999px;
796
935
  transition: left var(--dur-fast) var(--ease), right var(--dur-fast) var(--ease);
797
936
  pointer-events: none;
@@ -801,8 +940,8 @@ input, textarea, select { font-family: inherit; color: inherit; }
801
940
  top: 50%;
802
941
  width: 22px; height: 22px;
803
942
  border-radius: 999px;
804
- background: var(--bg-raised);
805
- box-shadow: var(--neu-shadow-control);
943
+ background: var(--lmn-slider-bg-raised, var(--bg-raised));
944
+ box-shadow: var(--lmn-slider-neu-shadow-control, var(--neu-shadow-control));
806
945
  transform: translate(-50%, -50%);
807
946
  transition: all var(--dur-fast) var(--ease);
808
947
  display: grid; place-items: center;
@@ -814,29 +953,29 @@ input, textarea, select { font-family: inherit; color: inherit; }
814
953
  content: "";
815
954
  width: 6px; height: 6px;
816
955
  border-radius: 999px;
817
- background: var(--slider-thumb-color, var(--accent));
956
+ background: var(--slider-thumb-color, var(--lmn-slider-accent, var(--accent)));
818
957
  }
819
958
  .slider-thumb:focus-visible {
820
- box-shadow: var(--neu-shadow-control), 0 0 0 3px var(--accent-glow);
959
+ box-shadow: var(--lmn-slider-neu-shadow-control, var(--neu-shadow-control)), 0 0 0 3px var(--lmn-slider-accent-glow, var(--accent-glow));
821
960
  }
822
961
  .slider:hover .slider-thumb { transform: translate(-50%, -50%) scale(1.08); }
823
962
  .slider-value {
824
963
  font-family: var(--font-mono);
825
964
  font-size: 12px;
826
- color: var(--accent-ink);
965
+ color: var(--lmn-slider-accent-ink, var(--accent-ink));
827
966
  flex-shrink: 0;
828
967
  white-space: nowrap;
829
968
  }
830
969
  /* Tone variants */
831
- .slider.success .slider-thumb { --slider-thumb-color: var(--success); }
832
- .slider.success .slider-fill { background: linear-gradient(90deg, color-mix(in oklch, var(--success) 70%, white), var(--success)); box-shadow: 0 0 10px color-mix(in oklch, var(--success) 35%, transparent); }
833
- .slider.success .slider-thumb:focus-visible { box-shadow: var(--neu-shadow-control), 0 0 0 3px color-mix(in oklch, var(--success) 35%, transparent); }
834
- .slider.warning .slider-thumb { --slider-thumb-color: var(--warning); }
835
- .slider.warning .slider-fill { background: linear-gradient(90deg, color-mix(in oklch, var(--warning) 70%, white), var(--warning)); box-shadow: 0 0 10px color-mix(in oklch, var(--warning) 35%, transparent); }
836
- .slider.warning .slider-thumb:focus-visible { box-shadow: var(--neu-shadow-control), 0 0 0 3px color-mix(in oklch, var(--warning) 35%, transparent); }
837
- .slider.danger .slider-thumb { --slider-thumb-color: var(--danger); }
838
- .slider.danger .slider-fill { background: linear-gradient(90deg, color-mix(in oklch, var(--danger) 70%, white), var(--danger)); box-shadow: 0 0 10px color-mix(in oklch, var(--danger) 35%, transparent); }
839
- .slider.danger .slider-thumb:focus-visible { box-shadow: var(--neu-shadow-control), 0 0 0 3px color-mix(in oklch, var(--danger) 35%, transparent); }
970
+ .slider.success .slider-thumb { --slider-thumb-color: var(--lmn-slider-success, var(--success)); }
971
+ .slider.success .slider-fill { background: linear-gradient(90deg, color-mix(in oklch, var(--lmn-slider-success, var(--success)) 70%, white), var(--lmn-slider-success, var(--success))); box-shadow: 0 0 10px color-mix(in oklch, var(--lmn-slider-success, var(--success)) 35%, transparent); }
972
+ .slider.success .slider-thumb:focus-visible { box-shadow: var(--lmn-slider-neu-shadow-control, var(--neu-shadow-control)), 0 0 0 3px color-mix(in oklch, var(--lmn-slider-success, var(--success)) 35%, transparent); }
973
+ .slider.warning .slider-thumb { --slider-thumb-color: var(--lmn-slider-warning, var(--warning)); }
974
+ .slider.warning .slider-fill { background: linear-gradient(90deg, color-mix(in oklch, var(--lmn-slider-warning, var(--warning)) 70%, white), var(--lmn-slider-warning, var(--warning))); box-shadow: 0 0 10px color-mix(in oklch, var(--lmn-slider-warning, var(--warning)) 35%, transparent); }
975
+ .slider.warning .slider-thumb:focus-visible { box-shadow: var(--lmn-slider-neu-shadow-control, var(--neu-shadow-control)), 0 0 0 3px color-mix(in oklch, var(--lmn-slider-warning, var(--warning)) 35%, transparent); }
976
+ .slider.danger .slider-thumb { --slider-thumb-color: var(--lmn-slider-danger, var(--danger)); }
977
+ .slider.danger .slider-fill { background: linear-gradient(90deg, color-mix(in oklch, var(--lmn-slider-danger, var(--danger)) 70%, white), var(--lmn-slider-danger, var(--danger))); box-shadow: 0 0 10px color-mix(in oklch, var(--lmn-slider-danger, var(--danger)) 35%, transparent); }
978
+ .slider.danger .slider-thumb:focus-visible { box-shadow: var(--lmn-slider-neu-shadow-control, var(--neu-shadow-control)), 0 0 0 3px color-mix(in oklch, var(--lmn-slider-danger, var(--danger)) 35%, transparent); }
840
979
  /* Marks */
841
980
  .slider-marks {
842
981
  position: absolute;
@@ -846,6 +985,10 @@ input, textarea, select { font-family: inherit; color: inherit; }
846
985
  pointer-events: none;
847
986
  }
848
987
  .slider-mark {
988
+ border: 0;
989
+ padding: 0;
990
+ background: transparent;
991
+ font: inherit;
849
992
  position: absolute;
850
993
  transform: translateX(-50%);
851
994
  display: inline-flex;
@@ -854,33 +997,47 @@ input, textarea, select { font-family: inherit; color: inherit; }
854
997
  gap: 4px;
855
998
  pointer-events: auto;
856
999
  cursor: pointer;
857
- color: var(--fg-subtle);
1000
+ color: var(--lmn-slider-fg-subtle, var(--fg-subtle));
858
1001
  font-size: 11px;
859
1002
  user-select: none;
860
1003
  }
861
1004
  .slider-mark-dot {
862
1005
  width: 6px; height: 6px;
863
1006
  border-radius: 999px;
864
- background: var(--bg);
865
- box-shadow: var(--neu-shadow-inset);
1007
+ background: var(--lmn-slider-bg, var(--bg));
1008
+ box-shadow: var(--lmn-slider-neu-shadow-inset, var(--neu-shadow-inset));
866
1009
  position: absolute;
867
1010
  top: -12px;
868
1011
  left: 50%;
869
1012
  transform: translateX(-50%);
870
1013
  z-index: 1;
871
1014
  }
872
- .slider-mark.active .slider-mark-dot { background: var(--accent); box-shadow: 0 0 6px var(--accent-glow); }
873
- .slider.success .slider-mark.active .slider-mark-dot { background: var(--success); box-shadow: 0 0 6px color-mix(in oklch, var(--success) 35%, transparent); }
874
- .slider.warning .slider-mark.active .slider-mark-dot { background: var(--warning); box-shadow: 0 0 6px color-mix(in oklch, var(--warning) 35%, transparent); }
875
- .slider.danger .slider-mark.active .slider-mark-dot { background: var(--danger); box-shadow: 0 0 6px color-mix(in oklch, var(--danger) 35%, transparent); }
1015
+ .slider-mark.active .slider-mark-dot { background: var(--lmn-slider-accent, var(--accent)); box-shadow: 0 0 6px var(--lmn-slider-accent-glow, var(--accent-glow)); }
1016
+ .slider.success .slider-mark.active .slider-mark-dot { background: var(--lmn-slider-success, var(--success)); box-shadow: 0 0 6px color-mix(in oklch, var(--lmn-slider-success, var(--success)) 35%, transparent); }
1017
+ .slider.warning .slider-mark.active .slider-mark-dot { background: var(--lmn-slider-warning, var(--warning)); box-shadow: 0 0 6px color-mix(in oklch, var(--lmn-slider-warning, var(--warning)) 35%, transparent); }
1018
+ .slider.danger .slider-mark.active .slider-mark-dot { background: var(--lmn-slider-danger, var(--danger)); box-shadow: 0 0 6px color-mix(in oklch, var(--lmn-slider-danger, var(--danger)) 35%, transparent); }
876
1019
  .slider-mark-label { white-space: nowrap; }
877
- .slider-mark.active .slider-mark-label { color: var(--accent-ink); font-weight: 500; }
878
- .slider-mark:hover .slider-mark-label { color: var(--fg); }
1020
+ .slider-mark.edge-start {
1021
+ transform: none;
1022
+ align-items: flex-start;
1023
+ }
1024
+ .slider-mark.edge-start .slider-mark-dot {
1025
+ left: 0;
1026
+ }
1027
+ .slider-mark.edge-end {
1028
+ transform: translateX(-100%);
1029
+ align-items: flex-end;
1030
+ }
1031
+ .slider-mark.edge-end .slider-mark-dot {
1032
+ left: 100%;
1033
+ }
1034
+ .slider-mark.active .slider-mark-label { color: var(--lmn-slider-accent-ink, var(--accent-ink)); font-weight: 500; }
1035
+ .slider-mark:hover .slider-mark-label { color: var(--lmn-slider-fg, var(--fg)); }
879
1036
  .slider.disabled .slider-mark { pointer-events: none; }
880
1037
  /* ============ Progress ============ */
881
1038
  .progress {
882
- --progress-fill: var(--accent);
883
- --progress-fill-glow: var(--accent-glow);
1039
+ --progress-fill: var(--lmn-progress-accent, var(--accent));
1040
+ --progress-fill-glow: var(--lmn-progress-accent-glow, var(--accent-glow));
884
1041
  --progress-inset: 2px;
885
1042
  width: 100%;
886
1043
  display: flex;
@@ -890,22 +1047,22 @@ input, textarea, select { font-family: inherit; color: inherit; }
890
1047
  .progress.sm { --progress-inset: 1px; }
891
1048
  .progress.lg { --progress-inset: 2px; }
892
1049
  .progress.success {
893
- --progress-fill: var(--success);
894
- --progress-fill-glow: color-mix(in oklch, var(--success) 35%, transparent);
1050
+ --progress-fill: var(--lmn-progress-success, var(--success));
1051
+ --progress-fill-glow: color-mix(in oklch, var(--lmn-progress-success, var(--success)) 35%, transparent);
895
1052
  }
896
1053
  .progress.warning {
897
- --progress-fill: var(--warning);
898
- --progress-fill-glow: color-mix(in oklch, var(--warning) 35%, transparent);
1054
+ --progress-fill: var(--lmn-progress-warning, var(--warning));
1055
+ --progress-fill-glow: color-mix(in oklch, var(--lmn-progress-warning, var(--warning)) 35%, transparent);
899
1056
  }
900
1057
  .progress.danger {
901
- --progress-fill: var(--danger);
902
- --progress-fill-glow: color-mix(in oklch, var(--danger) 35%, transparent);
1058
+ --progress-fill: var(--lmn-progress-danger, var(--danger));
1059
+ --progress-fill-glow: color-mix(in oklch, var(--lmn-progress-danger, var(--danger)) 35%, transparent);
903
1060
  }
904
1061
  .progress-label {
905
1062
  display: flex;
906
1063
  justify-content: space-between;
907
1064
  font-size: 12px;
908
- color: var(--fg-muted);
1065
+ color: var(--lmn-progress-fg-muted, var(--fg-muted));
909
1066
  }
910
1067
  .progress-label .v { font-family: var(--font-mono); }
911
1068
  .progress-track {
@@ -916,10 +1073,10 @@ input, textarea, select { font-family: inherit; color: inherit; }
916
1073
  box-sizing: border-box;
917
1074
  background: linear-gradient(
918
1075
  180deg,
919
- color-mix(in oklch, var(--bg) 88%, var(--shadow-light)),
920
- color-mix(in oklch, var(--bg) 92%, var(--shadow-dark))
1076
+ color-mix(in oklch, var(--lmn-progress-bg, var(--bg)) 88%, var(--lmn-progress-shadow-light, var(--shadow-light))),
1077
+ color-mix(in oklch, var(--lmn-progress-bg, var(--bg)) 92%, var(--lmn-progress-shadow-dark, var(--shadow-dark)))
921
1078
  );
922
- box-shadow: var(--neu-shadow-inset);
1079
+ box-shadow: var(--lmn-progress-neu-shadow-inset, var(--neu-shadow-inset));
923
1080
  overflow: hidden;
924
1081
  position: relative;
925
1082
  }
@@ -931,15 +1088,15 @@ input, textarea, select { font-family: inherit; color: inherit; }
931
1088
  border-radius: inherit;
932
1089
  background: linear-gradient(
933
1090
  180deg,
934
- color-mix(in oklch, var(--progress-fill) 68%, var(--shadow-light)) 0%,
1091
+ color-mix(in oklch, var(--progress-fill) 68%, var(--lmn-progress-shadow-light, var(--shadow-light))) 0%,
935
1092
  var(--progress-fill) 55%,
936
- color-mix(in oklch, var(--progress-fill) 84%, var(--shadow-dark)) 100%
1093
+ color-mix(in oklch, var(--progress-fill) 84%, var(--lmn-progress-shadow-dark, var(--shadow-dark))) 100%
937
1094
  );
938
1095
  box-shadow:
939
- inset 1px 1px 2px color-mix(in oklch, var(--progress-fill) 18%, var(--shadow-dark)),
940
- inset -1px -1px 2px color-mix(in oklch, var(--progress-fill) 14%, var(--shadow-light)),
941
- 1px 1px 4px color-mix(in oklch, var(--progress-fill) 16%, var(--shadow-dark)),
942
- -1px -1px 4px color-mix(in oklch, var(--progress-fill) 10%, var(--shadow-light)),
1096
+ inset 1px 1px 2px color-mix(in oklch, var(--progress-fill) 18%, var(--lmn-progress-shadow-dark, var(--shadow-dark))),
1097
+ inset -1px -1px 2px color-mix(in oklch, var(--progress-fill) 14%, var(--lmn-progress-shadow-light, var(--shadow-light))),
1098
+ 1px 1px 4px color-mix(in oklch, var(--progress-fill) 16%, var(--lmn-progress-shadow-dark, var(--shadow-dark))),
1099
+ -1px -1px 4px color-mix(in oklch, var(--progress-fill) 10%, var(--lmn-progress-shadow-light, var(--shadow-light))),
943
1100
  0 0 10px var(--progress-fill-glow);
944
1101
  transition: width var(--dur-slow) var(--ease), box-shadow var(--dur) var(--ease);
945
1102
  overflow: hidden;
@@ -951,12 +1108,22 @@ input, textarea, select { font-family: inherit; color: inherit; }
951
1108
  border-radius: inherit;
952
1109
  background: linear-gradient(
953
1110
  180deg,
954
- color-mix(in oklch, var(--shadow-light) 72%, transparent) 0%,
955
- color-mix(in oklch, var(--shadow-light) 28%, transparent) 38%,
1111
+ color-mix(in oklch, var(--lmn-progress-shadow-light, var(--shadow-light)) 72%, transparent) 0%,
1112
+ color-mix(in oklch, var(--lmn-progress-shadow-light, var(--shadow-light)) 28%, transparent) 38%,
956
1113
  transparent 70%
957
1114
  );
958
1115
  pointer-events: none;
959
1116
  }
1117
+ .progress.indeterminate .progress-bar {
1118
+ animation: progress-indeterminate 1.4s var(--ease) infinite;
1119
+ }
1120
+ @keyframes progress-indeterminate {
1121
+ from { transform: translateX(-120%); }
1122
+ to { transform: translateX(320%); }
1123
+ }
1124
+ @media (prefers-reduced-motion: reduce) {
1125
+ .progress.indeterminate .progress-bar { animation: none; }
1126
+ }
960
1127
  /* ============ Tag ============ */
961
1128
  .tag {
962
1129
  display: inline-flex;
@@ -967,20 +1134,20 @@ input, textarea, select { font-family: inherit; color: inherit; }
967
1134
  border-radius: var(--r-pill);
968
1135
  font-size: 11px;
969
1136
  font-weight: 500;
970
- background: var(--bg);
971
- box-shadow: var(--neu-shadow-subtle);
972
- color: var(--fg-muted);
973
- }
974
- .tag.accent { color: var(--accent-ink); }
975
- .tag.info { color: var(--info); }
976
- .tag.success { color: var(--success); }
977
- .tag.warning { color: var(--warning); }
978
- .tag.danger { color: var(--danger); }
979
- .tag.solid { background: var(--accent); color: var(--bg); box-shadow: 0 2px 6px var(--accent-glow); }
980
- .tag.solid.info { background: var(--info); color: var(--bg); box-shadow: 0 2px 6px color-mix(in oklch, var(--info) 35%, transparent); }
981
- .tag.solid.success { background: var(--success); color: var(--bg); box-shadow: 0 2px 6px color-mix(in oklch, var(--success) 35%, transparent); }
982
- .tag.solid.warning { background: var(--warning); color: var(--bg); box-shadow: 0 2px 6px color-mix(in oklch, var(--warning) 35%, transparent); }
983
- .tag.solid.danger { background: var(--danger); color: var(--bg); box-shadow: 0 2px 6px color-mix(in oklch, var(--danger) 35%, transparent); }
1137
+ background: var(--lmn-tag-bg, var(--bg));
1138
+ box-shadow: var(--lmn-tag-neu-shadow-subtle, var(--neu-shadow-subtle));
1139
+ color: var(--lmn-tag-fg-muted, var(--fg-muted));
1140
+ }
1141
+ .tag.accent { color: var(--lmn-tag-accent-ink, var(--accent-ink)); }
1142
+ .tag.info { color: var(--lmn-tag-info, var(--info)); }
1143
+ .tag.success { color: var(--lmn-tag-success, var(--success)); }
1144
+ .tag.warning { color: var(--lmn-tag-warning, var(--warning)); }
1145
+ .tag.danger { color: var(--lmn-tag-danger, var(--danger)); }
1146
+ .tag.solid { background: var(--lmn-tag-accent, var(--accent)); color: var(--lmn-tag-bg, var(--bg)); box-shadow: 0 2px 6px var(--lmn-tag-accent-glow, var(--accent-glow)); }
1147
+ .tag.solid.info { background: var(--lmn-tag-info, var(--info)); color: var(--lmn-tag-bg, var(--bg)); box-shadow: 0 2px 6px color-mix(in oklch, var(--lmn-tag-info, var(--info)) 35%, transparent); }
1148
+ .tag.solid.success { background: var(--lmn-tag-success, var(--success)); color: var(--lmn-tag-bg, var(--bg)); box-shadow: 0 2px 6px color-mix(in oklch, var(--lmn-tag-success, var(--success)) 35%, transparent); }
1149
+ .tag.solid.warning { background: var(--lmn-tag-warning, var(--warning)); color: var(--lmn-tag-bg, var(--bg)); box-shadow: 0 2px 6px color-mix(in oklch, var(--lmn-tag-warning, var(--warning)) 35%, transparent); }
1150
+ .tag.solid.danger { background: var(--lmn-tag-danger, var(--danger)); color: var(--lmn-tag-bg, var(--bg)); box-shadow: 0 2px 6px color-mix(in oklch, var(--lmn-tag-danger, var(--danger)) 35%, transparent); }
984
1151
  .tag.borderless { background: transparent; box-shadow: none; }
985
1152
  .tag .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
986
1153
  .tag .tag-ico {
@@ -997,8 +1164,8 @@ input, textarea, select { font-family: inherit; color: inherit; }
997
1164
  height: 1em;
998
1165
  object-fit: contain;
999
1166
  }
1000
- .tag .x { cursor: pointer; color: var(--fg-subtle); margin-left: 2px; display: inline-flex; }
1001
- .tag .x:hover { color: var(--fg); }
1167
+ .tag .x { cursor: pointer; color: var(--lmn-tag-fg-subtle, var(--fg-subtle)); margin-left: 2px; display: inline-flex; }
1168
+ .tag .x:hover { color: var(--lmn-tag-fg, var(--fg)); }
1002
1169
  /* ============ Badge ============ */
1003
1170
  .badge {
1004
1171
  display: inline-flex;
@@ -1008,17 +1175,17 @@ input, textarea, select { font-family: inherit; color: inherit; }
1008
1175
  border-radius: 999px;
1009
1176
  font-size: 10px;
1010
1177
  font-weight: 700;
1011
- background: var(--danger);
1012
- color: var(--bg);
1013
- box-shadow: 0 1px 4px color-mix(in oklch, var(--shadow-dark) 35%, transparent);
1178
+ background: var(--lmn-badge-danger, var(--danger));
1179
+ color: var(--lmn-badge-bg, var(--bg));
1180
+ box-shadow: 0 1px 4px color-mix(in oklch, var(--lmn-badge-shadow-dark, var(--shadow-dark)) 35%, transparent);
1014
1181
  font-variant-numeric: tabular-nums;
1015
1182
  }
1016
1183
  .badge.dot { min-width: 10px; height: 10px; padding: 0; }
1017
- .badge.accent { background: var(--accent); box-shadow: 0 1px 4px var(--accent-glow); }
1018
- .badge.info { background: var(--info); box-shadow: 0 1px 4px color-mix(in oklch, var(--info) 35%, transparent); }
1019
- .badge.success { background: var(--success); box-shadow: 0 1px 4px color-mix(in oklch, var(--success) 35%, transparent); }
1020
- .badge.warning { background: var(--warning); box-shadow: 0 1px 4px color-mix(in oklch, var(--warning) 35%, transparent); }
1021
- .badge.neutral { background: var(--fg-muted); box-shadow: 0 1px 4px color-mix(in oklch, var(--shadow-dark) 35%, transparent); }
1184
+ .badge.accent { background: var(--lmn-badge-accent, var(--accent)); box-shadow: 0 1px 4px var(--lmn-badge-accent-glow, var(--accent-glow)); }
1185
+ .badge.info { background: var(--lmn-badge-info, var(--info)); box-shadow: 0 1px 4px color-mix(in oklch, var(--lmn-badge-info, var(--info)) 35%, transparent); }
1186
+ .badge.success { background: var(--lmn-badge-success, var(--success)); box-shadow: 0 1px 4px color-mix(in oklch, var(--lmn-badge-success, var(--success)) 35%, transparent); }
1187
+ .badge.warning { background: var(--lmn-badge-warning, var(--warning)); box-shadow: 0 1px 4px color-mix(in oklch, var(--lmn-badge-warning, var(--warning)) 35%, transparent); }
1188
+ .badge.neutral { background: var(--lmn-badge-fg-muted, var(--fg-muted)); box-shadow: 0 1px 4px color-mix(in oklch, var(--lmn-badge-shadow-dark, var(--shadow-dark)) 35%, transparent); }
1022
1189
  .badge-wrap { position: relative; display: inline-block; }
1023
1190
  .badge-wrap > .badge { position: absolute; top: -4px; right: -4px; }
1024
1191
  /* ============ Avatar ============ */
@@ -1026,11 +1193,11 @@ input, textarea, select { font-family: inherit; color: inherit; }
1026
1193
  --size: 40px;
1027
1194
  width: var(--size); height: var(--size);
1028
1195
  border-radius: 999px;
1029
- background: var(--bg);
1030
- box-shadow: var(--neu-shadow-control);
1196
+ background: var(--lmn-avatar-bg, var(--bg));
1197
+ box-shadow: var(--lmn-avatar-neu-shadow-control, var(--neu-shadow-control));
1031
1198
  display: grid; place-items: center;
1032
1199
  overflow: hidden;
1033
- color: var(--accent-ink);
1200
+ color: var(--lmn-avatar-accent-ink, var(--accent-ink));
1034
1201
  font-weight: 600;
1035
1202
  font-size: calc(var(--size) / 2.6);
1036
1203
  position: relative;
@@ -1050,23 +1217,31 @@ input, textarea, select { font-family: inherit; color: inherit; }
1050
1217
  width: 25%; height: 25%;
1051
1218
  min-width: 8px; min-height: 8px;
1052
1219
  border-radius: 999px;
1053
- background: var(--success);
1054
- box-shadow: 0 0 0 2px var(--bg);
1220
+ background: var(--lmn-avatar-success, var(--success));
1221
+ box-shadow: 0 0 0 2px var(--lmn-avatar-bg, var(--bg));
1222
+ }
1223
+ .avatar-status.online { background: var(--lmn-avatar-success, var(--success)); }
1224
+ .avatar-status.busy { background: var(--lmn-avatar-danger, var(--danger)); }
1225
+ .avatar-status.away { background: var(--lmn-avatar-warning, var(--warning)); }
1226
+ .avatar-status.offline { background: var(--lmn-avatar-fg-subtle, var(--fg-subtle)); }
1227
+ .avatar-status-label {
1228
+ position: absolute;
1229
+ width: 1px;
1230
+ height: 1px;
1231
+ overflow: hidden;
1232
+ clip: rect(0, 0, 0, 0);
1233
+ white-space: nowrap;
1055
1234
  }
1056
- .avatar-status.online { background: var(--success); }
1057
- .avatar-status.busy { background: var(--danger); }
1058
- .avatar-status.away { background: var(--warning); }
1059
- .avatar-status.offline { background: var(--fg-subtle); }
1060
1235
  .avatar-group { display: inline-flex; }
1061
- .avatar-group .avatar { border: 3px solid var(--bg); box-sizing: content-box; }
1236
+ .avatar-group .avatar { border: 3px solid var(--lmn-avatar-bg, var(--bg)); box-sizing: content-box; }
1062
1237
  .avatar-group .avatar + .avatar { margin-left: -12px; }
1063
1238
  /* ============ Divider ============ */
1064
1239
  .divider {
1065
1240
  height: 1px;
1066
- background: var(--divider);
1241
+ background: var(--lmn-divider-divider, var(--divider));
1067
1242
  margin: var(--gap-4) 0;
1068
1243
  border-radius: 999px;
1069
- box-shadow: 0 1px 0 var(--shadow-light);
1244
+ box-shadow: 0 1px 0 var(--lmn-divider-shadow-light, var(--shadow-light));
1070
1245
  }
1071
1246
  .divider.vertical {
1072
1247
  width: 1px;
@@ -1077,7 +1252,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
1077
1252
  .divider.sunken {
1078
1253
  background: transparent;
1079
1254
  height: 2px;
1080
- box-shadow: var(--neu-shadow-inset);
1255
+ box-shadow: var(--lmn-divider-neu-shadow-inset, var(--neu-shadow-inset));
1081
1256
  }
1082
1257
  .divider.sunken.vertical {
1083
1258
  width: 2px;
@@ -1085,33 +1260,33 @@ input, textarea, select { font-family: inherit; color: inherit; }
1085
1260
  }
1086
1261
  .divider.sunken:has(.divider-label) { background: transparent; box-shadow: none; }
1087
1262
  .divider.sunken:has(.divider-label)::before,
1088
- .divider.sunken:has(.divider-label)::after { height: 2px; background: transparent; box-shadow: var(--neu-shadow-inset); }
1263
+ .divider.sunken:has(.divider-label)::after { height: 2px; background: transparent; box-shadow: var(--lmn-divider-neu-shadow-inset, var(--neu-shadow-inset)); }
1089
1264
  /* ---- Dashed variant ---- */
1090
1265
  .divider.dashed {
1091
1266
  background: transparent;
1092
1267
  box-shadow: none;
1093
- border-top: 1px dashed var(--divider);
1268
+ border-top: 1px dashed var(--lmn-divider-divider, var(--divider));
1094
1269
  border-radius: 0;
1095
1270
  height: 0;
1096
1271
  }
1097
1272
  .divider.dashed.vertical {
1098
1273
  width: 0;
1099
1274
  border-top: none;
1100
- border-left: 1px dashed var(--divider);
1275
+ border-left: 1px dashed var(--lmn-divider-divider, var(--divider));
1101
1276
  }
1102
1277
  .divider.dashed:has(.divider-label) { border-top: none; }
1103
1278
  .divider.dashed:has(.divider-label)::before,
1104
1279
  .divider.dashed:has(.divider-label)::after {
1105
1280
  background: transparent;
1106
1281
  box-shadow: none;
1107
- border-top: 1px dashed var(--divider);
1282
+ border-top: 1px dashed var(--lmn-divider-divider, var(--divider));
1108
1283
  height: 0;
1109
1284
  border-radius: 0;
1110
1285
  }
1111
1286
  .divider-label {
1112
1287
  display: flex; align-items: center; gap: 12px;
1113
1288
  height: auto; background: transparent; box-shadow: none;
1114
- font-size: 11px; color: var(--fg-subtle);
1289
+ font-size: 11px; color: var(--lmn-divider-fg-subtle, var(--fg-subtle));
1115
1290
  text-transform: uppercase; letter-spacing: 0.1em;
1116
1291
  }
1117
1292
  .divider:has(.divider-label) {
@@ -1127,9 +1302,9 @@ input, textarea, select { font-family: inherit; color: inherit; }
1127
1302
  content: "";
1128
1303
  flex: 1;
1129
1304
  height: 1px;
1130
- background: var(--divider);
1305
+ background: var(--lmn-divider-divider, var(--divider));
1131
1306
  border-radius: 999px;
1132
- box-shadow: 0 1px 0 var(--shadow-light);
1307
+ box-shadow: 0 1px 0 var(--lmn-divider-shadow-light, var(--shadow-light));
1133
1308
  }
1134
1309
  /* ---- Label orientation ---- */
1135
1310
  .divider.orient-left::before { flex: 0 0 var(--gap-4); }
@@ -1139,12 +1314,14 @@ input, textarea, select { font-family: inherit; color: inherit; }
1139
1314
  /* center is default (both flex: 1) */
1140
1315
  /* ============ Card ============ */
1141
1316
  .card {
1142
- --card-bg: var(--bg);
1143
- --card-loading-bg: color-mix(in srgb, var(--bg) 72%, var(--bg-sunken));
1317
+ --card-bg: var(--lmn-card-bg, var(--bg));
1318
+ --card-loading-bg: color-mix(in srgb, var(--lmn-card-bg, var(--bg)) 72%, var(--lmn-card-bg-sunken, var(--bg-sunken)));
1144
1319
  background: var(--card-bg);
1320
+ color: var(--lmn-card-fg, var(--fg));
1145
1321
  border-radius: var(--r-lg);
1146
- box-shadow: var(--neu-shadow-panel);
1322
+ box-shadow: var(--lmn-card-neu-shadow-panel, var(--neu-shadow-panel));
1147
1323
  padding: var(--gap-5);
1324
+ position: relative;
1148
1325
  }
1149
1326
  .card.fill {
1150
1327
  display: flex;
@@ -1152,34 +1329,52 @@ input, textarea, select { font-family: inherit; color: inherit; }
1152
1329
  min-height: 0;
1153
1330
  height: 100%;
1154
1331
  }
1155
- .card.flat { box-shadow: var(--neu-shadow-subtle); }
1156
- .card.sunken { box-shadow: var(--neu-shadow-inset-strong); }
1332
+ .card.flat { box-shadow: var(--lmn-card-neu-shadow-subtle, var(--neu-shadow-subtle)); }
1333
+ .card.sunken { box-shadow: var(--lmn-card-neu-shadow-inset-strong, var(--neu-shadow-inset-strong)); }
1157
1334
  .card.pad-none { padding: 0; }
1158
1335
  .card.pad-sm { padding: var(--gap-3); }
1159
1336
  .card.pad-lg { padding: var(--gap-6); }
1160
1337
  .card.hoverable {
1161
- cursor: pointer;
1162
1338
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
1163
1339
  }
1340
+ .card.interactive { cursor: pointer; }
1341
+ .card.interactive.disabled { cursor: not-allowed; opacity: 0.68; }
1164
1342
  .card.hoverable:hover {
1165
1343
  transform: translateY(-3px);
1166
- box-shadow: var(--neu-shadow-lift);
1344
+ box-shadow: var(--lmn-card-neu-shadow-lift, var(--neu-shadow-lift));
1345
+ }
1346
+ .card.hoverable.flat:hover { box-shadow: var(--lmn-card-neu-shadow-control, var(--neu-shadow-control)); }
1347
+ .card.hoverable.sunken:hover { box-shadow: var(--lmn-card-neu-shadow-panel, var(--neu-shadow-panel)); }
1348
+ .card-interactive-control.btn {
1349
+ position: absolute;
1350
+ width: 1px;
1351
+ height: 1px;
1352
+ min-width: 0;
1353
+ padding: 0;
1354
+ margin: -1px;
1355
+ border-radius: inherit;
1356
+ overflow: hidden;
1357
+ clip: rect(0 0 0 0);
1358
+ clip-path: inset(50%);
1359
+ white-space: nowrap;
1360
+ }
1361
+ .card:has(> .card-interactive-control:focus-visible) {
1362
+ box-shadow: var(--lmn-card-neu-shadow-panel, var(--neu-shadow-panel)), 0 0 0 2px var(--lmn-card-accent-glow, var(--accent-glow));
1167
1363
  }
1168
- .card.hoverable.flat:hover { box-shadow: var(--neu-shadow-control); }
1169
- .card.hoverable.sunken:hover { box-shadow: var(--neu-shadow-panel); }
1170
1364
  .card-head {
1171
1365
  display: flex; align-items: flex-start; justify-content: space-between;
1172
1366
  gap: var(--gap-3); margin-bottom: var(--gap-4);
1173
1367
  }
1174
1368
  .card-titles { display: flex; flex-direction: column; gap: 2px; }
1175
1369
  .card-title { font-size: 15px; font-weight: 600; }
1176
- .card-desc { font-size: 12px; color: var(--fg-muted); }
1370
+ .card-desc { font-size: 12px; color: var(--lmn-card-fg-muted, var(--fg-muted)); }
1177
1371
  .card-actions { display: flex; gap: 6px; }
1178
1372
  .card-body {
1179
1373
  font-size: 13px;
1180
1374
  min-width: 0;
1181
1375
  position: relative;
1182
1376
  }
1377
+ .card-body-content { display: contents; }
1183
1378
  .card-body.body-stack {
1184
1379
  display: flex;
1185
1380
  flex-direction: column;
@@ -1206,9 +1401,9 @@ input, textarea, select { font-family: inherit; color: inherit; }
1206
1401
  place-items: center;
1207
1402
  background: var(--card-loading-bg);
1208
1403
  box-shadow:
1209
- inset calc(var(--shadow-inset-offset) * 0.45) calc(var(--shadow-inset-offset) * 0.45) calc(var(--shadow-inset-blur) * 0.45) color-mix(in oklch, var(--shadow-dark) 55%, transparent),
1210
- inset calc(var(--shadow-inset-offset) * -0.45) calc(var(--shadow-inset-offset) * -0.45) calc(var(--shadow-inset-blur) * 0.45) color-mix(in oklch, var(--shadow-light) 72%, transparent);
1211
- color: var(--fg-muted);
1404
+ inset calc(var(--lmn-card-shadow-inset-offset, var(--shadow-inset-offset)) * 0.45) calc(var(--lmn-card-shadow-inset-offset, var(--shadow-inset-offset)) * 0.45) calc(var(--lmn-card-shadow-inset-blur, var(--shadow-inset-blur)) * 0.45) color-mix(in oklch, var(--lmn-card-shadow-dark, var(--shadow-dark)) 55%, transparent),
1405
+ inset calc(var(--lmn-card-shadow-inset-offset, var(--shadow-inset-offset)) * -0.45) calc(var(--lmn-card-shadow-inset-offset, var(--shadow-inset-offset)) * -0.45) calc(var(--lmn-card-shadow-inset-blur, var(--shadow-inset-blur)) * 0.45) color-mix(in oklch, var(--lmn-card-shadow-light, var(--shadow-light)) 72%, transparent);
1406
+ color: var(--lmn-card-fg-muted, var(--fg-muted));
1212
1407
  z-index: 1;
1213
1408
  }
1214
1409
  /* ============ Surface ============ */
@@ -1216,21 +1411,21 @@ input, textarea, select { font-family: inherit; color: inherit; }
1216
1411
  position: relative;
1217
1412
  box-sizing: border-box;
1218
1413
  min-width: 0;
1219
- color: var(--fg);
1220
- background: var(--bg);
1414
+ color: var(--lmn-surface-fg, var(--fg));
1415
+ background: var(--lmn-surface-bg, var(--bg));
1221
1416
  border-radius: var(--r-lg);
1222
1417
  }
1223
- .surface.tone-raised { background: var(--bg-raised); }
1224
- .surface.tone-sunken { background: var(--bg-sunken); }
1418
+ .surface.tone-raised { background: var(--lmn-surface-bg-raised, var(--bg-raised)); }
1419
+ .surface.tone-sunken { background: var(--lmn-surface-bg-sunken, var(--bg-sunken)); }
1225
1420
  .surface.tone-accent {
1226
- color: var(--accent-ink);
1227
- background: var(--accent-soft);
1421
+ color: var(--lmn-surface-accent-ink, var(--accent-ink));
1422
+ background: var(--lmn-surface-accent-soft, var(--accent-soft));
1228
1423
  }
1229
1424
  .surface.plain { box-shadow: none; }
1230
- .surface.raised { box-shadow: var(--neu-shadow-panel); }
1231
- .surface.sunken { box-shadow: var(--neu-shadow-inset-strong); }
1232
- .surface.floating { box-shadow: var(--neu-shadow-float); }
1233
- .surface.bordered { border: 1px solid var(--border); }
1425
+ .surface.raised { box-shadow: var(--lmn-surface-neu-shadow-panel, var(--neu-shadow-panel)); }
1426
+ .surface.sunken { box-shadow: var(--lmn-surface-neu-shadow-inset-strong, var(--neu-shadow-inset-strong)); }
1427
+ .surface.floating { box-shadow: var(--lmn-surface-neu-shadow-float, var(--neu-shadow-float)); }
1428
+ .surface.bordered { border: 1px solid var(--lmn-surface-border, var(--border)); }
1234
1429
  .surface.pad-none { padding: 0; }
1235
1430
  .surface.pad-sm { padding: var(--gap-3); }
1236
1431
  .surface.pad-md { padding: var(--gap-5); }
@@ -1253,8 +1448,8 @@ input, textarea, select { font-family: inherit; color: inherit; }
1253
1448
  display: inline-flex;
1254
1449
  padding: 5px;
1255
1450
  border-radius: var(--r-md);
1256
- background: var(--bg);
1257
- box-shadow: var(--neu-shadow-inset);
1451
+ background: var(--lmn-tabs-bg, var(--bg));
1452
+ box-shadow: var(--lmn-tabs-neu-shadow-inset, var(--neu-shadow-inset));
1258
1453
  gap: 2px;
1259
1454
  align-self: flex-start;
1260
1455
  }
@@ -1266,18 +1461,18 @@ input, textarea, select { font-family: inherit; color: inherit; }
1266
1461
  font-size: 12px;
1267
1462
  font-weight: 500;
1268
1463
  font-family: inherit;
1269
- color: var(--fg-muted);
1464
+ color: var(--lmn-tabs-fg-muted, var(--fg-muted));
1270
1465
  cursor: pointer;
1271
1466
  display: inline-flex;
1272
1467
  align-items: center;
1273
1468
  gap: 6px;
1274
1469
  transition: all var(--dur-fast) var(--ease);
1275
1470
  }
1276
- .tabs-nav .tab:hover { color: var(--fg); }
1471
+ .tabs-nav .tab:hover { color: var(--lmn-tabs-fg, var(--fg)); }
1277
1472
  .tabs-nav .tab.active {
1278
- color: var(--accent-ink);
1279
- background: var(--bg);
1280
- box-shadow: var(--neu-shadow-control);
1473
+ color: var(--lmn-tabs-accent-ink, var(--accent-ink));
1474
+ background: var(--lmn-tabs-bg, var(--bg));
1475
+ box-shadow: var(--lmn-tabs-neu-shadow-control, var(--neu-shadow-control));
1281
1476
  font-weight: 600;
1282
1477
  }
1283
1478
  .tabs-nav .tab[disabled] { opacity: 0.4; cursor: not-allowed; }
@@ -1287,7 +1482,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
1287
1482
  background: transparent;
1288
1483
  box-shadow: none;
1289
1484
  border-radius: 0;
1290
- border-bottom: 1px solid var(--divider);
1485
+ border-bottom: 1px solid var(--lmn-tabs-divider, var(--divider));
1291
1486
  align-self: stretch;
1292
1487
  }
1293
1488
  .tabs.line .tabs-nav .tab,
@@ -1302,8 +1497,8 @@ input, textarea, select { font-family: inherit; color: inherit; }
1302
1497
  .tabs.line .tabs-nav .tab.active::after,
1303
1498
  .tabs.underline .tabs-nav .tab.active::after {
1304
1499
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
1305
- background: var(--accent); border-radius: 999px;
1306
- box-shadow: 0 0 8px var(--accent-glow);
1500
+ background: var(--lmn-tabs-accent, var(--accent)); border-radius: 999px;
1501
+ box-shadow: 0 0 8px var(--lmn-tabs-accent-glow, var(--accent-glow));
1307
1502
  }
1308
1503
  /* Centered nav — works for pill / segmented (self-align) and line (flex-center) */
1309
1504
  .tabs.centered .tabs-nav { align-self: center; }
@@ -1315,9 +1510,9 @@ input, textarea, select { font-family: inherit; color: inherit; }
1315
1510
  /* ============ Collapse ============ */
1316
1511
  .collapse { display: flex; flex-direction: column; gap: 10px; }
1317
1512
  .collapse-item {
1318
- background: var(--bg);
1513
+ background: var(--lmn-collapse-bg, var(--bg));
1319
1514
  border-radius: var(--r-md);
1320
- box-shadow: var(--neu-shadow-control);
1515
+ box-shadow: var(--lmn-collapse-neu-shadow-control, var(--neu-shadow-control));
1321
1516
  overflow: hidden;
1322
1517
  }
1323
1518
  .collapse.ghost .collapse-item {
@@ -1338,7 +1533,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
1338
1533
  font-size: 13px;
1339
1534
  font-weight: 500;
1340
1535
  font-family: inherit;
1341
- color: var(--fg);
1536
+ color: var(--lmn-collapse-fg, var(--fg));
1342
1537
  text-align: left;
1343
1538
  }
1344
1539
  .collapse.small .collapse-head { padding: 10px 14px; font-size: 12px; }
@@ -1349,7 +1544,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
1349
1544
  max-height: 0;
1350
1545
  overflow: hidden;
1351
1546
  transition: max-height var(--dur) var(--ease);
1352
- color: var(--fg-muted);
1547
+ color: var(--lmn-collapse-fg-muted, var(--fg-muted));
1353
1548
  font-size: 13px;
1354
1549
  }
1355
1550
  .collapse-body-inner { padding: 0 18px 16px; }
@@ -1357,14 +1552,19 @@ input, textarea, select { font-family: inherit; color: inherit; }
1357
1552
  .collapse.large .collapse-body-inner { padding: 0 22px 20px; }
1358
1553
  .collapse-chev {
1359
1554
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
1360
- color: var(--fg-subtle);
1555
+ color: var(--lmn-collapse-fg-subtle, var(--fg-subtle));
1361
1556
  display: inline-flex;
1362
1557
  border-radius: var(--r-xs);
1363
1558
  padding: 2px;
1364
1559
  }
1560
+ button.collapse-chev {
1561
+ border: 0;
1562
+ background: transparent;
1563
+ font: inherit;
1564
+ }
1365
1565
  .collapse-chev.clickable { cursor: pointer; }
1366
- .collapse-chev.clickable:hover { color: var(--fg); background: var(--bg); box-shadow: var(--neu-shadow-subtle); }
1367
- .collapse-item.open .collapse-chev { transform: rotate(180deg); color: var(--accent); }
1566
+ .collapse-chev.clickable:hover { color: var(--lmn-collapse-fg, var(--fg)); background: var(--lmn-collapse-bg, var(--bg)); box-shadow: var(--lmn-collapse-neu-shadow-subtle, var(--neu-shadow-subtle)); }
1567
+ .collapse-item.open .collapse-chev { transform: rotate(180deg); color: var(--lmn-collapse-accent, var(--accent)); }
1368
1568
  /* ============ Select ============ */
1369
1569
  .select {
1370
1570
  position: relative;
@@ -1380,14 +1580,14 @@ input, textarea, select { font-family: inherit; color: inherit; }
1380
1580
  padding: 0 36px 0 var(--ctrl-pad-x);
1381
1581
  border: none;
1382
1582
  border-radius: var(--r-md);
1383
- background: var(--bg);
1384
- box-shadow: var(--neu-shadow-control);
1583
+ background: var(--lmn-select-bg, var(--bg));
1584
+ box-shadow: var(--lmn-select-neu-shadow-control, var(--neu-shadow-control));
1385
1585
  display: inline-flex;
1386
1586
  align-items: center;
1387
1587
  gap: 8px;
1388
1588
  font-size: var(--fs-md);
1389
1589
  font-family: inherit;
1390
- color: var(--fg);
1590
+ color: var(--lmn-select-fg, var(--fg));
1391
1591
  cursor: pointer;
1392
1592
  transition: all var(--dur-fast) var(--ease);
1393
1593
  position: relative;
@@ -1431,25 +1631,25 @@ input, textarea, select { font-family: inherit; color: inherit; }
1431
1631
  height: 18px;
1432
1632
  }
1433
1633
  .select.invalid .select-trigger {
1434
- box-shadow: var(--neu-shadow-control), 0 0 0 2px color-mix(in oklch, var(--danger) 30%, transparent);
1634
+ box-shadow: var(--lmn-select-neu-shadow-control, var(--neu-shadow-control)), 0 0 0 2px color-mix(in oklch, var(--lmn-select-danger, var(--danger)) 30%, transparent);
1435
1635
  }
1436
1636
  .select.invalid.open .select-trigger {
1437
- box-shadow: var(--neu-shadow-inset), 0 0 0 2px color-mix(in oklch, var(--danger) 30%, transparent);
1637
+ box-shadow: var(--lmn-select-neu-shadow-inset, var(--neu-shadow-inset)), 0 0 0 2px color-mix(in oklch, var(--lmn-select-danger, var(--danger)) 30%, transparent);
1438
1638
  }
1439
1639
  .select.sm .select-trigger { height: var(--ctrl-h-sm); padding: 0 32px 0 var(--ctrl-pad-x-sm); font-size: var(--fs-sm); border-radius: var(--r-sm); }
1440
1640
  .select.lg .select-trigger { height: var(--field-h-lg); padding: 0 36px 0 var(--ctrl-pad-x); font-size: var(--fs-lg); border-radius: var(--r-lg); }
1441
- .select-trigger:hover { color: var(--accent-ink); }
1442
- .select.open .select-trigger { box-shadow: var(--neu-shadow-inset); color: var(--accent-ink); }
1443
- .select-trigger .placeholder { color: var(--fg-subtle); }
1641
+ .select-trigger:hover { color: var(--lmn-select-accent-ink, var(--accent-ink)); }
1642
+ .select.open .select-trigger { box-shadow: var(--lmn-select-neu-shadow-inset, var(--neu-shadow-inset)); color: var(--lmn-select-accent-ink, var(--accent-ink)); }
1643
+ .select-trigger .placeholder { color: var(--lmn-select-fg-subtle, var(--fg-subtle)); }
1444
1644
  .select-caret {
1445
1645
  position: absolute;
1446
1646
  right: 12px; top: 50%;
1447
1647
  transform: translateY(-50%);
1448
- color: var(--fg-subtle);
1648
+ color: var(--lmn-select-fg-subtle, var(--fg-subtle));
1449
1649
  transition: transform var(--dur) var(--ease);
1450
1650
  flex-shrink: 0;
1451
1651
  }
1452
- .select.open .select-caret { transform: translateY(-50%) rotate(180deg); color: var(--accent); }
1652
+ .select.open .select-caret { transform: translateY(-50%) rotate(180deg); color: var(--lmn-select-accent, var(--accent)); }
1453
1653
  /* Multi-select trigger: variable height, tags inside, vertically centered */
1454
1654
  .select.multi .select-trigger {
1455
1655
  height: auto;
@@ -1486,25 +1686,28 @@ input, textarea, select { font-family: inherit; color: inherit; }
1486
1686
  width: 20px;
1487
1687
  height: 20px;
1488
1688
  border-radius: 999px;
1489
- background: var(--bg);
1490
- box-shadow: var(--neu-shadow-control);
1689
+ background: var(--lmn-select-bg, var(--bg));
1690
+ border: none;
1691
+ padding: 0;
1692
+ font: inherit;
1693
+ box-shadow: var(--lmn-select-neu-shadow-control, var(--neu-shadow-control));
1491
1694
  display: inline-grid;
1492
1695
  place-items: center;
1493
1696
  cursor: pointer;
1494
- color: var(--fg-subtle);
1697
+ color: var(--lmn-select-fg-subtle, var(--fg-subtle));
1495
1698
  opacity: 0;
1496
1699
  transition: all var(--dur-fast) var(--ease);
1497
1700
  z-index: 1;
1498
1701
  }
1499
1702
  .select:hover .select-clear { opacity: 1; }
1500
- .select-clear:hover { color: var(--accent-ink); box-shadow: var(--neu-shadow-inset); }
1703
+ .select-clear:hover { color: var(--lmn-select-accent-ink, var(--accent-ink)); box-shadow: var(--lmn-select-neu-shadow-inset, var(--neu-shadow-inset)); }
1501
1704
  /* Multi-select menu: leading checkbox per item */
1502
1705
  .menu-check {
1503
1706
  width: 16px;
1504
1707
  height: 16px;
1505
1708
  border-radius: 5px;
1506
- background: var(--bg);
1507
- box-shadow: var(--neu-shadow-inset);
1709
+ background: var(--lmn-select-bg, var(--bg));
1710
+ box-shadow: var(--lmn-select-neu-shadow-inset, var(--neu-shadow-inset));
1508
1711
  display: inline-grid;
1509
1712
  place-items: center;
1510
1713
  flex-shrink: 0;
@@ -1512,15 +1715,15 @@ input, textarea, select { font-family: inherit; color: inherit; }
1512
1715
  transition: all var(--dur-fast) var(--ease);
1513
1716
  }
1514
1717
  .menu-check.on {
1515
- background: var(--accent);
1516
- box-shadow: var(--neu-shadow-control), 0 1px 4px var(--accent-glow);
1718
+ background: var(--lmn-select-accent, var(--accent));
1719
+ box-shadow: var(--lmn-select-neu-shadow-control, var(--neu-shadow-control)), 0 1px 4px var(--lmn-select-accent-glow, var(--accent-glow));
1517
1720
  }
1518
1721
  /* Menu search — flush with menu, single subtle separator (no nested frame) */
1519
1722
  .menu-search {
1520
1723
  display: block;
1521
1724
  padding: 4px 2px 8px;
1522
1725
  margin: -2px -2px 4px;
1523
- border-bottom: 1px solid var(--divider);
1726
+ border-bottom: 1px solid var(--lmn-select-divider, var(--divider));
1524
1727
  }
1525
1728
  .menu-search .input-wrap { width: 100%; }
1526
1729
  /* Menu state (loading / empty) */
@@ -1532,28 +1735,38 @@ input, textarea, select { font-family: inherit; color: inherit; }
1532
1735
  gap: 10px;
1533
1736
  padding: 26px 12px;
1534
1737
  font-size: var(--fs-sm);
1535
- color: var(--fg-muted);
1738
+ color: var(--lmn-select-fg-muted, var(--fg-muted));
1536
1739
  }
1537
1740
  .menu-state .menu-state-ico {
1538
1741
  width: 40px;
1539
1742
  height: 40px;
1540
1743
  border-radius: var(--r-md);
1541
- background: var(--bg);
1542
- box-shadow: var(--neu-shadow-inset);
1744
+ background: var(--lmn-select-bg, var(--bg));
1745
+ box-shadow: var(--lmn-select-neu-shadow-inset, var(--neu-shadow-inset));
1543
1746
  display: grid;
1544
1747
  place-items: center;
1545
- color: var(--fg-subtle);
1748
+ color: var(--lmn-select-fg-subtle, var(--fg-subtle));
1546
1749
  }
1547
1750
  .menu-state .menu-state-ico .spinner {
1548
1751
  width: 16px;
1549
1752
  height: 16px;
1550
1753
  display: inline-block;
1551
1754
  border-radius: 999px;
1552
- border: 2px solid var(--accent);
1553
- border-color: var(--accent);
1755
+ border: 2px solid var(--lmn-select-accent, var(--accent));
1756
+ border-color: var(--lmn-select-accent, var(--accent));
1554
1757
  border-right-color: transparent;
1555
1758
  animation: spin 0.8s linear infinite;
1556
1759
  }
1760
+ .select-value-custom {
1761
+ overflow: hidden;
1762
+ }
1763
+ .select-value-custom > * {
1764
+ min-width: 0;
1765
+ max-width: 100%;
1766
+ }
1767
+ @media (prefers-reduced-motion: reduce) {
1768
+ .menu-state .menu-state-ico .spinner { animation: none; }
1769
+ }
1557
1770
  /* Option body — supports description line under label */
1558
1771
  .menu-item-body {
1559
1772
  flex: 1;
@@ -1563,6 +1776,11 @@ input, textarea, select { font-family: inherit; color: inherit; }
1563
1776
  min-width: 0;
1564
1777
  text-align: left;
1565
1778
  }
1779
+ .menu-item-custom {
1780
+ flex: 1;
1781
+ min-width: 0;
1782
+ text-align: left;
1783
+ }
1566
1784
  .menu-item-label {
1567
1785
  white-space: nowrap;
1568
1786
  overflow: hidden;
@@ -1570,31 +1788,36 @@ input, textarea, select { font-family: inherit; color: inherit; }
1570
1788
  }
1571
1789
  .menu-item-desc {
1572
1790
  font-size: var(--fs-xs);
1573
- color: var(--fg-subtle);
1791
+ color: var(--lmn-select-fg-subtle, var(--fg-subtle));
1574
1792
  white-space: nowrap;
1575
1793
  overflow: hidden;
1576
1794
  text-overflow: ellipsis;
1577
1795
  }
1578
- .menu-item.active .menu-item-desc { color: color-mix(in oklch, var(--accent-ink) 70%, var(--fg-subtle)); }
1796
+ .menu-item.active .menu-item-desc { color: color-mix(in oklch, var(--lmn-select-accent-ink, var(--accent-ink)) 70%, var(--lmn-select-fg-subtle, var(--fg-subtle))); }
1579
1797
  /* Keyboard / hover highlight — soft raised pill */
1580
1798
  .menu-item.highlight:not([disabled]) {
1581
- background: var(--bg);
1582
- box-shadow: var(--neu-shadow-control);
1583
- color: var(--accent-ink);
1799
+ background: var(--lmn-select-bg, var(--bg));
1800
+ box-shadow: var(--lmn-select-neu-shadow-control, var(--neu-shadow-control));
1801
+ color: var(--lmn-select-accent-ink, var(--accent-ink));
1584
1802
  }
1585
1803
  .menu-item[disabled] {
1586
1804
  opacity: 0.45;
1587
1805
  cursor: not-allowed;
1588
1806
  }
1589
1807
  .menu {
1590
- background: var(--bg);
1808
+ background: var(--lmn-select-bg, var(--bg));
1591
1809
  border-radius: var(--r-md);
1592
- box-shadow: var(--neu-shadow-float);
1810
+ box-shadow: var(--lmn-select-neu-shadow-float, var(--neu-shadow-float));
1593
1811
  padding: 6px;
1594
1812
  min-width: 180px;
1813
+ max-width: calc(100vw - 16px);
1595
1814
  z-index: 1000;
1596
1815
  animation: menuIn var(--dur) var(--ease);
1597
- max-height: 260px;
1816
+ overflow: hidden;
1817
+ }
1818
+ .menu-options {
1819
+ display: flex;
1820
+ flex-direction: column;
1598
1821
  overflow-y: auto;
1599
1822
  }
1600
1823
  .menu-item {
@@ -1602,7 +1825,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
1602
1825
  border-radius: var(--r-sm);
1603
1826
  font-size: var(--fs-md);
1604
1827
  cursor: pointer;
1605
- color: var(--fg);
1828
+ color: var(--lmn-select-fg, var(--fg));
1606
1829
  display: flex;
1607
1830
  align-items: center;
1608
1831
  gap: 10px;
@@ -1613,20 +1836,83 @@ input, textarea, select { font-family: inherit; color: inherit; }
1613
1836
  width: 100%;
1614
1837
  text-align: left;
1615
1838
  }
1616
- .menu-item:hover { background: var(--bg); box-shadow: var(--neu-shadow-subtle); color: var(--accent-ink); }
1617
- .menu-item.active { color: var(--accent-ink); font-weight: 500; }
1618
- .menu-item .tick { margin-left: auto; color: var(--accent); opacity: 0; }
1839
+ .menu-item:hover { background: var(--lmn-select-bg, var(--bg)); box-shadow: var(--lmn-select-neu-shadow-subtle, var(--neu-shadow-subtle)); color: var(--lmn-select-accent-ink, var(--accent-ink)); }
1840
+ .menu-item.active { color: var(--lmn-select-accent-ink, var(--accent-ink)); font-weight: 500; }
1841
+ .menu-item .tick { margin-left: auto; color: var(--lmn-select-accent, var(--accent)); opacity: 0; }
1619
1842
  .menu-item.active .tick { opacity: 1; }
1620
- .menu-item.danger { color: var(--danger); }
1621
- .menu-separator { height: 1px; background: var(--divider); margin: 6px 4px; }
1843
+ .menu-item.danger { color: var(--lmn-select-danger, var(--danger)); }
1844
+ .menu-separator { height: 1px; background: var(--lmn-select-divider, var(--divider)); margin: 6px 4px; }
1622
1845
  .menu-group-label {
1623
1846
  font-size: 10px;
1624
1847
  font-weight: 600;
1625
1848
  text-transform: uppercase;
1626
1849
  letter-spacing: 0.08em;
1627
- color: var(--fg-subtle);
1850
+ color: var(--lmn-select-fg-subtle, var(--fg-subtle));
1628
1851
  padding: 8px 12px 4px;
1629
1852
  }
1853
+ /* ============ Form ============ */
1854
+ .lumina-form { display: flex; flex-direction: column; gap: 18px; }
1855
+ .lumina-form.layout-inline {
1856
+ flex-direction: row;
1857
+ flex-wrap: wrap;
1858
+ align-items: flex-start;
1859
+ gap: 12px;
1860
+ }
1861
+ .lumina-form.layout-inline .form-item { flex: 0 0 auto; }
1862
+ .form-item {
1863
+ display: flex;
1864
+ flex-direction: column;
1865
+ gap: 6px;
1866
+ min-width: 0;
1867
+ }
1868
+ .lumina-form.layout-horizontal .form-item {
1869
+ flex-direction: row;
1870
+ align-items: flex-start;
1871
+ gap: 12px;
1872
+ }
1873
+ .lumina-form.layout-horizontal .form-item-label {
1874
+ flex: 0 0 auto;
1875
+ min-width: 96px;
1876
+ padding-top: 10px;
1877
+ text-align: right;
1878
+ }
1879
+ .lumina-form.layout-horizontal .form-item-control { flex: 1; min-width: 0; }
1880
+ .form-item-label {
1881
+ font-size: 13px;
1882
+ font-weight: 500;
1883
+ color: var(--lmn-form-fg, var(--fg));
1884
+ padding-left: 2px;
1885
+ display: inline-flex;
1886
+ align-items: center;
1887
+ gap: 4px;
1888
+ }
1889
+ .form-item-required {
1890
+ color: var(--lmn-form-danger, var(--danger));
1891
+ font-weight: 600;
1892
+ margin-right: 2px;
1893
+ }
1894
+ .form-item-control { min-width: 0; }
1895
+ .form-item-error {
1896
+ font-size: 12px;
1897
+ color: var(--lmn-form-danger, var(--danger));
1898
+ padding-left: 2px;
1899
+ animation: fadeIn var(--dur-fast) var(--ease);
1900
+ }
1901
+ .form-item-help {
1902
+ font-size: 12px;
1903
+ color: var(--lmn-form-fg-subtle, var(--fg-subtle));
1904
+ padding-left: 2px;
1905
+ }
1906
+ .form-item-extra {
1907
+ font-size: 11.5px;
1908
+ color: var(--lmn-form-fg-subtle, var(--fg-subtle));
1909
+ padding-left: 2px;
1910
+ opacity: 0.85;
1911
+ }
1912
+ .form-item.has-error .input-wrap,
1913
+ .form-item.has-error .select-trigger {
1914
+ box-shadow: var(--lmn-form-neu-shadow-inset, var(--neu-shadow-inset)), 0 0 0 2px color-mix(in oklch, var(--lmn-form-danger, var(--danger)) 30%, transparent);
1915
+ }
1630
1916
  /* ============ Modal ============ */
1631
1917
  .modal-overlay {
1632
1918
  position: fixed;
@@ -1642,15 +1928,16 @@ input, textarea, select { font-family: inherit; color: inherit; }
1642
1928
  display: none;
1643
1929
  }
1644
1930
  .modal {
1645
- background: var(--bg);
1931
+ background: var(--lmn-modal-bg, var(--bg));
1646
1932
  border-radius: var(--r-xl);
1647
- box-shadow: var(--neu-shadow-float);
1933
+ box-shadow: var(--lmn-modal-neu-shadow-float, var(--neu-shadow-float));
1648
1934
  padding: var(--gap-6);
1649
1935
  width: min(480px, 92vw);
1650
1936
  animation: modalIn var(--dur-slow) var(--ease);
1651
1937
  max-height: 86vh;
1652
1938
  display: flex;
1653
1939
  flex-direction: column;
1940
+ --overlay-shadow-safe-area: calc(var(--lmn-modal-shadow-offset, var(--shadow-offset)) + var(--lmn-modal-shadow-blur, var(--shadow-blur)));
1654
1941
  }
1655
1942
  @keyframes modalIn {
1656
1943
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
@@ -1660,7 +1947,6 @@ input, textarea, select { font-family: inherit; color: inherit; }
1660
1947
  align-items: flex-start;
1661
1948
  justify-content: space-between;
1662
1949
  gap: var(--gap-3);
1663
- margin-bottom: var(--gap-3);
1664
1950
  }
1665
1951
  .modal-titles {
1666
1952
  display: flex;
@@ -1668,20 +1954,31 @@ input, textarea, select { font-family: inherit; color: inherit; }
1668
1954
  gap: 4px;
1669
1955
  }
1670
1956
  .modal-title { font-size: 17px; font-weight: 600; }
1671
- .modal-desc { font-size: 13px; color: var(--fg-muted); }
1957
+ .modal-desc { font-size: 13px; color: var(--lmn-modal-fg-muted, var(--fg-muted)); }
1672
1958
  .modal-body {
1673
- padding: var(--gap-3) 0;
1674
- color: var(--fg-muted);
1959
+ min-width: 0;
1960
+ min-height: 0;
1961
+ margin-inline: calc(var(--gap-6) * -1);
1962
+ padding: var(--overlay-shadow-safe-area);
1963
+ color: var(--lmn-modal-fg-muted, var(--fg-muted));
1675
1964
  font-size: 13px;
1676
1965
  line-height: 1.6;
1677
1966
  flex: 1;
1678
1967
  overflow-y: auto;
1679
1968
  }
1969
+ .modal-body:first-child {
1970
+ margin-top: calc(var(--gap-6) * -1);
1971
+ }
1972
+ .modal-body:last-child {
1973
+ margin-bottom: calc(var(--gap-6) * -1);
1974
+ }
1975
+ .modal-body.inset-none {
1976
+ padding: 0;
1977
+ }
1680
1978
  .modal-foot {
1681
1979
  display: flex;
1682
1980
  gap: 10px;
1683
1981
  justify-content: flex-end;
1684
- margin-top: var(--gap-4);
1685
1982
  }
1686
1983
  .modal-close {
1687
1984
  width: 28px; height: 28px;
@@ -1690,14 +1987,14 @@ input, textarea, select { font-family: inherit; color: inherit; }
1690
1987
  border-radius: var(--r-sm);
1691
1988
  display: grid;
1692
1989
  place-items: center;
1693
- color: var(--fg-subtle);
1990
+ color: var(--lmn-modal-fg-subtle, var(--fg-subtle));
1694
1991
  cursor: pointer;
1695
1992
  transition: all var(--dur-fast) var(--ease);
1696
1993
  }
1697
1994
  .modal-close:hover {
1698
- color: var(--fg);
1699
- background: var(--bg);
1700
- box-shadow: var(--neu-shadow-subtle);
1995
+ color: var(--lmn-modal-fg, var(--fg));
1996
+ background: var(--lmn-modal-bg, var(--bg));
1997
+ box-shadow: var(--lmn-modal-neu-shadow-subtle, var(--neu-shadow-subtle));
1701
1998
  }
1702
1999
  .modal-static-body {
1703
2000
  display: flex;
@@ -1711,16 +2008,16 @@ input, textarea, select { font-family: inherit; color: inherit; }
1711
2008
  display: inline-grid;
1712
2009
  place-items: center;
1713
2010
  flex-shrink: 0;
1714
- background: var(--bg);
1715
- box-shadow: var(--neu-shadow-inset);
1716
- color: var(--accent);
2011
+ background: var(--lmn-modal-bg, var(--bg));
2012
+ box-shadow: var(--lmn-modal-neu-shadow-inset, var(--neu-shadow-inset));
2013
+ color: var(--lmn-modal-accent, var(--accent));
1717
2014
  }
1718
- .modal-static-icon.success { color: var(--success); }
1719
- .modal-static-icon.warning { color: var(--warning); }
1720
- .modal-static-icon.error { color: var(--danger); }
2015
+ .modal-static-icon.success { color: var(--lmn-modal-success, var(--success)); }
2016
+ .modal-static-icon.warning { color: var(--lmn-modal-warning, var(--warning)); }
2017
+ .modal-static-icon.error { color: var(--lmn-modal-danger, var(--danger)); }
1721
2018
  .modal-static-content {
1722
2019
  min-width: 0;
1723
- color: var(--fg-muted);
2020
+ color: var(--lmn-modal-fg-muted, var(--fg-muted));
1724
2021
  }
1725
2022
  /* ============ Drawer ============ */
1726
2023
  .drawer-overlay {
@@ -1736,15 +2033,16 @@ input, textarea, select { font-family: inherit; color: inherit; }
1736
2033
  }
1737
2034
  .drawer {
1738
2035
  position: fixed;
1739
- background: var(--bg);
2036
+ background: var(--lmn-drawer-bg, var(--bg));
1740
2037
  padding: var(--gap-5);
1741
2038
  z-index: 151;
1742
- overflow-y: auto;
2039
+ overflow: hidden;
1743
2040
  display: flex;
1744
2041
  flex-direction: column;
1745
- --drawer-shadow-offset: calc(var(--shadow-offset) * 4 * var(--shadow-float-scale));
1746
- --drawer-shadow-blur: calc(var(--shadow-blur) * 3.75 * var(--shadow-float-scale));
1747
- --drawer-shadow-spread: calc(var(--shadow-offset) * -3.3 * var(--shadow-float-scale));
2042
+ --overlay-shadow-safe-area: calc(var(--lmn-drawer-shadow-offset, var(--shadow-offset)) + var(--lmn-drawer-shadow-blur, var(--shadow-blur)));
2043
+ --drawer-shadow-offset: calc(var(--lmn-drawer-shadow-offset, var(--shadow-offset)) * 4 * var(--shadow-float-scale));
2044
+ --drawer-shadow-blur: calc(var(--lmn-drawer-shadow-blur, var(--shadow-blur)) * 3.75 * var(--shadow-float-scale));
2045
+ --drawer-shadow-spread: calc(var(--lmn-drawer-shadow-offset, var(--shadow-offset)) * -3.3 * var(--shadow-float-scale));
1748
2046
  }
1749
2047
  .drawer.hidden {
1750
2048
  display: none;
@@ -1753,25 +2051,25 @@ input, textarea, select { font-family: inherit; color: inherit; }
1753
2051
  top: 0; right: 0; bottom: 0;
1754
2052
  width: min(420px, 92vw);
1755
2053
  animation: drawerInRight var(--dur-slow) var(--ease);
1756
- box-shadow: calc(var(--drawer-shadow-offset) * -1) 0 var(--drawer-shadow-blur) var(--drawer-shadow-spread) var(--shadow-dark);
2054
+ box-shadow: calc(var(--drawer-shadow-offset) * -1) 0 var(--drawer-shadow-blur) var(--drawer-shadow-spread) var(--lmn-drawer-shadow-dark, var(--shadow-dark));
1757
2055
  }
1758
2056
  .drawer.left {
1759
2057
  top: 0; left: 0; bottom: 0;
1760
2058
  width: min(420px, 92vw);
1761
2059
  animation: drawerInLeft var(--dur-slow) var(--ease);
1762
- box-shadow: var(--drawer-shadow-offset) 0 var(--drawer-shadow-blur) var(--drawer-shadow-spread) var(--shadow-dark);
2060
+ box-shadow: var(--drawer-shadow-offset) 0 var(--drawer-shadow-blur) var(--drawer-shadow-spread) var(--lmn-drawer-shadow-dark, var(--shadow-dark));
1763
2061
  }
1764
2062
  .drawer.top {
1765
2063
  top: 0; left: 0; right: 0;
1766
2064
  height: min(320px, 80vh);
1767
2065
  animation: drawerInTop var(--dur-slow) var(--ease);
1768
- box-shadow: 0 var(--drawer-shadow-offset) var(--drawer-shadow-blur) var(--drawer-shadow-spread) var(--shadow-dark);
2066
+ box-shadow: 0 var(--drawer-shadow-offset) var(--drawer-shadow-blur) var(--drawer-shadow-spread) var(--lmn-drawer-shadow-dark, var(--shadow-dark));
1769
2067
  }
1770
2068
  .drawer.bottom {
1771
2069
  bottom: 0; left: 0; right: 0;
1772
2070
  height: min(320px, 80vh);
1773
2071
  animation: drawerInBottom var(--dur-slow) var(--ease);
1774
- box-shadow: 0 calc(var(--drawer-shadow-offset) * -1) var(--drawer-shadow-blur) var(--drawer-shadow-spread) var(--shadow-dark);
2072
+ box-shadow: 0 calc(var(--drawer-shadow-offset) * -1) var(--drawer-shadow-blur) var(--drawer-shadow-spread) var(--lmn-drawer-shadow-dark, var(--shadow-dark));
1775
2073
  }
1776
2074
  @keyframes drawerInRight { from { transform: translateX( 20px); opacity: 0; } }
1777
2075
  @keyframes drawerInLeft { from { transform: translateX(-20px); opacity: 0; } }
@@ -1782,9 +2080,8 @@ input, textarea, select { font-family: inherit; color: inherit; }
1782
2080
  align-items: center;
1783
2081
  justify-content: space-between;
1784
2082
  gap: var(--gap-3);
1785
- margin-bottom: var(--gap-4);
1786
2083
  padding-bottom: var(--gap-4);
1787
- border-bottom: 1px solid var(--divider);
2084
+ border-bottom: 1px solid var(--lmn-drawer-divider, var(--divider));
1788
2085
  }
1789
2086
  .drawer-head-right {
1790
2087
  display: inline-flex;
@@ -1802,25 +2099,38 @@ input, textarea, select { font-family: inherit; color: inherit; }
1802
2099
  border-radius: var(--r-sm);
1803
2100
  display: grid;
1804
2101
  place-items: center;
1805
- color: var(--fg-subtle);
2102
+ color: var(--lmn-drawer-fg-subtle, var(--fg-subtle));
1806
2103
  cursor: pointer;
1807
2104
  transition: all var(--dur-fast) var(--ease);
1808
2105
  }
1809
2106
  .drawer-close:hover {
1810
- color: var(--fg);
1811
- background: var(--bg);
1812
- box-shadow: var(--neu-shadow-subtle);
2107
+ color: var(--lmn-drawer-fg, var(--fg));
2108
+ background: var(--lmn-drawer-bg, var(--bg));
2109
+ box-shadow: var(--lmn-drawer-neu-shadow-subtle, var(--neu-shadow-subtle));
1813
2110
  }
1814
2111
  .drawer-body {
1815
2112
  flex: 1;
2113
+ min-width: 0;
2114
+ min-height: 0;
2115
+ margin-inline: calc(var(--gap-5) * -1);
2116
+ padding: var(--overlay-shadow-safe-area);
2117
+ overflow: auto;
2118
+ }
2119
+ .drawer-body:first-child {
2120
+ margin-top: calc(var(--gap-5) * -1);
2121
+ }
2122
+ .drawer-body:last-child {
2123
+ margin-bottom: calc(var(--gap-5) * -1);
2124
+ }
2125
+ .drawer-body.inset-none {
2126
+ padding: 0;
1816
2127
  }
1817
2128
  .drawer-foot {
1818
2129
  display: flex;
1819
2130
  gap: 10px;
1820
2131
  justify-content: flex-end;
1821
- margin-top: var(--gap-4);
1822
2132
  padding-top: var(--gap-4);
1823
- border-top: 1px solid var(--divider);
2133
+ border-top: 1px solid var(--lmn-drawer-divider, var(--divider));
1824
2134
  }
1825
2135
  /* ============ Tooltip ============ */
1826
2136
  .tip-anchor {
@@ -1831,14 +2141,14 @@ input, textarea, select { font-family: inherit; color: inherit; }
1831
2141
  .tip {
1832
2142
  display: block;
1833
2143
  box-sizing: border-box;
1834
- background: var(--bg-sunken);
1835
- color: var(--fg);
2144
+ background: var(--lmn-tooltip-bg-sunken, var(--bg-sunken));
2145
+ color: var(--lmn-tooltip-fg, var(--fg));
1836
2146
  padding: 6px 10px;
1837
2147
  border-radius: var(--r-sm);
1838
2148
  font-size: 11px;
1839
2149
  font-weight: 500;
1840
2150
  white-space: nowrap;
1841
- box-shadow: var(--neu-shadow-control);
2151
+ box-shadow: var(--lmn-tooltip-neu-shadow-control, var(--neu-shadow-control));
1842
2152
  pointer-events: auto;
1843
2153
  animation: fadeIn var(--dur) var(--ease);
1844
2154
  z-index: 1000;
@@ -1858,50 +2168,49 @@ input, textarea, select { font-family: inherit; color: inherit; }
1858
2168
  .message-container.bottom-left { bottom: 20px; left: 20px; }
1859
2169
  .message-container.top-center { top: 56px; left: 50%; transform: translateX(-50%); align-items: center; }
1860
2170
  .message {
1861
- background: var(--bg);
2171
+ background: var(--lmn-message-bg, var(--bg));
1862
2172
  border-radius: var(--r-md);
1863
- box-shadow: var(--neu-shadow-float);
2173
+ box-shadow: var(--lmn-message-neu-shadow-float, var(--neu-shadow-float));
1864
2174
  padding: 12px 16px;
1865
2175
  min-width: 240px;
1866
2176
  display: flex; align-items: center; gap: 10px;
1867
2177
  font-size: 13px;
1868
2178
  pointer-events: auto;
1869
2179
  animation: messageIn var(--dur-slow) var(--ease);
1870
- border-left: 3px solid var(--accent);
1871
- }
1872
- .message.success { border-color: var(--success); }
1873
- .message.warning { border-color: var(--warning); }
1874
- .message.error { border-color: var(--danger); }
1875
- .message .message-icon { color: var(--accent); flex-shrink: 0; }
1876
- .message.success .message-icon { color: var(--success); }
1877
- .message.warning .message-icon { color: var(--warning); }
1878
- .message.error .message-icon { color: var(--danger); }
2180
+ border-left: 3px solid var(--lmn-message-accent, var(--accent));
2181
+ }
2182
+ .message.success { border-color: var(--lmn-message-success, var(--success)); }
2183
+ .message.warning { border-color: var(--lmn-message-warning, var(--warning)); }
2184
+ .message.error { border-color: var(--lmn-message-danger, var(--danger)); }
2185
+ .message .message-icon { color: var(--lmn-message-accent, var(--accent)); flex-shrink: 0; }
2186
+ .message.success .message-icon { color: var(--lmn-message-success, var(--success)); }
2187
+ .message.warning .message-icon { color: var(--lmn-message-warning, var(--warning)); }
2188
+ .message.error .message-icon { color: var(--lmn-message-danger, var(--danger)); }
1879
2189
  .message-body { flex: 1; min-width: 0; }
1880
2190
  .message-title { font-weight: 600; margin-bottom: 2px; }
1881
- .message-content { color: var(--fg-muted); font-size: 12px; }
2191
+ .message-content { color: var(--lmn-message-fg-muted, var(--fg-muted)); font-size: 12px; }
1882
2192
  .message-close {
1883
2193
  background: transparent; border: none;
1884
- color: var(--fg-subtle); cursor: pointer;
2194
+ color: var(--lmn-message-fg-subtle, var(--fg-subtle)); cursor: pointer;
1885
2195
  padding: 0 2px; font-family: inherit;
1886
2196
  }
1887
- .message-close:hover { color: var(--fg); }
2197
+ .message-close:hover { color: var(--lmn-message-fg, var(--fg)); }
1888
2198
  .message.leaving { animation: messageOut var(--dur) var(--ease) forwards; }
1889
2199
  @keyframes messageIn { from { opacity: 0; transform: translateX(20px); } }
1890
2200
  @keyframes messageOut { to { opacity: 0; transform: translateX(20px); } }
1891
2201
  /* ============ Popover ============ */
1892
2202
  .popover {
1893
2203
  z-index: 1000;
1894
- background: var(--bg);
2204
+ background: var(--lmn-popover-bg, var(--bg));
1895
2205
  border-radius: var(--r-md);
1896
2206
  min-width: 220px;
1897
- box-shadow: var(--neu-shadow-float);
2207
+ box-shadow: var(--lmn-popover-neu-shadow-float, var(--neu-shadow-float));
1898
2208
  position: relative;
1899
2209
  }
1900
2210
  /*
1901
2211
  * Direction-aware entrance.
1902
- * We animate `opacity` + `translate` (the standalone property, NOT `transform`)
1903
- * so we don't clobber the inline `transform: translateX(-50%)` that useFloating
1904
- * applies for cross-axis centering.
2212
+ * We animate `opacity` + `translate` so positioning stays independent from
2213
+ * the coordinates calculated by useFloating.
1905
2214
  */
1906
2215
  .popover-bottom { animation: popoverInDown var(--dur) var(--ease); }
1907
2216
  .popover-top { animation: popoverInUp var(--dur) var(--ease); }
@@ -1922,13 +2231,13 @@ input, textarea, select { font-family: inherit; color: inherit; }
1922
2231
  .popover-title {
1923
2232
  font-weight: 600;
1924
2233
  font-size: 14px;
1925
- color: var(--fg);
2234
+ color: var(--lmn-popover-fg, var(--fg));
1926
2235
  }
1927
2236
  .popover-close {
1928
2237
  all: unset;
1929
2238
  cursor: pointer;
1930
2239
  font-size: 16px;
1931
- color: var(--fg-muted);
2240
+ color: var(--lmn-popover-fg-muted, var(--fg-muted));
1932
2241
  line-height: 1;
1933
2242
  padding: 2px 4px;
1934
2243
  border-radius: var(--r-xs);
@@ -1936,7 +2245,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
1936
2245
  margin-left: auto;
1937
2246
  }
1938
2247
  .popover-close:hover {
1939
- color: var(--fg);
2248
+ color: var(--lmn-popover-fg, var(--fg));
1940
2249
  }
1941
2250
  /* ---- Body ---- */
1942
2251
  .popover-body {
@@ -1950,8 +2259,8 @@ input, textarea, select { font-family: inherit; color: inherit; }
1950
2259
  position: absolute;
1951
2260
  width: 10px;
1952
2261
  height: 10px;
1953
- background: var(--bg);
1954
- box-shadow: 2px 2px 4px rgba(163, 177, 198, 0.2);
2262
+ background: var(--lmn-popover-bg, var(--bg));
2263
+ box-shadow: 2px 2px 4px color-mix(in oklch, var(--lmn-popover-shadow-dark, var(--shadow-dark)) 36%, transparent);
1955
2264
  transform: rotate(45deg);
1956
2265
  pointer-events: none;
1957
2266
  }
@@ -1959,40 +2268,238 @@ input, textarea, select { font-family: inherit; color: inherit; }
1959
2268
  top: -5px;
1960
2269
  left: 50%;
1961
2270
  margin-left: -5px;
1962
- box-shadow: -2px -2px 4px rgba(163, 177, 198, 0.2);
2271
+ box-shadow: -2px -2px 4px color-mix(in oklch, var(--lmn-popover-shadow-dark, var(--shadow-dark)) 36%, transparent);
1963
2272
  }
1964
2273
  .popover-arrow-top {
1965
2274
  bottom: -5px;
1966
2275
  left: 50%;
1967
2276
  margin-left: -5px;
1968
- box-shadow: 2px 2px 4px rgba(163, 177, 198, 0.2);
2277
+ box-shadow: 2px 2px 4px color-mix(in oklch, var(--lmn-popover-shadow-dark, var(--shadow-dark)) 36%, transparent);
1969
2278
  }
1970
2279
  .popover-arrow-left {
1971
2280
  right: -5px;
1972
2281
  top: 50%;
1973
2282
  margin-top: -5px;
1974
- box-shadow: 2px -2px 4px rgba(163, 177, 198, 0.2);
2283
+ box-shadow: 2px -2px 4px color-mix(in oklch, var(--lmn-popover-shadow-dark, var(--shadow-dark)) 36%, transparent);
1975
2284
  }
1976
2285
  .popover-arrow-right {
1977
2286
  left: -5px;
1978
2287
  top: 50%;
1979
2288
  margin-top: -5px;
1980
- box-shadow: -2px 2px 4px rgba(163, 177, 198, 0.2);
2289
+ box-shadow: -2px 2px 4px color-mix(in oklch, var(--lmn-popover-shadow-dark, var(--shadow-dark)) 36%, transparent);
1981
2290
  }
1982
- /* ============ Alert ============ */
1983
- .alert {
1984
- display: flex;
1985
- gap: 12px;
1986
- align-items: flex-start;
1987
- padding: 14px 16px;
2291
+ /* ============ ContextMenu ============ */
2292
+ .context-menu {
2293
+ z-index: 5000;
2294
+ padding: 6px;
2295
+ background: var(--lmn-context-menu-bg, var(--bg));
1988
2296
  border-radius: var(--r-md);
1989
- background: var(--bg);
1990
- box-shadow: var(--neu-shadow-inset);
1991
- position: relative;
2297
+ box-shadow: var(--lmn-context-menu-neu-shadow-float, var(--neu-shadow-float));
2298
+ border: 1px solid var(--lmn-context-menu-divider, var(--divider));
2299
+ display: flex;
2300
+ flex-direction: column;
2301
+ gap: 1px;
2302
+ animation: menuIn var(--dur-fast) var(--ease);
2303
+ max-height: calc(100vh - 24px);
2304
+ overflow-y: auto;
1992
2305
  }
1993
- .alert-ico {
1994
- width: 20px; height: 20px;
1995
- display: grid; place-items: center;
2306
+ .context-menu-item {
2307
+ display: grid;
2308
+ grid-template-columns: 18px 1fr auto;
2309
+ align-items: center;
2310
+ gap: 8px;
2311
+ padding: 6px 10px;
2312
+ min-height: 28px;
2313
+ border: none;
2314
+ background: transparent;
2315
+ box-shadow: none;
2316
+ font: inherit;
2317
+ font-size: 13px;
2318
+ color: var(--lmn-context-menu-fg, var(--fg));
2319
+ text-align: left;
2320
+ border-radius: var(--r-sm);
2321
+ cursor: pointer;
2322
+ transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
2323
+ box-shadow var(--dur-fast) var(--ease);
2324
+ }
2325
+ .context-menu-item:disabled { color: var(--lmn-context-menu-fg-subtle, var(--fg-subtle)); cursor: not-allowed; }
2326
+ .context-menu-item.active:not(:disabled) {
2327
+ background: var(--lmn-context-menu-bg, var(--bg));
2328
+ color: var(--lmn-context-menu-accent-ink, var(--accent-ink));
2329
+ box-shadow: var(--lmn-context-menu-neu-shadow-inset, var(--neu-shadow-inset));
2330
+ }
2331
+ .context-menu-item.danger { color: var(--lmn-context-menu-danger, var(--danger)); }
2332
+ .context-menu-item.danger.active:not(:disabled) {
2333
+ background: var(--lmn-context-menu-bg, var(--bg));
2334
+ color: var(--lmn-context-menu-danger, var(--danger));
2335
+ box-shadow: var(--lmn-context-menu-neu-shadow-inset, var(--neu-shadow-inset));
2336
+ }
2337
+ .context-menu-icon {
2338
+ display: inline-flex;
2339
+ justify-content: center;
2340
+ align-items: center;
2341
+ color: var(--lmn-context-menu-fg-muted, var(--fg-muted));
2342
+ }
2343
+ .context-menu-item.active:not(:disabled) .context-menu-icon { color: inherit; }
2344
+ .context-menu-item.danger .context-menu-icon { color: var(--lmn-context-menu-danger, var(--danger)); }
2345
+ .context-menu-label {
2346
+ overflow: hidden;
2347
+ text-overflow: ellipsis;
2348
+ white-space: nowrap;
2349
+ }
2350
+ .context-menu-shortcut {
2351
+ font-family: var(--font-mono);
2352
+ font-size: 11px;
2353
+ color: var(--lmn-context-menu-fg-subtle, var(--fg-subtle));
2354
+ padding-left: 12px;
2355
+ }
2356
+ .context-menu-item.active:not(:disabled) .context-menu-shortcut { color: inherit; opacity: 0.8; }
2357
+ .context-menu-divider {
2358
+ height: 1px;
2359
+ background: var(--lmn-context-menu-divider, var(--divider));
2360
+ margin: 4px 4px;
2361
+ }
2362
+ /* ============ CommandPalette ============ */
2363
+ .cmdp-overlay {
2364
+ position: fixed;
2365
+ inset: 0;
2366
+ z-index: 4000;
2367
+ background: var(--mask-bg);
2368
+ display: flex;
2369
+ justify-content: center;
2370
+ align-items: flex-start;
2371
+ padding-top: 14vh;
2372
+ animation: fadeIn var(--dur-fast) var(--ease);
2373
+ }
2374
+ .cmdp-panel {
2375
+ width: min(560px, calc(100vw - 48px));
2376
+ max-height: 60vh;
2377
+ background: var(--lmn-command-palette-bg, var(--bg));
2378
+ border-radius: var(--r-lg);
2379
+ box-shadow: var(--lmn-command-palette-neu-shadow-float, var(--neu-shadow-float));
2380
+ border: 1px solid var(--lmn-command-palette-divider, var(--divider));
2381
+ display: flex;
2382
+ flex-direction: column;
2383
+ overflow: hidden;
2384
+ animation: cmdpIn var(--dur) var(--ease);
2385
+ }
2386
+ @keyframes cmdpIn {
2387
+ from { opacity: 0; transform: translateY(-12px) scale(0.98); }
2388
+ to { opacity: 1; transform: translateY(0) scale(1); }
2389
+ }
2390
+ .cmdp-search {
2391
+ padding: 12px 12px 10px;
2392
+ }
2393
+ .cmdp-list {
2394
+ overflow-y: auto;
2395
+ padding: 6px;
2396
+ flex: 1;
2397
+ min-height: 60px;
2398
+ }
2399
+ .cmdp-group + .cmdp-group { margin-top: 4px; }
2400
+ .cmdp-group-head {
2401
+ font-size: 11px;
2402
+ text-transform: uppercase;
2403
+ letter-spacing: 0.06em;
2404
+ color: var(--lmn-command-palette-fg-subtle, var(--fg-subtle));
2405
+ padding: 8px 10px 4px;
2406
+ font-weight: 600;
2407
+ }
2408
+ .cmdp-item {
2409
+ display: grid;
2410
+ grid-template-columns: 20px 1fr auto;
2411
+ align-items: center;
2412
+ gap: 10px;
2413
+ width: 100%;
2414
+ padding: 9px 10px;
2415
+ border: none;
2416
+ background: transparent;
2417
+ box-shadow: none;
2418
+ color: var(--lmn-command-palette-fg, var(--fg));
2419
+ font: inherit;
2420
+ font-size: 13px;
2421
+ text-align: left;
2422
+ border-radius: var(--r-sm);
2423
+ cursor: pointer;
2424
+ transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
2425
+ box-shadow var(--dur-fast) var(--ease);
2426
+ }
2427
+ .cmdp-item:disabled { color: var(--lmn-command-palette-fg-subtle, var(--fg-subtle)); cursor: not-allowed; }
2428
+ .cmdp-item.active:not(:disabled) {
2429
+ background: var(--lmn-command-palette-bg, var(--bg));
2430
+ color: var(--lmn-command-palette-accent-ink, var(--accent-ink));
2431
+ box-shadow: var(--lmn-command-palette-neu-shadow-inset, var(--neu-shadow-inset));
2432
+ }
2433
+ .cmdp-icon {
2434
+ display: inline-flex;
2435
+ align-items: center;
2436
+ justify-content: center;
2437
+ color: var(--lmn-command-palette-fg-muted, var(--fg-muted));
2438
+ }
2439
+ .cmdp-item.active:not(:disabled) .cmdp-icon { color: inherit; }
2440
+ .cmdp-labels { display: flex; flex-direction: column; min-width: 0; }
2441
+ .cmdp-label {
2442
+ overflow: hidden;
2443
+ text-overflow: ellipsis;
2444
+ white-space: nowrap;
2445
+ }
2446
+ .cmdp-desc {
2447
+ font-size: 11.5px;
2448
+ color: var(--lmn-command-palette-fg-subtle, var(--fg-subtle));
2449
+ overflow: hidden;
2450
+ text-overflow: ellipsis;
2451
+ white-space: nowrap;
2452
+ }
2453
+ .cmdp-item.active:not(:disabled) .cmdp-desc { color: inherit; opacity: 0.75; }
2454
+ .cmdp-shortcut {
2455
+ font-family: var(--font-mono);
2456
+ font-size: 11px;
2457
+ color: var(--lmn-command-palette-fg-subtle, var(--fg-subtle));
2458
+ }
2459
+ .cmdp-item.active:not(:disabled) .cmdp-shortcut { color: inherit; opacity: 0.8; }
2460
+ .cmdp-empty {
2461
+ padding: 28px 16px;
2462
+ text-align: center;
2463
+ color: var(--lmn-command-palette-fg-subtle, var(--fg-subtle));
2464
+ font-size: 13px;
2465
+ }
2466
+ .cmdp-footer {
2467
+ display: flex;
2468
+ gap: 16px;
2469
+ padding: 8px 14px;
2470
+ border-top: 1px solid var(--lmn-command-palette-divider, var(--divider));
2471
+ background: var(--lmn-command-palette-bg-sunken, var(--bg-sunken));
2472
+ font-size: 11.5px;
2473
+ color: var(--lmn-command-palette-fg-subtle, var(--fg-subtle));
2474
+ }
2475
+ .cmdp-footer span { display: inline-flex; align-items: center; gap: 4px; }
2476
+ .cmdp-kbd {
2477
+ display: inline-grid;
2478
+ place-items: center;
2479
+ min-width: 18px;
2480
+ height: 18px;
2481
+ padding: 0 5px;
2482
+ border-radius: 5px;
2483
+ background: var(--lmn-command-palette-bg, var(--bg));
2484
+ box-shadow: var(--lmn-command-palette-neu-shadow-subtle, var(--neu-shadow-subtle));
2485
+ font-family: var(--font-mono);
2486
+ font-size: 10.5px;
2487
+ color: var(--lmn-command-palette-fg-muted, var(--fg-muted));
2488
+ }
2489
+ /* ============ Alert ============ */
2490
+ .alert {
2491
+ display: flex;
2492
+ gap: 12px;
2493
+ align-items: flex-start;
2494
+ padding: 14px 16px;
2495
+ border-radius: var(--r-md);
2496
+ background: var(--lmn-alert-bg, var(--bg));
2497
+ box-shadow: var(--lmn-alert-neu-shadow-inset, var(--neu-shadow-inset));
2498
+ position: relative;
2499
+ }
2500
+ .alert-ico {
2501
+ width: 20px; height: 20px;
2502
+ display: grid; place-items: center;
1996
2503
  flex-shrink: 0;
1997
2504
  margin-top: 1px;
1998
2505
  line-height: 0;
@@ -2003,13 +2510,13 @@ input, textarea, select { font-family: inherit; color: inherit; }
2003
2510
  height: 16px;
2004
2511
  object-fit: contain;
2005
2512
  }
2006
- .alert.info .alert-ico { color: var(--info); }
2007
- .alert.success .alert-ico { color: var(--success); }
2008
- .alert.warning .alert-ico { color: var(--warning); }
2009
- .alert.danger .alert-ico { color: var(--danger); }
2513
+ .alert.info .alert-ico { color: var(--lmn-alert-info, var(--info)); }
2514
+ .alert.success .alert-ico { color: var(--lmn-alert-success, var(--success)); }
2515
+ .alert.warning .alert-ico { color: var(--lmn-alert-warning, var(--warning)); }
2516
+ .alert.danger .alert-ico { color: var(--lmn-alert-danger, var(--danger)); }
2010
2517
  .alert-body { flex: 1; min-width: 0; }
2011
2518
  .alert-title { font-size: 13px; font-weight: 600; margin-bottom: 3px; line-height: 1.4; }
2012
- .alert-desc { font-size: 12px; color: var(--fg-muted); line-height: 1.55; }
2519
+ .alert-desc { font-size: 12px; color: var(--lmn-alert-fg-muted, var(--fg-muted)); line-height: 1.55; }
2013
2520
  .alert.no-title { align-items: center; }
2014
2521
  .alert.no-title .alert-ico { margin-top: 0; }
2015
2522
  .alert.no-icon { gap: 0; }
@@ -2025,16 +2532,16 @@ input, textarea, select { font-family: inherit; color: inherit; }
2025
2532
  position: absolute; top: 10px; right: 10px;
2026
2533
  width: 22px; height: 22px; border-radius: 7px;
2027
2534
  display: grid; place-items: center;
2028
- color: var(--fg-subtle);
2535
+ color: var(--lmn-alert-fg-subtle, var(--fg-subtle));
2029
2536
  cursor: pointer;
2030
2537
  border: none; background: transparent;
2031
2538
  }
2032
- .alert-close:hover { color: var(--fg); background: var(--bg); box-shadow: var(--neu-shadow-subtle); }
2539
+ .alert-close:hover { color: var(--lmn-alert-fg, var(--fg)); background: var(--lmn-alert-bg, var(--bg)); box-shadow: var(--lmn-alert-neu-shadow-subtle, var(--neu-shadow-subtle)); }
2033
2540
  /* ============ Table ============ */
2034
2541
  .table-wrap {
2035
2542
  border-radius: var(--r-lg);
2036
- background: var(--bg);
2037
- box-shadow: var(--neu-shadow-inset);
2543
+ background: var(--lmn-table-bg, var(--bg));
2544
+ box-shadow: var(--lmn-table-neu-shadow-inset, var(--neu-shadow-inset));
2038
2545
  overflow: auto;
2039
2546
  }
2040
2547
  /* When scroll=y is on, the wrap itself becomes the scroll region. */
@@ -2049,51 +2556,64 @@ input, textarea, select { font-family: inherit; color: inherit; }
2049
2556
  .table th {
2050
2557
  text-align: left;
2051
2558
  padding: 14px 18px;
2052
- background: var(--bg);
2559
+ background: var(--lmn-table-bg, var(--bg));
2053
2560
  font-size: 11px;
2054
2561
  font-weight: 700;
2055
2562
  letter-spacing: 0.08em;
2056
2563
  text-transform: uppercase;
2057
- color: var(--fg-subtle);
2058
- border-bottom: 1px solid var(--divider);
2564
+ color: var(--lmn-table-fg-subtle, var(--fg-subtle));
2565
+ border-bottom: 1px solid var(--lmn-table-divider, var(--divider));
2059
2566
  position: sticky; top: 0;
2060
2567
  z-index: 1;
2061
2568
  }
2062
2569
  /* When the wrap is the scroll container (scroll.y), position:sticky on th needs
2063
2570
  top:0 relative to the wrap — browsers already handle that. Adding a stronger
2064
2571
  bg so content under the header doesn't bleed through. */
2065
- .table.sticky-head th { background: var(--bg); }
2066
- .table th.sortable { cursor: pointer; user-select: none; }
2067
- .table th.sortable:hover { color: var(--fg); }
2572
+ .table.sticky-head th { background: var(--lmn-table-bg, var(--bg)); }
2573
+ .table th.sortable { user-select: none; }
2574
+ .table th.sortable:hover { color: var(--lmn-table-fg, var(--fg)); }
2575
+ .table-sort-trigger.btn {
2576
+ height: auto;
2577
+ min-height: 24px;
2578
+ padding: 2px 4px;
2579
+ color: inherit;
2580
+ font: inherit;
2581
+ letter-spacing: inherit;
2582
+ text-transform: inherit;
2583
+ }
2068
2584
  .table th .th-label { vertical-align: middle; }
2069
2585
  .table th .sort-ind {
2070
2586
  display: inline-flex;
2071
2587
  width: 16px; height: 16px;
2072
2588
  border-radius: 6px;
2073
- background: var(--bg);
2074
- box-shadow: var(--neu-shadow-subtle);
2589
+ background: var(--lmn-table-bg, var(--bg));
2590
+ box-shadow: var(--lmn-table-neu-shadow-subtle, var(--neu-shadow-subtle));
2075
2591
  align-items: center; justify-content: center;
2076
2592
  margin-left: 6px;
2077
- color: var(--fg-subtle);
2593
+ color: var(--lmn-table-fg-subtle, var(--fg-subtle));
2078
2594
  vertical-align: middle;
2079
2595
  }
2080
- .table th.sorted .sort-ind { color: var(--accent); box-shadow: var(--neu-shadow-inset); }
2596
+ .table th.sorted .sort-ind { color: var(--lmn-table-accent, var(--accent)); box-shadow: var(--lmn-table-neu-shadow-inset, var(--neu-shadow-inset)); }
2081
2597
  .table td {
2082
2598
  padding: 12px 18px;
2083
- border-bottom: 1px solid var(--divider);
2599
+ border-bottom: 1px solid var(--lmn-table-divider, var(--divider));
2084
2600
  vertical-align: middle;
2085
2601
  }
2086
- .table.hoverable tbody tr:hover td { background: color-mix(in oklch, var(--accent-soft) 40%, transparent); }
2602
+ .table.hoverable tbody tr:hover td { background: color-mix(in oklch, var(--lmn-table-accent-soft, var(--accent-soft)) 40%, transparent); }
2087
2603
  .table tbody tr.clickable { cursor: pointer; }
2088
- .table tbody tr.selected td { background: color-mix(in oklch, var(--accent-soft) 80%, transparent); color: var(--accent-ink); }
2604
+ .table tbody tr.clickable:focus-visible td {
2605
+ background: color-mix(in oklch, var(--lmn-table-accent-soft, var(--accent-soft)) 55%, transparent);
2606
+ box-shadow: inset 0 0 0 2px var(--lmn-table-accent-glow, var(--accent-glow));
2607
+ }
2608
+ .table tbody tr.selected td { background: color-mix(in oklch, var(--lmn-table-accent-soft, var(--accent-soft)) 80%, transparent); color: var(--lmn-table-accent-ink, var(--accent-ink)); }
2089
2609
  .table tbody tr:last-child td { border-bottom: none; }
2090
2610
  .table.striped tbody tr:nth-child(even) td {
2091
- background: color-mix(in oklch, var(--bg-sunken) 40%, transparent);
2611
+ background: color-mix(in oklch, var(--lmn-table-bg-sunken, var(--bg-sunken)) 40%, transparent);
2092
2612
  }
2093
2613
  /* Embossed: each row sits on the surface */
2094
2614
  .table.embossed { border-spacing: 0; }
2095
2615
  .table.embossed tbody td {
2096
- background: var(--bg);
2616
+ background: var(--lmn-table-bg, var(--bg));
2097
2617
  }
2098
2618
  /* Card-row variant: each row is its own raised pill */
2099
2619
  .table.cards {
@@ -2113,8 +2633,8 @@ input, textarea, select { font-family: inherit; color: inherit; }
2113
2633
  inset: 0;
2114
2634
  z-index: -1;
2115
2635
  border-radius: var(--r-md);
2116
- background: var(--bg);
2117
- box-shadow: var(--neu-shadow-control);
2636
+ background: var(--lmn-table-bg, var(--bg));
2637
+ box-shadow: var(--lmn-table-neu-shadow-control, var(--neu-shadow-control));
2118
2638
  pointer-events: none;
2119
2639
  transition: box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
2120
2640
  }
@@ -2142,38 +2662,38 @@ input, textarea, select { font-family: inherit; color: inherit; }
2142
2662
  .table.cards.hoverable tbody tr:hover {
2143
2663
  transform: translateY(-1px);
2144
2664
  }
2145
- .table.cards.hoverable tbody tr:hover .card-row-surface { box-shadow: var(--neu-shadow-panel); }
2665
+ .table.cards.hoverable tbody tr:hover .card-row-surface { box-shadow: var(--lmn-table-neu-shadow-panel, var(--neu-shadow-panel)); }
2146
2666
  .table.cards.hoverable tbody tr:hover td { background: transparent; }
2147
2667
  .table .row-check { width: 44px; }
2148
2668
  .table .row-check .checkbox { display: inline-flex; }
2149
2669
  .table .row-expand { width: 40px; text-align: center; }
2150
- .table-empty { padding: 60px 20px; text-align: center; color: var(--fg-muted); }
2670
+ .table-empty { padding: 60px 20px; text-align: center; color: var(--lmn-table-fg-muted, var(--fg-muted)); }
2151
2671
  /* Expand button */
2152
2672
  .expand-btn {
2153
2673
  width: 22px; height: 22px;
2154
2674
  border: none;
2155
2675
  border-radius: var(--r-sm);
2156
- background: var(--bg);
2157
- box-shadow: var(--neu-shadow-subtle);
2158
- color: var(--fg-subtle);
2676
+ background: var(--lmn-table-bg, var(--bg));
2677
+ box-shadow: var(--lmn-table-neu-shadow-subtle, var(--neu-shadow-subtle));
2678
+ color: var(--lmn-table-fg-subtle, var(--fg-subtle));
2159
2679
  display: inline-flex; align-items: center; justify-content: center;
2160
2680
  cursor: pointer;
2161
2681
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
2162
2682
  }
2163
- .expand-btn:hover { color: var(--accent-ink); box-shadow: var(--neu-shadow-control); }
2164
- .expand-btn.open { transform: rotate(90deg); color: var(--accent-ink); box-shadow: var(--neu-shadow-inset); }
2683
+ .expand-btn:hover { color: var(--lmn-table-accent-ink, var(--accent-ink)); box-shadow: var(--lmn-table-neu-shadow-control, var(--neu-shadow-control)); }
2684
+ .expand-btn.open { transform: rotate(90deg); color: var(--lmn-table-accent-ink, var(--accent-ink)); box-shadow: var(--lmn-table-neu-shadow-inset, var(--neu-shadow-inset)); }
2165
2685
  /* Expanded row panel */
2166
2686
  .table tbody tr.expanded-row td {
2167
2687
  padding: 14px 18px;
2168
- border-bottom: 1px solid var(--divider);
2169
- background: color-mix(in oklch, var(--bg-sunken) 25%, transparent);
2688
+ border-bottom: 1px solid var(--lmn-table-divider, var(--divider));
2689
+ background: color-mix(in oklch, var(--lmn-table-bg-sunken, var(--bg-sunken)) 25%, transparent);
2170
2690
  }
2171
2691
  .expanded-panel {
2172
2692
  padding: 14px 16px;
2173
2693
  border-radius: var(--r-md);
2174
- background: var(--bg);
2175
- box-shadow: var(--neu-shadow-inset);
2176
- color: var(--fg);
2694
+ background: var(--lmn-table-bg, var(--bg));
2695
+ box-shadow: var(--lmn-table-neu-shadow-inset, var(--neu-shadow-inset));
2696
+ color: var(--lmn-table-fg, var(--fg));
2177
2697
  font-size: 13px;
2178
2698
  }
2179
2699
  /* Radio-style row selector */
@@ -2182,30 +2702,30 @@ input, textarea, select { font-family: inherit; color: inherit; }
2182
2702
  border-radius: 50%;
2183
2703
  border: none;
2184
2704
  padding: 0;
2185
- background: var(--bg);
2186
- box-shadow: var(--neu-shadow-inset);
2705
+ background: var(--lmn-table-bg, var(--bg));
2706
+ box-shadow: var(--lmn-table-neu-shadow-inset, var(--neu-shadow-inset));
2187
2707
  display: inline-flex; align-items: center; justify-content: center;
2188
2708
  cursor: pointer;
2189
2709
  transition: box-shadow var(--dur-fast) var(--ease);
2190
2710
  }
2191
2711
  .table .row-check .radio-dot:disabled { opacity: 0.5; cursor: not-allowed; }
2192
2712
  .table .row-check .radio-dot.checked {
2193
- box-shadow: var(--neu-shadow-control);
2713
+ box-shadow: var(--lmn-table-neu-shadow-control, var(--neu-shadow-control));
2194
2714
  }
2195
2715
  .table .row-check .radio-dot.checked::after {
2196
2716
  content: "";
2197
2717
  width: 8px; height: 8px;
2198
2718
  border-radius: 50%;
2199
- background: var(--accent);
2719
+ background: var(--lmn-table-accent, var(--accent));
2200
2720
  }
2201
2721
  /* Filter button on header */
2202
2722
  .table th.filterable .filter-ind {
2203
2723
  display: inline-flex;
2204
2724
  width: 18px; height: 18px;
2205
2725
  border-radius: 5px;
2206
- background: var(--bg);
2207
- box-shadow: var(--neu-shadow-subtle);
2208
- color: var(--fg-subtle);
2726
+ background: var(--lmn-table-bg, var(--bg));
2727
+ box-shadow: var(--lmn-table-neu-shadow-subtle, var(--neu-shadow-subtle));
2728
+ color: var(--lmn-table-fg-subtle, var(--fg-subtle));
2209
2729
  align-items: center; justify-content: center;
2210
2730
  margin-left: 6px;
2211
2731
  cursor: pointer;
@@ -2214,19 +2734,19 @@ input, textarea, select { font-family: inherit; color: inherit; }
2214
2734
  padding: 0;
2215
2735
  transition: color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
2216
2736
  }
2217
- .table th.filterable .filter-ind:hover { color: var(--fg); }
2737
+ .table th.filterable .filter-ind:hover { color: var(--lmn-table-fg, var(--fg)); }
2218
2738
  .table th.filterable .filter-ind.active {
2219
- color: var(--accent-ink);
2220
- box-shadow: var(--neu-shadow-inset);
2739
+ color: var(--lmn-table-accent-ink, var(--accent-ink));
2740
+ box-shadow: var(--lmn-table-neu-shadow-inset, var(--neu-shadow-inset));
2221
2741
  }
2222
2742
  /* Filter popover panel (portaled to body) */
2223
2743
  .table-filter-panel {
2224
2744
  z-index: 1001;
2225
2745
  min-width: 200px;
2226
2746
  max-width: 260px;
2227
- background: var(--bg);
2747
+ background: var(--lmn-table-bg, var(--bg));
2228
2748
  border-radius: var(--r-md);
2229
- box-shadow: var(--neu-shadow-float);
2749
+ box-shadow: var(--lmn-table-neu-shadow-float, var(--neu-shadow-float));
2230
2750
  padding: 10px;
2231
2751
  animation: menuIn var(--dur) var(--ease);
2232
2752
  }
@@ -2245,12 +2765,12 @@ input, textarea, select { font-family: inherit; color: inherit; }
2245
2765
  padding: 6px 8px;
2246
2766
  border-radius: var(--r-sm);
2247
2767
  font-size: 13px;
2248
- color: var(--fg);
2768
+ color: var(--lmn-table-fg, var(--fg));
2249
2769
  cursor: pointer;
2250
2770
  transition: background var(--dur-fast) var(--ease);
2251
2771
  }
2252
2772
  .table-filter-item:hover {
2253
- background: color-mix(in oklch, var(--accent-soft) 40%, transparent);
2773
+ background: color-mix(in oklch, var(--lmn-table-accent-soft, var(--accent-soft)) 40%, transparent);
2254
2774
  }
2255
2775
  .table-filter-actions {
2256
2776
  display: flex;
@@ -2258,24 +2778,35 @@ input, textarea, select { font-family: inherit; color: inherit; }
2258
2778
  gap: 6px;
2259
2779
  margin-top: 6px;
2260
2780
  padding-top: 8px;
2261
- border-top: 1px solid var(--divider);
2781
+ border-top: 1px solid var(--lmn-table-divider, var(--divider));
2262
2782
  }
2263
2783
  .table-filter-actions .tf-btn {
2264
2784
  border: none;
2265
2785
  padding: 6px 12px;
2266
2786
  border-radius: var(--r-sm);
2267
- background: var(--bg);
2268
- box-shadow: var(--neu-shadow-control);
2787
+ background: var(--lmn-table-bg, var(--bg));
2788
+ box-shadow: var(--lmn-table-neu-shadow-control, var(--neu-shadow-control));
2269
2789
  font-size: 12px;
2270
2790
  font-family: inherit;
2271
- color: var(--fg);
2791
+ color: var(--lmn-table-fg, var(--fg));
2272
2792
  cursor: pointer;
2273
2793
  transition: box-shadow var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
2274
2794
  }
2275
- .table-filter-actions .tf-btn:hover { box-shadow: var(--neu-shadow-inset); }
2276
- .table-filter-actions .tf-btn.primary { color: var(--accent-ink); font-weight: 600; }
2277
- .table-filter-actions .tf-btn.ghost { color: var(--fg-muted); box-shadow: var(--neu-shadow-subtle); }
2278
- .table-filter-actions .tf-btn.ghost:hover { box-shadow: var(--neu-shadow-inset); }
2795
+ .table-filter-actions .tf-btn:hover { box-shadow: var(--lmn-table-neu-shadow-inset, var(--neu-shadow-inset)); }
2796
+ .table-filter-actions .tf-btn.primary { color: var(--lmn-table-accent-ink, var(--accent-ink)); font-weight: 600; }
2797
+ .table-filter-actions .tf-btn.ghost { color: var(--lmn-table-fg-muted, var(--fg-muted)); box-shadow: var(--lmn-table-neu-shadow-subtle, var(--neu-shadow-subtle)); }
2798
+ .table-filter-actions .tf-btn.ghost:hover { box-shadow: var(--lmn-table-neu-shadow-inset, var(--neu-shadow-inset)); }
2799
+ .table-sr-only {
2800
+ position: absolute;
2801
+ width: 1px;
2802
+ height: 1px;
2803
+ padding: 0;
2804
+ margin: -1px;
2805
+ overflow: hidden;
2806
+ clip: rect(0, 0, 0, 0);
2807
+ white-space: nowrap;
2808
+ border: 0;
2809
+ }
2279
2810
  /* Built-in pagination bar */
2280
2811
  .table-pagination {
2281
2812
  margin-top: 12px;
@@ -2283,8 +2814,8 @@ input, textarea, select { font-family: inherit; color: inherit; }
2283
2814
  /* ============ TablePro ============ */
2284
2815
  .table-card {
2285
2816
  border-radius: var(--r-lg);
2286
- background: var(--bg);
2287
- box-shadow: var(--neu-shadow-control);
2817
+ background: var(--lmn-table-pro-bg, var(--bg));
2818
+ box-shadow: var(--lmn-table-pro-neu-shadow-control, var(--neu-shadow-control));
2288
2819
  overflow: hidden;
2289
2820
  }
2290
2821
  .table-card .table-wrap { background: transparent; box-shadow: none; border-radius: 0; }
@@ -2292,7 +2823,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
2292
2823
  .table-card .table-pagination {
2293
2824
  margin-top: 0;
2294
2825
  padding: 6px 16px;
2295
- border-top: 1px solid var(--divider);
2826
+ border-top: 1px solid var(--lmn-table-pro-divider, var(--divider));
2296
2827
  background: transparent;
2297
2828
  }
2298
2829
  .table-toolbar {
@@ -2300,7 +2831,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
2300
2831
  align-items: center;
2301
2832
  gap: var(--gap-3);
2302
2833
  padding: 14px 16px;
2303
- border-bottom: 1px solid var(--divider);
2834
+ border-bottom: 1px solid var(--lmn-table-pro-divider, var(--divider));
2304
2835
  }
2305
2836
  .table-toolbar .table-title {
2306
2837
  font-size: 14px;
@@ -2322,7 +2853,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
2322
2853
  }
2323
2854
  .table-footer {
2324
2855
  padding: 10px 16px;
2325
- border-top: 1px solid var(--divider);
2856
+ border-top: 1px solid var(--lmn-table-pro-divider, var(--divider));
2326
2857
  background: transparent;
2327
2858
  }
2328
2859
  /* ============ Pagination ============ */
@@ -2332,7 +2863,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
2332
2863
  justify-content: space-between;
2333
2864
  padding: 12px 14px;
2334
2865
  font-size: 12px;
2335
- color: var(--fg-muted);
2866
+ color: var(--lmn-pagination-fg-muted, var(--fg-muted));
2336
2867
  gap: 12px;
2337
2868
  flex-wrap: wrap;
2338
2869
  }
@@ -2342,24 +2873,24 @@ input, textarea, select { font-family: inherit; color: inherit; }
2342
2873
  padding: 0 10px;
2343
2874
  border: none;
2344
2875
  border-radius: var(--r-sm);
2345
- background: var(--bg);
2346
- box-shadow: var(--neu-shadow-control);
2876
+ background: var(--lmn-pagination-bg, var(--bg));
2877
+ box-shadow: var(--lmn-pagination-neu-shadow-control, var(--neu-shadow-control));
2347
2878
  display: inline-flex; align-items: center; justify-content: center;
2348
2879
  cursor: pointer;
2349
2880
  font-size: 12px;
2350
2881
  font-family: inherit;
2351
2882
  font-variant-numeric: tabular-nums;
2352
- color: var(--fg);
2883
+ color: var(--lmn-pagination-fg, var(--fg));
2353
2884
  transition: all var(--dur-fast) var(--ease);
2354
2885
  }
2355
- .pagination .pg:hover { color: var(--accent-ink); }
2886
+ .pagination .pg:hover { color: var(--lmn-pagination-accent-ink, var(--accent-ink)); }
2356
2887
  .pagination .pg.active {
2357
- box-shadow: var(--neu-shadow-inset);
2358
- color: var(--accent-ink);
2888
+ box-shadow: var(--lmn-pagination-neu-shadow-inset, var(--neu-shadow-inset));
2889
+ color: var(--lmn-pagination-accent-ink, var(--accent-ink));
2359
2890
  font-weight: 700;
2360
2891
  }
2361
- .pagination .pg.disabled { color: var(--fg-subtle); cursor: not-allowed; box-shadow: var(--neu-shadow-subtle); }
2362
- .pagination .ellipsis { padding: 0 4px; color: var(--fg-subtle); }
2892
+ .pagination .pg.disabled { color: var(--lmn-pagination-fg-subtle, var(--fg-subtle)); cursor: not-allowed; box-shadow: var(--lmn-pagination-neu-shadow-subtle, var(--neu-shadow-subtle)); }
2893
+ .pagination .ellipsis { padding: 0 4px; color: var(--lmn-pagination-fg-subtle, var(--fg-subtle)); }
2363
2894
  /* size changer — compact Select inline with the page buttons */
2364
2895
  .pagination .pg-size-changer { margin-left: 8px; min-width: 108px; }
2365
2896
  /* quick jumper */
@@ -2368,36 +2899,37 @@ input, textarea, select { font-family: inherit; color: inherit; }
2368
2899
  align-items: center;
2369
2900
  gap: 6px;
2370
2901
  margin-left: 8px;
2371
- color: var(--fg-muted);
2902
+ color: var(--lmn-pagination-fg-muted, var(--fg-muted));
2372
2903
  font-size: 12px;
2373
2904
  }
2374
- .pagination .pg-jumper-label { color: var(--fg-muted); }
2905
+ .pagination .pg-jumper-label { color: var(--lmn-pagination-fg-muted, var(--fg-muted)); }
2375
2906
  .pagination .pg-jumper-input {
2376
- width: 44px;
2377
- height: 28px;
2378
- padding: 0 8px;
2379
- border: none;
2380
- border-radius: var(--r-sm);
2381
- background: var(--bg);
2382
- box-shadow: var(--neu-shadow-inset);
2383
- color: var(--fg);
2384
- font-family: inherit;
2385
- font-size: 12px;
2907
+ width: 52px;
2908
+ }
2909
+ .pagination .pg-jumper-input .input {
2386
2910
  font-variant-numeric: tabular-nums;
2387
2911
  text-align: center;
2388
- outline: none;
2389
- transition: box-shadow var(--dur-fast) var(--ease);
2390
2912
  }
2391
- .pagination .pg-jumper-input:focus-visible {
2392
- box-shadow: var(--neu-shadow-inset), 0 0 0 2px var(--accent-glow);
2913
+ @media (max-width: 480px) {
2914
+ .pagination {
2915
+ align-items: flex-start;
2916
+ padding-inline: 8px;
2917
+ }
2918
+ .pagination .pg-controls {
2919
+ flex-wrap: wrap;
2920
+ }
2921
+ .pagination .pg-size-changer,
2922
+ .pagination .pg-jumper {
2923
+ margin-left: 0;
2924
+ }
2393
2925
  }
2394
2926
  /* ============ List ============ */
2395
2927
  .list {
2396
2928
  display: flex;
2397
2929
  flex-direction: column;
2398
- background: var(--bg);
2930
+ background: var(--lmn-list-bg, var(--bg));
2399
2931
  border-radius: var(--r-lg);
2400
- box-shadow: var(--neu-shadow-inset);
2932
+ box-shadow: var(--lmn-list-neu-shadow-inset, var(--neu-shadow-inset));
2401
2933
  padding: 8px;
2402
2934
  }
2403
2935
  .list-item {
@@ -2408,15 +2940,31 @@ input, textarea, select { font-family: inherit; color: inherit; }
2408
2940
  border-radius: var(--r-sm);
2409
2941
  transition: all var(--dur-fast) var(--ease);
2410
2942
  }
2943
+ .list-item-trigger {
2944
+ display: flex;
2945
+ align-items: center;
2946
+ gap: 12px;
2947
+ flex: 1;
2948
+ min-width: 0;
2949
+ }
2950
+ button.list-item-trigger {
2951
+ border: 0;
2952
+ padding: 0;
2953
+ background: transparent;
2954
+ color: inherit;
2955
+ font: inherit;
2956
+ text-align: left;
2957
+ cursor: pointer;
2958
+ }
2411
2959
  .list-item.clickable { cursor: pointer; }
2412
- .list-item.clickable:hover { background: var(--bg); box-shadow: var(--neu-shadow-subtle); }
2413
- .list-item.selected { box-shadow: var(--neu-shadow-control); background: var(--bg); }
2414
- .list.with-dividers .list-item + .list-item { border-top: 1px solid var(--divider); border-radius: 0; }
2960
+ .list-item.clickable:hover { background: var(--lmn-list-bg, var(--bg)); box-shadow: var(--lmn-list-neu-shadow-subtle, var(--neu-shadow-subtle)); }
2961
+ .list-item.selected { box-shadow: var(--lmn-list-neu-shadow-control, var(--neu-shadow-control)); background: var(--lmn-list-bg, var(--bg)); }
2962
+ .list.with-dividers .list-item + .list-item { border-top: 1px solid var(--lmn-list-divider, var(--divider)); border-radius: 0; }
2415
2963
  .list-item-meta { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
2416
2964
  .list-item-title { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
2417
- .list-item-desc { font-size: 12px; color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
2965
+ .list-item-desc { font-size: 12px; color: var(--lmn-list-fg-muted, var(--fg-muted)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
2418
2966
  .list-item-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
2419
- .list-item-avatar { display: inline-flex; align-items: center; justify-content: center; color: var(--fg-muted); flex-shrink: 0; }
2967
+ .list-item-avatar { display: inline-flex; align-items: center; justify-content: center; color: var(--lmn-list-fg-muted, var(--fg-muted)); flex-shrink: 0; }
2420
2968
  /* ============ Spin ============ */
2421
2969
  .spin {
2422
2970
  width: 14px;
@@ -2427,17 +2975,17 @@ input, textarea, select { font-family: inherit; color: inherit; }
2427
2975
  animation: spin 0.8s linear infinite;
2428
2976
  display: inline-block;
2429
2977
  }
2430
- .spin.accent { color: var(--accent); }
2431
- .spin.success { color: var(--success); }
2432
- .spin.warning { color: var(--warning); }
2433
- .spin.danger { color: var(--danger); }
2978
+ .spin.accent { color: var(--lmn-spin-accent, var(--accent)); }
2979
+ .spin.success { color: var(--lmn-spin-success, var(--success)); }
2980
+ .spin.warning { color: var(--lmn-spin-warning, var(--warning)); }
2981
+ .spin.danger { color: var(--lmn-spin-danger, var(--danger)); }
2434
2982
  .spin.ring {
2435
2983
  position: relative;
2436
2984
  display: inline-block;
2437
2985
  border: none;
2438
2986
  border-radius: 50%;
2439
- background: var(--bg);
2440
- box-shadow: var(--neu-shadow-inset);
2987
+ background: var(--lmn-spin-bg, var(--bg));
2988
+ box-shadow: var(--lmn-spin-neu-shadow-inset, var(--neu-shadow-inset));
2441
2989
  animation: none;
2442
2990
  }
2443
2991
  .spin.ring::before {
@@ -2479,9 +3027,9 @@ input, textarea, select { font-family: inherit; color: inherit; }
2479
3027
  height: 0.4em;
2480
3028
  border-radius: 999px;
2481
3029
  background: radial-gradient(circle at 32% 28%,
2482
- color-mix(in oklch, currentColor 40%, var(--bg)),
3030
+ color-mix(in oklch, currentColor 40%, var(--lmn-spin-bg, var(--bg))),
2483
3031
  currentColor 62%,
2484
- color-mix(in oklch, currentColor 82%, var(--fg)) 100%);
3032
+ color-mix(in oklch, currentColor 82%, var(--lmn-spin-fg, var(--fg))) 100%);
2485
3033
  box-shadow:
2486
3034
  0 0.06em 0.14em color-mix(in oklch, currentColor 45%, transparent),
2487
3035
  0 0 0.35em color-mix(in oklch, currentColor 50%, transparent);
@@ -2498,15 +3046,20 @@ input, textarea, select { font-family: inherit; color: inherit; }
2498
3046
  display: inline-flex;
2499
3047
  align-items: center;
2500
3048
  gap: 8px;
2501
- color: var(--fg-muted);
3049
+ color: var(--lmn-spin-fg-muted, var(--fg-muted));
2502
3050
  }
2503
3051
  .spin-label { font-size: 12px; }
3052
+ @media (prefers-reduced-motion: reduce) {
3053
+ .spin,
3054
+ .spin.ring::before,
3055
+ .spin.dots i { animation: none; }
3056
+ }
2504
3057
  /* ============ Empty ============ */
2505
3058
  .empty {
2506
3059
  padding: 60px 20px;
2507
3060
  display: grid; place-items: center;
2508
3061
  gap: 12px;
2509
- color: var(--fg-muted);
3062
+ color: var(--lmn-empty-fg-muted, var(--fg-muted));
2510
3063
  text-align: center;
2511
3064
  }
2512
3065
  .empty.sm { padding: 28px 16px; gap: 8px; }
@@ -2521,25 +3074,25 @@ input, textarea, select { font-family: inherit; color: inherit; }
2521
3074
  .empty-ico {
2522
3075
  width: 56px; height: 56px;
2523
3076
  border-radius: var(--r-lg);
2524
- background: var(--bg);
2525
- box-shadow: var(--neu-shadow-inset);
3077
+ background: var(--lmn-empty-bg, var(--bg));
3078
+ box-shadow: var(--lmn-empty-neu-shadow-inset, var(--neu-shadow-inset));
2526
3079
  display: grid; place-items: center;
2527
- color: var(--fg-subtle);
3080
+ color: var(--lmn-empty-fg-subtle, var(--fg-subtle));
2528
3081
  }
2529
- .empty-title { font-size: 14px; font-weight: 600; color: var(--fg); }
3082
+ .empty-title { font-size: 14px; font-weight: 600; color: var(--lmn-empty-fg, var(--fg)); }
2530
3083
  .empty-desc { font-size: 12px; }
2531
3084
  .empty-action { margin-top: 8px; }
2532
3085
  /* ============ Skeleton ============ */
2533
3086
  .skeleton {
2534
3087
  display: block;
2535
- background: color-mix(in oklch, var(--accent-soft) 55%, var(--bg-sunken));
3088
+ background: color-mix(in oklch, var(--lmn-skeleton-accent-soft, var(--accent-soft)) 55%, var(--lmn-skeleton-bg-sunken, var(--bg-sunken)));
2536
3089
  border-radius: var(--r-sm);
2537
3090
  }
2538
3091
  .skeleton.wave {
2539
3092
  background: linear-gradient(90deg,
2540
- color-mix(in oklch, var(--accent-soft) 35%, var(--bg-sunken)),
2541
- color-mix(in oklch, var(--accent-soft) 75%, var(--bg-sunken)),
2542
- color-mix(in oklch, var(--accent-soft) 35%, var(--bg-sunken)));
3093
+ color-mix(in oklch, var(--lmn-skeleton-accent-soft, var(--accent-soft)) 35%, var(--lmn-skeleton-bg-sunken, var(--bg-sunken))),
3094
+ color-mix(in oklch, var(--lmn-skeleton-accent-soft, var(--accent-soft)) 75%, var(--lmn-skeleton-bg-sunken, var(--bg-sunken))),
3095
+ color-mix(in oklch, var(--lmn-skeleton-accent-soft, var(--accent-soft)) 35%, var(--lmn-skeleton-bg-sunken, var(--bg-sunken))));
2543
3096
  background-size: 200% 100%;
2544
3097
  animation: skel-wave 1.4s ease-in-out infinite;
2545
3098
  }
@@ -2568,6 +3121,10 @@ input, textarea, select { font-family: inherit; color: inherit; }
2568
3121
  .skeleton-box .skeleton-row {
2569
3122
  display: block;
2570
3123
  }
3124
+ @media (prefers-reduced-motion: reduce) {
3125
+ .skeleton.wave,
3126
+ .skeleton.pulse { animation: none; }
3127
+ }
2571
3128
  /* ============ DatePicker ============ */
2572
3129
  .date-picker {
2573
3130
  position: relative;
@@ -2586,7 +3143,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
2586
3143
  width: 100%;
2587
3144
  }
2588
3145
  .date-picker.open .input-wrap {
2589
- box-shadow: var(--neu-shadow-inset);
3146
+ box-shadow: var(--lmn-date-picker-neu-shadow-inset, var(--neu-shadow-inset));
2590
3147
  }
2591
3148
  .date-picker-panel {
2592
3149
  position: fixed;
@@ -2594,8 +3151,8 @@ input, textarea, select { font-family: inherit; color: inherit; }
2594
3151
  width: 344px;
2595
3152
  padding: var(--gap-3);
2596
3153
  border-radius: var(--r-md);
2597
- background: var(--bg);
2598
- box-shadow: var(--neu-shadow-float);
3154
+ background: var(--lmn-date-picker-bg, var(--bg));
3155
+ box-shadow: var(--lmn-date-picker-neu-shadow-float, var(--neu-shadow-float));
2599
3156
  animation: menuIn var(--dur) var(--ease);
2600
3157
  }
2601
3158
  .date-picker-panel .calendar {
@@ -2613,7 +3170,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
2613
3170
  gap: var(--gap-2);
2614
3171
  margin-top: var(--gap-3);
2615
3172
  padding-top: var(--gap-3);
2616
- border-top: 1px solid var(--divider);
3173
+ border-top: 1px solid var(--lmn-date-picker-divider, var(--divider));
2617
3174
  }
2618
3175
  .date-picker-footer-spacer {
2619
3176
  flex: 1;
@@ -2637,7 +3194,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
2637
3194
  width: 100%;
2638
3195
  }
2639
3196
  .date-time-picker.open .input-wrap {
2640
- box-shadow: var(--neu-shadow-inset);
3197
+ box-shadow: var(--lmn-date-time-picker-neu-shadow-inset, var(--neu-shadow-inset));
2641
3198
  }
2642
3199
  .date-time-picker-panel {
2643
3200
  position: fixed;
@@ -2645,10 +3202,10 @@ input, textarea, select { font-family: inherit; color: inherit; }
2645
3202
  width: 476px;
2646
3203
  padding: var(--gap-2) var(--gap-3);
2647
3204
  border-radius: var(--r-md);
2648
- background: var(--bg);
3205
+ background: var(--lmn-date-time-picker-bg, var(--bg));
2649
3206
  box-shadow:
2650
- 0 calc(var(--shadow-offset) * 1.1) calc(var(--shadow-blur) * 1.3) color-mix(in oklch, var(--shadow-dark) 72%, transparent),
2651
- inset 0 0 0 1px var(--divider);
3207
+ 0 calc(var(--lmn-date-time-picker-shadow-offset, var(--shadow-offset)) * 1.1) calc(var(--lmn-date-time-picker-shadow-blur, var(--shadow-blur)) * 1.3) color-mix(in oklch, var(--lmn-date-time-picker-shadow-dark, var(--shadow-dark)) 72%, transparent),
3208
+ inset 0 0 0 1px var(--lmn-date-time-picker-divider, var(--divider));
2652
3209
  animation: menuIn var(--dur) var(--ease);
2653
3210
  }
2654
3211
  .date-time-picker-body {
@@ -2706,8 +3263,8 @@ input, textarea, select { font-family: inherit; color: inherit; }
2706
3263
  grid-template-columns: repeat(3, minmax(0, 1fr));
2707
3264
  padding: 8px;
2708
3265
  border-radius: var(--r-sm);
2709
- background: var(--bg);
2710
- box-shadow: inset 0 0 0 1px var(--divider);
3266
+ background: var(--lmn-date-time-picker-bg, var(--bg));
3267
+ box-shadow: inset 0 0 0 1px var(--lmn-date-time-picker-divider, var(--divider));
2711
3268
  overflow: hidden;
2712
3269
  }
2713
3270
  .date-time-picker-panel.without-second .date-time-picker-time-columns {
@@ -2717,7 +3274,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
2717
3274
  min-width: 0;
2718
3275
  }
2719
3276
  .date-time-picker-time-column + .date-time-picker-time-column {
2720
- border-left: 1px solid var(--divider);
3277
+ border-left: 1px solid var(--lmn-date-time-picker-divider, var(--divider));
2721
3278
  }
2722
3279
  .date-time-picker-time-label {
2723
3280
  height: 20px;
@@ -2725,7 +3282,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
2725
3282
  place-items: center;
2726
3283
  font-size: var(--fs-xs);
2727
3284
  font-weight: 700;
2728
- color: var(--fg-muted);
3285
+ color: var(--lmn-date-time-picker-fg-muted, var(--fg-muted));
2729
3286
  }
2730
3287
  .date-time-picker-time-list {
2731
3288
  display: flex;
@@ -2750,7 +3307,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
2750
3307
  border: none;
2751
3308
  border-radius: 7px;
2752
3309
  background: transparent;
2753
- color: var(--fg);
3310
+ color: var(--lmn-date-time-picker-fg, var(--fg));
2754
3311
  cursor: pointer;
2755
3312
  font: 600 var(--fs-md) var(--font-mono);
2756
3313
  transition:
@@ -2759,17 +3316,17 @@ input, textarea, select { font-family: inherit; color: inherit; }
2759
3316
  box-shadow var(--dur-fast) var(--ease);
2760
3317
  }
2761
3318
  .date-time-picker-time-option:hover:not(:disabled) {
2762
- color: var(--accent-ink);
2763
- background: var(--bg);
2764
- box-shadow: var(--neu-shadow-subtle);
3319
+ color: var(--lmn-date-time-picker-accent-ink, var(--accent-ink));
3320
+ background: var(--lmn-date-time-picker-bg, var(--bg));
3321
+ box-shadow: var(--lmn-date-time-picker-neu-shadow-subtle, var(--neu-shadow-subtle));
2765
3322
  }
2766
3323
  .date-time-picker-time-option.selected {
2767
- color: var(--accent-ink);
2768
- background: var(--bg);
2769
- box-shadow: var(--neu-shadow-subtle);
3324
+ color: var(--lmn-date-time-picker-accent-ink, var(--accent-ink));
3325
+ background: var(--lmn-date-time-picker-bg, var(--bg));
3326
+ box-shadow: var(--lmn-date-time-picker-neu-shadow-subtle, var(--neu-shadow-subtle));
2770
3327
  }
2771
3328
  .date-time-picker-time-option:disabled {
2772
- color: var(--fg-subtle);
3329
+ color: var(--lmn-date-time-picker-fg-subtle, var(--fg-subtle));
2773
3330
  cursor: not-allowed;
2774
3331
  opacity: 0.45;
2775
3332
  }
@@ -2779,7 +3336,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
2779
3336
  gap: var(--gap-2);
2780
3337
  margin-top: var(--gap-2);
2781
3338
  padding-top: var(--gap-2);
2782
- border-top: 1px solid var(--divider);
3339
+ border-top: 1px solid var(--lmn-date-time-picker-divider, var(--divider));
2783
3340
  }
2784
3341
  .date-time-picker-footer-spacer {
2785
3342
  flex: 1;
@@ -2813,10 +3370,10 @@ input, textarea, select { font-family: inherit; color: inherit; }
2813
3370
  }
2814
3371
  /* ============ Calendar ============ */
2815
3372
  .calendar {
2816
- background: var(--bg);
3373
+ background: var(--lmn-calendar-bg, var(--bg));
2817
3374
  border-radius: var(--r-lg);
2818
3375
  padding: var(--gap-4);
2819
- box-shadow: var(--neu-shadow-panel);
3376
+ box-shadow: var(--lmn-calendar-neu-shadow-panel, var(--neu-shadow-panel));
2820
3377
  width: 320px;
2821
3378
  }
2822
3379
  .calendar-head {
@@ -2827,11 +3384,11 @@ input, textarea, select { font-family: inherit; color: inherit; }
2827
3384
  font-size: 14px; font-weight: 600;
2828
3385
  display: inline-flex; align-items: center; gap: 8px;
2829
3386
  cursor: pointer; padding: 6px 10px; border-radius: var(--r-sm);
2830
- border: none; background: transparent; color: var(--fg);
3387
+ border: none; background: transparent; color: var(--lmn-calendar-fg, var(--fg));
2831
3388
  font-family: inherit;
2832
3389
  transition: all var(--dur-fast) var(--ease);
2833
3390
  }
2834
- .calendar-title:hover { background: var(--bg); box-shadow: var(--neu-shadow-subtle); }
3391
+ .calendar-title:hover { background: var(--lmn-calendar-bg, var(--bg)); box-shadow: var(--lmn-calendar-neu-shadow-subtle, var(--neu-shadow-subtle)); }
2835
3392
  .calendar-title.static {
2836
3393
  cursor: default;
2837
3394
  }
@@ -2849,7 +3406,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
2849
3406
  border-radius: var(--r-sm);
2850
3407
  padding: 6px 8px;
2851
3408
  background: transparent;
2852
- color: var(--fg);
3409
+ color: var(--lmn-calendar-fg, var(--fg));
2853
3410
  cursor: pointer;
2854
3411
  font: 600 14px var(--font-sans);
2855
3412
  transition:
@@ -2858,9 +3415,9 @@ input, textarea, select { font-family: inherit; color: inherit; }
2858
3415
  box-shadow var(--dur-fast) var(--ease);
2859
3416
  }
2860
3417
  .calendar-title-part:hover {
2861
- color: var(--accent-ink);
2862
- background: var(--bg);
2863
- box-shadow: var(--neu-shadow-subtle);
3418
+ color: var(--lmn-calendar-accent-ink, var(--accent-ink));
3419
+ background: var(--lmn-calendar-bg, var(--bg));
3420
+ box-shadow: var(--lmn-calendar-neu-shadow-subtle, var(--neu-shadow-subtle));
2864
3421
  }
2865
3422
  .calendar-grid {
2866
3423
  display: grid;
@@ -2871,7 +3428,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
2871
3428
  text-align: center;
2872
3429
  font-size: 10px;
2873
3430
  font-weight: 600;
2874
- color: var(--fg-subtle);
3431
+ color: var(--lmn-calendar-fg-subtle, var(--fg-subtle));
2875
3432
  text-transform: uppercase;
2876
3433
  letter-spacing: 0.06em;
2877
3434
  padding: 8px 0;
@@ -2881,7 +3438,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
2881
3438
  aspect-ratio: 1;
2882
3439
  display: grid; place-items: center;
2883
3440
  font-size: 12px;
2884
- color: var(--fg);
3441
+ color: var(--lmn-calendar-fg, var(--fg));
2885
3442
  border-radius: var(--r-sm);
2886
3443
  cursor: pointer;
2887
3444
  border: none;
@@ -2889,22 +3446,22 @@ input, textarea, select { font-family: inherit; color: inherit; }
2889
3446
  font-family: inherit;
2890
3447
  transition: all var(--dur-fast) var(--ease);
2891
3448
  }
2892
- .calendar-cell.out { color: var(--fg-subtle); opacity: 0.5; }
2893
- .calendar-cell:hover { background: var(--bg); box-shadow: var(--neu-shadow-subtle); }
2894
- .calendar-cell.today { font-weight: 700; color: var(--accent-ink); }
3449
+ .calendar-cell.out { color: var(--lmn-calendar-fg-subtle, var(--fg-subtle)); opacity: 0.5; }
3450
+ .calendar-cell:hover { background: var(--lmn-calendar-bg, var(--bg)); box-shadow: var(--lmn-calendar-neu-shadow-subtle, var(--neu-shadow-subtle)); }
3451
+ .calendar-cell.today { font-weight: 700; color: var(--lmn-calendar-accent-ink, var(--accent-ink)); }
2895
3452
  .calendar-cell.today::after {
2896
3453
  content: ""; position: absolute; bottom: 4px; left: 50%;
2897
3454
  width: 4px; height: 4px; border-radius: 999px;
2898
- background: var(--accent);
3455
+ background: var(--lmn-calendar-accent, var(--accent));
2899
3456
  transform: translateX(-50%);
2900
3457
  }
2901
3458
  .calendar-cell.selected {
2902
- background: var(--bg);
2903
- box-shadow: var(--neu-shadow-inset);
2904
- color: var(--accent-ink);
3459
+ background: var(--lmn-calendar-bg, var(--bg));
3460
+ box-shadow: var(--lmn-calendar-neu-shadow-inset, var(--neu-shadow-inset));
3461
+ color: var(--lmn-calendar-accent-ink, var(--accent-ink));
2905
3462
  font-weight: 600;
2906
3463
  }
2907
- .calendar-cell.disabled { color: var(--fg-subtle); opacity: 0.4; cursor: not-allowed; }
3464
+ .calendar-cell.disabled { color: var(--lmn-calendar-fg-subtle, var(--fg-subtle)); opacity: 0.4; cursor: not-allowed; }
2908
3465
  .calendar-cell.disabled:hover { background: transparent; box-shadow: none; }
2909
3466
  .calendar-select-grid {
2910
3467
  display: grid;
@@ -2918,7 +3475,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
2918
3475
  border: none;
2919
3476
  border-radius: var(--r-sm);
2920
3477
  background: transparent;
2921
- color: var(--fg);
3478
+ color: var(--lmn-calendar-fg, var(--fg));
2922
3479
  cursor: pointer;
2923
3480
  font: 600 var(--fs-md) var(--font-mono);
2924
3481
  transition:
@@ -2927,17 +3484,17 @@ input, textarea, select { font-family: inherit; color: inherit; }
2927
3484
  box-shadow var(--dur-fast) var(--ease);
2928
3485
  }
2929
3486
  .calendar-select-option:hover:not(:disabled) {
2930
- color: var(--accent-ink);
2931
- background: var(--bg);
2932
- box-shadow: var(--neu-shadow-subtle);
3487
+ color: var(--lmn-calendar-accent-ink, var(--accent-ink));
3488
+ background: var(--lmn-calendar-bg, var(--bg));
3489
+ box-shadow: var(--lmn-calendar-neu-shadow-subtle, var(--neu-shadow-subtle));
2933
3490
  }
2934
3491
  .calendar-select-option.selected {
2935
- color: var(--accent-ink);
2936
- background: var(--bg);
2937
- box-shadow: var(--neu-shadow-inset);
3492
+ color: var(--lmn-calendar-accent-ink, var(--accent-ink));
3493
+ background: var(--lmn-calendar-bg, var(--bg));
3494
+ box-shadow: var(--lmn-calendar-neu-shadow-inset, var(--neu-shadow-inset));
2938
3495
  }
2939
3496
  .calendar-select-option.disabled {
2940
- color: var(--fg-subtle);
3497
+ color: var(--lmn-calendar-fg-subtle, var(--fg-subtle));
2941
3498
  cursor: not-allowed;
2942
3499
  opacity: 0.4;
2943
3500
  }
@@ -2959,7 +3516,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
2959
3516
  width: 100%;
2960
3517
  }
2961
3518
  .time-picker.open .input-wrap {
2962
- box-shadow: var(--neu-shadow-inset);
3519
+ box-shadow: var(--lmn-time-picker-neu-shadow-inset, var(--neu-shadow-inset));
2963
3520
  }
2964
3521
  .time-picker-panel {
2965
3522
  position: fixed;
@@ -2967,10 +3524,10 @@ input, textarea, select { font-family: inherit; color: inherit; }
2967
3524
  width: 300px;
2968
3525
  padding: 10px;
2969
3526
  border-radius: var(--r-md);
2970
- background: var(--bg);
3527
+ background: var(--lmn-time-picker-bg, var(--bg));
2971
3528
  box-shadow:
2972
- 0 calc(var(--shadow-offset) * 1.1) calc(var(--shadow-blur) * 1.3) color-mix(in oklch, var(--shadow-dark) 72%, transparent),
2973
- inset 0 0 0 1px var(--divider);
3529
+ 0 calc(var(--lmn-time-picker-shadow-offset, var(--shadow-offset)) * 1.1) calc(var(--lmn-time-picker-shadow-blur, var(--shadow-blur)) * 1.3) color-mix(in oklch, var(--lmn-time-picker-shadow-dark, var(--shadow-dark)) 72%, transparent),
3530
+ inset 0 0 0 1px var(--lmn-time-picker-divider, var(--divider));
2974
3531
  animation: menuIn var(--dur) var(--ease);
2975
3532
  }
2976
3533
  .time-picker-panel.without-second {
@@ -2983,12 +3540,12 @@ input, textarea, select { font-family: inherit; color: inherit; }
2983
3540
  gap: 0;
2984
3541
  padding: 8px;
2985
3542
  border-radius: var(--r-sm);
2986
- background: var(--bg);
2987
- box-shadow: inset 0 0 0 1px var(--divider);
3543
+ background: var(--lmn-time-picker-bg, var(--bg));
3544
+ box-shadow: inset 0 0 0 1px var(--lmn-time-picker-divider, var(--divider));
2988
3545
  overflow: hidden;
2989
3546
  }
2990
3547
  .time-picker-column + .time-picker-column {
2991
- border-left: 1px solid var(--divider);
3548
+ border-left: 1px solid var(--lmn-time-picker-divider, var(--divider));
2992
3549
  }
2993
3550
  .time-picker-panel.without-second .time-picker-columns {
2994
3551
  grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -3004,7 +3561,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
3004
3561
  place-items: center;
3005
3562
  font-size: var(--fs-xs);
3006
3563
  font-weight: 700;
3007
- color: var(--fg-muted);
3564
+ color: var(--lmn-time-picker-fg-muted, var(--fg-muted));
3008
3565
  }
3009
3566
  .time-picker-list {
3010
3567
  display: flex;
@@ -3034,7 +3591,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
3034
3591
  border: none;
3035
3592
  border-radius: 7px;
3036
3593
  background: transparent;
3037
- color: var(--fg);
3594
+ color: var(--lmn-time-picker-fg, var(--fg));
3038
3595
  cursor: pointer;
3039
3596
  font: 600 var(--fs-md) var(--font-mono);
3040
3597
  transition:
@@ -3043,17 +3600,17 @@ input, textarea, select { font-family: inherit; color: inherit; }
3043
3600
  box-shadow var(--dur-fast) var(--ease);
3044
3601
  }
3045
3602
  .time-picker-option:hover:not(:disabled) {
3046
- color: var(--accent-ink);
3047
- background: var(--bg);
3048
- box-shadow: var(--neu-shadow-subtle);
3603
+ color: var(--lmn-time-picker-accent-ink, var(--accent-ink));
3604
+ background: var(--lmn-time-picker-bg, var(--bg));
3605
+ box-shadow: var(--lmn-time-picker-neu-shadow-subtle, var(--neu-shadow-subtle));
3049
3606
  }
3050
3607
  .time-picker-option.selected {
3051
- background: var(--bg);
3052
- color: var(--accent-ink);
3053
- box-shadow: var(--neu-shadow-subtle);
3608
+ background: var(--lmn-time-picker-bg, var(--bg));
3609
+ color: var(--lmn-time-picker-accent-ink, var(--accent-ink));
3610
+ box-shadow: var(--lmn-time-picker-neu-shadow-subtle, var(--neu-shadow-subtle));
3054
3611
  }
3055
3612
  .time-picker-option:disabled {
3056
- color: var(--fg-subtle);
3613
+ color: var(--lmn-time-picker-fg-subtle, var(--fg-subtle));
3057
3614
  cursor: not-allowed;
3058
3615
  opacity: 0.45;
3059
3616
  }
@@ -3063,7 +3620,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
3063
3620
  gap: 6px;
3064
3621
  margin-top: 8px;
3065
3622
  padding: 8px 0 0;
3066
- border-top: 1px solid var(--divider);
3623
+ border-top: 1px solid var(--lmn-time-picker-divider, var(--divider));
3067
3624
  }
3068
3625
  .time-picker-footer-spacer {
3069
3626
  flex: 1;
@@ -3077,9 +3634,9 @@ input, textarea, select { font-family: inherit; color: inherit; }
3077
3634
  display: inline-block;
3078
3635
  position: relative;
3079
3636
  border-radius: var(--r-md);
3080
- background: var(--bg);
3637
+ background: var(--lmn-image-bg, var(--bg));
3081
3638
  padding: 6px;
3082
- box-shadow: var(--neu-shadow-control);
3639
+ box-shadow: var(--lmn-image-neu-shadow-control, var(--neu-shadow-control));
3083
3640
  overflow: hidden;
3084
3641
  line-height: 0;
3085
3642
  }
@@ -3099,8 +3656,8 @@ input, textarea, select { font-family: inherit; color: inherit; }
3099
3656
  position: relative;
3100
3657
  overflow: hidden;
3101
3658
  border-radius: calc(var(--r-md) - 4px);
3102
- box-shadow: var(--neu-shadow-inset);
3103
- background: var(--bg-sunken);
3659
+ box-shadow: var(--lmn-image-neu-shadow-inset, var(--neu-shadow-inset));
3660
+ background: var(--lmn-image-bg-sunken, var(--bg-sunken));
3104
3661
  }
3105
3662
  .n-image.raw .n-image-frame {
3106
3663
  border-radius: 0;
@@ -3123,11 +3680,11 @@ input, textarea, select { font-family: inherit; color: inherit; }
3123
3680
  .n-image-placeholder {
3124
3681
  position: absolute; inset: 0;
3125
3682
  display: grid; place-items: center;
3126
- color: var(--fg-subtle);
3683
+ color: var(--lmn-image-fg-subtle, var(--fg-subtle));
3127
3684
  background:
3128
3685
  repeating-linear-gradient(45deg,
3129
3686
  transparent 0 10px,
3130
- color-mix(in oklch, var(--fg-subtle) 8%, transparent) 10px 11px);
3687
+ color-mix(in oklch, var(--lmn-image-fg-subtle, var(--fg-subtle)) 8%, transparent) 10px 11px);
3131
3688
  transition: opacity var(--dur) var(--ease);
3132
3689
  }
3133
3690
  .n-image-placeholder.loaded { opacity: 0; pointer-events: none; }
@@ -3147,7 +3704,8 @@ input, textarea, select { font-family: inherit; color: inherit; }
3147
3704
  transform: translateY(-4px);
3148
3705
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
3149
3706
  }
3150
- .n-image:hover .image-actions { opacity: 1; transform: translateY(0); }
3707
+ .n-image:hover .image-actions,
3708
+ .n-image:focus-within .image-actions { opacity: 1; transform: translateY(0); }
3151
3709
  .image-actions .ia-btn {
3152
3710
  width: 26px;
3153
3711
  height: 26px;
@@ -3185,7 +3743,8 @@ input, textarea, select { font-family: inherit; color: inherit; }
3185
3743
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
3186
3744
  pointer-events: none;
3187
3745
  }
3188
- .n-image:hover .image-hint { opacity: 1; transform: translateY(0); }
3746
+ .n-image:hover .image-hint,
3747
+ .n-image:focus-visible .image-hint { opacity: 1; transform: translateY(0); }
3189
3748
  .image-preview-overlay {
3190
3749
  position: fixed; inset: 0;
3191
3750
  background: var(--image-preview-mask-bg, var(--mask-bg));
@@ -3200,8 +3759,8 @@ input, textarea, select { font-family: inherit; color: inherit; }
3200
3759
  outline: none;
3201
3760
  }
3202
3761
  .image-preview-toolbar {
3203
- --image-preview-toolbar-ink: color-mix(in oklch, var(--accent) 42%, var(--fg-muted));
3204
- --image-preview-toolbar-ink-hover: color-mix(in oklch, var(--accent) 48%, var(--fg));
3762
+ --image-preview-toolbar-ink: color-mix(in oklch, var(--lmn-image-accent, var(--accent)) 42%, var(--lmn-image-fg-muted, var(--fg-muted)));
3763
+ --image-preview-toolbar-ink-hover: color-mix(in oklch, var(--lmn-image-accent, var(--accent)) 48%, var(--lmn-image-fg, var(--fg)));
3205
3764
  position: absolute;
3206
3765
  top: var(--gap-5);
3207
3766
  left: 50%;
@@ -3213,12 +3772,12 @@ input, textarea, select { font-family: inherit; color: inherit; }
3213
3772
  padding: 6px;
3214
3773
  overflow-x: auto;
3215
3774
  color: var(--image-preview-toolbar-ink);
3216
- border: 1px solid color-mix(in oklch, var(--accent) 14%, var(--border));
3775
+ border: 1px solid color-mix(in oklch, var(--lmn-image-accent, var(--accent)) 14%, var(--lmn-image-border, var(--border)));
3217
3776
  border-radius: var(--r-pill);
3218
- background: color-mix(in oklch, var(--bg-raised) 92%, var(--accent-soft));
3777
+ background: color-mix(in oklch, var(--lmn-image-bg-raised, var(--bg-raised)) 92%, var(--lmn-image-accent-soft, var(--accent-soft)));
3219
3778
  box-shadow:
3220
- var(--neu-float),
3221
- 0 0 0 1px color-mix(in oklch, var(--accent-glow) 22%, transparent);
3779
+ var(--lmn-image-neu-float, var(--neu-float)),
3780
+ 0 0 0 1px color-mix(in oklch, var(--lmn-image-accent-glow, var(--accent-glow)) 22%, transparent);
3222
3781
  backdrop-filter: blur(18px) saturate(1.2);
3223
3782
  transform: translateX(-50%);
3224
3783
  }
@@ -3230,14 +3789,14 @@ input, textarea, select { font-family: inherit; color: inherit; }
3230
3789
  }
3231
3790
  .image-preview-toolbar .btn.ghost:hover {
3232
3791
  color: var(--image-preview-toolbar-ink-hover);
3233
- background: color-mix(in oklch, var(--accent-soft) 36%, var(--bg));
3234
- box-shadow: var(--neu-shadow-subtle);
3792
+ background: color-mix(in oklch, var(--lmn-image-accent-soft, var(--accent-soft)) 36%, var(--lmn-image-bg, var(--bg)));
3793
+ box-shadow: var(--lmn-image-neu-shadow-subtle, var(--neu-shadow-subtle));
3235
3794
  }
3236
3795
  .image-preview-toolbar .btn.ghost:active,
3237
3796
  .image-preview-toolbar .btn.ghost.pressed {
3238
3797
  color: var(--image-preview-toolbar-ink-hover);
3239
- background: color-mix(in oklch, var(--accent-soft) 48%, var(--bg));
3240
- box-shadow: var(--neu-shadow-inset-strong);
3798
+ background: color-mix(in oklch, var(--lmn-image-accent-soft, var(--accent-soft)) 48%, var(--lmn-image-bg, var(--bg)));
3799
+ box-shadow: var(--lmn-image-neu-shadow-inset-strong, var(--neu-shadow-inset-strong));
3241
3800
  }
3242
3801
  .image-preview-scale {
3243
3802
  min-width: 48px;
@@ -3263,7 +3822,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
3263
3822
  max-width: 80vw;
3264
3823
  max-height: 80vh;
3265
3824
  border-radius: var(--r-lg);
3266
- box-shadow: var(--neu-shadow-float);
3825
+ box-shadow: var(--lmn-image-neu-shadow-float, var(--neu-shadow-float));
3267
3826
  transform-origin: center;
3268
3827
  transition: transform var(--dur-fast) var(--ease);
3269
3828
  user-select: none;
@@ -3284,9 +3843,9 @@ input, textarea, select { font-family: inherit; color: inherit; }
3284
3843
  display: inline-block;
3285
3844
  position: relative;
3286
3845
  border-radius: var(--r-sm);
3287
- background: var(--bg);
3846
+ background: var(--lmn-image-bg, var(--bg));
3288
3847
  padding: 6px;
3289
- box-shadow: var(--neu-shadow-control);
3848
+ box-shadow: var(--lmn-image-neu-shadow-control, var(--neu-shadow-control));
3290
3849
  overflow: hidden;
3291
3850
  line-height: 0;
3292
3851
  }
@@ -3307,8 +3866,8 @@ input, textarea, select { font-family: inherit; color: inherit; }
3307
3866
  width: 100%;
3308
3867
  overflow: hidden;
3309
3868
  border-radius: var(--r-sm);
3310
- background: var(--bg-sunken);
3311
- box-shadow: var(--neu-shadow-inset);
3869
+ background: var(--lmn-image-bg-sunken, var(--bg-sunken));
3870
+ box-shadow: var(--lmn-image-neu-shadow-inset, var(--neu-shadow-inset));
3312
3871
  }
3313
3872
  .n-sprite-image.raw .n-sprite-image-frame,
3314
3873
  .n-layered-image.raw .n-layered-image-frame {
@@ -3345,8 +3904,8 @@ input, textarea, select { font-family: inherit; color: inherit; }
3345
3904
  height: var(--ctrl-h);
3346
3905
  padding: 0 36px 0 var(--ctrl-pad-x);
3347
3906
  border-radius: var(--r-md);
3348
- background: var(--bg);
3349
- box-shadow: var(--neu-shadow-control);
3907
+ background: var(--lmn-cascader-bg, var(--bg));
3908
+ box-shadow: var(--lmn-cascader-neu-shadow-control, var(--neu-shadow-control));
3350
3909
  display: inline-flex;
3351
3910
  align-items: center;
3352
3911
  font-size: 13px;
@@ -3354,11 +3913,18 @@ input, textarea, select { font-family: inherit; color: inherit; }
3354
3913
  cursor: pointer;
3355
3914
  position: relative;
3356
3915
  border: none;
3357
- color: var(--fg);
3916
+ color: var(--lmn-cascader-fg, var(--fg));
3358
3917
  text-align: left;
3359
3918
  }
3360
- .cascader-trigger.placeholder { color: var(--fg-subtle); }
3361
- .cascader.open .cascader-trigger { box-shadow: var(--neu-shadow-inset); color: var(--accent-ink); }
3919
+ .cascader-trigger.placeholder { color: var(--lmn-cascader-fg-subtle, var(--fg-subtle)); }
3920
+ .cascader-value {
3921
+ flex: 1;
3922
+ min-width: 0;
3923
+ overflow: hidden;
3924
+ white-space: nowrap;
3925
+ text-overflow: ellipsis;
3926
+ }
3927
+ .cascader.open .cascader-trigger { box-shadow: var(--lmn-cascader-neu-shadow-inset, var(--neu-shadow-inset)); color: var(--lmn-cascader-accent-ink, var(--accent-ink)); }
3362
3928
  .cascader-clear {
3363
3929
  position: absolute;
3364
3930
  right: 30px;
@@ -3367,25 +3933,27 @@ input, textarea, select { font-family: inherit; color: inherit; }
3367
3933
  width: 20px;
3368
3934
  height: 20px;
3369
3935
  border-radius: 999px;
3370
- background: var(--bg);
3371
- box-shadow: var(--neu-shadow-control);
3936
+ background: var(--lmn-cascader-bg, var(--bg));
3937
+ box-shadow: var(--lmn-cascader-neu-shadow-control, var(--neu-shadow-control));
3372
3938
  display: inline-grid;
3373
3939
  place-items: center;
3374
- color: var(--fg-subtle);
3940
+ color: var(--lmn-cascader-fg-subtle, var(--fg-subtle));
3375
3941
  opacity: 0;
3376
3942
  transition: all var(--dur-fast) var(--ease);
3377
3943
  }
3378
3944
  .cascader:hover .cascader-clear { opacity: 1; }
3379
- .cascader-clear:hover { color: var(--accent-ink); box-shadow: var(--neu-shadow-inset); }
3945
+ .cascader-clear:hover { color: var(--lmn-cascader-accent-ink, var(--accent-ink)); box-shadow: var(--lmn-cascader-neu-shadow-inset, var(--neu-shadow-inset)); }
3380
3946
  .cascader-panel {
3381
3947
  z-index: 1000;
3382
3948
  display: flex;
3383
- background: var(--bg);
3949
+ background: var(--lmn-cascader-bg, var(--bg));
3384
3950
  border-radius: var(--r-md);
3385
- box-shadow: var(--neu-shadow-float);
3951
+ box-shadow: var(--lmn-cascader-neu-shadow-float, var(--neu-shadow-float));
3386
3952
  padding: 6px;
3387
3953
  animation: menuIn var(--dur) var(--ease);
3388
3954
  gap: 4px;
3955
+ max-width: calc(100vw - 16px);
3956
+ overflow-x: auto;
3389
3957
  }
3390
3958
  .cascader-panel.with-search {
3391
3959
  flex-direction: column;
@@ -3397,20 +3965,20 @@ input, textarea, select { font-family: inherit; color: inherit; }
3397
3965
  }
3398
3966
  .cascader-search {
3399
3967
  padding: 4px 2px 8px;
3400
- border-bottom: 1px solid var(--divider);
3968
+ border-bottom: 1px solid var(--lmn-cascader-divider, var(--divider));
3401
3969
  }
3402
3970
  .cascader-search-list {
3403
3971
  display: flex;
3404
3972
  flex-direction: column;
3405
3973
  gap: 4px;
3406
- max-height: 260px;
3974
+ max-height: var(--cascader-list-height, 280px);
3407
3975
  overflow-y: auto;
3408
3976
  padding: 4px;
3409
3977
  }
3410
3978
  .cascader-search-item {
3411
3979
  border: none;
3412
3980
  background: transparent;
3413
- color: var(--fg);
3981
+ color: var(--lmn-cascader-fg, var(--fg));
3414
3982
  border-radius: var(--r-sm);
3415
3983
  padding: 8px 10px;
3416
3984
  display: flex;
@@ -3422,26 +3990,26 @@ input, textarea, select { font-family: inherit; color: inherit; }
3422
3990
  cursor: pointer;
3423
3991
  }
3424
3992
  .cascader-search-item:hover {
3425
- background: var(--bg);
3426
- box-shadow: var(--neu-shadow-subtle);
3427
- color: var(--accent-ink);
3993
+ background: var(--lmn-cascader-bg, var(--bg));
3994
+ box-shadow: var(--lmn-cascader-neu-shadow-subtle, var(--neu-shadow-subtle));
3995
+ color: var(--lmn-cascader-accent-ink, var(--accent-ink));
3428
3996
  }
3429
- .cascader-path-sep { color: var(--fg-subtle); }
3997
+ .cascader-path-sep { color: var(--lmn-cascader-fg-subtle, var(--fg-subtle)); }
3430
3998
  .cascader-empty {
3431
3999
  padding: 24px 12px;
3432
4000
  text-align: center;
3433
- color: var(--fg-muted);
4001
+ color: var(--lmn-cascader-fg-muted, var(--fg-muted));
3434
4002
  font-size: 12px;
3435
4003
  }
3436
4004
  .cascader-col {
3437
4005
  min-width: 160px;
3438
- max-height: 280px;
4006
+ max-height: var(--cascader-list-height, 280px);
3439
4007
  overflow-y: auto;
3440
4008
  padding: 4px;
3441
4009
  border-radius: var(--r-sm);
3442
4010
  }
3443
4011
  .cascader-col + .cascader-col {
3444
- border-left: 1px solid var(--divider);
4012
+ border-left: 1px solid var(--lmn-cascader-divider, var(--divider));
3445
4013
  margin-left: 2px;
3446
4014
  padding-left: 6px;
3447
4015
  }
@@ -3449,7 +4017,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
3449
4017
  padding: 8px 10px;
3450
4018
  border-radius: var(--r-sm);
3451
4019
  font-size: 13px;
3452
- color: var(--fg);
4020
+ color: var(--lmn-cascader-fg, var(--fg));
3453
4021
  cursor: pointer;
3454
4022
  display: flex;
3455
4023
  align-items: center;
@@ -3468,27 +4036,36 @@ input, textarea, select { font-family: inherit; color: inherit; }
3468
4036
  line-height: 0;
3469
4037
  flex-shrink: 0;
3470
4038
  }
4039
+ .cascader-panel.custom-options .cascader-col {
4040
+ min-width: 240px;
4041
+ }
4042
+ .cascader-item-label,
4043
+ .cascader-item-custom {
4044
+ flex: 1;
4045
+ min-width: 0;
4046
+ text-align: left;
4047
+ }
3471
4048
  .cascader-icon img {
3472
4049
  display: block;
3473
4050
  width: 15px;
3474
4051
  height: 15px;
3475
4052
  object-fit: contain;
3476
4053
  }
3477
- .cascader-item:hover { background: var(--bg); box-shadow: var(--neu-shadow-subtle); color: var(--accent-ink); }
4054
+ .cascader-item:hover { background: var(--lmn-cascader-bg, var(--bg)); box-shadow: var(--lmn-cascader-neu-shadow-subtle, var(--neu-shadow-subtle)); color: var(--lmn-cascader-accent-ink, var(--accent-ink)); }
3478
4055
  .cascader-item.active {
3479
- background: var(--bg);
3480
- box-shadow: var(--neu-shadow-inset);
3481
- color: var(--accent-ink);
4056
+ background: var(--lmn-cascader-bg, var(--bg));
4057
+ box-shadow: var(--lmn-cascader-neu-shadow-inset, var(--neu-shadow-inset));
4058
+ color: var(--lmn-cascader-accent-ink, var(--accent-ink));
3482
4059
  font-weight: 500;
3483
4060
  }
3484
- .cascader-item .chev { margin-left: auto; color: var(--fg-subtle); display: inline-flex; }
3485
- .cascader-item.active .chev { color: var(--accent); }
4061
+ .cascader-item .chev { margin-left: auto; color: var(--lmn-cascader-fg-subtle, var(--fg-subtle)); display: inline-flex; }
4062
+ .cascader-item.active .chev { color: var(--lmn-cascader-accent, var(--accent)); }
3486
4063
  /* ============================================================================
3487
4064
  * Typography
3488
4065
  * ========================================================================== */
3489
4066
  .typo-root {
3490
4067
  font-family: var(--font-sans);
3491
- color: var(--fg);
4068
+ color: var(--lmn-typography-fg, var(--fg));
3492
4069
  line-height: 1.7;
3493
4070
  font-size: 14px;
3494
4071
  }
@@ -3499,16 +4076,16 @@ input, textarea, select { font-family: inherit; color: inherit; }
3499
4076
  .typo-root > .typo-title:first-child { margin-top: 0; }
3500
4077
  /* ---- Base ---- */
3501
4078
  .typo {
3502
- color: var(--fg);
4079
+ color: var(--lmn-typography-fg, var(--fg));
3503
4080
  font-family: var(--font-sans);
3504
4081
  word-wrap: break-word;
3505
4082
  }
3506
4083
  /* Semantic colors */
3507
- .typo.secondary { color: var(--fg-muted); }
3508
- .typo.success { color: var(--success); }
3509
- .typo.warning { color: var(--warning); }
3510
- .typo.danger { color: var(--danger); }
3511
- .typo.disabled { color: var(--fg-subtle); cursor: not-allowed; user-select: none; }
4084
+ .typo.secondary { color: var(--lmn-typography-fg-muted, var(--fg-muted)); }
4085
+ .typo.success { color: var(--lmn-typography-success, var(--success)); }
4086
+ .typo.warning { color: var(--lmn-typography-warning, var(--warning)); }
4087
+ .typo.danger { color: var(--lmn-typography-danger, var(--danger)); }
4088
+ .typo.disabled { color: var(--lmn-typography-fg-subtle, var(--fg-subtle)); cursor: not-allowed; user-select: none; }
3512
4089
  /* Decorations */
3513
4090
  .typo.strong { font-weight: 600; }
3514
4091
  .typo.italic { font-style: italic; }
@@ -3516,7 +4093,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
3516
4093
  .typo.del { text-decoration: line-through; text-decoration-thickness: 1.5px; }
3517
4094
  /* mark / code / kbd render their own elements; we still color the shell */
3518
4095
  .typo mark {
3519
- background: color-mix(in oklch, var(--warning) 35%, transparent);
4096
+ background: color-mix(in oklch, var(--lmn-typography-warning, var(--warning)) 33%, transparent);
3520
4097
  color: inherit;
3521
4098
  padding: 0 3px;
3522
4099
  border-radius: 3px;
@@ -3526,9 +4103,9 @@ input, textarea, select { font-family: inherit; color: inherit; }
3526
4103
  font-size: 0.88em;
3527
4104
  padding: 1px 6px;
3528
4105
  border-radius: 5px;
3529
- background: var(--bg-sunken);
3530
- box-shadow: var(--neu-shadow-inset);
3531
- color: var(--accent-ink);
4106
+ background: var(--lmn-typography-bg-sunken, var(--bg-sunken));
4107
+ box-shadow: var(--lmn-typography-neu-shadow-inset, var(--neu-shadow-inset));
4108
+ color: var(--lmn-typography-accent-ink, var(--accent-ink));
3532
4109
  margin: 0 2px;
3533
4110
  }
3534
4111
  .typo kbd {
@@ -3536,10 +4113,10 @@ input, textarea, select { font-family: inherit; color: inherit; }
3536
4113
  font-size: 0.82em;
3537
4114
  padding: 1px 7px;
3538
4115
  border-radius: 5px;
3539
- background: var(--bg-raised);
3540
- box-shadow: var(--neu-shadow-subtle);
3541
- border: 1px solid var(--border);
3542
- color: var(--fg);
4116
+ background: var(--lmn-typography-bg-raised, var(--bg-raised));
4117
+ box-shadow: var(--lmn-typography-neu-shadow-subtle, var(--neu-shadow-subtle));
4118
+ border: 1px solid var(--lmn-typography-border, var(--border));
4119
+ color: var(--lmn-typography-fg, var(--fg));
3543
4120
  margin: 0 2px;
3544
4121
  line-height: 1.4;
3545
4122
  display: inline-block;
@@ -3551,7 +4128,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
3551
4128
  font-weight: 700;
3552
4129
  letter-spacing: -0.01em;
3553
4130
  line-height: 1.25;
3554
- color: var(--fg);
4131
+ color: var(--lmn-typography-fg, var(--fg));
3555
4132
  margin: 0;
3556
4133
  }
3557
4134
  .typo-title.h1 { font-size: 32px; letter-spacing: -0.02em; }
@@ -3565,13 +4142,22 @@ input, textarea, select { font-family: inherit; color: inherit; }
3565
4142
  font-size: 14px;
3566
4143
  line-height: 1.75;
3567
4144
  margin: 0;
3568
- color: var(--fg);
4145
+ color: var(--lmn-typography-fg, var(--fg));
3569
4146
  }
3570
4147
  /* ---- Text ---- */
3571
4148
  .typo-text { font-size: inherit; line-height: inherit; }
3572
4149
  /* ---- Link ---- */
4150
+ .typo-link-group {
4151
+ display: inline-flex;
4152
+ align-items: center;
4153
+ max-width: 100%;
4154
+ vertical-align: baseline;
4155
+ }
4156
+ .typo-link-group > .typo-link { min-width: 0; }
4157
+ .typo-link-group > .typo-action,
4158
+ .typo-link-group > .typo-expand { flex: 0 0 auto; }
3573
4159
  .typo-link {
3574
- color: var(--accent-ink);
4160
+ color: var(--lmn-typography-accent-ink, var(--accent-ink));
3575
4161
  text-decoration: none;
3576
4162
  transition: color var(--dur-fast) var(--ease), text-decoration-color var(--dur-fast) var(--ease);
3577
4163
  cursor: pointer;
@@ -3580,14 +4166,14 @@ input, textarea, select { font-family: inherit; color: inherit; }
3580
4166
  align-items: center;
3581
4167
  gap: 3px;
3582
4168
  }
3583
- .typo-link:hover { color: var(--accent); text-decoration: underline; }
4169
+ .typo-link:hover { color: var(--lmn-typography-accent, var(--accent)); text-decoration: underline; }
3584
4170
  .typo-link:focus-visible {
3585
- outline: 2px solid var(--accent-glow);
4171
+ outline: 2px solid var(--lmn-typography-accent-glow, var(--accent-glow));
3586
4172
  outline-offset: 2px;
3587
4173
  border-radius: 2px;
3588
4174
  }
3589
4175
  .typo-link.disabled {
3590
- color: var(--fg-subtle);
4176
+ color: var(--lmn-typography-fg-subtle, var(--fg-subtle));
3591
4177
  cursor: not-allowed;
3592
4178
  pointer-events: auto;
3593
4179
  text-decoration: none;
@@ -3610,26 +4196,31 @@ input, textarea, select { font-family: inherit; color: inherit; }
3610
4196
  margin-left: 5px;
3611
4197
  border-radius: 6px;
3612
4198
  cursor: pointer;
3613
- color: var(--fg-subtle);
4199
+ color: var(--lmn-typography-fg-subtle, var(--fg-subtle));
3614
4200
  line-height: 1;
3615
4201
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
3616
4202
  vertical-align: -0.18em;
3617
4203
  user-select: none;
4204
+ padding: 0;
4205
+ border: none;
4206
+ background: transparent;
4207
+ font: inherit;
3618
4208
  }
3619
4209
  .typo-action > svg {
3620
4210
  display: block;
3621
4211
  flex-shrink: 0;
3622
4212
  }
3623
4213
  .typo-action:hover {
3624
- color: var(--accent-ink);
3625
- background: var(--bg);
3626
- box-shadow: var(--neu-shadow-subtle);
4214
+ color: var(--lmn-typography-accent-ink, var(--accent-ink));
4215
+ background: var(--lmn-typography-bg, var(--bg));
4216
+ box-shadow: var(--lmn-typography-neu-shadow-subtle, var(--neu-shadow-subtle));
3627
4217
  }
3628
4218
  .typo-action:focus-visible {
3629
- outline: 2px solid var(--accent-glow);
4219
+ outline: 2px solid var(--lmn-typography-accent-glow, var(--accent-glow));
3630
4220
  outline-offset: 1px;
3631
4221
  }
3632
- .typo-copy.copied { color: var(--success); }
4222
+ .typo-copy.copied { color: var(--lmn-typography-success, var(--success)); }
4223
+ .typo-copy.error { color: var(--lmn-typography-danger, var(--danger)); }
3633
4224
  /* Editable text trigger overlays */
3634
4225
  .typo-edit-text-trigger {
3635
4226
  cursor: text;
@@ -3638,14 +4229,32 @@ input, textarea, select { font-family: inherit; color: inherit; }
3638
4229
  padding: 0 2px;
3639
4230
  margin: 0 -2px;
3640
4231
  }
3641
- .typo-edit-text-trigger:hover { background: color-mix(in oklch, var(--accent) 8%, transparent); }
4232
+ .typo-edit-text-trigger:hover { background: color-mix(in oklch, var(--lmn-typography-accent, var(--accent)) 8%, transparent); }
3642
4233
  /* ---- Editor (input / textarea) ---- */
3643
4234
  .typo.editing { display: block; }
4235
+ .typo-editor-wrap {
4236
+ display: inline-flex;
4237
+ align-items: center;
4238
+ gap: var(--gap-1);
4239
+ width: 100%;
4240
+ max-width: 100%;
4241
+ }
4242
+ .typo-editor-wrap > .typo-editor { min-width: 0; }
4243
+ .typo-enter {
4244
+ flex: 0 0 auto;
4245
+ margin-left: 0;
4246
+ }
4247
+ .typo.typo-link-editor-shell {
4248
+ display: inline-flex;
4249
+ min-width: 0;
4250
+ flex: 1 1 auto;
4251
+ }
4252
+ .typo.typo-link-editing-anchor { display: none; }
3644
4253
  .typo-editor {
3645
4254
  font: inherit;
3646
4255
  color: inherit;
3647
- background: var(--bg-sunken);
3648
- box-shadow: var(--neu-shadow-inset-strong);
4256
+ background: var(--lmn-typography-bg-sunken, var(--bg-sunken));
4257
+ box-shadow: var(--lmn-typography-neu-shadow-inset-strong, var(--neu-shadow-inset-strong));
3649
4258
  border: none;
3650
4259
  outline: none;
3651
4260
  width: 100%;
@@ -3660,7 +4269,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
3660
4269
  font-family: inherit;
3661
4270
  }
3662
4271
  .typo-editor:focus {
3663
- box-shadow: var(--neu-shadow-inset-strong), 0 0 0 3px var(--accent-glow);
4272
+ box-shadow: var(--lmn-typography-neu-shadow-inset-strong, var(--neu-shadow-inset-strong)), 0 0 0 3px var(--lmn-typography-accent-glow, var(--accent-glow));
3664
4273
  }
3665
4274
  /* ---- Ellipsis ---- */
3666
4275
  .typo.ellipsis {
@@ -3692,23 +4301,59 @@ input, textarea, select { font-family: inherit; color: inherit; }
3692
4301
  -webkit-box-orient: vertical;
3693
4302
  overflow: hidden;
3694
4303
  }
4304
+ /* 后缀与裁切正文分栏,确保后缀不进入 overflow / line-clamp 区域。 */
4305
+ .typo.ellipsis-with-suffix {
4306
+ display: inline-flex;
4307
+ align-items: flex-end;
4308
+ max-width: 100%;
4309
+ min-width: 0;
4310
+ vertical-align: bottom;
4311
+ }
4312
+ .typo-paragraph.ellipsis-with-suffix,
4313
+ .typo-title.ellipsis-with-suffix {
4314
+ display: flex;
4315
+ }
4316
+ .typo-ellipsis-content {
4317
+ flex: 0 1 auto;
4318
+ min-width: 0;
4319
+ max-width: 100%;
4320
+ }
4321
+ .typo-ellipsis-content.ellipsis {
4322
+ display: block;
4323
+ overflow: hidden;
4324
+ white-space: nowrap;
4325
+ text-overflow: ellipsis;
4326
+ }
4327
+ .typo-ellipsis-content.ellipsis-multi {
4328
+ display: -webkit-box;
4329
+ -webkit-box-orient: vertical;
4330
+ overflow: hidden;
4331
+ }
3695
4332
  .typo-expand {
3696
4333
  margin-left: 4px;
3697
- color: var(--accent-ink);
4334
+ color: var(--lmn-typography-accent-ink, var(--accent-ink));
3698
4335
  cursor: pointer;
3699
4336
  font-size: 0.92em;
3700
4337
  user-select: none;
4338
+ padding: 0;
4339
+ border: none;
4340
+ background: transparent;
4341
+ font: inherit;
4342
+ }
4343
+ .typo-expand:hover { color: var(--lmn-typography-accent, var(--accent)); text-decoration: underline; text-underline-offset: 3px; }
4344
+ .typo-suffix {
4345
+ flex: none;
4346
+ margin-left: 0.25em;
3701
4347
  }
3702
- .typo-expand:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
3703
4348
  .typo-ellipsis-tooltip {
3704
4349
  display: block;
3705
4350
  box-sizing: border-box;
3706
4351
  max-width: min(520px, calc(100vw - 32px));
3707
4352
  padding: 7px 10px;
3708
4353
  border-radius: var(--r-sm);
3709
- background: var(--bg-sunken);
3710
- color: var(--fg);
3711
- box-shadow: var(--neu-shadow-control);
4354
+ background: var(--lmn-typography-bg-sunken, var(--bg-sunken));
4355
+ color: var(--lmn-typography-fg, var(--fg));
4356
+ box-shadow: var(--lmn-typography-neu-shadow-control, var(--neu-shadow-control));
3712
4357
  font-size: 12px;
3713
4358
  font-weight: 500;
3714
4359
  line-height: 1.55;
@@ -3724,11 +4369,6 @@ input, textarea, select { font-family: inherit; color: inherit; }
3724
4369
  animation: fadeIn var(--dur) var(--ease);
3725
4370
  z-index: 1000;
3726
4371
  }
3727
- /* In dark mode, mark needs slightly higher contrast */
3728
- [data-theme="dark"] .typo mark {
3729
- background: color-mix(in oklch, var(--warning) 30%, transparent);
3730
- color: var(--fg);
3731
- }
3732
4372
  /* ============================================================================
3733
4373
  * Container & trigger
3734
4374
  * ========================================================================== */
@@ -3742,16 +4382,16 @@ input, textarea, select { font-family: inherit; color: inherit; }
3742
4382
  gap: 8px;
3743
4383
  padding: 4px;
3744
4384
  border: none;
3745
- background: var(--bg);
3746
- box-shadow: var(--neu-shadow-subtle);
4385
+ background: var(--lmn-color-picker-bg, var(--bg));
4386
+ box-shadow: var(--lmn-color-picker-neu-shadow-subtle, var(--neu-shadow-subtle));
3747
4387
  border-radius: 10px;
3748
4388
  cursor: pointer;
3749
4389
  transition: box-shadow var(--dur) var(--ease);
3750
- color: var(--fg);
4390
+ color: var(--lmn-color-picker-fg, var(--fg));
3751
4391
  font: inherit;
3752
4392
  }
3753
4393
  .cp-trigger:hover:not(:disabled) {
3754
- box-shadow: var(--neu-shadow-panel);
4394
+ box-shadow: var(--lmn-color-picker-neu-shadow-panel, var(--neu-shadow-panel));
3755
4395
  }
3756
4396
  .cp-trigger:disabled {
3757
4397
  opacity: 0.5;
@@ -3768,12 +4408,13 @@ input, textarea, select { font-family: inherit; color: inherit; }
3768
4408
  font: inherit;
3769
4409
  }
3770
4410
  .cp-custom-trigger:disabled { opacity: 0.5; cursor: not-allowed; }
4411
+ .cp-custom-trigger[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
3771
4412
  .cp-swatch {
3772
4413
  display: inline-block;
3773
4414
  width: 22px;
3774
4415
  height: 22px;
3775
4416
  border-radius: 6px;
3776
- box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), var(--neu-shadow-inset);
4417
+ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lmn-color-picker-fg, var(--fg)) 10%, transparent), var(--lmn-color-picker-neu-shadow-inset, var(--neu-shadow-inset));
3777
4418
  background-clip: padding-box;
3778
4419
  }
3779
4420
  .cp-trigger.sm .cp-swatch { width: 18px; height: 18px; border-radius: 5px; }
@@ -3786,7 +4427,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
3786
4427
  .cp-text {
3787
4428
  font-family: var(--font-mono);
3788
4429
  font-size: 12px;
3789
- color: var(--fg-muted);
4430
+ color: var(--lmn-color-picker-fg-muted, var(--fg-muted));
3790
4431
  padding-right: 6px;
3791
4432
  }
3792
4433
  /* ============================================================================
@@ -3797,9 +4438,9 @@ input, textarea, select { font-family: inherit; color: inherit; }
3797
4438
  z-index: 1000;
3798
4439
  width: 232px;
3799
4440
  padding: 12px;
3800
- background: var(--bg);
4441
+ background: var(--lmn-color-picker-bg, var(--bg));
3801
4442
  border-radius: var(--r-md);
3802
- box-shadow: var(--neu-shadow-float);
4443
+ box-shadow: var(--lmn-color-picker-neu-shadow-float, var(--neu-shadow-float));
3803
4444
  display: flex;
3804
4445
  flex-direction: column;
3805
4446
  gap: 10px;
@@ -3822,6 +4463,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
3822
4463
  cursor: crosshair;
3823
4464
  touch-action: none;
3824
4465
  user-select: none;
4466
+ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lmn-color-picker-fg, var(--fg)) 10%, transparent);
3825
4467
  }
3826
4468
  .cp-board-white,
3827
4469
  .cp-board-black {
@@ -3863,7 +4505,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
3863
4505
  hsl(300, 100%, 50%),
3864
4506
  hsl(360, 100%, 50%)
3865
4507
  );
3866
- box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
4508
+ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lmn-color-picker-fg, var(--fg)) 10%, transparent);
3867
4509
  cursor: pointer;
3868
4510
  touch-action: none;
3869
4511
  user-select: none;
@@ -3894,16 +4536,16 @@ input, textarea, select { font-family: inherit; color: inherit; }
3894
4536
  padding: 0 10px;
3895
4537
  border: none;
3896
4538
  outline: none;
3897
- background: var(--bg-sunken);
3898
- box-shadow: var(--neu-shadow-inset);
4539
+ background: var(--lmn-color-picker-bg-sunken, var(--bg-sunken));
4540
+ box-shadow: var(--lmn-color-picker-neu-shadow-inset, var(--neu-shadow-inset));
3899
4541
  border-radius: 7px;
3900
4542
  font-family: var(--font-mono);
3901
4543
  font-size: 12px;
3902
- color: var(--fg);
4544
+ color: var(--lmn-color-picker-fg, var(--fg));
3903
4545
  text-transform: lowercase;
3904
4546
  }
3905
4547
  .cp-input:focus {
3906
- box-shadow: var(--neu-shadow-inset), 0 0 0 2px var(--accent-soft);
4548
+ box-shadow: var(--lmn-color-picker-neu-shadow-inset, var(--neu-shadow-inset)), 0 0 0 2px var(--lmn-color-picker-accent-soft, var(--accent-soft));
3907
4549
  }
3908
4550
  .cp-presets {
3909
4551
  display: grid;
@@ -3917,30 +4559,14 @@ input, textarea, select { font-family: inherit; color: inherit; }
3917
4559
  border: none;
3918
4560
  padding: 0;
3919
4561
  cursor: pointer;
3920
- box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
4562
+ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lmn-color-picker-fg, var(--fg)) 10%, transparent);
3921
4563
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
3922
4564
  }
3923
4565
  .cp-preset:hover {
3924
4566
  transform: scale(1.1);
3925
4567
  }
3926
4568
  .cp-preset.active {
3927
- box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), 0 0 0 2px var(--accent);
3928
- }
3929
- /* Dark mode tweaks */
3930
- [data-theme="dark"] .cp-swatch {
3931
- box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), var(--neu-shadow-inset);
3932
- }
3933
- [data-theme="dark"] .cp-preset {
3934
- box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
3935
- }
3936
- [data-theme="dark"] .cp-preset.active {
3937
- box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 0 2px var(--accent);
3938
- }
3939
- [data-theme="dark"] .cp-board {
3940
- box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
3941
- }
3942
- [data-theme="dark"] .cp-hue {
3943
- box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
4569
+ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lmn-color-picker-fg, var(--fg)) 10%, transparent), 0 0 0 2px var(--lmn-color-picker-accent, var(--accent));
3944
4570
  }
3945
4571
  /* ============ TitleBar (Electron) ============ */
3946
4572
  .titlebar {
@@ -3949,15 +4575,16 @@ input, textarea, select { font-family: inherit; color: inherit; }
3949
4575
  gap: var(--gap-3);
3950
4576
  padding: 0 var(--gap-3);
3951
4577
  height: 40px;
3952
- background: var(--bg);
4578
+ background: var(--lmn-app-shell-bg, var(--bg));
3953
4579
  -webkit-app-region: drag;
3954
4580
  user-select: none;
3955
- border-bottom: 1px solid var(--divider);
4581
+ border-bottom: 1px solid var(--lmn-app-shell-divider, var(--divider));
3956
4582
  position: relative;
3957
4583
  z-index: 5;
3958
4584
  overflow: visible;
3959
4585
  }
3960
4586
  .titlebar.windows { padding-right: 0; }
4587
+ .titlebar.no-drag { -webkit-app-region: no-drag; }
3961
4588
  .titlebar-title {
3962
4589
  display: inline-flex;
3963
4590
  align-items: center;
@@ -3985,8 +4612,8 @@ input, textarea, select { font-family: inherit; color: inherit; }
3985
4612
  width: 13px; height: 13px;
3986
4613
  border: none; padding: 0;
3987
4614
  border-radius: 999px;
3988
- background: var(--bg);
3989
- box-shadow: var(--neu-shadow-subtle);
4615
+ background: var(--lmn-app-shell-bg, var(--bg));
4616
+ box-shadow: var(--lmn-app-shell-neu-shadow-subtle, var(--neu-shadow-subtle));
3990
4617
  position: relative;
3991
4618
  cursor: pointer;
3992
4619
  transition: transform var(--dur-fast) var(--ease);
@@ -3995,13 +4622,18 @@ input, textarea, select { font-family: inherit; color: inherit; }
3995
4622
  content: "";
3996
4623
  position: absolute; inset: 2px;
3997
4624
  border-radius: 999px;
3998
- background: var(--dot, var(--fg-subtle));
4625
+ background: var(--dot, var(--lmn-app-shell-fg-subtle, var(--fg-subtle)));
3999
4626
  opacity: 0.85;
4000
4627
  }
4001
4628
  .win-controls.mac .win-btn.close { --dot: #ff5f57; }
4002
4629
  .win-controls.mac .win-btn.minimize { --dot: #febc2e; }
4003
4630
  .win-controls.mac .win-btn.maximize { --dot: #28c840; }
4004
4631
  .win-controls.mac .win-btn:hover { transform: scale(1.08); }
4632
+ .win-controls .win-btn:disabled {
4633
+ opacity: 0.45;
4634
+ cursor: default;
4635
+ pointer-events: none;
4636
+ }
4005
4637
  /* Windows controls */
4006
4638
  .win-controls.windows {
4007
4639
  display: inline-flex;
@@ -4016,7 +4648,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
4016
4648
  padding: 0;
4017
4649
  border-radius: 8px;
4018
4650
  background: transparent;
4019
- color: var(--fg-muted);
4651
+ color: var(--lmn-app-shell-fg-muted, var(--fg-muted));
4020
4652
  display: inline-grid;
4021
4653
  place-items: center;
4022
4654
  cursor: pointer;
@@ -4026,11 +4658,11 @@ input, textarea, select { font-family: inherit; color: inherit; }
4026
4658
  overflow: visible;
4027
4659
  }
4028
4660
  .win-controls.windows .win-btn svg { display: block; flex-shrink: 0; }
4029
- .win-controls.windows .win-btn:hover { background: var(--bg); box-shadow: var(--neu-shadow-inset); color: var(--fg); }
4661
+ .win-controls.windows .win-btn:hover { background: var(--lmn-app-shell-bg, var(--bg)); box-shadow: var(--lmn-app-shell-neu-shadow-inset, var(--neu-shadow-inset)); color: var(--lmn-app-shell-fg, var(--fg)); }
4030
4662
  .win-controls.windows .win-btn.close:hover {
4031
- background: var(--danger);
4663
+ background: var(--lmn-app-shell-danger, var(--danger));
4032
4664
  color: white;
4033
- box-shadow: 2px 2px 4px color-mix(in oklch, var(--danger) 30%, var(--shadow-dark));
4665
+ box-shadow: 2px 2px 4px color-mix(in oklch, var(--lmn-app-shell-danger, var(--danger)) 30%, var(--lmn-app-shell-shadow-dark, var(--shadow-dark)));
4034
4666
  }
4035
4667
  /* ============ Sidebar ============ */
4036
4668
  .sidebar {
@@ -4038,23 +4670,24 @@ input, textarea, select { font-family: inherit; color: inherit; }
4038
4670
  flex-direction: column;
4039
4671
  width: 220px;
4040
4672
  padding: 12px;
4041
- background: var(--bg);
4042
- border-right: 1px solid var(--divider);
4673
+ background: var(--lmn-app-shell-bg, var(--bg));
4674
+ border-right: 1px solid var(--lmn-app-shell-divider, var(--divider));
4043
4675
  flex-shrink: 0;
4044
4676
  overflow-y: auto;
4045
4677
  gap: 4px;
4046
4678
  }
4047
4679
  .sidebar.collapsed { width: 64px; }
4048
- .sidebar-header { padding: 4px 8px 12px; border-bottom: 1px solid var(--divider); margin-bottom: 8px; }
4049
- .sidebar-footer { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--divider); }
4680
+ .sidebar-header { padding: 4px 8px 12px; border-bottom: 1px solid var(--lmn-app-shell-divider, var(--divider)); margin-bottom: 8px; }
4681
+ .sidebar-footer { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--lmn-app-shell-divider, var(--divider)); }
4050
4682
  .sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
4683
+ .sidebar-children { display: flex; flex-direction: column; gap: 2px; }
4051
4684
  .sidebar-item {
4052
4685
  display: flex; align-items: center; gap: 10px;
4053
- padding: 10px 12px;
4686
+ padding: 10px 12px 10px calc(12px + var(--sidebar-indent, 0px));
4054
4687
  border: none;
4055
4688
  border-radius: var(--r-sm);
4056
4689
  background: transparent;
4057
- color: var(--fg-muted);
4690
+ color: var(--lmn-app-shell-fg-muted, var(--fg-muted));
4058
4691
  font-size: 13px;
4059
4692
  font-family: inherit;
4060
4693
  text-align: left;
@@ -4062,11 +4695,11 @@ input, textarea, select { font-family: inherit; color: inherit; }
4062
4695
  width: 100%;
4063
4696
  transition: all var(--dur-fast) var(--ease);
4064
4697
  }
4065
- .sidebar-item:hover { color: var(--fg); background: var(--bg); box-shadow: var(--neu-shadow-subtle); }
4698
+ .sidebar-item:hover { color: var(--lmn-app-shell-fg, var(--fg)); background: var(--lmn-app-shell-bg, var(--bg)); box-shadow: var(--lmn-app-shell-neu-shadow-subtle, var(--neu-shadow-subtle)); }
4066
4699
  .sidebar-item.active {
4067
- color: var(--accent-ink);
4068
- background: var(--bg);
4069
- box-shadow: var(--neu-shadow-inset);
4700
+ color: var(--lmn-app-shell-accent-ink, var(--accent-ink));
4701
+ background: var(--lmn-app-shell-bg, var(--bg));
4702
+ box-shadow: var(--lmn-app-shell-neu-shadow-inset, var(--neu-shadow-inset));
4070
4703
  font-weight: 500;
4071
4704
  }
4072
4705
  .sidebar-icon { display: inline-flex; flex-shrink: 0; }
@@ -4075,18 +4708,29 @@ input, textarea, select { font-family: inherit; color: inherit; }
4075
4708
  font-size: 11px;
4076
4709
  padding: 1px 7px;
4077
4710
  border-radius: 999px;
4078
- background: var(--accent);
4711
+ background: var(--lmn-app-shell-accent, var(--accent));
4079
4712
  color: white;
4080
4713
  font-weight: 600;
4081
4714
  }
4715
+ .sidebar-expand {
4716
+ display: inline-flex;
4717
+ flex-shrink: 0;
4718
+ color: var(--lmn-app-shell-fg-subtle, var(--fg-subtle));
4719
+ transition: transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
4720
+ }
4721
+ .sidebar-expand.open {
4722
+ color: var(--lmn-app-shell-accent, var(--accent));
4723
+ transform: rotate(180deg);
4724
+ }
4082
4725
  /* ============ AppShell ============ */
4083
4726
  .app-shell {
4084
4727
  display: flex;
4085
4728
  flex-direction: column;
4086
4729
  width: 100%;
4087
4730
  height: 100vh;
4088
- background: var(--bg);
4089
- color: var(--fg);
4731
+ height: 100dvh;
4732
+ background: var(--lmn-app-shell-bg, var(--bg));
4733
+ color: var(--lmn-app-shell-fg, var(--fg));
4090
4734
  overflow: hidden;
4091
4735
  position: relative;
4092
4736
  }
@@ -4100,6 +4744,289 @@ input, textarea, select { font-family: inherit; color: inherit; }
4100
4744
  min-width: 0;
4101
4745
  overflow: auto;
4102
4746
  }
4747
+ @media (max-width: 720px) {
4748
+ .titlebar-center {
4749
+ position: static;
4750
+ flex: 1;
4751
+ min-width: 0;
4752
+ justify-content: center;
4753
+ overflow: hidden;
4754
+ transform: none;
4755
+ }
4756
+ .titlebar-title,
4757
+ .titlebar-center,
4758
+ .titlebar-actions {
4759
+ max-width: 34%;
4760
+ }
4761
+ .sidebar:not(.collapsed) { width: 180px; }
4762
+ }
4763
+ /* ============ Splitter ============ */
4764
+ .splitter {
4765
+ display: flex;
4766
+ width: 100%;
4767
+ height: 100%;
4768
+ min-width: 0;
4769
+ min-height: 0;
4770
+ }
4771
+ .splitter.horizontal { flex-direction: row; }
4772
+ .splitter.vertical { flex-direction: column; }
4773
+ .splitter.dragging { cursor: col-resize; user-select: none; }
4774
+ .splitter.dragging.vertical { cursor: row-resize; }
4775
+ .splitter-panel {
4776
+ min-width: 0;
4777
+ min-height: 0;
4778
+ overflow: auto;
4779
+ }
4780
+ .splitter-panel.first { flex-shrink: 0; }
4781
+ .splitter-panel.second { flex: 1; }
4782
+ .splitter-handle {
4783
+ flex-shrink: 0;
4784
+ position: relative;
4785
+ display: flex;
4786
+ align-items: center;
4787
+ justify-content: center;
4788
+ background: transparent;
4789
+ transition: background var(--dur-fast) var(--ease);
4790
+ outline: none;
4791
+ }
4792
+ .splitter.horizontal > .splitter-handle {
4793
+ width: 6px;
4794
+ cursor: col-resize;
4795
+ }
4796
+ .splitter.vertical > .splitter-handle {
4797
+ height: 6px;
4798
+ cursor: row-resize;
4799
+ }
4800
+ .splitter-handle:hover,
4801
+ .splitter.dragging > .splitter-handle {
4802
+ background: var(--lmn-splitter-accent-soft, var(--accent-soft));
4803
+ }
4804
+ .splitter-handle:focus-visible {
4805
+ box-shadow: inset 0 0 0 2px var(--lmn-splitter-accent-glow, var(--accent-glow));
4806
+ border-radius: var(--r-xs);
4807
+ }
4808
+ .splitter-handle-grip {
4809
+ display: block;
4810
+ background: var(--lmn-splitter-divider, var(--divider));
4811
+ border-radius: 999px;
4812
+ transition: background var(--dur-fast) var(--ease);
4813
+ }
4814
+ .splitter.horizontal > .splitter-handle > .splitter-handle-grip {
4815
+ width: 2px;
4816
+ height: 28px;
4817
+ }
4818
+ .splitter.vertical > .splitter-handle > .splitter-handle-grip {
4819
+ width: 28px;
4820
+ height: 2px;
4821
+ }
4822
+ .splitter-handle:hover > .splitter-handle-grip,
4823
+ .splitter.dragging > .splitter-handle > .splitter-handle-grip {
4824
+ background: var(--lmn-splitter-accent, var(--accent));
4825
+ }
4826
+ /* ============ StatusBar ============ */
4827
+ .statusbar {
4828
+ display: flex;
4829
+ align-items: center;
4830
+ position: relative;
4831
+ height: 26px;
4832
+ padding: 0 10px;
4833
+ background: var(--lmn-status-bar-bg, var(--bg));
4834
+ border-top: 1px solid var(--lmn-status-bar-divider, var(--divider));
4835
+ color: var(--lmn-status-bar-fg-muted, var(--fg-muted));
4836
+ font-size: 11.5px;
4837
+ user-select: none;
4838
+ flex-shrink: 0;
4839
+ gap: 8px;
4840
+ }
4841
+ .statusbar-section {
4842
+ display: inline-flex;
4843
+ align-items: center;
4844
+ gap: 2px;
4845
+ min-width: 0;
4846
+ }
4847
+ .statusbar-section.left { margin-right: auto; }
4848
+ .statusbar-section.right { margin-left: auto; }
4849
+ .statusbar-section.center {
4850
+ position: absolute;
4851
+ left: 50%;
4852
+ transform: translateX(-50%);
4853
+ }
4854
+ .statusbar-item {
4855
+ display: inline-flex;
4856
+ align-items: center;
4857
+ gap: 5px;
4858
+ height: 20px;
4859
+ padding: 0 8px;
4860
+ border: none;
4861
+ background: transparent;
4862
+ color: inherit;
4863
+ font: inherit;
4864
+ border-radius: var(--r-xs);
4865
+ transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
4866
+ white-space: nowrap;
4867
+ }
4868
+ .statusbar-item.clickable { cursor: pointer; }
4869
+ .statusbar-item.clickable:hover { background: var(--lmn-status-bar-bg-sunken, var(--bg-sunken)); color: var(--lmn-status-bar-fg, var(--fg)); }
4870
+ .statusbar-item.tone-muted { color: var(--lmn-status-bar-fg-subtle, var(--fg-subtle)); }
4871
+ .statusbar-item.tone-accent { color: var(--lmn-status-bar-accent-ink, var(--accent-ink)); }
4872
+ .statusbar-item.tone-success { color: var(--lmn-status-bar-success, var(--success)); }
4873
+ .statusbar-item.tone-warning { color: var(--lmn-status-bar-warning, var(--warning)); }
4874
+ .statusbar-item.tone-danger { color: var(--lmn-status-bar-danger, var(--danger)); }
4875
+ .statusbar-item-icon { display: inline-flex; flex-shrink: 0; }
4876
+ .statusbar-item-label { overflow: hidden; text-overflow: ellipsis; }
4877
+ @media (max-width: 640px) {
4878
+ .statusbar-section.center {
4879
+ position: static;
4880
+ min-width: 0;
4881
+ margin-inline: auto;
4882
+ transform: none;
4883
+ }
4884
+ .statusbar-section.left,
4885
+ .statusbar-section.right {
4886
+ max-width: 38%;
4887
+ overflow: hidden;
4888
+ }
4889
+ }
4890
+ .timeline {
4891
+ display: flex;
4892
+ flex-direction: column;
4893
+ font-size: 14px;
4894
+ color: var(--lmn-timeline-fg, var(--fg));
4895
+ }
4896
+ /* ---- Item layout ---- */
4897
+ .timeline-item {
4898
+ display: grid;
4899
+ grid-template-columns: 1fr auto 1fr;
4900
+ gap: 0 var(--gap-3);
4901
+ min-height: 60px;
4902
+ min-width: 0;
4903
+ position: relative;
4904
+ }
4905
+ /* Left mode: label hidden, content on right */
4906
+ .timeline-left .timeline-item-label {
4907
+ display: none;
4908
+ }
4909
+ .timeline-left .timeline-item {
4910
+ grid-template-columns: auto 1fr;
4911
+ }
4912
+ /* Right mode: content on left, label hidden */
4913
+ .timeline-right .timeline-item-label {
4914
+ display: none;
4915
+ }
4916
+ .timeline-right .timeline-item {
4917
+ grid-template-columns: 1fr auto;
4918
+ direction: rtl;
4919
+ }
4920
+ .timeline-right .timeline-item-content,
4921
+ .timeline-right .timeline-item-head {
4922
+ direction: ltr;
4923
+ }
4924
+ /* Alternate mode */
4925
+ .timeline-alternate .timeline-item-left .timeline-item-label {
4926
+ text-align: right;
4927
+ color: var(--lmn-timeline-fg-muted, var(--fg-muted));
4928
+ }
4929
+ .timeline-alternate .timeline-item-left .timeline-item-content {
4930
+ text-align: left;
4931
+ }
4932
+ .timeline-alternate .timeline-item-right .timeline-item-label {
4933
+ text-align: left;
4934
+ }
4935
+ .timeline-alternate .timeline-item-right .timeline-item-content {
4936
+ text-align: right;
4937
+ color: var(--lmn-timeline-fg-muted, var(--fg-muted));
4938
+ }
4939
+ .timeline-alternate .timeline-item-right {
4940
+ direction: rtl;
4941
+ }
4942
+ .timeline-alternate .timeline-item-right .timeline-item-head,
4943
+ .timeline-alternate .timeline-item-right .timeline-item-content,
4944
+ .timeline-alternate .timeline-item-right .timeline-item-label {
4945
+ direction: ltr;
4946
+ }
4947
+ /* ---- Head (dot + tail) ---- */
4948
+ .timeline-item-head {
4949
+ display: flex;
4950
+ flex-direction: column;
4951
+ align-items: center;
4952
+ position: relative;
4953
+ }
4954
+ .timeline-item-dot {
4955
+ width: 12px;
4956
+ height: 12px;
4957
+ border-radius: var(--r-pill);
4958
+ box-shadow: var(--lmn-timeline-neu-shadow-control, var(--neu-shadow-control));
4959
+ flex-shrink: 0;
4960
+ display: flex;
4961
+ align-items: center;
4962
+ justify-content: center;
4963
+ position: relative;
4964
+ z-index: 1;
4965
+ margin-top: var(--timeline-dot-offset, 4px);
4966
+ }
4967
+ .timeline-item-dot.accent { background: var(--lmn-timeline-accent, var(--accent)); }
4968
+ .timeline-item-dot.success { background: var(--lmn-timeline-success, var(--success)); }
4969
+ .timeline-item-dot.warning { background: var(--lmn-timeline-warning, var(--warning)); }
4970
+ .timeline-item-dot.danger { background: var(--lmn-timeline-danger, var(--danger)); }
4971
+ .timeline-item-dot.info { background: var(--lmn-timeline-info, var(--info)); }
4972
+ .timeline-item-dot.muted { background: var(--lmn-timeline-fg-subtle, var(--fg-subtle)); }
4973
+ /* Pending dot: clear default fill, Spin handles its own visuals */
4974
+ .timeline-item-dot.pending {
4975
+ background: transparent;
4976
+ box-shadow: none;
4977
+ border: none;
4978
+ }
4979
+ .timeline-item-tail {
4980
+ width: 2px;
4981
+ flex: 1;
4982
+ background: var(--lmn-timeline-divider, var(--divider));
4983
+ margin-top: var(--gap-1);
4984
+ margin-bottom: 0;
4985
+ border-radius: 1px;
4986
+ }
4987
+ /* ---- Content ---- */
4988
+ .timeline-item-content {
4989
+ padding-bottom: var(--gap-5);
4990
+ line-height: 1.6;
4991
+ min-width: var(--timeline-content-min-width, 0);
4992
+ }
4993
+ .timeline-item-last .timeline-item-content {
4994
+ padding-bottom: 0;
4995
+ }
4996
+ .timeline-item-label {
4997
+ padding-bottom: var(--gap-5);
4998
+ line-height: 1.6;
4999
+ color: var(--lmn-timeline-fg-muted, var(--fg-muted));
5000
+ font-size: 13px;
5001
+ min-width: 0;
5002
+ }
5003
+ /* ---- Pending animation ---- */
5004
+ .timeline-item-pending .timeline-item-content {
5005
+ color: var(--lmn-timeline-fg-muted, var(--fg-muted));
5006
+ }
5007
+ /* When dot has custom content (Spin / Icon), expand to fit */
5008
+ .timeline-item-dot:has(> *) {
5009
+ width: auto;
5010
+ height: auto;
5011
+ background: transparent !important;
5012
+ box-shadow: none;
5013
+ border-radius: 0;
5014
+ border: none;
5015
+ }
5016
+ @media (max-width: 640px) {
5017
+ .timeline-alternate .timeline-item {
5018
+ grid-template-columns: auto minmax(0, 1fr);
5019
+ direction: ltr;
5020
+ }
5021
+ .timeline-alternate .timeline-item-label {
5022
+ display: none;
5023
+ }
5024
+ .timeline-alternate .timeline-item-head,
5025
+ .timeline-alternate .timeline-item-content {
5026
+ direction: ltr;
5027
+ text-align: left;
5028
+ }
5029
+ }
4103
5030
  /* ============ ThemePanel ============ */
4104
5031
  .theme-panel {
4105
5032
  width: min(100%, 340px);
@@ -4109,9 +5036,9 @@ input, textarea, select { font-family: inherit; color: inherit; }
4109
5036
  box-sizing: border-box;
4110
5037
  padding: var(--gap-4);
4111
5038
  border-radius: var(--r-xl);
4112
- color: var(--fg);
4113
- background: var(--bg);
4114
- box-shadow: var(--neu-shadow-lift);
5039
+ color: var(--lmn-theme-panel-fg, var(--fg));
5040
+ background: var(--lmn-theme-panel-bg, var(--bg));
5041
+ box-shadow: var(--lmn-theme-panel-neu-shadow-lift, var(--neu-shadow-lift));
4115
5042
  }
4116
5043
  .theme-panel.compact {
4117
5044
  width: min(100%, 300px);
@@ -4128,13 +5055,13 @@ input, textarea, select { font-family: inherit; color: inherit; }
4128
5055
  align-items: center;
4129
5056
  gap: 8px;
4130
5057
  min-width: 0;
4131
- color: var(--fg);
5058
+ color: var(--lmn-theme-panel-fg, var(--fg));
4132
5059
  font-size: 14px;
4133
5060
  font-weight: 700;
4134
5061
  }
4135
5062
  .theme-panel-title svg {
4136
5063
  flex: 0 0 auto;
4137
- color: var(--accent);
5064
+ color: var(--lmn-theme-panel-accent, var(--accent));
4138
5065
  }
4139
5066
  .theme-panel-title span {
4140
5067
  min-width: 0;
@@ -4144,14 +5071,14 @@ input, textarea, select { font-family: inherit; color: inherit; }
4144
5071
  }
4145
5072
  .theme-panel-desc {
4146
5073
  font-size: 12px;
4147
- color: var(--fg-muted);
5074
+ color: var(--lmn-theme-panel-fg-muted, var(--fg-muted));
4148
5075
  }
4149
5076
  .theme-panel-row {
4150
5077
  display: flex;
4151
5078
  flex-direction: column;
4152
5079
  gap: 8px;
4153
5080
  padding-top: var(--gap-3);
4154
- border-top: 1px solid var(--divider);
5081
+ border-top: 1px solid var(--lmn-theme-panel-divider, var(--divider));
4155
5082
  }
4156
5083
  .theme-panel-head + .theme-panel-row,
4157
5084
  .theme-panel-row:first-child {
@@ -4165,7 +5092,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
4165
5092
  gap: 10px;
4166
5093
  font-size: 12px;
4167
5094
  font-weight: 600;
4168
- color: var(--fg);
5095
+ color: var(--lmn-theme-panel-fg, var(--fg));
4169
5096
  }
4170
5097
  .theme-panel-label > span:last-child:not(:first-child) {
4171
5098
  min-width: 0;
@@ -4175,9 +5102,9 @@ input, textarea, select { font-family: inherit; color: inherit; }
4175
5102
  white-space: nowrap;
4176
5103
  padding: 2px 8px;
4177
5104
  border-radius: var(--r-pill);
4178
- color: var(--accent-ink);
4179
- background: var(--bg);
4180
- box-shadow: var(--neu-shadow-inset);
5105
+ color: var(--lmn-theme-panel-accent-ink, var(--accent-ink));
5106
+ background: var(--lmn-theme-panel-bg, var(--bg));
5107
+ box-shadow: var(--lmn-theme-panel-neu-shadow-inset, var(--neu-shadow-inset));
4181
5108
  font-family: var(--font-mono);
4182
5109
  font-size: 11px;
4183
5110
  font-weight: 500;
@@ -4201,9 +5128,9 @@ input, textarea, select { font-family: inherit; color: inherit; }
4201
5128
  flex-direction: column;
4202
5129
  gap: 8px;
4203
5130
  padding: 9px;
4204
- color: var(--fg-muted);
4205
- background: var(--bg);
4206
- box-shadow: var(--neu-shadow-control);
5131
+ color: var(--lmn-theme-panel-fg-muted, var(--fg-muted));
5132
+ background: var(--lmn-theme-panel-bg, var(--bg));
5133
+ box-shadow: var(--lmn-theme-panel-neu-shadow-control, var(--neu-shadow-control));
4207
5134
  text-align: left;
4208
5135
  white-space: normal;
4209
5136
  transition:
@@ -4212,18 +5139,18 @@ input, textarea, select { font-family: inherit; color: inherit; }
4212
5139
  transform var(--dur-fast) var(--ease);
4213
5140
  }
4214
5141
  .theme-panel .theme-panel-preset.btn:hover {
4215
- color: var(--fg);
4216
- box-shadow: var(--neu-shadow-panel);
5142
+ color: var(--lmn-theme-panel-fg, var(--fg));
5143
+ box-shadow: var(--lmn-theme-panel-neu-shadow-panel, var(--neu-shadow-panel));
4217
5144
  transform: translateY(-1px);
4218
5145
  }
4219
5146
  .theme-panel .theme-panel-preset.btn.active {
4220
- color: var(--accent-ink);
4221
- box-shadow: var(--neu-shadow-inset), 0 0 0 1px var(--accent-glow);
5147
+ color: var(--lmn-theme-panel-accent-ink, var(--accent-ink));
5148
+ box-shadow: var(--lmn-theme-panel-neu-shadow-inset, var(--neu-shadow-inset)), 0 0 0 1px var(--lmn-theme-panel-accent-glow, var(--accent-glow));
4222
5149
  transform: none;
4223
5150
  }
4224
5151
  .theme-panel .theme-panel-preset.btn.active:hover {
4225
- color: var(--accent-ink);
4226
- box-shadow: var(--neu-shadow-inset), 0 0 0 1px var(--accent-glow);
5152
+ color: var(--lmn-theme-panel-accent-ink, var(--accent-ink));
5153
+ box-shadow: var(--lmn-theme-panel-neu-shadow-inset, var(--neu-shadow-inset)), 0 0 0 1px var(--lmn-theme-panel-accent-glow, var(--accent-glow));
4227
5154
  }
4228
5155
  .theme-panel .theme-panel-preset-shell.deletable .theme-panel-preset.btn {
4229
5156
  padding-right: 28px;
@@ -4236,9 +5163,9 @@ input, textarea, select { font-family: inherit; color: inherit; }
4236
5163
  height: 22px;
4237
5164
  min-width: 22px;
4238
5165
  padding: 0;
4239
- color: var(--fg-subtle);
4240
- background: var(--bg);
4241
- box-shadow: var(--neu-shadow-control);
5166
+ color: var(--lmn-theme-panel-fg-subtle, var(--fg-subtle));
5167
+ background: var(--lmn-theme-panel-bg, var(--bg));
5168
+ box-shadow: var(--lmn-theme-panel-neu-shadow-control, var(--neu-shadow-control));
4242
5169
  opacity: 0;
4243
5170
  transform: scale(0.92);
4244
5171
  }
@@ -4248,7 +5175,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
4248
5175
  transform: scale(1);
4249
5176
  }
4250
5177
  .theme-panel .theme-panel-preset-delete.btn:hover {
4251
- box-shadow: var(--neu-shadow-inset);
5178
+ box-shadow: var(--lmn-theme-panel-neu-shadow-inset, var(--neu-shadow-inset));
4252
5179
  }
4253
5180
  .theme-panel-preset-ink {
4254
5181
  display: grid;
@@ -4260,7 +5187,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
4260
5187
  height: 18px;
4261
5188
  min-width: 0;
4262
5189
  border-radius: var(--r-pill);
4263
- box-shadow: inset 0 0 0 1px var(--divider);
5190
+ box-shadow: inset 0 0 0 1px var(--lmn-theme-panel-divider, var(--divider));
4264
5191
  }
4265
5192
  .theme-panel-preset-copy {
4266
5193
  display: flex;
@@ -4283,7 +5210,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
4283
5210
  overflow: hidden;
4284
5211
  text-overflow: ellipsis;
4285
5212
  white-space: nowrap;
4286
- color: var(--fg-subtle);
5213
+ color: var(--lmn-theme-panel-fg-subtle, var(--fg-subtle));
4287
5214
  font-size: 10px;
4288
5215
  font-weight: 500;
4289
5216
  }
@@ -4299,10 +5226,10 @@ input, textarea, select { font-family: inherit; color: inherit; }
4299
5226
  min-width: 28px;
4300
5227
  padding: 0;
4301
5228
  border-radius: var(--r-pill);
4302
- box-shadow: var(--neu-shadow-subtle);
5229
+ box-shadow: var(--lmn-theme-panel-neu-shadow-subtle, var(--neu-shadow-subtle));
4303
5230
  }
4304
5231
  .theme-panel-swatch.active {
4305
- box-shadow: var(--neu-shadow-inset), 0 0 0 2px var(--accent-glow);
5232
+ box-shadow: var(--lmn-theme-panel-neu-shadow-inset, var(--neu-shadow-inset)), 0 0 0 2px var(--lmn-theme-panel-accent-glow, var(--accent-glow));
4306
5233
  }
4307
5234
  .theme-panel .radio-group.segmented {
4308
5235
  width: 100%;
@@ -4316,8 +5243,8 @@ input, textarea, select { font-family: inherit; color: inherit; }
4316
5243
  gap: 10px;
4317
5244
  padding: 10px;
4318
5245
  border-radius: var(--r-md);
4319
- background: var(--bg);
4320
- box-shadow: var(--neu-shadow-inset);
5246
+ background: var(--lmn-theme-panel-bg, var(--bg));
5247
+ box-shadow: var(--lmn-theme-panel-neu-shadow-inset, var(--neu-shadow-inset));
4321
5248
  }
4322
5249
  .theme-panel-create-head {
4323
5250
  display: flex;
@@ -4332,13 +5259,13 @@ input, textarea, select { font-family: inherit; color: inherit; }
4332
5259
  gap: 2px;
4333
5260
  }
4334
5261
  .theme-panel-create-head span {
4335
- color: var(--fg);
5262
+ color: var(--lmn-theme-panel-fg, var(--fg));
4336
5263
  font-size: 12px;
4337
5264
  font-weight: 700;
4338
5265
  }
4339
5266
  .theme-panel-create-head small {
4340
5267
  min-width: 0;
4341
- color: var(--fg-subtle);
5268
+ color: var(--lmn-theme-panel-fg-subtle, var(--fg-subtle));
4342
5269
  font-family: var(--font-mono);
4343
5270
  font-size: 10px;
4344
5271
  overflow: hidden;
@@ -4350,7 +5277,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
4350
5277
  display: flex;
4351
5278
  flex-direction: column;
4352
5279
  gap: 6px;
4353
- color: var(--fg-subtle);
5280
+ color: var(--lmn-theme-panel-fg-subtle, var(--fg-subtle));
4354
5281
  font-family: var(--font-mono);
4355
5282
  font-size: 10px;
4356
5283
  }
@@ -4390,15 +5317,15 @@ input, textarea, select { font-family: inherit; color: inherit; }
4390
5317
  gap: 10px;
4391
5318
  padding: 10px;
4392
5319
  border-radius: var(--r-md);
4393
- background: var(--bg);
4394
- box-shadow: var(--neu-shadow-inset);
5320
+ background: var(--lmn-theme-panel-bg, var(--bg));
5321
+ box-shadow: var(--lmn-theme-panel-neu-shadow-inset, var(--neu-shadow-inset));
4395
5322
  }
4396
5323
  .theme-panel-advanced-actions {
4397
5324
  display: flex;
4398
5325
  flex-direction: column;
4399
5326
  gap: 8px;
4400
5327
  padding-top: 10px;
4401
- border-top: 1px solid var(--divider);
5328
+ border-top: 1px solid var(--lmn-theme-panel-divider, var(--divider));
4402
5329
  }
4403
5330
  .theme-panel-save-as-field {
4404
5331
  display: grid;
@@ -4407,7 +5334,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
4407
5334
  align-items: center;
4408
5335
  }
4409
5336
  .theme-panel-save-as-field > span {
4410
- color: var(--fg-muted);
5337
+ color: var(--lmn-theme-panel-fg-muted, var(--fg-muted));
4411
5338
  font-size: 11px;
4412
5339
  font-weight: 800;
4413
5340
  white-space: nowrap;
@@ -4420,7 +5347,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
4420
5347
  }
4421
5348
  .theme-panel-advanced-footer > span {
4422
5349
  min-width: 0;
4423
- color: var(--fg-subtle);
5350
+ color: var(--lmn-theme-panel-fg-subtle, var(--fg-subtle));
4424
5351
  font-family: var(--font-mono);
4425
5352
  font-size: 10px;
4426
5353
  overflow: hidden;
@@ -4444,11 +5371,11 @@ input, textarea, select { font-family: inherit; color: inherit; }
4444
5371
  gap: 10px;
4445
5372
  padding: 7px 9px;
4446
5373
  border-radius: var(--preview-radius, var(--r-md));
4447
- color: var(--preview-fg, var(--fg));
4448
- background: var(--preview-bg, var(--bg));
5374
+ color: var(--preview-fg, var(--lmn-theme-panel-fg, var(--fg)));
5375
+ background: var(--preview-bg, var(--lmn-theme-panel-bg, var(--bg)));
4449
5376
  box-shadow:
4450
- calc(var(--shadow-offset) * 0.45 * var(--preview-shadow-scale, 1)) calc(var(--shadow-offset) * 0.45 * var(--preview-shadow-scale, 1)) calc(var(--shadow-blur) * 0.55 * var(--preview-shadow-scale, 1)) var(--preview-shadow-dark, var(--shadow-dark)),
4451
- calc(var(--shadow-offset) * -0.45 * var(--preview-shadow-scale, 1)) calc(var(--shadow-offset) * -0.45 * var(--preview-shadow-scale, 1)) calc(var(--shadow-blur) * 0.55 * var(--preview-shadow-scale, 1)) var(--preview-shadow-light, var(--shadow-light));
5377
+ calc(var(--lmn-theme-panel-shadow-offset, var(--shadow-offset)) * 0.45 * var(--preview-shadow-scale, 1)) calc(var(--lmn-theme-panel-shadow-offset, var(--shadow-offset)) * 0.45 * var(--preview-shadow-scale, 1)) calc(var(--lmn-theme-panel-shadow-blur, var(--shadow-blur)) * 0.55 * var(--preview-shadow-scale, 1)) var(--preview-shadow-dark, var(--lmn-theme-panel-shadow-dark, var(--shadow-dark))),
5378
+ calc(var(--lmn-theme-panel-shadow-offset, var(--shadow-offset)) * -0.45 * var(--preview-shadow-scale, 1)) calc(var(--lmn-theme-panel-shadow-offset, var(--shadow-offset)) * -0.45 * var(--preview-shadow-scale, 1)) calc(var(--lmn-theme-panel-shadow-blur, var(--shadow-blur)) * 0.55 * var(--preview-shadow-scale, 1)) var(--preview-shadow-light, var(--lmn-theme-panel-shadow-light, var(--shadow-light)));
4452
5379
  font-family: var(--preview-font, var(--font-sans));
4453
5380
  font-size: 12px;
4454
5381
  font-weight: 700;
@@ -4471,10 +5398,10 @@ input, textarea, select { font-family: inherit; color: inherit; }
4471
5398
  width: 20px;
4472
5399
  height: 20px;
4473
5400
  border-radius: var(--r-pill);
4474
- background: var(--preview-accent, var(--accent));
5401
+ background: var(--preview-accent, var(--lmn-theme-panel-accent, var(--accent)));
4475
5402
  box-shadow:
4476
- inset 1px 1px 2px color-mix(in oklch, var(--preview-accent, var(--accent)) 50%, white),
4477
- 0 0 0 4px var(--preview-accent-glow, var(--accent-glow));
5403
+ inset 1px 1px 2px color-mix(in oklch, var(--preview-accent, var(--lmn-theme-panel-accent, var(--accent))) 50%, white),
5404
+ 0 0 0 4px var(--preview-accent-glow, var(--lmn-theme-panel-accent-glow, var(--accent-glow)));
4478
5405
  }
4479
5406
  .theme-panel-create-actions {
4480
5407
  display: grid;
@@ -4492,7 +5419,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
4492
5419
  flex-direction: column;
4493
5420
  gap: 8px;
4494
5421
  padding-top: 10px;
4495
- border-top: 1px solid var(--divider);
5422
+ border-top: 1px solid var(--lmn-theme-panel-divider, var(--divider));
4496
5423
  }
4497
5424
  .theme-panel-advanced-section.compact {
4498
5425
  padding-top: 0;
@@ -4506,13 +5433,13 @@ input, textarea, select { font-family: inherit; color: inherit; }
4506
5433
  }
4507
5434
  .theme-panel-advanced-title span {
4508
5435
  min-width: 0;
4509
- color: var(--fg);
5436
+ color: var(--lmn-theme-panel-fg, var(--fg));
4510
5437
  font-size: 11px;
4511
5438
  font-weight: 700;
4512
5439
  }
4513
5440
  .theme-panel-advanced-title small {
4514
5441
  min-width: 0;
4515
- color: var(--fg-subtle);
5442
+ color: var(--lmn-theme-panel-fg-subtle, var(--fg-subtle));
4516
5443
  font-family: var(--font-mono);
4517
5444
  font-size: 9px;
4518
5445
  overflow: hidden;
@@ -4538,13 +5465,13 @@ input, textarea, select { font-family: inherit; color: inherit; }
4538
5465
  gap: 2px;
4539
5466
  }
4540
5467
  .theme-panel-token-label span {
4541
- color: var(--fg-muted);
5468
+ color: var(--lmn-theme-panel-fg-muted, var(--fg-muted));
4542
5469
  font-size: 10px;
4543
5470
  font-weight: 650;
4544
5471
  white-space: nowrap;
4545
5472
  }
4546
5473
  .theme-panel-token-label code {
4547
- color: var(--fg-subtle);
5474
+ color: var(--lmn-theme-panel-fg-subtle, var(--fg-subtle));
4548
5475
  font-family: var(--font-mono);
4549
5476
  font-size: 9px;
4550
5477
  overflow: hidden;
@@ -4583,13 +5510,13 @@ input, textarea, select { font-family: inherit; color: inherit; }
4583
5510
  width: 24px;
4584
5511
  height: 24px;
4585
5512
  border-radius: 7px;
4586
- box-shadow: var(--neu-shadow-inset), inset 0 0 0 1px var(--border);
5513
+ box-shadow: var(--lmn-theme-panel-neu-shadow-inset, var(--neu-shadow-inset)), inset 0 0 0 1px var(--lmn-theme-panel-border, var(--border));
4587
5514
  transition:
4588
5515
  box-shadow var(--dur-fast) var(--ease),
4589
5516
  transform var(--dur-fast) var(--ease);
4590
5517
  }
4591
5518
  .theme-panel-token-picker .cp-custom-trigger:hover .theme-panel-token-swatch {
4592
- box-shadow: var(--neu-shadow-control), inset 0 0 0 1px var(--border);
5519
+ box-shadow: var(--lmn-theme-panel-neu-shadow-control, var(--neu-shadow-control)), inset 0 0 0 1px var(--lmn-theme-panel-border, var(--border));
4593
5520
  transform: translateY(-1px);
4594
5521
  }
4595
5522
  .theme-panel-token-input .input-wrap,