@zeix/le-truc 0.15.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 (406) hide show
  1. package/.ai-context.md +234 -0
  2. package/.cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc +111 -0
  3. package/.editorconfig +12 -0
  4. package/.github/copilot-instructions.md +62 -0
  5. package/.github/workflows/codeql.yml +108 -0
  6. package/.github/workflows/static.yml +43 -0
  7. package/.prettierrc +17 -0
  8. package/CLAUDE.md +215 -0
  9. package/CODE_OF_CONDUCT.md +128 -0
  10. package/CONTRIBUTING.md +160 -0
  11. package/LICENSE +21 -0
  12. package/README.md +474 -0
  13. package/biome.json +295 -0
  14. package/bun.lock +239 -0
  15. package/docs/about.html +105 -0
  16. package/docs/assets/main.css +1 -0
  17. package/docs/assets/main.js +10 -0
  18. package/docs/assets/main.js.map +66 -0
  19. package/docs/components.html +293 -0
  20. package/docs/data-flow.html +308 -0
  21. package/docs/examples/basic-button.html +367 -0
  22. package/docs/examples/basic-counter.html +188 -0
  23. package/docs/examples/basic-hello.html +138 -0
  24. package/docs/examples/basic-number.html +271 -0
  25. package/docs/examples/basic-pluralize.html +214 -0
  26. package/docs/examples/card-callout.html +152 -0
  27. package/docs/examples/card-mediaqueries.html +138 -0
  28. package/docs/examples/context-media.html +198 -0
  29. package/docs/examples/empty.html +37 -0
  30. package/docs/examples/form-checkbox.html +233 -0
  31. package/docs/examples/form-combobox.html +420 -0
  32. package/docs/examples/form-listbox.html +434 -0
  33. package/docs/examples/form-radiogroup.html +296 -0
  34. package/docs/examples/form-spinbutton.html +402 -0
  35. package/docs/examples/form-textbox.html +361 -0
  36. package/docs/examples/layout.html +67 -0
  37. package/docs/examples/module-carousel.html +552 -0
  38. package/docs/examples/module-catalog.html +241 -0
  39. package/docs/examples/module-codeblock.html +270 -0
  40. package/docs/examples/module-dialog.html +343 -0
  41. package/docs/examples/module-lazyload.html +289 -0
  42. package/docs/examples/module-list.html +197 -0
  43. package/docs/examples/module-pagination.html +283 -0
  44. package/docs/examples/module-scrollarea.html +447 -0
  45. package/docs/examples/module-tabgroup.html +526 -0
  46. package/docs/examples/module-todo.html +367 -0
  47. package/docs/examples/module-with-type.html +63 -0
  48. package/docs/examples/nested-components.html +88 -0
  49. package/docs/examples/recursive.html +56 -0
  50. package/docs/examples/simple-text.html +39 -0
  51. package/docs/examples/snippet.html +93 -0
  52. package/docs/examples/with-styles.html +75 -0
  53. package/docs/getting-started.html +143 -0
  54. package/docs/index.html +112 -0
  55. package/docs/sitemap.xml +28 -0
  56. package/docs/styling.html +160 -0
  57. package/docs/sw.js +112 -0
  58. package/docs-src/api/README.md +478 -0
  59. package/docs-src/api/_media/LICENSE +21 -0
  60. package/docs-src/api/classes/CircularDependencyError.md +299 -0
  61. package/docs-src/api/classes/CircularMutationError.md +301 -0
  62. package/docs-src/api/classes/ContextRequestEvent.md +590 -0
  63. package/docs-src/api/classes/DependencyTimeoutError.md +301 -0
  64. package/docs-src/api/classes/InvalidCallbackError.md +303 -0
  65. package/docs-src/api/classes/InvalidComponentNameError.md +295 -0
  66. package/docs-src/api/classes/InvalidCustomElementError.md +301 -0
  67. package/docs-src/api/classes/InvalidEffectsError.md +301 -0
  68. package/docs-src/api/classes/InvalidPropertyNameError.md +307 -0
  69. package/docs-src/api/classes/InvalidReactivesError.md +307 -0
  70. package/docs-src/api/classes/InvalidSignalValueError.md +303 -0
  71. package/docs-src/api/classes/MissingElementError.md +307 -0
  72. package/docs-src/api/classes/NullishSignalValueError.md +299 -0
  73. package/docs-src/api/classes/StoreKeyExistsError.md +303 -0
  74. package/docs-src/api/classes/StoreKeyRangeError.md +299 -0
  75. package/docs-src/api/classes/StoreKeyReadonlyError.md +303 -0
  76. package/docs-src/api/functions/asBoolean.md +21 -0
  77. package/docs-src/api/functions/asEnum.md +31 -0
  78. package/docs-src/api/functions/asInteger.md +39 -0
  79. package/docs-src/api/functions/asJSON.md +49 -0
  80. package/docs-src/api/functions/asNumber.md +37 -0
  81. package/docs-src/api/functions/asString.md +37 -0
  82. package/docs-src/api/functions/createCollection.md +83 -0
  83. package/docs-src/api/functions/createSensor.md +71 -0
  84. package/docs-src/api/functions/dangerouslySetInnerHTML.md +48 -0
  85. package/docs-src/api/functions/defineComponent.md +65 -0
  86. package/docs-src/api/functions/isCollection.md +37 -0
  87. package/docs-src/api/functions/isParser.md +41 -0
  88. package/docs-src/api/functions/match.md +47 -0
  89. package/docs-src/api/functions/on.md +58 -0
  90. package/docs-src/api/functions/pass.md +53 -0
  91. package/docs-src/api/functions/provideContexts.md +47 -0
  92. package/docs-src/api/functions/read.md +47 -0
  93. package/docs-src/api/functions/requestContext.md +51 -0
  94. package/docs-src/api/functions/resolve.md +40 -0
  95. package/docs-src/api/functions/runEffects.md +51 -0
  96. package/docs-src/api/functions/runElementEffects.md +57 -0
  97. package/docs-src/api/functions/schedule.md +33 -0
  98. package/docs-src/api/functions/setAttribute.md +48 -0
  99. package/docs-src/api/functions/setProperty.md +52 -0
  100. package/docs-src/api/functions/setStyle.md +48 -0
  101. package/docs-src/api/functions/setText.md +42 -0
  102. package/docs-src/api/functions/show.md +42 -0
  103. package/docs-src/api/functions/toSignal.md +37 -0
  104. package/docs-src/api/functions/toggleAttribute.md +48 -0
  105. package/docs-src/api/functions/toggleClass.md +48 -0
  106. package/docs-src/api/functions/updateElement.md +53 -0
  107. package/docs-src/api/globals.md +131 -0
  108. package/docs-src/api/type-aliases/Cleanup.md +27 -0
  109. package/docs-src/api/type-aliases/Collection.md +91 -0
  110. package/docs-src/api/type-aliases/CollectionListener.md +27 -0
  111. package/docs-src/api/type-aliases/Component.md +17 -0
  112. package/docs-src/api/type-aliases/ComponentProp.md +11 -0
  113. package/docs-src/api/type-aliases/ComponentProps.md +11 -0
  114. package/docs-src/api/type-aliases/ComponentSetup.md +31 -0
  115. package/docs-src/api/type-aliases/ComponentUI.md +27 -0
  116. package/docs-src/api/type-aliases/Computed.md +49 -0
  117. package/docs-src/api/type-aliases/ComputedCallback.md +29 -0
  118. package/docs-src/api/type-aliases/Context.md +33 -0
  119. package/docs-src/api/type-aliases/ContextType.md +19 -0
  120. package/docs-src/api/type-aliases/DangerouslySetInnerHTMLOptions.md +27 -0
  121. package/docs-src/api/type-aliases/DiffResult.md +61 -0
  122. package/docs-src/api/type-aliases/Effect.md +35 -0
  123. package/docs-src/api/type-aliases/EffectCallback.md +23 -0
  124. package/docs-src/api/type-aliases/Effects.md +21 -0
  125. package/docs-src/api/type-aliases/ElementEffects.md +21 -0
  126. package/docs-src/api/type-aliases/ElementFromKey.md +21 -0
  127. package/docs-src/api/type-aliases/ElementQueries.md +27 -0
  128. package/docs-src/api/type-aliases/ElementUpdater.md +131 -0
  129. package/docs-src/api/type-aliases/EventHandler.md +31 -0
  130. package/docs-src/api/type-aliases/EventType.md +17 -0
  131. package/docs-src/api/type-aliases/Fallback.md +21 -0
  132. package/docs-src/api/type-aliases/Initializers.md +21 -0
  133. package/docs-src/api/type-aliases/LooseReader.md +31 -0
  134. package/docs-src/api/type-aliases/MatchHandlers.md +77 -0
  135. package/docs-src/api/type-aliases/MaybeCleanup.md +23 -0
  136. package/docs-src/api/type-aliases/MaybeSignal.md +17 -0
  137. package/docs-src/api/type-aliases/Parser.md +39 -0
  138. package/docs-src/api/type-aliases/ParserOrFallback.md +21 -0
  139. package/docs-src/api/type-aliases/PassedProp.md +25 -0
  140. package/docs-src/api/type-aliases/PassedProps.md +21 -0
  141. package/docs-src/api/type-aliases/Reactive.md +25 -0
  142. package/docs-src/api/type-aliases/Reader.md +31 -0
  143. package/docs-src/api/type-aliases/ReservedWords.md +11 -0
  144. package/docs-src/api/type-aliases/ResolveResult.md +29 -0
  145. package/docs-src/api/type-aliases/SensorEvents.md +25 -0
  146. package/docs-src/api/type-aliases/Signal.md +41 -0
  147. package/docs-src/api/type-aliases/State.md +85 -0
  148. package/docs-src/api/type-aliases/Store.md +29 -0
  149. package/docs-src/api/type-aliases/UI.md +11 -0
  150. package/docs-src/api/type-aliases/UnknownContext.md +13 -0
  151. package/docs-src/api/variables/CONTEXT_REQUEST.md +11 -0
  152. package/docs-src/api/variables/UNSET.md +23 -0
  153. package/docs-src/api/variables/batch.md +25 -0
  154. package/docs-src/api/variables/createComputed.md +41 -0
  155. package/docs-src/api/variables/createEffect.md +35 -0
  156. package/docs-src/api/variables/createState.md +37 -0
  157. package/docs-src/api/variables/createStore.md +42 -0
  158. package/docs-src/api/variables/diff.md +43 -0
  159. package/docs-src/api/variables/isAbortError.md +33 -0
  160. package/docs-src/api/variables/isAsyncFunction.md +39 -0
  161. package/docs-src/api/variables/isComputed.md +37 -0
  162. package/docs-src/api/variables/isEqual.md +49 -0
  163. package/docs-src/api/variables/isFunction.md +39 -0
  164. package/docs-src/api/variables/isMutableSignal.md +37 -0
  165. package/docs-src/api/variables/isNumber.md +33 -0
  166. package/docs-src/api/variables/isRecord.md +39 -0
  167. package/docs-src/api/variables/isRecordOrArray.md +39 -0
  168. package/docs-src/api/variables/isSignal.md +37 -0
  169. package/docs-src/api/variables/isState.md +37 -0
  170. package/docs-src/api/variables/isStore.md +37 -0
  171. package/docs-src/api/variables/isString.md +33 -0
  172. package/docs-src/api/variables/isSymbol.md +33 -0
  173. package/docs-src/api/variables/toError.md +33 -0
  174. package/docs-src/api/variables/valueString.md +33 -0
  175. package/docs-src/includes/menu.html +44 -0
  176. package/docs-src/pages/about.md +89 -0
  177. package/docs-src/pages/components.md +437 -0
  178. package/docs-src/pages/data-flow.md +449 -0
  179. package/docs-src/pages/getting-started.md +170 -0
  180. package/docs-src/pages/index.md +98 -0
  181. package/docs-src/pages/styling.md +165 -0
  182. package/eslint.config.js +64 -0
  183. package/examples/_common/clear.ts +49 -0
  184. package/examples/_common/fetch.ts +160 -0
  185. package/examples/_common/focus.ts +45 -0
  186. package/examples/_common/highlight.ts +5 -0
  187. package/examples/_global.css +463 -0
  188. package/examples/basic-button/basic-button.css +176 -0
  189. package/examples/basic-button/basic-button.html +46 -0
  190. package/examples/basic-button/basic-button.spec.ts +160 -0
  191. package/examples/basic-button/basic-button.ts +45 -0
  192. package/examples/basic-button/copyToClipboard.ts +37 -0
  193. package/examples/basic-counter/basic-counter.css +21 -0
  194. package/examples/basic-counter/basic-counter.html +24 -0
  195. package/examples/basic-counter/basic-counter.spec.ts +85 -0
  196. package/examples/basic-counter/basic-counter.ts +43 -0
  197. package/examples/basic-hello/basic-hello.html +34 -0
  198. package/examples/basic-hello/basic-hello.spec.ts +110 -0
  199. package/examples/basic-hello/basic-hello.ts +36 -0
  200. package/examples/basic-number/basic-number.html +79 -0
  201. package/examples/basic-number/basic-number.spec.ts +175 -0
  202. package/examples/basic-number/basic-number.ts +124 -0
  203. package/examples/basic-pluralize/basic-pluralize.html +64 -0
  204. package/examples/basic-pluralize/basic-pluralize.spec.ts +258 -0
  205. package/examples/basic-pluralize/basic-pluralize.ts +82 -0
  206. package/examples/card-callout/card-callout.css +79 -0
  207. package/examples/card-callout/card-callout.html +5 -0
  208. package/examples/card-mediaqueries/card-mediaqueries.html +29 -0
  209. package/examples/card-mediaqueries/card-mediaqueries.spec.ts +300 -0
  210. package/examples/card-mediaqueries/card-mediaqueries.ts +41 -0
  211. package/examples/context-media/context-media.html +3 -0
  212. package/examples/context-media/context-media.ts +127 -0
  213. package/examples/form-checkbox/form-checkbox.css +70 -0
  214. package/examples/form-checkbox/form-checkbox.html +13 -0
  215. package/examples/form-checkbox/form-checkbox.spec.ts +357 -0
  216. package/examples/form-checkbox/form-checkbox.ts +50 -0
  217. package/examples/form-checkbox/vanilla-checkbox.ts +101 -0
  218. package/examples/form-combobox/form-combobox.css +118 -0
  219. package/examples/form-combobox/form-combobox.html +74 -0
  220. package/examples/form-combobox/form-combobox.spec.ts +977 -0
  221. package/examples/form-combobox/form-combobox.ts +128 -0
  222. package/examples/form-listbox/form-listbox.css +71 -0
  223. package/examples/form-listbox/form-listbox.html +67 -0
  224. package/examples/form-listbox/form-listbox.spec.ts +1050 -0
  225. package/examples/form-listbox/form-listbox.ts +196 -0
  226. package/examples/form-listbox/mocks/timezones.json +495 -0
  227. package/examples/form-radiogroup/form-radiogroup.css +87 -0
  228. package/examples/form-radiogroup/form-radiogroup.html +51 -0
  229. package/examples/form-radiogroup/form-radiogroup.spec.ts +515 -0
  230. package/examples/form-radiogroup/form-radiogroup.ts +58 -0
  231. package/examples/form-spinbutton/form-spinbutton.css +95 -0
  232. package/examples/form-spinbutton/form-spinbutton.html +96 -0
  233. package/examples/form-spinbutton/form-spinbutton.spec.ts +688 -0
  234. package/examples/form-spinbutton/form-spinbutton.ts +111 -0
  235. package/examples/form-textbox/form-textbox.css +104 -0
  236. package/examples/form-textbox/form-textbox.html +53 -0
  237. package/examples/form-textbox/form-textbox.spec.ts +542 -0
  238. package/examples/form-textbox/form-textbox.ts +104 -0
  239. package/examples/main.css +22 -0
  240. package/examples/main.ts +23 -0
  241. package/examples/module-carousel/module-carousel.css +113 -0
  242. package/examples/module-carousel/module-carousel.html +208 -0
  243. package/examples/module-carousel/module-carousel.spec.ts +523 -0
  244. package/examples/module-carousel/module-carousel.ts +131 -0
  245. package/examples/module-catalog/module-catalog.css +22 -0
  246. package/examples/module-catalog/module-catalog.html +82 -0
  247. package/examples/module-catalog/module-catalog.spec.ts +396 -0
  248. package/examples/module-catalog/module-catalog.ts +37 -0
  249. package/examples/module-codeblock/module-codeblock.css +95 -0
  250. package/examples/module-codeblock/module-codeblock.html +28 -0
  251. package/examples/module-codeblock/module-codeblock.ts +47 -0
  252. package/examples/module-demo/module-demo.css +13 -0
  253. package/examples/module-dialog/module-dialog.css +96 -0
  254. package/examples/module-dialog/module-dialog.html +66 -0
  255. package/examples/module-dialog/module-dialog.spec.ts +557 -0
  256. package/examples/module-dialog/module-dialog.ts +81 -0
  257. package/examples/module-lazyload/mocks/empty.html +1 -0
  258. package/examples/module-lazyload/mocks/module-with-type.html +27 -0
  259. package/examples/module-lazyload/mocks/nested-components.html +52 -0
  260. package/examples/module-lazyload/mocks/recursive.html +20 -0
  261. package/examples/module-lazyload/mocks/simple-text.html +3 -0
  262. package/examples/module-lazyload/mocks/snippet.html +57 -0
  263. package/examples/module-lazyload/mocks/with-styles.html +39 -0
  264. package/examples/module-lazyload/module-lazyload.html +132 -0
  265. package/examples/module-lazyload/module-lazyload.spec.ts +734 -0
  266. package/examples/module-lazyload/module-lazyload.ts +89 -0
  267. package/examples/module-list/module-list.html +30 -0
  268. package/examples/module-list/module-list.spec.ts +592 -0
  269. package/examples/module-list/module-list.ts +99 -0
  270. package/examples/module-pagination/module-pagination.css +79 -0
  271. package/examples/module-pagination/module-pagination.html +16 -0
  272. package/examples/module-pagination/module-pagination.spec.ts +701 -0
  273. package/examples/module-pagination/module-pagination.ts +88 -0
  274. package/examples/module-scrollarea/module-scrollarea.css +77 -0
  275. package/examples/module-scrollarea/module-scrollarea.html +189 -0
  276. package/examples/module-scrollarea/module-scrollarea.spec.ts +445 -0
  277. package/examples/module-scrollarea/module-scrollarea.ts +81 -0
  278. package/examples/module-tabgroup/module-tabgroup.css +55 -0
  279. package/examples/module-tabgroup/module-tabgroup.html +269 -0
  280. package/examples/module-tabgroup/module-tabgroup.spec.ts +631 -0
  281. package/examples/module-tabgroup/module-tabgroup.ts +102 -0
  282. package/examples/module-toc/module-toc.css +34 -0
  283. package/examples/module-todo/module-todo.css +84 -0
  284. package/examples/module-todo/module-todo.html +92 -0
  285. package/examples/module-todo/module-todo.spec.ts +528 -0
  286. package/examples/module-todo/module-todo.ts +91 -0
  287. package/examples/section-hero/section-hero.css +37 -0
  288. package/examples/section-menu/section-menu.css +81 -0
  289. package/examples/server.ts +95 -0
  290. package/examples/test-setup.md +314 -0
  291. package/index.dev.js +1688 -0
  292. package/index.dev.ts +127 -0
  293. package/index.js +3 -0
  294. package/index.js.map +42 -0
  295. package/index.ts +127 -0
  296. package/package.json +64 -0
  297. package/playwright.config.ts +31 -0
  298. package/server/BUILD_SYSTEM.md +428 -0
  299. package/server/SERVER.md +286 -0
  300. package/server/build.ts +91 -0
  301. package/server/config.ts +130 -0
  302. package/server/effects/api.ts +28 -0
  303. package/server/effects/css.ts +31 -0
  304. package/server/effects/examples.ts +109 -0
  305. package/server/effects/js.ts +32 -0
  306. package/server/effects/menu.ts +34 -0
  307. package/server/effects/pages.ts +178 -0
  308. package/server/effects/service-worker.ts +57 -0
  309. package/server/effects/sitemap.ts +27 -0
  310. package/server/file-signals.ts +361 -0
  311. package/server/file-watcher.ts +77 -0
  312. package/server/io.ts +174 -0
  313. package/server/layout-engine.ts +470 -0
  314. package/server/layout-utils.ts +615 -0
  315. package/server/layouts/api.html +76 -0
  316. package/server/layouts/base.html +37 -0
  317. package/server/layouts/blog.html +115 -0
  318. package/server/layouts/example.html +104 -0
  319. package/server/layouts/overview.html +165 -0
  320. package/server/layouts/page.html +36 -0
  321. package/server/layouts/test.html +24 -0
  322. package/server/markdoc-helpers.ts +217 -0
  323. package/server/markdoc.config.ts +29 -0
  324. package/server/schema/callout.markdoc.ts +17 -0
  325. package/server/schema/carousel.markdoc.ts +118 -0
  326. package/server/schema/demo.markdoc.ts +74 -0
  327. package/server/schema/fence.markdoc.ts +84 -0
  328. package/server/schema/heading.markdoc.ts +23 -0
  329. package/server/schema/hero.markdoc.ts +59 -0
  330. package/server/schema/section.markdoc.ts +10 -0
  331. package/server/schema/slide.markdoc.ts +17 -0
  332. package/server/schema/source.markdoc.ts +53 -0
  333. package/server/schema/tabgroup.markdoc.ts +102 -0
  334. package/server/serve.ts +635 -0
  335. package/server/templates/README.md +352 -0
  336. package/server/templates/constants.ts +236 -0
  337. package/server/templates/fragments.ts +159 -0
  338. package/server/templates/hmr.ts +269 -0
  339. package/server/templates/menu.ts +33 -0
  340. package/server/templates/performance-hints.ts +94 -0
  341. package/server/templates/service-worker.ts +403 -0
  342. package/server/templates/sitemap.ts +57 -0
  343. package/server/templates/toc.ts +41 -0
  344. package/server/templates/utils.ts +378 -0
  345. package/src/component.ts +215 -0
  346. package/src/context.ts +156 -0
  347. package/src/effects/attribute.ts +82 -0
  348. package/src/effects/class.ts +28 -0
  349. package/src/effects/event.ts +67 -0
  350. package/src/effects/html.ts +60 -0
  351. package/src/effects/method.ts +57 -0
  352. package/src/effects/pass.ts +103 -0
  353. package/src/effects/property.ts +57 -0
  354. package/src/effects/style.ts +34 -0
  355. package/src/effects/text.ts +28 -0
  356. package/src/effects.ts +412 -0
  357. package/src/errors.ts +160 -0
  358. package/src/parsers/boolean.ts +14 -0
  359. package/src/parsers/json.ts +33 -0
  360. package/src/parsers/number.ts +55 -0
  361. package/src/parsers/string.ts +32 -0
  362. package/src/parsers.ts +90 -0
  363. package/src/scheduler.ts +47 -0
  364. package/src/signals/collection.ts +253 -0
  365. package/src/signals/sensor.ts +131 -0
  366. package/src/ui.ts +236 -0
  367. package/src/util.ts +187 -0
  368. package/tsconfig.json +34 -0
  369. package/types/examples/basic-button/basic-button.d.ts +16 -0
  370. package/types/examples/basic-hello/basic-hello.d.ts +18 -0
  371. package/types/index.d.ts +27 -0
  372. package/types/index.dev.d.ts +27 -0
  373. package/types/src/collection.d.ts +27 -0
  374. package/types/src/component.d.ts +32 -0
  375. package/types/src/context.d.ts +85 -0
  376. package/types/src/effects/attribute.d.ts +23 -0
  377. package/types/src/effects/callMethod.d.ts +23 -0
  378. package/types/src/effects/class.d.ts +13 -0
  379. package/types/src/effects/dangerouslySetInnerHTML.d.ts +18 -0
  380. package/types/src/effects/event.d.ts +18 -0
  381. package/types/src/effects/html.d.ts +17 -0
  382. package/types/src/effects/method.d.ts +22 -0
  383. package/types/src/effects/pass.d.ts +18 -0
  384. package/types/src/effects/property.d.ts +22 -0
  385. package/types/src/effects/setAttribute.d.ts +24 -0
  386. package/types/src/effects/setProperty.d.ts +23 -0
  387. package/types/src/effects/setStyle.d.ts +14 -0
  388. package/types/src/effects/setText.d.ts +13 -0
  389. package/types/src/effects/style.d.ts +13 -0
  390. package/types/src/effects/text.d.ts +12 -0
  391. package/types/src/effects/toggleClass.d.ts +14 -0
  392. package/types/src/effects.d.ts +153 -0
  393. package/types/src/errors.d.ts +99 -0
  394. package/types/src/events.d.ts +27 -0
  395. package/types/src/extractors.d.ts +23 -0
  396. package/types/src/parsers/boolean.d.ts +10 -0
  397. package/types/src/parsers/json.d.ts +13 -0
  398. package/types/src/parsers/number.d.ts +21 -0
  399. package/types/src/parsers/string.d.ts +19 -0
  400. package/types/src/parsers.d.ts +41 -0
  401. package/types/src/scheduler.d.ts +11 -0
  402. package/types/src/sensor.d.ts +27 -0
  403. package/types/src/signals/collection.d.ts +32 -0
  404. package/types/src/signals/sensor.d.ts +27 -0
  405. package/types/src/ui.d.ts +37 -0
  406. package/types/src/util.d.ts +65 -0
package/docs/examples/form-checkbox.html ADDED
@@ -0,0 +1,233 @@
1
+ <module-tabgroup>
2
+ <div role="tablist">
3
+ <button
4
+ type="button"
5
+ role="tab"
6
+ id="trigger_form-checkbox_html"
7
+ aria-controls="panel_form-checkbox_html"
8
+ aria-selected="false"
9
+ tabindex="-1"
10
+ >
11
+ HTML
12
+ </button><button
13
+ type="button"
14
+ role="tab"
15
+ id="trigger_form-checkbox_css"
16
+ aria-controls="panel_form-checkbox_css"
17
+ aria-selected="false"
18
+ tabindex="-1"
19
+ >
20
+ CSS
21
+ </button><button
22
+ type="button"
23
+ role="tab"
24
+ id="trigger_form-checkbox_ts"
25
+ aria-controls="panel_form-checkbox_ts"
26
+ aria-selected="true"
27
+ tabindex="0"
28
+ >
29
+ TypeScript
30
+ </button>
31
+ </div> <div
32
+ role="tabpanel"
33
+ id="panel_form-checkbox_html"
34
+ aria-labelledby="trigger_form-checkbox_html"
35
+ hidden
36
+ >
37
+ <module-codeblock
38
+ language="html"
39
+ copy-success="Copied!"
40
+ copy-error="Error trying to copy to clipboard!"
41
+ >
42
+ <p class="meta">
43
+ <span class="file">form-checkbox.html</span>
44
+ <span class="language">html</span>
45
+ </p>
46
+ <pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code><span class="line"><span style="color:#F8F8F2">&#x3C;</span><span style="color:#F92672">form-checkbox</span><span style="color:#F8F8F2">></span></span>
47
+ <span class="line"><span style="color:#F8F8F2"> &#x3C;</span><span style="color:#F92672">label</span><span style="color:#F8F8F2">></span></span>
48
+ <span class="line"><span style="color:#F8F8F2"> &#x3C;</span><span style="color:#F92672">input</span><span style="color:#A6E22E"> type</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"checkbox"</span><span style="color:#F8F8F2"> /></span></span>
49
+ <span class="line"><span style="color:#F8F8F2"> &#x3C;</span><span style="color:#F92672">span</span><span style="color:#A6E22E"> class</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"label"</span><span style="color:#F8F8F2">>Checkbox&#x3C;/</span><span style="color:#F92672">span</span><span style="color:#F8F8F2">></span></span>
50
+ <span class="line"><span style="color:#F8F8F2"> &#x3C;/</span><span style="color:#F92672">label</span><span style="color:#F8F8F2">></span></span>
51
+ <span class="line"><span style="color:#F8F8F2">&#x3C;/</span><span style="color:#F92672">form-checkbox</span><span style="color:#F8F8F2">></span></span>
52
+ <span class="line"></span>
53
+ <span class="line"><span style="color:#F8F8F2">&#x3C;</span><span style="color:#F92672">form-checkbox</span><span style="color:#A6E22E"> class</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"todo"</span><span style="color:#F8F8F2">></span></span>
54
+ <span class="line"><span style="color:#F8F8F2"> &#x3C;</span><span style="color:#F92672">label</span><span style="color:#F8F8F2">></span></span>
55
+ <span class="line"><span style="color:#F8F8F2"> &#x3C;</span><span style="color:#F92672">input</span><span style="color:#A6E22E"> type</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"checkbox"</span><span style="color:#A6E22E"> class</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"visually-hidden"</span><span style="color:#F8F8F2"> /></span></span>
56
+ <span class="line"><span style="color:#F8F8F2"> &#x3C;</span><span style="color:#F92672">span</span><span style="color:#A6E22E"> class</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"label"</span><span style="color:#F8F8F2">>Task&#x3C;/</span><span style="color:#F92672">span</span><span style="color:#F8F8F2">></span></span>
57
+ <span class="line"><span style="color:#F8F8F2"> &#x3C;/</span><span style="color:#F92672">label</span><span style="color:#F8F8F2">></span></span>
58
+ <span class="line"><span style="color:#F8F8F2">&#x3C;/</span><span style="color:#F92672">form-checkbox</span><span style="color:#F8F8F2">></span></span>
59
+ <span class="line"></span></code></pre>
60
+ <basic-button class="copy">
61
+ <button type="button" class="secondary small">
62
+ <span class="label">Copy</span>
63
+ </button>
64
+ </basic-button>
65
+ </module-codeblock>
66
+ </div>
67
+ <div
68
+ role="tabpanel"
69
+ id="panel_form-checkbox_css"
70
+ aria-labelledby="trigger_form-checkbox_css"
71
+ hidden
72
+ >
73
+ <module-codeblock
74
+ language="css"
75
+ copy-success="Copied!"
76
+ copy-error="Error trying to copy to clipboard!"
77
+ >
78
+ <p class="meta">
79
+ <span class="file">form-checkbox.css</span>
80
+ <span class="language">css</span>
81
+ </p>
82
+ <pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code><span class="line"><span style="color:#F92672">form-checkbox</span><span style="color:#F8F8F2"> {</span></span>
83
+ <span class="line"><span style="color:#66D9EF;font-style:italic"> flex-grow</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">1</span><span style="color:#F8F8F2">;</span></span>
84
+ <span class="line"><span style="color:#66D9EF;font-style:italic"> border-radius</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--space-xs);</span></span>
85
+ <span class="line"></span>
86
+ <span class="line"><span style="color:#F8F8F2"> &#x26;:has(:focus-visible) {</span></span>
87
+ <span class="line"><span style="color:#66D9EF;font-style:italic"> box-shadow</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">0</span><span style="color:#AE81FF"> 0</span><span style="color:#66D9EF"> var</span><span style="color:#F8F8F2">(--space-xxs) </span><span style="color:#AE81FF">2</span><span style="color:#F92672">px</span><span style="color:#66D9EF"> var</span><span style="color:#F8F8F2">(--color-selection);</span></span>
88
+ <span class="line"><span style="color:#F8F8F2"> }</span></span>
89
+ <span class="line"></span>
90
+ <span class="line"><span style="color:#F8F8F2"> &#x26; </span><span style="color:#F92672">input</span><span style="color:#A6E22E">:focus</span><span style="color:#F8F8F2"> {</span></span>
91
+ <span class="line"><span style="color:#66D9EF;font-style:italic"> outline</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">none</span><span style="color:#F8F8F2">;</span></span>
92
+ <span class="line"><span style="color:#66D9EF;font-style:italic"> box-shadow</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">none</span><span style="color:#F8F8F2">;</span></span>
93
+ <span class="line"><span style="color:#F8F8F2"> }</span></span>
94
+ <span class="line"></span>
95
+ <span class="line"><span style="color:#F8F8F2"> &#x26; </span><span style="color:#F92672">label</span><span style="color:#F8F8F2"> {</span></span>
96
+ <span class="line"><span style="color:#66D9EF;font-style:italic"> font-size</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--font-size-s);</span></span>
97
+ <span class="line"><span style="color:#F8F8F2"> }</span></span>
98
+ <span class="line"></span>
99
+ <span class="line"><span style="color:#F8F8F2"> &#x26;</span><span style="color:#A6E22E">.todo</span><span style="color:#F92672"> label</span><span style="color:#F8F8F2"> {</span></span>
100
+ <span class="line"><span style="color:#66D9EF;font-style:italic"> display</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">flex</span><span style="color:#F8F8F2">;</span></span>
101
+ <span class="line"><span style="color:#66D9EF;font-style:italic"> gap</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--space-s);</span></span>
102
+ <span class="line"><span style="color:#66D9EF;font-style:italic"> line-height</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--input-height);</span></span>
103
+ <span class="line"><span style="color:#66D9EF;font-style:italic"> cursor</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">pointer</span><span style="color:#F8F8F2">;</span></span>
104
+ <span class="line"></span>
105
+ <span class="line"><span style="color:#F8F8F2"> &#x26;::before {</span></span>
106
+ <span class="line"><span style="color:#F8F8F2"> display: </span><span style="color:#66D9EF">inline-block</span><span style="color:#F8F8F2">;</span></span>
107
+ <span class="line"><span style="color:#66D9EF;font-style:italic"> box-sizing</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">border-box</span><span style="color:#F8F8F2">;</span></span>
108
+ <span class="line"><span style="color:#66D9EF;font-style:italic"> content</span><span style="color:#F8F8F2">: </span><span style="color:#E6DB74">""</span><span style="color:#F8F8F2">;</span></span>
109
+ <span class="line"><span style="color:#66D9EF;font-style:italic"> font-size</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--font-size-l);</span></span>
110
+ <span class="line"><span style="color:#66D9EF;font-style:italic"> text-align</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">center</span><span style="color:#F8F8F2">;</span></span>
111
+ <span class="line"><span style="color:#66D9EF;font-style:italic"> width</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--input-height);</span></span>
112
+ <span class="line"><span style="color:#66D9EF;font-style:italic"> height</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--input-height);</span></span>
113
+ <span class="line"><span style="color:#66D9EF;font-style:italic"> border</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">1</span><span style="color:#F92672">px</span><span style="color:#66D9EF"> solid</span><span style="color:#66D9EF"> var</span><span style="color:#F8F8F2">(--color-border);</span></span>
114
+ <span class="line"><span style="color:#66D9EF;font-style:italic"> border-radius</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">100</span><span style="color:#F92672">%</span><span style="color:#F8F8F2">;</span></span>
115
+ <span class="line"><span style="color:#66D9EF;font-style:italic"> background-color</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-secondary);</span></span>
116
+ <span class="line"><span style="color:#F8F8F2"> }</span></span>
117
+ <span class="line"></span>
118
+ <span class="line"><span style="color:#F8F8F2"> &#x26;</span><span style="color:#A6E22E">:hover::before</span><span style="color:#F8F8F2"> {</span></span>
119
+ <span class="line"><span style="color:#66D9EF;font-style:italic"> background-color</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-secondary-hover);</span></span>
120
+ <span class="line"><span style="color:#66D9EF;font-style:italic"> opacity</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--opacity-solid);</span></span>
121
+ <span class="line"><span style="color:#F8F8F2"> }</span></span>
122
+ <span class="line"></span>
123
+ <span class="line"><span style="color:#F8F8F2"> &#x26;</span><span style="color:#A6E22E">:active::before</span><span style="color:#F8F8F2"> {</span></span>
124
+ <span class="line"><span style="color:#66D9EF;font-style:italic"> background-color</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-secondary-active);</span></span>
125
+ <span class="line"><span style="color:#F8F8F2"> }</span></span>
126
+ <span class="line"><span style="color:#F8F8F2"> }</span></span>
127
+ <span class="line"></span>
128
+ <span class="line"><span style="color:#F8F8F2"> &#x26;</span><span style="color:#A6E22E">.todo</span><span style="color:#F8F8F2">[</span><span style="color:#A6E22E">checked</span><span style="color:#F8F8F2">] </span><span style="color:#F92672">label</span><span style="color:#F8F8F2"> {</span></span>
129
+ <span class="line"><span style="color:#66D9EF;font-style:italic"> opacity</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--opacity-translucent);</span></span>
130
+ <span class="line"></span>
131
+ <span class="line"><span style="color:#F8F8F2"> &#x26; </span><span style="color:#66D9EF;font-style:italic">span</span><span style="color:#F8F8F2"> {</span></span>
132
+ <span class="line"><span style="color:#66D9EF;font-style:italic"> text-decoration</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">line-through</span><span style="color:#F8F8F2">;</span></span>
133
+ <span class="line"><span style="color:#F8F8F2"> }</span></span>
134
+ <span class="line"></span>
135
+ <span class="line"><span style="color:#F8F8F2"> &#x26;</span><span style="color:#A6E22E">::before</span><span style="color:#F8F8F2"> {</span></span>
136
+ <span class="line"><span style="color:#66D9EF;font-style:italic"> color</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-text-inverted);</span></span>
137
+ <span class="line"><span style="color:#66D9EF;font-style:italic"> background-color</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-success);</span></span>
138
+ <span class="line"><span style="color:#66D9EF;font-style:italic"> border-color</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-success-active);</span></span>
139
+ <span class="line"><span style="color:#66D9EF;font-style:italic"> text-shadow</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">0</span><span style="color:#AE81FF"> 0</span><span style="color:#66D9EF"> var</span><span style="color:#F8F8F2">(--space-xs) </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-success-active);</span></span>
140
+ <span class="line"><span style="color:#66D9EF;font-style:italic"> content</span><span style="color:#F8F8F2">: </span><span style="color:#E6DB74">"✓"</span><span style="color:#F8F8F2">;</span></span>
141
+ <span class="line"><span style="color:#F8F8F2"> }</span></span>
142
+ <span class="line"></span>
143
+ <span class="line"><span style="color:#F8F8F2"> &#x26;</span><span style="color:#A6E22E">:hover::before</span><span style="color:#F8F8F2"> {</span></span>
144
+ <span class="line"><span style="color:#66D9EF;font-style:italic"> background-color</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-success-hover);</span></span>
145
+ <span class="line"><span style="color:#F8F8F2"> }</span></span>
146
+ <span class="line"></span>
147
+ <span class="line"><span style="color:#F8F8F2"> &#x26;</span><span style="color:#A6E22E">:active::before</span><span style="color:#F8F8F2"> {</span></span>
148
+ <span class="line"><span style="color:#66D9EF;font-style:italic"> background-color</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-success-active);</span></span>
149
+ <span class="line"><span style="color:#F8F8F2"> }</span></span>
150
+ <span class="line"><span style="color:#F8F8F2"> }</span></span>
151
+ <span class="line"><span style="color:#F8F8F2">}</span></span>
152
+ <span class="line"></span></code></pre>
153
+ <basic-button class="copy">
154
+ <button type="button" class="secondary small">
155
+ <span class="label">Copy</span>
156
+ </button>
157
+ </basic-button>
158
+ </module-codeblock>
159
+ </div>
160
+ <div
161
+ role="tabpanel"
162
+ id="panel_form-checkbox_ts"
163
+ aria-labelledby="trigger_form-checkbox_ts"
164
+
165
+ >
166
+ <module-codeblock
167
+ language="ts"
168
+ copy-success="Copied!"
169
+ copy-error="Error trying to copy to clipboard!"
170
+ >
171
+ <p class="meta">
172
+ <span class="file">form-checkbox.ts</span>
173
+ <span class="language">ts</span>
174
+ </p>
175
+ <pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code><span class="line"><span style="color:#F92672">import</span><span style="color:#F8F8F2"> {</span></span>
176
+ <span class="line"><span style="color:#F8F8F2"> asString,</span></span>
177
+ <span class="line"><span style="color:#F92672"> type</span><span style="color:#F8F8F2"> Component,</span></span>
178
+ <span class="line"><span style="color:#F8F8F2"> createSensor,</span></span>
179
+ <span class="line"><span style="color:#F8F8F2"> defineComponent,</span></span>
180
+ <span class="line"><span style="color:#F8F8F2"> read,</span></span>
181
+ <span class="line"><span style="color:#F8F8F2"> setText,</span></span>
182
+ <span class="line"><span style="color:#F8F8F2"> toggleAttribute,</span></span>
183
+ <span class="line"><span style="color:#F8F8F2">} </span><span style="color:#F92672">from</span><span style="color:#E6DB74"> '../..'</span></span>
184
+ <span class="line"></span>
185
+ <span class="line"><span style="color:#F92672">export</span><span style="color:#66D9EF;font-style:italic"> type</span><span> </span><span style="color:#A6E22E;text-decoration:underline">FormCheckboxProps</span><span style="color:#F92672"> =</span><span style="color:#F8F8F2"> {</span></span>
186
+ <span class="line"><span style="color:#F92672"> readonly</span><span style="color:#F8F8F2"> checked</span><span style="color:#F92672">:</span><span style="color:#66D9EF;font-style:italic"> boolean</span></span>
187
+ <span class="line"><span style="color:#F8F8F2"> label</span><span style="color:#F92672">:</span><span style="color:#66D9EF;font-style:italic"> string</span></span>
188
+ <span class="line"><span style="color:#F8F8F2">}</span></span>
189
+ <span class="line"></span>
190
+ <span class="line"><span style="color:#66D9EF;font-style:italic">type</span><span> </span><span style="color:#A6E22E;text-decoration:underline">FormCheckboxUI</span><span style="color:#F92672"> =</span><span style="color:#F8F8F2"> {</span></span>
191
+ <span class="line"><span style="color:#F8F8F2"> checkbox</span><span style="color:#F92672">:</span><span> </span><span style="color:#A6E22E;text-decoration:underline">HTMLInputElement</span></span>
192
+ <span class="line"><span style="color:#F8F8F2"> label</span><span style="color:#F92672">?:</span><span> </span><span style="color:#A6E22E;text-decoration:underline">HTMLElement</span></span>
193
+ <span class="line"><span style="color:#F8F8F2">}</span></span>
194
+ <span class="line"></span>
195
+ <span class="line"><span style="color:#F92672">declare</span><span style="color:#F8F8F2"> global {</span></span>
196
+ <span class="line"><span style="color:#66D9EF;font-style:italic"> interface</span><span> </span><span style="color:#A6E22E;text-decoration:underline">HTMLElementTagNameMap</span><span style="color:#F8F8F2"> {</span></span>
197
+ <span class="line"><span style="color:#E6DB74"> 'form-checkbox'</span><span style="color:#F92672">:</span><span> </span><span style="color:#A6E22E;text-decoration:underline">Component</span><span style="color:#F8F8F2">&#x3C;</span><span style="color:#A6E22E;text-decoration:underline">FormCheckboxProps</span><span style="color:#F8F8F2">></span></span>
198
+ <span class="line"><span style="color:#F8F8F2"> }</span></span>
199
+ <span class="line"><span style="color:#F8F8F2">}</span></span>
200
+ <span class="line"></span>
201
+ <span class="line"><span style="color:#F92672">export</span><span style="color:#F92672"> default</span><span style="color:#A6E22E"> defineComponent</span><span style="color:#F8F8F2">&#x3C;</span><span style="color:#A6E22E;text-decoration:underline">FormCheckboxProps</span><span style="color:#F8F8F2">, </span><span style="color:#A6E22E;text-decoration:underline">FormCheckboxUI</span><span style="color:#F8F8F2">>(</span></span>
202
+ <span class="line"><span style="color:#E6DB74"> 'form-checkbox'</span><span style="color:#F8F8F2">,</span></span>
203
+ <span class="line"><span style="color:#F8F8F2"> {</span></span>
204
+ <span class="line"><span style="color:#F8F8F2"> checked: </span><span style="color:#A6E22E">createSensor</span><span style="color:#F8F8F2">(</span></span>
205
+ <span class="line"><span style="color:#A6E22E"> read</span><span style="color:#F8F8F2">(</span><span style="color:#FD971F;font-style:italic">ui</span><span style="color:#66D9EF;font-style:italic"> =></span><span style="color:#F8F8F2"> ui.checkbox.checked, </span><span style="color:#AE81FF">false</span><span style="color:#F8F8F2">),</span></span>
206
+ <span class="line"><span style="color:#E6DB74"> 'checkbox'</span><span style="color:#F8F8F2">,</span></span>
207
+ <span class="line"><span style="color:#F8F8F2"> {</span></span>
208
+ <span class="line"><span style="color:#A6E22E"> change</span><span style="color:#F8F8F2">: ({ </span><span style="color:#FD971F;font-style:italic">target</span><span style="color:#F8F8F2"> }) </span><span style="color:#66D9EF;font-style:italic">=></span><span style="color:#F8F8F2"> target.checked,</span></span>
209
+ <span class="line"><span style="color:#F8F8F2"> },</span></span>
210
+ <span class="line"><span style="color:#F8F8F2"> ),</span></span>
211
+ <span class="line"><span style="color:#F8F8F2"> label: </span><span style="color:#A6E22E">asString</span><span style="color:#F8F8F2">(</span></span>
212
+ <span class="line"><span style="color:#F8F8F2"> ({ </span><span style="color:#FD971F;font-style:italic">host</span><span style="color:#F8F8F2">, </span><span style="color:#FD971F;font-style:italic">label</span><span style="color:#F8F8F2"> }) </span><span style="color:#66D9EF;font-style:italic">=></span></span>
213
+ <span class="line"><span style="color:#F8F8F2"> label?.textContent </span><span style="color:#F92672">??</span><span style="color:#F8F8F2"> host.</span><span style="color:#A6E22E">querySelector</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'label'</span><span style="color:#F8F8F2">)?.textContent </span><span style="color:#F92672">??</span><span style="color:#E6DB74"> ''</span><span style="color:#F8F8F2">,</span></span>
214
+ <span class="line"><span style="color:#F8F8F2"> ),</span></span>
215
+ <span class="line"><span style="color:#F8F8F2"> },</span></span>
216
+ <span class="line"><span style="color:#F8F8F2"> ({ </span><span style="color:#FD971F;font-style:italic">first</span><span style="color:#F8F8F2"> }) </span><span style="color:#66D9EF;font-style:italic">=></span><span style="color:#F8F8F2"> ({</span></span>
217
+ <span class="line"><span style="color:#F8F8F2"> checkbox: </span><span style="color:#A6E22E">first</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'input[type="checkbox"]'</span><span style="color:#F8F8F2">, </span><span style="color:#E6DB74">'Add a native checkbox.'</span><span style="color:#F8F8F2">),</span></span>
218
+ <span class="line"><span style="color:#F8F8F2"> label: </span><span style="color:#A6E22E">first</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'.label'</span><span style="color:#F8F8F2">),</span></span>
219
+ <span class="line"><span style="color:#F8F8F2"> }),</span></span>
220
+ <span class="line"><span style="color:#F8F8F2"> () </span><span style="color:#66D9EF;font-style:italic">=></span><span style="color:#F8F8F2"> ({</span></span>
221
+ <span class="line"><span style="color:#F8F8F2"> host: </span><span style="color:#A6E22E">toggleAttribute</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'checked'</span><span style="color:#F8F8F2">),</span></span>
222
+ <span class="line"><span style="color:#F8F8F2"> label: </span><span style="color:#A6E22E">setText</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'label'</span><span style="color:#F8F8F2">),</span></span>
223
+ <span class="line"><span style="color:#F8F8F2"> }),</span></span>
224
+ <span class="line"><span style="color:#F8F8F2">)</span></span>
225
+ <span class="line"></span></code></pre>
226
+ <basic-button class="copy">
227
+ <button type="button" class="secondary small">
228
+ <span class="label">Copy</span>
229
+ </button>
230
+ </basic-button>
231
+ </module-codeblock>
232
+ </div>
233
+ </module-tabgroup>