synthos 0.8.0 → 0.9.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 (359) hide show
  1. package/README.md +1 -1
  2. package/default-pages/application/page.html +42 -0
  3. package/default-pages/application/page.json +10 -0
  4. package/default-pages/elevenlabs_effects_studio/page.html +1363 -0
  5. package/default-pages/elevenlabs_effects_studio/page.json +11 -0
  6. package/default-pages/elevenlabs_voice_studio/page.html +801 -0
  7. package/default-pages/elevenlabs_voice_studio/page.json +11 -0
  8. package/default-pages/{json_tools.html → json_tools/page.html} +13 -11
  9. package/default-pages/json_tools/page.json +10 -0
  10. package/default-pages/my_notes/notes/a1b2c3d4-e5f6-7890-abcd-ef1234567890.json +5 -0
  11. package/default-pages/my_notes/page.html +132 -0
  12. package/default-pages/{my_notes.json → my_notes/page.json} +2 -2
  13. package/default-pages/neon_asteroids/files/Ambient_Space.mp3 +0 -0
  14. package/default-pages/neon_asteroids/files/Ambient_Space2.mp3 +0 -0
  15. package/default-pages/neon_asteroids/files/Ambient_Space3.mp3 +0 -0
  16. package/default-pages/neon_asteroids/files/Asteroid_Explosion.mp3 +0 -0
  17. package/default-pages/neon_asteroids/files/Hyperspace_Jump.mp3 +0 -0
  18. package/default-pages/neon_asteroids/files/Laser_Fire.mp3 +0 -0
  19. package/default-pages/neon_asteroids/files/Menu_Navigate.mp3 +0 -0
  20. package/default-pages/neon_asteroids/files/Power_Up_Collect.mp3 +0 -0
  21. package/default-pages/neon_asteroids/files/Saucer_Alert.mp3 +0 -0
  22. package/default-pages/neon_asteroids/files/Ship_Thrust.mp3 +0 -0
  23. package/default-pages/neon_asteroids/files/effects.json +74 -0
  24. package/default-pages/neon_asteroids/page.html +1822 -0
  25. package/default-pages/{neon_asteroids.json → neon_asteroids/page.json} +3 -3
  26. package/default-pages/{oregon_trail.html → oregon_trail/page.html} +14 -12
  27. package/default-pages/{oregon_trail.json → oregon_trail/page.json} +2 -2
  28. package/default-pages/retro_game_starter/page.html +1308 -0
  29. package/default-pages/retro_game_starter/page.json +12 -0
  30. package/default-pages/{sidebar_page.html → sidebar_page/page.html} +12 -10
  31. package/default-pages/sidebar_page/page.json +10 -0
  32. package/default-pages/{solar_explorer.html → solar_explorer/page.html} +14 -11
  33. package/default-pages/{solar_explorer.json → solar_explorer/page.json} +2 -2
  34. package/default-pages/{solar_tutorial.html → solar_tutorial/page.html} +12 -10
  35. package/default-pages/solar_tutorial/page.json +10 -0
  36. package/default-pages/{two-panel_page.html → two-panel_page/page.html} +13 -11
  37. package/default-pages/two-panel_page/page.json +10 -0
  38. package/default-pages/{us_map.html → us_map/page.html} +193 -192
  39. package/default-pages/{us_map.json → us_map/page.json} +12 -12
  40. package/default-pages/{us_map_1850.html → us_map_1850/page.html} +326 -325
  41. package/default-pages/{us_map_1850.json → us_map_1850/page.json} +12 -12
  42. package/default-pages/{western_cities_1850.html → western_cities_1850/page.html} +527 -526
  43. package/default-pages/{western_cities_1850.json → western_cities_1850/page.json} +12 -12
  44. package/default-themes/aurora-dawn.json +19 -0
  45. package/default-themes/aurora-dawn.v3.css +198 -0
  46. package/default-themes/aurora-dusk.json +19 -0
  47. package/default-themes/aurora-dusk.v3.css +200 -0
  48. package/default-themes/cosmos-dawn.json +19 -0
  49. package/default-themes/cosmos-dawn.v3.css +198 -0
  50. package/default-themes/cosmos-dusk.json +19 -0
  51. package/default-themes/cosmos-dusk.v3.css +200 -0
  52. package/default-themes/high-contrast-dark.json +19 -0
  53. package/default-themes/high-contrast-dark.v3.css +200 -0
  54. package/default-themes/high-contrast-light.json +19 -0
  55. package/default-themes/high-contrast-light.v3.css +198 -0
  56. package/default-themes/nebula-dawn.v2.css +110 -0
  57. package/default-themes/nebula-dawn.v3.css +199 -0
  58. package/default-themes/nebula-dusk.v2.css +104 -0
  59. package/default-themes/nebula-dusk.v3.css +201 -0
  60. package/default-themes/solar-flare-dawn.json +19 -0
  61. package/default-themes/solar-flare-dawn.v3.css +198 -0
  62. package/default-themes/solar-flare-dusk.json +19 -0
  63. package/default-themes/solar-flare-dusk.v3.css +200 -0
  64. package/dist/agents/index.d.ts +1 -1
  65. package/dist/agents/index.d.ts.map +1 -1
  66. package/dist/agents/index.js +2 -1
  67. package/dist/agents/index.js.map +1 -1
  68. package/dist/agents/openclaw/gatewayManager.d.ts +4 -0
  69. package/dist/agents/openclaw/gatewayManager.d.ts.map +1 -1
  70. package/dist/agents/openclaw/gatewayManager.js +27 -11
  71. package/dist/agents/openclaw/gatewayManager.js.map +1 -1
  72. package/dist/agents/openclaw/openclawProvider.d.ts.map +1 -1
  73. package/dist/agents/openclaw/openclawProvider.js +2 -4
  74. package/dist/agents/openclaw/openclawProvider.js.map +1 -1
  75. package/dist/agents/openclaw/sshTunnelManager.d.ts +2 -0
  76. package/dist/agents/openclaw/sshTunnelManager.d.ts.map +1 -1
  77. package/dist/agents/openclaw/sshTunnelManager.js +31 -12
  78. package/dist/agents/openclaw/sshTunnelManager.js.map +1 -1
  79. package/dist/builders/anthropic.d.ts +31 -0
  80. package/dist/builders/anthropic.d.ts.map +1 -0
  81. package/dist/builders/anthropic.js +227 -0
  82. package/dist/builders/anthropic.js.map +1 -0
  83. package/dist/builders/fireworksai.d.ts +9 -0
  84. package/dist/builders/fireworksai.d.ts.map +1 -0
  85. package/dist/builders/fireworksai.js +57 -0
  86. package/dist/builders/fireworksai.js.map +1 -0
  87. package/dist/builders/index.d.ts +13 -0
  88. package/dist/builders/index.d.ts.map +1 -0
  89. package/dist/builders/index.js +31 -0
  90. package/dist/builders/index.js.map +1 -0
  91. package/dist/builders/openai.d.ts +8 -0
  92. package/dist/builders/openai.d.ts.map +1 -0
  93. package/dist/builders/openai.js +87 -0
  94. package/dist/builders/openai.js.map +1 -0
  95. package/dist/builders/types.d.ts +54 -0
  96. package/dist/builders/types.d.ts.map +1 -0
  97. package/dist/builders/types.js +211 -0
  98. package/dist/builders/types.js.map +1 -0
  99. package/dist/connectors/index.d.ts.map +1 -1
  100. package/dist/connectors/index.js +3 -2
  101. package/dist/connectors/index.js.map +1 -1
  102. package/dist/connectors/registry.d.ts +2 -1
  103. package/dist/connectors/registry.d.ts.map +1 -1
  104. package/dist/connectors/registry.js +31 -8
  105. package/dist/connectors/registry.js.map +1 -1
  106. package/dist/customizer/Customizer.d.ts +57 -0
  107. package/dist/customizer/Customizer.d.ts.map +1 -0
  108. package/dist/customizer/Customizer.js +124 -0
  109. package/dist/customizer/Customizer.js.map +1 -0
  110. package/dist/customizer/index.d.ts.map +1 -0
  111. package/dist/customizer/index.js +9 -0
  112. package/dist/customizer/index.js.map +1 -0
  113. package/dist/files.d.ts +16 -0
  114. package/dist/files.d.ts.map +1 -1
  115. package/dist/files.js +60 -1
  116. package/dist/files.js.map +1 -1
  117. package/dist/index.d.ts.map +1 -1
  118. package/dist/index.js +1 -0
  119. package/dist/index.js.map +1 -1
  120. package/dist/init.d.ts +10 -6
  121. package/dist/init.d.ts.map +1 -1
  122. package/dist/init.js +96 -113
  123. package/dist/init.js.map +1 -1
  124. package/dist/migrations.d.ts.map +1 -1
  125. package/dist/migrations.js +23 -10
  126. package/dist/migrations.js.map +1 -1
  127. package/dist/models/anthropic.d.ts +4 -2
  128. package/dist/models/anthropic.d.ts.map +1 -1
  129. package/dist/models/anthropic.js +33 -6
  130. package/dist/models/anthropic.js.map +1 -1
  131. package/dist/models/fireworksai.d.ts.map +1 -1
  132. package/dist/models/fireworksai.js +9 -1
  133. package/dist/models/fireworksai.js.map +1 -1
  134. package/dist/models/index.d.ts +1 -1
  135. package/dist/models/index.d.ts.map +1 -1
  136. package/dist/models/index.js +2 -1
  137. package/dist/models/index.js.map +1 -1
  138. package/dist/models/openai.d.ts +1 -1
  139. package/dist/models/openai.d.ts.map +1 -1
  140. package/dist/models/openai.js +24 -3
  141. package/dist/models/openai.js.map +1 -1
  142. package/dist/models/types.d.ts +20 -1
  143. package/dist/models/types.d.ts.map +1 -1
  144. package/dist/models/types.js +6 -1
  145. package/dist/models/types.js.map +1 -1
  146. package/dist/pages.d.ts +30 -7
  147. package/dist/pages.d.ts.map +1 -1
  148. package/dist/pages.js +177 -55
  149. package/dist/pages.js.map +1 -1
  150. package/dist/service/server.d.ts.map +1 -1
  151. package/dist/service/server.js +37 -8
  152. package/dist/service/server.js.map +1 -1
  153. package/dist/service/transformPage.d.ts +47 -20
  154. package/dist/service/transformPage.d.ts.map +1 -1
  155. package/dist/service/transformPage.js +514 -293
  156. package/dist/service/transformPage.js.map +1 -1
  157. package/dist/service/useAgentRoutes.d.ts +2 -1
  158. package/dist/service/useAgentRoutes.d.ts.map +1 -1
  159. package/dist/service/useAgentRoutes.js +5 -2
  160. package/dist/service/useAgentRoutes.js.map +1 -1
  161. package/dist/service/useApiRoutes.d.ts.map +1 -1
  162. package/dist/service/useApiRoutes.js +237 -136
  163. package/dist/service/useApiRoutes.js.map +1 -1
  164. package/dist/service/useConnectorRoutes.js +6 -6
  165. package/dist/service/useConnectorRoutes.js.map +1 -1
  166. package/dist/service/useFileRoutes.d.ts +4 -0
  167. package/dist/service/useFileRoutes.d.ts.map +1 -0
  168. package/dist/service/useFileRoutes.js +122 -0
  169. package/dist/service/useFileRoutes.js.map +1 -0
  170. package/dist/service/usePageRoutes.d.ts.map +1 -1
  171. package/dist/service/usePageRoutes.js +648 -67
  172. package/dist/service/usePageRoutes.js.map +1 -1
  173. package/dist/service/useSharedDataRoutes.d.ts +4 -0
  174. package/dist/service/useSharedDataRoutes.d.ts.map +1 -0
  175. package/dist/service/useSharedDataRoutes.js +104 -0
  176. package/dist/service/useSharedDataRoutes.js.map +1 -0
  177. package/dist/service/useSharedFileRoutes.d.ts +4 -0
  178. package/dist/service/useSharedFileRoutes.d.ts.map +1 -0
  179. package/dist/service/useSharedFileRoutes.js +121 -0
  180. package/dist/service/useSharedFileRoutes.js.map +1 -0
  181. package/dist/settings.d.ts +1 -0
  182. package/dist/settings.d.ts.map +1 -1
  183. package/dist/settings.js +1 -0
  184. package/dist/settings.js.map +1 -1
  185. package/dist/synthos-cli.d.ts.map +1 -1
  186. package/dist/synthos-cli.js +4 -3
  187. package/dist/synthos-cli.js.map +1 -1
  188. package/dist/themes.d.ts +1 -0
  189. package/dist/themes.d.ts.map +1 -1
  190. package/dist/themes.js +28 -15
  191. package/dist/themes.js.map +1 -1
  192. package/migration-rules/v1-to-v2.md +193 -0
  193. package/migration-rules/v2-to-v3.md +481 -0
  194. package/package.json +11 -10
  195. package/required-pages/builder/page.html +43 -0
  196. package/required-pages/builder/page.json +10 -0
  197. package/required-pages/{pages.html → pages/page.html} +238 -233
  198. package/required-pages/pages/page.json +10 -0
  199. package/required-pages/{settings.html → settings/page.html} +389 -275
  200. package/required-pages/settings/page.json +10 -0
  201. package/required-pages/synthos_apis/page.html +846 -0
  202. package/required-pages/synthos_apis/page.json +10 -0
  203. package/required-pages/{synthos_scripts.html → synthos_scripts/page.html} +13 -11
  204. package/required-pages/synthos_scripts/page.json +10 -0
  205. package/src/agents/index.ts +1 -1
  206. package/src/agents/openclaw/gatewayManager.ts +22 -11
  207. package/src/agents/openclaw/openclawProvider.ts +2 -4
  208. package/src/agents/openclaw/sshTunnelManager.ts +19 -11
  209. package/src/builders/anthropic.ts +283 -0
  210. package/src/builders/fireworksai.ts +59 -0
  211. package/src/builders/index.ts +33 -0
  212. package/src/builders/openai.ts +89 -0
  213. package/src/builders/types.ts +261 -0
  214. package/src/connectors/index.ts +1 -1
  215. package/src/connectors/registry.ts +28 -8
  216. package/src/customizer/Customizer.ts +151 -0
  217. package/src/customizer/index.ts +5 -0
  218. package/src/files.ts +57 -0
  219. package/src/index.ts +2 -1
  220. package/src/init.ts +137 -123
  221. package/src/migrations.ts +30 -10
  222. package/src/models/anthropic.ts +40 -10
  223. package/src/models/fireworksai.ts +9 -2
  224. package/src/models/index.ts +1 -1
  225. package/src/models/openai.ts +26 -6
  226. package/src/models/types.ts +31 -1
  227. package/src/pages.ts +176 -54
  228. package/src/service/server.ts +36 -9
  229. package/src/service/transformPage.ts +557 -326
  230. package/src/service/useAgentRoutes.ts +7 -2
  231. package/src/service/useApiRoutes.ts +150 -41
  232. package/src/service/useConnectorRoutes.ts +7 -7
  233. package/src/service/useFileRoutes.ts +127 -0
  234. package/src/service/usePageRoutes.ts +720 -73
  235. package/src/service/useSharedDataRoutes.ts +106 -0
  236. package/src/service/useSharedFileRoutes.ts +126 -0
  237. package/src/settings.ts +2 -0
  238. package/src/synthos-cli.ts +4 -3
  239. package/src/themes.ts +25 -14
  240. package/static-files/favicon.svg +12 -0
  241. package/static-files/fluentlm-instructions.llmd +868 -0
  242. package/static-files/fluentlm-instructions.md +1595 -0
  243. package/static-files/fluentlm.css +4844 -0
  244. package/static-files/fluentlm.js +3602 -0
  245. package/static-files/fluentlm.min.css +1 -0
  246. package/static-files/fluentlm.min.js +1 -0
  247. package/{page-scripts/helpers-v2.js → static-files/helpers.v3.js} +82 -0
  248. package/static-files/page.v3.js +1290 -0
  249. package/static-files/recommended-frameworks.llmd +81 -0
  250. package/static-files/recommended-frameworks.md +137 -0
  251. package/static-files/retro-game.js +877 -0
  252. package/static-files/shell.css +797 -0
  253. package/static-files/theme-dark.css +169 -0
  254. package/static-files/theme-light.css +169 -0
  255. package/tests/builders.spec.ts +139 -0
  256. package/tests/pages.spec.ts +8 -8
  257. package/tests/transformPage.spec.ts +299 -360
  258. package/default-pages/application.html +0 -40
  259. package/default-pages/application.json +0 -1
  260. package/default-pages/json_tools.json +0 -1
  261. package/default-pages/my_notes.html +0 -33
  262. package/default-pages/neon_asteroids.html +0 -77
  263. package/default-pages/sidebar_page.json +0 -1
  264. package/default-pages/solar_tutorial.json +0 -1
  265. package/default-pages/two-panel_page.json +0 -1
  266. package/dist/agents/a2a/a2aProvider.d.ts +0 -3
  267. package/dist/agents/discovery.d.ts +0 -30
  268. package/dist/agents/openclaw/openclawProvider.d.ts +0 -3
  269. package/dist/agents/types.d.ts +0 -64
  270. package/dist/connectors/index.d.ts +0 -3
  271. package/dist/connectors/types.d.ts +0 -84
  272. package/dist/index.d.ts +0 -7
  273. package/dist/migrations.d.ts +0 -12
  274. package/dist/models/chainOfThought.d.ts +0 -12
  275. package/dist/models/fireworksai.d.ts +0 -30
  276. package/dist/models/logCompletePrompt.d.ts +0 -3
  277. package/dist/models/providers.d.ts +0 -8
  278. package/dist/models/utils.d.ts +0 -6
  279. package/dist/scripts.d.ts +0 -15
  280. package/dist/service/createCompletePrompt.d.ts +0 -5
  281. package/dist/service/debugLog.d.ts +0 -11
  282. package/dist/service/generateImage.d.ts +0 -32
  283. package/dist/service/index.d.ts +0 -8
  284. package/dist/service/modelInstructions.d.ts +0 -7
  285. package/dist/service/requiresSettings.d.ts +0 -3
  286. package/dist/service/server.d.ts +0 -4
  287. package/dist/service/useApiRoutes.d.ts +0 -4
  288. package/dist/service/useConnectorRoutes.d.ts +0 -4
  289. package/dist/service/useDataRoutes.d.ts +0 -4
  290. package/dist/service/useGatewayRoutes.d.ts +0 -4
  291. package/dist/service/useGatewayRoutes.d.ts.map +0 -1
  292. package/dist/service/useGatewayRoutes.js +0 -168
  293. package/dist/service/useGatewayRoutes.js.map +0 -1
  294. package/dist/service/usePageRoutes.d.ts +0 -5
  295. package/dist/synthos-cli.d.ts +0 -2
  296. package/page-scripts/page-v2.js +0 -656
  297. package/required-pages/builder.html +0 -48
  298. package/required-pages/builder.json +0 -1
  299. package/required-pages/pages.json +0 -1
  300. package/required-pages/settings.json +0 -1
  301. package/required-pages/synthos_apis.html +0 -327
  302. package/required-pages/synthos_apis.json +0 -1
  303. package/required-pages/synthos_scripts.json +0 -1
  304. package/src/connectors/airtable/connector.json +0 -27
  305. package/src/connectors/alpha-vantage/connector.json +0 -26
  306. package/src/connectors/brave-search/connector.json +0 -26
  307. package/src/connectors/cloudinary/connector.json +0 -27
  308. package/src/connectors/deepl/connector.json +0 -28
  309. package/src/connectors/elevenlabs/connector.json +0 -30
  310. package/src/connectors/giphy/connector.json +0 -27
  311. package/src/connectors/github/connector.json +0 -29
  312. package/src/connectors/huggingface/connector.json +0 -27
  313. package/src/connectors/imgur/connector.json +0 -29
  314. package/src/connectors/instagram/connector.json +0 -43
  315. package/src/connectors/jira/connector.json +0 -28
  316. package/src/connectors/mapbox/connector.json +0 -26
  317. package/src/connectors/nasa/connector.json +0 -27
  318. package/src/connectors/newsapi/connector.json +0 -27
  319. package/src/connectors/notion/connector.json +0 -28
  320. package/src/connectors/open-exchange-rates/connector.json +0 -27
  321. package/src/connectors/openweathermap/connector.json +0 -26
  322. package/src/connectors/pexels/connector.json +0 -27
  323. package/src/connectors/resend/connector.json +0 -29
  324. package/src/connectors/rss2json/connector.json +0 -27
  325. package/src/connectors/sendgrid/connector.json +0 -27
  326. package/src/connectors/spoonacular/connector.json +0 -28
  327. package/src/connectors/stability-ai/connector.json +0 -27
  328. package/src/connectors/twilio/connector.json +0 -28
  329. package/src/connectors/unsplash/connector.json +0 -27
  330. package/src/connectors/wolfram-alpha/connector.json +0 -26
  331. package/src/connectors/youtube-data/connector.json +0 -30
  332. /package/{dist/connectors → service-connectors}/airtable/connector.json +0 -0
  333. /package/{dist/connectors → service-connectors}/alpha-vantage/connector.json +0 -0
  334. /package/{dist/connectors → service-connectors}/brave-search/connector.json +0 -0
  335. /package/{dist/connectors → service-connectors}/cloudinary/connector.json +0 -0
  336. /package/{dist/connectors → service-connectors}/deepl/connector.json +0 -0
  337. /package/{dist/connectors → service-connectors}/elevenlabs/connector.json +0 -0
  338. /package/{dist/connectors → service-connectors}/giphy/connector.json +0 -0
  339. /package/{dist/connectors → service-connectors}/github/connector.json +0 -0
  340. /package/{dist/connectors → service-connectors}/huggingface/connector.json +0 -0
  341. /package/{dist/connectors → service-connectors}/imgur/connector.json +0 -0
  342. /package/{dist/connectors → service-connectors}/instagram/connector.json +0 -0
  343. /package/{dist/connectors → service-connectors}/jira/connector.json +0 -0
  344. /package/{dist/connectors → service-connectors}/mapbox/connector.json +0 -0
  345. /package/{dist/connectors → service-connectors}/nasa/connector.json +0 -0
  346. /package/{dist/connectors → service-connectors}/newsapi/connector.json +0 -0
  347. /package/{dist/connectors → service-connectors}/notion/connector.json +0 -0
  348. /package/{dist/connectors → service-connectors}/open-exchange-rates/connector.json +0 -0
  349. /package/{dist/connectors → service-connectors}/openweathermap/connector.json +0 -0
  350. /package/{dist/connectors → service-connectors}/pexels/connector.json +0 -0
  351. /package/{dist/connectors → service-connectors}/resend/connector.json +0 -0
  352. /package/{dist/connectors → service-connectors}/rss2json/connector.json +0 -0
  353. /package/{dist/connectors → service-connectors}/sendgrid/connector.json +0 -0
  354. /package/{dist/connectors → service-connectors}/spoonacular/connector.json +0 -0
  355. /package/{dist/connectors → service-connectors}/stability-ai/connector.json +0 -0
  356. /package/{dist/connectors → service-connectors}/twilio/connector.json +0 -0
  357. /package/{dist/connectors → service-connectors}/unsplash/connector.json +0 -0
  358. /package/{dist/connectors → service-connectors}/wolfram-alpha/connector.json +0 -0
  359. /package/{dist/connectors → service-connectors}/youtube-data/connector.json +0 -0
package/static-files/fluentlm-instructions.llmd ADDED
@@ -0,0 +1,868 @@
1
+ @fluentlm__component_reference
2
+ Compact reference LLM-driven HTML generation. component shows 1–3 examples followed class list
3
+ @global_classes
4
+ Apply element
5
+ :_cols=class¦effect
6
+ flm-text--secondary¦Color: --bodySubtext
7
+ flm-text--disabled¦Color: --disabledText
8
+ flm-text--error¦Color: --errorText
9
+ flm-text--success¦Color: --successText
10
+ flm-text--nowrap¦Truncate ellipsis
11
+ flm-text--block¦display: block
12
+ flm-text--semibold¦Weight 600
13
+ flm-text--bold¦Weight 700
14
+ flm-sr-only¦Visually hidden, screen-reader accessible
15
+ @global_implementation_notes
16
+ Auto-wired JS handlers — Nav, Pivot, Dialog, Panel, Modal, Callout, Dropdown, ComboBox, SpinButton, SwatchColorPicker, GroupedList, MessageBar, Toggle, Rating, SearchBox, TagPicker, DatePicker, TimePicker, Coachmark, and TeachingBubble components implement own click/interaction handlers via fluentlm.js. Do not duplicate page scripts
17
+ Theme switching — Use FluentLM.setTheme('dark') / FluentLM.setTheme('light'), or toggle fluent-dark class <html>. Do not use data-theme attributes
18
+ CSS variables — Use only FluentLM semantic tokens documented CSS Custom Properties section below (e.g. --bodyText, --bodyBackground). Do not use Fluent UI v2 variable names (e.g. --colorNeutralForeground1). Important: custom styles (hover states, backgrounds, borders, text colors), always use Semantic Colors variables (e.g. --bodyBackground, --defaultStateBackground, --bodySubtext) instead Palette Colors variables (e.g. --neutralLighter, --neutralLight). Palette colors fixed values do not change light and dark themes, so using will produce incorrect colors one theme or
19
+ CSS load order — base CSS file must always be included before any theme files
20
+ Icons — element data-icon="Name" attribute gets inline SVG injected JS. Works .flm-icon elements, empty <i> / <span> tags, buttons, and links
21
+ @button
22
+ ::html
23
+ <<<
24
+ <button class="flm-button">Default</button> <button class="flm-button flm-button--primary" data-icon="Save">Save</button> <button class="flm-button flm-button--icon" data-icon="Settings" aria-label="Settings"></button>
25
+ >>>
26
+ :_cols=class¦effect
27
+ flm-button¦Base button
28
+ flm-button--primary¦Brand-colored fill
29
+ flm-button--compound¦Two-line button (needs .flm-button-label + .flm-button-description children)
30
+ flm-button--icon¦Icon-only, square (requires aria-label)
31
+ flm-button--subtle¦No border, transparent background
32
+ :_cols=attribute¦effect
33
+ data-icon="Name"¦JS injects icon before label
34
+ data-split¦JS adds dropdown caret
35
+ disabled¦Native disabled state
36
+ :_cols=child_class¦where
37
+ flm-button-label¦Primary text compound button
38
+ flm-button-description¦Secondary text compound button
39
+ @text
40
+ ::html
41
+ <<<
42
+ <span class="flm-text">Default (medium)</span> <span class="flm-text flm-text--xLarge">Heading</span> <p class="flm-text flm-text--small flm-text--secondary flm-text--block">Caption paragraph.</p>
43
+ >>>
44
+ :_cols=class¦size
45
+ flm-text--tiny¦10px
46
+ flm-text--xSmall¦10px
47
+ flm-text--small¦12px
48
+ flm-text--smallPlus¦12px
49
+ flm-text--medium¦14px (default)
50
+ flm-text--mediumPlus¦16px
51
+ flm-text--large¦18px
52
+ flm-text--xLarge¦20px / semibold
53
+ flm-text--xxLarge¦28px / semibold
54
+ flm-text--superLarge¦42px / semibold
55
+ flm-text--mega¦68px / semibold
56
+ @label
57
+ ::html
58
+ <<<
59
+ <label class="flm-label" for="f1">Name</label> <label class="flm-label flm-label--required" for="f2">Email</label>
60
+ >>>
61
+ :_cols=class¦effect
62
+ flm-label¦Base label
63
+ flm-label--required¦Adds red asterisk
64
+ flm-label--disabled¦Dimmed text
65
+ @link
66
+ ::html
67
+ <<<
68
+ <a class="flm-link" href="/page">Go to page</a>
69
+ >>>
70
+ :_cols=class¦effect
71
+ flm-link¦Base link
72
+ flm-link--disabled¦Dimmed, no pointer events
73
+ @icon
74
+ ::html
75
+ <<<
76
+ <i class="flm-icon" data-icon="Mail"></i> <i class="flm-icon flm-icon--large" data-icon="ChevronDown"></i>
77
+ >>>
78
+ :_cols=class¦size
79
+ flm-icon--small¦12px
80
+ (default)¦16px
81
+ flm-icon--large¦20px
82
+ :_cols=attribute¦effect
83
+ data-icon="Name"¦JS resolves SVG/glyph
84
+ @textfield
85
+ ::html
86
+ <<<
87
+ <div class="flm-textfield"> <label class="flm-label" for="f1">Name</label> <input class="flm-textfield-input" id="f1" placeholder="Enter name"> </div> <div class="flm-textfield flm-textfield--error"> <label class="flm-label" for="f2">Age</label> <input class="flm-textfield-input" id="f2" value="-1"> <span class="flm-textfield-error">Must be positive</span> </div> <div class="flm-textfield"> <label class="flm-label" for="f3">Notes</label> <textarea class="flm-textfield-input" id="f3" rows="4"></textarea> </div>
88
+ >>>
89
+ :_cols=class¦effect
90
+ flm-textfield¦Base wrapper
91
+ flm-textfield--required¦Required field styling
92
+ flm-textfield--error¦Error border + enables .flm-textfield-error
93
+ flm-textfield--disabled¦Dimmed, pair disabled input
94
+ flm-textfield--underlined¦Bottom border only
95
+ flm-textfield--borderless¦No border
96
+ :_cols=child_class¦element
97
+ flm-textfield-input¦<input> or <textarea>
98
+ flm-textfield-error¦<span> error message
99
+ flm-textfield-wrapper¦<div> wraps input when using prefix/suffix
100
+ flm-textfield-prefix¦<span> before input
101
+ flm-textfield-suffix¦<span> after input
102
+ @checkbox
103
+ ::html
104
+ <<<
105
+ <label class="flm-checkbox"> <input type="checkbox" class="flm-checkbox-input"> <span class="flm-checkbox-mark"></span> <span class="flm-checkbox-label">Accept terms</span> </label>
106
+ >>>
107
+ :_cols=class¦effect
108
+ flm-checkbox¦Base wrapper <label>)
109
+ flm-checkbox--disabled¦Dimmed, pair disabled input
110
+ :_cols=child_class¦element
111
+ flm-checkbox-input¦Hidden native <input type="checkbox">
112
+ flm-checkbox-mark¦Visual checkmark box
113
+ flm-checkbox-label¦Text label
114
+ :native=checked, disabled, indeterminate (via JS).
115
+ @toggle
116
+ ::html
117
+ <<<
118
+ <label class="flm-toggle"> <span class="flm-toggle-label">Notifications</span> <input type="checkbox" class="flm-toggle-input"> <span class="flm-toggle-track"><span class="flm-toggle-thumb"></span></span> <span class="flm-toggle-state" data-on="On" data-off="Off"></span> </label>
119
+ >>>
120
+ :_cols=class¦effect
121
+ flm-toggle¦Base wrapper <label>)
122
+ flm-toggle--disabled¦Dimmed, pair disabled input
123
+ flm-toggle--inline¦Label and track line
124
+ :_cols=child_class¦element
125
+ flm-toggle-input¦Hidden native <input type="checkbox">
126
+ flm-toggle-label¦Text label
127
+ flm-toggle-track¦Sliding rail
128
+ flm-toggle-thumb¦Circle knob inside track
129
+ flm-toggle-state¦Shows data-on/data-off text based state
130
+ @dropdown
131
+ ::html
132
+ <<<
133
+ <div class="flm-dropdown"> <label class="flm-label">Country</label> <button class="flm-dropdown-trigger"> <span class="flm-dropdown-title flm-dropdown-title--placeholder">Select...</span> <span class="flm-dropdown-caret" data-icon="ChevronDown"></span> </button> <div class="flm-dropdown-listbox"> <div class="flm-dropdown-option" data-value="us">United States</div> <div class="flm-dropdown-option" data-value="gb">United Kingdom</div> </div> </div>
134
+ >>>
135
+ :_cols=class¦effect
136
+ flm-dropdown¦Container
137
+ flm-dropdown--disabled¦Disabled state
138
+ flm-dropdown--error¦Error border
139
+ :_cols=attribute¦effect
140
+ data-value="val"¦On .flm-dropdown-option — option value. Auto-set root when selected
141
+ :_cols=child_class¦element
142
+ flm-dropdown-trigger¦Clickable button (styled like ComboBox wrapper)
143
+ flm-dropdown-title¦Selected text display
144
+ flm-dropdown-title--placeholder¦Placeholder color
145
+ flm-dropdown-caret¦Chevron icon
146
+ flm-dropdown-listbox¦Options popup
147
+ flm-dropdown-option¦Individual option
148
+ flm-dropdown-option--selected¦Selected option
149
+ flm-dropdown-option--disabled¦Disabled option
150
+ flm-dropdown-value¦Hidden <input> form submission (optional)
151
+ flm-dropdown-error¦<span> error message
152
+ :js=keyboard nav (ArrowUp/Down/Enter/Space/Escape), click-outside dismiss, flip-above.
153
+ @stack
154
+ ::html
155
+ <<<
156
+ <div class="flm-stack" style="gap: var(--spacingS1)"> <div>Row 1</div> <div>Row 2</div> </div> <div class="flm-stack flm-stack--horizontal" style="gap: var(--spacingM)"> <div class="flm-stack-item flm-stack-item--grow">Fills space</div> <div>Fixed</div> </div>
157
+ >>>
158
+ :_cols=class¦effect
159
+ flm-stack¦Vertical flexbox (default)
160
+ flm-stack--horizontal¦Row direction
161
+ flm-stack--center¦Center axes
162
+ flm-stack--end¦Align end
163
+ flm-stack--space-between¦Space items
164
+ flm-stack--wrap¦Allow wrapping
165
+ :_cols=child_class¦effect
166
+ flm-stack-item--grow¦flex-grow: 1
167
+ flm-stack-item--shrink¦flex-shrink: 1
168
+ flm-stack-item--align-end¦Self-align end
169
+ flm-stack-item--align-center¦Self-align center
170
+ Inline style="gap: var(--spacingS1)" sets spacing per instance
171
+ @separator
172
+ ::html
173
+ <<<
174
+ <hr class="flm-separator"> <hr class="flm-separator flm-separator--vertical">
175
+ >>>
176
+ :_cols=class¦effect
177
+ flm-separator¦Horizontal line
178
+ flm-separator--vertical¦Vertical line (use horizontal stacks)
179
+ @spinner
180
+ ::html
181
+ <<<
182
+ <div class="flm-spinner"><div class="flm-spinner-circle"></div></div> <div class="flm-spinner flm-spinner--large"> <div class="flm-spinner-circle"></div> <span class="flm-spinner-label">Loading...</span> </div>
183
+ >>>
184
+ :_cols=class¦size
185
+ flm-spinner--xSmall¦12px
186
+ flm-spinner--small¦16px
187
+ (default)¦20px
188
+ flm-spinner--large¦28px
189
+ :_cols=child_class¦element
190
+ flm-spinner-circle¦Animated ring
191
+ flm-spinner-label¦Optional text label
192
+ @messagebar
193
+ ::html
194
+ <<<
195
+ <div class="flm-messagebar flm-messagebar--success">Operation completed.</div> <div class="flm-messagebar flm-messagebar--error">Something went wrong.</div>
196
+ >>>
197
+ :_cols=class¦type
198
+ flm-messagebar--info¦Neutral info (default)
199
+ flm-messagebar--success¦Green success
200
+ flm-messagebar--warning¦Yellow warning
201
+ flm-messagebar--severeWarning¦Orange severe warning
202
+ flm-messagebar--error¦Red error
203
+ flm-messagebar--blocked¦Red blocked
204
+ :_cols=child_class¦element
205
+ flm-messagebar-icon¦Leading icon (auto-injected JS if absent)
206
+ flm-messagebar-text¦Message content
207
+ flm-messagebar-actions¦Action buttons container
208
+ flm-messagebar-dismiss¦Dismiss/close button
209
+ @dialog
210
+ ::html
211
+ <<<
212
+ <div class="flm-dialog-overlay" id="dlg1" data-light-dismiss> <div class="flm-dialog"> <div class="flm-dialog-header"> <h2 class="flm-dialog-title">Confirm</h2> <button class="flm-dialog-close" data-icon="Cancel" aria-label="Close"></button> </div> <div class="flm-dialog-body">Are you sure?</div> <div class="flm-dialog-footer"> <button class="flm-button" data-dialog-close>Cancel</button> <button class="flm-button flm-button--primary" data-dialog-close>OK</button> </div> </div> </div> <button class="flm-button" data-dialog-open="dlg1">Open Dialog</button>
213
+ >>>
214
+ :_cols=class¦effect
215
+ flm-dialog-overlay¦Full-screen overlay container (give id)
216
+ flm-dialog¦The dialog box
217
+ flm-dialog--large-header¦Larger title font
218
+ :_cols=attribute¦effect
219
+ data-dialog-open="id"¦On trigger button — opens dialog
220
+ data-dialog-close¦On button — closes containing dialog
221
+ data-light-dismiss¦On overlay — click outside close
222
+ :_cols=child_class¦element
223
+ flm-dialog-header¦Header row
224
+ flm-dialog-title¦<h2> title
225
+ flm-dialog-close¦Close X button
226
+ flm-dialog-body¦Content area
227
+ flm-dialog-footer¦Action buttons row
228
+ Implementation note: When embedding Dropdown, ComboBox, or popup-based component inside Dialog, Modal, or Panel, add overflow: visible dialog/modal container (.flm-dialog, .flm-modal) and body (.flm-dialog-body, .flm-panel-body) so dropdown listbox not clipped
229
+ @panel
230
+ ::html
231
+ <<<
232
+ <div class="flm-panel-overlay"></div> <div class="flm-panel" id="panel1"> <div class="flm-panel-header"> <h2 class="flm-panel-title">Settings</h2> <button class="flm-panel-close" data-icon="Cancel" aria-label="Close"></button> </div> <div class="flm-panel-body">Panel content here.</div> <div class="flm-panel-footer"> <button class="flm-button flm-button--primary" data-panel-close>Save</button> </div> </div> <button class="flm-button" data-panel-open="panel1">Open Panel</button>
233
+ >>>
234
+ :_cols=class¦effect
235
+ flm-panel¦Slide-in container (give id)
236
+ flm-panel--small¦272px width
237
+ flm-panel--medium¦592px width
238
+ flm-panel--large¦940px width
239
+ flm-panel--extraLarge¦1200px width
240
+ flm-panel--fluid¦100% width
241
+ flm-panel--left¦Slides left instead right
242
+ :_cols=attribute¦effect
243
+ data-panel-open="id"¦On trigger — opens panel
244
+ data-panel-close¦On button — closes containing panel
245
+ :_cols=child_class¦element
246
+ flm-panel-header¦Header row
247
+ flm-panel-title¦<h2> title
248
+ flm-panel-close¦Close X button
249
+ flm-panel-body¦Scrollable content
250
+ flm-panel-footer¦Actions row (sticky bottom)
251
+ @modal
252
+ ::html
253
+ <<<
254
+ <div class="flm-modal-overlay" id="modal1" data-light-dismiss> <div class="flm-modal" style="width: 480px; padding: var(--spacingL1);"> Content here <button class="flm-button" data-modal-close>Close</button> </div> </div> <button class="flm-button" data-modal-open="modal1">Open Modal</button>
255
+ >>>
256
+ :_cols=class¦effect
257
+ flm-modal-overlay¦Full-screen overlay (give id)
258
+ flm-modal¦Centered content box
259
+ :_cols=attribute¦effect
260
+ data-modal-open="id"¦Opens modal
261
+ data-modal-close¦Closes containing modal
262
+ data-light-dismiss¦On overlay — click outside close
263
+ data-blocking¦On overlay — prevents Escape/click dismiss
264
+ @callout
265
+ ::html
266
+ <<<
267
+ <button class="flm-button" data-callout-toggle="co1">Show Info</button> <div class="flm-callout" id="co1"> <div class="flm-callout-beak"></div> <div class="flm-callout-body">Callout content here.</div> </div>
268
+ >>>
269
+ :_cols=class¦effect
270
+ flm-callout¦Positioned popup (give id)
271
+ :_cols=attribute¦effect
272
+ data-callout-toggle="id"¦Toggle callout visibility
273
+ :_cols=child_class¦element
274
+ flm-callout-beak¦Arrow pointing target
275
+ flm-callout-body¦Content area
276
+ @commandbar
277
+ ::html
278
+ <<<
279
+ <div class="flm-commandbar"> <div class="flm-commandbar-items"> <button class="flm-commandbar-item" data-icon="Add">New</button> <button class="flm-commandbar-item" data-icon="Edit">Edit</button> <span class="flm-commandbar-divider"></span> <button class="flm-commandbar-item" data-icon="Delete">Delete</button> </div> <div class="flm-commandbar-far"> <button class="flm-commandbar-item" data-icon="Filter">Filter</button> </div> </div>
280
+ >>>
281
+ :_cols=class¦element
282
+ flm-commandbar¦Toolbar container
283
+ flm-commandbar-items¦Left-side items
284
+ flm-commandbar-far¦Right-side items
285
+ flm-commandbar-item¦Individual command button
286
+ flm-commandbar-divider¦Vertical separator
287
+ flm-commandbar-overflow¦Overflow "..." button
288
+ :_cols=attribute¦effect
289
+ data-icon="Name"¦Icon before label
290
+ disabled¦Disabled state
291
+ Implementation note: When embedding Dropdown or popup-based component inside CommandBar, add overflow: visible .flm-commandbar and .flm-commandbar-items so dropdown listbox not clipped
292
+ @nav
293
+ ::html
294
+ <<<
295
+ <nav class="flm-nav"> <!-- Expanded group --> <div class="flm-nav-group"> <button class="flm-nav-group-header"> <i class="flm-nav-chevron flm-nav-chevron--expanded" data-icon="ChevronRight"></i> Section </button> <div class="flm-nav-group-items"> <a class="flm-nav-link flm-nav-link--active" href="#">Home</a> <a class="flm-nav-link" href="#">Settings</a> <a class="flm-nav-link flm-nav-link--disabled">Disabled</a> </div> </div> <!-- Collapsed group: put --collapsed on flm-nav-group-items, omit --expanded on chevron --> <div class="flm-nav-group"> <button class="flm-nav-group-header"> <i class="flm-nav-chevron" data-icon="ChevronRight"></i> Collapsed Section </button> <div class="flm-nav-group-items flm-nav-group-items--collapsed"> <a class="flm-nav-link" href="#">Hidden Link</a> </div> </div> </nav>
296
+ >>>
297
+ :_cols=class¦effect
298
+ flm-nav¦Nav container
299
+ flm-nav-group¦Section group
300
+ flm-nav-group-header¦Collapsible group title
301
+ flm-nav-group-items¦Links container
302
+ flm-nav-group-items--collapsed¦Hidden (toggled JS). Apply .flm-nav-group-items, NOT parent group
303
+ flm-nav-link¦Navigation link
304
+ flm-nav-link--active¦Active/selected link
305
+ flm-nav-link--disabled¦Disabled link
306
+ flm-nav-link--nested¦Extra indentation
307
+ flm-nav-chevron¦Expand/collapse icon
308
+ flm-nav-chevron--expanded¦Rotated 90deg
309
+ @breadcrumb
310
+ ::html
311
+ <<<
312
+ <ol class="flm-breadcrumb"> <li class="flm-breadcrumb-item"><a class="flm-breadcrumb-link" href="#">Home</a></li> <li class="flm-breadcrumb-item"><a class="flm-breadcrumb-link" href="#">Library</a></li> <li class="flm-breadcrumb-item"><a class="flm-breadcrumb-link">Current Page</a></li> </ol>
313
+ >>>
314
+ :_cols=class¦effect
315
+ flm-breadcrumb¦<ol> container
316
+ flm-breadcrumb--small¦Smaller font
317
+ flm-breadcrumb--large¦Larger font + semibold
318
+ flm-breadcrumb-item¦<li> wrapper
319
+ flm-breadcrumb-link¦Clickable text
320
+ flm-breadcrumb-overflow¦"..." overflow button
321
+ @pivot
322
+ ::html
323
+ <<<
324
+ <div class="flm-pivot"> <div class="flm-pivot-tabs" role="tablist"> <button class="flm-pivot-tab flm-pivot-tab--active" data-panel="p1" role="tab">Tab 1</button> <button class="flm-pivot-tab" data-panel="p2" role="tab">Tab 2</button> <button class="flm-pivot-tab flm-pivot-tab--disabled" role="tab">Disabled</button> </div> <div class="flm-pivot-panel flm-pivot-panel--active" id="p1" role="tabpanel">Content 1</div> <div class="flm-pivot-panel" id="p2" role="tabpanel">Content 2</div> </div>
325
+ >>>
326
+ :_cols=class¦effect
327
+ flm-pivot¦Container
328
+ flm-pivot--links¦Link-style tabs (wider padding)
329
+ flm-pivot--tabs¦Filled tab style
330
+ flm-pivot-tabs¦Tab bar
331
+ flm-pivot-tab¦Individual tab button
332
+ flm-pivot-tab--active¦Selected tab
333
+ flm-pivot-tab--disabled¦Disabled tab
334
+ flm-pivot-panel¦Content panel
335
+ flm-pivot-panel--active¦Visible panel
336
+ :_cols=attribute¦effect
337
+ data-panel="id"¦Links tab panel id
338
+ @detailslist
339
+ ::html
340
+ <<<
341
+ <div class="flm-detailslist"> <div class="flm-detailslist-header"> <div class="flm-detailslist-check"><label class="flm-checkbox"><input type="checkbox" class="flm-checkbox-input"><span class="flm-checkbox-mark"></span></label></div> <div class="flm-detailslist-header-cell" style="width: 200px;">Name</div> <div class="flm-detailslist-header-cell" style="width: 120px;">Status</div> <div class="flm-detailslist-header-cell" style="flex: 1;">Date</div> </div> <div class="flm-detailslist-row"> <div class="flm-detailslist-check"><label class="flm-checkbox"><input type="checkbox" class="flm-checkbox-input"><span class="flm-checkbox-mark"></span></label></div> <div class="flm-detailslist-cell" style="width: 200px;">Document.pdf</div> <div class="flm-detailslist-cell" style="width: 120px;">Active</div> <div class="flm-detailslist-cell" style="flex: 1;">Feb 20, 2026</div> </div> </div>
342
+ >>>
343
+ :_cols=class¦effect
344
+ flm-detailslist¦Table container
345
+ flm-detailslist--compact¦Reduced row height (32px)
346
+ flm-detailslist-header¦Header row
347
+ flm-detailslist-header-cell¦Column header
348
+ flm-detailslist-row¦Data row
349
+ flm-detailslist-row--selected¦Selected row highlight
350
+ flm-detailslist-cell¦Data cell
351
+ flm-detailslist-check¦Row checkbox column
352
+ flm-detailslist-empty¦Empty state message
353
+ Set column widths via inline style="width: 200px" or style="flex: 1"
354
+ @searchbox
355
+ ::html
356
+ <<<
357
+ <div class="flm-searchbox"> <input class="flm-searchbox-input" type="text" placeholder="Search..."> </div>
358
+ >>>
359
+ :_cols=class¦effect
360
+ flm-searchbox¦Container (JS injects icon + clear btn)
361
+ flm-searchbox--underlined¦Bottom border only
362
+ flm-searchbox--disabled¦Disabled state
363
+ :_cols=child_class¦element
364
+ flm-searchbox-input¦<input type="text">
365
+ flm-searchbox-icon¦Search icon (auto-injected)
366
+ flm-searchbox-clear¦Clear button (auto-injected)
367
+ @contextualmenu
368
+ ::html
369
+ <<<
370
+ <button class="flm-button" data-contextmenu-toggle="menu1">Menu</button> <div class="flm-contextmenu" id="menu1"> <div class="flm-contextmenu-header">Actions</div> <button class="flm-contextmenu-item"><span class="flm-contextmenu-item-text">Edit</span></button> <button class="flm-contextmenu-item"><span class="flm-contextmenu-item-text">Copy</span></button> <div class="flm-contextmenu-divider"></div> <button class="flm-contextmenu-item" disabled><span class="flm-contextmenu-item-text">Delete</span></button> </div>
371
+ >>>
372
+ :_cols=class¦effect
373
+ flm-contextmenu¦Menu container (give id)
374
+ flm-contextmenu-item¦Menu item button
375
+ flm-contextmenu-item--checked¦Shows checkmark
376
+ flm-contextmenu-divider¦Horizontal rule
377
+ flm-contextmenu-header¦Section header
378
+ :_cols=attribute¦effect
379
+ data-contextmenu-toggle="id"¦Click trigger
380
+ data-contextmenu="id"¦Right-click trigger
381
+ disabled¦Disabled item
382
+ :_cols=child_class¦element
383
+ flm-contextmenu-item-icon¦Leading icon
384
+ flm-contextmenu-item-text¦Item label
385
+ flm-contextmenu-item-submenu¦Submenu chevron
386
+ @progressindicator
387
+ ::html
388
+ <<<
389
+ <div class="flm-progress"> <span class="flm-progress-label">Uploading...</span> <div class="flm-progress-track"><div class="flm-progress-bar" style="width: 60%"></div></div> <span class="flm-progress-description">60% complete</span> </div> <div class="flm-progress flm-progress--indeterminate"> <div class="flm-progress-track"><div class="flm-progress-bar"></div></div> </div>
390
+ >>>
391
+ :_cols=class¦effect
392
+ flm-progress¦Container
393
+ flm-progress--indeterminate¦Animated looping bar
394
+ :_cols=child_class¦element
395
+ flm-progress-label¦Title text
396
+ flm-progress-track¦Background rail
397
+ flm-progress-bar¦Filled portion (set width via style)
398
+ flm-progress-description¦Subtitle text
399
+ @tooltip
400
+ ::html
401
+ <<<
402
+ <span data-tooltip="Helpful info">Hover me</span>
403
+ >>>
404
+ :_cols=class¦effect
405
+ flm-tooltip-host¦Explicit wrapper (optional — data-tooltip element works)
406
+ flm-tooltip¦Tooltip box pre-defined rich tooltips)
407
+ :_cols=attribute¦effect
408
+ data-tooltip="text"¦Simple text tooltip (auto-created JS)
409
+ data-tooltip-id="id"¦References pre-defined .flm-tooltip element
410
+ @persona
411
+ ::html
412
+ <<<
413
+ <div class="flm-persona flm-persona--size40"> <div class="flm-persona-coin flm-persona-presence flm-persona-presence--available">JD</div> <div class="flm-persona-details"> <span class="flm-persona-name">Jane Doe</span> <span class="flm-persona-secondary">Software Engineer</span> </div> </div>
414
+ >>>
415
+ :_cols=class¦size
416
+ flm-persona--size24¦24px (default)
417
+ flm-persona--size32¦32px
418
+ flm-persona--size40¦40px
419
+ flm-persona--size48¦48px
420
+ flm-persona--size56¦56px
421
+ flm-persona--size72¦72px
422
+ flm-persona--size100¦100px
423
+ flm-persona--size120¦120px
424
+ :_cols=presence_class¦status
425
+ flm-persona-presence--available¦Green
426
+ flm-persona-presence--away¦Yellow
427
+ flm-persona-presence--busy¦Red
428
+ flm-persona-presence--dnd¦Red
429
+ flm-persona-presence--offline¦Gray
430
+ :_cols=child_class¦element
431
+ flm-persona-coin¦Avatar circle (initials or <img>)
432
+ flm-persona-details¦Text wrapper
433
+ flm-persona-name¦Primary name
434
+ flm-persona-secondary¦Title / role
435
+ flm-persona-tertiary¦Additional info
436
+ @image
437
+ ::html
438
+ <<<
439
+ <img class="flm-image" src="photo.jpg" alt="Description"> <img class="flm-image flm-image--cover flm-image--round" src="avatar.jpg" alt="User" style="width:48px;height:48px">
440
+ >>>
441
+ :_cols=class¦effect
442
+ flm-image¦Base image
443
+ flm-image--cover¦object-fit: cover
444
+ flm-image--contain¦object-fit: contain
445
+ flm-image--center¦Centered, no scaling
446
+ flm-image--border¦Border + rounded corners
447
+ flm-image--round¦Circular
448
+ flm-image--maximize¦Fill parent 100%
449
+ @choicegroup
450
+ ::html
451
+ <<<
452
+ <div class="flm-choicegroup"> <label class="flm-choicegroup-option"> <input type="radio" class="flm-choicegroup-input" name="g1" value="a" checked> <span class="flm-choicegroup-mark"></span> <span class="flm-choicegroup-label">Option A</span> </label> <label class="flm-choicegroup-option"> <input type="radio" class="flm-choicegroup-input" name="g1" value="b"> <span class="flm-choicegroup-mark"></span> <span class="flm-choicegroup-label">Option B</span> </label> </div>
453
+ >>>
454
+ :_cols=class¦effect
455
+ flm-choicegroup¦Radio group container
456
+ flm-choicegroup--horizontal¦Row layout
457
+ flm-choicegroup-option¦Individual radio <label>)
458
+ flm-choicegroup-option--disabled¦Dimmed, pair disabled input
459
+ :_cols=child_class¦element
460
+ flm-choicegroup-input¦Hidden native <input type="radio">
461
+ flm-choicegroup-mark¦Visual radio circle
462
+ flm-choicegroup-label¦Text label
463
+ :native=checked, disabled.
464
+ @shimmer
465
+ ::html
466
+ <<<
467
+ <div class="flm-shimmer"> <div class="flm-shimmer-line"></div> <div class="flm-shimmer-line flm-shimmer-line--medium"></div> <div class="flm-shimmer-line flm-shimmer-line--short"></div> </div> <div class="flm-shimmer flm-shimmer--row"> <div class="flm-shimmer-circle"></div> <div class="flm-shimmer" style="flex:1"> <div class="flm-shimmer-line"></div> <div class="flm-shimmer-line flm-shimmer-line--medium"></div> </div> </div>
468
+ >>>
469
+ :_cols=class¦effect
470
+ flm-shimmer¦Container (vertical)
471
+ flm-shimmer--row¦Horizontal composition
472
+ :_cols=element_class¦shape
473
+ flm-shimmer-line¦16px bar (full width)
474
+ flm-shimmer-line--short¦40% width
475
+ flm-shimmer-line--medium¦70% width
476
+ flm-shimmer-circle¦40px circle
477
+ flm-shimmer-circle--small¦24px circle
478
+ flm-shimmer-circle--large¦56px circle
479
+ flm-shimmer-rect¦120×120px block
480
+ flm-shimmer-rect--wide¦200px wide
481
+ flm-shimmer-rect--tall¦200px tall
482
+ @list
483
+ ::html
484
+ <<<
485
+ <div class="flm-list flm-list--bordered flm-list--scrollable"> <div class="flm-list-item flm-list-item--selected">Selected</div> <div class="flm-list-item"> <div class="flm-list-item-content"> <span class="flm-list-item-primary">Title</span> <span class="flm-list-item-secondary">Subtitle</span> </div> </div> <div class="flm-list-item flm-list-item--disabled">Disabled</div> </div>
486
+ >>>
487
+ :_cols=class¦effect
488
+ flm-list¦List container
489
+ flm-list--bordered¦Border + dividers
490
+ flm-list--scrollable¦Scrollable (300px max-height)
491
+ flm-list--compact¦Reduced row height
492
+ flm-list-item¦Row (36px min-height)
493
+ flm-list-item--selected¦Checked background
494
+ flm-list-item--disabled¦Dimmed, no pointer events
495
+ :_cols=child_class¦element
496
+ flm-list-item-icon¦Leading icon
497
+ flm-list-item-content¦Wrapper two-line layout
498
+ flm-list-item-primary¦Primary text
499
+ flm-list-item-secondary¦Secondary text
500
+ @groupedlist
501
+ ::html
502
+ <<<
503
+ <div class="flm-groupedlist"> <div class="flm-groupedlist-group"> <button class="flm-groupedlist-header"> <i class="flm-groupedlist-chevron flm-groupedlist-chevron--expanded" data-icon="ChevronRight"></i> Group Name <span class="flm-groupedlist-count">(3)</span> </button> <div class="flm-groupedlist-items"> <div class="flm-groupedlist-item">Item 1</div> <div class="flm-groupedlist-item">Item 2</div> </div> </div> </div>
504
+ >>>
505
+ :_cols=class¦effect
506
+ flm-groupedlist¦Container
507
+ flm-groupedlist-group¦Section group
508
+ flm-groupedlist-header¦Collapsible group title
509
+ flm-groupedlist-items¦Items container
510
+ flm-groupedlist-items--collapsed¦Hidden (toggled JS)
511
+ flm-groupedlist-item¦Individual item
512
+ flm-groupedlist-item--selected¦Selected item
513
+ flm-groupedlist-item--disabled¦Disabled item
514
+ flm-groupedlist-chevron¦Expand/collapse icon
515
+ flm-groupedlist-chevron--expanded¦Rotated 90deg
516
+ flm-groupedlist-count¦Item count badge
517
+ @rating
518
+ ::html
519
+ <<<
520
+ <div class="flm-rating"> <input type="radio" class="flm-rating-input" name="r" value="5"><label class="flm-rating-star"></label> <input type="radio" class="flm-rating-input" name="r" value="4"><label class="flm-rating-star"></label> <input type="radio" class="flm-rating-input" name="r" value="3" checked><label class="flm-rating-star"></label> <input type="radio" class="flm-rating-input" name="r" value="2"><label class="flm-rating-star"></label> <input type="radio" class="flm-rating-input" name="r" value="1"><label class="flm-rating-star"></label> </div>
521
+ >>>
522
+ :_cols=class¦effect
523
+ flm-rating¦Container (radio inputs ordered 5→1)
524
+ flm-rating--readonly¦Non-interactive, use --filled/--empty stars
525
+ flm-rating--disabled¦Dimmed, no interaction
526
+ flm-rating--large¦Larger stars (32px)
527
+ :_cols=child_class¦element
528
+ flm-rating-input¦Hidden <input type="radio">
529
+ flm-rating-star¦Star label (clip-path shape)
530
+ flm-rating-star--filled¦Filled star (readonly mode)
531
+ flm-rating-star--empty¦Empty star (readonly mode)
532
+ JS stores data-rating-value root
533
+ @facepile
534
+ ::html
535
+ <<<
536
+ <div class="flm-facepile" data-max="3"> <span class="flm-facepile-member"><span class="flm-persona-coin">JD</span></span> <span class="flm-facepile-member"><span class="flm-persona-coin">AB</span></span> <span class="flm-facepile-member"><span class="flm-persona-coin">MK</span></span> <span class="flm-facepile-member"><span class="flm-persona-coin">TW</span></span> </div>
537
+ >>>
538
+ :_cols=class¦effect
539
+ flm-facepile¦Container
540
+ flm-facepile-member¦Overlapping coin wrapper
541
+ flm-facepile-overflow¦+N chip (auto-injected JS)
542
+ flm-facepile-add¦Add person button
543
+ :_cols=attribute¦effect
544
+ data-max="N"¦JS hides excess members, shows +N overflow
545
+ @swatchcolorpicker
546
+ ::html
547
+ <<<
548
+ <div class="flm-swatchcolorpicker"> <button class="flm-swatchcolorpicker-cell" style="background-color: #ff1744;" data-color="#ff1744"></button> <button class="flm-swatchcolorpicker-cell flm-swatchcolorpicker-cell--selected" style="background-color: #2979ff;" data-color="#2979ff"></button> </div>
549
+ >>>
550
+ :_cols=class¦effect
551
+ flm-swatchcolorpicker¦Grid container
552
+ flm-swatchcolorpicker--circle¦Circular swatches
553
+ flm-swatchcolorpicker--large¦32px swatches
554
+ flm-swatchcolorpicker-cell¦Color button (set background-color inline)
555
+ flm-swatchcolorpicker-cell--selected¦Selection ring
556
+ flm-swatchcolorpicker-cell--disabled¦Dimmed
557
+ :_cols=attribute¦effect
558
+ data-color="hex"¦Color value JS selection tracking
559
+ JS sets data-selected and data-selected-color root
560
+ @documentcard
561
+ ::html
562
+ <<<
563
+ <div class="flm-documentcard"> <div class="flm-documentcard-preview"> <div class="flm-documentcard-preview-icon"><i class="flm-icon flm-icon--large" data-icon="Document"></i></div> </div> <div class="flm-documentcard-details"> <span class="flm-documentcard-title">Report.docx</span> </div> <div class="flm-documentcard-activity"> <span class="flm-persona-coin" style="width:24px;height:24px;font-size:10px;">JD</span> <div> <span class="flm-documentcard-activity-name">Jane Doe</span> <span class="flm-documentcard-activity-date">Feb 20</span> </div> </div> </div>
564
+ >>>
565
+ :_cols=class¦effect
566
+ flm-documentcard¦Card container (212px)
567
+ flm-documentcard--compact¦Horizontal layout
568
+ :_cols=child_class¦element
569
+ flm-documentcard-preview¦Image/icon area
570
+ flm-documentcard-preview-icon¦Centered icon
571
+ flm-documentcard-details¦Title/text area
572
+ flm-documentcard-title¦Document name
573
+ flm-documentcard-activity¦Persona + timestamp row
574
+ flm-documentcard-activity-name¦Author name
575
+ flm-documentcard-activity-date¦Timestamp
576
+ flm-documentcard-actions¦Action buttons row
577
+ @spinbutton
578
+ ::html
579
+ <<<
580
+ <div class="flm-spinbutton-wrapper"> <label class="flm-label" for="sb1">Quantity</label> <div class="flm-spinbutton"> <button class="flm-spinbutton-btn flm-spinbutton-btn--decrement" data-icon="ChevronDown" aria-label="Decrease"></button> <input class="flm-spinbutton-input" id="sb1" type="number" value="5" min="0" max="100" step="1"> <button class="flm-spinbutton-btn flm-spinbutton-btn--increment" data-icon="ChevronUp" aria-label="Increase"></button> </div> </div>
581
+ >>>
582
+ :_cols=class¦effect
583
+ flm-spinbutton¦Input + buttons container
584
+ flm-spinbutton--disabled¦Disabled state
585
+ flm-spinbutton-wrapper¦Outer wrapper label
586
+ :_cols=child_class¦element
587
+ flm-spinbutton-input¦<input type="number"> (native spinners hidden)
588
+ flm-spinbutton-btn¦Inc/dec button
589
+ flm-spinbutton-btn--decrement¦Decrement button
590
+ flm-spinbutton-btn--increment¦Increment button
591
+ JS wires buttons stepUp()/stepDown()
592
+ @slider
593
+ ::html
594
+ <<<
595
+ <div class="flm-slider"> <div class="flm-slider-label"> <label class="flm-label" for="sl1">Volume</label> </div> <div class="flm-slider-container"> <input class="flm-slider-input" id="sl1" type="range" min="0" max="100" value="60"> <span class="flm-slider-value">60</span> </div> </div>
596
+ >>>
597
+ :_cols=class¦effect
598
+ flm-slider¦Container
599
+ flm-slider--disabled¦Disabled state
600
+ flm-slider--vertical¦Vertical orientation
601
+ :_cols=child_class¦element
602
+ flm-slider-container¦Flex wrapper input + value
603
+ flm-slider-input¦<input type="range">
604
+ flm-slider-value¦Live value display
605
+ flm-slider-label¦Label row
606
+ JS sets --flm-slider-fill CSS var track gradient
607
+ @combobox
608
+ ::html
609
+ <<<
610
+ <div class="flm-combobox"> <label class="flm-label">Fruit</label> <div class="flm-combobox-wrapper"> <input class="flm-combobox-input" placeholder="Select..."> <button class="flm-combobox-caret" data-icon="ChevronDown" aria-label="Toggle"></button> </div> <div class="flm-combobox-listbox"> <div class="flm-combobox-option" data-value="apple">Apple</div> <div class="flm-combobox-option" data-value="banana">Banana</div> </div> </div>
611
+ >>>
612
+ :_cols=class¦effect
613
+ flm-combobox¦Container
614
+ flm-combobox--disabled¦Disabled state
615
+ flm-combobox--error¦Error border
616
+ :_cols=attribute¦effect
617
+ data-multiselect¦On .flm-combobox — enables multi-select mode
618
+ data-value="val"¦On .flm-combobox-option — option value
619
+ :_cols=child_class¦element
620
+ flm-combobox-wrapper¦Input + caret row
621
+ flm-combobox-input¦Text input
622
+ flm-combobox-caret¦Dropdown toggle button
623
+ flm-combobox-listbox¦Options dropdown
624
+ flm-combobox-option¦Individual option
625
+ flm-combobox-option--selected¦Selected option
626
+ flm-combobox-option--disabled¦Disabled option
627
+ flm-combobox-option-check¦Checkbox (multi-select mode)
628
+ flm-combobox-error¦Error message
629
+ :js=filtering, keyboard nav (ArrowUp/Down/Enter/Escape), click-outside dismiss, flip-above.
630
+ @teachingbubble
631
+ ::html
632
+ <<<
633
+ <button data-teachingbubble-toggle="tb1">Learn more</button> <div class="flm-teachingbubble" id="tb1"> <div class="flm-teachingbubble-beak"></div> <div class="flm-teachingbubble-header"> <h3 class="flm-teachingbubble-headline">Welcome!</h3> <button class="flm-teachingbubble-close" data-icon="Cancel" aria-label="Close"></button> </div> <div class="flm-teachingbubble-body">Guidance text here.</div> <div class="flm-teachingbubble-footer"> <button class="flm-button flm-button--primary">Got it!</button> </div> </div>
634
+ >>>
635
+ :_cols=class¦effect
636
+ flm-teachingbubble¦Inverted-color callout (themePrimary bg)
637
+ :_cols=attribute¦effect
638
+ data-teachingbubble-toggle="id"¦Toggle trigger
639
+ :_cols=child_class¦element
640
+ flm-teachingbubble-beak¦Arrow pointing target
641
+ flm-teachingbubble-header¦Header row
642
+ flm-teachingbubble-headline¦Title
643
+ flm-teachingbubble-close¦Close button
644
+ flm-teachingbubble-body¦Content text
645
+ flm-teachingbubble-footer¦Action buttons
646
+ Button colors automatically inverted inside .flm-teachingbubble
647
+ @hovercard
648
+ ::html
649
+ <<<
650
+ <span data-hovercard-id="hc1" style="cursor:pointer">Hover me</span> <div class="flm-hovercard" id="hc1"> <div class="flm-hovercard-compact"> <div class="flm-hovercard-title">Jane Doe</div> <div class="flm-hovercard-subtitle">Engineer</div> </div> <div class="flm-hovercard-expanded"> <div class="flm-hovercard-body">Extended details...</div> </div> </div>
651
+ >>>
652
+ :_cols=class¦effect
653
+ flm-hovercard¦Positioned card
654
+ :_cols=attribute¦effect
655
+ data-hovercard-id="id"¦On host — links hovercard
656
+ :_cols=child_class¦element
657
+ flm-hovercard-compact¦First phase (shows after 500ms)
658
+ flm-hovercard-expanded¦Second phase (shows after 1500ms total)
659
+ flm-hovercard-title¦Title
660
+ flm-hovercard-subtitle¦Subtitle
661
+ flm-hovercard-body¦Body text
662
+ Card stays open while mouse
663
+ @coachmark
664
+ ::html
665
+ <<<
666
+ <div class="flm-coachmark" data-teachingbubble-toggle="tb1"> <div class="flm-coachmark-dot"></div> <div class="flm-coachmark-ring"></div> </div> <div class="flm-teachingbubble" id="tb1">...</div>
667
+ >>>
668
+ :_cols=class¦effect
669
+ flm-coachmark¦Pulsing beacon
670
+ flm-coachmark--hidden¦Hidden (auto-set when bubble dismissed)
671
+ flm-coachmark--dark¦Dark theme variant
672
+ :_cols=attribute¦effect
673
+ data-teachingbubble-toggle="id"¦Click opens linked TeachingBubble
674
+ :_cols=child_class¦element
675
+ flm-coachmark-dot¦Central dot
676
+ flm-coachmark-ring¦Pulsing ring animation
677
+ JS uses MutationObserver auto-hide beacon when bubble dismissed
678
+ @datepicker
679
+ ::html
680
+ <<<
681
+ <div class="flm-datepicker" data-min-date="01/01/2026" data-max-date="12/31/2026"> <label class="flm-label" for="dp1">Date</label> <div class="flm-datepicker-wrapper"> <input class="flm-datepicker-input" id="dp1" placeholder="MM/DD/YYYY"> <button class="flm-datepicker-icon" data-icon="Calendar" aria-label="Open calendar"></button> </div> </div>
682
+ >>>
683
+ :_cols=class¦effect
684
+ flm-datepicker¦Container
685
+ flm-datepicker--disabled¦Disabled state
686
+ flm-datepicker--error¦Error border
687
+ :_cols=attribute¦effect
688
+ data-min-date="MM/DD/YYYY"¦Minimum selectable date
689
+ data-max-date="MM/DD/YYYY"¦Maximum selectable date
690
+ :_cols=child_class¦element
691
+ flm-datepicker-wrapper¦Input + icon row
692
+ flm-datepicker-input¦Text input
693
+ flm-datepicker-icon¦Calendar toggle button
694
+ flm-datepicker-error¦Error message
695
+ JS generates 42-cell calendar grid open. Month nav via prev/next buttons. Day click formats as MM/DD/YYYY
696
+ @tagpicker
697
+ ::html
698
+ <<<
699
+ <div class="flm-tagpicker"> <label class="flm-label">Tags</label> <div class="flm-tagpicker-well"> <input class="flm-tagpicker-input" placeholder="Add tags..."> </div> <div class="flm-tagpicker-listbox"> <div class="flm-tagpicker-option" data-value="react">React</div> <div class="flm-tagpicker-option" data-value="vue">Vue</div> </div> </div>
700
+ >>>
701
+ PeoplePicker variant:
702
+ ::html
703
+ <<<
704
+ <div class="flm-tagpicker flm-tagpicker--people"> <label class="flm-label">People</label> <div class="flm-tagpicker-well"> <input class="flm-tagpicker-input" placeholder="Search people..."> </div> <div class="flm-tagpicker-listbox"> <div class="flm-tagpicker-option" data-value="jane" data-initials="JD" data-secondary="Engineer"> <span class="flm-tagpicker-option-coin">JD</span> <span class="flm-tagpicker-option-details"> <span class="flm-tagpicker-option-name">Jane Doe</span> <span class="flm-tagpicker-option-secondary">Engineer</span> </span> </div> </div> </div>
705
+ >>>
706
+ :_cols=class¦effect
707
+ flm-tagpicker¦Container
708
+ flm-tagpicker--people¦PeoplePicker variant (shows persona coins)
709
+ flm-tagpicker--disabled¦Disabled state
710
+ flm-tagpicker--error¦Error border
711
+ :_cols=attribute¦effect
712
+ data-max-tags="N"¦Limits number selected tags
713
+ data-value="val"¦On .flm-tagpicker-option — option value
714
+ data-initials="XX"¦On option — initials persona coin (people variant)
715
+ data-secondary="text"¦On option — secondary text (people variant)
716
+ data-selected-values¦Auto-maintained CSV selected values root
717
+ :_cols=child_class¦element
718
+ flm-tagpicker-well¦Input area holding chips + input
719
+ flm-tagpicker-input¦Text input
720
+ flm-tagpicker-chip¦Selected tag pill
721
+ flm-tagpicker-chip-text¦Chip label text
722
+ flm-tagpicker-chip-remove¦Chip remove (X) button
723
+ flm-tagpicker-chip-coin¦Small persona coin chip (people variant)
724
+ flm-tagpicker-listbox¦Options dropdown
725
+ flm-tagpicker-option¦Individual option
726
+ flm-tagpicker-option--selected¦Already-picked option (grayed out)
727
+ flm-tagpicker-option-coin¦Persona coin option (people variant)
728
+ flm-tagpicker-option-details¦Name + secondary text wrapper
729
+ flm-tagpicker-option-name¦Primary name
730
+ flm-tagpicker-option-secondary¦Secondary text
731
+ flm-tagpicker-error¦Error message
732
+ :js=type-to-filter, keyboard nav (ArrowUp/Down/Enter/Escape), Backspace removes last chip, click X removes chip, click-outside dismiss, flip-above.
733
+ @overflowset
734
+ ::html
735
+ <<<
736
+ <div class="flm-overflowset"> <div class="flm-overflowset-items"> <button class="flm-overflowset-item" data-label="New" data-icon="Add">New</button> <button class="flm-overflowset-item" data-label="Edit" data-icon="Edit">Edit</button> </div> <button class="flm-overflowset-overflow" aria-label="More items">...</button> <div class="flm-overflowset-far"> <button class="flm-overflowset-item">Settings</button> </div> </div>
737
+ >>>
738
+ :_cols=class¦effect
739
+ flm-overflowset¦Container (flex row, overflow hidden)
740
+ flm-overflowset--has-overflow¦Auto-set when items overflow (shows "..." button)
741
+ flm-overflowset-items¦Flex row holding items
742
+ flm-overflowset-item¦Individual item (flex-shrink: 0)
743
+ flm-overflowset-item--hidden¦Hidden JS (overflowed)
744
+ flm-overflowset-overflow¦"..." overflow button
745
+ flm-overflowset-far¦Right-side items (never overflow, margin-left: auto)
746
+ :_cols=attribute¦effect
747
+ data-overflow-order="N"¦Higher N overflows first (priority control)
748
+ data-label="text"¦Label shown overflow menu
749
+ data-icon="Name"¦Icon shown overflow menu
750
+ :js=ResizeObserver measures available width, hides items that don't fit, builds a ContextMenu for hidden items. Clicking a menu item proxies the original item's click.
751
+ @timepicker
752
+ ::html
753
+ <<<
754
+ <div class="flm-timepicker" data-increment="30" data-use-12h data-min-time="09:00" data-max-time="17:00"> <label class="flm-label" for="tp1">Time</label> <div class="flm-timepicker-wrapper"> <input class="flm-timepicker-input" id="tp1" placeholder="Select a time..."> <button class="flm-timepicker-icon" data-icon="Clock" aria-label="Open time picker"></button> </div> </div>
755
+ >>>
756
+ :_cols=class¦effect
757
+ flm-timepicker¦Container
758
+ flm-timepicker--disabled¦Disabled state
759
+ flm-timepicker--error¦Error border
760
+ :_cols=attribute¦effect
761
+ data-increment="30"¦Minute increment (default 30)
762
+ data-use-12h¦12-hour format AM/PM (default 24h)
763
+ data-min-time="HH:MM"¦Earliest available time (24h format)
764
+ data-max-time="HH:MM"¦Latest available time (24h format)
765
+ :_cols=child_class¦element
766
+ flm-timepicker-wrapper¦Input + icon row
767
+ flm-timepicker-input¦Text input (typeable, filters options)
768
+ flm-timepicker-icon¦Clock toggle button
769
+ flm-timepicker-error¦Error message
770
+ JS generates time-slot options configured increment. Input text filters list. Arrow keys navigate, Enter selects, Escape closes. Auto-scrolls selected or nearest-to-current-time option open
771
+ @css_custom_properties
772
+ Use variables inline style attributes or demo-specific <style> blocks. automatically adapt light/dark theme. Do not use Fluent UI v2 variable names (e.g. --colorNeutralForeground1) — not defined library
773
+ @semantic_colors_theme-aware
774
+ Use page layout, custom containers, and demo styling:
775
+ :_cols=variable¦purpose
776
+ --bodyBackground¦Page / container background
777
+ --bodyStandoutBackground¦Slightly offset background (sidebars, cards)
778
+ --bodyFrameBackground¦Frame / shell background
779
+ --bodyFrameDivider¦Border frame sections
780
+ --bodyDivider¦General divider lines
781
+ --bodyText¦Primary text color
782
+ --bodyTextChecked¦Text checked/selected background
783
+ --bodySubtext¦Secondary / caption text
784
+ --disabledText¦Disabled text
785
+ --errorText¦Error text
786
+ --successText¦Success text
787
+ --link¦Link color
788
+ --linkHovered¦Link hover color
789
+ --overlayBackground¦Semi-transparent backdrop
790
+ --defaultStateBackground¦Default surface background
791
+ --focusBorder¦Focus outline color
792
+ @palette_colors
793
+ Raw color values — not theme-aware light and dark):
794
+ :_cols=variable¦value
795
+ --themePrimary¦#0078d4 (brand blue)
796
+ --themeDark¦#005a9e
797
+ --themeDarkAlt¦#106ebe
798
+ --themeDarker¦#004578
799
+ --themeSecondary¦#2b88d8
800
+ --themeTertiary¦#71afe5
801
+ --themeLight¦#c7e0f4
802
+ --themeLighter¦#deecf9
803
+ --themeLighterAlt¦#eff6fc
804
+ --black¦#000000
805
+ --white¦#ffffff
806
+ --neutralPrimary¦#323130
807
+ --neutralSecondary¦#605e5c
808
+ --neutralTertiary¦#a19f9d
809
+ --neutralLight¦#edebe9
810
+ --neutralLighter¦#f3f2f1
811
+ --neutralLighterAlt¦#faf9f8
812
+ --red¦#e81123
813
+ --redDark¦#a4262c
814
+ --orange¦#d83b01
815
+ --yellow¦#ffb900
816
+ --green¦#107c10
817
+ --teal¦#008272
818
+ --blue¦#0078d4
819
+ --purple¦#5c2d91
820
+ @status_backgrounds_theme-aware
821
+ :_cols=variable¦purpose
822
+ --infoBackground¦Info message bar / banner
823
+ --errorBackground¦Error state
824
+ --warningBackground¦Warning state
825
+ --severeWarningBackground¦Severe warning state
826
+ --successBackground¦Success state
827
+ --blockingBackground¦Blocking state
828
+ @typography
829
+ :_cols=variable¦value
830
+ --fontFamily¦Segoe UI system stack
831
+ --fontFamilyMonospace¦Cascadia Code / Consolas
832
+ --fontSizeTiny¦10px
833
+ --fontSizeSmall¦12px
834
+ --fontSizeMedium¦14px
835
+ --fontSizeMediumPlus¦16px
836
+ --fontSizeLarge¦18px
837
+ --fontSizeXLarge¦20px
838
+ --fontSizeXXLarge¦28px
839
+ --fontSizeSuperLarge¦42px
840
+ --fontSizeMega¦68px
841
+ --fontWeightRegular¦400
842
+ --fontWeightSemibold¦600
843
+ --fontWeightBold¦700
844
+ @spacing
845
+ :_cols=variable¦value
846
+ --spacingS2¦4px
847
+ --spacingS1¦8px
848
+ --spacingM¦16px
849
+ --spacingL1¦20px
850
+ --spacingL2¦32px
851
+ @effects
852
+ :_cols=variable¦purpose
853
+ --elevation4¦Subtle shadow (cards)
854
+ --elevation8¦Medium shadow (dropdowns, callouts)
855
+ --elevation16¦Prominent shadow (dialogs, panels)
856
+ --elevation64¦Dramatic shadow
857
+ --roundedCorner2¦2px border radius
858
+ --roundedCorner4¦4px border radius
859
+ --roundedCorner6¦6px border radius
860
+ @motion
861
+ :_cols=variable¦value
862
+ --duration1¦100ms
863
+ --duration2¦200ms
864
+ --duration3¦300ms
865
+ --duration4¦400ms
866
+ --easeAccelerate¦cubic-bezier(0.9, 0.1, 1, 0.2)
867
+ --easeDecelerate¦cubic-bezier(0.1, 0.9, 0.2, 1)
868
+ --easeStandard¦cubic-bezier(0.8, 0, 0.2, 1)