@lo-tek/interfaces 0.0.0-stage → 0.37.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 (456) hide show
  1. package/CHANGELOG.md +3254 -0
  2. package/LICENSE +21 -0
  3. package/README.md +129 -2
  4. package/agent/astro.md +400 -0
  5. package/agent/bundles.md +429 -0
  6. package/agent/datastar.md +409 -0
  7. package/agent/html.md +388 -0
  8. package/agent/react.md +440 -0
  9. package/agent/templates.md +472 -0
  10. package/core/lotek-core.wasm +0 -0
  11. package/core/lotek.wasm +0 -0
  12. package/dist/cli.d.ts +12 -0
  13. package/dist/cli.d.ts.map +1 -0
  14. package/dist/cli.js +14 -0
  15. package/dist/cli.js.map +1 -0
  16. package/dist/components/css/accordion/accordion.d.ts +37 -0
  17. package/dist/components/css/accordion/accordion.d.ts.map +1 -0
  18. package/dist/components/css/accordion/accordion.js +31 -0
  19. package/dist/components/css/accordion/accordion.js.map +1 -0
  20. package/dist/components/css/alert/alert.d.ts +35 -0
  21. package/dist/components/css/alert/alert.d.ts.map +1 -0
  22. package/dist/components/css/alert/alert.js +29 -0
  23. package/dist/components/css/alert/alert.js.map +1 -0
  24. package/dist/components/css/avatar/avatar.d.ts +40 -0
  25. package/dist/components/css/avatar/avatar.d.ts.map +1 -0
  26. package/dist/components/css/avatar/avatar.js +30 -0
  27. package/dist/components/css/avatar/avatar.js.map +1 -0
  28. package/dist/components/css/badge/badge.d.ts +24 -0
  29. package/dist/components/css/badge/badge.d.ts.map +1 -0
  30. package/dist/components/css/badge/badge.js +24 -0
  31. package/dist/components/css/badge/badge.js.map +1 -0
  32. package/dist/components/css/breadcrumbs/breadcrumbs.d.ts +26 -0
  33. package/dist/components/css/breadcrumbs/breadcrumbs.d.ts.map +1 -0
  34. package/dist/components/css/breadcrumbs/breadcrumbs.js +24 -0
  35. package/dist/components/css/breadcrumbs/breadcrumbs.js.map +1 -0
  36. package/dist/components/css/button/button.d.ts +26 -0
  37. package/dist/components/css/button/button.d.ts.map +1 -0
  38. package/dist/components/css/button/button.js +25 -0
  39. package/dist/components/css/button/button.js.map +1 -0
  40. package/dist/components/css/card/card.d.ts +36 -0
  41. package/dist/components/css/card/card.d.ts.map +1 -0
  42. package/dist/components/css/card/card.js +28 -0
  43. package/dist/components/css/card/card.js.map +1 -0
  44. package/dist/components/css/checkbox/checkbox.d.ts +32 -0
  45. package/dist/components/css/checkbox/checkbox.d.ts.map +1 -0
  46. package/dist/components/css/checkbox/checkbox.js +27 -0
  47. package/dist/components/css/checkbox/checkbox.js.map +1 -0
  48. package/dist/components/css/divider/divider.d.ts +29 -0
  49. package/dist/components/css/divider/divider.d.ts.map +1 -0
  50. package/dist/components/css/divider/divider.js +23 -0
  51. package/dist/components/css/divider/divider.js.map +1 -0
  52. package/dist/components/css/error-text/error-text.d.ts +24 -0
  53. package/dist/components/css/error-text/error-text.d.ts.map +1 -0
  54. package/dist/components/css/error-text/error-text.js +18 -0
  55. package/dist/components/css/error-text/error-text.js.map +1 -0
  56. package/dist/components/css/fieldset/fieldset.d.ts +55 -0
  57. package/dist/components/css/fieldset/fieldset.d.ts.map +1 -0
  58. package/dist/components/css/fieldset/fieldset.js +39 -0
  59. package/dist/components/css/fieldset/fieldset.js.map +1 -0
  60. package/dist/components/css/file-upload/file-upload.d.ts +41 -0
  61. package/dist/components/css/file-upload/file-upload.d.ts.map +1 -0
  62. package/dist/components/css/file-upload/file-upload.js +32 -0
  63. package/dist/components/css/file-upload/file-upload.js.map +1 -0
  64. package/dist/components/css/heading/heading.d.ts +29 -0
  65. package/dist/components/css/heading/heading.d.ts.map +1 -0
  66. package/dist/components/css/heading/heading.js +23 -0
  67. package/dist/components/css/heading/heading.js.map +1 -0
  68. package/dist/components/css/help-text/help-text.d.ts +24 -0
  69. package/dist/components/css/help-text/help-text.d.ts.map +1 -0
  70. package/dist/components/css/help-text/help-text.js +23 -0
  71. package/dist/components/css/help-text/help-text.js.map +1 -0
  72. package/dist/components/css/icon/icon.d.ts +34 -0
  73. package/dist/components/css/icon/icon.d.ts.map +1 -0
  74. package/dist/components/css/icon/icon.js +25 -0
  75. package/dist/components/css/icon/icon.js.map +1 -0
  76. package/dist/components/css/input/input.d.ts +40 -0
  77. package/dist/components/css/input/input.d.ts.map +1 -0
  78. package/dist/components/css/input/input.js +45 -0
  79. package/dist/components/css/input/input.js.map +1 -0
  80. package/dist/components/css/label/label.d.ts +33 -0
  81. package/dist/components/css/label/label.d.ts.map +1 -0
  82. package/dist/components/css/label/label.js +23 -0
  83. package/dist/components/css/label/label.js.map +1 -0
  84. package/dist/components/css/link/link.d.ts +28 -0
  85. package/dist/components/css/link/link.d.ts.map +1 -0
  86. package/dist/components/css/link/link.js +20 -0
  87. package/dist/components/css/link/link.js.map +1 -0
  88. package/dist/components/css/list/list.d.ts +31 -0
  89. package/dist/components/css/list/list.d.ts.map +1 -0
  90. package/dist/components/css/list/list.js +25 -0
  91. package/dist/components/css/list/list.js.map +1 -0
  92. package/dist/components/css/pagination/pagination.d.ts +27 -0
  93. package/dist/components/css/pagination/pagination.d.ts.map +1 -0
  94. package/dist/components/css/pagination/pagination.js +25 -0
  95. package/dist/components/css/pagination/pagination.js.map +1 -0
  96. package/dist/components/css/paragraph/paragraph.d.ts +36 -0
  97. package/dist/components/css/paragraph/paragraph.d.ts.map +1 -0
  98. package/dist/components/css/paragraph/paragraph.js +26 -0
  99. package/dist/components/css/paragraph/paragraph.js.map +1 -0
  100. package/dist/components/css/progress/progress.d.ts +53 -0
  101. package/dist/components/css/progress/progress.d.ts.map +1 -0
  102. package/dist/components/css/progress/progress.js +38 -0
  103. package/dist/components/css/progress/progress.js.map +1 -0
  104. package/dist/components/css/radio/radio.d.ts +32 -0
  105. package/dist/components/css/radio/radio.d.ts.map +1 -0
  106. package/dist/components/css/radio/radio.js +27 -0
  107. package/dist/components/css/radio/radio.js.map +1 -0
  108. package/dist/components/css/search/search.d.ts +34 -0
  109. package/dist/components/css/search/search.d.ts.map +1 -0
  110. package/dist/components/css/search/search.js +32 -0
  111. package/dist/components/css/search/search.js.map +1 -0
  112. package/dist/components/css/select/select.d.ts +40 -0
  113. package/dist/components/css/select/select.d.ts.map +1 -0
  114. package/dist/components/css/select/select.js +31 -0
  115. package/dist/components/css/select/select.js.map +1 -0
  116. package/dist/components/css/shared.d.ts +90 -0
  117. package/dist/components/css/shared.d.ts.map +1 -0
  118. package/dist/components/css/shared.js +167 -0
  119. package/dist/components/css/shared.js.map +1 -0
  120. package/dist/components/css/skeleton/skeleton.d.ts +29 -0
  121. package/dist/components/css/skeleton/skeleton.d.ts.map +1 -0
  122. package/dist/components/css/skeleton/skeleton.js +23 -0
  123. package/dist/components/css/skeleton/skeleton.js.map +1 -0
  124. package/dist/components/css/skip-link/skip-link.d.ts +18 -0
  125. package/dist/components/css/skip-link/skip-link.d.ts.map +1 -0
  126. package/dist/components/css/skip-link/skip-link.js +16 -0
  127. package/dist/components/css/skip-link/skip-link.js.map +1 -0
  128. package/dist/components/css/spinner/spinner.d.ts +33 -0
  129. package/dist/components/css/spinner/spinner.d.ts.map +1 -0
  130. package/dist/components/css/spinner/spinner.js +25 -0
  131. package/dist/components/css/spinner/spinner.js.map +1 -0
  132. package/dist/components/css/sr-only/sr-only.d.ts +17 -0
  133. package/dist/components/css/sr-only/sr-only.d.ts.map +1 -0
  134. package/dist/components/css/sr-only/sr-only.js +15 -0
  135. package/dist/components/css/sr-only/sr-only.js.map +1 -0
  136. package/dist/components/css/switch/switch.d.ts +37 -0
  137. package/dist/components/css/switch/switch.d.ts.map +1 -0
  138. package/dist/components/css/switch/switch.js +29 -0
  139. package/dist/components/css/switch/switch.js.map +1 -0
  140. package/dist/components/css/table/table.d.ts +76 -0
  141. package/dist/components/css/table/table.d.ts.map +1 -0
  142. package/dist/components/css/table/table.js +59 -0
  143. package/dist/components/css/table/table.js.map +1 -0
  144. package/dist/components/css/tag/tag.d.ts +35 -0
  145. package/dist/components/css/tag/tag.d.ts.map +1 -0
  146. package/dist/components/css/tag/tag.js +27 -0
  147. package/dist/components/css/tag/tag.js.map +1 -0
  148. package/dist/components/css/textarea/textarea.d.ts +23 -0
  149. package/dist/components/css/textarea/textarea.d.ts.map +1 -0
  150. package/dist/components/css/textarea/textarea.js +18 -0
  151. package/dist/components/css/textarea/textarea.js.map +1 -0
  152. package/dist/components/css/toggle-group/toggle-group.d.ts +31 -0
  153. package/dist/components/css/toggle-group/toggle-group.d.ts.map +1 -0
  154. package/dist/components/css/toggle-group/toggle-group.js +29 -0
  155. package/dist/components/css/toggle-group/toggle-group.js.map +1 -0
  156. package/dist/components/css/tooltip/tooltip.d.ts +31 -0
  157. package/dist/components/css/tooltip/tooltip.d.ts.map +1 -0
  158. package/dist/components/css/tooltip/tooltip.js +29 -0
  159. package/dist/components/css/tooltip/tooltip.js.map +1 -0
  160. package/dist/components/default-texts.d.ts +35 -0
  161. package/dist/components/default-texts.d.ts.map +1 -0
  162. package/dist/components/default-texts.js +35 -0
  163. package/dist/components/default-texts.js.map +1 -0
  164. package/dist/components/events.d.ts +77 -0
  165. package/dist/components/events.d.ts.map +1 -0
  166. package/dist/components/events.js +3 -0
  167. package/dist/components/events.js.map +1 -0
  168. package/dist/components/frame/dialog/dialog.d.ts +122 -0
  169. package/dist/components/frame/dialog/dialog.d.ts.map +1 -0
  170. package/dist/components/frame/dialog/dialog.js +112 -0
  171. package/dist/components/frame/dialog/dialog.js.map +1 -0
  172. package/dist/components/frame/dialog/lt-dialog.d.ts +104 -0
  173. package/dist/components/frame/dialog/lt-dialog.d.ts.map +1 -0
  174. package/dist/components/frame/dialog/lt-dialog.js +431 -0
  175. package/dist/components/frame/dialog/lt-dialog.js.map +1 -0
  176. package/dist/components/frame/error-summary/error-summary.d.ts +40 -0
  177. package/dist/components/frame/error-summary/error-summary.d.ts.map +1 -0
  178. package/dist/components/frame/error-summary/error-summary.js +32 -0
  179. package/dist/components/frame/error-summary/error-summary.js.map +1 -0
  180. package/dist/components/frame/error-summary/lt-error-summary.d.ts +82 -0
  181. package/dist/components/frame/error-summary/lt-error-summary.d.ts.map +1 -0
  182. package/dist/components/frame/error-summary/lt-error-summary.js +302 -0
  183. package/dist/components/frame/error-summary/lt-error-summary.js.map +1 -0
  184. package/dist/components/frame/field/field-core.d.ts +92 -0
  185. package/dist/components/frame/field/field-core.d.ts.map +1 -0
  186. package/dist/components/frame/field/field-core.js +63 -0
  187. package/dist/components/frame/field/field-core.js.map +1 -0
  188. package/dist/components/frame/field/lt-field.d.ts +173 -0
  189. package/dist/components/frame/field/lt-field.d.ts.map +1 -0
  190. package/dist/components/frame/field/lt-field.js +580 -0
  191. package/dist/components/frame/field/lt-field.js.map +1 -0
  192. package/dist/components/frame/popover/lt-popover.d.ts +132 -0
  193. package/dist/components/frame/popover/lt-popover.d.ts.map +1 -0
  194. package/dist/components/frame/popover/lt-popover.js +490 -0
  195. package/dist/components/frame/popover/lt-popover.js.map +1 -0
  196. package/dist/components/frame/popover/popover.d.ts +49 -0
  197. package/dist/components/frame/popover/popover.d.ts.map +1 -0
  198. package/dist/components/frame/popover/popover.js +64 -0
  199. package/dist/components/frame/popover/popover.js.map +1 -0
  200. package/dist/components/frame/session-timeout/lt-session-timeout.d.ts +198 -0
  201. package/dist/components/frame/session-timeout/lt-session-timeout.d.ts.map +1 -0
  202. package/dist/components/frame/session-timeout/lt-session-timeout.js +573 -0
  203. package/dist/components/frame/session-timeout/lt-session-timeout.js.map +1 -0
  204. package/dist/components/frame/session-timeout/session-timeout.d.ts +113 -0
  205. package/dist/components/frame/session-timeout/session-timeout.d.ts.map +1 -0
  206. package/dist/components/frame/session-timeout/session-timeout.js +101 -0
  207. package/dist/components/frame/session-timeout/session-timeout.js.map +1 -0
  208. package/dist/components/frame/suggestion/lt-suggestion.d.ts +361 -0
  209. package/dist/components/frame/suggestion/lt-suggestion.d.ts.map +1 -0
  210. package/dist/components/frame/suggestion/lt-suggestion.js +1152 -0
  211. package/dist/components/frame/suggestion/lt-suggestion.js.map +1 -0
  212. package/dist/components/frame/suggestion/suggestion.d.ts +143 -0
  213. package/dist/components/frame/suggestion/suggestion.d.ts.map +1 -0
  214. package/dist/components/frame/suggestion/suggestion.js +127 -0
  215. package/dist/components/frame/suggestion/suggestion.js.map +1 -0
  216. package/dist/components/frame/tabs/lt-tabs.d.ts +404 -0
  217. package/dist/components/frame/tabs/lt-tabs.d.ts.map +1 -0
  218. package/dist/components/frame/tabs/lt-tabs.js +1201 -0
  219. package/dist/components/frame/tabs/lt-tabs.js.map +1 -0
  220. package/dist/components/frame/tabs/tabs.d.ts +112 -0
  221. package/dist/components/frame/tabs/tabs.d.ts.map +1 -0
  222. package/dist/components/frame/tabs/tabs.js +107 -0
  223. package/dist/components/frame/tabs/tabs.js.map +1 -0
  224. package/dist/components/host-element.d.ts +135 -0
  225. package/dist/components/host-element.d.ts.map +1 -0
  226. package/dist/components/host-element.js +366 -0
  227. package/dist/components/host-element.js.map +1 -0
  228. package/dist/components/standalone/connection-status/connection-status.d.ts +28 -0
  229. package/dist/components/standalone/connection-status/connection-status.d.ts.map +1 -0
  230. package/dist/components/standalone/connection-status/connection-status.js +22 -0
  231. package/dist/components/standalone/connection-status/connection-status.js.map +1 -0
  232. package/dist/components/standalone/connection-status/lt-connection-status.d.ts +81 -0
  233. package/dist/components/standalone/connection-status/lt-connection-status.d.ts.map +1 -0
  234. package/dist/components/standalone/connection-status/lt-connection-status.js +216 -0
  235. package/dist/components/standalone/connection-status/lt-connection-status.js.map +1 -0
  236. package/dist/components/standalone/toast/lt-toast.d.ts +109 -0
  237. package/dist/components/standalone/toast/lt-toast.d.ts.map +1 -0
  238. package/dist/components/standalone/toast/lt-toast.js +256 -0
  239. package/dist/components/standalone/toast/lt-toast.js.map +1 -0
  240. package/dist/components/standalone/toast/toast.d.ts +52 -0
  241. package/dist/components/standalone/toast/toast.d.ts.map +1 -0
  242. package/dist/components/standalone/toast/toast.js +42 -0
  243. package/dist/components/standalone/toast/toast.js.map +1 -0
  244. package/dist/diagnostics/core.d.ts +137 -0
  245. package/dist/diagnostics/core.d.ts.map +1 -0
  246. package/dist/diagnostics/core.js +72 -0
  247. package/dist/diagnostics/core.js.map +1 -0
  248. package/dist/diagnostics/default-core.d.ts +10 -0
  249. package/dist/diagnostics/default-core.d.ts.map +1 -0
  250. package/dist/diagnostics/default-core.js +72 -0
  251. package/dist/diagnostics/default-core.js.map +1 -0
  252. package/dist/diagnostics/index.d.ts +84 -0
  253. package/dist/diagnostics/index.d.ts.map +1 -0
  254. package/dist/diagnostics/index.js +106 -0
  255. package/dist/diagnostics/index.js.map +1 -0
  256. package/dist/dom.d.ts +55 -0
  257. package/dist/dom.d.ts.map +1 -0
  258. package/dist/dom.js +162 -0
  259. package/dist/dom.js.map +1 -0
  260. package/dist/index.d.ts +97 -0
  261. package/dist/index.d.ts.map +1 -0
  262. package/dist/index.js +58 -0
  263. package/dist/index.js.map +1 -0
  264. package/dist/jsx/react.d.ts +180 -0
  265. package/dist/jsx/react.d.ts.map +1 -0
  266. package/dist/jsx/react.js +2 -0
  267. package/dist/jsx/react.js.map +1 -0
  268. package/dist/lotek.css +3617 -0
  269. package/dist/lt.d.ts +325 -0
  270. package/dist/lt.d.ts.map +1 -0
  271. package/dist/lt.js +183 -0
  272. package/dist/lt.js.map +1 -0
  273. package/dist/react.d.ts +492 -0
  274. package/dist/react.d.ts.map +1 -0
  275. package/dist/react.js +296 -0
  276. package/dist/react.js.map +1 -0
  277. package/dist/register.d.ts +17 -0
  278. package/dist/register.d.ts.map +1 -0
  279. package/dist/register.js +35 -0
  280. package/dist/register.js.map +1 -0
  281. package/dist/tokens/color.d.ts +43 -0
  282. package/dist/tokens/color.d.ts.map +1 -0
  283. package/dist/tokens/color.js +123 -0
  284. package/dist/tokens/color.js.map +1 -0
  285. package/dist/tokens/contract.d.ts +18 -0
  286. package/dist/tokens/contract.d.ts.map +1 -0
  287. package/dist/tokens/contract.js +18 -0
  288. package/dist/tokens/contract.js.map +1 -0
  289. package/dist/tokens/matrix-cells.d.ts +30 -0
  290. package/dist/tokens/matrix-cells.d.ts.map +1 -0
  291. package/dist/tokens/matrix-cells.js +273 -0
  292. package/dist/tokens/matrix-cells.js.map +1 -0
  293. package/dist/tokens/matrix.d.ts +18 -0
  294. package/dist/tokens/matrix.d.ts.map +1 -0
  295. package/dist/tokens/matrix.js +21 -0
  296. package/dist/tokens/matrix.js.map +1 -0
  297. package/dist/tokens/theme-check.d.ts +42 -0
  298. package/dist/tokens/theme-check.d.ts.map +1 -0
  299. package/dist/tokens/theme-check.js +10 -0
  300. package/dist/tokens/theme-check.js.map +1 -0
  301. package/dist/tokens/theme.d.ts +94 -0
  302. package/dist/tokens/theme.d.ts.map +1 -0
  303. package/dist/tokens/theme.js +14 -0
  304. package/dist/tokens/theme.js.map +1 -0
  305. package/dist/tokens/tokens.d.ts +122 -0
  306. package/dist/tokens/tokens.d.ts.map +1 -0
  307. package/dist/tokens/tokens.js +158 -0
  308. package/dist/tokens/tokens.js.map +1 -0
  309. package/dist/vocabulary/classes.d.ts +3 -0
  310. package/dist/vocabulary/classes.d.ts.map +1 -0
  311. package/dist/vocabulary/classes.js +1320 -0
  312. package/dist/vocabulary/classes.js.map +1 -0
  313. package/dist/vocabulary/elements.d.ts +3 -0
  314. package/dist/vocabulary/elements.d.ts.map +1 -0
  315. package/dist/vocabulary/elements.js +410 -0
  316. package/dist/vocabulary/elements.js.map +1 -0
  317. package/dist/vocabulary/types.d.ts +175 -0
  318. package/dist/vocabulary/types.d.ts.map +1 -0
  319. package/dist/vocabulary/types.js +11 -0
  320. package/dist/vocabulary/types.js.map +1 -0
  321. package/dist/wasi-host.d.ts +24 -0
  322. package/dist/wasi-host.d.ts.map +1 -0
  323. package/dist/wasi-host.js +140 -0
  324. package/dist/wasi-host.js.map +1 -0
  325. package/live-templates.xml +62 -0
  326. package/manifest/files.json +373 -0
  327. package/manifest/manifest.json +4965 -0
  328. package/manifest/manifest.schema.json +513 -0
  329. package/package.json +404 -4
  330. package/src/cli.ts +21 -0
  331. package/src/components/css/accordion/accordion.css +102 -0
  332. package/src/components/css/accordion/accordion.ts +50 -0
  333. package/src/components/css/alert/alert.css +53 -0
  334. package/src/components/css/alert/alert.ts +48 -0
  335. package/src/components/css/avatar/avatar.css +96 -0
  336. package/src/components/css/avatar/avatar.ts +57 -0
  337. package/src/components/css/badge/badge.css +42 -0
  338. package/src/components/css/badge/badge.ts +43 -0
  339. package/src/components/css/breadcrumbs/breadcrumbs.css +62 -0
  340. package/src/components/css/breadcrumbs/breadcrumbs.ts +30 -0
  341. package/src/components/css/button/button.css +128 -0
  342. package/src/components/css/button/button.ts +44 -0
  343. package/src/components/css/card/card.css +65 -0
  344. package/src/components/css/card/card.ts +50 -0
  345. package/src/components/css/checkbox/checkbox.css +114 -0
  346. package/src/components/css/checkbox/checkbox.ts +50 -0
  347. package/src/components/css/divider/divider.css +38 -0
  348. package/src/components/css/divider/divider.ts +42 -0
  349. package/src/components/css/error-text/error-text.css +21 -0
  350. package/src/components/css/error-text/error-text.ts +37 -0
  351. package/src/components/css/fieldset/fieldset.css +72 -0
  352. package/src/components/css/fieldset/fieldset.ts +87 -0
  353. package/src/components/css/file-upload/file-upload.css +102 -0
  354. package/src/components/css/file-upload/file-upload.ts +65 -0
  355. package/src/components/css/heading/heading.css +33 -0
  356. package/src/components/css/heading/heading.ts +42 -0
  357. package/src/components/css/help-text/help-text.css +24 -0
  358. package/src/components/css/help-text/help-text.ts +42 -0
  359. package/src/components/css/icon/icon.css +20 -0
  360. package/src/components/css/icon/icon.ts +44 -0
  361. package/src/components/css/input/input.css +145 -0
  362. package/src/components/css/input/input.ts +77 -0
  363. package/src/components/css/label/label.css +42 -0
  364. package/src/components/css/label/label.ts +51 -0
  365. package/src/components/css/link/link.css +38 -0
  366. package/src/components/css/link/link.ts +38 -0
  367. package/src/components/css/list/list.css +53 -0
  368. package/src/components/css/list/list.ts +44 -0
  369. package/src/components/css/pagination/pagination.css +95 -0
  370. package/src/components/css/pagination/pagination.ts +33 -0
  371. package/src/components/css/paragraph/paragraph.css +31 -0
  372. package/src/components/css/paragraph/paragraph.ts +53 -0
  373. package/src/components/css/progress/progress.css +161 -0
  374. package/src/components/css/progress/progress.ts +78 -0
  375. package/src/components/css/radio/radio.css +94 -0
  376. package/src/components/css/radio/radio.ts +50 -0
  377. package/src/components/css/search/search.css +50 -0
  378. package/src/components/css/search/search.ts +56 -0
  379. package/src/components/css/select/select.css +321 -0
  380. package/src/components/css/select/select.ts +63 -0
  381. package/src/components/css/shared.ts +199 -0
  382. package/src/components/css/skeleton/skeleton.css +62 -0
  383. package/src/components/css/skeleton/skeleton.ts +43 -0
  384. package/src/components/css/skip-link/skip-link.css +41 -0
  385. package/src/components/css/skip-link/skip-link.ts +22 -0
  386. package/src/components/css/spinner/spinner.css +48 -0
  387. package/src/components/css/spinner/spinner.ts +48 -0
  388. package/src/components/css/sr-only/sr-only.css +16 -0
  389. package/src/components/css/sr-only/sr-only.ts +21 -0
  390. package/src/components/css/switch/switch.css +105 -0
  391. package/src/components/css/switch/switch.ts +50 -0
  392. package/src/components/css/table/table.css +159 -0
  393. package/src/components/css/table/table.ts +107 -0
  394. package/src/components/css/tag/tag.css +58 -0
  395. package/src/components/css/tag/tag.ts +49 -0
  396. package/src/components/css/textarea/textarea.css +83 -0
  397. package/src/components/css/textarea/textarea.ts +40 -0
  398. package/src/components/css/toggle-group/toggle-group.css +92 -0
  399. package/src/components/css/toggle-group/toggle-group.ts +37 -0
  400. package/src/components/css/tooltip/tooltip.css +89 -0
  401. package/src/components/css/tooltip/tooltip.ts +37 -0
  402. package/src/components/default-texts.ts +34 -0
  403. package/src/components/events.ts +68 -0
  404. package/src/components/frame/dialog/dialog.css +306 -0
  405. package/src/components/frame/dialog/dialog.ts +166 -0
  406. package/src/components/frame/dialog/lt-dialog.ts +510 -0
  407. package/src/components/frame/error-summary/error-summary.css +47 -0
  408. package/src/components/frame/error-summary/error-summary.ts +56 -0
  409. package/src/components/frame/error-summary/lt-error-summary.ts +344 -0
  410. package/src/components/frame/field/field-core.ts +152 -0
  411. package/src/components/frame/field/field.css +17 -0
  412. package/src/components/frame/field/lt-field.ts +753 -0
  413. package/src/components/frame/popover/lt-popover.ts +555 -0
  414. package/src/components/frame/popover/popover.css +50 -0
  415. package/src/components/frame/popover/popover.ts +102 -0
  416. package/src/components/frame/session-timeout/lt-session-timeout.ts +681 -0
  417. package/src/components/frame/session-timeout/session-timeout.css +50 -0
  418. package/src/components/frame/session-timeout/session-timeout.ts +156 -0
  419. package/src/components/frame/suggestion/lt-suggestion.ts +1358 -0
  420. package/src/components/frame/suggestion/suggestion.css +132 -0
  421. package/src/components/frame/suggestion/suggestion.ts +172 -0
  422. package/src/components/frame/tabs/lt-tabs.ts +1319 -0
  423. package/src/components/frame/tabs/tabs.css +128 -0
  424. package/src/components/frame/tabs/tabs.ts +188 -0
  425. package/src/components/host-element.ts +400 -0
  426. package/src/components/standalone/connection-status/connection-status.css +41 -0
  427. package/src/components/standalone/connection-status/connection-status.ts +41 -0
  428. package/src/components/standalone/connection-status/lt-connection-status.ts +242 -0
  429. package/src/components/standalone/toast/lt-toast.ts +300 -0
  430. package/src/components/standalone/toast/toast.css +78 -0
  431. package/src/components/standalone/toast/toast.ts +70 -0
  432. package/src/diagnostics/core.ts +210 -0
  433. package/src/diagnostics/default-core.ts +81 -0
  434. package/src/diagnostics/index.ts +150 -0
  435. package/src/dom.ts +185 -0
  436. package/src/index.ts +218 -0
  437. package/src/jsx/react.ts +212 -0
  438. package/src/lt.ts +192 -0
  439. package/src/react.ts +411 -0
  440. package/src/register.ts +43 -0
  441. package/src/tailwind/tailwind.css +169 -0
  442. package/src/tokens/boundary.css +104 -0
  443. package/src/tokens/color-contract.json +231 -0
  444. package/src/tokens/color.ts +150 -0
  445. package/src/tokens/contract.ts +24 -0
  446. package/src/tokens/matrix-cells.ts +375 -0
  447. package/src/tokens/matrix.ts +32 -0
  448. package/src/tokens/theme-check.ts +51 -0
  449. package/src/tokens/theme.ts +104 -0
  450. package/src/tokens/tokens.css +569 -0
  451. package/src/tokens/tokens.ts +223 -0
  452. package/src/vocabulary/classes.ts +1322 -0
  453. package/src/vocabulary/elements.ts +412 -0
  454. package/src/vocabulary/types.ts +178 -0
  455. package/src/wasi-host.ts +155 -0
  456. package/web-types.json +800 -0
package/dist/lotek.css ADDED
@@ -0,0 +1,3617 @@
1
+ /* @lo-tek/interfaces 0.37.0. Every stylesheet in one file, without @import,
2
+ * for those who link from a CDN or node_modules. A build step uses the
3
+ * stylesheets. Generated by scripts/build-css.ts; edit the sources, not this. */
4
+ /* src/tokens/tokens.css */
5
+ @layer lotek {
6
+ :root {
7
+
8
+ --lt-font-size-reference: 16px;
9
+ --lt-font-size-xxs: 0.625rem;
10
+ --lt-font-size-xs: 0.75rem;
11
+ --lt-font-size-s: 0.875rem;
12
+ --lt-font-size-m: 1rem;
13
+ --lt-font-size-l: 1.125rem;
14
+ --lt-font-size-xl: 1.375rem;
15
+ --lt-font-size-xxl: 1.875rem;
16
+ --lt-font-size-mega: 2.625rem;
17
+ --lt-font-weight-regular: 400;
18
+ --lt-font-weight-medium: 500;
19
+ --lt-font-weight-semibold: 600;
20
+ --lt-font-weight-bold: 700;
21
+
22
+ --lt-line-height-default: 1.5;
23
+ --lt-line-height-heading: 1.2;
24
+ --lt-line-height-article: 1.6;
25
+ --lt-line-height-compact: 1.4;
26
+
27
+ --lt-spacing-px: 1px;
28
+ --lt-spacing-0-5: 0.125rem;
29
+ --lt-spacing-1: 0.25rem;
30
+ --lt-spacing-2: 0.5rem;
31
+ --lt-spacing-3: 0.75rem;
32
+ --lt-spacing-4: 1rem;
33
+ --lt-spacing-5: 1.25rem;
34
+ --lt-spacing-6: 1.5rem;
35
+ --lt-spacing-7: 1.75rem;
36
+ --lt-spacing-8: 2rem;
37
+ --lt-spacing-10: 2.5rem;
38
+ --lt-spacing-12: 3rem;
39
+ --lt-spacing-16: 4rem;
40
+
41
+ --lt-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d4d4d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E");
42
+ --lt-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
43
+ --lt-icon-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='6' y1='12' x2='18' y2='12'/%3E%3C/svg%3E");
44
+ --lt-icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d4d4d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
45
+ --lt-icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d4d4d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 15 15'/%3E%3C/svg%3E");
46
+
47
+ --lt-color-accent-surface: #e9f3ff;
48
+ --lt-color-accent-border-subtle: #c1daf8;
49
+ --lt-color-accent-border: #577ca6;
50
+ --lt-color-accent-border-strong: #39608c;
51
+ --lt-color-accent-fill: #226dba;
52
+ --lt-color-accent-text: #0d4e8c;
53
+ --lt-color-accent-text-strong: #0b2a4a;
54
+ --lt-color-accent-text-subtle: #336195;
55
+ --lt-color-accent-content: #f9fcff;
56
+
57
+ --lt-color-visited-surface: #ebf2ff;
58
+ --lt-color-visited-border-subtle: #cdd8eb;
59
+ --lt-color-visited-border: #697a95;
60
+ --lt-color-visited-border-strong: #4d5e7a;
61
+ --lt-color-visited-fill: #4f6c9c;
62
+ --lt-color-visited-text: #364d74;
63
+ --lt-color-visited-text-strong: #1d293e;
64
+ --lt-color-visited-text-subtle: #4c6080;
65
+ --lt-color-visited-content: #fafcfe;
66
+
67
+ --lt-color-brand1-surface: #e4f7ef;
68
+ --lt-color-brand1-border-subtle: #c2dfd4;
69
+ --lt-color-brand1-border: #578474;
70
+ --lt-color-brand1-border-strong: #386958;
71
+ --lt-color-brand1-fill: #157e63;
72
+ --lt-color-brand1-text: #005b46;
73
+ --lt-color-brand1-text-strong: #073125;
74
+ --lt-color-brand1-text-subtle: #316c59;
75
+ --lt-color-brand1-content: #f9fdfb;
76
+
77
+ --lt-color-brand2-surface: #f2efff;
78
+ --lt-color-brand2-border-subtle: #d8d2f8;
79
+ --lt-color-brand2-border: #7a70a6;
80
+ --lt-color-brand2-border-strong: #5f538c;
81
+ --lt-color-brand2-fill: #7156ba;
82
+ --lt-color-brand2-text: #513b8b;
83
+ --lt-color-brand2-text-strong: #2b204a;
84
+ --lt-color-brand2-text-subtle: #625295;
85
+ --lt-color-brand2-content: #fcfbff;
86
+
87
+ --lt-color-brand3-surface: #ffecee;
88
+ --lt-color-brand3-border-subtle: #f4cccf;
89
+ --lt-color-brand3-border: #9f676d;
90
+ --lt-color-brand3-border-strong: #844a51;
91
+ --lt-color-brand3-fill: #a94656;
92
+ --lt-color-brand3-text: #7e2e3c;
93
+ --lt-color-brand3-text-strong: #431920;
94
+ --lt-color-brand3-text-subtle: #8b4750;
95
+ --lt-color-brand3-content: #fffafb;
96
+
97
+ --lt-color-neutral-surface: #f1f2f3;
98
+ --lt-color-neutral-border-subtle: #d6d7d9;
99
+ --lt-color-neutral-border: #77797c;
100
+ --lt-color-neutral-border-strong: #5c5e60;
101
+ --lt-color-neutral-fill: #696c71;
102
+ --lt-color-neutral-text: #4a4d51;
103
+ --lt-color-neutral-text-strong: #27292b;
104
+ --lt-color-neutral-text-subtle: #5d5f62;
105
+ --lt-color-neutral-content: #fbfcfc;
106
+ --lt-color-neutral-canvas: #ffffff;
107
+ --lt-color-neutral-raised: #e4e4e5;
108
+
109
+ --lt-color-danger-surface: #ffedec;
110
+ --lt-color-danger-border-subtle: #facac8;
111
+ --lt-color-danger-border: #a66363;
112
+ --lt-color-danger-border-strong: #8b4647;
113
+ --lt-color-danger-fill: #b53b43;
114
+ --lt-color-danger-text: #87232c;
115
+ --lt-color-danger-text-strong: #481518;
116
+ --lt-color-danger-text-subtle: #934244;
117
+ --lt-color-danger-content: #fffafa;
118
+
119
+ --lt-color-warning-surface: #f9f1e1;
120
+ --lt-color-warning-border-subtle: #e3d6bc;
121
+ --lt-color-warning-border: #8a7650;
122
+ --lt-color-warning-border-strong: #6f5a31;
123
+ --lt-color-warning-fill: #896508;
124
+ --lt-color-warning-text: #644800;
125
+ --lt-color-warning-text-strong: #352604;
126
+ --lt-color-warning-text-subtle: #735b29;
127
+ --lt-color-warning-content: #fdfcf9;
128
+
129
+ --lt-color-success-surface: #e8f7e6;
130
+ --lt-color-success-border-subtle: #c9dfc5;
131
+ --lt-color-success-border: #63835e;
132
+ --lt-color-success-border-strong: #466841;
133
+ --lt-color-success-fill: #3f7d37;
134
+ --lt-color-success-text: #285a22;
135
+ --lt-color-success-text-strong: #163013;
136
+ --lt-color-success-text-subtle: #426b3d;
137
+ --lt-color-success-content: #fafdfa;
138
+
139
+ --lt-color-disabled-surface: var(--lt-color-neutral-raised);
140
+ --lt-color-disabled-text: var(--lt-color-neutral-border);
141
+
142
+ --lt-focus-ring: 2px solid var(--lt-color-accent-border-strong);
143
+
144
+ --lt-color-overlay: #1a1a1a80;
145
+
146
+ --lt-shadow-overlay: 0 16px 40px rgba(0, 0, 0, 0.12);
147
+ }
148
+
149
+ @media (prefers-color-scheme: dark) {
150
+ :root:not([data-theme="light"]) {
151
+ --lt-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b2b2b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E");
152
+ --lt-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
153
+ --lt-icon-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='6' y1='12' x2='18' y2='12'/%3E%3C/svg%3E");
154
+ --lt-icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b2b2b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
155
+ --lt-icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b2b2b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 15 15'/%3E%3C/svg%3E");
156
+ --lt-color-accent-surface: #192533;
157
+ --lt-color-accent-border-subtle: #253951;
158
+ --lt-color-accent-border: #668bb6;
159
+ --lt-color-accent-border-strong: #85aedf;
160
+ --lt-color-accent-fill: #4992e2;
161
+ --lt-color-accent-text: #99c8ff;
162
+ --lt-color-accent-text-strong: #d8eaff;
163
+ --lt-color-accent-text-subtle: #7aabe4;
164
+ --lt-color-accent-content: #0c0d10;
165
+ --lt-color-visited-surface: #1f242d;
166
+ --lt-color-visited-border-subtle: #2f3847;
167
+ --lt-color-visited-border: #7888a4;
168
+ --lt-color-visited-border-strong: #99accb;
169
+ --lt-color-visited-fill: #7290c2;
170
+ --lt-color-visited-text: #aac5f3;
171
+ --lt-color-visited-text-strong: #dbe9ff;
172
+ --lt-color-visited-text-subtle: #93a9cd;
173
+ --lt-color-visited-content: #0c0d0f;
174
+ --lt-color-brand1-surface: #192822;
175
+ --lt-color-brand1-border-subtle: #253e35;
176
+ --lt-color-brand1-border: #669382;
177
+ --lt-color-brand1-border-strong: #85b7a5;
178
+ --lt-color-brand1-fill: #45a386;
179
+ --lt-color-brand1-text: #8bd6bc;
180
+ --lt-color-brand1-text-strong: #c8f3e3;
181
+ --lt-color-brand1-text-subtle: #7bb6a1;
182
+ --lt-color-brand1-content: #0c0e0d;
183
+ --lt-color-brand2-surface: #242133;
184
+ --lt-color-brand2-border-subtle: #393351;
185
+ --lt-color-brand2-border: #897eb6;
186
+ --lt-color-brand2-border-strong: #aca0df;
187
+ --lt-color-brand2-fill: #937be2;
188
+ --lt-color-brand2-text: #c6b8ff;
189
+ --lt-color-brand2-text-strong: #e8e4ff;
190
+ --lt-color-brand2-text-subtle: #aa9be4;
191
+ --lt-color-brand2-content: #0d0d10;
192
+ --lt-color-brand3-surface: #311e20;
193
+ --lt-color-brand3-border-subtle: #4d2e31;
194
+ --lt-color-brand3-border: #af767c;
195
+ --lt-color-brand3-border-strong: #d7979d;
196
+ --lt-color-brand3-fill: #d26a79;
197
+ --lt-color-brand3-text: #ffa8b1;
198
+ --lt-color-brand3-text-strong: #ffdee1;
199
+ --lt-color-brand3-text-subtle: #db9098;
200
+ --lt-color-brand3-content: #0f0c0d;
201
+ --lt-color-neutral-surface: #232425;
202
+ --lt-color-neutral-border-subtle: #373839;
203
+ --lt-color-neutral-border: #86888a;
204
+ --lt-color-neutral-border-strong: #a9abae;
205
+ --lt-color-neutral-fill: #8c8f94;
206
+ --lt-color-neutral-text: #c1c4c9;
207
+ --lt-color-neutral-text-strong: #e6e8eb;
208
+ --lt-color-neutral-text-subtle: #a5a8ab;
209
+ --lt-color-neutral-content: #0d0d0d;
210
+ --lt-color-danger-surface: #331d1d;
211
+ --lt-color-danger-border-subtle: #512c2c;
212
+ --lt-color-danger-border: #b67271;
213
+ --lt-color-danger-border-strong: #e09392;
214
+ --lt-color-danger-fill: #df6165;
215
+ --lt-color-danger-text: #ffa9a8;
216
+ --lt-color-danger-text-strong: #ffdfde;
217
+ --lt-color-danger-text-subtle: #e58b8a;
218
+ --lt-color-danger-content: #100c0c;
219
+ --lt-color-warning-surface: #292317;
220
+ --lt-color-warning-border-subtle: #413621;
221
+ --lt-color-warning-border: #99855f;
222
+ --lt-color-warning-border-strong: #bea87d;
223
+ --lt-color-warning-fill: #ae893a;
224
+ --lt-color-warning-text: #e0bf7f;
225
+ --lt-color-warning-text-strong: #f9e6c0;
226
+ --lt-color-warning-text-subtle: #bea471;
227
+ --lt-color-warning-content: #0e0d0b;
228
+ --lt-color-success-surface: #1d271b;
229
+ --lt-color-success-border-subtle: #2b3e29;
230
+ --lt-color-success-border: #71926d;
231
+ --lt-color-success-border-strong: #91b78c;
232
+ --lt-color-success-fill: #62a15b;
233
+ --lt-color-success-text: #9ed597;
234
+ --lt-color-success-text-strong: #d2f3cd;
235
+ --lt-color-success-text-subtle: #8ab684;
236
+ --lt-color-success-content: #0c0e0c;
237
+ --lt-color-neutral-canvas: #111212;
238
+ --lt-color-neutral-raised: #323333;
239
+ --lt-color-overlay: rgba(0, 0, 0, 0.72);
240
+ --lt-shadow-overlay: 0 16px 40px rgba(0, 0, 0, 0.6);
241
+ --lt-color-disabled-surface: var(--lt-color-neutral-raised);
242
+ --lt-color-disabled-text: var(--lt-color-neutral-border);
243
+ --lt-focus-ring: 2px solid var(--lt-color-accent-border-strong);
244
+ }
245
+ }
246
+
247
+ [data-theme="light"],
248
+ :root:has(.lt-theme-control[value="light"]:checked) {
249
+ color-scheme: light;
250
+
251
+ --lt-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d4d4d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E");
252
+ --lt-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
253
+ --lt-icon-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='6' y1='12' x2='18' y2='12'/%3E%3C/svg%3E");
254
+ --lt-icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d4d4d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
255
+ --lt-icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d4d4d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 15 15'/%3E%3C/svg%3E");
256
+ --lt-color-accent-surface: #e9f3ff;
257
+ --lt-color-accent-border-subtle: #c1daf8;
258
+ --lt-color-accent-border: #577ca6;
259
+ --lt-color-accent-border-strong: #39608c;
260
+ --lt-color-accent-fill: #226dba;
261
+ --lt-color-accent-text: #0d4e8c;
262
+ --lt-color-accent-text-strong: #0b2a4a;
263
+ --lt-color-accent-text-subtle: #336195;
264
+ --lt-color-accent-content: #f9fcff;
265
+ --lt-color-visited-surface: #ebf2ff;
266
+ --lt-color-visited-border-subtle: #cdd8eb;
267
+ --lt-color-visited-border: #697a95;
268
+ --lt-color-visited-border-strong: #4d5e7a;
269
+ --lt-color-visited-fill: #4f6c9c;
270
+ --lt-color-visited-text: #364d74;
271
+ --lt-color-visited-text-strong: #1d293e;
272
+ --lt-color-visited-text-subtle: #4c6080;
273
+ --lt-color-visited-content: #fafcfe;
274
+ --lt-color-brand1-surface: #e4f7ef;
275
+ --lt-color-brand1-border-subtle: #c2dfd4;
276
+ --lt-color-brand1-border: #578474;
277
+ --lt-color-brand1-border-strong: #386958;
278
+ --lt-color-brand1-fill: #157e63;
279
+ --lt-color-brand1-text: #005b46;
280
+ --lt-color-brand1-text-strong: #073125;
281
+ --lt-color-brand1-text-subtle: #316c59;
282
+ --lt-color-brand1-content: #f9fdfb;
283
+ --lt-color-brand2-surface: #f2efff;
284
+ --lt-color-brand2-border-subtle: #d8d2f8;
285
+ --lt-color-brand2-border: #7a70a6;
286
+ --lt-color-brand2-border-strong: #5f538c;
287
+ --lt-color-brand2-fill: #7156ba;
288
+ --lt-color-brand2-text: #513b8b;
289
+ --lt-color-brand2-text-strong: #2b204a;
290
+ --lt-color-brand2-text-subtle: #625295;
291
+ --lt-color-brand2-content: #fcfbff;
292
+ --lt-color-brand3-surface: #ffecee;
293
+ --lt-color-brand3-border-subtle: #f4cccf;
294
+ --lt-color-brand3-border: #9f676d;
295
+ --lt-color-brand3-border-strong: #844a51;
296
+ --lt-color-brand3-fill: #a94656;
297
+ --lt-color-brand3-text: #7e2e3c;
298
+ --lt-color-brand3-text-strong: #431920;
299
+ --lt-color-brand3-text-subtle: #8b4750;
300
+ --lt-color-brand3-content: #fffafb;
301
+ --lt-color-neutral-surface: #f1f2f3;
302
+ --lt-color-neutral-border-subtle: #d6d7d9;
303
+ --lt-color-neutral-border: #77797c;
304
+ --lt-color-neutral-border-strong: #5c5e60;
305
+ --lt-color-neutral-fill: #696c71;
306
+ --lt-color-neutral-text: #4a4d51;
307
+ --lt-color-neutral-text-strong: #27292b;
308
+ --lt-color-neutral-text-subtle: #5d5f62;
309
+ --lt-color-neutral-content: #fbfcfc;
310
+ --lt-color-danger-surface: #ffedec;
311
+ --lt-color-danger-border-subtle: #facac8;
312
+ --lt-color-danger-border: #a66363;
313
+ --lt-color-danger-border-strong: #8b4647;
314
+ --lt-color-danger-fill: #b53b43;
315
+ --lt-color-danger-text: #87232c;
316
+ --lt-color-danger-text-strong: #481518;
317
+ --lt-color-danger-text-subtle: #934244;
318
+ --lt-color-danger-content: #fffafa;
319
+ --lt-color-warning-surface: #f9f1e1;
320
+ --lt-color-warning-border-subtle: #e3d6bc;
321
+ --lt-color-warning-border: #8a7650;
322
+ --lt-color-warning-border-strong: #6f5a31;
323
+ --lt-color-warning-fill: #896508;
324
+ --lt-color-warning-text: #644800;
325
+ --lt-color-warning-text-strong: #352604;
326
+ --lt-color-warning-text-subtle: #735b29;
327
+ --lt-color-warning-content: #fdfcf9;
328
+ --lt-color-success-surface: #e8f7e6;
329
+ --lt-color-success-border-subtle: #c9dfc5;
330
+ --lt-color-success-border: #63835e;
331
+ --lt-color-success-border-strong: #466841;
332
+ --lt-color-success-fill: #3f7d37;
333
+ --lt-color-success-text: #285a22;
334
+ --lt-color-success-text-strong: #163013;
335
+ --lt-color-success-text-subtle: #426b3d;
336
+ --lt-color-success-content: #fafdfa;
337
+ --lt-color-neutral-canvas: #ffffff;
338
+ --lt-color-neutral-raised: #e4e4e5;
339
+ --lt-color-overlay: #1a1a1a80;
340
+ --lt-shadow-overlay: 0 16px 40px rgba(0, 0, 0, 0.12);
341
+ --lt-color-disabled-surface: var(--lt-color-neutral-raised);
342
+ --lt-color-disabled-text: var(--lt-color-neutral-border);
343
+ --lt-focus-ring: 2px solid var(--lt-color-accent-border-strong);
344
+ }
345
+
346
+ [data-theme="dark"],
347
+ :root:has(.lt-theme-control[value="dark"]:checked) {
348
+ color-scheme: dark;
349
+
350
+ --lt-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b2b2b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E");
351
+ --lt-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
352
+ --lt-icon-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='6' y1='12' x2='18' y2='12'/%3E%3C/svg%3E");
353
+ --lt-icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b2b2b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
354
+ --lt-icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b2b2b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 15 15'/%3E%3C/svg%3E");
355
+ --lt-color-accent-surface: #192533;
356
+ --lt-color-accent-border-subtle: #253951;
357
+ --lt-color-accent-border: #668bb6;
358
+ --lt-color-accent-border-strong: #85aedf;
359
+ --lt-color-accent-fill: #4992e2;
360
+ --lt-color-accent-text: #99c8ff;
361
+ --lt-color-accent-text-strong: #d8eaff;
362
+ --lt-color-accent-text-subtle: #7aabe4;
363
+ --lt-color-accent-content: #0c0d10;
364
+ --lt-color-visited-surface: #1f242d;
365
+ --lt-color-visited-border-subtle: #2f3847;
366
+ --lt-color-visited-border: #7888a4;
367
+ --lt-color-visited-border-strong: #99accb;
368
+ --lt-color-visited-fill: #7290c2;
369
+ --lt-color-visited-text: #aac5f3;
370
+ --lt-color-visited-text-strong: #dbe9ff;
371
+ --lt-color-visited-text-subtle: #93a9cd;
372
+ --lt-color-visited-content: #0c0d0f;
373
+ --lt-color-brand1-surface: #192822;
374
+ --lt-color-brand1-border-subtle: #253e35;
375
+ --lt-color-brand1-border: #669382;
376
+ --lt-color-brand1-border-strong: #85b7a5;
377
+ --lt-color-brand1-fill: #45a386;
378
+ --lt-color-brand1-text: #8bd6bc;
379
+ --lt-color-brand1-text-strong: #c8f3e3;
380
+ --lt-color-brand1-text-subtle: #7bb6a1;
381
+ --lt-color-brand1-content: #0c0e0d;
382
+ --lt-color-brand2-surface: #242133;
383
+ --lt-color-brand2-border-subtle: #393351;
384
+ --lt-color-brand2-border: #897eb6;
385
+ --lt-color-brand2-border-strong: #aca0df;
386
+ --lt-color-brand2-fill: #937be2;
387
+ --lt-color-brand2-text: #c6b8ff;
388
+ --lt-color-brand2-text-strong: #e8e4ff;
389
+ --lt-color-brand2-text-subtle: #aa9be4;
390
+ --lt-color-brand2-content: #0d0d10;
391
+ --lt-color-brand3-surface: #311e20;
392
+ --lt-color-brand3-border-subtle: #4d2e31;
393
+ --lt-color-brand3-border: #af767c;
394
+ --lt-color-brand3-border-strong: #d7979d;
395
+ --lt-color-brand3-fill: #d26a79;
396
+ --lt-color-brand3-text: #ffa8b1;
397
+ --lt-color-brand3-text-strong: #ffdee1;
398
+ --lt-color-brand3-text-subtle: #db9098;
399
+ --lt-color-brand3-content: #0f0c0d;
400
+ --lt-color-neutral-surface: #232425;
401
+ --lt-color-neutral-border-subtle: #373839;
402
+ --lt-color-neutral-border: #86888a;
403
+ --lt-color-neutral-border-strong: #a9abae;
404
+ --lt-color-neutral-fill: #8c8f94;
405
+ --lt-color-neutral-text: #c1c4c9;
406
+ --lt-color-neutral-text-strong: #e6e8eb;
407
+ --lt-color-neutral-text-subtle: #a5a8ab;
408
+ --lt-color-neutral-content: #0d0d0d;
409
+ --lt-color-danger-surface: #331d1d;
410
+ --lt-color-danger-border-subtle: #512c2c;
411
+ --lt-color-danger-border: #b67271;
412
+ --lt-color-danger-border-strong: #e09392;
413
+ --lt-color-danger-fill: #df6165;
414
+ --lt-color-danger-text: #ffa9a8;
415
+ --lt-color-danger-text-strong: #ffdfde;
416
+ --lt-color-danger-text-subtle: #e58b8a;
417
+ --lt-color-danger-content: #100c0c;
418
+ --lt-color-warning-surface: #292317;
419
+ --lt-color-warning-border-subtle: #413621;
420
+ --lt-color-warning-border: #99855f;
421
+ --lt-color-warning-border-strong: #bea87d;
422
+ --lt-color-warning-fill: #ae893a;
423
+ --lt-color-warning-text: #e0bf7f;
424
+ --lt-color-warning-text-strong: #f9e6c0;
425
+ --lt-color-warning-text-subtle: #bea471;
426
+ --lt-color-warning-content: #0e0d0b;
427
+ --lt-color-success-surface: #1d271b;
428
+ --lt-color-success-border-subtle: #2b3e29;
429
+ --lt-color-success-border: #71926d;
430
+ --lt-color-success-border-strong: #91b78c;
431
+ --lt-color-success-fill: #62a15b;
432
+ --lt-color-success-text: #9ed597;
433
+ --lt-color-success-text-strong: #d2f3cd;
434
+ --lt-color-success-text-subtle: #8ab684;
435
+ --lt-color-success-content: #0c0e0c;
436
+ --lt-color-neutral-canvas: #111212;
437
+ --lt-color-neutral-raised: #323333;
438
+ --lt-color-overlay: rgba(0, 0, 0, 0.72);
439
+ --lt-shadow-overlay: 0 16px 40px rgba(0, 0, 0, 0.6);
440
+ --lt-color-disabled-surface: var(--lt-color-neutral-raised);
441
+ --lt-color-disabled-text: var(--lt-color-neutral-border);
442
+ --lt-focus-ring: 2px solid var(--lt-color-accent-border-strong);
443
+ }
444
+
445
+ :where(
446
+ [data-theme="light"]:not(:root, lt-toast),
447
+ [data-theme="dark"]:not(:root, lt-toast)
448
+ ) {
449
+ background-color: var(--lt-color-neutral-canvas);
450
+ color: var(--lt-color-neutral-text);
451
+ }
452
+
453
+ :root:not([data-theme="light"]):not([data-theme="dark"]):has(
454
+ .lt-theme-control[value="auto"]:checked
455
+ ) {
456
+ color-scheme: light dark;
457
+ }
458
+
459
+ :is(
460
+ .lt-accordion,
461
+ .lt-accordion__content,
462
+ .lt-alert,
463
+ .lt-alert__title,
464
+ .lt-avatar,
465
+ .lt-avatar-stack,
466
+ .lt-badge,
467
+ .lt-breadcrumbs,
468
+ .lt-button,
469
+ .lt-card,
470
+ .lt-card__title,
471
+ .lt-checkbox,
472
+ .lt-checkbox-row,
473
+ .lt-connection-status,
474
+ .lt-connection-status__bar,
475
+ .lt-dialog,
476
+ .lt-dialog__body,
477
+ .lt-dialog__footer,
478
+ .lt-dialog__header,
479
+ .lt-dialog__subtitle,
480
+ .lt-dialog__title,
481
+ .lt-divider,
482
+ .lt-error-summary,
483
+ .lt-error-summary__title,
484
+ .lt-error-text,
485
+ .lt-fieldset,
486
+ .lt-file-upload,
487
+ .lt-file-upload-list,
488
+ .lt-heading,
489
+ .lt-help-text,
490
+ .lt-icon,
491
+ .lt-input,
492
+ .lt-label,
493
+ .lt-legend,
494
+ .lt-link,
495
+ .lt-list,
496
+ .lt-pagination,
497
+ .lt-pagination__gap,
498
+ .lt-paragraph,
499
+ .lt-popover,
500
+ .lt-progress,
501
+ .lt-radio,
502
+ .lt-radio-row,
503
+ .lt-search,
504
+ .lt-search-row,
505
+ .lt-select,
506
+ .lt-session-timeout,
507
+ .lt-session-timeout__actions,
508
+ .lt-session-timeout__count,
509
+ .lt-session-timeout__dialog,
510
+ .lt-session-timeout__text,
511
+ .lt-session-timeout__title,
512
+ .lt-skeleton,
513
+ .lt-skip-link,
514
+ .lt-spinner,
515
+ .lt-sr-only,
516
+ .lt-suggestion__empty,
517
+ .lt-suggestion__list,
518
+ .lt-suggestion__option,
519
+ .lt-suggestion__value,
520
+ .lt-switch,
521
+ .lt-switch-row,
522
+ .lt-table,
523
+ .lt-table-scroll,
524
+ .lt-table__sort,
525
+ .lt-tabs__list,
526
+ .lt-tabs__panel,
527
+ .lt-tag,
528
+ .lt-textarea,
529
+ .lt-toast,
530
+ .lt-toast__close,
531
+ .lt-toast__message,
532
+ .lt-toggle-group,
533
+ .lt-toggle-group__option,
534
+ .lt-tooltip,
535
+ .lt-tooltip__bubble,
536
+ lt-field,
537
+ lt-tabs,
538
+ lt-error-summary,
539
+ lt-popover,
540
+ lt-suggestion,
541
+ lt-dialog,
542
+ lt-toast,
543
+ lt-session-timeout,
544
+ lt-connection-status,
545
+ .lt-accordion summary,
546
+ .lt-breadcrumbs li,
547
+ .lt-file-upload-list li,
548
+ .lt-pagination *,
549
+ .lt-select option,
550
+ .lt-tabs__list a
551
+ )[hidden]:not([hidden="until-found" i]) {
552
+
553
+ display: none !important;
554
+ }
555
+ }
556
+
557
+ /* src/components/css/accordion/accordion.css */
558
+ @layer lotek {
559
+ .lt-accordion {
560
+ box-sizing: border-box;
561
+ border: 1px solid var(--lt-color-neutral-border-subtle);
562
+ border-radius: var(--lt-accordion-radius, var(--lt-spacing-1));
563
+ font-family: inherit;
564
+ font-size: var(--lt-font-size-m);
565
+ line-height: var(--lt-line-height-default);
566
+ color: var(--lt-color-neutral-text-strong);
567
+ background: var(--lt-color-neutral-canvas);
568
+ }
569
+
570
+ .lt-accordion + .lt-accordion {
571
+ margin-block-start: var(--lt-spacing-2);
572
+ }
573
+
574
+ .lt-accordion summary {
575
+ display: flex;
576
+ align-items: center;
577
+ justify-content: space-between;
578
+ gap: var(--lt-spacing-2);
579
+ padding: var(
580
+ --lt-accordion-padding,
581
+ var(--lt-spacing-3)
582
+ var(--lt-accordion-padding-inline, var(--lt-spacing-4))
583
+ );
584
+ font-weight: var(--lt-font-weight-semibold);
585
+ cursor: pointer;
586
+
587
+ list-style: none;
588
+ }
589
+
590
+ .lt-accordion summary::-webkit-details-marker {
591
+ display: none;
592
+ }
593
+
594
+ .lt-accordion summary::after {
595
+ content: "";
596
+ inline-size: var(--lt-spacing-2);
597
+ block-size: var(--lt-spacing-2);
598
+ flex: none;
599
+ border-inline-end: 2px solid var(--lt-color-accent-text);
600
+ border-block-end: 2px solid var(--lt-color-accent-text);
601
+ transform: rotate(45deg) translate(-2px, -2px);
602
+ }
603
+
604
+ .lt-accordion[open] summary::after {
605
+ transform: rotate(225deg) translate(-2px, -2px);
606
+ }
607
+
608
+ .lt-accordion summary:dir(rtl)::after {
609
+ transform: rotate(-45deg) translate(2px, -2px);
610
+ }
611
+
612
+ .lt-accordion[open] summary:dir(rtl)::after {
613
+ transform: rotate(-225deg) translate(2px, -2px);
614
+ }
615
+
616
+ .lt-accordion summary:hover {
617
+ background: var(--lt-color-neutral-surface);
618
+ }
619
+
620
+ .lt-accordion summary:focus-visible {
621
+ outline: var(--lt-focus-ring);
622
+ outline-offset: -2px;
623
+ }
624
+
625
+ :where(.lt-accordion summary) > :where(h2, h3, h4, h5, h6) {
626
+ margin: 0;
627
+ font: inherit;
628
+ }
629
+
630
+ .lt-accordion__content {
631
+ padding: 0 var(--lt-accordion-padding-inline, var(--lt-spacing-4))
632
+ var(--lt-spacing-4);
633
+ }
634
+
635
+ .lt-accordion__content > :first-child {
636
+ margin-block-start: 0;
637
+ }
638
+
639
+ .lt-accordion__content > :last-child {
640
+ margin-block-end: 0;
641
+ }
642
+
643
+ .lt-accordion[data-variant="plain"] {
644
+ border-inline: 0;
645
+ border-block-start: 0;
646
+ border-radius: 0;
647
+ }
648
+ }
649
+
650
+ /* src/components/css/alert/alert.css */
651
+ @layer lotek {
652
+ .lt-alert {
653
+ box-sizing: border-box;
654
+ display: flex;
655
+ flex-direction: column;
656
+ gap: var(--lt-spacing-1);
657
+ padding: var(--lt-alert-padding, var(--lt-spacing-3) var(--lt-spacing-4));
658
+ font-family: inherit;
659
+ font-size: var(--lt-font-size-m);
660
+ line-height: var(--lt-line-height-default);
661
+ color: var(--lt-color-neutral-text-strong);
662
+ background: var(--lt-color-neutral-surface);
663
+ border-radius: var(--lt-alert-radius, var(--lt-spacing-1));
664
+
665
+ border-inline-start: var(--lt-alert-accent, var(--lt-spacing-1)) solid
666
+ var(--lt-color-neutral-text);
667
+ }
668
+
669
+ .lt-alert__title {
670
+ margin: 0;
671
+ font-size: var(--lt-font-size-m);
672
+ font-weight: var(--lt-font-weight-semibold);
673
+ line-height: var(--lt-line-height-default);
674
+ }
675
+
676
+ :where(.lt-alert) p {
677
+ margin: 0;
678
+ }
679
+
680
+ .lt-alert[data-color="success"] {
681
+ background: var(--lt-color-success-surface);
682
+ border-inline-start-color: var(--lt-color-success-text);
683
+ }
684
+
685
+ .lt-alert[data-color="warning"] {
686
+ background: var(--lt-color-warning-surface);
687
+ border-inline-start-color: var(--lt-color-warning-text);
688
+ }
689
+
690
+ .lt-alert[data-color="danger"] {
691
+ background: var(--lt-color-danger-surface);
692
+ border-inline-start-color: var(--lt-color-danger-text);
693
+ }
694
+
695
+ .lt-alert[data-color="info"] {
696
+ background: var(--lt-color-accent-surface);
697
+ border-inline-start-color: var(--lt-color-accent-border);
698
+ }
699
+ }
700
+
701
+ /* src/components/css/avatar/avatar.css */
702
+ @layer lotek {
703
+ .lt-avatar {
704
+ box-sizing: border-box;
705
+ display: inline-flex;
706
+ align-items: center;
707
+ justify-content: center;
708
+ inline-size: var(--lt-avatar-size, var(--lt-spacing-10));
709
+ block-size: var(--lt-avatar-size, var(--lt-spacing-10));
710
+ overflow: hidden;
711
+ font-family: inherit;
712
+ font-size: var(--lt-font-size-s);
713
+ font-weight: var(--lt-font-weight-semibold);
714
+ line-height: 1;
715
+ color: var(--lt-color-accent-text);
716
+ background: var(--lt-color-accent-surface);
717
+ border-radius: 50%;
718
+
719
+ outline-width: 1px;
720
+ outline-style: solid;
721
+ outline-color: var(--lt-color-neutral-border-subtle);
722
+ outline-offset: -1px;
723
+ }
724
+
725
+ .lt-avatar:focus-visible {
726
+ outline: var(--lt-focus-ring);
727
+ outline-offset: 2px;
728
+ }
729
+
730
+ .lt-avatar img {
731
+ inline-size: 100%;
732
+ block-size: 100%;
733
+ object-fit: cover;
734
+ }
735
+
736
+ .lt-avatar[data-size="small"] {
737
+ inline-size: var(--lt-spacing-6);
738
+ block-size: var(--lt-spacing-6);
739
+ font-size: var(--lt-font-size-xs);
740
+ }
741
+
742
+ .lt-avatar[data-size="large"] {
743
+ inline-size: var(--lt-spacing-16);
744
+ block-size: var(--lt-spacing-16);
745
+ font-size: var(--lt-font-size-l);
746
+ }
747
+
748
+ .lt-avatar[data-variant="square"] {
749
+ border-radius: var(--lt-avatar-radius, var(--lt-spacing-1));
750
+ }
751
+
752
+ .lt-avatar-stack {
753
+ display: inline-flex;
754
+ flex-direction: row-reverse;
755
+ justify-content: flex-end;
756
+ margin: 0;
757
+ padding: 0;
758
+ list-style: none;
759
+ }
760
+
761
+ .lt-avatar-stack > * + * {
762
+ margin-inline-end: var(
763
+ --lt-avatar-stack-overlap,
764
+ calc(var(--lt-spacing-2) * -1)
765
+ );
766
+ }
767
+
768
+ .lt-avatar-stack .lt-avatar {
769
+ box-shadow: 0 0 0 2px var(--lt-color-neutral-canvas);
770
+ isolation: isolate;
771
+ }
772
+
773
+ .lt-avatar-stack .lt-avatar:focus-visible {
774
+ position: relative;
775
+ z-index: 1;
776
+ }
777
+ }
778
+
779
+ /* src/components/css/badge/badge.css */
780
+ @layer lotek {
781
+ .lt-badge {
782
+
783
+ box-sizing: border-box;
784
+
785
+ display: inline-flex;
786
+ align-items: center;
787
+ gap: var(--lt-spacing-1);
788
+ padding: var(--lt-badge-padding, var(--lt-spacing-0-5) var(--lt-spacing-2));
789
+ font-family: inherit;
790
+ font-size: var(--lt-font-size-xs);
791
+ font-weight: var(--lt-font-weight-semibold);
792
+ line-height: var(--lt-line-height-default);
793
+ border-radius: var(--lt-badge-radius, var(--lt-spacing-4));
794
+ white-space: nowrap;
795
+ user-select: none;
796
+ background: var(--lt-color-accent-surface);
797
+ color: var(--lt-color-accent-text);
798
+ }
799
+
800
+ .lt-badge[data-color="success"] {
801
+ background: var(--lt-color-success-surface);
802
+ color: var(--lt-color-success-text);
803
+ }
804
+
805
+ .lt-badge[data-color="warning"] {
806
+ background: var(--lt-color-warning-surface);
807
+ color: var(--lt-color-warning-text);
808
+ }
809
+
810
+ .lt-badge[data-color="danger"] {
811
+ background: var(--lt-color-danger-surface);
812
+ color: var(--lt-color-danger-text);
813
+ }
814
+
815
+ .lt-badge[data-color="neutral"] {
816
+ background: var(--lt-color-neutral-surface);
817
+ color: var(--lt-color-neutral-text);
818
+ }
819
+ }
820
+
821
+ /* src/components/css/breadcrumbs/breadcrumbs.css */
822
+ @layer lotek {
823
+ .lt-breadcrumbs {
824
+ box-sizing: border-box;
825
+ display: flex;
826
+ flex-wrap: wrap;
827
+ align-items: center;
828
+ gap: var(--lt-breadcrumbs-gap, var(--lt-spacing-2));
829
+ margin: 0;
830
+ padding: 0;
831
+ list-style: none;
832
+ font-family: inherit;
833
+ font-size: var(--lt-font-size-s);
834
+ line-height: var(--lt-line-height-default);
835
+ color: var(--lt-color-neutral-text-subtle);
836
+ }
837
+
838
+ .lt-breadcrumbs li {
839
+ display: flex;
840
+ align-items: center;
841
+ gap: var(--lt-breadcrumbs-gap, var(--lt-spacing-2));
842
+ }
843
+
844
+ .lt-breadcrumbs li + li::before {
845
+ content: "/";
846
+ color: var(--lt-color-neutral-text-subtle);
847
+ }
848
+
849
+ @supports (content: "/" / "") {
850
+ .lt-breadcrumbs li + li::before {
851
+ content: "/" / "";
852
+ }
853
+ }
854
+
855
+ .lt-breadcrumbs a {
856
+ color: var(--lt-color-accent-text);
857
+ text-decoration: underline;
858
+ text-underline-offset: 0.14em;
859
+ }
860
+
861
+ .lt-breadcrumbs a:not([aria-current="page"]):hover {
862
+ color: var(--lt-color-accent-text-strong);
863
+ }
864
+
865
+ .lt-breadcrumbs a:focus-visible {
866
+ outline: var(--lt-focus-ring);
867
+ outline-offset: 2px;
868
+ }
869
+
870
+ .lt-breadcrumbs [aria-current="page"] {
871
+ color: var(--lt-color-neutral-text-strong);
872
+ font-weight: var(--lt-font-weight-semibold);
873
+ text-decoration: none;
874
+ }
875
+ }
876
+
877
+ /* src/components/css/button/button.css */
878
+ @layer lotek {
879
+ .lt-button {
880
+
881
+ box-sizing: border-box;
882
+
883
+ display: inline-flex;
884
+ align-items: center;
885
+ gap: var(--lt-spacing-2);
886
+ padding: var(--lt-button-padding, var(--lt-spacing-2) var(--lt-spacing-4));
887
+ font-family: inherit;
888
+ font-size: var(--lt-font-size-m);
889
+
890
+ font-weight: var(--lt-button-font-weight, var(--lt-font-weight-medium));
891
+ line-height: var(--lt-button-line-height, var(--lt-line-height-default));
892
+ border: var(--lt-button-border-width, 1px) solid var(--lt-color-accent-fill);
893
+ border-radius: var(--lt-button-radius, var(--lt-spacing-1));
894
+ background: var(--lt-color-accent-fill);
895
+ color: var(--lt-color-accent-content);
896
+ cursor: pointer;
897
+ text-decoration: none;
898
+ user-select: none;
899
+
900
+ white-space: normal;
901
+ max-inline-size: 100%;
902
+ text-align: center;
903
+ text-wrap: balance;
904
+ }
905
+
906
+ .lt-button:hover {
907
+ background: var(--lt-color-accent-text);
908
+ border-color: var(--lt-color-accent-text);
909
+ }
910
+
911
+ .lt-button:focus-visible {
912
+ outline: var(--lt-focus-ring);
913
+ outline-offset: 2px;
914
+ }
915
+
916
+ .lt-button[data-variant="secondary"] {
917
+ background: transparent;
918
+ color: var(--lt-color-accent-text);
919
+ border-color: var(--lt-color-accent-border);
920
+ }
921
+
922
+ .lt-button[data-variant="secondary"]:hover:not(
923
+ :disabled,
924
+ [aria-disabled="true"]
925
+ ) {
926
+ background: var(--lt-color-accent-surface);
927
+ }
928
+
929
+ .lt-button[data-variant="ghost"] {
930
+ background: transparent;
931
+ color: var(--lt-color-accent-text);
932
+ border-color: transparent;
933
+ }
934
+
935
+ .lt-button[data-variant="ghost"]:hover:not(
936
+ :disabled,
937
+ [aria-disabled="true"]
938
+ ) {
939
+ background: var(--lt-color-accent-surface);
940
+ }
941
+
942
+ .lt-button[data-variant="danger"] {
943
+ background: var(--lt-color-danger-surface);
944
+ color: var(--lt-color-danger-text);
945
+ border-color: var(--lt-color-danger-text);
946
+ }
947
+
948
+ .lt-button[data-variant="danger"]:hover:not(
949
+ :disabled,
950
+ [aria-disabled="true"]
951
+ ) {
952
+ background: var(--lt-color-danger-fill);
953
+ border-color: var(--lt-color-danger-fill);
954
+ color: var(--lt-color-danger-content);
955
+ }
956
+
957
+ .lt-button:disabled,
958
+ .lt-button[aria-disabled="true"] {
959
+ background: var(--lt-color-disabled-surface);
960
+ color: var(--lt-color-disabled-text);
961
+ border-color: var(--lt-color-disabled-surface);
962
+
963
+ cursor: not-allowed;
964
+ }
965
+
966
+ .lt-button[aria-disabled="true"] {
967
+ pointer-events: none;
968
+ }
969
+ }
970
+
971
+ /* src/components/css/card/card.css */
972
+ @layer lotek {
973
+ .lt-card {
974
+ box-sizing: border-box;
975
+ display: flex;
976
+ flex-direction: column;
977
+ gap: var(--lt-spacing-2);
978
+ padding: var(--lt-card-padding, var(--lt-spacing-4));
979
+
980
+ font: inherit;
981
+ color: var(--lt-color-neutral-text-strong);
982
+ background: var(--lt-color-neutral-canvas);
983
+ border: 1px solid var(--lt-color-neutral-border-subtle);
984
+ border-radius: var(--lt-card-radius, var(--lt-spacing-2));
985
+ }
986
+
987
+ .lt-card > :where(span, a, button) {
988
+ align-self: flex-start;
989
+ }
990
+
991
+ .lt-card__title {
992
+ margin: 0;
993
+ font-size: var(--lt-font-size-l);
994
+ font-weight: var(--lt-font-weight-semibold);
995
+ line-height: var(--lt-line-height-compact);
996
+ }
997
+
998
+ :where(.lt-card) p {
999
+ margin: 0;
1000
+ line-height: var(--lt-line-height-article);
1001
+ }
1002
+
1003
+ .lt-card[data-variant="filled"] {
1004
+ background: var(--lt-color-neutral-surface);
1005
+ border-color: transparent;
1006
+ }
1007
+
1008
+ .lt-card[data-interactive] {
1009
+ text-align: start;
1010
+ text-decoration: none;
1011
+ cursor: pointer;
1012
+ }
1013
+
1014
+ .lt-card[data-interactive]:hover {
1015
+ border-color: var(--lt-color-accent-border);
1016
+ }
1017
+
1018
+ .lt-card[data-interactive]:focus-visible {
1019
+ outline: var(--lt-focus-ring);
1020
+ outline-offset: 2px;
1021
+ }
1022
+ }
1023
+
1024
+ /* src/components/css/checkbox/checkbox.css */
1025
+ @layer lotek {
1026
+ .lt-checkbox {
1027
+
1028
+ box-sizing: border-box;
1029
+
1030
+ appearance: none;
1031
+ flex: none;
1032
+ display: inline-block;
1033
+ inline-size: var(--lt-checkbox-size, var(--lt-spacing-5));
1034
+ block-size: var(--lt-checkbox-size, var(--lt-spacing-5));
1035
+ margin: 0;
1036
+ background-color: var(--lt-color-neutral-canvas);
1037
+ background-position: center;
1038
+ background-repeat: no-repeat;
1039
+ background-size: 80%;
1040
+ border: 1px solid var(--lt-color-neutral-border);
1041
+ border-radius: var(--lt-checkbox-radius, var(--lt-spacing-1));
1042
+ cursor: pointer;
1043
+ }
1044
+
1045
+ .lt-checkbox:hover {
1046
+ border-color: var(--lt-color-neutral-border-strong);
1047
+ }
1048
+
1049
+ .lt-checkbox:focus-visible {
1050
+ outline: var(--lt-focus-ring);
1051
+ outline-offset: 2px;
1052
+ }
1053
+
1054
+ .lt-checkbox:checked,
1055
+ .lt-checkbox:indeterminate {
1056
+ background-color: var(--lt-color-accent-fill);
1057
+ border-color: var(--lt-color-accent-fill);
1058
+ }
1059
+
1060
+ .lt-checkbox:checked {
1061
+ background-image: var(--lt-icon-check);
1062
+ }
1063
+
1064
+ .lt-checkbox:indeterminate {
1065
+ background-image: var(--lt-icon-dash);
1066
+ }
1067
+
1068
+ .lt-checkbox:disabled {
1069
+ background-color: var(--lt-color-disabled-surface);
1070
+ border-color: var(--lt-color-disabled-surface);
1071
+ cursor: not-allowed;
1072
+ }
1073
+
1074
+ .lt-checkbox:disabled:checked,
1075
+ .lt-checkbox:disabled:indeterminate {
1076
+ background-color: var(--lt-color-disabled-text);
1077
+ border-color: var(--lt-color-disabled-text);
1078
+ }
1079
+
1080
+ .lt-checkbox[data-state="invalid"] {
1081
+ border-color: var(--lt-color-danger-text);
1082
+ }
1083
+
1084
+ .lt-checkbox[data-state="invalid"]:focus-visible {
1085
+ outline-color: var(--lt-color-danger-text);
1086
+ }
1087
+
1088
+ .lt-checkbox[data-state="success"] {
1089
+ border-color: var(--lt-color-success-text);
1090
+ }
1091
+
1092
+ .lt-checkbox:disabled[data-state] {
1093
+ background-color: var(--lt-color-disabled-surface);
1094
+ border-color: var(--lt-color-disabled-surface);
1095
+ }
1096
+
1097
+ .lt-checkbox:disabled:is(:checked, :indeterminate)[data-state] {
1098
+ background-color: var(--lt-color-disabled-text);
1099
+ border-color: var(--lt-color-disabled-text);
1100
+ }
1101
+
1102
+ .lt-checkbox-row {
1103
+ display: flex;
1104
+ align-items: flex-start;
1105
+ gap: var(--lt-spacing-2);
1106
+ line-height: var(--lt-line-height-default);
1107
+ }
1108
+
1109
+ @media (forced-colors: active) {
1110
+ .lt-checkbox,
1111
+ .lt-checkbox:checked,
1112
+ .lt-checkbox:indeterminate {
1113
+ appearance: auto;
1114
+ background-image: none;
1115
+ }
1116
+ }
1117
+ }
1118
+
1119
+ /* src/components/standalone/connection-status/connection-status.css */
1120
+ @layer lotek {
1121
+
1122
+ lt-connection-status,
1123
+ .lt-connection-status {
1124
+ display: contents;
1125
+ }
1126
+
1127
+ .lt-connection-status__bar {
1128
+ position: fixed;
1129
+ inset-block-start: 0;
1130
+ inset-inline: 0;
1131
+ z-index: var(--lt-connection-status-layer, 1000);
1132
+ padding: var(
1133
+ --lt-connection-status-padding,
1134
+ var(--lt-spacing-2) var(--lt-spacing-4)
1135
+ );
1136
+ font-size: var(--lt-font-size-s);
1137
+ line-height: var(--lt-line-height-compact);
1138
+ text-align: center;
1139
+ color: var(--lt-color-danger-text);
1140
+ background: var(--lt-color-danger-surface);
1141
+ border-block-end: 1px solid var(--lt-color-danger-text);
1142
+ }
1143
+
1144
+ .lt-connection-status__bar[data-state="online"] {
1145
+ color: var(--lt-color-success-text);
1146
+ background: var(--lt-color-success-surface);
1147
+ border-block-end-color: var(--lt-color-success-text);
1148
+ }
1149
+
1150
+ @media (forced-colors: active) {
1151
+ .lt-connection-status__bar {
1152
+ border: 2px solid CanvasText;
1153
+ }
1154
+ }
1155
+ }
1156
+
1157
+ /* src/components/frame/dialog/dialog.css */
1158
+ @layer lotek {
1159
+
1160
+ lt-dialog {
1161
+ display: contents;
1162
+ }
1163
+
1164
+ .lt-dialog {
1165
+ box-sizing: border-box;
1166
+
1167
+ inline-size: var(
1168
+ --lt-dialog-width,
1169
+ min(32rem, 100%, calc(100vw - var(--lt-spacing-8)))
1170
+ );
1171
+ max-block-size: calc(100vh - var(--lt-spacing-16));
1172
+ padding: var(--lt-dialog-padding, var(--lt-spacing-5));
1173
+ font-family: inherit;
1174
+ font-size: var(--lt-font-size-m);
1175
+ line-height: var(--lt-line-height-default);
1176
+ color: var(--lt-color-neutral-text-strong);
1177
+ background: var(--lt-color-neutral-canvas);
1178
+ border: 1px solid var(--lt-color-neutral-border-subtle);
1179
+ border-radius: var(--lt-dialog-radius, var(--lt-spacing-2));
1180
+ box-shadow: var(--lt-shadow-overlay);
1181
+ }
1182
+
1183
+ .lt-dialog:has(> .lt-dialog__body) {
1184
+ display: flex;
1185
+ flex-direction: column;
1186
+ }
1187
+
1188
+ dialog.lt-dialog:not([open]):not(:is(:popover-open)) {
1189
+ display: none;
1190
+ }
1191
+
1192
+ .lt-dialog::backdrop {
1193
+ background: var(--lt-color-overlay);
1194
+ }
1195
+
1196
+ lt-dialog .lt-dialog[open]:not(:modal) {
1197
+ position: fixed;
1198
+ z-index: var(--lt-dialog-layer, 40);
1199
+
1200
+ inset: 0;
1201
+ margin: auto;
1202
+ max-inline-size: calc(100% - 6px - 2em);
1203
+ overflow: auto;
1204
+
1205
+ box-shadow:
1206
+ var(--lt-shadow-overlay),
1207
+ 0 0 0 100vmax var(--lt-color-overlay);
1208
+ }
1209
+
1210
+ .lt-dialog__title {
1211
+ margin: 0 0 var(--lt-spacing-2);
1212
+ font-size: var(--lt-font-size-l);
1213
+ font-weight: var(--lt-font-weight-semibold);
1214
+ line-height: var(--lt-line-height-compact);
1215
+ }
1216
+
1217
+ .lt-dialog__body {
1218
+ margin: 0;
1219
+ overflow-y: auto;
1220
+ }
1221
+
1222
+ .lt-dialog__footer {
1223
+ display: flex;
1224
+ flex-wrap: wrap;
1225
+ justify-content: flex-end;
1226
+ gap: var(--lt-spacing-2);
1227
+ margin-block-start: var(--lt-spacing-5);
1228
+ }
1229
+
1230
+ .lt-dialog:has(> .lt-dialog__header) {
1231
+ padding: 0;
1232
+ }
1233
+
1234
+ .lt-dialog__header {
1235
+ flex: none;
1236
+ padding: var(--lt-dialog-padding, var(--lt-spacing-5));
1237
+
1238
+ border-start-start-radius: calc(
1239
+ var(--lt-dialog-radius, var(--lt-spacing-2)) -
1240
+ 1px
1241
+ );
1242
+ border-start-end-radius: calc(
1243
+ var(--lt-dialog-radius, var(--lt-spacing-2)) -
1244
+ 1px
1245
+ );
1246
+ }
1247
+
1248
+ .lt-dialog:not(
1249
+ [data-color="brand"],
1250
+ [data-color="info"],
1251
+ [data-color="success"],
1252
+ [data-color="warning"],
1253
+ [data-color="danger"]
1254
+ )
1255
+ > .lt-dialog__header {
1256
+ padding-block-end: var(--lt-spacing-2);
1257
+ }
1258
+
1259
+ .lt-dialog:not(
1260
+ [data-color="brand"],
1261
+ [data-color="info"],
1262
+ [data-color="success"],
1263
+ [data-color="warning"],
1264
+ [data-color="danger"]
1265
+ )
1266
+ > .lt-dialog__header
1267
+ + .lt-dialog__body {
1268
+ padding-block-start: 0;
1269
+ }
1270
+
1271
+ .lt-dialog:not(
1272
+ [data-color="brand"],
1273
+ [data-color="info"],
1274
+ [data-color="success"],
1275
+ [data-color="warning"],
1276
+ [data-color="danger"]
1277
+ )
1278
+ > .lt-dialog__header
1279
+ + .lt-dialog__footer {
1280
+ padding-block-start: calc(
1281
+ var(--lt-dialog-padding, var(--lt-spacing-5)) -
1282
+ var(--lt-spacing-2)
1283
+ );
1284
+ }
1285
+
1286
+ .lt-dialog__header .lt-dialog__title {
1287
+ margin: 0;
1288
+ }
1289
+
1290
+ .lt-dialog__subtitle {
1291
+ margin: var(--lt-spacing-1) 0 0;
1292
+ font-size: var(--lt-font-size-s);
1293
+ line-height: var(--lt-line-height-default);
1294
+ }
1295
+
1296
+ .lt-dialog:has(> .lt-dialog__header) > .lt-dialog__body {
1297
+ padding: var(--lt-dialog-padding, var(--lt-spacing-5));
1298
+ }
1299
+
1300
+ .lt-dialog:has(> .lt-dialog__header) > .lt-dialog__footer {
1301
+ margin-block-start: 0;
1302
+ padding: 0 var(--lt-dialog-padding, var(--lt-spacing-5))
1303
+ var(--lt-dialog-padding, var(--lt-spacing-5));
1304
+ }
1305
+
1306
+ .lt-dialog[data-color="brand"] > .lt-dialog__header {
1307
+ color: var(--lt-color-accent-content);
1308
+ background: var(--lt-color-accent-fill);
1309
+ }
1310
+
1311
+ .lt-dialog[data-color="info"] > .lt-dialog__header {
1312
+ color: var(--lt-color-accent-text);
1313
+ background: var(--lt-color-accent-surface);
1314
+ }
1315
+
1316
+ .lt-dialog[data-color="success"] > .lt-dialog__header {
1317
+ color: var(--lt-color-success-text);
1318
+ background: var(--lt-color-success-surface);
1319
+ }
1320
+
1321
+ .lt-dialog[data-color="warning"] > .lt-dialog__header {
1322
+ color: var(--lt-color-warning-text);
1323
+ background: var(--lt-color-warning-surface);
1324
+ }
1325
+
1326
+ .lt-dialog[data-color="danger"] > .lt-dialog__header {
1327
+ color: var(--lt-color-danger-text);
1328
+ background: var(--lt-color-danger-surface);
1329
+ }
1330
+
1331
+ @media (forced-colors: active) {
1332
+ .lt-dialog__header {
1333
+ border-block-end: 1px solid CanvasText;
1334
+ }
1335
+ }
1336
+ }
1337
+
1338
+ /* src/components/css/divider/divider.css */
1339
+ @layer lotek {
1340
+ .lt-divider {
1341
+
1342
+ border: 0;
1343
+ block-size: 1px;
1344
+
1345
+ margin-block: var(--lt-divider-space, var(--lt-spacing-4));
1346
+ margin-inline: 0;
1347
+ align-self: stretch;
1348
+ justify-self: stretch;
1349
+ background: var(--lt-color-neutral-border-subtle);
1350
+ }
1351
+
1352
+ .lt-divider[data-variant="strong"] {
1353
+ background: var(--lt-color-neutral-border-strong);
1354
+ }
1355
+
1356
+ .lt-divider[data-variant="subtle"] {
1357
+ background: var(--lt-color-neutral-raised);
1358
+ }
1359
+
1360
+ @media (forced-colors: active) {
1361
+ .lt-divider,
1362
+ .lt-divider[data-variant] {
1363
+ background: CanvasText;
1364
+ }
1365
+ }
1366
+ }
1367
+
1368
+ /* src/components/css/list/list.css */
1369
+ @layer lotek {
1370
+ .lt-list {
1371
+ box-sizing: border-box;
1372
+ margin: 0;
1373
+ padding-inline-start: var(--lt-spacing-5);
1374
+
1375
+ list-style-type: revert;
1376
+ font-family: inherit;
1377
+ font-size: var(--lt-font-size-m);
1378
+ line-height: var(--lt-line-height-article);
1379
+ color: var(--lt-color-neutral-text-strong);
1380
+ }
1381
+
1382
+ .lt-list li + li {
1383
+ margin-block-start: var(--lt-list-gap, var(--lt-spacing-1));
1384
+ }
1385
+
1386
+ .lt-list .lt-list {
1387
+ margin-block-start: var(--lt-list-gap, var(--lt-spacing-1));
1388
+ }
1389
+
1390
+ .lt-list[data-variant="plain"] {
1391
+ list-style: none;
1392
+ padding-inline-start: 0;
1393
+ }
1394
+
1395
+ .lt-list[data-variant="divided"] {
1396
+ list-style: none;
1397
+ padding-inline-start: 0;
1398
+ }
1399
+
1400
+ .lt-list[data-variant="divided"] li + li {
1401
+ margin-block-start: 0;
1402
+ border-block-start: 1px solid var(--lt-color-neutral-border-subtle);
1403
+ }
1404
+
1405
+ .lt-list[data-variant="divided"] li {
1406
+ padding-block: var(--lt-list-gap, var(--lt-spacing-2));
1407
+ }
1408
+ }
1409
+
1410
+ /* src/components/frame/error-summary/error-summary.css */
1411
+ @layer lotek {
1412
+ lt-error-summary[hidden] {
1413
+ display: none;
1414
+ }
1415
+
1416
+ .lt-error-summary {
1417
+ display: block;
1418
+ box-sizing: border-box;
1419
+ padding: var(--lt-error-summary-padding, var(--lt-spacing-4));
1420
+ font-family: inherit;
1421
+ font-size: var(--lt-font-size-m);
1422
+ line-height: var(--lt-line-height-default);
1423
+ color: var(--lt-color-neutral-text-strong);
1424
+ background: var(--lt-color-danger-surface);
1425
+ border-inline-start: var(--lt-spacing-1) solid var(--lt-color-danger-text);
1426
+ border-radius: var(--lt-error-summary-radius, var(--lt-spacing-1));
1427
+ }
1428
+
1429
+ .lt-error-summary:focus-visible {
1430
+ outline: var(--lt-focus-ring);
1431
+ outline-color: var(--lt-color-danger-text);
1432
+ outline-offset: 2px;
1433
+ }
1434
+
1435
+ .lt-error-summary__title {
1436
+ margin: 0 0 var(--lt-spacing-2);
1437
+ font-size: var(--lt-font-size-l);
1438
+ font-weight: var(--lt-font-weight-semibold);
1439
+ line-height: var(--lt-line-height-compact);
1440
+ }
1441
+
1442
+ .lt-error-summary a {
1443
+ color: var(--lt-color-danger-text);
1444
+ text-decoration: underline;
1445
+ text-underline-offset: 0.14em;
1446
+ }
1447
+
1448
+ .lt-error-summary a:focus-visible {
1449
+ outline: var(--lt-focus-ring);
1450
+ outline-color: var(--lt-color-danger-text);
1451
+ outline-offset: 2px;
1452
+ }
1453
+ }
1454
+
1455
+ /* src/components/css/error-text/error-text.css */
1456
+ @layer lotek {
1457
+ .lt-error-text {
1458
+ display: block;
1459
+
1460
+ margin: var(--lt-spacing-1) 0 0;
1461
+ font-family: inherit;
1462
+ font-size: var(--lt-font-size-xs);
1463
+ font-weight: var(--lt-font-weight-medium);
1464
+ line-height: var(--lt-line-height-compact);
1465
+ color: var(--lt-color-danger-text);
1466
+ }
1467
+
1468
+ .lt-error-text[hidden] {
1469
+ display: none;
1470
+ }
1471
+
1472
+ .lt-error-text[data-variant="warning"] {
1473
+ color: var(--lt-color-warning-text);
1474
+ }
1475
+ }
1476
+
1477
+ /* src/components/css/label/label.css */
1478
+ @layer lotek {
1479
+ .lt-label {
1480
+ display: block;
1481
+ font-family: inherit;
1482
+ font-size: var(--lt-font-size-s);
1483
+ font-weight: var(--lt-font-weight-semibold);
1484
+ line-height: var(--lt-line-height-default);
1485
+ color: var(--lt-color-neutral-text-strong);
1486
+ }
1487
+
1488
+ .lt-label[data-required]::after {
1489
+ content: var(--lt-label-required-symbol, " *");
1490
+ color: var(--lt-color-danger-text);
1491
+ font-weight: var(--lt-font-weight-bold);
1492
+ }
1493
+
1494
+ .lt-label[data-required="text"]::after {
1495
+
1496
+ content: var(--lt-label-required-text, " (required)");
1497
+ color: var(--lt-color-danger-text);
1498
+ font-weight: var(--lt-font-weight-regular);
1499
+ font-size: var(--lt-font-size-xs);
1500
+ }
1501
+
1502
+ .lt-label[data-optional]:not([data-required])::after {
1503
+ content: var(--lt-label-optional-text, " (optional)");
1504
+ color: var(--lt-color-neutral-text-subtle);
1505
+ font-weight: var(--lt-font-weight-regular);
1506
+ font-size: var(--lt-font-size-xs);
1507
+ }
1508
+
1509
+ .lt-label[aria-disabled="true"] {
1510
+ color: var(--lt-color-neutral-text-subtle);
1511
+ }
1512
+ }
1513
+
1514
+ /* src/components/css/input/input.css */
1515
+ @layer lotek {
1516
+ .lt-input {
1517
+
1518
+ box-sizing: border-box;
1519
+
1520
+ display: block;
1521
+ width: var(--lt-input-width, 100%);
1522
+ padding: var(--lt-input-padding, var(--lt-spacing-2) var(--lt-spacing-3));
1523
+ font-family: inherit;
1524
+ font-size: var(--lt-font-size-m);
1525
+ line-height: var(--lt-line-height-default);
1526
+ color: var(--lt-color-neutral-text-strong);
1527
+ background: var(--lt-color-neutral-canvas);
1528
+ border: 1px solid var(--lt-color-neutral-border);
1529
+ border-radius: var(--lt-input-radius, var(--lt-spacing-1));
1530
+ }
1531
+
1532
+ .lt-input::placeholder {
1533
+ color: var(--lt-color-neutral-text-subtle);
1534
+ }
1535
+
1536
+ .lt-input:hover {
1537
+ border-color: var(--lt-color-neutral-border-strong);
1538
+ }
1539
+
1540
+ .lt-input:focus-visible {
1541
+ outline: var(--lt-focus-ring);
1542
+ outline-offset: 2px;
1543
+ border-color: var(--lt-color-accent-border);
1544
+ }
1545
+
1546
+ .lt-input:disabled,
1547
+ .lt-input[aria-disabled="true"] {
1548
+
1549
+ background-color: var(--lt-color-disabled-surface);
1550
+ color: var(--lt-color-disabled-text);
1551
+ border-color: var(--lt-color-disabled-surface);
1552
+
1553
+ cursor: not-allowed;
1554
+ }
1555
+
1556
+ .lt-input[aria-disabled="true"] {
1557
+ pointer-events: none;
1558
+ }
1559
+
1560
+ .lt-input[data-state="invalid"] {
1561
+ border-color: var(--lt-color-danger-text);
1562
+ background-color: var(--lt-color-danger-surface);
1563
+ }
1564
+
1565
+ .lt-input[data-state="invalid"]:focus-visible {
1566
+ outline-color: var(--lt-color-danger-text);
1567
+ }
1568
+
1569
+ .lt-input[data-state="success"] {
1570
+ border-color: var(--lt-color-success-text);
1571
+ background-color: var(--lt-color-success-surface);
1572
+ }
1573
+
1574
+ .lt-input[data-state="success"]:focus-visible {
1575
+ outline-color: var(--lt-color-success-text);
1576
+ }
1577
+
1578
+ .lt-input:is(:disabled, [aria-disabled="true"])[data-state] {
1579
+ background-color: var(--lt-color-disabled-surface);
1580
+ color: var(--lt-color-disabled-text);
1581
+ border-color: var(--lt-color-disabled-surface);
1582
+ }
1583
+
1584
+ .lt-input[data-variant="date"],
1585
+ .lt-input[data-variant="time"],
1586
+ .lt-input[data-variant="datetime-local"] {
1587
+ position: relative;
1588
+ min-height: calc(var(--lt-spacing-4) * 2.5);
1589
+ font-variant-numeric: tabular-nums;
1590
+ letter-spacing: 0.01em;
1591
+ padding-inline-end: calc(var(--lt-spacing-6) + var(--lt-spacing-2));
1592
+ background-repeat: no-repeat;
1593
+ background-position: right var(--lt-spacing-2) center;
1594
+ background-size: 0.95rem 0.95rem;
1595
+ }
1596
+
1597
+ .lt-input[data-variant="date"]:dir(rtl),
1598
+ .lt-input[data-variant="time"]:dir(rtl),
1599
+ .lt-input[data-variant="datetime-local"]:dir(rtl) {
1600
+ background-position: left var(--lt-spacing-2) center;
1601
+ }
1602
+
1603
+ .lt-input[data-variant="date"],
1604
+ .lt-input[data-variant="datetime-local"] {
1605
+ background-image: var(--lt-icon-calendar);
1606
+ }
1607
+
1608
+ .lt-input[data-variant="time"] {
1609
+ background-image: var(--lt-icon-clock);
1610
+ }
1611
+
1612
+ .lt-input[data-variant="date"]::-webkit-calendar-picker-indicator,
1613
+ .lt-input[data-variant="time"]::-webkit-calendar-picker-indicator,
1614
+ .lt-input[data-variant="datetime-local"]::-webkit-calendar-picker-indicator {
1615
+ position: absolute;
1616
+ inset-inline-end: var(--lt-spacing-2);
1617
+ top: 50%;
1618
+ transform: translateY(-50%);
1619
+ opacity: 0;
1620
+ width: var(--lt-spacing-6);
1621
+ height: var(--lt-spacing-6);
1622
+ min-width: var(--lt-spacing-6);
1623
+ min-height: var(--lt-spacing-6);
1624
+ cursor: pointer;
1625
+ }
1626
+
1627
+ @media (forced-colors: active) {
1628
+ .lt-input[data-variant="date"],
1629
+ .lt-input[data-variant="time"],
1630
+ .lt-input[data-variant="datetime-local"] {
1631
+ background-image: none;
1632
+ }
1633
+
1634
+ .lt-input[data-variant="date"]::-webkit-calendar-picker-indicator,
1635
+ .lt-input[data-variant="time"]::-webkit-calendar-picker-indicator,
1636
+ .lt-input[data-variant="datetime-local"]::-webkit-calendar-picker-indicator {
1637
+ opacity: 1;
1638
+ }
1639
+ }
1640
+ }
1641
+
1642
+ /* src/components/css/textarea/textarea.css */
1643
+ @layer lotek {
1644
+ .lt-textarea {
1645
+
1646
+ box-sizing: border-box;
1647
+
1648
+ display: block;
1649
+ width: 100%;
1650
+ min-height: var(--lt-textarea-min-height, calc(var(--lt-spacing-4) * 5));
1651
+ padding: var(
1652
+ --lt-textarea-padding,
1653
+ var(--lt-spacing-2) var(--lt-spacing-3)
1654
+ );
1655
+ font-family: inherit;
1656
+ font-size: var(--lt-font-size-m);
1657
+ line-height: var(--lt-line-height-default);
1658
+ color: var(--lt-color-neutral-text-strong);
1659
+ background: var(--lt-color-neutral-canvas);
1660
+ border: 1px solid var(--lt-color-neutral-border);
1661
+ border-radius: var(--lt-textarea-radius, var(--lt-spacing-1));
1662
+ resize: vertical;
1663
+ }
1664
+
1665
+ .lt-textarea::placeholder {
1666
+ color: var(--lt-color-neutral-text-subtle);
1667
+ }
1668
+
1669
+ .lt-textarea:hover {
1670
+ border-color: var(--lt-color-neutral-border-strong);
1671
+ }
1672
+
1673
+ .lt-textarea:focus-visible {
1674
+ outline: var(--lt-focus-ring);
1675
+ outline-offset: 2px;
1676
+ border-color: var(--lt-color-accent-border);
1677
+ }
1678
+
1679
+ .lt-textarea:disabled,
1680
+ .lt-textarea[aria-disabled="true"] {
1681
+ background: var(--lt-color-disabled-surface);
1682
+ color: var(--lt-color-disabled-text);
1683
+ border-color: var(--lt-color-disabled-surface);
1684
+
1685
+ cursor: not-allowed;
1686
+ }
1687
+
1688
+ .lt-textarea[aria-disabled="true"] {
1689
+ pointer-events: none;
1690
+ }
1691
+
1692
+ .lt-textarea[data-state="invalid"] {
1693
+ border-color: var(--lt-color-danger-text);
1694
+ background: var(--lt-color-danger-surface);
1695
+ }
1696
+
1697
+ .lt-textarea[data-state="invalid"]:focus-visible {
1698
+ outline-color: var(--lt-color-danger-text);
1699
+ }
1700
+
1701
+ .lt-textarea[data-state="success"] {
1702
+ border-color: var(--lt-color-success-text);
1703
+ background: var(--lt-color-success-surface);
1704
+ }
1705
+
1706
+ .lt-textarea[data-state="success"]:focus-visible {
1707
+ outline-color: var(--lt-color-success-text);
1708
+ }
1709
+
1710
+ .lt-textarea:is(:disabled, [aria-disabled="true"])[data-state] {
1711
+ background: var(--lt-color-disabled-surface);
1712
+ color: var(--lt-color-disabled-text);
1713
+ border-color: var(--lt-color-disabled-surface);
1714
+ }
1715
+ }
1716
+
1717
+ /* src/components/css/select/select.css */
1718
+ @layer lotek {
1719
+ .lt-select {
1720
+
1721
+ box-sizing: border-box;
1722
+
1723
+ display: block;
1724
+ width: var(--lt-select-width, 100%);
1725
+ padding: var(--lt-select-padding, var(--lt-spacing-2) var(--lt-spacing-3));
1726
+
1727
+ padding-inline-end: calc(var(--lt-spacing-4) + var(--lt-spacing-2));
1728
+ font-family: inherit;
1729
+ font-size: var(--lt-font-size-m);
1730
+ line-height: var(--lt-line-height-default);
1731
+ color: var(--lt-color-neutral-text-strong);
1732
+ background-color: var(--lt-color-neutral-canvas);
1733
+ border: 1px solid var(--lt-color-neutral-border);
1734
+ border-radius: var(--lt-select-radius, var(--lt-spacing-1));
1735
+ appearance: none;
1736
+ background-image:
1737
+ linear-gradient(
1738
+ 45deg,
1739
+ transparent 50%,
1740
+ var(--lt-color-neutral-text-subtle) 50%
1741
+ ),
1742
+ linear-gradient(
1743
+ 135deg,
1744
+ var(--lt-color-neutral-text-subtle) 50%,
1745
+ transparent 50%
1746
+ );
1747
+ background-position:
1748
+ calc(100% - 1rem) calc(50% - 0.1rem),
1749
+ calc(100% - 0.75rem) calc(50% - 0.1rem);
1750
+ background-size:
1751
+ 0.35rem 0.35rem,
1752
+ 0.35rem 0.35rem;
1753
+ background-repeat: no-repeat;
1754
+ }
1755
+
1756
+ .lt-select:dir(rtl) {
1757
+ background-position:
1758
+ 0.75rem calc(50% - 0.1rem),
1759
+ 1rem calc(50% - 0.1rem);
1760
+ }
1761
+
1762
+ .lt-select:hover {
1763
+ border-color: var(--lt-color-neutral-border-strong);
1764
+ }
1765
+
1766
+ .lt-select:focus-visible {
1767
+ outline: var(--lt-focus-ring);
1768
+ outline-offset: 2px;
1769
+ border-color: var(--lt-color-accent-border);
1770
+ }
1771
+
1772
+ .lt-select:disabled,
1773
+ .lt-select[aria-disabled="true"] {
1774
+ background-color: var(--lt-color-disabled-surface);
1775
+ color: var(--lt-color-disabled-text);
1776
+ border-color: var(--lt-color-disabled-surface);
1777
+
1778
+ cursor: not-allowed;
1779
+ }
1780
+
1781
+ .lt-select[aria-disabled="true"] {
1782
+ pointer-events: none;
1783
+ }
1784
+
1785
+ .lt-select[data-state="invalid"] {
1786
+ border-color: var(--lt-color-danger-text);
1787
+ background-color: var(--lt-color-danger-surface);
1788
+ }
1789
+
1790
+ .lt-select[data-state="invalid"]:focus-visible {
1791
+ outline-color: var(--lt-color-danger-text);
1792
+ }
1793
+
1794
+ .lt-select[data-state="success"] {
1795
+ border-color: var(--lt-color-success-text);
1796
+ background-color: var(--lt-color-success-surface);
1797
+ }
1798
+
1799
+ .lt-select[data-state="success"]:focus-visible {
1800
+ outline-color: var(--lt-color-success-text);
1801
+ }
1802
+
1803
+ .lt-select:is(:disabled, [aria-disabled="true"])[data-state] {
1804
+ background-color: var(--lt-color-disabled-surface);
1805
+ color: var(--lt-color-disabled-text);
1806
+ border-color: var(--lt-color-disabled-surface);
1807
+ }
1808
+
1809
+ @supports (appearance: base-select) {
1810
+ .lt-select[data-picker="styled"],
1811
+ .lt-select[data-picker="styled"]::picker(select) {
1812
+ appearance: base-select;
1813
+ }
1814
+
1815
+ .lt-select[data-picker="styled"] {
1816
+ display: flex;
1817
+ align-items: center;
1818
+ justify-content: space-between;
1819
+ gap: var(--lt-spacing-2);
1820
+ background-image: none;
1821
+ padding: var(
1822
+ --lt-select-padding,
1823
+ var(--lt-spacing-2) var(--lt-spacing-3)
1824
+ );
1825
+ }
1826
+
1827
+ .lt-select[data-picker="styled"] selectedcontent {
1828
+ min-inline-size: 0;
1829
+ overflow: hidden;
1830
+ white-space: nowrap;
1831
+ text-overflow: ellipsis;
1832
+ }
1833
+
1834
+ .lt-select[data-picker="styled"]::picker-icon {
1835
+ color: var(--lt-color-neutral-text-subtle);
1836
+ transition: rotate 120ms ease;
1837
+ }
1838
+
1839
+ .lt-select[data-picker="styled"]:open::picker-icon {
1840
+ rotate: 180deg;
1841
+ }
1842
+
1843
+ .lt-select[data-picker="styled"]::picker(select) {
1844
+ box-sizing: border-box;
1845
+ min-inline-size: anchor-size(self-inline);
1846
+
1847
+ max-block-size: stretch;
1848
+ margin-block: var(--lt-select-viewport-margin, var(--lt-spacing-2));
1849
+ padding: 0;
1850
+ overflow-y: auto;
1851
+ background: var(--lt-color-neutral-canvas);
1852
+ border: 1px solid var(--lt-color-neutral-border);
1853
+ border-radius: var(--lt-select-radius, var(--lt-spacing-1));
1854
+ box-shadow: var(--lt-shadow-overlay);
1855
+
1856
+ position-try-fallbacks: flip-block;
1857
+ opacity: 0;
1858
+ transition:
1859
+ opacity 120ms ease,
1860
+ overlay 120ms allow-discrete,
1861
+ display 120ms allow-discrete;
1862
+ }
1863
+
1864
+ .lt-select[data-picker="styled"]:open::picker(select) {
1865
+ opacity: 1;
1866
+ }
1867
+
1868
+ @starting-style {
1869
+ .lt-select[data-picker="styled"]:open::picker(select) {
1870
+ opacity: 0;
1871
+ }
1872
+ }
1873
+
1874
+ @supports (block-size: calc-size(auto, size)) {
1875
+ .lt-select[data-picker="styled"]::picker(select) {
1876
+ block-size: 0;
1877
+ transition:
1878
+ opacity 120ms ease,
1879
+ block-size 120ms ease,
1880
+ overlay 120ms allow-discrete,
1881
+ display 120ms allow-discrete;
1882
+ }
1883
+
1884
+ .lt-select[data-picker="styled"]:open::picker(select) {
1885
+ block-size: calc-size(auto, size);
1886
+ }
1887
+
1888
+ @starting-style {
1889
+ .lt-select[data-picker="styled"]:open::picker(select) {
1890
+ block-size: 0;
1891
+ }
1892
+ }
1893
+ }
1894
+
1895
+ .lt-select[data-picker="styled"] optgroup {
1896
+ padding-block: var(--lt-spacing-2) var(--lt-spacing-1);
1897
+ font-size: var(--lt-font-size-s);
1898
+ color: var(--lt-color-neutral-text-subtle);
1899
+ text-indent: var(--lt-spacing-3);
1900
+ }
1901
+
1902
+ .lt-select[data-picker="styled"] option {
1903
+ text-indent: 0;
1904
+ display: flex;
1905
+ align-items: center;
1906
+ gap: var(--lt-spacing-2);
1907
+ padding: var(
1908
+ --lt-select-option-padding,
1909
+ var(--lt-spacing-2) var(--lt-spacing-3)
1910
+ );
1911
+ font-family: inherit;
1912
+ font-size: var(--lt-font-size-m);
1913
+ line-height: var(--lt-line-height-default);
1914
+ color: var(--lt-color-neutral-text-strong);
1915
+ background: var(--lt-color-neutral-canvas);
1916
+ cursor: pointer;
1917
+ }
1918
+
1919
+ .lt-select[data-picker="styled"] option::checkmark {
1920
+ order: 1;
1921
+ margin-inline-start: auto;
1922
+ }
1923
+
1924
+ .lt-select[data-picker="styled"] option:hover {
1925
+ background: var(--lt-color-accent-surface);
1926
+ }
1927
+
1928
+ .lt-select[data-picker="styled"] option:checked {
1929
+ background: var(--lt-color-accent-fill);
1930
+ color: var(--lt-color-accent-content);
1931
+ }
1932
+
1933
+ .lt-select[data-picker="styled"] option:focus {
1934
+ outline: var(--lt-focus-ring);
1935
+ outline-offset: -2px;
1936
+ }
1937
+
1938
+ .lt-select[data-picker="styled"] option:checked:focus {
1939
+ outline-color: var(--lt-color-accent-content);
1940
+ }
1941
+
1942
+ .lt-select[data-picker="styled"] option:disabled {
1943
+ color: var(--lt-color-disabled-text);
1944
+ background: var(--lt-color-disabled-surface);
1945
+ cursor: not-allowed;
1946
+ }
1947
+
1948
+ @media (prefers-reduced-motion: reduce) {
1949
+ .lt-select[data-picker="styled"]::picker(select),
1950
+ .lt-select[data-picker="styled"]::picker-icon {
1951
+ transition: none;
1952
+ }
1953
+ }
1954
+ }
1955
+
1956
+ @media (forced-colors: active) {
1957
+ .lt-select,
1958
+ .lt-select[data-picker="styled"] {
1959
+ display: block;
1960
+ appearance: auto;
1961
+ background-image: none;
1962
+ padding: var(
1963
+ --lt-select-padding,
1964
+ var(--lt-spacing-2) var(--lt-spacing-3)
1965
+ );
1966
+ }
1967
+ }
1968
+ }
1969
+
1970
+ /* src/components/css/help-text/help-text.css */
1971
+ @layer lotek {
1972
+ .lt-help-text {
1973
+ display: block;
1974
+
1975
+ margin: var(--lt-spacing-1) 0 0;
1976
+ font-family: inherit;
1977
+ font-size: var(--lt-font-size-xs);
1978
+ line-height: var(--lt-line-height-compact);
1979
+ color: var(--lt-color-neutral-text-subtle);
1980
+ }
1981
+
1982
+ .lt-help-text[data-variant="strong"] {
1983
+ color: var(--lt-color-neutral-text-strong);
1984
+ }
1985
+
1986
+ .lt-help-text[data-variant="success"] {
1987
+ color: var(--lt-color-success-text);
1988
+ }
1989
+
1990
+ .lt-help-text[data-variant="warning"] {
1991
+ color: var(--lt-color-warning-text);
1992
+ }
1993
+ }
1994
+
1995
+ /* src/components/frame/field/field.css */
1996
+ @layer lotek {
1997
+
1998
+ lt-field {
1999
+ display: block;
2000
+ }
2001
+ }
2002
+
2003
+ /* src/components/css/fieldset/fieldset.css */
2004
+ @layer lotek {
2005
+ .lt-fieldset {
2006
+ box-sizing: border-box;
2007
+ display: flex;
2008
+ flex-direction: column;
2009
+ gap: var(--lt-fieldset-gap, var(--lt-spacing-2));
2010
+ margin: 0;
2011
+ padding: 0;
2012
+
2013
+ border: 0;
2014
+ min-inline-size: 0;
2015
+ }
2016
+
2017
+ .lt-legend {
2018
+ padding: 0;
2019
+ margin-block-end: var(--lt-spacing-1);
2020
+ font-family: inherit;
2021
+ font-size: var(--lt-font-size-m);
2022
+ font-weight: var(--lt-font-weight-semibold);
2023
+ line-height: var(--lt-line-height-default);
2024
+ color: var(--lt-color-neutral-text-strong);
2025
+ }
2026
+
2027
+ .lt-legend[data-required]::after {
2028
+ content: var(--lt-label-required-symbol, " *");
2029
+ color: var(--lt-color-danger-text);
2030
+ font-weight: var(--lt-font-weight-bold);
2031
+ }
2032
+
2033
+ .lt-legend[data-required="text"]::after {
2034
+
2035
+ content: var(--lt-label-required-text, " (required)");
2036
+ color: var(--lt-color-danger-text);
2037
+ font-weight: var(--lt-font-weight-regular);
2038
+ font-size: var(--lt-font-size-xs);
2039
+ }
2040
+
2041
+ .lt-legend[data-optional]:not([data-required])::after {
2042
+ content: var(--lt-label-optional-text, " (optional)");
2043
+ color: var(--lt-color-neutral-text-subtle);
2044
+ font-weight: var(--lt-font-weight-regular);
2045
+ font-size: var(--lt-font-size-xs);
2046
+ }
2047
+
2048
+ .lt-fieldset[data-state="invalid"] .lt-legend {
2049
+ color: var(--lt-color-danger-text);
2050
+ }
2051
+
2052
+ .lt-fieldset[data-state="success"] .lt-legend {
2053
+ color: var(--lt-color-success-text);
2054
+ }
2055
+
2056
+ .lt-fieldset:disabled .lt-legend,
2057
+ .lt-legend[aria-disabled="true"] {
2058
+ color: var(--lt-color-neutral-text-subtle);
2059
+ }
2060
+ }
2061
+
2062
+ /* src/components/css/file-upload/file-upload.css */
2063
+ @layer lotek {
2064
+ .lt-file-upload {
2065
+ box-sizing: border-box;
2066
+ display: block;
2067
+ inline-size: 100%;
2068
+ padding: var(--lt-file-upload-padding, var(--lt-spacing-2));
2069
+ font-family: inherit;
2070
+ font-size: var(--lt-font-size-m);
2071
+ line-height: var(--lt-line-height-default);
2072
+ color: var(--lt-color-neutral-text-strong);
2073
+ background: var(--lt-color-neutral-canvas);
2074
+ border: 1px dashed var(--lt-color-neutral-border);
2075
+ border-radius: var(--lt-file-upload-radius, var(--lt-spacing-1));
2076
+ cursor: pointer;
2077
+ }
2078
+
2079
+ .lt-file-upload::file-selector-button {
2080
+ margin-inline-end: var(--lt-spacing-3);
2081
+ padding: var(--lt-spacing-2) var(--lt-spacing-4);
2082
+ font-family: inherit;
2083
+ font-size: var(--lt-font-size-m);
2084
+ line-height: var(--lt-line-height-default);
2085
+ color: var(--lt-color-accent-text);
2086
+ background: transparent;
2087
+ border: 1px solid var(--lt-color-accent-border);
2088
+ border-radius: var(--lt-file-upload-radius, var(--lt-spacing-1));
2089
+ cursor: pointer;
2090
+ }
2091
+
2092
+ .lt-file-upload::file-selector-button:hover {
2093
+ background: var(--lt-color-accent-surface);
2094
+ }
2095
+
2096
+ .lt-file-upload:hover {
2097
+ border-color: var(--lt-color-neutral-border-strong);
2098
+ }
2099
+
2100
+ .lt-file-upload:focus-visible {
2101
+ outline: var(--lt-focus-ring);
2102
+ outline-offset: 2px;
2103
+ }
2104
+
2105
+ .lt-file-upload:disabled {
2106
+ background: var(--lt-color-disabled-surface);
2107
+ color: var(--lt-color-disabled-text);
2108
+ border-color: var(--lt-color-disabled-surface);
2109
+ cursor: not-allowed;
2110
+ }
2111
+
2112
+ .lt-file-upload[data-state="invalid"] {
2113
+ border-color: var(--lt-color-danger-text);
2114
+ background: var(--lt-color-danger-surface);
2115
+ }
2116
+
2117
+ .lt-file-upload[data-state="success"] {
2118
+ border-color: var(--lt-color-success-text);
2119
+ }
2120
+
2121
+ .lt-file-upload:disabled[data-state] {
2122
+ background: var(--lt-color-disabled-surface);
2123
+ color: var(--lt-color-disabled-text);
2124
+ border-color: var(--lt-color-disabled-surface);
2125
+ }
2126
+
2127
+ .lt-file-upload-list {
2128
+ display: flex;
2129
+ flex-direction: column;
2130
+ gap: var(--lt-spacing-2);
2131
+ margin: var(--lt-spacing-2) 0 0;
2132
+ padding: 0;
2133
+ list-style: none;
2134
+ }
2135
+
2136
+ .lt-file-upload-list li {
2137
+ display: flex;
2138
+ flex-wrap: wrap;
2139
+ align-items: center;
2140
+ justify-content: space-between;
2141
+ gap: var(--lt-spacing-2);
2142
+ padding: var(--lt-spacing-2) var(--lt-spacing-3);
2143
+ background: var(--lt-color-neutral-surface);
2144
+ border-radius: var(--lt-file-upload-radius, var(--lt-spacing-1));
2145
+
2146
+ overflow-wrap: anywhere;
2147
+ }
2148
+
2149
+ .lt-file-upload-list li > * {
2150
+ min-inline-size: 0;
2151
+ }
2152
+ }
2153
+
2154
+ /* src/components/css/heading/heading.css */
2155
+ @layer lotek {
2156
+ .lt-heading {
2157
+ margin: 0;
2158
+ font-family: inherit;
2159
+ font-weight: var(--lt-heading-font-weight, var(--lt-font-weight-bold));
2160
+ line-height: var(--lt-heading-line-height, var(--lt-line-height-heading));
2161
+ color: var(--lt-color-neutral-text-strong);
2162
+ text-wrap: balance;
2163
+ font-size: var(--lt-font-size-xl);
2164
+ }
2165
+
2166
+ .lt-heading[data-size="mega"] {
2167
+ font-size: var(--lt-font-size-mega);
2168
+ }
2169
+
2170
+ .lt-heading[data-size="xl"] {
2171
+ font-size: var(--lt-font-size-xxl);
2172
+ }
2173
+
2174
+ .lt-heading[data-size="m"] {
2175
+ font-size: var(--lt-font-size-l);
2176
+ }
2177
+
2178
+ .lt-heading[data-size="s"] {
2179
+ font-size: var(--lt-font-size-m);
2180
+ }
2181
+
2182
+ .lt-heading[data-size="xs"] {
2183
+ font-size: var(--lt-font-size-s);
2184
+ text-transform: uppercase;
2185
+ letter-spacing: 0.06em;
2186
+ }
2187
+ }
2188
+
2189
+ /* src/components/css/icon/icon.css */
2190
+ @layer lotek {
2191
+
2192
+ .lt-icon {
2193
+ display: inline-block;
2194
+ inline-size: 1em;
2195
+ block-size: 1em;
2196
+ flex-shrink: 0;
2197
+ vertical-align: -0.125em;
2198
+ }
2199
+ }
2200
+
2201
+ /* src/components/css/link/link.css */
2202
+ @layer lotek {
2203
+ .lt-link {
2204
+ color: var(--lt-color-accent-text);
2205
+ font-family: inherit;
2206
+ font-size: inherit;
2207
+ line-height: var(--lt-line-height-default);
2208
+ text-decoration-line: underline;
2209
+ text-decoration-thickness: 0.08em;
2210
+ text-underline-offset: 0.14em;
2211
+ text-decoration-color: currentColor;
2212
+ transition:
2213
+ color 120ms ease,
2214
+ text-decoration-color 120ms ease;
2215
+ }
2216
+
2217
+ .lt-link:visited {
2218
+ color: var(--lt-color-visited-text);
2219
+ }
2220
+
2221
+ .lt-link:hover {
2222
+ color: var(--lt-color-accent-text-strong);
2223
+ }
2224
+
2225
+ .lt-link:focus-visible {
2226
+ outline: var(--lt-focus-ring);
2227
+ outline-offset: 2px;
2228
+ border-radius: var(--lt-spacing-0-5);
2229
+ }
2230
+
2231
+ .lt-link[aria-disabled="true"] {
2232
+ color: var(--lt-color-neutral-text-subtle);
2233
+ text-decoration: none;
2234
+ cursor: not-allowed;
2235
+ pointer-events: none;
2236
+ }
2237
+ }
2238
+
2239
+ /* src/components/css/pagination/pagination.css */
2240
+ @layer lotek {
2241
+ .lt-pagination {
2242
+ box-sizing: border-box;
2243
+ display: flex;
2244
+ flex-wrap: wrap;
2245
+ align-items: center;
2246
+ gap: var(--lt-pagination-gap, var(--lt-spacing-1));
2247
+ margin: 0;
2248
+ padding: 0;
2249
+ list-style: none;
2250
+ font-family: inherit;
2251
+ font-size: var(--lt-font-size-m);
2252
+ }
2253
+
2254
+ .lt-pagination a,
2255
+ .lt-pagination button,
2256
+ .lt-pagination span[aria-disabled="true"] {
2257
+ box-sizing: border-box;
2258
+ display: inline-flex;
2259
+ align-items: center;
2260
+ justify-content: center;
2261
+
2262
+ min-inline-size: var(--lt-pagination-size, var(--lt-spacing-10));
2263
+ min-block-size: var(--lt-pagination-size, var(--lt-spacing-10));
2264
+ padding-inline: var(--lt-spacing-2);
2265
+ font-family: inherit;
2266
+ font-size: inherit;
2267
+ line-height: 1;
2268
+ color: var(--lt-color-accent-text);
2269
+ background: transparent;
2270
+ border: 1px solid transparent;
2271
+ border-radius: var(--lt-pagination-radius, var(--lt-spacing-1));
2272
+ text-decoration: none;
2273
+ cursor: pointer;
2274
+ }
2275
+
2276
+ .lt-pagination a:not([aria-current="page"]):hover,
2277
+ .lt-pagination button:hover:not(:disabled):not([aria-current="page"]) {
2278
+ background: var(--lt-color-accent-surface);
2279
+ }
2280
+
2281
+ .lt-pagination a:focus-visible,
2282
+ .lt-pagination button:focus-visible {
2283
+ outline: var(--lt-focus-ring);
2284
+ outline-offset: 2px;
2285
+ }
2286
+
2287
+ .lt-pagination [aria-current="page"] {
2288
+ color: var(--lt-color-accent-content);
2289
+ background: var(--lt-color-accent-fill);
2290
+ border-color: var(--lt-color-accent-fill);
2291
+ font-weight: var(--lt-font-weight-semibold);
2292
+ }
2293
+
2294
+ .lt-pagination [aria-current="page"]:hover {
2295
+ background: var(--lt-color-accent-text);
2296
+ border-color: var(--lt-color-accent-text);
2297
+ }
2298
+
2299
+ .lt-pagination button:disabled,
2300
+ .lt-pagination [aria-disabled="true"],
2301
+ .lt-pagination span[aria-disabled="true"] {
2302
+ color: var(--lt-color-disabled-text);
2303
+ cursor: not-allowed;
2304
+ }
2305
+
2306
+ .lt-pagination__gap {
2307
+ display: inline-flex;
2308
+ align-items: center;
2309
+ justify-content: center;
2310
+ min-inline-size: var(--lt-pagination-size, var(--lt-spacing-10));
2311
+ color: var(--lt-color-neutral-text-subtle);
2312
+ }
2313
+
2314
+ @media (forced-colors: active) {
2315
+
2316
+ .lt-pagination [aria-current="page"],
2317
+ .lt-pagination [aria-current="page"]:hover {
2318
+ background-color: Highlight;
2319
+ color: HighlightText;
2320
+ }
2321
+ }
2322
+ }
2323
+
2324
+ /* src/components/css/paragraph/paragraph.css */
2325
+ @layer lotek {
2326
+ .lt-paragraph {
2327
+ margin: 0;
2328
+ font-family: inherit;
2329
+ font-size: var(--lt-font-size-m);
2330
+ line-height: var(--lt-paragraph-line-height, var(--lt-line-height-article));
2331
+ color: var(--lt-color-neutral-text-strong);
2332
+
2333
+ max-inline-size: var(--lt-paragraph-width, 70ch);
2334
+ }
2335
+
2336
+ .lt-paragraph + .lt-paragraph {
2337
+ margin-block-start: var(--lt-paragraph-gap, var(--lt-spacing-3));
2338
+ }
2339
+
2340
+ .lt-paragraph[data-size="small"] {
2341
+ font-size: var(--lt-font-size-s);
2342
+ }
2343
+
2344
+ .lt-paragraph[data-size="large"] {
2345
+ font-size: var(--lt-font-size-l);
2346
+ line-height: 1.55;
2347
+ }
2348
+
2349
+ .lt-paragraph[data-variant="lead"] {
2350
+ font-size: var(--lt-font-size-l);
2351
+ line-height: 1.55;
2352
+ color: var(--lt-color-neutral-text-subtle);
2353
+ }
2354
+ }
2355
+
2356
+ /* src/components/frame/popover/popover.css */
2357
+ @layer lotek {
2358
+ lt-popover {
2359
+ display: contents;
2360
+ }
2361
+
2362
+ .lt-popover {
2363
+
2364
+ position: fixed;
2365
+ inset: auto;
2366
+ inset-block-start: var(--lt-popover-top, 0);
2367
+ inset-inline-start: var(--lt-popover-left, 0);
2368
+ margin: 0;
2369
+
2370
+ list-style: none;
2371
+ box-sizing: border-box;
2372
+ inline-size: max-content;
2373
+ max-inline-size: var(
2374
+ --lt-popover-width,
2375
+ min(20rem, calc(100vw - var(--lt-spacing-8)))
2376
+ );
2377
+ padding: var(--lt-popover-padding, var(--lt-spacing-3));
2378
+ font-family: inherit;
2379
+ font-size: var(--lt-font-size-m);
2380
+ line-height: var(--lt-line-height-default);
2381
+ color: var(--lt-color-neutral-text-strong);
2382
+ background: var(--lt-color-neutral-canvas);
2383
+ border: 1px solid var(--lt-color-neutral-border-subtle);
2384
+ border-radius: var(--lt-popover-radius, var(--lt-spacing-1));
2385
+ box-shadow: var(--lt-shadow-overlay);
2386
+ }
2387
+
2388
+ .lt-popover:dir(rtl) {
2389
+ inset-inline-start: auto;
2390
+ inset-inline-end: var(--lt-popover-left, 0);
2391
+ }
2392
+
2393
+ .lt-popover:not(:popover-open) {
2394
+ display: none;
2395
+ }
2396
+ }
2397
+
2398
+ /* src/components/css/progress/progress.css */
2399
+ @layer lotek {
2400
+
2401
+ .lt-progress {
2402
+ box-sizing: border-box;
2403
+ appearance: none;
2404
+ display: block;
2405
+ inline-size: 100%;
2406
+ block-size: var(--lt-progress-height, var(--lt-spacing-2));
2407
+ border: 0;
2408
+
2409
+ outline-width: 1px;
2410
+ outline-style: solid;
2411
+ outline-color: var(--lt-progress-border, var(--lt-color-neutral-border));
2412
+ outline-offset: -1px;
2413
+ border-radius: var(--lt-progress-radius, var(--lt-spacing-1));
2414
+ overflow: hidden;
2415
+ background: var(--lt-progress-track, var(--lt-color-neutral-surface));
2416
+ color: var(--lt-progress-fill, var(--lt-color-accent-fill));
2417
+ }
2418
+
2419
+ .lt-progress[data-color="success"] {
2420
+ --lt-progress-fill: var(--lt-color-success-fill);
2421
+ }
2422
+
2423
+ .lt-progress[data-color="warning"] {
2424
+ --lt-progress-fill: var(--lt-color-warning-fill);
2425
+ }
2426
+
2427
+ .lt-progress[data-color="danger"] {
2428
+ --lt-progress-fill: var(--lt-color-danger-fill);
2429
+ }
2430
+
2431
+ .lt-progress::-webkit-progress-bar {
2432
+ background: var(--lt-progress-track, var(--lt-color-neutral-surface));
2433
+ }
2434
+
2435
+ .lt-progress::-webkit-progress-value {
2436
+ background: currentColor;
2437
+ transition: inline-size 200ms ease-out;
2438
+ }
2439
+
2440
+ .lt-progress::-moz-progress-bar {
2441
+ background: currentColor;
2442
+ transition: inline-size 200ms ease-out;
2443
+ }
2444
+
2445
+ .lt-progress:indeterminate {
2446
+ background:
2447
+ linear-gradient(90deg, transparent 0%, currentColor 50%, transparent 100%)
2448
+ no-repeat,
2449
+ var(--lt-progress-track, var(--lt-color-neutral-surface));
2450
+ background-size: 40% 100%;
2451
+ animation: lt-progress-slide 1400ms ease-in-out infinite;
2452
+ }
2453
+
2454
+ .lt-progress:indeterminate::-webkit-progress-bar {
2455
+ background: transparent;
2456
+ }
2457
+
2458
+ .lt-progress:indeterminate::-moz-progress-bar {
2459
+ background: transparent;
2460
+ }
2461
+
2462
+ @keyframes lt-progress-slide {
2463
+ from {
2464
+ background-position: -40% 0;
2465
+ }
2466
+ to {
2467
+ background-position: 140% 0;
2468
+ }
2469
+ }
2470
+
2471
+ @media (prefers-reduced-motion: reduce) {
2472
+ .lt-progress:indeterminate {
2473
+ animation-duration: 4200ms;
2474
+ }
2475
+
2476
+ .lt-progress::-webkit-progress-value {
2477
+ transition: none;
2478
+ }
2479
+
2480
+ .lt-progress::-moz-progress-bar {
2481
+ transition: none;
2482
+ }
2483
+ }
2484
+
2485
+ @media (forced-colors: active) {
2486
+ .lt-progress,
2487
+ .lt-progress[data-color] {
2488
+ --lt-progress-fill: Highlight;
2489
+
2490
+ outline-color: CanvasText;
2491
+ }
2492
+
2493
+ .lt-progress::-webkit-progress-value {
2494
+ background: Highlight;
2495
+ }
2496
+
2497
+ .lt-progress::-moz-progress-bar {
2498
+ background: Highlight;
2499
+ }
2500
+
2501
+ .lt-progress:indeterminate {
2502
+ forced-color-adjust: none;
2503
+ background:
2504
+ linear-gradient(90deg, Canvas 0%, Highlight 50%, Canvas 100%) no-repeat,
2505
+ Canvas;
2506
+ background-size: 40% 100%;
2507
+ }
2508
+ }
2509
+ }
2510
+
2511
+ /* src/components/css/radio/radio.css */
2512
+ @layer lotek {
2513
+ .lt-radio {
2514
+ box-sizing: border-box;
2515
+ appearance: none;
2516
+ flex: none;
2517
+ display: inline-block;
2518
+ inline-size: var(--lt-radio-size, var(--lt-spacing-5));
2519
+ block-size: var(--lt-radio-size, var(--lt-spacing-5));
2520
+ margin: 0;
2521
+ background-color: var(--lt-color-neutral-canvas);
2522
+ border: 1px solid var(--lt-color-neutral-border);
2523
+ border-radius: 50%;
2524
+ cursor: pointer;
2525
+ }
2526
+
2527
+ .lt-radio:hover {
2528
+ border-color: var(--lt-color-neutral-border-strong);
2529
+ }
2530
+
2531
+ .lt-radio:focus-visible {
2532
+ outline: var(--lt-focus-ring);
2533
+ outline-offset: 2px;
2534
+ }
2535
+
2536
+ .lt-radio:checked {
2537
+ background-color: var(--lt-color-accent-fill);
2538
+ border-color: var(--lt-color-accent-fill);
2539
+ background-image: radial-gradient(
2540
+ circle at center,
2541
+ var(--lt-color-accent-content) 0 32%,
2542
+ transparent 34%
2543
+ );
2544
+ }
2545
+
2546
+ .lt-radio:disabled {
2547
+ background-color: var(--lt-color-disabled-surface);
2548
+ border-color: var(--lt-color-disabled-surface);
2549
+ cursor: not-allowed;
2550
+ }
2551
+
2552
+ .lt-radio:disabled:checked {
2553
+ background-color: var(--lt-color-disabled-text);
2554
+ border-color: var(--lt-color-disabled-text);
2555
+ }
2556
+
2557
+ .lt-radio[data-state="invalid"] {
2558
+ border-color: var(--lt-color-danger-text);
2559
+ }
2560
+
2561
+ .lt-radio[data-state="invalid"]:focus-visible {
2562
+ outline-color: var(--lt-color-danger-text);
2563
+ }
2564
+
2565
+ .lt-radio[data-state="success"] {
2566
+ border-color: var(--lt-color-success-text);
2567
+ }
2568
+
2569
+ .lt-radio:disabled[data-state] {
2570
+ background-color: var(--lt-color-disabled-surface);
2571
+ border-color: var(--lt-color-disabled-surface);
2572
+ }
2573
+
2574
+ .lt-radio:disabled:checked[data-state] {
2575
+ background-color: var(--lt-color-disabled-text);
2576
+ border-color: var(--lt-color-disabled-text);
2577
+ }
2578
+
2579
+ .lt-radio-row {
2580
+ display: flex;
2581
+ align-items: flex-start;
2582
+ gap: var(--lt-spacing-2);
2583
+ line-height: var(--lt-line-height-default);
2584
+ }
2585
+
2586
+ @media (forced-colors: active) {
2587
+ .lt-radio,
2588
+ .lt-radio:checked {
2589
+ appearance: auto;
2590
+ background-image: none;
2591
+ }
2592
+ }
2593
+ }
2594
+
2595
+ /* src/components/css/search/search.css */
2596
+ @layer lotek {
2597
+
2598
+ .lt-input.lt-search {
2599
+ padding-inline-start: var(--lt-search-icon-space, var(--lt-spacing-10));
2600
+ background-image: var(--lt-icon-search);
2601
+ background-repeat: no-repeat;
2602
+ background-position: left var(--lt-spacing-3) center;
2603
+ background-size: var(--lt-search-icon-size, var(--lt-spacing-5));
2604
+ }
2605
+
2606
+ .lt-search:dir(rtl) {
2607
+ background-position: right var(--lt-spacing-3) center;
2608
+ }
2609
+
2610
+ .lt-search::-webkit-search-cancel-button {
2611
+ cursor: pointer;
2612
+ }
2613
+
2614
+ .lt-search-row {
2615
+ display: flex;
2616
+ align-items: stretch;
2617
+ gap: var(--lt-spacing-2);
2618
+ }
2619
+
2620
+ .lt-search-row .lt-search {
2621
+ flex: 1 1 auto;
2622
+ min-inline-size: 0;
2623
+ }
2624
+
2625
+ @media (forced-colors: active) {
2626
+ .lt-input.lt-search {
2627
+ background-image: none;
2628
+ padding-inline-start: var(--lt-spacing-3);
2629
+ }
2630
+ }
2631
+ }
2632
+
2633
+ /* src/components/css/sr-only/sr-only.css */
2634
+ @layer lotek {
2635
+
2636
+ .lt-sr-only {
2637
+ position: absolute;
2638
+ width: 1px;
2639
+ height: 1px;
2640
+ padding: 0;
2641
+ margin: -1px;
2642
+ overflow: hidden;
2643
+ clip-path: inset(50%);
2644
+ white-space: nowrap;
2645
+ border-width: 0;
2646
+ }
2647
+ }
2648
+
2649
+ /* src/components/frame/session-timeout/session-timeout.css */
2650
+ @layer lotek {
2651
+
2652
+ lt-session-timeout,
2653
+ .lt-session-timeout {
2654
+ display: contents;
2655
+ }
2656
+
2657
+ .lt-session-timeout__dialog {
2658
+ max-inline-size: var(--lt-session-timeout-width, 26rem);
2659
+ padding: var(--lt-session-timeout-padding, var(--lt-spacing-5));
2660
+ color: var(--lt-color-neutral-text-strong);
2661
+ background: var(--lt-color-neutral-canvas);
2662
+ border: 1px solid var(--lt-color-neutral-border-subtle);
2663
+ border-radius: var(--lt-session-timeout-radius, var(--lt-spacing-1));
2664
+ box-shadow: var(--lt-shadow-overlay);
2665
+ }
2666
+
2667
+ .lt-session-timeout__dialog::backdrop {
2668
+ background: var(--lt-color-overlay);
2669
+ }
2670
+
2671
+ .lt-session-timeout__title {
2672
+ margin: 0 0 var(--lt-spacing-2);
2673
+ font-size: var(--lt-font-size-l);
2674
+ line-height: 1.3;
2675
+ }
2676
+
2677
+ .lt-session-timeout__text {
2678
+ margin: 0 0 var(--lt-spacing-4);
2679
+ line-height: var(--lt-line-height-default);
2680
+ }
2681
+
2682
+ .lt-session-timeout__count {
2683
+ font-variant-numeric: tabular-nums;
2684
+ font-weight: var(--lt-font-weight-semibold);
2685
+ }
2686
+
2687
+ .lt-session-timeout__actions {
2688
+ display: flex;
2689
+ flex-wrap: wrap;
2690
+ gap: var(--lt-spacing-2);
2691
+ }
2692
+ }
2693
+
2694
+ /* src/components/css/skeleton/skeleton.css */
2695
+ @layer lotek {
2696
+ .lt-skeleton {
2697
+ box-sizing: border-box;
2698
+ display: block;
2699
+ inline-size: 100%;
2700
+ block-size: var(--lt-skeleton-height, var(--lt-spacing-4));
2701
+ border-radius: var(--lt-skeleton-radius, var(--lt-spacing-1));
2702
+ background: var(--lt-color-neutral-surface);
2703
+
2704
+ background-image: linear-gradient(
2705
+ 90deg,
2706
+ transparent 0%,
2707
+ var(--lt-color-neutral-canvas) 50%,
2708
+ transparent 100%
2709
+ );
2710
+ background-size: 200% 100%;
2711
+ background-repeat: no-repeat;
2712
+ animation: lt-skeleton-shimmer 1600ms ease-in-out infinite;
2713
+ }
2714
+
2715
+ .lt-skeleton[data-variant="text"] {
2716
+ block-size: var(--lt-font-size-m);
2717
+ border-radius: var(--lt-skeleton-radius, var(--lt-spacing-0-5));
2718
+ }
2719
+
2720
+ .lt-skeleton[data-variant="circle"] {
2721
+ inline-size: var(--lt-skeleton-height, var(--lt-spacing-10));
2722
+ block-size: var(--lt-skeleton-height, var(--lt-spacing-10));
2723
+ border-radius: 50%;
2724
+ }
2725
+
2726
+ @keyframes lt-skeleton-shimmer {
2727
+ from {
2728
+ background-position: 150% 0;
2729
+ }
2730
+ to {
2731
+ background-position: -50% 0;
2732
+ }
2733
+ }
2734
+
2735
+ @media (prefers-reduced-motion: reduce) {
2736
+ .lt-skeleton {
2737
+ animation: none;
2738
+ background-image: none;
2739
+ }
2740
+ }
2741
+
2742
+ @media (forced-colors: active) {
2743
+ .lt-skeleton {
2744
+ border: 1px solid GrayText;
2745
+ animation: none;
2746
+ background-image: none;
2747
+ }
2748
+ }
2749
+ }
2750
+
2751
+ /* src/components/css/skip-link/skip-link.css */
2752
+ @layer lotek {
2753
+
2754
+ .lt-skip-link {
2755
+ position: absolute;
2756
+ inset-inline-start: var(--lt-spacing-2);
2757
+ inset-block-start: var(--lt-spacing-2);
2758
+ z-index: 100;
2759
+ transform: translateY(calc(-100% - var(--lt-spacing-4)));
2760
+ display: inline-block;
2761
+ padding: var(
2762
+ --lt-skip-link-padding,
2763
+ var(--lt-spacing-2) var(--lt-spacing-4)
2764
+ );
2765
+ font-family: inherit;
2766
+ font-size: var(--lt-font-size-m);
2767
+ line-height: var(--lt-line-height-default);
2768
+ color: var(--lt-color-accent-content);
2769
+ background: var(--lt-color-accent-fill);
2770
+ border-radius: var(--lt-skip-link-radius, var(--lt-spacing-1));
2771
+ text-decoration: underline;
2772
+ }
2773
+
2774
+ .lt-skip-link:focus {
2775
+ transform: translateY(0);
2776
+ outline: var(--lt-focus-ring);
2777
+ outline-color: var(--lt-color-neutral-text-strong);
2778
+ outline-offset: 2px;
2779
+ }
2780
+
2781
+ @media (prefers-reduced-motion: no-preference) {
2782
+ .lt-skip-link {
2783
+ transition: transform 120ms ease;
2784
+ }
2785
+ }
2786
+ }
2787
+
2788
+ /* src/components/css/spinner/spinner.css */
2789
+ @layer lotek {
2790
+ .lt-spinner {
2791
+ box-sizing: border-box;
2792
+ display: inline-block;
2793
+ inline-size: var(--lt-spinner-size, var(--lt-spacing-6));
2794
+ block-size: var(--lt-spinner-size, var(--lt-spacing-6));
2795
+ border: var(--lt-spinner-thickness, 2px) solid
2796
+ var(--lt-color-neutral-surface);
2797
+ border-block-start-color: var(--lt-color-accent-border);
2798
+ border-radius: 50%;
2799
+ animation: lt-spinner-rotate 800ms linear infinite;
2800
+ }
2801
+
2802
+ .lt-spinner[data-size="small"] {
2803
+ inline-size: var(--lt-spacing-4);
2804
+ block-size: var(--lt-spacing-4);
2805
+ }
2806
+
2807
+ .lt-spinner[data-size="large"] {
2808
+ inline-size: var(--lt-spacing-10);
2809
+ block-size: var(--lt-spacing-10);
2810
+ border-width: 3px;
2811
+ }
2812
+
2813
+ @keyframes lt-spinner-rotate {
2814
+ to {
2815
+ transform: rotate(360deg);
2816
+ }
2817
+ }
2818
+
2819
+ @media (prefers-reduced-motion: reduce) {
2820
+ .lt-spinner {
2821
+ animation-duration: 2400ms;
2822
+ }
2823
+ }
2824
+
2825
+ @media (forced-colors: active) {
2826
+ .lt-spinner {
2827
+ border-block-start-color: Highlight;
2828
+ }
2829
+ }
2830
+ }
2831
+
2832
+ /* src/components/frame/suggestion/suggestion.css */
2833
+ @layer lotek {
2834
+ lt-suggestion {
2835
+ display: block;
2836
+ }
2837
+
2838
+ .lt-suggestion__list {
2839
+ box-sizing: border-box;
2840
+ margin: var(--lt-spacing-1) 0 0;
2841
+ padding: 0;
2842
+ list-style: none;
2843
+ max-block-size: var(
2844
+ --lt-suggestion-max-height,
2845
+ calc(var(--lt-spacing-10) * 4)
2846
+ );
2847
+ overflow-y: auto;
2848
+ background: var(--lt-color-neutral-canvas);
2849
+ border: 1px solid var(--lt-color-neutral-border);
2850
+ border-radius: var(--lt-suggestion-radius, var(--lt-spacing-1));
2851
+ box-shadow: var(--lt-shadow-overlay);
2852
+ }
2853
+
2854
+ .lt-suggestion__list:popover-open {
2855
+ position: fixed;
2856
+ inset: auto;
2857
+ inset-block-start: var(--lt-suggestion-top, 0);
2858
+ inset-inline-start: var(--lt-suggestion-left, 0);
2859
+ inline-size: var(--lt-suggestion-width, auto);
2860
+ margin: 0;
2861
+ }
2862
+
2863
+ .lt-suggestion__list:popover-open:dir(rtl) {
2864
+ inset-inline-start: auto;
2865
+ inset-inline-end: var(--lt-suggestion-left, 0);
2866
+ }
2867
+
2868
+ .lt-suggestion__list[hidden] {
2869
+ display: none;
2870
+ }
2871
+
2872
+ lt-suggestion:not(:defined) .lt-suggestion__list {
2873
+ display: none;
2874
+ }
2875
+
2876
+ .lt-suggestion__option {
2877
+ padding: var(
2878
+ --lt-suggestion-option-padding,
2879
+ var(--lt-spacing-2) var(--lt-spacing-3)
2880
+ );
2881
+ font-family: inherit;
2882
+ font-size: var(--lt-font-size-m);
2883
+ line-height: var(--lt-line-height-default);
2884
+ color: var(--lt-color-neutral-text-strong);
2885
+ cursor: pointer;
2886
+ }
2887
+
2888
+ .lt-suggestion__option:hover {
2889
+ background: var(--lt-color-accent-surface);
2890
+ }
2891
+
2892
+ .lt-suggestion__option[aria-selected="true"] {
2893
+ background: var(--lt-color-accent-fill);
2894
+ color: var(--lt-color-accent-content);
2895
+ }
2896
+
2897
+ .lt-suggestion__value {
2898
+ display: none;
2899
+ }
2900
+
2901
+ .lt-suggestion__empty {
2902
+ padding: var(
2903
+ --lt-suggestion-option-padding,
2904
+ var(--lt-spacing-2) var(--lt-spacing-3)
2905
+ );
2906
+ font-size: var(--lt-font-size-m);
2907
+ color: var(--lt-color-neutral-text-subtle);
2908
+ }
2909
+
2910
+ .lt-suggestion__list[hidden] ~ .lt-suggestion__empty {
2911
+ display: none;
2912
+ }
2913
+
2914
+ .lt-suggestion__list[aria-busy="true"] ~ .lt-suggestion__empty {
2915
+ display: none;
2916
+ }
2917
+
2918
+ lt-suggestion:not(:defined) .lt-suggestion__empty {
2919
+ display: none;
2920
+ }
2921
+
2922
+ @media (forced-colors: active) {
2923
+ .lt-suggestion__option[aria-selected="true"] {
2924
+ background-color: Highlight;
2925
+ color: HighlightText;
2926
+ }
2927
+ }
2928
+ }
2929
+
2930
+ /* src/components/css/switch/switch.css */
2931
+ @layer lotek {
2932
+ .lt-switch {
2933
+ box-sizing: border-box;
2934
+ appearance: none;
2935
+ flex: none;
2936
+ display: inline-block;
2937
+ inline-size: var(--lt-switch-width, var(--lt-spacing-10));
2938
+ block-size: var(--lt-switch-height, var(--lt-spacing-6));
2939
+ margin: 0;
2940
+ border: 1px solid var(--lt-color-neutral-border);
2941
+ border-radius: var(--lt-spacing-4);
2942
+ background-color: var(--lt-color-neutral-surface);
2943
+
2944
+ background-image: radial-gradient(
2945
+ circle at center,
2946
+ var(--lt-color-neutral-text-strong) 0 34%,
2947
+ transparent 36%
2948
+ );
2949
+ background-repeat: no-repeat;
2950
+ background-size: var(--lt-switch-height, var(--lt-spacing-6)) 100%;
2951
+
2952
+ background-position: left center;
2953
+ cursor: pointer;
2954
+ transition:
2955
+ background-color 120ms ease,
2956
+ background-position 120ms ease;
2957
+ }
2958
+
2959
+ .lt-switch:hover {
2960
+ border-color: var(--lt-color-neutral-border-strong);
2961
+ }
2962
+
2963
+ .lt-switch:focus-visible {
2964
+ outline: var(--lt-focus-ring);
2965
+ outline-offset: 2px;
2966
+ }
2967
+
2968
+ .lt-switch:dir(rtl) {
2969
+ background-position: right center;
2970
+ }
2971
+
2972
+ .lt-switch:checked {
2973
+ background-color: var(--lt-color-accent-fill);
2974
+ border-color: var(--lt-color-accent-fill);
2975
+ background-position: right center;
2976
+ background-image: radial-gradient(
2977
+ circle at center,
2978
+ var(--lt-color-accent-content) 0 34%,
2979
+ transparent 36%
2980
+ );
2981
+ }
2982
+
2983
+ .lt-switch:checked:dir(rtl) {
2984
+ background-position: left center;
2985
+ }
2986
+
2987
+ .lt-switch:disabled {
2988
+ background-color: var(--lt-color-disabled-surface);
2989
+ border-color: var(--lt-color-disabled-surface);
2990
+ background-image: radial-gradient(
2991
+ circle at center,
2992
+ var(--lt-color-disabled-text) 0 34%,
2993
+ transparent 36%
2994
+ );
2995
+ cursor: not-allowed;
2996
+ }
2997
+
2998
+ @media (prefers-reduced-motion: reduce) {
2999
+ .lt-switch {
3000
+ transition: none;
3001
+ }
3002
+ }
3003
+
3004
+ .lt-switch-row {
3005
+ display: flex;
3006
+ align-items: center;
3007
+ gap: var(--lt-spacing-2);
3008
+ line-height: var(--lt-line-height-default);
3009
+ }
3010
+
3011
+ @media (forced-colors: active) {
3012
+ .lt-switch,
3013
+ .lt-switch:checked {
3014
+ appearance: auto;
3015
+ inline-size: auto;
3016
+ block-size: auto;
3017
+ background-image: none;
3018
+ border: 0;
3019
+ }
3020
+ }
3021
+ }
3022
+
3023
+ /* src/components/css/table/table.css */
3024
+ @layer lotek {
3025
+ .lt-table {
3026
+ box-sizing: border-box;
3027
+ inline-size: 100%;
3028
+ border-collapse: collapse;
3029
+ font-family: inherit;
3030
+ font-size: var(--lt-font-size-m);
3031
+ line-height: var(--lt-line-height-default);
3032
+ color: var(--lt-color-neutral-text-strong);
3033
+
3034
+ font-variant-numeric: tabular-nums;
3035
+ }
3036
+
3037
+ .lt-table caption {
3038
+ text-align: start;
3039
+ font-weight: var(--lt-font-weight-semibold);
3040
+ padding-block-end: var(--lt-spacing-2);
3041
+ }
3042
+
3043
+ .lt-table th,
3044
+ .lt-table td {
3045
+ padding: var(
3046
+ --lt-table-cell-padding,
3047
+ var(--lt-spacing-2) var(--lt-spacing-3)
3048
+ );
3049
+ text-align: start;
3050
+ vertical-align: top;
3051
+ border-block-end: 1px solid var(--lt-color-neutral-border-subtle);
3052
+ }
3053
+
3054
+ .lt-table thead th {
3055
+ font-weight: var(--lt-font-weight-semibold);
3056
+ border-block-end: 2px solid var(--lt-color-neutral-border-strong);
3057
+ }
3058
+
3059
+ .lt-table tbody tr:last-child th,
3060
+ .lt-table tbody tr:last-child td {
3061
+ border-block-end: 0;
3062
+ }
3063
+
3064
+ .lt-table[data-variant="striped"] tbody tr:nth-child(even) {
3065
+ background: var(--lt-color-neutral-surface);
3066
+ }
3067
+
3068
+ .lt-table[data-hoverable] tbody tr:hover {
3069
+ background: var(--lt-color-accent-surface);
3070
+ }
3071
+
3072
+ .lt-table td[data-align="end"],
3073
+ .lt-table th[data-align="end"] {
3074
+ text-align: end;
3075
+ }
3076
+
3077
+ .lt-table th:has(> .lt-table__sort) {
3078
+ padding: 0;
3079
+ }
3080
+
3081
+ .lt-table__sort {
3082
+ box-sizing: border-box;
3083
+ display: flex;
3084
+ align-items: center;
3085
+ gap: var(--lt-spacing-2);
3086
+ inline-size: 100%;
3087
+ margin: 0;
3088
+ padding: var(
3089
+ --lt-table-cell-padding,
3090
+ var(--lt-spacing-2) var(--lt-spacing-3)
3091
+ );
3092
+ font: inherit;
3093
+ color: inherit;
3094
+ text-align: inherit;
3095
+ background: none;
3096
+ border: 0;
3097
+ border-radius: 0;
3098
+
3099
+ text-decoration: none;
3100
+ cursor: pointer;
3101
+ }
3102
+
3103
+ .lt-table th[data-align="end"] > .lt-table__sort {
3104
+ justify-content: flex-end;
3105
+ }
3106
+
3107
+ .lt-table__sort:hover {
3108
+ background: var(--lt-color-neutral-surface);
3109
+ }
3110
+
3111
+ .lt-table__sort:focus-visible {
3112
+ outline: var(--lt-focus-ring);
3113
+ outline-offset: -2px;
3114
+ }
3115
+
3116
+ .lt-table__sort::after {
3117
+ content: "";
3118
+ flex: none;
3119
+ inline-size: var(--lt-spacing-3);
3120
+ block-size: var(--lt-spacing-3);
3121
+ background-color: var(--lt-color-neutral-text-subtle);
3122
+ mask:
3123
+ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1 13 6.5H3zM8 15 3 9.5H13z'/%3E%3C/svg%3E")
3124
+ center / contain no-repeat;
3125
+ }
3126
+
3127
+ .lt-table th[aria-sort="ascending"] > .lt-table__sort::after {
3128
+ background-color: currentColor;
3129
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3 14 11H2z'/%3E%3C/svg%3E");
3130
+ }
3131
+
3132
+ .lt-table th[aria-sort="descending"] > .lt-table__sort::after {
3133
+ background-color: currentColor;
3134
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 13 2 5H14z'/%3E%3C/svg%3E");
3135
+ }
3136
+
3137
+ @media (forced-colors: active) {
3138
+ .lt-table__sort::after,
3139
+ .lt-table th[aria-sort] > .lt-table__sort::after {
3140
+ background-color: CanvasText;
3141
+ }
3142
+ }
3143
+
3144
+ .lt-table th[data-align="end"] > .lt-table__sort::after {
3145
+ order: -1;
3146
+ }
3147
+
3148
+ .lt-table-scroll {
3149
+ overflow-x: auto;
3150
+ max-inline-size: 100%;
3151
+ }
3152
+
3153
+ .lt-table-scroll:focus-visible {
3154
+ outline: var(--lt-focus-ring);
3155
+ outline-offset: 2px;
3156
+ }
3157
+ }
3158
+
3159
+ /* src/components/frame/tabs/tabs.css */
3160
+ @layer lotek {
3161
+ lt-tabs {
3162
+ display: block;
3163
+ }
3164
+
3165
+ @media (scripting: enabled) {
3166
+ .lt-tabs__list {
3167
+ display: flex;
3168
+ flex-wrap: wrap;
3169
+ gap: var(--lt-tabs-gap, var(--lt-spacing-1));
3170
+ margin: 0;
3171
+ padding: 0;
3172
+ list-style: none;
3173
+ border-block-end: 1px solid var(--lt-color-neutral-border-subtle);
3174
+ }
3175
+
3176
+ .lt-tabs__list a {
3177
+ box-sizing: border-box;
3178
+ display: inline-flex;
3179
+ align-items: center;
3180
+ padding: var(--lt-tabs-padding, var(--lt-spacing-2) var(--lt-spacing-4));
3181
+ min-block-size: var(--lt-spacing-10);
3182
+ font-family: inherit;
3183
+ font-size: var(--lt-font-size-m);
3184
+ line-height: var(--lt-line-height-default);
3185
+ color: var(--lt-color-accent-text);
3186
+ text-decoration: none;
3187
+ background: transparent;
3188
+ border: 0;
3189
+
3190
+ border-block-end: var(--lt-spacing-0-5) solid transparent;
3191
+ margin-block-end: -1px;
3192
+ cursor: pointer;
3193
+ }
3194
+
3195
+ .lt-tabs__list a:hover {
3196
+ background: var(--lt-color-accent-surface);
3197
+ }
3198
+
3199
+ .lt-tabs__list a:focus-visible {
3200
+ outline: var(--lt-focus-ring);
3201
+ outline-offset: -2px;
3202
+ }
3203
+
3204
+ .lt-tabs__list a[aria-selected="true"] {
3205
+ color: var(--lt-color-neutral-text-strong);
3206
+ font-weight: var(--lt-font-weight-semibold);
3207
+ border-block-end-color: var(--lt-color-accent-border);
3208
+ }
3209
+
3210
+ .lt-tabs__list a[aria-disabled="true"] {
3211
+ color: var(--lt-color-disabled-text);
3212
+ cursor: not-allowed;
3213
+ }
3214
+
3215
+ lt-tabs:not(:defined) .lt-tabs__panel:not([hidden])
3216
+ ~ .lt-tabs__panel:not([hidden]):not(:target, :has(:target)),
3217
+ lt-tabs:not(:defined)[server-controlled]
3218
+ .lt-tabs__panel:not([hidden])
3219
+ ~ .lt-tabs__panel:not([hidden]),
3220
+ lt-tabs:not(:defined)
3221
+ .lt-tabs__panel:not([hidden]):not(lt-tabs[server-controlled] *):has(
3222
+ ~ .lt-tabs__panel:not([hidden]):target,
3223
+ ~ .lt-tabs__panel:not([hidden]) :target
3224
+ ) {
3225
+ display: none;
3226
+ }
3227
+ }
3228
+
3229
+ @media (scripting: none) {
3230
+ .lt-tabs__list a {
3231
+ display: inline-block;
3232
+ min-block-size: var(--lt-spacing-6);
3233
+ line-height: var(--lt-spacing-6);
3234
+ }
3235
+ }
3236
+
3237
+ .lt-tabs__panel {
3238
+ padding-block-start: var(--lt-tabs-panel-space, var(--lt-spacing-4));
3239
+ }
3240
+
3241
+ .lt-tabs__panel[hidden="until-found" i] {
3242
+ padding: 0;
3243
+ }
3244
+
3245
+ .lt-tabs__panel:focus-visible {
3246
+ outline: var(--lt-focus-ring);
3247
+ outline-offset: 2px;
3248
+ }
3249
+
3250
+ @media (forced-colors: active) {
3251
+ .lt-tabs__list a[aria-selected="true"] {
3252
+ border-block-end-color: Highlight;
3253
+ color: Highlight;
3254
+ }
3255
+ }
3256
+ }
3257
+
3258
+ /* src/components/css/tag/tag.css */
3259
+ @layer lotek {
3260
+ .lt-tag {
3261
+ box-sizing: border-box;
3262
+ display: inline-flex;
3263
+ align-items: center;
3264
+ gap: var(--lt-spacing-1);
3265
+ padding: var(--lt-tag-padding, var(--lt-spacing-0-5) var(--lt-spacing-2));
3266
+ font-family: inherit;
3267
+ font-size: var(--lt-font-size-s);
3268
+ line-height: var(--lt-line-height-compact);
3269
+ color: var(--lt-color-neutral-text-strong);
3270
+ background: transparent;
3271
+ border: 1px solid var(--lt-color-neutral-border-subtle);
3272
+ border-radius: var(--lt-tag-radius, var(--lt-spacing-1));
3273
+ }
3274
+
3275
+ .lt-tag[data-variant="filled"] {
3276
+ background: var(--lt-color-neutral-surface);
3277
+ border-color: transparent;
3278
+ }
3279
+
3280
+ .lt-tag[data-selectable] {
3281
+ cursor: pointer;
3282
+ }
3283
+
3284
+ .lt-tag[data-selectable]:hover {
3285
+ border-color: var(--lt-color-accent-border);
3286
+ }
3287
+
3288
+ .lt-tag[data-selectable]:focus-visible {
3289
+ outline: var(--lt-focus-ring);
3290
+ outline-offset: 2px;
3291
+ }
3292
+
3293
+ .lt-tag[aria-pressed="true"] {
3294
+ background: var(--lt-color-accent-fill);
3295
+ border-color: var(--lt-color-accent-fill);
3296
+ color: var(--lt-color-accent-content);
3297
+ }
3298
+
3299
+ .lt-tag:disabled,
3300
+ .lt-tag[aria-disabled="true"] {
3301
+ background: var(--lt-color-disabled-surface);
3302
+ border-color: var(--lt-color-disabled-surface);
3303
+ color: var(--lt-color-disabled-text);
3304
+ cursor: not-allowed;
3305
+ }
3306
+
3307
+ @media (forced-colors: active) {
3308
+ .lt-tag[aria-pressed="true"] {
3309
+ background-color: Highlight;
3310
+ color: HighlightText;
3311
+ }
3312
+ }
3313
+ }
3314
+
3315
+ /* src/components/standalone/toast/toast.css */
3316
+ @layer lotek {
3317
+
3318
+ lt-toast,
3319
+ .lt-toast {
3320
+
3321
+ position: fixed;
3322
+ inset-block-end: var(--lt-toast-space, var(--lt-spacing-4));
3323
+ inset-inline-end: var(--lt-toast-space, var(--lt-spacing-4));
3324
+ z-index: var(--lt-toast-layer, 60);
3325
+ display: flex;
3326
+ flex-direction: column;
3327
+ gap: var(--lt-spacing-2);
3328
+ inline-size: var(
3329
+ --lt-toast-width,
3330
+ min(24rem, calc(100vw - var(--lt-spacing-8)))
3331
+ );
3332
+ pointer-events: none;
3333
+ }
3334
+
3335
+ .lt-toast__message {
3336
+ box-sizing: border-box;
3337
+ display: flex;
3338
+ align-items: flex-start;
3339
+ justify-content: space-between;
3340
+ gap: var(--lt-spacing-3);
3341
+ padding: var(--lt-toast-padding, var(--lt-spacing-3) var(--lt-spacing-4));
3342
+ font-family: inherit;
3343
+ font-size: var(--lt-font-size-m);
3344
+ line-height: var(--lt-line-height-default);
3345
+ color: var(--lt-color-neutral-text-strong);
3346
+ background: var(--lt-color-neutral-canvas);
3347
+ border: 1px solid var(--lt-color-neutral-border-subtle);
3348
+ border-inline-start: var(--lt-spacing-1) solid var(--lt-color-neutral-text);
3349
+ border-radius: var(--lt-toast-radius, var(--lt-spacing-1));
3350
+ box-shadow: var(--lt-shadow-overlay);
3351
+ pointer-events: auto;
3352
+ }
3353
+
3354
+ .lt-toast__message[data-color="success"] {
3355
+ border-inline-start-color: var(--lt-color-success-text);
3356
+ }
3357
+
3358
+ .lt-toast__message[data-color="warning"] {
3359
+ border-inline-start-color: var(--lt-color-warning-text);
3360
+ }
3361
+
3362
+ .lt-toast__message[data-color="danger"] {
3363
+ border-inline-start-color: var(--lt-color-danger-text);
3364
+ }
3365
+
3366
+ .lt-toast__close {
3367
+ flex: none;
3368
+ min-inline-size: var(--lt-spacing-6);
3369
+ min-block-size: var(--lt-spacing-6);
3370
+ padding: 0;
3371
+ font-family: inherit;
3372
+ font-size: var(--lt-font-size-l);
3373
+ line-height: 1;
3374
+ color: var(--lt-color-neutral-text-subtle);
3375
+ background: transparent;
3376
+ border: 0;
3377
+ border-radius: var(--lt-spacing-1);
3378
+ cursor: pointer;
3379
+ }
3380
+
3381
+ .lt-toast__close:hover {
3382
+ color: var(--lt-color-neutral-text-strong);
3383
+ background: var(--lt-color-neutral-surface);
3384
+ }
3385
+
3386
+ .lt-toast__close:focus-visible {
3387
+ outline: var(--lt-focus-ring);
3388
+ outline-offset: 2px;
3389
+ }
3390
+ }
3391
+
3392
+ /* src/components/css/toggle-group/toggle-group.css */
3393
+ @layer lotek {
3394
+ .lt-toggle-group {
3395
+ box-sizing: border-box;
3396
+ display: inline-flex;
3397
+ flex-wrap: wrap;
3398
+ gap: 0;
3399
+ margin: 0;
3400
+ padding: 0;
3401
+ border: 1px solid var(--lt-color-neutral-border);
3402
+ border-radius: var(--lt-toggle-group-radius, var(--lt-spacing-1));
3403
+ overflow: hidden;
3404
+ min-inline-size: 0;
3405
+ }
3406
+
3407
+ .lt-toggle-group__option {
3408
+ display: inline-flex;
3409
+ align-items: center;
3410
+ justify-content: center;
3411
+
3412
+ min-block-size: var(--lt-toggle-group-height, var(--lt-spacing-10));
3413
+ padding: var(--lt-toggle-group-padding, 0 var(--lt-spacing-4));
3414
+ font-family: inherit;
3415
+ font-size: var(--lt-font-size-m);
3416
+ line-height: var(--lt-line-height-default);
3417
+ color: var(--lt-color-accent-text);
3418
+ background: var(--lt-color-neutral-canvas);
3419
+ cursor: pointer;
3420
+ }
3421
+
3422
+ .lt-toggle-group__option + .lt-toggle-group__option {
3423
+ border-inline-start: 1px solid var(--lt-color-neutral-border);
3424
+ }
3425
+
3426
+ .lt-toggle-group__option input {
3427
+ position: absolute;
3428
+ inline-size: 1px;
3429
+ block-size: 1px;
3430
+ margin: -1px;
3431
+ padding: 0;
3432
+ overflow: hidden;
3433
+ clip-path: inset(50%);
3434
+ white-space: nowrap;
3435
+ border-width: 0;
3436
+ }
3437
+
3438
+ .lt-toggle-group__option:hover {
3439
+ background: var(--lt-color-accent-surface);
3440
+ }
3441
+
3442
+ .lt-toggle-group__option:has(input:focus-visible) {
3443
+ outline: var(--lt-focus-ring);
3444
+ outline-offset: -2px;
3445
+ }
3446
+
3447
+ .lt-toggle-group__option:has(input:checked) {
3448
+ color: var(--lt-color-accent-content);
3449
+ background: var(--lt-color-accent-fill);
3450
+ font-weight: var(--lt-font-weight-semibold);
3451
+ }
3452
+
3453
+ .lt-toggle-group__option:has(input:checked:focus-visible) {
3454
+ outline-color: var(--lt-color-accent-content);
3455
+ }
3456
+
3457
+ .lt-toggle-group__option:has(input:disabled) {
3458
+ color: var(--lt-color-disabled-text);
3459
+ background: var(--lt-color-disabled-surface);
3460
+ cursor: not-allowed;
3461
+ }
3462
+
3463
+ @media (forced-colors: active) {
3464
+ .lt-toggle-group__option:has(input:checked) {
3465
+ background-color: Highlight;
3466
+ color: HighlightText;
3467
+ }
3468
+ }
3469
+ }
3470
+
3471
+ /* src/components/css/tooltip/tooltip.css */
3472
+ @layer lotek {
3473
+ .lt-tooltip {
3474
+ position: relative;
3475
+ display: inline-flex;
3476
+ }
3477
+
3478
+ .lt-tooltip__bubble {
3479
+
3480
+ box-sizing: border-box;
3481
+ position: absolute;
3482
+ inset-block-end: calc(100% + var(--lt-spacing-2));
3483
+ inset-inline-start: 50%;
3484
+ transform: translateX(-50%);
3485
+ z-index: 40;
3486
+ inline-size: max-content;
3487
+ max-inline-size: var(--lt-tooltip-width, 16rem);
3488
+ padding: var(--lt-tooltip-padding, var(--lt-spacing-1) var(--lt-spacing-2));
3489
+ font-size: var(--lt-font-size-s);
3490
+ line-height: var(--lt-line-height-compact);
3491
+ color: var(--lt-color-neutral-canvas);
3492
+ background: var(--lt-color-neutral-text-strong);
3493
+ border-radius: var(--lt-tooltip-radius, var(--lt-spacing-1));
3494
+
3495
+ display: none;
3496
+ opacity: 0;
3497
+
3498
+ pointer-events: none;
3499
+ }
3500
+
3501
+ .lt-tooltip__bubble:dir(rtl) {
3502
+ transform: translateX(50%);
3503
+ }
3504
+
3505
+ .lt-tooltip:hover .lt-tooltip__bubble,
3506
+ .lt-tooltip:focus-within .lt-tooltip__bubble {
3507
+ display: block;
3508
+ opacity: 1;
3509
+ pointer-events: auto;
3510
+ }
3511
+
3512
+ .lt-tooltip:is(:hover, :focus-within)::before {
3513
+ content: "";
3514
+ position: absolute;
3515
+ inset-inline: 0;
3516
+ inset-block-end: 100%;
3517
+ block-size: var(--lt-spacing-2);
3518
+ }
3519
+
3520
+ @starting-style {
3521
+ .lt-tooltip:hover .lt-tooltip__bubble,
3522
+ .lt-tooltip:focus-within .lt-tooltip__bubble {
3523
+ opacity: 0;
3524
+ }
3525
+ }
3526
+
3527
+ @media (prefers-reduced-motion: no-preference) {
3528
+ .lt-tooltip__bubble {
3529
+ transition:
3530
+ opacity 120ms ease,
3531
+ display 120ms allow-discrete;
3532
+ }
3533
+ }
3534
+
3535
+ @media (forced-colors: active) {
3536
+ .lt-tooltip__bubble {
3537
+ border: 1px solid CanvasText;
3538
+ }
3539
+ }
3540
+ }
3541
+
3542
+ /* src/tokens/boundary.css */
3543
+ [data-lt-boundary][data-lt-boundary] * {
3544
+ all: revert-layer;
3545
+ }
3546
+
3547
+ [data-lt-boundary][data-lt-boundary] *::before {
3548
+ all: revert-layer;
3549
+ }
3550
+
3551
+ [data-lt-boundary][data-lt-boundary] *::after {
3552
+ all: revert-layer;
3553
+ }
3554
+
3555
+ [data-lt-boundary][data-lt-boundary] *::marker {
3556
+ all: revert-layer;
3557
+ }
3558
+
3559
+ [data-lt-boundary][data-lt-boundary] *::placeholder {
3560
+ all: revert-layer;
3561
+ }
3562
+
3563
+ [data-lt-boundary][data-lt-boundary] *::backdrop {
3564
+ all: revert-layer;
3565
+ }
3566
+
3567
+ [data-lt-boundary][data-lt-boundary] *::file-selector-button {
3568
+ all: revert-layer;
3569
+ }
3570
+
3571
+ [data-lt-boundary][data-lt-boundary] *::checkmark {
3572
+ all: revert-layer;
3573
+ }
3574
+
3575
+ [data-lt-boundary][data-lt-boundary] *::picker-icon {
3576
+ all: revert-layer;
3577
+ }
3578
+
3579
+ [data-lt-boundary][data-lt-boundary] *::picker(select) {
3580
+ all: revert-layer;
3581
+ }
3582
+
3583
+ [data-lt-boundary][data-lt-boundary] *::-webkit-details-marker {
3584
+ all: revert-layer;
3585
+ }
3586
+
3587
+ [data-lt-boundary][data-lt-boundary] *::-webkit-search-cancel-button {
3588
+ all: revert-layer;
3589
+ }
3590
+
3591
+ [data-lt-boundary][data-lt-boundary] *::-webkit-search-decoration {
3592
+ all: revert-layer;
3593
+ }
3594
+
3595
+ [data-lt-boundary][data-lt-boundary] *::-webkit-inner-spin-button {
3596
+ all: revert-layer;
3597
+ }
3598
+
3599
+ [data-lt-boundary][data-lt-boundary] *::-webkit-outer-spin-button {
3600
+ all: revert-layer;
3601
+ }
3602
+
3603
+ [data-lt-boundary][data-lt-boundary] *::-webkit-calendar-picker-indicator {
3604
+ all: revert-layer;
3605
+ }
3606
+
3607
+ [data-lt-boundary][data-lt-boundary] *::-webkit-progress-bar {
3608
+ all: revert-layer;
3609
+ }
3610
+
3611
+ [data-lt-boundary][data-lt-boundary] *::-webkit-progress-value {
3612
+ all: revert-layer;
3613
+ }
3614
+
3615
+ [data-lt-boundary][data-lt-boundary] *::-moz-progress-bar {
3616
+ all: revert-layer;
3617
+ }