@fangxinyan/lumina 0.6.18 → 0.8.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 (466) 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 +28 -3
  159. package/dist/Select.d.ts +28 -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 +18 -12
  179. package/dist/Splitter.d.ts +18 -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-KB6EEBDJ.css} +105 -53
  197. package/dist/Table.cjs +14 -10
  198. package/dist/Table.d.cts +38 -3
  199. package/dist/Table.d.ts +38 -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-FB2AMBWL.css} +24 -10
  207. package/dist/Tabs.cjs +4 -2
  208. package/dist/Tabs.d.cts +8 -2
  209. package/dist/Tabs.d.ts +8 -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-X5MYHDEQ.cjs → chunk-3EMWDDWK.cjs} +372 -117
  258. package/dist/chunk-3F424R5P.js +143 -0
  259. package/dist/chunk-3IZZBM56.js +269 -0
  260. package/dist/{chunk-DUFRASGO.js → chunk-3QXP2ZNP.js} +18 -23
  261. package/dist/{chunk-5QEI7GGA.cjs → chunk-434Y2JVW.cjs} +60 -27
  262. package/dist/{chunk-SOCYOUGM.js → chunk-4SKHRPDH.js} +168 -64
  263. package/dist/{chunk-R3DTXVP2.js → chunk-5AXNUX3J.js} +8 -5
  264. package/dist/chunk-5CZA33BK.cjs +229 -0
  265. package/dist/{chunk-6K5YI4ZE.js → chunk-62VV5COT.js} +16 -6
  266. package/dist/{chunk-2FOC3D6X.js → chunk-63RSKQID.js} +23 -7
  267. package/dist/chunk-6DKPJ5LV.cjs +294 -0
  268. package/dist/{chunk-OTSDPQPV.js → chunk-6RQJXSWN.js} +50 -30
  269. package/dist/{chunk-V5KUC5VH.cjs → chunk-77HU7JWK.cjs} +40 -13
  270. package/dist/chunk-7QAVPVMW.js +180 -0
  271. package/dist/chunk-7VLAHOA7.cjs +191 -0
  272. package/dist/chunk-ALAG4ZUH.js +72 -0
  273. package/dist/chunk-ARUN2DMD.js +39 -0
  274. package/dist/chunk-AUO2YYHB.js +248 -0
  275. package/dist/{chunk-6MEOLYNQ.js → chunk-AURYNA6G.js} +6 -5
  276. package/dist/chunk-BIPOXOHP.cjs +287 -0
  277. package/dist/{chunk-BVQOJKRX.js → chunk-BKW5PXEO.js} +115 -72
  278. package/dist/chunk-DRDDQCDD.js +322 -0
  279. package/dist/chunk-DU2DSERH.js +190 -0
  280. package/dist/chunk-DURKCGEM.js +496 -0
  281. package/dist/{chunk-PSQ3HNZP.cjs → chunk-E66PSVBU.cjs} +106 -19
  282. package/dist/chunk-EAUB6FEN.js +262 -0
  283. package/dist/chunk-EE5KXDRK.cjs +1223 -0
  284. package/dist/chunk-EE7IJ3MB.js +1 -0
  285. package/dist/chunk-EUTK2ZRJ.cjs +61 -0
  286. package/dist/{chunk-HSAJUEO7.cjs → chunk-F7WUCOBP.cjs} +150 -86
  287. package/dist/{chunk-YB3IWIOJ.cjs → chunk-FJB3243S.cjs} +18 -23
  288. package/dist/chunk-FKCPSVC4.cjs +188 -0
  289. package/dist/chunk-FMUHLIHB.cjs +94 -0
  290. package/dist/chunk-FY73C7JK.js +520 -0
  291. package/dist/{chunk-6EOSMK34.cjs → chunk-G5LCOBOT.cjs} +20 -1
  292. package/dist/{chunk-5ERD3W24.cjs → chunk-GFKWSDD6.cjs} +18 -8
  293. package/dist/{chunk-T2O4DTDE.cjs → chunk-GTFP7HA3.cjs} +58 -32
  294. package/dist/chunk-HQFKXTX6.js +60 -0
  295. package/dist/{chunk-V5SQOZPF.js → chunk-HQNDVNTQ.js} +38 -20
  296. package/dist/chunk-HSDMJUB6.cjs +319 -0
  297. package/dist/chunk-HVPUGYBY.js +166 -0
  298. package/dist/chunk-HYHBCHFM.cjs +167 -0
  299. package/dist/chunk-HYJSMFZA.cjs +2 -0
  300. package/dist/chunk-I4YPBAQ5.js +163 -0
  301. package/dist/chunk-IJDM2U3B.js +100 -0
  302. package/dist/chunk-J5UEQ3ZQ.js +226 -0
  303. package/dist/chunk-JBS353O4.cjs +248 -0
  304. package/dist/{chunk-IPSNC5VZ.js → chunk-JHM7MN3G.js} +15 -7
  305. package/dist/{chunk-6Q76VLCE.cjs → chunk-JKUXA3U6.cjs} +50 -30
  306. package/dist/{chunk-D7GK6H6V.js → chunk-K5HGHOG7.js} +50 -21
  307. package/dist/chunk-KATJAJUU.js +78 -0
  308. package/dist/chunk-KCDOC3HS.cjs +100 -0
  309. package/dist/{chunk-M4NJTJKV.cjs → chunk-LDX6Q6RK.cjs} +8 -5
  310. package/dist/chunk-LEDESWNL.js +83 -0
  311. package/dist/chunk-LG62MPMU.cjs +213 -0
  312. package/dist/{chunk-7NTTRKNT.js → chunk-LJVQQEME.js} +54 -28
  313. package/dist/{chunk-FDZG27IG.js → chunk-LQMOYVQF.js} +57 -32
  314. package/dist/{chunk-P2OQTJZP.cjs → chunk-MCDW3VKZ.cjs} +17 -6
  315. package/dist/{chunk-BT2RXFT4.cjs → chunk-MUZQWIMR.cjs} +121 -78
  316. package/dist/chunk-NRJXZPZR.cjs +351 -0
  317. package/dist/chunk-O6G3F5L4.js +311 -0
  318. package/dist/{chunk-3VSHGM54.js → chunk-OLYSSZHP.js} +126 -68
  319. package/dist/{chunk-A4Z7PLHV.cjs → chunk-PIJV2FHO.cjs} +135 -77
  320. package/dist/{chunk-L6GIV5DQ.cjs → chunk-PJFYIXBX.cjs} +40 -22
  321. package/dist/{chunk-NXBFEIUX.cjs → chunk-PNKNZREC.cjs} +266 -130
  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-BW76ENTW.cjs → chunk-RERMZNF3.cjs} +10 -9
  331. package/dist/chunk-RMGFRAZ2.cjs +270 -0
  332. package/dist/chunk-RPO7657K.js +228 -0
  333. package/dist/chunk-RR7KWH26.cjs +122 -0
  334. package/dist/chunk-SF7BPXDJ.cjs +518 -0
  335. package/dist/chunk-STQDKMS5.cjs +288 -0
  336. package/dist/{chunk-HG6YS4I7.js → chunk-SXLRWYQQ.js} +71 -24
  337. package/dist/{chunk-SW2HMNCA.cjs → chunk-T4RR6NVU.cjs} +17 -9
  338. package/dist/{chunk-6SPMHY54.js → chunk-TSL3F2K3.js} +20 -2
  339. package/dist/{chunk-BNY2NVTL.cjs → chunk-TYZ6L7E6.cjs} +48 -28
  340. package/dist/{chunk-MOZ52KN6.js → chunk-U3SG2YT2.js} +39 -12
  341. package/dist/{chunk-POU3W5J3.cjs → chunk-U5YYOOLC.cjs} +13 -6
  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-4ACCOYBY.cjs → chunk-WHBKQZU5.cjs} +24 -8
  350. package/dist/{chunk-UGAN4BBW.js → chunk-WMISXERU.js} +262 -126
  351. package/dist/{chunk-MYW7LNB2.cjs → chunk-WROF2PVG.cjs} +40 -21
  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 +1663 -695
  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 +27 -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 +48 -2
  397. package/docs/llms/sidebar.md +24 -0
  398. package/docs/llms/slider.md +5 -2
  399. package/docs/llms/splitter.md +17 -3
  400. package/docs/llms/switch.md +13 -0
  401. package/docs/llms/table.md +7 -8
  402. package/docs/llms/tablepro.md +23 -1
  403. package/docs/llms/tabs.md +21 -0
  404. package/docs/llms/theme.md +83 -28
  405. package/docs/llms/themepanel.md +1 -0
  406. package/docs/llms/titlebar.md +1 -0
  407. package/docs/llms/tooltip.md +7 -2
  408. package/docs/llms/typography.md +27 -3
  409. package/docs/llms/windowcontrols.md +11 -3
  410. package/docs/llms.md +2 -2
  411. package/package.json +212 -2
  412. package/dist/Avatar-TNPOHVY5.css +0 -40
  413. package/dist/Badge-DPGLV3D3.css +0 -22
  414. package/dist/Card-W3ATFUJW.css +0 -77
  415. package/dist/Cascader-ANEQUPMI.css +0 -150
  416. package/dist/Checkbox-EDNPZRIP.css +0 -42
  417. package/dist/List-LSMU5QAC.css +0 -26
  418. package/dist/Pagination-YSZSNFHG.css +0 -68
  419. package/dist/Progress-CZNXCYGW.css +0 -80
  420. package/dist/Slider-UM2IZZBH.css +0 -127
  421. package/dist/Tag-G2XWAL7A.css +0 -42
  422. package/dist/chunk-262ED6WQ.cjs +0 -88
  423. package/dist/chunk-4HJBF4GY.js +0 -218
  424. package/dist/chunk-4TTRHEGM.cjs +0 -217
  425. package/dist/chunk-5A6KSYWA.cjs +0 -67
  426. package/dist/chunk-5MOYKVB7.js +0 -192
  427. package/dist/chunk-7IO3EOHN.cjs +0 -200
  428. package/dist/chunk-7QXP6DXC.cjs +0 -129
  429. package/dist/chunk-AAPZLBHQ.js +0 -165
  430. package/dist/chunk-ARUPS7JH.js +0 -66
  431. package/dist/chunk-ATUPFAPZ.cjs +0 -76
  432. package/dist/chunk-CFZVWY5N.js +0 -178
  433. package/dist/chunk-DSLYWX4O.js +0 -25
  434. package/dist/chunk-E22OIVYP.js +0 -349
  435. package/dist/chunk-FQJY4D3T.cjs +0 -47
  436. package/dist/chunk-GNV6W4BN.js +0 -495
  437. package/dist/chunk-HBO7ZDEQ.js +0 -29
  438. package/dist/chunk-I777JTTG.js +0 -150
  439. package/dist/chunk-IOAOG5L7.js +0 -191
  440. package/dist/chunk-IOUAZYK2.cjs +0 -116
  441. package/dist/chunk-IZHH6CVY.js +0 -123
  442. package/dist/chunk-JFL2WMJZ.js +0 -106
  443. package/dist/chunk-KMPFESEV.js +0 -41
  444. package/dist/chunk-KYV75JPQ.js +0 -147
  445. package/dist/chunk-N7OQNSII.cjs +0 -145
  446. package/dist/chunk-P64NPZBG.js +0 -113
  447. package/dist/chunk-PKNRTFNE.cjs +0 -526
  448. package/dist/chunk-PU7VXDAS.js +0 -64
  449. package/dist/chunk-RFI5R42I.cjs +0 -138
  450. package/dist/chunk-RR2BKV65.js +0 -39
  451. package/dist/chunk-RSSOX4RQ.cjs +0 -240
  452. package/dist/chunk-RZEFKXL3.cjs +0 -104
  453. package/dist/chunk-S7IHWY24.js +0 -81
  454. package/dist/chunk-SOQ56ZI2.cjs +0 -49
  455. package/dist/chunk-TBNPJPYG.cjs +0 -61
  456. package/dist/chunk-TJECLLN4.js +0 -344
  457. package/dist/chunk-ULUD3FED.cjs +0 -138
  458. package/dist/chunk-UW57F3UO.cjs +0 -371
  459. package/dist/chunk-VA2I7ZAL.cjs +0 -190
  460. package/dist/chunk-VS3I5OKA.cjs +0 -214
  461. package/dist/chunk-WMGMIE2D.js +0 -113
  462. package/dist/chunk-X7XP6GEI.cjs +0 -63
  463. package/dist/chunk-XCXUGHDF.js +0 -91
  464. package/dist/chunk-YAFDVNXT.js +0 -27
  465. package/dist/chunk-ZD3L4V3H.js +0 -54
  466. 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); }
@@ -1249,14 +1444,22 @@ input, textarea, select { font-family: inherit; color: inherit; }
1249
1444
  .surface > *:last-child { margin-bottom: 0; }
1250
1445
  /* ============ Tabs ============ */
1251
1446
  .tabs { display: flex; flex-direction: column; gap: var(--gap-3); }
1447
+ .tabs.fill {
1448
+ flex: 1 1 auto;
1449
+ width: 100%;
1450
+ height: 100%;
1451
+ min-width: 0;
1452
+ min-height: 0;
1453
+ }
1252
1454
  .tabs-nav {
1253
1455
  display: inline-flex;
1254
1456
  padding: 5px;
1255
1457
  border-radius: var(--r-md);
1256
- background: var(--bg);
1257
- box-shadow: var(--neu-shadow-inset);
1458
+ background: var(--lmn-tabs-bg, var(--bg));
1459
+ box-shadow: var(--lmn-tabs-neu-shadow-inset, var(--neu-shadow-inset));
1258
1460
  gap: 2px;
1259
1461
  align-self: flex-start;
1462
+ flex-shrink: 0;
1260
1463
  }
1261
1464
  .tabs-nav .tab {
1262
1465
  padding: 8px 16px;
@@ -1266,18 +1469,18 @@ input, textarea, select { font-family: inherit; color: inherit; }
1266
1469
  font-size: 12px;
1267
1470
  font-weight: 500;
1268
1471
  font-family: inherit;
1269
- color: var(--fg-muted);
1472
+ color: var(--lmn-tabs-fg-muted, var(--fg-muted));
1270
1473
  cursor: pointer;
1271
1474
  display: inline-flex;
1272
1475
  align-items: center;
1273
1476
  gap: 6px;
1274
1477
  transition: all var(--dur-fast) var(--ease);
1275
1478
  }
1276
- .tabs-nav .tab:hover { color: var(--fg); }
1479
+ .tabs-nav .tab:hover { color: var(--lmn-tabs-fg, var(--fg)); }
1277
1480
  .tabs-nav .tab.active {
1278
- color: var(--accent-ink);
1279
- background: var(--bg);
1280
- box-shadow: var(--neu-shadow-control);
1481
+ color: var(--lmn-tabs-accent-ink, var(--accent-ink));
1482
+ background: var(--lmn-tabs-bg, var(--bg));
1483
+ box-shadow: var(--lmn-tabs-neu-shadow-control, var(--neu-shadow-control));
1281
1484
  font-weight: 600;
1282
1485
  }
1283
1486
  .tabs-nav .tab[disabled] { opacity: 0.4; cursor: not-allowed; }
@@ -1287,7 +1490,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
1287
1490
  background: transparent;
1288
1491
  box-shadow: none;
1289
1492
  border-radius: 0;
1290
- border-bottom: 1px solid var(--divider);
1493
+ border-bottom: 1px solid var(--lmn-tabs-divider, var(--divider));
1291
1494
  align-self: stretch;
1292
1495
  }
1293
1496
  .tabs.line .tabs-nav .tab,
@@ -1302,8 +1505,8 @@ input, textarea, select { font-family: inherit; color: inherit; }
1302
1505
  .tabs.line .tabs-nav .tab.active::after,
1303
1506
  .tabs.underline .tabs-nav .tab.active::after {
1304
1507
  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);
1508
+ background: var(--lmn-tabs-accent, var(--accent)); border-radius: 999px;
1509
+ box-shadow: 0 0 8px var(--lmn-tabs-accent-glow, var(--accent-glow));
1307
1510
  }
1308
1511
  /* Centered nav — works for pill / segmented (self-align) and line (flex-center) */
1309
1512
  .tabs.centered .tabs-nav { align-self: center; }
@@ -1312,12 +1515,18 @@ input, textarea, select { font-family: inherit; color: inherit; }
1312
1515
  .tabs.centered.line .tabs-nav .tab,
1313
1516
  .tabs.centered.underline .tabs-nav .tab { margin-right: 11px; margin-left: 11px; }
1314
1517
  .tabs-content { padding: var(--gap-2) 0; }
1518
+ .tabs.fill .tabs-content {
1519
+ flex: 1 1 auto;
1520
+ min-width: 0;
1521
+ min-height: 0;
1522
+ overflow: auto;
1523
+ }
1315
1524
  /* ============ Collapse ============ */
1316
1525
  .collapse { display: flex; flex-direction: column; gap: 10px; }
1317
1526
  .collapse-item {
1318
- background: var(--bg);
1527
+ background: var(--lmn-collapse-bg, var(--bg));
1319
1528
  border-radius: var(--r-md);
1320
- box-shadow: var(--neu-shadow-control);
1529
+ box-shadow: var(--lmn-collapse-neu-shadow-control, var(--neu-shadow-control));
1321
1530
  overflow: hidden;
1322
1531
  }
1323
1532
  .collapse.ghost .collapse-item {
@@ -1338,7 +1547,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
1338
1547
  font-size: 13px;
1339
1548
  font-weight: 500;
1340
1549
  font-family: inherit;
1341
- color: var(--fg);
1550
+ color: var(--lmn-collapse-fg, var(--fg));
1342
1551
  text-align: left;
1343
1552
  }
1344
1553
  .collapse.small .collapse-head { padding: 10px 14px; font-size: 12px; }
@@ -1349,7 +1558,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
1349
1558
  max-height: 0;
1350
1559
  overflow: hidden;
1351
1560
  transition: max-height var(--dur) var(--ease);
1352
- color: var(--fg-muted);
1561
+ color: var(--lmn-collapse-fg-muted, var(--fg-muted));
1353
1562
  font-size: 13px;
1354
1563
  }
1355
1564
  .collapse-body-inner { padding: 0 18px 16px; }
@@ -1357,14 +1566,19 @@ input, textarea, select { font-family: inherit; color: inherit; }
1357
1566
  .collapse.large .collapse-body-inner { padding: 0 22px 20px; }
1358
1567
  .collapse-chev {
1359
1568
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
1360
- color: var(--fg-subtle);
1569
+ color: var(--lmn-collapse-fg-subtle, var(--fg-subtle));
1361
1570
  display: inline-flex;
1362
1571
  border-radius: var(--r-xs);
1363
1572
  padding: 2px;
1364
1573
  }
1574
+ button.collapse-chev {
1575
+ border: 0;
1576
+ background: transparent;
1577
+ font: inherit;
1578
+ }
1365
1579
  .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); }
1580
+ .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)); }
1581
+ .collapse-item.open .collapse-chev { transform: rotate(180deg); color: var(--lmn-collapse-accent, var(--accent)); }
1368
1582
  /* ============ Select ============ */
1369
1583
  .select {
1370
1584
  position: relative;
@@ -1380,14 +1594,14 @@ input, textarea, select { font-family: inherit; color: inherit; }
1380
1594
  padding: 0 36px 0 var(--ctrl-pad-x);
1381
1595
  border: none;
1382
1596
  border-radius: var(--r-md);
1383
- background: var(--bg);
1384
- box-shadow: var(--neu-shadow-control);
1597
+ background: var(--lmn-select-bg, var(--bg));
1598
+ box-shadow: var(--lmn-select-neu-shadow-control, var(--neu-shadow-control));
1385
1599
  display: inline-flex;
1386
1600
  align-items: center;
1387
1601
  gap: 8px;
1388
1602
  font-size: var(--fs-md);
1389
1603
  font-family: inherit;
1390
- color: var(--fg);
1604
+ color: var(--lmn-select-fg, var(--fg));
1391
1605
  cursor: pointer;
1392
1606
  transition: all var(--dur-fast) var(--ease);
1393
1607
  position: relative;
@@ -1431,25 +1645,25 @@ input, textarea, select { font-family: inherit; color: inherit; }
1431
1645
  height: 18px;
1432
1646
  }
1433
1647
  .select.invalid .select-trigger {
1434
- box-shadow: var(--neu-shadow-control), 0 0 0 2px color-mix(in oklch, var(--danger) 30%, transparent);
1648
+ 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
1649
  }
1436
1650
  .select.invalid.open .select-trigger {
1437
- box-shadow: var(--neu-shadow-inset), 0 0 0 2px color-mix(in oklch, var(--danger) 30%, transparent);
1651
+ 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
1652
  }
1439
1653
  .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
1654
  .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); }
1655
+ .select-trigger:hover { color: var(--lmn-select-accent-ink, var(--accent-ink)); }
1656
+ .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)); }
1657
+ .select-trigger .placeholder { color: var(--lmn-select-fg-subtle, var(--fg-subtle)); }
1444
1658
  .select-caret {
1445
1659
  position: absolute;
1446
1660
  right: 12px; top: 50%;
1447
1661
  transform: translateY(-50%);
1448
- color: var(--fg-subtle);
1662
+ color: var(--lmn-select-fg-subtle, var(--fg-subtle));
1449
1663
  transition: transform var(--dur) var(--ease);
1450
1664
  flex-shrink: 0;
1451
1665
  }
1452
- .select.open .select-caret { transform: translateY(-50%) rotate(180deg); color: var(--accent); }
1666
+ .select.open .select-caret { transform: translateY(-50%) rotate(180deg); color: var(--lmn-select-accent, var(--accent)); }
1453
1667
  /* Multi-select trigger: variable height, tags inside, vertically centered */
1454
1668
  .select.multi .select-trigger {
1455
1669
  height: auto;
@@ -1486,25 +1700,28 @@ input, textarea, select { font-family: inherit; color: inherit; }
1486
1700
  width: 20px;
1487
1701
  height: 20px;
1488
1702
  border-radius: 999px;
1489
- background: var(--bg);
1490
- box-shadow: var(--neu-shadow-control);
1703
+ background: var(--lmn-select-bg, var(--bg));
1704
+ border: none;
1705
+ padding: 0;
1706
+ font: inherit;
1707
+ box-shadow: var(--lmn-select-neu-shadow-control, var(--neu-shadow-control));
1491
1708
  display: inline-grid;
1492
1709
  place-items: center;
1493
1710
  cursor: pointer;
1494
- color: var(--fg-subtle);
1711
+ color: var(--lmn-select-fg-subtle, var(--fg-subtle));
1495
1712
  opacity: 0;
1496
1713
  transition: all var(--dur-fast) var(--ease);
1497
1714
  z-index: 1;
1498
1715
  }
1499
1716
  .select:hover .select-clear { opacity: 1; }
1500
- .select-clear:hover { color: var(--accent-ink); box-shadow: var(--neu-shadow-inset); }
1717
+ .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
1718
  /* Multi-select menu: leading checkbox per item */
1502
1719
  .menu-check {
1503
1720
  width: 16px;
1504
1721
  height: 16px;
1505
1722
  border-radius: 5px;
1506
- background: var(--bg);
1507
- box-shadow: var(--neu-shadow-inset);
1723
+ background: var(--lmn-select-bg, var(--bg));
1724
+ box-shadow: var(--lmn-select-neu-shadow-inset, var(--neu-shadow-inset));
1508
1725
  display: inline-grid;
1509
1726
  place-items: center;
1510
1727
  flex-shrink: 0;
@@ -1512,15 +1729,15 @@ input, textarea, select { font-family: inherit; color: inherit; }
1512
1729
  transition: all var(--dur-fast) var(--ease);
1513
1730
  }
1514
1731
  .menu-check.on {
1515
- background: var(--accent);
1516
- box-shadow: var(--neu-shadow-control), 0 1px 4px var(--accent-glow);
1732
+ background: var(--lmn-select-accent, var(--accent));
1733
+ box-shadow: var(--lmn-select-neu-shadow-control, var(--neu-shadow-control)), 0 1px 4px var(--lmn-select-accent-glow, var(--accent-glow));
1517
1734
  }
1518
1735
  /* Menu search — flush with menu, single subtle separator (no nested frame) */
1519
1736
  .menu-search {
1520
1737
  display: block;
1521
1738
  padding: 4px 2px 8px;
1522
1739
  margin: -2px -2px 4px;
1523
- border-bottom: 1px solid var(--divider);
1740
+ border-bottom: 1px solid var(--lmn-select-divider, var(--divider));
1524
1741
  }
1525
1742
  .menu-search .input-wrap { width: 100%; }
1526
1743
  /* Menu state (loading / empty) */
@@ -1532,28 +1749,38 @@ input, textarea, select { font-family: inherit; color: inherit; }
1532
1749
  gap: 10px;
1533
1750
  padding: 26px 12px;
1534
1751
  font-size: var(--fs-sm);
1535
- color: var(--fg-muted);
1752
+ color: var(--lmn-select-fg-muted, var(--fg-muted));
1536
1753
  }
1537
1754
  .menu-state .menu-state-ico {
1538
1755
  width: 40px;
1539
1756
  height: 40px;
1540
1757
  border-radius: var(--r-md);
1541
- background: var(--bg);
1542
- box-shadow: var(--neu-shadow-inset);
1758
+ background: var(--lmn-select-bg, var(--bg));
1759
+ box-shadow: var(--lmn-select-neu-shadow-inset, var(--neu-shadow-inset));
1543
1760
  display: grid;
1544
1761
  place-items: center;
1545
- color: var(--fg-subtle);
1762
+ color: var(--lmn-select-fg-subtle, var(--fg-subtle));
1546
1763
  }
1547
1764
  .menu-state .menu-state-ico .spinner {
1548
1765
  width: 16px;
1549
1766
  height: 16px;
1550
1767
  display: inline-block;
1551
1768
  border-radius: 999px;
1552
- border: 2px solid var(--accent);
1553
- border-color: var(--accent);
1769
+ border: 2px solid var(--lmn-select-accent, var(--accent));
1770
+ border-color: var(--lmn-select-accent, var(--accent));
1554
1771
  border-right-color: transparent;
1555
1772
  animation: spin 0.8s linear infinite;
1556
1773
  }
1774
+ .select-value-custom {
1775
+ overflow: hidden;
1776
+ }
1777
+ .select-value-custom > * {
1778
+ min-width: 0;
1779
+ max-width: 100%;
1780
+ }
1781
+ @media (prefers-reduced-motion: reduce) {
1782
+ .menu-state .menu-state-ico .spinner { animation: none; }
1783
+ }
1557
1784
  /* Option body — supports description line under label */
1558
1785
  .menu-item-body {
1559
1786
  flex: 1;
@@ -1563,6 +1790,11 @@ input, textarea, select { font-family: inherit; color: inherit; }
1563
1790
  min-width: 0;
1564
1791
  text-align: left;
1565
1792
  }
1793
+ .menu-item-custom {
1794
+ flex: 1;
1795
+ min-width: 0;
1796
+ text-align: left;
1797
+ }
1566
1798
  .menu-item-label {
1567
1799
  white-space: nowrap;
1568
1800
  overflow: hidden;
@@ -1570,31 +1802,36 @@ input, textarea, select { font-family: inherit; color: inherit; }
1570
1802
  }
1571
1803
  .menu-item-desc {
1572
1804
  font-size: var(--fs-xs);
1573
- color: var(--fg-subtle);
1805
+ color: var(--lmn-select-fg-subtle, var(--fg-subtle));
1574
1806
  white-space: nowrap;
1575
1807
  overflow: hidden;
1576
1808
  text-overflow: ellipsis;
1577
1809
  }
1578
- .menu-item.active .menu-item-desc { color: color-mix(in oklch, var(--accent-ink) 70%, var(--fg-subtle)); }
1810
+ .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
1811
  /* Keyboard / hover highlight — soft raised pill */
1580
1812
  .menu-item.highlight:not([disabled]) {
1581
- background: var(--bg);
1582
- box-shadow: var(--neu-shadow-control);
1583
- color: var(--accent-ink);
1813
+ background: var(--lmn-select-bg, var(--bg));
1814
+ box-shadow: var(--lmn-select-neu-shadow-control, var(--neu-shadow-control));
1815
+ color: var(--lmn-select-accent-ink, var(--accent-ink));
1584
1816
  }
1585
1817
  .menu-item[disabled] {
1586
1818
  opacity: 0.45;
1587
1819
  cursor: not-allowed;
1588
1820
  }
1589
1821
  .menu {
1590
- background: var(--bg);
1822
+ background: var(--lmn-select-bg, var(--bg));
1591
1823
  border-radius: var(--r-md);
1592
- box-shadow: var(--neu-shadow-float);
1824
+ box-shadow: var(--lmn-select-neu-shadow-float, var(--neu-shadow-float));
1593
1825
  padding: 6px;
1594
1826
  min-width: 180px;
1827
+ max-width: calc(100vw - 16px);
1595
1828
  z-index: 1000;
1596
1829
  animation: menuIn var(--dur) var(--ease);
1597
- max-height: 260px;
1830
+ overflow: hidden;
1831
+ }
1832
+ .menu-options {
1833
+ display: flex;
1834
+ flex-direction: column;
1598
1835
  overflow-y: auto;
1599
1836
  }
1600
1837
  .menu-item {
@@ -1602,7 +1839,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
1602
1839
  border-radius: var(--r-sm);
1603
1840
  font-size: var(--fs-md);
1604
1841
  cursor: pointer;
1605
- color: var(--fg);
1842
+ color: var(--lmn-select-fg, var(--fg));
1606
1843
  display: flex;
1607
1844
  align-items: center;
1608
1845
  gap: 10px;
@@ -1613,20 +1850,83 @@ input, textarea, select { font-family: inherit; color: inherit; }
1613
1850
  width: 100%;
1614
1851
  text-align: left;
1615
1852
  }
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; }
1853
+ .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)); }
1854
+ .menu-item.active { color: var(--lmn-select-accent-ink, var(--accent-ink)); font-weight: 500; }
1855
+ .menu-item .tick { margin-left: auto; color: var(--lmn-select-accent, var(--accent)); opacity: 0; }
1619
1856
  .menu-item.active .tick { opacity: 1; }
1620
- .menu-item.danger { color: var(--danger); }
1621
- .menu-separator { height: 1px; background: var(--divider); margin: 6px 4px; }
1857
+ .menu-item.danger { color: var(--lmn-select-danger, var(--danger)); }
1858
+ .menu-separator { height: 1px; background: var(--lmn-select-divider, var(--divider)); margin: 6px 4px; }
1622
1859
  .menu-group-label {
1623
1860
  font-size: 10px;
1624
1861
  font-weight: 600;
1625
1862
  text-transform: uppercase;
1626
1863
  letter-spacing: 0.08em;
1627
- color: var(--fg-subtle);
1864
+ color: var(--lmn-select-fg-subtle, var(--fg-subtle));
1628
1865
  padding: 8px 12px 4px;
1629
1866
  }
1867
+ /* ============ Form ============ */
1868
+ .lumina-form { display: flex; flex-direction: column; gap: 18px; }
1869
+ .lumina-form.layout-inline {
1870
+ flex-direction: row;
1871
+ flex-wrap: wrap;
1872
+ align-items: flex-start;
1873
+ gap: 12px;
1874
+ }
1875
+ .lumina-form.layout-inline .form-item { flex: 0 0 auto; }
1876
+ .form-item {
1877
+ display: flex;
1878
+ flex-direction: column;
1879
+ gap: 6px;
1880
+ min-width: 0;
1881
+ }
1882
+ .lumina-form.layout-horizontal .form-item {
1883
+ flex-direction: row;
1884
+ align-items: flex-start;
1885
+ gap: 12px;
1886
+ }
1887
+ .lumina-form.layout-horizontal .form-item-label {
1888
+ flex: 0 0 auto;
1889
+ min-width: 96px;
1890
+ padding-top: 10px;
1891
+ text-align: right;
1892
+ }
1893
+ .lumina-form.layout-horizontal .form-item-control { flex: 1; min-width: 0; }
1894
+ .form-item-label {
1895
+ font-size: 13px;
1896
+ font-weight: 500;
1897
+ color: var(--lmn-form-fg, var(--fg));
1898
+ padding-left: 2px;
1899
+ display: inline-flex;
1900
+ align-items: center;
1901
+ gap: 4px;
1902
+ }
1903
+ .form-item-required {
1904
+ color: var(--lmn-form-danger, var(--danger));
1905
+ font-weight: 600;
1906
+ margin-right: 2px;
1907
+ }
1908
+ .form-item-control { min-width: 0; }
1909
+ .form-item-error {
1910
+ font-size: 12px;
1911
+ color: var(--lmn-form-danger, var(--danger));
1912
+ padding-left: 2px;
1913
+ animation: fadeIn var(--dur-fast) var(--ease);
1914
+ }
1915
+ .form-item-help {
1916
+ font-size: 12px;
1917
+ color: var(--lmn-form-fg-subtle, var(--fg-subtle));
1918
+ padding-left: 2px;
1919
+ }
1920
+ .form-item-extra {
1921
+ font-size: 11.5px;
1922
+ color: var(--lmn-form-fg-subtle, var(--fg-subtle));
1923
+ padding-left: 2px;
1924
+ opacity: 0.85;
1925
+ }
1926
+ .form-item.has-error .input-wrap,
1927
+ .form-item.has-error .select-trigger {
1928
+ 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);
1929
+ }
1630
1930
  /* ============ Modal ============ */
1631
1931
  .modal-overlay {
1632
1932
  position: fixed;
@@ -1642,15 +1942,16 @@ input, textarea, select { font-family: inherit; color: inherit; }
1642
1942
  display: none;
1643
1943
  }
1644
1944
  .modal {
1645
- background: var(--bg);
1945
+ background: var(--lmn-modal-bg, var(--bg));
1646
1946
  border-radius: var(--r-xl);
1647
- box-shadow: var(--neu-shadow-float);
1947
+ box-shadow: var(--lmn-modal-neu-shadow-float, var(--neu-shadow-float));
1648
1948
  padding: var(--gap-6);
1649
1949
  width: min(480px, 92vw);
1650
1950
  animation: modalIn var(--dur-slow) var(--ease);
1651
1951
  max-height: 86vh;
1652
1952
  display: flex;
1653
1953
  flex-direction: column;
1954
+ --overlay-shadow-safe-area: calc(var(--lmn-modal-shadow-offset, var(--shadow-offset)) + var(--lmn-modal-shadow-blur, var(--shadow-blur)));
1654
1955
  }
1655
1956
  @keyframes modalIn {
1656
1957
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
@@ -1660,7 +1961,6 @@ input, textarea, select { font-family: inherit; color: inherit; }
1660
1961
  align-items: flex-start;
1661
1962
  justify-content: space-between;
1662
1963
  gap: var(--gap-3);
1663
- margin-bottom: var(--gap-3);
1664
1964
  }
1665
1965
  .modal-titles {
1666
1966
  display: flex;
@@ -1668,20 +1968,31 @@ input, textarea, select { font-family: inherit; color: inherit; }
1668
1968
  gap: 4px;
1669
1969
  }
1670
1970
  .modal-title { font-size: 17px; font-weight: 600; }
1671
- .modal-desc { font-size: 13px; color: var(--fg-muted); }
1971
+ .modal-desc { font-size: 13px; color: var(--lmn-modal-fg-muted, var(--fg-muted)); }
1672
1972
  .modal-body {
1673
- padding: var(--gap-3) 0;
1674
- color: var(--fg-muted);
1973
+ min-width: 0;
1974
+ min-height: 0;
1975
+ margin-inline: calc(var(--gap-6) * -1);
1976
+ padding: var(--overlay-shadow-safe-area);
1977
+ color: var(--lmn-modal-fg-muted, var(--fg-muted));
1675
1978
  font-size: 13px;
1676
1979
  line-height: 1.6;
1677
1980
  flex: 1;
1678
1981
  overflow-y: auto;
1679
1982
  }
1983
+ .modal-body:first-child {
1984
+ margin-top: calc(var(--gap-6) * -1);
1985
+ }
1986
+ .modal-body:last-child {
1987
+ margin-bottom: calc(var(--gap-6) * -1);
1988
+ }
1989
+ .modal-body.inset-none {
1990
+ padding: 0;
1991
+ }
1680
1992
  .modal-foot {
1681
1993
  display: flex;
1682
1994
  gap: 10px;
1683
1995
  justify-content: flex-end;
1684
- margin-top: var(--gap-4);
1685
1996
  }
1686
1997
  .modal-close {
1687
1998
  width: 28px; height: 28px;
@@ -1690,14 +2001,14 @@ input, textarea, select { font-family: inherit; color: inherit; }
1690
2001
  border-radius: var(--r-sm);
1691
2002
  display: grid;
1692
2003
  place-items: center;
1693
- color: var(--fg-subtle);
2004
+ color: var(--lmn-modal-fg-subtle, var(--fg-subtle));
1694
2005
  cursor: pointer;
1695
2006
  transition: all var(--dur-fast) var(--ease);
1696
2007
  }
1697
2008
  .modal-close:hover {
1698
- color: var(--fg);
1699
- background: var(--bg);
1700
- box-shadow: var(--neu-shadow-subtle);
2009
+ color: var(--lmn-modal-fg, var(--fg));
2010
+ background: var(--lmn-modal-bg, var(--bg));
2011
+ box-shadow: var(--lmn-modal-neu-shadow-subtle, var(--neu-shadow-subtle));
1701
2012
  }
1702
2013
  .modal-static-body {
1703
2014
  display: flex;
@@ -1711,16 +2022,16 @@ input, textarea, select { font-family: inherit; color: inherit; }
1711
2022
  display: inline-grid;
1712
2023
  place-items: center;
1713
2024
  flex-shrink: 0;
1714
- background: var(--bg);
1715
- box-shadow: var(--neu-shadow-inset);
1716
- color: var(--accent);
2025
+ background: var(--lmn-modal-bg, var(--bg));
2026
+ box-shadow: var(--lmn-modal-neu-shadow-inset, var(--neu-shadow-inset));
2027
+ color: var(--lmn-modal-accent, var(--accent));
1717
2028
  }
1718
- .modal-static-icon.success { color: var(--success); }
1719
- .modal-static-icon.warning { color: var(--warning); }
1720
- .modal-static-icon.error { color: var(--danger); }
2029
+ .modal-static-icon.success { color: var(--lmn-modal-success, var(--success)); }
2030
+ .modal-static-icon.warning { color: var(--lmn-modal-warning, var(--warning)); }
2031
+ .modal-static-icon.error { color: var(--lmn-modal-danger, var(--danger)); }
1721
2032
  .modal-static-content {
1722
2033
  min-width: 0;
1723
- color: var(--fg-muted);
2034
+ color: var(--lmn-modal-fg-muted, var(--fg-muted));
1724
2035
  }
1725
2036
  /* ============ Drawer ============ */
1726
2037
  .drawer-overlay {
@@ -1736,15 +2047,16 @@ input, textarea, select { font-family: inherit; color: inherit; }
1736
2047
  }
1737
2048
  .drawer {
1738
2049
  position: fixed;
1739
- background: var(--bg);
2050
+ background: var(--lmn-drawer-bg, var(--bg));
1740
2051
  padding: var(--gap-5);
1741
2052
  z-index: 151;
1742
- overflow-y: auto;
2053
+ overflow: hidden;
1743
2054
  display: flex;
1744
2055
  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));
2056
+ --overlay-shadow-safe-area: calc(var(--lmn-drawer-shadow-offset, var(--shadow-offset)) + var(--lmn-drawer-shadow-blur, var(--shadow-blur)));
2057
+ --drawer-shadow-offset: calc(var(--lmn-drawer-shadow-offset, var(--shadow-offset)) * 4 * var(--shadow-float-scale));
2058
+ --drawer-shadow-blur: calc(var(--lmn-drawer-shadow-blur, var(--shadow-blur)) * 3.75 * var(--shadow-float-scale));
2059
+ --drawer-shadow-spread: calc(var(--lmn-drawer-shadow-offset, var(--shadow-offset)) * -3.3 * var(--shadow-float-scale));
1748
2060
  }
1749
2061
  .drawer.hidden {
1750
2062
  display: none;
@@ -1753,25 +2065,25 @@ input, textarea, select { font-family: inherit; color: inherit; }
1753
2065
  top: 0; right: 0; bottom: 0;
1754
2066
  width: min(420px, 92vw);
1755
2067
  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);
2068
+ 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
2069
  }
1758
2070
  .drawer.left {
1759
2071
  top: 0; left: 0; bottom: 0;
1760
2072
  width: min(420px, 92vw);
1761
2073
  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);
2074
+ box-shadow: var(--drawer-shadow-offset) 0 var(--drawer-shadow-blur) var(--drawer-shadow-spread) var(--lmn-drawer-shadow-dark, var(--shadow-dark));
1763
2075
  }
1764
2076
  .drawer.top {
1765
2077
  top: 0; left: 0; right: 0;
1766
2078
  height: min(320px, 80vh);
1767
2079
  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);
2080
+ box-shadow: 0 var(--drawer-shadow-offset) var(--drawer-shadow-blur) var(--drawer-shadow-spread) var(--lmn-drawer-shadow-dark, var(--shadow-dark));
1769
2081
  }
1770
2082
  .drawer.bottom {
1771
2083
  bottom: 0; left: 0; right: 0;
1772
2084
  height: min(320px, 80vh);
1773
2085
  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);
2086
+ 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
2087
  }
1776
2088
  @keyframes drawerInRight { from { transform: translateX( 20px); opacity: 0; } }
1777
2089
  @keyframes drawerInLeft { from { transform: translateX(-20px); opacity: 0; } }
@@ -1782,9 +2094,8 @@ input, textarea, select { font-family: inherit; color: inherit; }
1782
2094
  align-items: center;
1783
2095
  justify-content: space-between;
1784
2096
  gap: var(--gap-3);
1785
- margin-bottom: var(--gap-4);
1786
2097
  padding-bottom: var(--gap-4);
1787
- border-bottom: 1px solid var(--divider);
2098
+ border-bottom: 1px solid var(--lmn-drawer-divider, var(--divider));
1788
2099
  }
1789
2100
  .drawer-head-right {
1790
2101
  display: inline-flex;
@@ -1802,25 +2113,38 @@ input, textarea, select { font-family: inherit; color: inherit; }
1802
2113
  border-radius: var(--r-sm);
1803
2114
  display: grid;
1804
2115
  place-items: center;
1805
- color: var(--fg-subtle);
2116
+ color: var(--lmn-drawer-fg-subtle, var(--fg-subtle));
1806
2117
  cursor: pointer;
1807
2118
  transition: all var(--dur-fast) var(--ease);
1808
2119
  }
1809
2120
  .drawer-close:hover {
1810
- color: var(--fg);
1811
- background: var(--bg);
1812
- box-shadow: var(--neu-shadow-subtle);
2121
+ color: var(--lmn-drawer-fg, var(--fg));
2122
+ background: var(--lmn-drawer-bg, var(--bg));
2123
+ box-shadow: var(--lmn-drawer-neu-shadow-subtle, var(--neu-shadow-subtle));
1813
2124
  }
1814
2125
  .drawer-body {
1815
2126
  flex: 1;
2127
+ min-width: 0;
2128
+ min-height: 0;
2129
+ margin-inline: calc(var(--gap-5) * -1);
2130
+ padding: var(--overlay-shadow-safe-area);
2131
+ overflow: auto;
2132
+ }
2133
+ .drawer-body:first-child {
2134
+ margin-top: calc(var(--gap-5) * -1);
2135
+ }
2136
+ .drawer-body:last-child {
2137
+ margin-bottom: calc(var(--gap-5) * -1);
2138
+ }
2139
+ .drawer-body.inset-none {
2140
+ padding: 0;
1816
2141
  }
1817
2142
  .drawer-foot {
1818
2143
  display: flex;
1819
2144
  gap: 10px;
1820
2145
  justify-content: flex-end;
1821
- margin-top: var(--gap-4);
1822
2146
  padding-top: var(--gap-4);
1823
- border-top: 1px solid var(--divider);
2147
+ border-top: 1px solid var(--lmn-drawer-divider, var(--divider));
1824
2148
  }
1825
2149
  /* ============ Tooltip ============ */
1826
2150
  .tip-anchor {
@@ -1831,14 +2155,14 @@ input, textarea, select { font-family: inherit; color: inherit; }
1831
2155
  .tip {
1832
2156
  display: block;
1833
2157
  box-sizing: border-box;
1834
- background: var(--bg-sunken);
1835
- color: var(--fg);
2158
+ background: var(--lmn-tooltip-bg-sunken, var(--bg-sunken));
2159
+ color: var(--lmn-tooltip-fg, var(--fg));
1836
2160
  padding: 6px 10px;
1837
2161
  border-radius: var(--r-sm);
1838
2162
  font-size: 11px;
1839
2163
  font-weight: 500;
1840
2164
  white-space: nowrap;
1841
- box-shadow: var(--neu-shadow-control);
2165
+ box-shadow: var(--lmn-tooltip-neu-shadow-control, var(--neu-shadow-control));
1842
2166
  pointer-events: auto;
1843
2167
  animation: fadeIn var(--dur) var(--ease);
1844
2168
  z-index: 1000;
@@ -1858,50 +2182,49 @@ input, textarea, select { font-family: inherit; color: inherit; }
1858
2182
  .message-container.bottom-left { bottom: 20px; left: 20px; }
1859
2183
  .message-container.top-center { top: 56px; left: 50%; transform: translateX(-50%); align-items: center; }
1860
2184
  .message {
1861
- background: var(--bg);
2185
+ background: var(--lmn-message-bg, var(--bg));
1862
2186
  border-radius: var(--r-md);
1863
- box-shadow: var(--neu-shadow-float);
2187
+ box-shadow: var(--lmn-message-neu-shadow-float, var(--neu-shadow-float));
1864
2188
  padding: 12px 16px;
1865
2189
  min-width: 240px;
1866
2190
  display: flex; align-items: center; gap: 10px;
1867
2191
  font-size: 13px;
1868
2192
  pointer-events: auto;
1869
2193
  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); }
2194
+ border-left: 3px solid var(--lmn-message-accent, var(--accent));
2195
+ }
2196
+ .message.success { border-color: var(--lmn-message-success, var(--success)); }
2197
+ .message.warning { border-color: var(--lmn-message-warning, var(--warning)); }
2198
+ .message.error { border-color: var(--lmn-message-danger, var(--danger)); }
2199
+ .message .message-icon { color: var(--lmn-message-accent, var(--accent)); flex-shrink: 0; }
2200
+ .message.success .message-icon { color: var(--lmn-message-success, var(--success)); }
2201
+ .message.warning .message-icon { color: var(--lmn-message-warning, var(--warning)); }
2202
+ .message.error .message-icon { color: var(--lmn-message-danger, var(--danger)); }
1879
2203
  .message-body { flex: 1; min-width: 0; }
1880
2204
  .message-title { font-weight: 600; margin-bottom: 2px; }
1881
- .message-content { color: var(--fg-muted); font-size: 12px; }
2205
+ .message-content { color: var(--lmn-message-fg-muted, var(--fg-muted)); font-size: 12px; }
1882
2206
  .message-close {
1883
2207
  background: transparent; border: none;
1884
- color: var(--fg-subtle); cursor: pointer;
2208
+ color: var(--lmn-message-fg-subtle, var(--fg-subtle)); cursor: pointer;
1885
2209
  padding: 0 2px; font-family: inherit;
1886
2210
  }
1887
- .message-close:hover { color: var(--fg); }
2211
+ .message-close:hover { color: var(--lmn-message-fg, var(--fg)); }
1888
2212
  .message.leaving { animation: messageOut var(--dur) var(--ease) forwards; }
1889
2213
  @keyframes messageIn { from { opacity: 0; transform: translateX(20px); } }
1890
2214
  @keyframes messageOut { to { opacity: 0; transform: translateX(20px); } }
1891
2215
  /* ============ Popover ============ */
1892
2216
  .popover {
1893
2217
  z-index: 1000;
1894
- background: var(--bg);
2218
+ background: var(--lmn-popover-bg, var(--bg));
1895
2219
  border-radius: var(--r-md);
1896
2220
  min-width: 220px;
1897
- box-shadow: var(--neu-shadow-float);
2221
+ box-shadow: var(--lmn-popover-neu-shadow-float, var(--neu-shadow-float));
1898
2222
  position: relative;
1899
2223
  }
1900
2224
  /*
1901
2225
  * 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.
2226
+ * We animate `opacity` + `translate` so positioning stays independent from
2227
+ * the coordinates calculated by useFloating.
1905
2228
  */
1906
2229
  .popover-bottom { animation: popoverInDown var(--dur) var(--ease); }
1907
2230
  .popover-top { animation: popoverInUp var(--dur) var(--ease); }
@@ -1922,13 +2245,13 @@ input, textarea, select { font-family: inherit; color: inherit; }
1922
2245
  .popover-title {
1923
2246
  font-weight: 600;
1924
2247
  font-size: 14px;
1925
- color: var(--fg);
2248
+ color: var(--lmn-popover-fg, var(--fg));
1926
2249
  }
1927
2250
  .popover-close {
1928
2251
  all: unset;
1929
2252
  cursor: pointer;
1930
2253
  font-size: 16px;
1931
- color: var(--fg-muted);
2254
+ color: var(--lmn-popover-fg-muted, var(--fg-muted));
1932
2255
  line-height: 1;
1933
2256
  padding: 2px 4px;
1934
2257
  border-radius: var(--r-xs);
@@ -1936,7 +2259,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
1936
2259
  margin-left: auto;
1937
2260
  }
1938
2261
  .popover-close:hover {
1939
- color: var(--fg);
2262
+ color: var(--lmn-popover-fg, var(--fg));
1940
2263
  }
1941
2264
  /* ---- Body ---- */
1942
2265
  .popover-body {
@@ -1950,8 +2273,8 @@ input, textarea, select { font-family: inherit; color: inherit; }
1950
2273
  position: absolute;
1951
2274
  width: 10px;
1952
2275
  height: 10px;
1953
- background: var(--bg);
1954
- box-shadow: 2px 2px 4px rgba(163, 177, 198, 0.2);
2276
+ background: var(--lmn-popover-bg, var(--bg));
2277
+ box-shadow: 2px 2px 4px color-mix(in oklch, var(--lmn-popover-shadow-dark, var(--shadow-dark)) 36%, transparent);
1955
2278
  transform: rotate(45deg);
1956
2279
  pointer-events: none;
1957
2280
  }
@@ -1959,35 +2282,233 @@ input, textarea, select { font-family: inherit; color: inherit; }
1959
2282
  top: -5px;
1960
2283
  left: 50%;
1961
2284
  margin-left: -5px;
1962
- box-shadow: -2px -2px 4px rgba(163, 177, 198, 0.2);
2285
+ box-shadow: -2px -2px 4px color-mix(in oklch, var(--lmn-popover-shadow-dark, var(--shadow-dark)) 36%, transparent);
1963
2286
  }
1964
2287
  .popover-arrow-top {
1965
2288
  bottom: -5px;
1966
2289
  left: 50%;
1967
2290
  margin-left: -5px;
1968
- box-shadow: 2px 2px 4px rgba(163, 177, 198, 0.2);
2291
+ box-shadow: 2px 2px 4px color-mix(in oklch, var(--lmn-popover-shadow-dark, var(--shadow-dark)) 36%, transparent);
1969
2292
  }
1970
2293
  .popover-arrow-left {
1971
2294
  right: -5px;
1972
2295
  top: 50%;
1973
2296
  margin-top: -5px;
1974
- box-shadow: 2px -2px 4px rgba(163, 177, 198, 0.2);
2297
+ box-shadow: 2px -2px 4px color-mix(in oklch, var(--lmn-popover-shadow-dark, var(--shadow-dark)) 36%, transparent);
1975
2298
  }
1976
2299
  .popover-arrow-right {
1977
2300
  left: -5px;
1978
2301
  top: 50%;
1979
2302
  margin-top: -5px;
1980
- box-shadow: -2px 2px 4px rgba(163, 177, 198, 0.2);
2303
+ box-shadow: -2px 2px 4px color-mix(in oklch, var(--lmn-popover-shadow-dark, var(--shadow-dark)) 36%, transparent);
1981
2304
  }
1982
- /* ============ Alert ============ */
1983
- .alert {
2305
+ /* ============ ContextMenu ============ */
2306
+ .context-menu {
2307
+ z-index: 5000;
2308
+ padding: 6px;
2309
+ background: var(--lmn-context-menu-bg, var(--bg));
2310
+ border-radius: var(--r-md);
2311
+ box-shadow: var(--lmn-context-menu-neu-shadow-float, var(--neu-shadow-float));
2312
+ border: 1px solid var(--lmn-context-menu-divider, var(--divider));
1984
2313
  display: flex;
1985
- gap: 12px;
1986
- align-items: flex-start;
2314
+ flex-direction: column;
2315
+ gap: 1px;
2316
+ animation: menuIn var(--dur-fast) var(--ease);
2317
+ max-height: calc(100vh - 24px);
2318
+ overflow-y: auto;
2319
+ }
2320
+ .context-menu-item {
2321
+ display: grid;
2322
+ grid-template-columns: 18px 1fr auto;
2323
+ align-items: center;
2324
+ gap: 8px;
2325
+ padding: 6px 10px;
2326
+ min-height: 28px;
2327
+ border: none;
2328
+ background: transparent;
2329
+ box-shadow: none;
2330
+ font: inherit;
2331
+ font-size: 13px;
2332
+ color: var(--lmn-context-menu-fg, var(--fg));
2333
+ text-align: left;
2334
+ border-radius: var(--r-sm);
2335
+ cursor: pointer;
2336
+ transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
2337
+ box-shadow var(--dur-fast) var(--ease);
2338
+ }
2339
+ .context-menu-item:disabled { color: var(--lmn-context-menu-fg-subtle, var(--fg-subtle)); cursor: not-allowed; }
2340
+ .context-menu-item.active:not(:disabled) {
2341
+ background: var(--lmn-context-menu-bg, var(--bg));
2342
+ color: var(--lmn-context-menu-accent-ink, var(--accent-ink));
2343
+ box-shadow: var(--lmn-context-menu-neu-shadow-inset, var(--neu-shadow-inset));
2344
+ }
2345
+ .context-menu-item.danger { color: var(--lmn-context-menu-danger, var(--danger)); }
2346
+ .context-menu-item.danger.active:not(:disabled) {
2347
+ background: var(--lmn-context-menu-bg, var(--bg));
2348
+ color: var(--lmn-context-menu-danger, var(--danger));
2349
+ box-shadow: var(--lmn-context-menu-neu-shadow-inset, var(--neu-shadow-inset));
2350
+ }
2351
+ .context-menu-icon {
2352
+ display: inline-flex;
2353
+ justify-content: center;
2354
+ align-items: center;
2355
+ color: var(--lmn-context-menu-fg-muted, var(--fg-muted));
2356
+ }
2357
+ .context-menu-item.active:not(:disabled) .context-menu-icon { color: inherit; }
2358
+ .context-menu-item.danger .context-menu-icon { color: var(--lmn-context-menu-danger, var(--danger)); }
2359
+ .context-menu-label {
2360
+ overflow: hidden;
2361
+ text-overflow: ellipsis;
2362
+ white-space: nowrap;
2363
+ }
2364
+ .context-menu-shortcut {
2365
+ font-family: var(--font-mono);
2366
+ font-size: 11px;
2367
+ color: var(--lmn-context-menu-fg-subtle, var(--fg-subtle));
2368
+ padding-left: 12px;
2369
+ }
2370
+ .context-menu-item.active:not(:disabled) .context-menu-shortcut { color: inherit; opacity: 0.8; }
2371
+ .context-menu-divider {
2372
+ height: 1px;
2373
+ background: var(--lmn-context-menu-divider, var(--divider));
2374
+ margin: 4px 4px;
2375
+ }
2376
+ /* ============ CommandPalette ============ */
2377
+ .cmdp-overlay {
2378
+ position: fixed;
2379
+ inset: 0;
2380
+ z-index: 4000;
2381
+ background: var(--mask-bg);
2382
+ display: flex;
2383
+ justify-content: center;
2384
+ align-items: flex-start;
2385
+ padding-top: 14vh;
2386
+ animation: fadeIn var(--dur-fast) var(--ease);
2387
+ }
2388
+ .cmdp-panel {
2389
+ width: min(560px, calc(100vw - 48px));
2390
+ max-height: 60vh;
2391
+ background: var(--lmn-command-palette-bg, var(--bg));
2392
+ border-radius: var(--r-lg);
2393
+ box-shadow: var(--lmn-command-palette-neu-shadow-float, var(--neu-shadow-float));
2394
+ border: 1px solid var(--lmn-command-palette-divider, var(--divider));
2395
+ display: flex;
2396
+ flex-direction: column;
2397
+ overflow: hidden;
2398
+ animation: cmdpIn var(--dur) var(--ease);
2399
+ }
2400
+ @keyframes cmdpIn {
2401
+ from { opacity: 0; transform: translateY(-12px) scale(0.98); }
2402
+ to { opacity: 1; transform: translateY(0) scale(1); }
2403
+ }
2404
+ .cmdp-search {
2405
+ padding: 12px 12px 10px;
2406
+ }
2407
+ .cmdp-list {
2408
+ overflow-y: auto;
2409
+ padding: 6px;
2410
+ flex: 1;
2411
+ min-height: 60px;
2412
+ }
2413
+ .cmdp-group + .cmdp-group { margin-top: 4px; }
2414
+ .cmdp-group-head {
2415
+ font-size: 11px;
2416
+ text-transform: uppercase;
2417
+ letter-spacing: 0.06em;
2418
+ color: var(--lmn-command-palette-fg-subtle, var(--fg-subtle));
2419
+ padding: 8px 10px 4px;
2420
+ font-weight: 600;
2421
+ }
2422
+ .cmdp-item {
2423
+ display: grid;
2424
+ grid-template-columns: 20px 1fr auto;
2425
+ align-items: center;
2426
+ gap: 10px;
2427
+ width: 100%;
2428
+ padding: 9px 10px;
2429
+ border: none;
2430
+ background: transparent;
2431
+ box-shadow: none;
2432
+ color: var(--lmn-command-palette-fg, var(--fg));
2433
+ font: inherit;
2434
+ font-size: 13px;
2435
+ text-align: left;
2436
+ border-radius: var(--r-sm);
2437
+ cursor: pointer;
2438
+ transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
2439
+ box-shadow var(--dur-fast) var(--ease);
2440
+ }
2441
+ .cmdp-item:disabled { color: var(--lmn-command-palette-fg-subtle, var(--fg-subtle)); cursor: not-allowed; }
2442
+ .cmdp-item.active:not(:disabled) {
2443
+ background: var(--lmn-command-palette-bg, var(--bg));
2444
+ color: var(--lmn-command-palette-accent-ink, var(--accent-ink));
2445
+ box-shadow: var(--lmn-command-palette-neu-shadow-inset, var(--neu-shadow-inset));
2446
+ }
2447
+ .cmdp-icon {
2448
+ display: inline-flex;
2449
+ align-items: center;
2450
+ justify-content: center;
2451
+ color: var(--lmn-command-palette-fg-muted, var(--fg-muted));
2452
+ }
2453
+ .cmdp-item.active:not(:disabled) .cmdp-icon { color: inherit; }
2454
+ .cmdp-labels { display: flex; flex-direction: column; min-width: 0; }
2455
+ .cmdp-label {
2456
+ overflow: hidden;
2457
+ text-overflow: ellipsis;
2458
+ white-space: nowrap;
2459
+ }
2460
+ .cmdp-desc {
2461
+ font-size: 11.5px;
2462
+ color: var(--lmn-command-palette-fg-subtle, var(--fg-subtle));
2463
+ overflow: hidden;
2464
+ text-overflow: ellipsis;
2465
+ white-space: nowrap;
2466
+ }
2467
+ .cmdp-item.active:not(:disabled) .cmdp-desc { color: inherit; opacity: 0.75; }
2468
+ .cmdp-shortcut {
2469
+ font-family: var(--font-mono);
2470
+ font-size: 11px;
2471
+ color: var(--lmn-command-palette-fg-subtle, var(--fg-subtle));
2472
+ }
2473
+ .cmdp-item.active:not(:disabled) .cmdp-shortcut { color: inherit; opacity: 0.8; }
2474
+ .cmdp-empty {
2475
+ padding: 28px 16px;
2476
+ text-align: center;
2477
+ color: var(--lmn-command-palette-fg-subtle, var(--fg-subtle));
2478
+ font-size: 13px;
2479
+ }
2480
+ .cmdp-footer {
2481
+ display: flex;
2482
+ gap: 16px;
2483
+ padding: 8px 14px;
2484
+ border-top: 1px solid var(--lmn-command-palette-divider, var(--divider));
2485
+ background: var(--lmn-command-palette-bg-sunken, var(--bg-sunken));
2486
+ font-size: 11.5px;
2487
+ color: var(--lmn-command-palette-fg-subtle, var(--fg-subtle));
2488
+ }
2489
+ .cmdp-footer span { display: inline-flex; align-items: center; gap: 4px; }
2490
+ .cmdp-kbd {
2491
+ display: inline-grid;
2492
+ place-items: center;
2493
+ min-width: 18px;
2494
+ height: 18px;
2495
+ padding: 0 5px;
2496
+ border-radius: 5px;
2497
+ background: var(--lmn-command-palette-bg, var(--bg));
2498
+ box-shadow: var(--lmn-command-palette-neu-shadow-subtle, var(--neu-shadow-subtle));
2499
+ font-family: var(--font-mono);
2500
+ font-size: 10.5px;
2501
+ color: var(--lmn-command-palette-fg-muted, var(--fg-muted));
2502
+ }
2503
+ /* ============ Alert ============ */
2504
+ .alert {
2505
+ display: flex;
2506
+ gap: 12px;
2507
+ align-items: flex-start;
1987
2508
  padding: 14px 16px;
1988
2509
  border-radius: var(--r-md);
1989
- background: var(--bg);
1990
- box-shadow: var(--neu-shadow-inset);
2510
+ background: var(--lmn-alert-bg, var(--bg));
2511
+ box-shadow: var(--lmn-alert-neu-shadow-inset, var(--neu-shadow-inset));
1991
2512
  position: relative;
1992
2513
  }
1993
2514
  .alert-ico {
@@ -2003,13 +2524,13 @@ input, textarea, select { font-family: inherit; color: inherit; }
2003
2524
  height: 16px;
2004
2525
  object-fit: contain;
2005
2526
  }
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); }
2527
+ .alert.info .alert-ico { color: var(--lmn-alert-info, var(--info)); }
2528
+ .alert.success .alert-ico { color: var(--lmn-alert-success, var(--success)); }
2529
+ .alert.warning .alert-ico { color: var(--lmn-alert-warning, var(--warning)); }
2530
+ .alert.danger .alert-ico { color: var(--lmn-alert-danger, var(--danger)); }
2010
2531
  .alert-body { flex: 1; min-width: 0; }
2011
2532
  .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; }
2533
+ .alert-desc { font-size: 12px; color: var(--lmn-alert-fg-muted, var(--fg-muted)); line-height: 1.55; }
2013
2534
  .alert.no-title { align-items: center; }
2014
2535
  .alert.no-title .alert-ico { margin-top: 0; }
2015
2536
  .alert.no-icon { gap: 0; }
@@ -2025,17 +2546,18 @@ input, textarea, select { font-family: inherit; color: inherit; }
2025
2546
  position: absolute; top: 10px; right: 10px;
2026
2547
  width: 22px; height: 22px; border-radius: 7px;
2027
2548
  display: grid; place-items: center;
2028
- color: var(--fg-subtle);
2549
+ color: var(--lmn-alert-fg-subtle, var(--fg-subtle));
2029
2550
  cursor: pointer;
2030
2551
  border: none; background: transparent;
2031
2552
  }
2032
- .alert-close:hover { color: var(--fg); background: var(--bg); box-shadow: var(--neu-shadow-subtle); }
2553
+ .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
2554
  /* ============ Table ============ */
2034
2555
  .table-wrap {
2035
2556
  border-radius: var(--r-lg);
2036
- background: var(--bg);
2037
- box-shadow: var(--neu-shadow-inset);
2557
+ background: var(--lmn-table-bg, var(--bg));
2558
+ box-shadow: var(--lmn-table-neu-shadow-inset, var(--neu-shadow-inset));
2038
2559
  overflow: auto;
2560
+ container-type: inline-size;
2039
2561
  }
2040
2562
  /* When scroll=y is on, the wrap itself becomes the scroll region. */
2041
2563
  .table-wrap.scroll-y { overflow-y: auto; }
@@ -2049,51 +2571,68 @@ input, textarea, select { font-family: inherit; color: inherit; }
2049
2571
  .table th {
2050
2572
  text-align: left;
2051
2573
  padding: 14px 18px;
2052
- background: var(--bg);
2574
+ background: var(--lmn-table-bg, var(--bg));
2053
2575
  font-size: 11px;
2054
2576
  font-weight: 700;
2055
2577
  letter-spacing: 0.08em;
2056
2578
  text-transform: uppercase;
2057
- color: var(--fg-subtle);
2058
- border-bottom: 1px solid var(--divider);
2579
+ color: var(--lmn-table-fg-subtle, var(--fg-subtle));
2580
+ border-bottom: 1px solid var(--lmn-table-divider, var(--divider));
2059
2581
  position: sticky; top: 0;
2060
2582
  z-index: 1;
2061
2583
  }
2062
2584
  /* When the wrap is the scroll container (scroll.y), position:sticky on th needs
2063
2585
  top:0 relative to the wrap — browsers already handle that. Adding a stronger
2064
2586
  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); }
2587
+ .table.sticky-head th { background: var(--lmn-table-bg, var(--bg)); }
2588
+ .table th.sortable { user-select: none; }
2589
+ .table th.sortable:hover { color: var(--lmn-table-fg, var(--fg)); }
2590
+ .table-sort-trigger.btn {
2591
+ height: auto;
2592
+ min-height: 24px;
2593
+ padding: 2px 4px;
2594
+ color: inherit;
2595
+ font: inherit;
2596
+ letter-spacing: inherit;
2597
+ text-transform: inherit;
2598
+ }
2068
2599
  .table th .th-label { vertical-align: middle; }
2069
2600
  .table th .sort-ind {
2070
2601
  display: inline-flex;
2071
2602
  width: 16px; height: 16px;
2072
2603
  border-radius: 6px;
2073
- background: var(--bg);
2074
- box-shadow: var(--neu-shadow-subtle);
2604
+ background: var(--lmn-table-bg, var(--bg));
2605
+ box-shadow: var(--lmn-table-neu-shadow-subtle, var(--neu-shadow-subtle));
2075
2606
  align-items: center; justify-content: center;
2076
2607
  margin-left: 6px;
2077
- color: var(--fg-subtle);
2608
+ color: var(--lmn-table-fg-subtle, var(--fg-subtle));
2078
2609
  vertical-align: middle;
2079
2610
  }
2080
- .table th.sorted .sort-ind { color: var(--accent); box-shadow: var(--neu-shadow-inset); }
2611
+ .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
2612
  .table td {
2082
2613
  padding: 12px 18px;
2083
- border-bottom: 1px solid var(--divider);
2614
+ border-bottom: 1px solid var(--lmn-table-divider, var(--divider));
2084
2615
  vertical-align: middle;
2085
2616
  }
2086
- .table.hoverable tbody tr:hover td { background: color-mix(in oklch, var(--accent-soft) 40%, transparent); }
2617
+ .table.hoverable tbody tr:hover td { background: color-mix(in oklch, var(--lmn-table-accent-soft, var(--accent-soft)) 40%, transparent); }
2087
2618
  .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); }
2619
+ .table tbody tr.clickable:focus-visible td {
2620
+ background: color-mix(in oklch, var(--lmn-table-accent-soft, var(--accent-soft)) 55%, transparent);
2621
+ box-shadow: inset 0 0 0 2px var(--lmn-table-accent-glow, var(--accent-glow));
2622
+ }
2623
+ .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
2624
  .table tbody tr:last-child td { border-bottom: none; }
2090
2625
  .table.striped tbody tr:nth-child(even) td {
2091
- background: color-mix(in oklch, var(--bg-sunken) 40%, transparent);
2626
+ background: color-mix(in oklch, var(--lmn-table-bg-sunken, var(--bg-sunken)) 40%, transparent);
2627
+ }
2628
+ .table:not(.cards) tbody tr.active-row td {
2629
+ background: color-mix(in oklch, var(--lmn-table-accent-soft, var(--accent-soft)) 72%, transparent);
2630
+ color: var(--lmn-table-accent-ink, var(--accent-ink));
2092
2631
  }
2093
2632
  /* Embossed: each row sits on the surface */
2094
2633
  .table.embossed { border-spacing: 0; }
2095
2634
  .table.embossed tbody td {
2096
- background: var(--bg);
2635
+ background: var(--lmn-table-bg, var(--bg));
2097
2636
  }
2098
2637
  /* Card-row variant: each row is its own raised pill */
2099
2638
  .table.cards {
@@ -2113,8 +2652,8 @@ input, textarea, select { font-family: inherit; color: inherit; }
2113
2652
  inset: 0;
2114
2653
  z-index: -1;
2115
2654
  border-radius: var(--r-md);
2116
- background: var(--bg);
2117
- box-shadow: var(--neu-shadow-control);
2655
+ background: var(--lmn-table-bg, var(--bg));
2656
+ box-shadow: var(--lmn-table-neu-shadow-control, var(--neu-shadow-control));
2118
2657
  pointer-events: none;
2119
2658
  transition: box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
2120
2659
  }
@@ -2142,38 +2681,60 @@ input, textarea, select { font-family: inherit; color: inherit; }
2142
2681
  .table.cards.hoverable tbody tr:hover {
2143
2682
  transform: translateY(-1px);
2144
2683
  }
2145
- .table.cards.hoverable tbody tr:hover .card-row-surface { box-shadow: var(--neu-shadow-panel); }
2684
+ .table.cards.hoverable tbody tr:hover .card-row-surface { box-shadow: var(--lmn-table-neu-shadow-panel, var(--neu-shadow-panel)); }
2146
2685
  .table.cards.hoverable tbody tr:hover td { background: transparent; }
2686
+ .table.cards tbody tr.active-row .card-row-surface {
2687
+ box-shadow:
2688
+ var(--lmn-table-neu-shadow-control, var(--neu-shadow-control)),
2689
+ inset 0 0 0 2px var(--lmn-table-accent-glow, var(--accent-glow));
2690
+ }
2691
+ .table.cards tbody tr.active-row td {
2692
+ color: var(--lmn-table-accent-ink, var(--accent-ink));
2693
+ }
2147
2694
  .table .row-check { width: 44px; }
2148
2695
  .table .row-check .checkbox { display: inline-flex; }
2149
2696
  .table .row-expand { width: 40px; text-align: center; }
2150
- .table-empty { padding: 60px 20px; text-align: center; color: var(--fg-muted); }
2697
+ .table .table-empty {
2698
+ padding: 0;
2699
+ color: var(--lmn-table-fg-muted, var(--fg-muted));
2700
+ }
2701
+ .table-empty-content {
2702
+ box-sizing: border-box;
2703
+ width: 100%;
2704
+ padding: 60px 20px;
2705
+ text-align: center;
2706
+ }
2707
+ .table-wrap.scroll-x .table-empty-content {
2708
+ position: sticky;
2709
+ left: 0;
2710
+ width: 100cqi;
2711
+ }
2151
2712
  /* Expand button */
2152
2713
  .expand-btn {
2153
2714
  width: 22px; height: 22px;
2154
2715
  border: none;
2155
2716
  border-radius: var(--r-sm);
2156
- background: var(--bg);
2157
- box-shadow: var(--neu-shadow-subtle);
2158
- color: var(--fg-subtle);
2717
+ background: var(--lmn-table-bg, var(--bg));
2718
+ box-shadow: var(--lmn-table-neu-shadow-subtle, var(--neu-shadow-subtle));
2719
+ color: var(--lmn-table-fg-subtle, var(--fg-subtle));
2159
2720
  display: inline-flex; align-items: center; justify-content: center;
2160
2721
  cursor: pointer;
2161
2722
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
2162
2723
  }
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); }
2724
+ .expand-btn:hover { color: var(--lmn-table-accent-ink, var(--accent-ink)); box-shadow: var(--lmn-table-neu-shadow-control, var(--neu-shadow-control)); }
2725
+ .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
2726
  /* Expanded row panel */
2166
2727
  .table tbody tr.expanded-row td {
2167
2728
  padding: 14px 18px;
2168
- border-bottom: 1px solid var(--divider);
2169
- background: color-mix(in oklch, var(--bg-sunken) 25%, transparent);
2729
+ border-bottom: 1px solid var(--lmn-table-divider, var(--divider));
2730
+ background: color-mix(in oklch, var(--lmn-table-bg-sunken, var(--bg-sunken)) 25%, transparent);
2170
2731
  }
2171
2732
  .expanded-panel {
2172
2733
  padding: 14px 16px;
2173
2734
  border-radius: var(--r-md);
2174
- background: var(--bg);
2175
- box-shadow: var(--neu-shadow-inset);
2176
- color: var(--fg);
2735
+ background: var(--lmn-table-bg, var(--bg));
2736
+ box-shadow: var(--lmn-table-neu-shadow-inset, var(--neu-shadow-inset));
2737
+ color: var(--lmn-table-fg, var(--fg));
2177
2738
  font-size: 13px;
2178
2739
  }
2179
2740
  /* Radio-style row selector */
@@ -2182,30 +2743,30 @@ input, textarea, select { font-family: inherit; color: inherit; }
2182
2743
  border-radius: 50%;
2183
2744
  border: none;
2184
2745
  padding: 0;
2185
- background: var(--bg);
2186
- box-shadow: var(--neu-shadow-inset);
2746
+ background: var(--lmn-table-bg, var(--bg));
2747
+ box-shadow: var(--lmn-table-neu-shadow-inset, var(--neu-shadow-inset));
2187
2748
  display: inline-flex; align-items: center; justify-content: center;
2188
2749
  cursor: pointer;
2189
2750
  transition: box-shadow var(--dur-fast) var(--ease);
2190
2751
  }
2191
2752
  .table .row-check .radio-dot:disabled { opacity: 0.5; cursor: not-allowed; }
2192
2753
  .table .row-check .radio-dot.checked {
2193
- box-shadow: var(--neu-shadow-control);
2754
+ box-shadow: var(--lmn-table-neu-shadow-control, var(--neu-shadow-control));
2194
2755
  }
2195
2756
  .table .row-check .radio-dot.checked::after {
2196
2757
  content: "";
2197
2758
  width: 8px; height: 8px;
2198
2759
  border-radius: 50%;
2199
- background: var(--accent);
2760
+ background: var(--lmn-table-accent, var(--accent));
2200
2761
  }
2201
2762
  /* Filter button on header */
2202
2763
  .table th.filterable .filter-ind {
2203
2764
  display: inline-flex;
2204
2765
  width: 18px; height: 18px;
2205
2766
  border-radius: 5px;
2206
- background: var(--bg);
2207
- box-shadow: var(--neu-shadow-subtle);
2208
- color: var(--fg-subtle);
2767
+ background: var(--lmn-table-bg, var(--bg));
2768
+ box-shadow: var(--lmn-table-neu-shadow-subtle, var(--neu-shadow-subtle));
2769
+ color: var(--lmn-table-fg-subtle, var(--fg-subtle));
2209
2770
  align-items: center; justify-content: center;
2210
2771
  margin-left: 6px;
2211
2772
  cursor: pointer;
@@ -2214,19 +2775,19 @@ input, textarea, select { font-family: inherit; color: inherit; }
2214
2775
  padding: 0;
2215
2776
  transition: color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
2216
2777
  }
2217
- .table th.filterable .filter-ind:hover { color: var(--fg); }
2778
+ .table th.filterable .filter-ind:hover { color: var(--lmn-table-fg, var(--fg)); }
2218
2779
  .table th.filterable .filter-ind.active {
2219
- color: var(--accent-ink);
2220
- box-shadow: var(--neu-shadow-inset);
2780
+ color: var(--lmn-table-accent-ink, var(--accent-ink));
2781
+ box-shadow: var(--lmn-table-neu-shadow-inset, var(--neu-shadow-inset));
2221
2782
  }
2222
2783
  /* Filter popover panel (portaled to body) */
2223
2784
  .table-filter-panel {
2224
2785
  z-index: 1001;
2225
2786
  min-width: 200px;
2226
2787
  max-width: 260px;
2227
- background: var(--bg);
2788
+ background: var(--lmn-table-bg, var(--bg));
2228
2789
  border-radius: var(--r-md);
2229
- box-shadow: var(--neu-shadow-float);
2790
+ box-shadow: var(--lmn-table-neu-shadow-float, var(--neu-shadow-float));
2230
2791
  padding: 10px;
2231
2792
  animation: menuIn var(--dur) var(--ease);
2232
2793
  }
@@ -2245,12 +2806,12 @@ input, textarea, select { font-family: inherit; color: inherit; }
2245
2806
  padding: 6px 8px;
2246
2807
  border-radius: var(--r-sm);
2247
2808
  font-size: 13px;
2248
- color: var(--fg);
2809
+ color: var(--lmn-table-fg, var(--fg));
2249
2810
  cursor: pointer;
2250
2811
  transition: background var(--dur-fast) var(--ease);
2251
2812
  }
2252
2813
  .table-filter-item:hover {
2253
- background: color-mix(in oklch, var(--accent-soft) 40%, transparent);
2814
+ background: color-mix(in oklch, var(--lmn-table-accent-soft, var(--accent-soft)) 40%, transparent);
2254
2815
  }
2255
2816
  .table-filter-actions {
2256
2817
  display: flex;
@@ -2258,24 +2819,35 @@ input, textarea, select { font-family: inherit; color: inherit; }
2258
2819
  gap: 6px;
2259
2820
  margin-top: 6px;
2260
2821
  padding-top: 8px;
2261
- border-top: 1px solid var(--divider);
2822
+ border-top: 1px solid var(--lmn-table-divider, var(--divider));
2262
2823
  }
2263
2824
  .table-filter-actions .tf-btn {
2264
2825
  border: none;
2265
2826
  padding: 6px 12px;
2266
2827
  border-radius: var(--r-sm);
2267
- background: var(--bg);
2268
- box-shadow: var(--neu-shadow-control);
2828
+ background: var(--lmn-table-bg, var(--bg));
2829
+ box-shadow: var(--lmn-table-neu-shadow-control, var(--neu-shadow-control));
2269
2830
  font-size: 12px;
2270
2831
  font-family: inherit;
2271
- color: var(--fg);
2832
+ color: var(--lmn-table-fg, var(--fg));
2272
2833
  cursor: pointer;
2273
2834
  transition: box-shadow var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
2274
2835
  }
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); }
2836
+ .table-filter-actions .tf-btn:hover { box-shadow: var(--lmn-table-neu-shadow-inset, var(--neu-shadow-inset)); }
2837
+ .table-filter-actions .tf-btn.primary { color: var(--lmn-table-accent-ink, var(--accent-ink)); font-weight: 600; }
2838
+ .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)); }
2839
+ .table-filter-actions .tf-btn.ghost:hover { box-shadow: var(--lmn-table-neu-shadow-inset, var(--neu-shadow-inset)); }
2840
+ .table-sr-only {
2841
+ position: absolute;
2842
+ width: 1px;
2843
+ height: 1px;
2844
+ padding: 0;
2845
+ margin: -1px;
2846
+ overflow: hidden;
2847
+ clip: rect(0, 0, 0, 0);
2848
+ white-space: nowrap;
2849
+ border: 0;
2850
+ }
2279
2851
  /* Built-in pagination bar */
2280
2852
  .table-pagination {
2281
2853
  margin-top: 12px;
@@ -2283,8 +2855,8 @@ input, textarea, select { font-family: inherit; color: inherit; }
2283
2855
  /* ============ TablePro ============ */
2284
2856
  .table-card {
2285
2857
  border-radius: var(--r-lg);
2286
- background: var(--bg);
2287
- box-shadow: var(--neu-shadow-control);
2858
+ background: var(--lmn-table-pro-bg, var(--bg));
2859
+ box-shadow: var(--lmn-table-pro-neu-shadow-control, var(--neu-shadow-control));
2288
2860
  overflow: hidden;
2289
2861
  }
2290
2862
  .table-card .table-wrap { background: transparent; box-shadow: none; border-radius: 0; }
@@ -2292,7 +2864,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
2292
2864
  .table-card .table-pagination {
2293
2865
  margin-top: 0;
2294
2866
  padding: 6px 16px;
2295
- border-top: 1px solid var(--divider);
2867
+ border-top: 1px solid var(--lmn-table-pro-divider, var(--divider));
2296
2868
  background: transparent;
2297
2869
  }
2298
2870
  .table-toolbar {
@@ -2300,7 +2872,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
2300
2872
  align-items: center;
2301
2873
  gap: var(--gap-3);
2302
2874
  padding: 14px 16px;
2303
- border-bottom: 1px solid var(--divider);
2875
+ border-bottom: 1px solid var(--lmn-table-pro-divider, var(--divider));
2304
2876
  }
2305
2877
  .table-toolbar .table-title {
2306
2878
  font-size: 14px;
@@ -2322,7 +2894,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
2322
2894
  }
2323
2895
  .table-footer {
2324
2896
  padding: 10px 16px;
2325
- border-top: 1px solid var(--divider);
2897
+ border-top: 1px solid var(--lmn-table-pro-divider, var(--divider));
2326
2898
  background: transparent;
2327
2899
  }
2328
2900
  /* ============ Pagination ============ */
@@ -2332,7 +2904,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
2332
2904
  justify-content: space-between;
2333
2905
  padding: 12px 14px;
2334
2906
  font-size: 12px;
2335
- color: var(--fg-muted);
2907
+ color: var(--lmn-pagination-fg-muted, var(--fg-muted));
2336
2908
  gap: 12px;
2337
2909
  flex-wrap: wrap;
2338
2910
  }
@@ -2342,24 +2914,24 @@ input, textarea, select { font-family: inherit; color: inherit; }
2342
2914
  padding: 0 10px;
2343
2915
  border: none;
2344
2916
  border-radius: var(--r-sm);
2345
- background: var(--bg);
2346
- box-shadow: var(--neu-shadow-control);
2917
+ background: var(--lmn-pagination-bg, var(--bg));
2918
+ box-shadow: var(--lmn-pagination-neu-shadow-control, var(--neu-shadow-control));
2347
2919
  display: inline-flex; align-items: center; justify-content: center;
2348
2920
  cursor: pointer;
2349
2921
  font-size: 12px;
2350
2922
  font-family: inherit;
2351
2923
  font-variant-numeric: tabular-nums;
2352
- color: var(--fg);
2924
+ color: var(--lmn-pagination-fg, var(--fg));
2353
2925
  transition: all var(--dur-fast) var(--ease);
2354
2926
  }
2355
- .pagination .pg:hover { color: var(--accent-ink); }
2927
+ .pagination .pg:hover { color: var(--lmn-pagination-accent-ink, var(--accent-ink)); }
2356
2928
  .pagination .pg.active {
2357
- box-shadow: var(--neu-shadow-inset);
2358
- color: var(--accent-ink);
2929
+ box-shadow: var(--lmn-pagination-neu-shadow-inset, var(--neu-shadow-inset));
2930
+ color: var(--lmn-pagination-accent-ink, var(--accent-ink));
2359
2931
  font-weight: 700;
2360
2932
  }
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); }
2933
+ .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)); }
2934
+ .pagination .ellipsis { padding: 0 4px; color: var(--lmn-pagination-fg-subtle, var(--fg-subtle)); }
2363
2935
  /* size changer — compact Select inline with the page buttons */
2364
2936
  .pagination .pg-size-changer { margin-left: 8px; min-width: 108px; }
2365
2937
  /* quick jumper */
@@ -2368,36 +2940,37 @@ input, textarea, select { font-family: inherit; color: inherit; }
2368
2940
  align-items: center;
2369
2941
  gap: 6px;
2370
2942
  margin-left: 8px;
2371
- color: var(--fg-muted);
2943
+ color: var(--lmn-pagination-fg-muted, var(--fg-muted));
2372
2944
  font-size: 12px;
2373
2945
  }
2374
- .pagination .pg-jumper-label { color: var(--fg-muted); }
2946
+ .pagination .pg-jumper-label { color: var(--lmn-pagination-fg-muted, var(--fg-muted)); }
2375
2947
  .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;
2948
+ width: 52px;
2949
+ }
2950
+ .pagination .pg-jumper-input .input {
2386
2951
  font-variant-numeric: tabular-nums;
2387
2952
  text-align: center;
2388
- outline: none;
2389
- transition: box-shadow var(--dur-fast) var(--ease);
2390
2953
  }
2391
- .pagination .pg-jumper-input:focus-visible {
2392
- box-shadow: var(--neu-shadow-inset), 0 0 0 2px var(--accent-glow);
2954
+ @media (max-width: 480px) {
2955
+ .pagination {
2956
+ align-items: flex-start;
2957
+ padding-inline: 8px;
2958
+ }
2959
+ .pagination .pg-controls {
2960
+ flex-wrap: wrap;
2961
+ }
2962
+ .pagination .pg-size-changer,
2963
+ .pagination .pg-jumper {
2964
+ margin-left: 0;
2965
+ }
2393
2966
  }
2394
2967
  /* ============ List ============ */
2395
2968
  .list {
2396
2969
  display: flex;
2397
2970
  flex-direction: column;
2398
- background: var(--bg);
2971
+ background: var(--lmn-list-bg, var(--bg));
2399
2972
  border-radius: var(--r-lg);
2400
- box-shadow: var(--neu-shadow-inset);
2973
+ box-shadow: var(--lmn-list-neu-shadow-inset, var(--neu-shadow-inset));
2401
2974
  padding: 8px;
2402
2975
  }
2403
2976
  .list-item {
@@ -2408,15 +2981,31 @@ input, textarea, select { font-family: inherit; color: inherit; }
2408
2981
  border-radius: var(--r-sm);
2409
2982
  transition: all var(--dur-fast) var(--ease);
2410
2983
  }
2984
+ .list-item-trigger {
2985
+ display: flex;
2986
+ align-items: center;
2987
+ gap: 12px;
2988
+ flex: 1;
2989
+ min-width: 0;
2990
+ }
2991
+ button.list-item-trigger {
2992
+ border: 0;
2993
+ padding: 0;
2994
+ background: transparent;
2995
+ color: inherit;
2996
+ font: inherit;
2997
+ text-align: left;
2998
+ cursor: pointer;
2999
+ }
2411
3000
  .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; }
3001
+ .list-item.clickable:hover { background: var(--lmn-list-bg, var(--bg)); box-shadow: var(--lmn-list-neu-shadow-subtle, var(--neu-shadow-subtle)); }
3002
+ .list-item.selected { box-shadow: var(--lmn-list-neu-shadow-control, var(--neu-shadow-control)); background: var(--lmn-list-bg, var(--bg)); }
3003
+ .list.with-dividers .list-item + .list-item { border-top: 1px solid var(--lmn-list-divider, var(--divider)); border-radius: 0; }
2415
3004
  .list-item-meta { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
2416
3005
  .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; }
3006
+ .list-item-desc { font-size: 12px; color: var(--lmn-list-fg-muted, var(--fg-muted)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
2418
3007
  .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; }
3008
+ .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
3009
  /* ============ Spin ============ */
2421
3010
  .spin {
2422
3011
  width: 14px;
@@ -2427,17 +3016,17 @@ input, textarea, select { font-family: inherit; color: inherit; }
2427
3016
  animation: spin 0.8s linear infinite;
2428
3017
  display: inline-block;
2429
3018
  }
2430
- .spin.accent { color: var(--accent); }
2431
- .spin.success { color: var(--success); }
2432
- .spin.warning { color: var(--warning); }
2433
- .spin.danger { color: var(--danger); }
3019
+ .spin.accent { color: var(--lmn-spin-accent, var(--accent)); }
3020
+ .spin.success { color: var(--lmn-spin-success, var(--success)); }
3021
+ .spin.warning { color: var(--lmn-spin-warning, var(--warning)); }
3022
+ .spin.danger { color: var(--lmn-spin-danger, var(--danger)); }
2434
3023
  .spin.ring {
2435
3024
  position: relative;
2436
3025
  display: inline-block;
2437
3026
  border: none;
2438
3027
  border-radius: 50%;
2439
- background: var(--bg);
2440
- box-shadow: var(--neu-shadow-inset);
3028
+ background: var(--lmn-spin-bg, var(--bg));
3029
+ box-shadow: var(--lmn-spin-neu-shadow-inset, var(--neu-shadow-inset));
2441
3030
  animation: none;
2442
3031
  }
2443
3032
  .spin.ring::before {
@@ -2479,9 +3068,9 @@ input, textarea, select { font-family: inherit; color: inherit; }
2479
3068
  height: 0.4em;
2480
3069
  border-radius: 999px;
2481
3070
  background: radial-gradient(circle at 32% 28%,
2482
- color-mix(in oklch, currentColor 40%, var(--bg)),
3071
+ color-mix(in oklch, currentColor 40%, var(--lmn-spin-bg, var(--bg))),
2483
3072
  currentColor 62%,
2484
- color-mix(in oklch, currentColor 82%, var(--fg)) 100%);
3073
+ color-mix(in oklch, currentColor 82%, var(--lmn-spin-fg, var(--fg))) 100%);
2485
3074
  box-shadow:
2486
3075
  0 0.06em 0.14em color-mix(in oklch, currentColor 45%, transparent),
2487
3076
  0 0 0.35em color-mix(in oklch, currentColor 50%, transparent);
@@ -2498,15 +3087,20 @@ input, textarea, select { font-family: inherit; color: inherit; }
2498
3087
  display: inline-flex;
2499
3088
  align-items: center;
2500
3089
  gap: 8px;
2501
- color: var(--fg-muted);
3090
+ color: var(--lmn-spin-fg-muted, var(--fg-muted));
2502
3091
  }
2503
3092
  .spin-label { font-size: 12px; }
3093
+ @media (prefers-reduced-motion: reduce) {
3094
+ .spin,
3095
+ .spin.ring::before,
3096
+ .spin.dots i { animation: none; }
3097
+ }
2504
3098
  /* ============ Empty ============ */
2505
3099
  .empty {
2506
3100
  padding: 60px 20px;
2507
3101
  display: grid; place-items: center;
2508
3102
  gap: 12px;
2509
- color: var(--fg-muted);
3103
+ color: var(--lmn-empty-fg-muted, var(--fg-muted));
2510
3104
  text-align: center;
2511
3105
  }
2512
3106
  .empty.sm { padding: 28px 16px; gap: 8px; }
@@ -2521,25 +3115,25 @@ input, textarea, select { font-family: inherit; color: inherit; }
2521
3115
  .empty-ico {
2522
3116
  width: 56px; height: 56px;
2523
3117
  border-radius: var(--r-lg);
2524
- background: var(--bg);
2525
- box-shadow: var(--neu-shadow-inset);
3118
+ background: var(--lmn-empty-bg, var(--bg));
3119
+ box-shadow: var(--lmn-empty-neu-shadow-inset, var(--neu-shadow-inset));
2526
3120
  display: grid; place-items: center;
2527
- color: var(--fg-subtle);
3121
+ color: var(--lmn-empty-fg-subtle, var(--fg-subtle));
2528
3122
  }
2529
- .empty-title { font-size: 14px; font-weight: 600; color: var(--fg); }
3123
+ .empty-title { font-size: 14px; font-weight: 600; color: var(--lmn-empty-fg, var(--fg)); }
2530
3124
  .empty-desc { font-size: 12px; }
2531
3125
  .empty-action { margin-top: 8px; }
2532
3126
  /* ============ Skeleton ============ */
2533
3127
  .skeleton {
2534
3128
  display: block;
2535
- background: color-mix(in oklch, var(--accent-soft) 55%, var(--bg-sunken));
3129
+ background: color-mix(in oklch, var(--lmn-skeleton-accent-soft, var(--accent-soft)) 55%, var(--lmn-skeleton-bg-sunken, var(--bg-sunken)));
2536
3130
  border-radius: var(--r-sm);
2537
3131
  }
2538
3132
  .skeleton.wave {
2539
3133
  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)));
3134
+ color-mix(in oklch, var(--lmn-skeleton-accent-soft, var(--accent-soft)) 35%, var(--lmn-skeleton-bg-sunken, var(--bg-sunken))),
3135
+ color-mix(in oklch, var(--lmn-skeleton-accent-soft, var(--accent-soft)) 75%, var(--lmn-skeleton-bg-sunken, var(--bg-sunken))),
3136
+ color-mix(in oklch, var(--lmn-skeleton-accent-soft, var(--accent-soft)) 35%, var(--lmn-skeleton-bg-sunken, var(--bg-sunken))));
2543
3137
  background-size: 200% 100%;
2544
3138
  animation: skel-wave 1.4s ease-in-out infinite;
2545
3139
  }
@@ -2568,6 +3162,10 @@ input, textarea, select { font-family: inherit; color: inherit; }
2568
3162
  .skeleton-box .skeleton-row {
2569
3163
  display: block;
2570
3164
  }
3165
+ @media (prefers-reduced-motion: reduce) {
3166
+ .skeleton.wave,
3167
+ .skeleton.pulse { animation: none; }
3168
+ }
2571
3169
  /* ============ DatePicker ============ */
2572
3170
  .date-picker {
2573
3171
  position: relative;
@@ -2586,7 +3184,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
2586
3184
  width: 100%;
2587
3185
  }
2588
3186
  .date-picker.open .input-wrap {
2589
- box-shadow: var(--neu-shadow-inset);
3187
+ box-shadow: var(--lmn-date-picker-neu-shadow-inset, var(--neu-shadow-inset));
2590
3188
  }
2591
3189
  .date-picker-panel {
2592
3190
  position: fixed;
@@ -2594,8 +3192,8 @@ input, textarea, select { font-family: inherit; color: inherit; }
2594
3192
  width: 344px;
2595
3193
  padding: var(--gap-3);
2596
3194
  border-radius: var(--r-md);
2597
- background: var(--bg);
2598
- box-shadow: var(--neu-shadow-float);
3195
+ background: var(--lmn-date-picker-bg, var(--bg));
3196
+ box-shadow: var(--lmn-date-picker-neu-shadow-float, var(--neu-shadow-float));
2599
3197
  animation: menuIn var(--dur) var(--ease);
2600
3198
  }
2601
3199
  .date-picker-panel .calendar {
@@ -2613,7 +3211,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
2613
3211
  gap: var(--gap-2);
2614
3212
  margin-top: var(--gap-3);
2615
3213
  padding-top: var(--gap-3);
2616
- border-top: 1px solid var(--divider);
3214
+ border-top: 1px solid var(--lmn-date-picker-divider, var(--divider));
2617
3215
  }
2618
3216
  .date-picker-footer-spacer {
2619
3217
  flex: 1;
@@ -2637,7 +3235,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
2637
3235
  width: 100%;
2638
3236
  }
2639
3237
  .date-time-picker.open .input-wrap {
2640
- box-shadow: var(--neu-shadow-inset);
3238
+ box-shadow: var(--lmn-date-time-picker-neu-shadow-inset, var(--neu-shadow-inset));
2641
3239
  }
2642
3240
  .date-time-picker-panel {
2643
3241
  position: fixed;
@@ -2645,10 +3243,10 @@ input, textarea, select { font-family: inherit; color: inherit; }
2645
3243
  width: 476px;
2646
3244
  padding: var(--gap-2) var(--gap-3);
2647
3245
  border-radius: var(--r-md);
2648
- background: var(--bg);
3246
+ background: var(--lmn-date-time-picker-bg, var(--bg));
2649
3247
  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);
3248
+ 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),
3249
+ inset 0 0 0 1px var(--lmn-date-time-picker-divider, var(--divider));
2652
3250
  animation: menuIn var(--dur) var(--ease);
2653
3251
  }
2654
3252
  .date-time-picker-body {
@@ -2706,8 +3304,8 @@ input, textarea, select { font-family: inherit; color: inherit; }
2706
3304
  grid-template-columns: repeat(3, minmax(0, 1fr));
2707
3305
  padding: 8px;
2708
3306
  border-radius: var(--r-sm);
2709
- background: var(--bg);
2710
- box-shadow: inset 0 0 0 1px var(--divider);
3307
+ background: var(--lmn-date-time-picker-bg, var(--bg));
3308
+ box-shadow: inset 0 0 0 1px var(--lmn-date-time-picker-divider, var(--divider));
2711
3309
  overflow: hidden;
2712
3310
  }
2713
3311
  .date-time-picker-panel.without-second .date-time-picker-time-columns {
@@ -2717,7 +3315,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
2717
3315
  min-width: 0;
2718
3316
  }
2719
3317
  .date-time-picker-time-column + .date-time-picker-time-column {
2720
- border-left: 1px solid var(--divider);
3318
+ border-left: 1px solid var(--lmn-date-time-picker-divider, var(--divider));
2721
3319
  }
2722
3320
  .date-time-picker-time-label {
2723
3321
  height: 20px;
@@ -2725,7 +3323,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
2725
3323
  place-items: center;
2726
3324
  font-size: var(--fs-xs);
2727
3325
  font-weight: 700;
2728
- color: var(--fg-muted);
3326
+ color: var(--lmn-date-time-picker-fg-muted, var(--fg-muted));
2729
3327
  }
2730
3328
  .date-time-picker-time-list {
2731
3329
  display: flex;
@@ -2750,7 +3348,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
2750
3348
  border: none;
2751
3349
  border-radius: 7px;
2752
3350
  background: transparent;
2753
- color: var(--fg);
3351
+ color: var(--lmn-date-time-picker-fg, var(--fg));
2754
3352
  cursor: pointer;
2755
3353
  font: 600 var(--fs-md) var(--font-mono);
2756
3354
  transition:
@@ -2759,17 +3357,17 @@ input, textarea, select { font-family: inherit; color: inherit; }
2759
3357
  box-shadow var(--dur-fast) var(--ease);
2760
3358
  }
2761
3359
  .date-time-picker-time-option:hover:not(:disabled) {
2762
- color: var(--accent-ink);
2763
- background: var(--bg);
2764
- box-shadow: var(--neu-shadow-subtle);
3360
+ color: var(--lmn-date-time-picker-accent-ink, var(--accent-ink));
3361
+ background: var(--lmn-date-time-picker-bg, var(--bg));
3362
+ box-shadow: var(--lmn-date-time-picker-neu-shadow-subtle, var(--neu-shadow-subtle));
2765
3363
  }
2766
3364
  .date-time-picker-time-option.selected {
2767
- color: var(--accent-ink);
2768
- background: var(--bg);
2769
- box-shadow: var(--neu-shadow-subtle);
3365
+ color: var(--lmn-date-time-picker-accent-ink, var(--accent-ink));
3366
+ background: var(--lmn-date-time-picker-bg, var(--bg));
3367
+ box-shadow: var(--lmn-date-time-picker-neu-shadow-subtle, var(--neu-shadow-subtle));
2770
3368
  }
2771
3369
  .date-time-picker-time-option:disabled {
2772
- color: var(--fg-subtle);
3370
+ color: var(--lmn-date-time-picker-fg-subtle, var(--fg-subtle));
2773
3371
  cursor: not-allowed;
2774
3372
  opacity: 0.45;
2775
3373
  }
@@ -2779,7 +3377,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
2779
3377
  gap: var(--gap-2);
2780
3378
  margin-top: var(--gap-2);
2781
3379
  padding-top: var(--gap-2);
2782
- border-top: 1px solid var(--divider);
3380
+ border-top: 1px solid var(--lmn-date-time-picker-divider, var(--divider));
2783
3381
  }
2784
3382
  .date-time-picker-footer-spacer {
2785
3383
  flex: 1;
@@ -2813,10 +3411,10 @@ input, textarea, select { font-family: inherit; color: inherit; }
2813
3411
  }
2814
3412
  /* ============ Calendar ============ */
2815
3413
  .calendar {
2816
- background: var(--bg);
3414
+ background: var(--lmn-calendar-bg, var(--bg));
2817
3415
  border-radius: var(--r-lg);
2818
3416
  padding: var(--gap-4);
2819
- box-shadow: var(--neu-shadow-panel);
3417
+ box-shadow: var(--lmn-calendar-neu-shadow-panel, var(--neu-shadow-panel));
2820
3418
  width: 320px;
2821
3419
  }
2822
3420
  .calendar-head {
@@ -2827,11 +3425,11 @@ input, textarea, select { font-family: inherit; color: inherit; }
2827
3425
  font-size: 14px; font-weight: 600;
2828
3426
  display: inline-flex; align-items: center; gap: 8px;
2829
3427
  cursor: pointer; padding: 6px 10px; border-radius: var(--r-sm);
2830
- border: none; background: transparent; color: var(--fg);
3428
+ border: none; background: transparent; color: var(--lmn-calendar-fg, var(--fg));
2831
3429
  font-family: inherit;
2832
3430
  transition: all var(--dur-fast) var(--ease);
2833
3431
  }
2834
- .calendar-title:hover { background: var(--bg); box-shadow: var(--neu-shadow-subtle); }
3432
+ .calendar-title:hover { background: var(--lmn-calendar-bg, var(--bg)); box-shadow: var(--lmn-calendar-neu-shadow-subtle, var(--neu-shadow-subtle)); }
2835
3433
  .calendar-title.static {
2836
3434
  cursor: default;
2837
3435
  }
@@ -2849,7 +3447,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
2849
3447
  border-radius: var(--r-sm);
2850
3448
  padding: 6px 8px;
2851
3449
  background: transparent;
2852
- color: var(--fg);
3450
+ color: var(--lmn-calendar-fg, var(--fg));
2853
3451
  cursor: pointer;
2854
3452
  font: 600 14px var(--font-sans);
2855
3453
  transition:
@@ -2858,9 +3456,9 @@ input, textarea, select { font-family: inherit; color: inherit; }
2858
3456
  box-shadow var(--dur-fast) var(--ease);
2859
3457
  }
2860
3458
  .calendar-title-part:hover {
2861
- color: var(--accent-ink);
2862
- background: var(--bg);
2863
- box-shadow: var(--neu-shadow-subtle);
3459
+ color: var(--lmn-calendar-accent-ink, var(--accent-ink));
3460
+ background: var(--lmn-calendar-bg, var(--bg));
3461
+ box-shadow: var(--lmn-calendar-neu-shadow-subtle, var(--neu-shadow-subtle));
2864
3462
  }
2865
3463
  .calendar-grid {
2866
3464
  display: grid;
@@ -2871,7 +3469,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
2871
3469
  text-align: center;
2872
3470
  font-size: 10px;
2873
3471
  font-weight: 600;
2874
- color: var(--fg-subtle);
3472
+ color: var(--lmn-calendar-fg-subtle, var(--fg-subtle));
2875
3473
  text-transform: uppercase;
2876
3474
  letter-spacing: 0.06em;
2877
3475
  padding: 8px 0;
@@ -2881,7 +3479,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
2881
3479
  aspect-ratio: 1;
2882
3480
  display: grid; place-items: center;
2883
3481
  font-size: 12px;
2884
- color: var(--fg);
3482
+ color: var(--lmn-calendar-fg, var(--fg));
2885
3483
  border-radius: var(--r-sm);
2886
3484
  cursor: pointer;
2887
3485
  border: none;
@@ -2889,22 +3487,22 @@ input, textarea, select { font-family: inherit; color: inherit; }
2889
3487
  font-family: inherit;
2890
3488
  transition: all var(--dur-fast) var(--ease);
2891
3489
  }
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); }
3490
+ .calendar-cell.out { color: var(--lmn-calendar-fg-subtle, var(--fg-subtle)); opacity: 0.5; }
3491
+ .calendar-cell:hover { background: var(--lmn-calendar-bg, var(--bg)); box-shadow: var(--lmn-calendar-neu-shadow-subtle, var(--neu-shadow-subtle)); }
3492
+ .calendar-cell.today { font-weight: 700; color: var(--lmn-calendar-accent-ink, var(--accent-ink)); }
2895
3493
  .calendar-cell.today::after {
2896
3494
  content: ""; position: absolute; bottom: 4px; left: 50%;
2897
3495
  width: 4px; height: 4px; border-radius: 999px;
2898
- background: var(--accent);
3496
+ background: var(--lmn-calendar-accent, var(--accent));
2899
3497
  transform: translateX(-50%);
2900
3498
  }
2901
3499
  .calendar-cell.selected {
2902
- background: var(--bg);
2903
- box-shadow: var(--neu-shadow-inset);
2904
- color: var(--accent-ink);
3500
+ background: var(--lmn-calendar-bg, var(--bg));
3501
+ box-shadow: var(--lmn-calendar-neu-shadow-inset, var(--neu-shadow-inset));
3502
+ color: var(--lmn-calendar-accent-ink, var(--accent-ink));
2905
3503
  font-weight: 600;
2906
3504
  }
2907
- .calendar-cell.disabled { color: var(--fg-subtle); opacity: 0.4; cursor: not-allowed; }
3505
+ .calendar-cell.disabled { color: var(--lmn-calendar-fg-subtle, var(--fg-subtle)); opacity: 0.4; cursor: not-allowed; }
2908
3506
  .calendar-cell.disabled:hover { background: transparent; box-shadow: none; }
2909
3507
  .calendar-select-grid {
2910
3508
  display: grid;
@@ -2918,7 +3516,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
2918
3516
  border: none;
2919
3517
  border-radius: var(--r-sm);
2920
3518
  background: transparent;
2921
- color: var(--fg);
3519
+ color: var(--lmn-calendar-fg, var(--fg));
2922
3520
  cursor: pointer;
2923
3521
  font: 600 var(--fs-md) var(--font-mono);
2924
3522
  transition:
@@ -2927,17 +3525,17 @@ input, textarea, select { font-family: inherit; color: inherit; }
2927
3525
  box-shadow var(--dur-fast) var(--ease);
2928
3526
  }
2929
3527
  .calendar-select-option:hover:not(:disabled) {
2930
- color: var(--accent-ink);
2931
- background: var(--bg);
2932
- box-shadow: var(--neu-shadow-subtle);
3528
+ color: var(--lmn-calendar-accent-ink, var(--accent-ink));
3529
+ background: var(--lmn-calendar-bg, var(--bg));
3530
+ box-shadow: var(--lmn-calendar-neu-shadow-subtle, var(--neu-shadow-subtle));
2933
3531
  }
2934
3532
  .calendar-select-option.selected {
2935
- color: var(--accent-ink);
2936
- background: var(--bg);
2937
- box-shadow: var(--neu-shadow-inset);
3533
+ color: var(--lmn-calendar-accent-ink, var(--accent-ink));
3534
+ background: var(--lmn-calendar-bg, var(--bg));
3535
+ box-shadow: var(--lmn-calendar-neu-shadow-inset, var(--neu-shadow-inset));
2938
3536
  }
2939
3537
  .calendar-select-option.disabled {
2940
- color: var(--fg-subtle);
3538
+ color: var(--lmn-calendar-fg-subtle, var(--fg-subtle));
2941
3539
  cursor: not-allowed;
2942
3540
  opacity: 0.4;
2943
3541
  }
@@ -2959,7 +3557,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
2959
3557
  width: 100%;
2960
3558
  }
2961
3559
  .time-picker.open .input-wrap {
2962
- box-shadow: var(--neu-shadow-inset);
3560
+ box-shadow: var(--lmn-time-picker-neu-shadow-inset, var(--neu-shadow-inset));
2963
3561
  }
2964
3562
  .time-picker-panel {
2965
3563
  position: fixed;
@@ -2967,10 +3565,10 @@ input, textarea, select { font-family: inherit; color: inherit; }
2967
3565
  width: 300px;
2968
3566
  padding: 10px;
2969
3567
  border-radius: var(--r-md);
2970
- background: var(--bg);
3568
+ background: var(--lmn-time-picker-bg, var(--bg));
2971
3569
  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);
3570
+ 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),
3571
+ inset 0 0 0 1px var(--lmn-time-picker-divider, var(--divider));
2974
3572
  animation: menuIn var(--dur) var(--ease);
2975
3573
  }
2976
3574
  .time-picker-panel.without-second {
@@ -2983,12 +3581,12 @@ input, textarea, select { font-family: inherit; color: inherit; }
2983
3581
  gap: 0;
2984
3582
  padding: 8px;
2985
3583
  border-radius: var(--r-sm);
2986
- background: var(--bg);
2987
- box-shadow: inset 0 0 0 1px var(--divider);
3584
+ background: var(--lmn-time-picker-bg, var(--bg));
3585
+ box-shadow: inset 0 0 0 1px var(--lmn-time-picker-divider, var(--divider));
2988
3586
  overflow: hidden;
2989
3587
  }
2990
3588
  .time-picker-column + .time-picker-column {
2991
- border-left: 1px solid var(--divider);
3589
+ border-left: 1px solid var(--lmn-time-picker-divider, var(--divider));
2992
3590
  }
2993
3591
  .time-picker-panel.without-second .time-picker-columns {
2994
3592
  grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -3004,7 +3602,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
3004
3602
  place-items: center;
3005
3603
  font-size: var(--fs-xs);
3006
3604
  font-weight: 700;
3007
- color: var(--fg-muted);
3605
+ color: var(--lmn-time-picker-fg-muted, var(--fg-muted));
3008
3606
  }
3009
3607
  .time-picker-list {
3010
3608
  display: flex;
@@ -3034,7 +3632,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
3034
3632
  border: none;
3035
3633
  border-radius: 7px;
3036
3634
  background: transparent;
3037
- color: var(--fg);
3635
+ color: var(--lmn-time-picker-fg, var(--fg));
3038
3636
  cursor: pointer;
3039
3637
  font: 600 var(--fs-md) var(--font-mono);
3040
3638
  transition:
@@ -3043,17 +3641,17 @@ input, textarea, select { font-family: inherit; color: inherit; }
3043
3641
  box-shadow var(--dur-fast) var(--ease);
3044
3642
  }
3045
3643
  .time-picker-option:hover:not(:disabled) {
3046
- color: var(--accent-ink);
3047
- background: var(--bg);
3048
- box-shadow: var(--neu-shadow-subtle);
3644
+ color: var(--lmn-time-picker-accent-ink, var(--accent-ink));
3645
+ background: var(--lmn-time-picker-bg, var(--bg));
3646
+ box-shadow: var(--lmn-time-picker-neu-shadow-subtle, var(--neu-shadow-subtle));
3049
3647
  }
3050
3648
  .time-picker-option.selected {
3051
- background: var(--bg);
3052
- color: var(--accent-ink);
3053
- box-shadow: var(--neu-shadow-subtle);
3649
+ background: var(--lmn-time-picker-bg, var(--bg));
3650
+ color: var(--lmn-time-picker-accent-ink, var(--accent-ink));
3651
+ box-shadow: var(--lmn-time-picker-neu-shadow-subtle, var(--neu-shadow-subtle));
3054
3652
  }
3055
3653
  .time-picker-option:disabled {
3056
- color: var(--fg-subtle);
3654
+ color: var(--lmn-time-picker-fg-subtle, var(--fg-subtle));
3057
3655
  cursor: not-allowed;
3058
3656
  opacity: 0.45;
3059
3657
  }
@@ -3063,7 +3661,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
3063
3661
  gap: 6px;
3064
3662
  margin-top: 8px;
3065
3663
  padding: 8px 0 0;
3066
- border-top: 1px solid var(--divider);
3664
+ border-top: 1px solid var(--lmn-time-picker-divider, var(--divider));
3067
3665
  }
3068
3666
  .time-picker-footer-spacer {
3069
3667
  flex: 1;
@@ -3077,9 +3675,9 @@ input, textarea, select { font-family: inherit; color: inherit; }
3077
3675
  display: inline-block;
3078
3676
  position: relative;
3079
3677
  border-radius: var(--r-md);
3080
- background: var(--bg);
3678
+ background: var(--lmn-image-bg, var(--bg));
3081
3679
  padding: 6px;
3082
- box-shadow: var(--neu-shadow-control);
3680
+ box-shadow: var(--lmn-image-neu-shadow-control, var(--neu-shadow-control));
3083
3681
  overflow: hidden;
3084
3682
  line-height: 0;
3085
3683
  }
@@ -3099,8 +3697,8 @@ input, textarea, select { font-family: inherit; color: inherit; }
3099
3697
  position: relative;
3100
3698
  overflow: hidden;
3101
3699
  border-radius: calc(var(--r-md) - 4px);
3102
- box-shadow: var(--neu-shadow-inset);
3103
- background: var(--bg-sunken);
3700
+ box-shadow: var(--lmn-image-neu-shadow-inset, var(--neu-shadow-inset));
3701
+ background: var(--lmn-image-bg-sunken, var(--bg-sunken));
3104
3702
  }
3105
3703
  .n-image.raw .n-image-frame {
3106
3704
  border-radius: 0;
@@ -3123,11 +3721,11 @@ input, textarea, select { font-family: inherit; color: inherit; }
3123
3721
  .n-image-placeholder {
3124
3722
  position: absolute; inset: 0;
3125
3723
  display: grid; place-items: center;
3126
- color: var(--fg-subtle);
3724
+ color: var(--lmn-image-fg-subtle, var(--fg-subtle));
3127
3725
  background:
3128
3726
  repeating-linear-gradient(45deg,
3129
3727
  transparent 0 10px,
3130
- color-mix(in oklch, var(--fg-subtle) 8%, transparent) 10px 11px);
3728
+ color-mix(in oklch, var(--lmn-image-fg-subtle, var(--fg-subtle)) 8%, transparent) 10px 11px);
3131
3729
  transition: opacity var(--dur) var(--ease);
3132
3730
  }
3133
3731
  .n-image-placeholder.loaded { opacity: 0; pointer-events: none; }
@@ -3147,7 +3745,8 @@ input, textarea, select { font-family: inherit; color: inherit; }
3147
3745
  transform: translateY(-4px);
3148
3746
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
3149
3747
  }
3150
- .n-image:hover .image-actions { opacity: 1; transform: translateY(0); }
3748
+ .n-image:hover .image-actions,
3749
+ .n-image:focus-within .image-actions { opacity: 1; transform: translateY(0); }
3151
3750
  .image-actions .ia-btn {
3152
3751
  width: 26px;
3153
3752
  height: 26px;
@@ -3185,7 +3784,8 @@ input, textarea, select { font-family: inherit; color: inherit; }
3185
3784
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
3186
3785
  pointer-events: none;
3187
3786
  }
3188
- .n-image:hover .image-hint { opacity: 1; transform: translateY(0); }
3787
+ .n-image:hover .image-hint,
3788
+ .n-image:focus-visible .image-hint { opacity: 1; transform: translateY(0); }
3189
3789
  .image-preview-overlay {
3190
3790
  position: fixed; inset: 0;
3191
3791
  background: var(--image-preview-mask-bg, var(--mask-bg));
@@ -3200,8 +3800,8 @@ input, textarea, select { font-family: inherit; color: inherit; }
3200
3800
  outline: none;
3201
3801
  }
3202
3802
  .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));
3803
+ --image-preview-toolbar-ink: color-mix(in oklch, var(--lmn-image-accent, var(--accent)) 42%, var(--lmn-image-fg-muted, var(--fg-muted)));
3804
+ --image-preview-toolbar-ink-hover: color-mix(in oklch, var(--lmn-image-accent, var(--accent)) 48%, var(--lmn-image-fg, var(--fg)));
3205
3805
  position: absolute;
3206
3806
  top: var(--gap-5);
3207
3807
  left: 50%;
@@ -3213,12 +3813,12 @@ input, textarea, select { font-family: inherit; color: inherit; }
3213
3813
  padding: 6px;
3214
3814
  overflow-x: auto;
3215
3815
  color: var(--image-preview-toolbar-ink);
3216
- border: 1px solid color-mix(in oklch, var(--accent) 14%, var(--border));
3816
+ border: 1px solid color-mix(in oklch, var(--lmn-image-accent, var(--accent)) 14%, var(--lmn-image-border, var(--border)));
3217
3817
  border-radius: var(--r-pill);
3218
- background: color-mix(in oklch, var(--bg-raised) 92%, var(--accent-soft));
3818
+ background: color-mix(in oklch, var(--lmn-image-bg-raised, var(--bg-raised)) 92%, var(--lmn-image-accent-soft, var(--accent-soft)));
3219
3819
  box-shadow:
3220
- var(--neu-float),
3221
- 0 0 0 1px color-mix(in oklch, var(--accent-glow) 22%, transparent);
3820
+ var(--lmn-image-neu-float, var(--neu-float)),
3821
+ 0 0 0 1px color-mix(in oklch, var(--lmn-image-accent-glow, var(--accent-glow)) 22%, transparent);
3222
3822
  backdrop-filter: blur(18px) saturate(1.2);
3223
3823
  transform: translateX(-50%);
3224
3824
  }
@@ -3230,14 +3830,14 @@ input, textarea, select { font-family: inherit; color: inherit; }
3230
3830
  }
3231
3831
  .image-preview-toolbar .btn.ghost:hover {
3232
3832
  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);
3833
+ background: color-mix(in oklch, var(--lmn-image-accent-soft, var(--accent-soft)) 36%, var(--lmn-image-bg, var(--bg)));
3834
+ box-shadow: var(--lmn-image-neu-shadow-subtle, var(--neu-shadow-subtle));
3235
3835
  }
3236
3836
  .image-preview-toolbar .btn.ghost:active,
3237
3837
  .image-preview-toolbar .btn.ghost.pressed {
3238
3838
  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);
3839
+ background: color-mix(in oklch, var(--lmn-image-accent-soft, var(--accent-soft)) 48%, var(--lmn-image-bg, var(--bg)));
3840
+ box-shadow: var(--lmn-image-neu-shadow-inset-strong, var(--neu-shadow-inset-strong));
3241
3841
  }
3242
3842
  .image-preview-scale {
3243
3843
  min-width: 48px;
@@ -3263,7 +3863,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
3263
3863
  max-width: 80vw;
3264
3864
  max-height: 80vh;
3265
3865
  border-radius: var(--r-lg);
3266
- box-shadow: var(--neu-shadow-float);
3866
+ box-shadow: var(--lmn-image-neu-shadow-float, var(--neu-shadow-float));
3267
3867
  transform-origin: center;
3268
3868
  transition: transform var(--dur-fast) var(--ease);
3269
3869
  user-select: none;
@@ -3284,9 +3884,9 @@ input, textarea, select { font-family: inherit; color: inherit; }
3284
3884
  display: inline-block;
3285
3885
  position: relative;
3286
3886
  border-radius: var(--r-sm);
3287
- background: var(--bg);
3887
+ background: var(--lmn-image-bg, var(--bg));
3288
3888
  padding: 6px;
3289
- box-shadow: var(--neu-shadow-control);
3889
+ box-shadow: var(--lmn-image-neu-shadow-control, var(--neu-shadow-control));
3290
3890
  overflow: hidden;
3291
3891
  line-height: 0;
3292
3892
  }
@@ -3307,8 +3907,8 @@ input, textarea, select { font-family: inherit; color: inherit; }
3307
3907
  width: 100%;
3308
3908
  overflow: hidden;
3309
3909
  border-radius: var(--r-sm);
3310
- background: var(--bg-sunken);
3311
- box-shadow: var(--neu-shadow-inset);
3910
+ background: var(--lmn-image-bg-sunken, var(--bg-sunken));
3911
+ box-shadow: var(--lmn-image-neu-shadow-inset, var(--neu-shadow-inset));
3312
3912
  }
3313
3913
  .n-sprite-image.raw .n-sprite-image-frame,
3314
3914
  .n-layered-image.raw .n-layered-image-frame {
@@ -3345,8 +3945,8 @@ input, textarea, select { font-family: inherit; color: inherit; }
3345
3945
  height: var(--ctrl-h);
3346
3946
  padding: 0 36px 0 var(--ctrl-pad-x);
3347
3947
  border-radius: var(--r-md);
3348
- background: var(--bg);
3349
- box-shadow: var(--neu-shadow-control);
3948
+ background: var(--lmn-cascader-bg, var(--bg));
3949
+ box-shadow: var(--lmn-cascader-neu-shadow-control, var(--neu-shadow-control));
3350
3950
  display: inline-flex;
3351
3951
  align-items: center;
3352
3952
  font-size: 13px;
@@ -3354,11 +3954,18 @@ input, textarea, select { font-family: inherit; color: inherit; }
3354
3954
  cursor: pointer;
3355
3955
  position: relative;
3356
3956
  border: none;
3357
- color: var(--fg);
3957
+ color: var(--lmn-cascader-fg, var(--fg));
3358
3958
  text-align: left;
3359
3959
  }
3360
- .cascader-trigger.placeholder { color: var(--fg-subtle); }
3361
- .cascader.open .cascader-trigger { box-shadow: var(--neu-shadow-inset); color: var(--accent-ink); }
3960
+ .cascader-trigger.placeholder { color: var(--lmn-cascader-fg-subtle, var(--fg-subtle)); }
3961
+ .cascader-value {
3962
+ flex: 1;
3963
+ min-width: 0;
3964
+ overflow: hidden;
3965
+ white-space: nowrap;
3966
+ text-overflow: ellipsis;
3967
+ }
3968
+ .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
3969
  .cascader-clear {
3363
3970
  position: absolute;
3364
3971
  right: 30px;
@@ -3367,25 +3974,27 @@ input, textarea, select { font-family: inherit; color: inherit; }
3367
3974
  width: 20px;
3368
3975
  height: 20px;
3369
3976
  border-radius: 999px;
3370
- background: var(--bg);
3371
- box-shadow: var(--neu-shadow-control);
3977
+ background: var(--lmn-cascader-bg, var(--bg));
3978
+ box-shadow: var(--lmn-cascader-neu-shadow-control, var(--neu-shadow-control));
3372
3979
  display: inline-grid;
3373
3980
  place-items: center;
3374
- color: var(--fg-subtle);
3981
+ color: var(--lmn-cascader-fg-subtle, var(--fg-subtle));
3375
3982
  opacity: 0;
3376
3983
  transition: all var(--dur-fast) var(--ease);
3377
3984
  }
3378
3985
  .cascader:hover .cascader-clear { opacity: 1; }
3379
- .cascader-clear:hover { color: var(--accent-ink); box-shadow: var(--neu-shadow-inset); }
3986
+ .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
3987
  .cascader-panel {
3381
3988
  z-index: 1000;
3382
3989
  display: flex;
3383
- background: var(--bg);
3990
+ background: var(--lmn-cascader-bg, var(--bg));
3384
3991
  border-radius: var(--r-md);
3385
- box-shadow: var(--neu-shadow-float);
3992
+ box-shadow: var(--lmn-cascader-neu-shadow-float, var(--neu-shadow-float));
3386
3993
  padding: 6px;
3387
3994
  animation: menuIn var(--dur) var(--ease);
3388
3995
  gap: 4px;
3996
+ max-width: calc(100vw - 16px);
3997
+ overflow-x: auto;
3389
3998
  }
3390
3999
  .cascader-panel.with-search {
3391
4000
  flex-direction: column;
@@ -3397,20 +4006,20 @@ input, textarea, select { font-family: inherit; color: inherit; }
3397
4006
  }
3398
4007
  .cascader-search {
3399
4008
  padding: 4px 2px 8px;
3400
- border-bottom: 1px solid var(--divider);
4009
+ border-bottom: 1px solid var(--lmn-cascader-divider, var(--divider));
3401
4010
  }
3402
4011
  .cascader-search-list {
3403
4012
  display: flex;
3404
4013
  flex-direction: column;
3405
4014
  gap: 4px;
3406
- max-height: 260px;
4015
+ max-height: var(--cascader-list-height, 280px);
3407
4016
  overflow-y: auto;
3408
4017
  padding: 4px;
3409
4018
  }
3410
4019
  .cascader-search-item {
3411
4020
  border: none;
3412
4021
  background: transparent;
3413
- color: var(--fg);
4022
+ color: var(--lmn-cascader-fg, var(--fg));
3414
4023
  border-radius: var(--r-sm);
3415
4024
  padding: 8px 10px;
3416
4025
  display: flex;
@@ -3422,26 +4031,26 @@ input, textarea, select { font-family: inherit; color: inherit; }
3422
4031
  cursor: pointer;
3423
4032
  }
3424
4033
  .cascader-search-item:hover {
3425
- background: var(--bg);
3426
- box-shadow: var(--neu-shadow-subtle);
3427
- color: var(--accent-ink);
4034
+ background: var(--lmn-cascader-bg, var(--bg));
4035
+ box-shadow: var(--lmn-cascader-neu-shadow-subtle, var(--neu-shadow-subtle));
4036
+ color: var(--lmn-cascader-accent-ink, var(--accent-ink));
3428
4037
  }
3429
- .cascader-path-sep { color: var(--fg-subtle); }
4038
+ .cascader-path-sep { color: var(--lmn-cascader-fg-subtle, var(--fg-subtle)); }
3430
4039
  .cascader-empty {
3431
4040
  padding: 24px 12px;
3432
4041
  text-align: center;
3433
- color: var(--fg-muted);
4042
+ color: var(--lmn-cascader-fg-muted, var(--fg-muted));
3434
4043
  font-size: 12px;
3435
4044
  }
3436
4045
  .cascader-col {
3437
4046
  min-width: 160px;
3438
- max-height: 280px;
4047
+ max-height: var(--cascader-list-height, 280px);
3439
4048
  overflow-y: auto;
3440
4049
  padding: 4px;
3441
4050
  border-radius: var(--r-sm);
3442
4051
  }
3443
4052
  .cascader-col + .cascader-col {
3444
- border-left: 1px solid var(--divider);
4053
+ border-left: 1px solid var(--lmn-cascader-divider, var(--divider));
3445
4054
  margin-left: 2px;
3446
4055
  padding-left: 6px;
3447
4056
  }
@@ -3449,7 +4058,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
3449
4058
  padding: 8px 10px;
3450
4059
  border-radius: var(--r-sm);
3451
4060
  font-size: 13px;
3452
- color: var(--fg);
4061
+ color: var(--lmn-cascader-fg, var(--fg));
3453
4062
  cursor: pointer;
3454
4063
  display: flex;
3455
4064
  align-items: center;
@@ -3468,27 +4077,36 @@ input, textarea, select { font-family: inherit; color: inherit; }
3468
4077
  line-height: 0;
3469
4078
  flex-shrink: 0;
3470
4079
  }
4080
+ .cascader-panel.custom-options .cascader-col {
4081
+ min-width: 240px;
4082
+ }
4083
+ .cascader-item-label,
4084
+ .cascader-item-custom {
4085
+ flex: 1;
4086
+ min-width: 0;
4087
+ text-align: left;
4088
+ }
3471
4089
  .cascader-icon img {
3472
4090
  display: block;
3473
4091
  width: 15px;
3474
4092
  height: 15px;
3475
4093
  object-fit: contain;
3476
4094
  }
3477
- .cascader-item:hover { background: var(--bg); box-shadow: var(--neu-shadow-subtle); color: var(--accent-ink); }
4095
+ .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
4096
  .cascader-item.active {
3479
- background: var(--bg);
3480
- box-shadow: var(--neu-shadow-inset);
3481
- color: var(--accent-ink);
4097
+ background: var(--lmn-cascader-bg, var(--bg));
4098
+ box-shadow: var(--lmn-cascader-neu-shadow-inset, var(--neu-shadow-inset));
4099
+ color: var(--lmn-cascader-accent-ink, var(--accent-ink));
3482
4100
  font-weight: 500;
3483
4101
  }
3484
- .cascader-item .chev { margin-left: auto; color: var(--fg-subtle); display: inline-flex; }
3485
- .cascader-item.active .chev { color: var(--accent); }
4102
+ .cascader-item .chev { margin-left: auto; color: var(--lmn-cascader-fg-subtle, var(--fg-subtle)); display: inline-flex; }
4103
+ .cascader-item.active .chev { color: var(--lmn-cascader-accent, var(--accent)); }
3486
4104
  /* ============================================================================
3487
4105
  * Typography
3488
4106
  * ========================================================================== */
3489
4107
  .typo-root {
3490
4108
  font-family: var(--font-sans);
3491
- color: var(--fg);
4109
+ color: var(--lmn-typography-fg, var(--fg));
3492
4110
  line-height: 1.7;
3493
4111
  font-size: 14px;
3494
4112
  }
@@ -3499,16 +4117,16 @@ input, textarea, select { font-family: inherit; color: inherit; }
3499
4117
  .typo-root > .typo-title:first-child { margin-top: 0; }
3500
4118
  /* ---- Base ---- */
3501
4119
  .typo {
3502
- color: var(--fg);
4120
+ color: var(--lmn-typography-fg, var(--fg));
3503
4121
  font-family: var(--font-sans);
3504
4122
  word-wrap: break-word;
3505
4123
  }
3506
4124
  /* 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; }
4125
+ .typo.secondary { color: var(--lmn-typography-fg-muted, var(--fg-muted)); }
4126
+ .typo.success { color: var(--lmn-typography-success, var(--success)); }
4127
+ .typo.warning { color: var(--lmn-typography-warning, var(--warning)); }
4128
+ .typo.danger { color: var(--lmn-typography-danger, var(--danger)); }
4129
+ .typo.disabled { color: var(--lmn-typography-fg-subtle, var(--fg-subtle)); cursor: not-allowed; user-select: none; }
3512
4130
  /* Decorations */
3513
4131
  .typo.strong { font-weight: 600; }
3514
4132
  .typo.italic { font-style: italic; }
@@ -3516,7 +4134,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
3516
4134
  .typo.del { text-decoration: line-through; text-decoration-thickness: 1.5px; }
3517
4135
  /* mark / code / kbd render their own elements; we still color the shell */
3518
4136
  .typo mark {
3519
- background: color-mix(in oklch, var(--warning) 35%, transparent);
4137
+ background: color-mix(in oklch, var(--lmn-typography-warning, var(--warning)) 33%, transparent);
3520
4138
  color: inherit;
3521
4139
  padding: 0 3px;
3522
4140
  border-radius: 3px;
@@ -3526,9 +4144,9 @@ input, textarea, select { font-family: inherit; color: inherit; }
3526
4144
  font-size: 0.88em;
3527
4145
  padding: 1px 6px;
3528
4146
  border-radius: 5px;
3529
- background: var(--bg-sunken);
3530
- box-shadow: var(--neu-shadow-inset);
3531
- color: var(--accent-ink);
4147
+ background: var(--lmn-typography-bg-sunken, var(--bg-sunken));
4148
+ box-shadow: var(--lmn-typography-neu-shadow-inset, var(--neu-shadow-inset));
4149
+ color: var(--lmn-typography-accent-ink, var(--accent-ink));
3532
4150
  margin: 0 2px;
3533
4151
  }
3534
4152
  .typo kbd {
@@ -3536,10 +4154,10 @@ input, textarea, select { font-family: inherit; color: inherit; }
3536
4154
  font-size: 0.82em;
3537
4155
  padding: 1px 7px;
3538
4156
  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);
4157
+ background: var(--lmn-typography-bg-raised, var(--bg-raised));
4158
+ box-shadow: var(--lmn-typography-neu-shadow-subtle, var(--neu-shadow-subtle));
4159
+ border: 1px solid var(--lmn-typography-border, var(--border));
4160
+ color: var(--lmn-typography-fg, var(--fg));
3543
4161
  margin: 0 2px;
3544
4162
  line-height: 1.4;
3545
4163
  display: inline-block;
@@ -3551,7 +4169,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
3551
4169
  font-weight: 700;
3552
4170
  letter-spacing: -0.01em;
3553
4171
  line-height: 1.25;
3554
- color: var(--fg);
4172
+ color: var(--lmn-typography-fg, var(--fg));
3555
4173
  margin: 0;
3556
4174
  }
3557
4175
  .typo-title.h1 { font-size: 32px; letter-spacing: -0.02em; }
@@ -3565,13 +4183,22 @@ input, textarea, select { font-family: inherit; color: inherit; }
3565
4183
  font-size: 14px;
3566
4184
  line-height: 1.75;
3567
4185
  margin: 0;
3568
- color: var(--fg);
4186
+ color: var(--lmn-typography-fg, var(--fg));
3569
4187
  }
3570
4188
  /* ---- Text ---- */
3571
4189
  .typo-text { font-size: inherit; line-height: inherit; }
3572
4190
  /* ---- Link ---- */
4191
+ .typo-link-group {
4192
+ display: inline-flex;
4193
+ align-items: center;
4194
+ max-width: 100%;
4195
+ vertical-align: baseline;
4196
+ }
4197
+ .typo-link-group > .typo-link { min-width: 0; }
4198
+ .typo-link-group > .typo-action,
4199
+ .typo-link-group > .typo-expand { flex: 0 0 auto; }
3573
4200
  .typo-link {
3574
- color: var(--accent-ink);
4201
+ color: var(--lmn-typography-accent-ink, var(--accent-ink));
3575
4202
  text-decoration: none;
3576
4203
  transition: color var(--dur-fast) var(--ease), text-decoration-color var(--dur-fast) var(--ease);
3577
4204
  cursor: pointer;
@@ -3580,14 +4207,14 @@ input, textarea, select { font-family: inherit; color: inherit; }
3580
4207
  align-items: center;
3581
4208
  gap: 3px;
3582
4209
  }
3583
- .typo-link:hover { color: var(--accent); text-decoration: underline; }
4210
+ .typo-link:hover { color: var(--lmn-typography-accent, var(--accent)); text-decoration: underline; }
3584
4211
  .typo-link:focus-visible {
3585
- outline: 2px solid var(--accent-glow);
4212
+ outline: 2px solid var(--lmn-typography-accent-glow, var(--accent-glow));
3586
4213
  outline-offset: 2px;
3587
4214
  border-radius: 2px;
3588
4215
  }
3589
4216
  .typo-link.disabled {
3590
- color: var(--fg-subtle);
4217
+ color: var(--lmn-typography-fg-subtle, var(--fg-subtle));
3591
4218
  cursor: not-allowed;
3592
4219
  pointer-events: auto;
3593
4220
  text-decoration: none;
@@ -3610,26 +4237,31 @@ input, textarea, select { font-family: inherit; color: inherit; }
3610
4237
  margin-left: 5px;
3611
4238
  border-radius: 6px;
3612
4239
  cursor: pointer;
3613
- color: var(--fg-subtle);
4240
+ color: var(--lmn-typography-fg-subtle, var(--fg-subtle));
3614
4241
  line-height: 1;
3615
4242
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
3616
4243
  vertical-align: -0.18em;
3617
4244
  user-select: none;
4245
+ padding: 0;
4246
+ border: none;
4247
+ background: transparent;
4248
+ font: inherit;
3618
4249
  }
3619
4250
  .typo-action > svg {
3620
4251
  display: block;
3621
4252
  flex-shrink: 0;
3622
4253
  }
3623
4254
  .typo-action:hover {
3624
- color: var(--accent-ink);
3625
- background: var(--bg);
3626
- box-shadow: var(--neu-shadow-subtle);
4255
+ color: var(--lmn-typography-accent-ink, var(--accent-ink));
4256
+ background: var(--lmn-typography-bg, var(--bg));
4257
+ box-shadow: var(--lmn-typography-neu-shadow-subtle, var(--neu-shadow-subtle));
3627
4258
  }
3628
4259
  .typo-action:focus-visible {
3629
- outline: 2px solid var(--accent-glow);
4260
+ outline: 2px solid var(--lmn-typography-accent-glow, var(--accent-glow));
3630
4261
  outline-offset: 1px;
3631
4262
  }
3632
- .typo-copy.copied { color: var(--success); }
4263
+ .typo-copy.copied { color: var(--lmn-typography-success, var(--success)); }
4264
+ .typo-copy.error { color: var(--lmn-typography-danger, var(--danger)); }
3633
4265
  /* Editable text trigger overlays */
3634
4266
  .typo-edit-text-trigger {
3635
4267
  cursor: text;
@@ -3638,14 +4270,32 @@ input, textarea, select { font-family: inherit; color: inherit; }
3638
4270
  padding: 0 2px;
3639
4271
  margin: 0 -2px;
3640
4272
  }
3641
- .typo-edit-text-trigger:hover { background: color-mix(in oklch, var(--accent) 8%, transparent); }
4273
+ .typo-edit-text-trigger:hover { background: color-mix(in oklch, var(--lmn-typography-accent, var(--accent)) 8%, transparent); }
3642
4274
  /* ---- Editor (input / textarea) ---- */
3643
4275
  .typo.editing { display: block; }
4276
+ .typo-editor-wrap {
4277
+ display: inline-flex;
4278
+ align-items: center;
4279
+ gap: var(--gap-1);
4280
+ width: 100%;
4281
+ max-width: 100%;
4282
+ }
4283
+ .typo-editor-wrap > .typo-editor { min-width: 0; }
4284
+ .typo-enter {
4285
+ flex: 0 0 auto;
4286
+ margin-left: 0;
4287
+ }
4288
+ .typo.typo-link-editor-shell {
4289
+ display: inline-flex;
4290
+ min-width: 0;
4291
+ flex: 1 1 auto;
4292
+ }
4293
+ .typo.typo-link-editing-anchor { display: none; }
3644
4294
  .typo-editor {
3645
4295
  font: inherit;
3646
4296
  color: inherit;
3647
- background: var(--bg-sunken);
3648
- box-shadow: var(--neu-shadow-inset-strong);
4297
+ background: var(--lmn-typography-bg-sunken, var(--bg-sunken));
4298
+ box-shadow: var(--lmn-typography-neu-shadow-inset-strong, var(--neu-shadow-inset-strong));
3649
4299
  border: none;
3650
4300
  outline: none;
3651
4301
  width: 100%;
@@ -3660,7 +4310,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
3660
4310
  font-family: inherit;
3661
4311
  }
3662
4312
  .typo-editor:focus {
3663
- box-shadow: var(--neu-shadow-inset-strong), 0 0 0 3px var(--accent-glow);
4313
+ 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
4314
  }
3665
4315
  /* ---- Ellipsis ---- */
3666
4316
  .typo.ellipsis {
@@ -3692,23 +4342,59 @@ input, textarea, select { font-family: inherit; color: inherit; }
3692
4342
  -webkit-box-orient: vertical;
3693
4343
  overflow: hidden;
3694
4344
  }
4345
+ /* 后缀与裁切正文分栏,确保后缀不进入 overflow / line-clamp 区域。 */
4346
+ .typo.ellipsis-with-suffix {
4347
+ display: inline-flex;
4348
+ align-items: flex-end;
4349
+ max-width: 100%;
4350
+ min-width: 0;
4351
+ vertical-align: bottom;
4352
+ }
4353
+ .typo-paragraph.ellipsis-with-suffix,
4354
+ .typo-title.ellipsis-with-suffix {
4355
+ display: flex;
4356
+ }
4357
+ .typo-ellipsis-content {
4358
+ flex: 0 1 auto;
4359
+ min-width: 0;
4360
+ max-width: 100%;
4361
+ }
4362
+ .typo-ellipsis-content.ellipsis {
4363
+ display: block;
4364
+ overflow: hidden;
4365
+ white-space: nowrap;
4366
+ text-overflow: ellipsis;
4367
+ }
4368
+ .typo-ellipsis-content.ellipsis-multi {
4369
+ display: -webkit-box;
4370
+ -webkit-box-orient: vertical;
4371
+ overflow: hidden;
4372
+ }
3695
4373
  .typo-expand {
3696
4374
  margin-left: 4px;
3697
- color: var(--accent-ink);
4375
+ color: var(--lmn-typography-accent-ink, var(--accent-ink));
3698
4376
  cursor: pointer;
3699
4377
  font-size: 0.92em;
3700
4378
  user-select: none;
4379
+ padding: 0;
4380
+ border: none;
4381
+ background: transparent;
4382
+ font: inherit;
4383
+ }
4384
+ .typo-expand:hover { color: var(--lmn-typography-accent, var(--accent)); text-decoration: underline; text-underline-offset: 3px; }
4385
+ .typo-suffix {
4386
+ flex: none;
4387
+ margin-left: 0.25em;
3701
4388
  }
3702
- .typo-expand:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
3703
4389
  .typo-ellipsis-tooltip {
3704
4390
  display: block;
3705
4391
  box-sizing: border-box;
3706
4392
  max-width: min(520px, calc(100vw - 32px));
3707
4393
  padding: 7px 10px;
3708
4394
  border-radius: var(--r-sm);
3709
- background: var(--bg-sunken);
3710
- color: var(--fg);
3711
- box-shadow: var(--neu-shadow-control);
4395
+ background: var(--lmn-typography-bg-sunken, var(--bg-sunken));
4396
+ color: var(--lmn-typography-fg, var(--fg));
4397
+ box-shadow: var(--lmn-typography-neu-shadow-control, var(--neu-shadow-control));
3712
4398
  font-size: 12px;
3713
4399
  font-weight: 500;
3714
4400
  line-height: 1.55;
@@ -3724,11 +4410,6 @@ input, textarea, select { font-family: inherit; color: inherit; }
3724
4410
  animation: fadeIn var(--dur) var(--ease);
3725
4411
  z-index: 1000;
3726
4412
  }
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
4413
  /* ============================================================================
3733
4414
  * Container & trigger
3734
4415
  * ========================================================================== */
@@ -3742,16 +4423,16 @@ input, textarea, select { font-family: inherit; color: inherit; }
3742
4423
  gap: 8px;
3743
4424
  padding: 4px;
3744
4425
  border: none;
3745
- background: var(--bg);
3746
- box-shadow: var(--neu-shadow-subtle);
4426
+ background: var(--lmn-color-picker-bg, var(--bg));
4427
+ box-shadow: var(--lmn-color-picker-neu-shadow-subtle, var(--neu-shadow-subtle));
3747
4428
  border-radius: 10px;
3748
4429
  cursor: pointer;
3749
4430
  transition: box-shadow var(--dur) var(--ease);
3750
- color: var(--fg);
4431
+ color: var(--lmn-color-picker-fg, var(--fg));
3751
4432
  font: inherit;
3752
4433
  }
3753
4434
  .cp-trigger:hover:not(:disabled) {
3754
- box-shadow: var(--neu-shadow-panel);
4435
+ box-shadow: var(--lmn-color-picker-neu-shadow-panel, var(--neu-shadow-panel));
3755
4436
  }
3756
4437
  .cp-trigger:disabled {
3757
4438
  opacity: 0.5;
@@ -3768,12 +4449,13 @@ input, textarea, select { font-family: inherit; color: inherit; }
3768
4449
  font: inherit;
3769
4450
  }
3770
4451
  .cp-custom-trigger:disabled { opacity: 0.5; cursor: not-allowed; }
4452
+ .cp-custom-trigger[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
3771
4453
  .cp-swatch {
3772
4454
  display: inline-block;
3773
4455
  width: 22px;
3774
4456
  height: 22px;
3775
4457
  border-radius: 6px;
3776
- box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), var(--neu-shadow-inset);
4458
+ 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
4459
  background-clip: padding-box;
3778
4460
  }
3779
4461
  .cp-trigger.sm .cp-swatch { width: 18px; height: 18px; border-radius: 5px; }
@@ -3786,7 +4468,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
3786
4468
  .cp-text {
3787
4469
  font-family: var(--font-mono);
3788
4470
  font-size: 12px;
3789
- color: var(--fg-muted);
4471
+ color: var(--lmn-color-picker-fg-muted, var(--fg-muted));
3790
4472
  padding-right: 6px;
3791
4473
  }
3792
4474
  /* ============================================================================
@@ -3797,9 +4479,9 @@ input, textarea, select { font-family: inherit; color: inherit; }
3797
4479
  z-index: 1000;
3798
4480
  width: 232px;
3799
4481
  padding: 12px;
3800
- background: var(--bg);
4482
+ background: var(--lmn-color-picker-bg, var(--bg));
3801
4483
  border-radius: var(--r-md);
3802
- box-shadow: var(--neu-shadow-float);
4484
+ box-shadow: var(--lmn-color-picker-neu-shadow-float, var(--neu-shadow-float));
3803
4485
  display: flex;
3804
4486
  flex-direction: column;
3805
4487
  gap: 10px;
@@ -3822,6 +4504,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
3822
4504
  cursor: crosshair;
3823
4505
  touch-action: none;
3824
4506
  user-select: none;
4507
+ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lmn-color-picker-fg, var(--fg)) 10%, transparent);
3825
4508
  }
3826
4509
  .cp-board-white,
3827
4510
  .cp-board-black {
@@ -3863,7 +4546,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
3863
4546
  hsl(300, 100%, 50%),
3864
4547
  hsl(360, 100%, 50%)
3865
4548
  );
3866
- box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
4549
+ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lmn-color-picker-fg, var(--fg)) 10%, transparent);
3867
4550
  cursor: pointer;
3868
4551
  touch-action: none;
3869
4552
  user-select: none;
@@ -3894,16 +4577,16 @@ input, textarea, select { font-family: inherit; color: inherit; }
3894
4577
  padding: 0 10px;
3895
4578
  border: none;
3896
4579
  outline: none;
3897
- background: var(--bg-sunken);
3898
- box-shadow: var(--neu-shadow-inset);
4580
+ background: var(--lmn-color-picker-bg-sunken, var(--bg-sunken));
4581
+ box-shadow: var(--lmn-color-picker-neu-shadow-inset, var(--neu-shadow-inset));
3899
4582
  border-radius: 7px;
3900
4583
  font-family: var(--font-mono);
3901
4584
  font-size: 12px;
3902
- color: var(--fg);
4585
+ color: var(--lmn-color-picker-fg, var(--fg));
3903
4586
  text-transform: lowercase;
3904
4587
  }
3905
4588
  .cp-input:focus {
3906
- box-shadow: var(--neu-shadow-inset), 0 0 0 2px var(--accent-soft);
4589
+ 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
4590
  }
3908
4591
  .cp-presets {
3909
4592
  display: grid;
@@ -3917,30 +4600,14 @@ input, textarea, select { font-family: inherit; color: inherit; }
3917
4600
  border: none;
3918
4601
  padding: 0;
3919
4602
  cursor: pointer;
3920
- box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
4603
+ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lmn-color-picker-fg, var(--fg)) 10%, transparent);
3921
4604
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
3922
4605
  }
3923
4606
  .cp-preset:hover {
3924
4607
  transform: scale(1.1);
3925
4608
  }
3926
4609
  .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);
4610
+ 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
4611
  }
3945
4612
  /* ============ TitleBar (Electron) ============ */
3946
4613
  .titlebar {
@@ -3949,15 +4616,16 @@ input, textarea, select { font-family: inherit; color: inherit; }
3949
4616
  gap: var(--gap-3);
3950
4617
  padding: 0 var(--gap-3);
3951
4618
  height: 40px;
3952
- background: var(--bg);
4619
+ background: var(--lmn-app-shell-bg, var(--bg));
3953
4620
  -webkit-app-region: drag;
3954
4621
  user-select: none;
3955
- border-bottom: 1px solid var(--divider);
4622
+ border-bottom: 1px solid var(--lmn-app-shell-divider, var(--divider));
3956
4623
  position: relative;
3957
4624
  z-index: 5;
3958
4625
  overflow: visible;
3959
4626
  }
3960
4627
  .titlebar.windows { padding-right: 0; }
4628
+ .titlebar.no-drag { -webkit-app-region: no-drag; }
3961
4629
  .titlebar-title {
3962
4630
  display: inline-flex;
3963
4631
  align-items: center;
@@ -3985,8 +4653,8 @@ input, textarea, select { font-family: inherit; color: inherit; }
3985
4653
  width: 13px; height: 13px;
3986
4654
  border: none; padding: 0;
3987
4655
  border-radius: 999px;
3988
- background: var(--bg);
3989
- box-shadow: var(--neu-shadow-subtle);
4656
+ background: var(--lmn-app-shell-bg, var(--bg));
4657
+ box-shadow: var(--lmn-app-shell-neu-shadow-subtle, var(--neu-shadow-subtle));
3990
4658
  position: relative;
3991
4659
  cursor: pointer;
3992
4660
  transition: transform var(--dur-fast) var(--ease);
@@ -3995,13 +4663,18 @@ input, textarea, select { font-family: inherit; color: inherit; }
3995
4663
  content: "";
3996
4664
  position: absolute; inset: 2px;
3997
4665
  border-radius: 999px;
3998
- background: var(--dot, var(--fg-subtle));
4666
+ background: var(--dot, var(--lmn-app-shell-fg-subtle, var(--fg-subtle)));
3999
4667
  opacity: 0.85;
4000
4668
  }
4001
4669
  .win-controls.mac .win-btn.close { --dot: #ff5f57; }
4002
4670
  .win-controls.mac .win-btn.minimize { --dot: #febc2e; }
4003
4671
  .win-controls.mac .win-btn.maximize { --dot: #28c840; }
4004
4672
  .win-controls.mac .win-btn:hover { transform: scale(1.08); }
4673
+ .win-controls .win-btn:disabled {
4674
+ opacity: 0.45;
4675
+ cursor: default;
4676
+ pointer-events: none;
4677
+ }
4005
4678
  /* Windows controls */
4006
4679
  .win-controls.windows {
4007
4680
  display: inline-flex;
@@ -4016,7 +4689,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
4016
4689
  padding: 0;
4017
4690
  border-radius: 8px;
4018
4691
  background: transparent;
4019
- color: var(--fg-muted);
4692
+ color: var(--lmn-app-shell-fg-muted, var(--fg-muted));
4020
4693
  display: inline-grid;
4021
4694
  place-items: center;
4022
4695
  cursor: pointer;
@@ -4026,11 +4699,11 @@ input, textarea, select { font-family: inherit; color: inherit; }
4026
4699
  overflow: visible;
4027
4700
  }
4028
4701
  .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); }
4702
+ .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
4703
  .win-controls.windows .win-btn.close:hover {
4031
- background: var(--danger);
4704
+ background: var(--lmn-app-shell-danger, var(--danger));
4032
4705
  color: white;
4033
- box-shadow: 2px 2px 4px color-mix(in oklch, var(--danger) 30%, var(--shadow-dark));
4706
+ 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
4707
  }
4035
4708
  /* ============ Sidebar ============ */
4036
4709
  .sidebar {
@@ -4038,23 +4711,24 @@ input, textarea, select { font-family: inherit; color: inherit; }
4038
4711
  flex-direction: column;
4039
4712
  width: 220px;
4040
4713
  padding: 12px;
4041
- background: var(--bg);
4042
- border-right: 1px solid var(--divider);
4714
+ background: var(--lmn-app-shell-bg, var(--bg));
4715
+ border-right: 1px solid var(--lmn-app-shell-divider, var(--divider));
4043
4716
  flex-shrink: 0;
4044
4717
  overflow-y: auto;
4045
4718
  gap: 4px;
4046
4719
  }
4047
4720
  .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); }
4721
+ .sidebar-header { padding: 4px 8px 12px; border-bottom: 1px solid var(--lmn-app-shell-divider, var(--divider)); margin-bottom: 8px; }
4722
+ .sidebar-footer { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--lmn-app-shell-divider, var(--divider)); }
4050
4723
  .sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
4724
+ .sidebar-children { display: flex; flex-direction: column; gap: 2px; }
4051
4725
  .sidebar-item {
4052
4726
  display: flex; align-items: center; gap: 10px;
4053
- padding: 10px 12px;
4727
+ padding: 10px 12px 10px calc(12px + var(--sidebar-indent, 0px));
4054
4728
  border: none;
4055
4729
  border-radius: var(--r-sm);
4056
4730
  background: transparent;
4057
- color: var(--fg-muted);
4731
+ color: var(--lmn-app-shell-fg-muted, var(--fg-muted));
4058
4732
  font-size: 13px;
4059
4733
  font-family: inherit;
4060
4734
  text-align: left;
@@ -4062,11 +4736,11 @@ input, textarea, select { font-family: inherit; color: inherit; }
4062
4736
  width: 100%;
4063
4737
  transition: all var(--dur-fast) var(--ease);
4064
4738
  }
4065
- .sidebar-item:hover { color: var(--fg); background: var(--bg); box-shadow: var(--neu-shadow-subtle); }
4739
+ .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
4740
  .sidebar-item.active {
4067
- color: var(--accent-ink);
4068
- background: var(--bg);
4069
- box-shadow: var(--neu-shadow-inset);
4741
+ color: var(--lmn-app-shell-accent-ink, var(--accent-ink));
4742
+ background: var(--lmn-app-shell-bg, var(--bg));
4743
+ box-shadow: var(--lmn-app-shell-neu-shadow-inset, var(--neu-shadow-inset));
4070
4744
  font-weight: 500;
4071
4745
  }
4072
4746
  .sidebar-icon { display: inline-flex; flex-shrink: 0; }
@@ -4075,18 +4749,29 @@ input, textarea, select { font-family: inherit; color: inherit; }
4075
4749
  font-size: 11px;
4076
4750
  padding: 1px 7px;
4077
4751
  border-radius: 999px;
4078
- background: var(--accent);
4752
+ background: var(--lmn-app-shell-accent, var(--accent));
4079
4753
  color: white;
4080
4754
  font-weight: 600;
4081
4755
  }
4756
+ .sidebar-expand {
4757
+ display: inline-flex;
4758
+ flex-shrink: 0;
4759
+ color: var(--lmn-app-shell-fg-subtle, var(--fg-subtle));
4760
+ transition: transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
4761
+ }
4762
+ .sidebar-expand.open {
4763
+ color: var(--lmn-app-shell-accent, var(--accent));
4764
+ transform: rotate(180deg);
4765
+ }
4082
4766
  /* ============ AppShell ============ */
4083
4767
  .app-shell {
4084
4768
  display: flex;
4085
4769
  flex-direction: column;
4086
4770
  width: 100%;
4087
4771
  height: 100vh;
4088
- background: var(--bg);
4089
- color: var(--fg);
4772
+ height: 100dvh;
4773
+ background: var(--lmn-app-shell-bg, var(--bg));
4774
+ color: var(--lmn-app-shell-fg, var(--fg));
4090
4775
  overflow: hidden;
4091
4776
  position: relative;
4092
4777
  }
@@ -4100,6 +4785,289 @@ input, textarea, select { font-family: inherit; color: inherit; }
4100
4785
  min-width: 0;
4101
4786
  overflow: auto;
4102
4787
  }
4788
+ @media (max-width: 720px) {
4789
+ .titlebar-center {
4790
+ position: static;
4791
+ flex: 1;
4792
+ min-width: 0;
4793
+ justify-content: center;
4794
+ overflow: hidden;
4795
+ transform: none;
4796
+ }
4797
+ .titlebar-title,
4798
+ .titlebar-center,
4799
+ .titlebar-actions {
4800
+ max-width: 34%;
4801
+ }
4802
+ .sidebar:not(.collapsed) { width: 180px; }
4803
+ }
4804
+ /* ============ Splitter ============ */
4805
+ .splitter {
4806
+ display: flex;
4807
+ width: 100%;
4808
+ height: 100%;
4809
+ min-width: 0;
4810
+ min-height: 0;
4811
+ }
4812
+ .splitter.horizontal { flex-direction: row; }
4813
+ .splitter.vertical { flex-direction: column; }
4814
+ .splitter.dragging { cursor: col-resize; user-select: none; }
4815
+ .splitter.dragging.vertical { cursor: row-resize; }
4816
+ .splitter-panel {
4817
+ min-width: 0;
4818
+ min-height: 0;
4819
+ overflow: auto;
4820
+ }
4821
+ .splitter-panel.first { flex-shrink: 0; }
4822
+ .splitter-panel.second { flex: 1; }
4823
+ .splitter-handle {
4824
+ flex-shrink: 0;
4825
+ position: relative;
4826
+ display: flex;
4827
+ align-items: center;
4828
+ justify-content: center;
4829
+ background: transparent;
4830
+ transition: background var(--dur-fast) var(--ease);
4831
+ outline: none;
4832
+ }
4833
+ .splitter.horizontal > .splitter-handle {
4834
+ width: 6px;
4835
+ cursor: col-resize;
4836
+ }
4837
+ .splitter.vertical > .splitter-handle {
4838
+ height: 6px;
4839
+ cursor: row-resize;
4840
+ }
4841
+ .splitter-handle:hover,
4842
+ .splitter.dragging > .splitter-handle {
4843
+ background: var(--lmn-splitter-accent-soft, var(--accent-soft));
4844
+ }
4845
+ .splitter-handle:focus-visible {
4846
+ box-shadow: inset 0 0 0 2px var(--lmn-splitter-accent-glow, var(--accent-glow));
4847
+ border-radius: var(--r-xs);
4848
+ }
4849
+ .splitter-handle-grip {
4850
+ display: block;
4851
+ background: var(--lmn-splitter-divider, var(--divider));
4852
+ border-radius: 999px;
4853
+ transition: background var(--dur-fast) var(--ease);
4854
+ }
4855
+ .splitter.horizontal > .splitter-handle > .splitter-handle-grip {
4856
+ width: 2px;
4857
+ height: 28px;
4858
+ }
4859
+ .splitter.vertical > .splitter-handle > .splitter-handle-grip {
4860
+ width: 28px;
4861
+ height: 2px;
4862
+ }
4863
+ .splitter-handle:hover > .splitter-handle-grip,
4864
+ .splitter.dragging > .splitter-handle > .splitter-handle-grip {
4865
+ background: var(--lmn-splitter-accent, var(--accent));
4866
+ }
4867
+ /* ============ StatusBar ============ */
4868
+ .statusbar {
4869
+ display: flex;
4870
+ align-items: center;
4871
+ position: relative;
4872
+ height: 26px;
4873
+ padding: 0 10px;
4874
+ background: var(--lmn-status-bar-bg, var(--bg));
4875
+ border-top: 1px solid var(--lmn-status-bar-divider, var(--divider));
4876
+ color: var(--lmn-status-bar-fg-muted, var(--fg-muted));
4877
+ font-size: 11.5px;
4878
+ user-select: none;
4879
+ flex-shrink: 0;
4880
+ gap: 8px;
4881
+ }
4882
+ .statusbar-section {
4883
+ display: inline-flex;
4884
+ align-items: center;
4885
+ gap: 2px;
4886
+ min-width: 0;
4887
+ }
4888
+ .statusbar-section.left { margin-right: auto; }
4889
+ .statusbar-section.right { margin-left: auto; }
4890
+ .statusbar-section.center {
4891
+ position: absolute;
4892
+ left: 50%;
4893
+ transform: translateX(-50%);
4894
+ }
4895
+ .statusbar-item {
4896
+ display: inline-flex;
4897
+ align-items: center;
4898
+ gap: 5px;
4899
+ height: 20px;
4900
+ padding: 0 8px;
4901
+ border: none;
4902
+ background: transparent;
4903
+ color: inherit;
4904
+ font: inherit;
4905
+ border-radius: var(--r-xs);
4906
+ transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
4907
+ white-space: nowrap;
4908
+ }
4909
+ .statusbar-item.clickable { cursor: pointer; }
4910
+ .statusbar-item.clickable:hover { background: var(--lmn-status-bar-bg-sunken, var(--bg-sunken)); color: var(--lmn-status-bar-fg, var(--fg)); }
4911
+ .statusbar-item.tone-muted { color: var(--lmn-status-bar-fg-subtle, var(--fg-subtle)); }
4912
+ .statusbar-item.tone-accent { color: var(--lmn-status-bar-accent-ink, var(--accent-ink)); }
4913
+ .statusbar-item.tone-success { color: var(--lmn-status-bar-success, var(--success)); }
4914
+ .statusbar-item.tone-warning { color: var(--lmn-status-bar-warning, var(--warning)); }
4915
+ .statusbar-item.tone-danger { color: var(--lmn-status-bar-danger, var(--danger)); }
4916
+ .statusbar-item-icon { display: inline-flex; flex-shrink: 0; }
4917
+ .statusbar-item-label { overflow: hidden; text-overflow: ellipsis; }
4918
+ @media (max-width: 640px) {
4919
+ .statusbar-section.center {
4920
+ position: static;
4921
+ min-width: 0;
4922
+ margin-inline: auto;
4923
+ transform: none;
4924
+ }
4925
+ .statusbar-section.left,
4926
+ .statusbar-section.right {
4927
+ max-width: 38%;
4928
+ overflow: hidden;
4929
+ }
4930
+ }
4931
+ .timeline {
4932
+ display: flex;
4933
+ flex-direction: column;
4934
+ font-size: 14px;
4935
+ color: var(--lmn-timeline-fg, var(--fg));
4936
+ }
4937
+ /* ---- Item layout ---- */
4938
+ .timeline-item {
4939
+ display: grid;
4940
+ grid-template-columns: 1fr auto 1fr;
4941
+ gap: 0 var(--gap-3);
4942
+ min-height: 60px;
4943
+ min-width: 0;
4944
+ position: relative;
4945
+ }
4946
+ /* Left mode: label hidden, content on right */
4947
+ .timeline-left .timeline-item-label {
4948
+ display: none;
4949
+ }
4950
+ .timeline-left .timeline-item {
4951
+ grid-template-columns: auto 1fr;
4952
+ }
4953
+ /* Right mode: content on left, label hidden */
4954
+ .timeline-right .timeline-item-label {
4955
+ display: none;
4956
+ }
4957
+ .timeline-right .timeline-item {
4958
+ grid-template-columns: 1fr auto;
4959
+ direction: rtl;
4960
+ }
4961
+ .timeline-right .timeline-item-content,
4962
+ .timeline-right .timeline-item-head {
4963
+ direction: ltr;
4964
+ }
4965
+ /* Alternate mode */
4966
+ .timeline-alternate .timeline-item-left .timeline-item-label {
4967
+ text-align: right;
4968
+ color: var(--lmn-timeline-fg-muted, var(--fg-muted));
4969
+ }
4970
+ .timeline-alternate .timeline-item-left .timeline-item-content {
4971
+ text-align: left;
4972
+ }
4973
+ .timeline-alternate .timeline-item-right .timeline-item-label {
4974
+ text-align: left;
4975
+ }
4976
+ .timeline-alternate .timeline-item-right .timeline-item-content {
4977
+ text-align: right;
4978
+ color: var(--lmn-timeline-fg-muted, var(--fg-muted));
4979
+ }
4980
+ .timeline-alternate .timeline-item-right {
4981
+ direction: rtl;
4982
+ }
4983
+ .timeline-alternate .timeline-item-right .timeline-item-head,
4984
+ .timeline-alternate .timeline-item-right .timeline-item-content,
4985
+ .timeline-alternate .timeline-item-right .timeline-item-label {
4986
+ direction: ltr;
4987
+ }
4988
+ /* ---- Head (dot + tail) ---- */
4989
+ .timeline-item-head {
4990
+ display: flex;
4991
+ flex-direction: column;
4992
+ align-items: center;
4993
+ position: relative;
4994
+ }
4995
+ .timeline-item-dot {
4996
+ width: 12px;
4997
+ height: 12px;
4998
+ border-radius: var(--r-pill);
4999
+ box-shadow: var(--lmn-timeline-neu-shadow-control, var(--neu-shadow-control));
5000
+ flex-shrink: 0;
5001
+ display: flex;
5002
+ align-items: center;
5003
+ justify-content: center;
5004
+ position: relative;
5005
+ z-index: 1;
5006
+ margin-top: var(--timeline-dot-offset, 4px);
5007
+ }
5008
+ .timeline-item-dot.accent { background: var(--lmn-timeline-accent, var(--accent)); }
5009
+ .timeline-item-dot.success { background: var(--lmn-timeline-success, var(--success)); }
5010
+ .timeline-item-dot.warning { background: var(--lmn-timeline-warning, var(--warning)); }
5011
+ .timeline-item-dot.danger { background: var(--lmn-timeline-danger, var(--danger)); }
5012
+ .timeline-item-dot.info { background: var(--lmn-timeline-info, var(--info)); }
5013
+ .timeline-item-dot.muted { background: var(--lmn-timeline-fg-subtle, var(--fg-subtle)); }
5014
+ /* Pending dot: clear default fill, Spin handles its own visuals */
5015
+ .timeline-item-dot.pending {
5016
+ background: transparent;
5017
+ box-shadow: none;
5018
+ border: none;
5019
+ }
5020
+ .timeline-item-tail {
5021
+ width: 2px;
5022
+ flex: 1;
5023
+ background: var(--lmn-timeline-divider, var(--divider));
5024
+ margin-top: var(--gap-1);
5025
+ margin-bottom: 0;
5026
+ border-radius: 1px;
5027
+ }
5028
+ /* ---- Content ---- */
5029
+ .timeline-item-content {
5030
+ padding-bottom: var(--gap-5);
5031
+ line-height: 1.6;
5032
+ min-width: var(--timeline-content-min-width, 0);
5033
+ }
5034
+ .timeline-item-last .timeline-item-content {
5035
+ padding-bottom: 0;
5036
+ }
5037
+ .timeline-item-label {
5038
+ padding-bottom: var(--gap-5);
5039
+ line-height: 1.6;
5040
+ color: var(--lmn-timeline-fg-muted, var(--fg-muted));
5041
+ font-size: 13px;
5042
+ min-width: 0;
5043
+ }
5044
+ /* ---- Pending animation ---- */
5045
+ .timeline-item-pending .timeline-item-content {
5046
+ color: var(--lmn-timeline-fg-muted, var(--fg-muted));
5047
+ }
5048
+ /* When dot has custom content (Spin / Icon), expand to fit */
5049
+ .timeline-item-dot:has(> *) {
5050
+ width: auto;
5051
+ height: auto;
5052
+ background: transparent !important;
5053
+ box-shadow: none;
5054
+ border-radius: 0;
5055
+ border: none;
5056
+ }
5057
+ @media (max-width: 640px) {
5058
+ .timeline-alternate .timeline-item {
5059
+ grid-template-columns: auto minmax(0, 1fr);
5060
+ direction: ltr;
5061
+ }
5062
+ .timeline-alternate .timeline-item-label {
5063
+ display: none;
5064
+ }
5065
+ .timeline-alternate .timeline-item-head,
5066
+ .timeline-alternate .timeline-item-content {
5067
+ direction: ltr;
5068
+ text-align: left;
5069
+ }
5070
+ }
4103
5071
  /* ============ ThemePanel ============ */
4104
5072
  .theme-panel {
4105
5073
  width: min(100%, 340px);
@@ -4109,9 +5077,9 @@ input, textarea, select { font-family: inherit; color: inherit; }
4109
5077
  box-sizing: border-box;
4110
5078
  padding: var(--gap-4);
4111
5079
  border-radius: var(--r-xl);
4112
- color: var(--fg);
4113
- background: var(--bg);
4114
- box-shadow: var(--neu-shadow-lift);
5080
+ color: var(--lmn-theme-panel-fg, var(--fg));
5081
+ background: var(--lmn-theme-panel-bg, var(--bg));
5082
+ box-shadow: var(--lmn-theme-panel-neu-shadow-lift, var(--neu-shadow-lift));
4115
5083
  }
4116
5084
  .theme-panel.compact {
4117
5085
  width: min(100%, 300px);
@@ -4128,13 +5096,13 @@ input, textarea, select { font-family: inherit; color: inherit; }
4128
5096
  align-items: center;
4129
5097
  gap: 8px;
4130
5098
  min-width: 0;
4131
- color: var(--fg);
5099
+ color: var(--lmn-theme-panel-fg, var(--fg));
4132
5100
  font-size: 14px;
4133
5101
  font-weight: 700;
4134
5102
  }
4135
5103
  .theme-panel-title svg {
4136
5104
  flex: 0 0 auto;
4137
- color: var(--accent);
5105
+ color: var(--lmn-theme-panel-accent, var(--accent));
4138
5106
  }
4139
5107
  .theme-panel-title span {
4140
5108
  min-width: 0;
@@ -4144,14 +5112,14 @@ input, textarea, select { font-family: inherit; color: inherit; }
4144
5112
  }
4145
5113
  .theme-panel-desc {
4146
5114
  font-size: 12px;
4147
- color: var(--fg-muted);
5115
+ color: var(--lmn-theme-panel-fg-muted, var(--fg-muted));
4148
5116
  }
4149
5117
  .theme-panel-row {
4150
5118
  display: flex;
4151
5119
  flex-direction: column;
4152
5120
  gap: 8px;
4153
5121
  padding-top: var(--gap-3);
4154
- border-top: 1px solid var(--divider);
5122
+ border-top: 1px solid var(--lmn-theme-panel-divider, var(--divider));
4155
5123
  }
4156
5124
  .theme-panel-head + .theme-panel-row,
4157
5125
  .theme-panel-row:first-child {
@@ -4165,7 +5133,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
4165
5133
  gap: 10px;
4166
5134
  font-size: 12px;
4167
5135
  font-weight: 600;
4168
- color: var(--fg);
5136
+ color: var(--lmn-theme-panel-fg, var(--fg));
4169
5137
  }
4170
5138
  .theme-panel-label > span:last-child:not(:first-child) {
4171
5139
  min-width: 0;
@@ -4175,9 +5143,9 @@ input, textarea, select { font-family: inherit; color: inherit; }
4175
5143
  white-space: nowrap;
4176
5144
  padding: 2px 8px;
4177
5145
  border-radius: var(--r-pill);
4178
- color: var(--accent-ink);
4179
- background: var(--bg);
4180
- box-shadow: var(--neu-shadow-inset);
5146
+ color: var(--lmn-theme-panel-accent-ink, var(--accent-ink));
5147
+ background: var(--lmn-theme-panel-bg, var(--bg));
5148
+ box-shadow: var(--lmn-theme-panel-neu-shadow-inset, var(--neu-shadow-inset));
4181
5149
  font-family: var(--font-mono);
4182
5150
  font-size: 11px;
4183
5151
  font-weight: 500;
@@ -4201,9 +5169,9 @@ input, textarea, select { font-family: inherit; color: inherit; }
4201
5169
  flex-direction: column;
4202
5170
  gap: 8px;
4203
5171
  padding: 9px;
4204
- color: var(--fg-muted);
4205
- background: var(--bg);
4206
- box-shadow: var(--neu-shadow-control);
5172
+ color: var(--lmn-theme-panel-fg-muted, var(--fg-muted));
5173
+ background: var(--lmn-theme-panel-bg, var(--bg));
5174
+ box-shadow: var(--lmn-theme-panel-neu-shadow-control, var(--neu-shadow-control));
4207
5175
  text-align: left;
4208
5176
  white-space: normal;
4209
5177
  transition:
@@ -4212,18 +5180,18 @@ input, textarea, select { font-family: inherit; color: inherit; }
4212
5180
  transform var(--dur-fast) var(--ease);
4213
5181
  }
4214
5182
  .theme-panel .theme-panel-preset.btn:hover {
4215
- color: var(--fg);
4216
- box-shadow: var(--neu-shadow-panel);
5183
+ color: var(--lmn-theme-panel-fg, var(--fg));
5184
+ box-shadow: var(--lmn-theme-panel-neu-shadow-panel, var(--neu-shadow-panel));
4217
5185
  transform: translateY(-1px);
4218
5186
  }
4219
5187
  .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);
5188
+ color: var(--lmn-theme-panel-accent-ink, var(--accent-ink));
5189
+ 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
5190
  transform: none;
4223
5191
  }
4224
5192
  .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);
5193
+ color: var(--lmn-theme-panel-accent-ink, var(--accent-ink));
5194
+ 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
5195
  }
4228
5196
  .theme-panel .theme-panel-preset-shell.deletable .theme-panel-preset.btn {
4229
5197
  padding-right: 28px;
@@ -4236,9 +5204,9 @@ input, textarea, select { font-family: inherit; color: inherit; }
4236
5204
  height: 22px;
4237
5205
  min-width: 22px;
4238
5206
  padding: 0;
4239
- color: var(--fg-subtle);
4240
- background: var(--bg);
4241
- box-shadow: var(--neu-shadow-control);
5207
+ color: var(--lmn-theme-panel-fg-subtle, var(--fg-subtle));
5208
+ background: var(--lmn-theme-panel-bg, var(--bg));
5209
+ box-shadow: var(--lmn-theme-panel-neu-shadow-control, var(--neu-shadow-control));
4242
5210
  opacity: 0;
4243
5211
  transform: scale(0.92);
4244
5212
  }
@@ -4248,7 +5216,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
4248
5216
  transform: scale(1);
4249
5217
  }
4250
5218
  .theme-panel .theme-panel-preset-delete.btn:hover {
4251
- box-shadow: var(--neu-shadow-inset);
5219
+ box-shadow: var(--lmn-theme-panel-neu-shadow-inset, var(--neu-shadow-inset));
4252
5220
  }
4253
5221
  .theme-panel-preset-ink {
4254
5222
  display: grid;
@@ -4260,7 +5228,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
4260
5228
  height: 18px;
4261
5229
  min-width: 0;
4262
5230
  border-radius: var(--r-pill);
4263
- box-shadow: inset 0 0 0 1px var(--divider);
5231
+ box-shadow: inset 0 0 0 1px var(--lmn-theme-panel-divider, var(--divider));
4264
5232
  }
4265
5233
  .theme-panel-preset-copy {
4266
5234
  display: flex;
@@ -4283,7 +5251,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
4283
5251
  overflow: hidden;
4284
5252
  text-overflow: ellipsis;
4285
5253
  white-space: nowrap;
4286
- color: var(--fg-subtle);
5254
+ color: var(--lmn-theme-panel-fg-subtle, var(--fg-subtle));
4287
5255
  font-size: 10px;
4288
5256
  font-weight: 500;
4289
5257
  }
@@ -4299,10 +5267,10 @@ input, textarea, select { font-family: inherit; color: inherit; }
4299
5267
  min-width: 28px;
4300
5268
  padding: 0;
4301
5269
  border-radius: var(--r-pill);
4302
- box-shadow: var(--neu-shadow-subtle);
5270
+ box-shadow: var(--lmn-theme-panel-neu-shadow-subtle, var(--neu-shadow-subtle));
4303
5271
  }
4304
5272
  .theme-panel-swatch.active {
4305
- box-shadow: var(--neu-shadow-inset), 0 0 0 2px var(--accent-glow);
5273
+ 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
5274
  }
4307
5275
  .theme-panel .radio-group.segmented {
4308
5276
  width: 100%;
@@ -4316,8 +5284,8 @@ input, textarea, select { font-family: inherit; color: inherit; }
4316
5284
  gap: 10px;
4317
5285
  padding: 10px;
4318
5286
  border-radius: var(--r-md);
4319
- background: var(--bg);
4320
- box-shadow: var(--neu-shadow-inset);
5287
+ background: var(--lmn-theme-panel-bg, var(--bg));
5288
+ box-shadow: var(--lmn-theme-panel-neu-shadow-inset, var(--neu-shadow-inset));
4321
5289
  }
4322
5290
  .theme-panel-create-head {
4323
5291
  display: flex;
@@ -4332,13 +5300,13 @@ input, textarea, select { font-family: inherit; color: inherit; }
4332
5300
  gap: 2px;
4333
5301
  }
4334
5302
  .theme-panel-create-head span {
4335
- color: var(--fg);
5303
+ color: var(--lmn-theme-panel-fg, var(--fg));
4336
5304
  font-size: 12px;
4337
5305
  font-weight: 700;
4338
5306
  }
4339
5307
  .theme-panel-create-head small {
4340
5308
  min-width: 0;
4341
- color: var(--fg-subtle);
5309
+ color: var(--lmn-theme-panel-fg-subtle, var(--fg-subtle));
4342
5310
  font-family: var(--font-mono);
4343
5311
  font-size: 10px;
4344
5312
  overflow: hidden;
@@ -4350,7 +5318,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
4350
5318
  display: flex;
4351
5319
  flex-direction: column;
4352
5320
  gap: 6px;
4353
- color: var(--fg-subtle);
5321
+ color: var(--lmn-theme-panel-fg-subtle, var(--fg-subtle));
4354
5322
  font-family: var(--font-mono);
4355
5323
  font-size: 10px;
4356
5324
  }
@@ -4390,15 +5358,15 @@ input, textarea, select { font-family: inherit; color: inherit; }
4390
5358
  gap: 10px;
4391
5359
  padding: 10px;
4392
5360
  border-radius: var(--r-md);
4393
- background: var(--bg);
4394
- box-shadow: var(--neu-shadow-inset);
5361
+ background: var(--lmn-theme-panel-bg, var(--bg));
5362
+ box-shadow: var(--lmn-theme-panel-neu-shadow-inset, var(--neu-shadow-inset));
4395
5363
  }
4396
5364
  .theme-panel-advanced-actions {
4397
5365
  display: flex;
4398
5366
  flex-direction: column;
4399
5367
  gap: 8px;
4400
5368
  padding-top: 10px;
4401
- border-top: 1px solid var(--divider);
5369
+ border-top: 1px solid var(--lmn-theme-panel-divider, var(--divider));
4402
5370
  }
4403
5371
  .theme-panel-save-as-field {
4404
5372
  display: grid;
@@ -4407,7 +5375,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
4407
5375
  align-items: center;
4408
5376
  }
4409
5377
  .theme-panel-save-as-field > span {
4410
- color: var(--fg-muted);
5378
+ color: var(--lmn-theme-panel-fg-muted, var(--fg-muted));
4411
5379
  font-size: 11px;
4412
5380
  font-weight: 800;
4413
5381
  white-space: nowrap;
@@ -4420,7 +5388,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
4420
5388
  }
4421
5389
  .theme-panel-advanced-footer > span {
4422
5390
  min-width: 0;
4423
- color: var(--fg-subtle);
5391
+ color: var(--lmn-theme-panel-fg-subtle, var(--fg-subtle));
4424
5392
  font-family: var(--font-mono);
4425
5393
  font-size: 10px;
4426
5394
  overflow: hidden;
@@ -4444,11 +5412,11 @@ input, textarea, select { font-family: inherit; color: inherit; }
4444
5412
  gap: 10px;
4445
5413
  padding: 7px 9px;
4446
5414
  border-radius: var(--preview-radius, var(--r-md));
4447
- color: var(--preview-fg, var(--fg));
4448
- background: var(--preview-bg, var(--bg));
5415
+ color: var(--preview-fg, var(--lmn-theme-panel-fg, var(--fg)));
5416
+ background: var(--preview-bg, var(--lmn-theme-panel-bg, var(--bg)));
4449
5417
  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));
5418
+ 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))),
5419
+ 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
5420
  font-family: var(--preview-font, var(--font-sans));
4453
5421
  font-size: 12px;
4454
5422
  font-weight: 700;
@@ -4471,10 +5439,10 @@ input, textarea, select { font-family: inherit; color: inherit; }
4471
5439
  width: 20px;
4472
5440
  height: 20px;
4473
5441
  border-radius: var(--r-pill);
4474
- background: var(--preview-accent, var(--accent));
5442
+ background: var(--preview-accent, var(--lmn-theme-panel-accent, var(--accent)));
4475
5443
  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));
5444
+ inset 1px 1px 2px color-mix(in oklch, var(--preview-accent, var(--lmn-theme-panel-accent, var(--accent))) 50%, white),
5445
+ 0 0 0 4px var(--preview-accent-glow, var(--lmn-theme-panel-accent-glow, var(--accent-glow)));
4478
5446
  }
4479
5447
  .theme-panel-create-actions {
4480
5448
  display: grid;
@@ -4492,7 +5460,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
4492
5460
  flex-direction: column;
4493
5461
  gap: 8px;
4494
5462
  padding-top: 10px;
4495
- border-top: 1px solid var(--divider);
5463
+ border-top: 1px solid var(--lmn-theme-panel-divider, var(--divider));
4496
5464
  }
4497
5465
  .theme-panel-advanced-section.compact {
4498
5466
  padding-top: 0;
@@ -4506,13 +5474,13 @@ input, textarea, select { font-family: inherit; color: inherit; }
4506
5474
  }
4507
5475
  .theme-panel-advanced-title span {
4508
5476
  min-width: 0;
4509
- color: var(--fg);
5477
+ color: var(--lmn-theme-panel-fg, var(--fg));
4510
5478
  font-size: 11px;
4511
5479
  font-weight: 700;
4512
5480
  }
4513
5481
  .theme-panel-advanced-title small {
4514
5482
  min-width: 0;
4515
- color: var(--fg-subtle);
5483
+ color: var(--lmn-theme-panel-fg-subtle, var(--fg-subtle));
4516
5484
  font-family: var(--font-mono);
4517
5485
  font-size: 9px;
4518
5486
  overflow: hidden;
@@ -4538,13 +5506,13 @@ input, textarea, select { font-family: inherit; color: inherit; }
4538
5506
  gap: 2px;
4539
5507
  }
4540
5508
  .theme-panel-token-label span {
4541
- color: var(--fg-muted);
5509
+ color: var(--lmn-theme-panel-fg-muted, var(--fg-muted));
4542
5510
  font-size: 10px;
4543
5511
  font-weight: 650;
4544
5512
  white-space: nowrap;
4545
5513
  }
4546
5514
  .theme-panel-token-label code {
4547
- color: var(--fg-subtle);
5515
+ color: var(--lmn-theme-panel-fg-subtle, var(--fg-subtle));
4548
5516
  font-family: var(--font-mono);
4549
5517
  font-size: 9px;
4550
5518
  overflow: hidden;
@@ -4583,13 +5551,13 @@ input, textarea, select { font-family: inherit; color: inherit; }
4583
5551
  width: 24px;
4584
5552
  height: 24px;
4585
5553
  border-radius: 7px;
4586
- box-shadow: var(--neu-shadow-inset), inset 0 0 0 1px var(--border);
5554
+ 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
5555
  transition:
4588
5556
  box-shadow var(--dur-fast) var(--ease),
4589
5557
  transform var(--dur-fast) var(--ease);
4590
5558
  }
4591
5559
  .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);
5560
+ 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
5561
  transform: translateY(-1px);
4594
5562
  }
4595
5563
  .theme-panel-token-input .input-wrap,