@fiscozen/checkbox 0.1.6 → 1.0.0-next.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 (44) hide show
  1. package/.eslintrc.cjs +19 -0
  2. package/.prettierrc.js +6 -0
  3. package/README.md +514 -0
  4. package/coverage/clover.xml +789 -215
  5. package/coverage/coverage-final.json +6 -6
  6. package/coverage/index.html +32 -32
  7. package/coverage/src/FzCheckbox.vue.html +1099 -151
  8. package/coverage/src/FzCheckboxGroup.vue.html +444 -81
  9. package/coverage/src/common.ts.html +79 -19
  10. package/coverage/src/components/ErrorAlert.vue.html +268 -0
  11. package/coverage/src/components/FzCheckboxGroupOption.vue.html +343 -70
  12. package/coverage/src/components/index.html +22 -22
  13. package/coverage/src/index.html +45 -45
  14. package/coverage/src/utils.ts.html +265 -0
  15. package/package.json +12 -10
  16. package/src/FzCheckbox.vue +411 -95
  17. package/src/FzCheckboxGroup.vue +179 -58
  18. package/src/__test__/FzCheckbox.test.ts +91 -19
  19. package/src/__test__/FzCheckboxGroup.test.ts +167 -4
  20. package/src/common.ts +20 -0
  21. package/src/components/ErrorAlert.vue +61 -0
  22. package/src/components/FzCheckboxGroupOption.vue +137 -46
  23. package/src/index.ts +1 -0
  24. package/src/types.ts +166 -23
  25. package/src/utils.ts +60 -0
  26. package/tsconfig.json +1 -1
  27. package/coverage/.tmp/coverage-0.json +0 -1
  28. package/coverage/.tmp/coverage-1.json +0 -1
  29. package/coverage/src/components/FzCheckboxErrorText.vue.html +0 -145
  30. package/coverage/src/types.ts.html +0 -310
  31. package/dist/checkbox.js +0 -301
  32. package/dist/checkbox.umd.cjs +0 -1
  33. package/dist/index.d.ts +0 -1
  34. package/dist/src/FzCheckbox.vue.d.ts +0 -95
  35. package/dist/src/FzCheckboxGroup.vue.d.ts +0 -70
  36. package/dist/src/__test__/FzCheckbox.test.d.ts +0 -1
  37. package/dist/src/__test__/FzCheckboxGroup.test.d.ts +0 -1
  38. package/dist/src/common.d.ts +0 -4
  39. package/dist/src/components/FzCheckboxErrorText.vue.d.ts +0 -24
  40. package/dist/src/components/FzCheckboxGroupOption.vue.d.ts +0 -82
  41. package/dist/src/index.d.ts +0 -3
  42. package/dist/src/types.d.ts +0 -76
  43. package/dist/style.css +0 -1
  44. package/src/components/FzCheckboxErrorText.vue +0 -20
package/coverage/src/FzCheckbox.vue.html CHANGED
@@ -23,30 +23,30 @@
23
23
  <div class='clearfix'>
24
24
 
25
25
  <div class='fl pad1y space-right2'>
26
- <span class="strong">98.68% </span>
26
+ <span class="strong">99.14% </span>
27
27
  <span class="quiet">Statements</span>
28
- <span class='fraction'>150/152</span>
28
+ <span class='fraction'>464/468</span>
29
29
  </div>
30
30
 
31
31
 
32
32
  <div class='fl pad1y space-right2'>
33
- <span class="strong">85.36% </span>
33
+ <span class="strong">95.38% </span>
34
34
  <span class="quiet">Branches</span>
35
- <span class='fraction'>35/41</span>
35
+ <span class='fraction'>62/65</span>
36
36
  </div>
37
37
 
38
38
 
39
39
  <div class='fl pad1y space-right2'>
40
40
  <span class="strong">100% </span>
41
41
  <span class="quiet">Functions</span>
42
- <span class='fraction'>5/5</span>
42
+ <span class='fraction'>3/3</span>
43
43
  </div>
44
44
 
45
45
 
46
46
  <div class='fl pad1y space-right2'>
47
- <span class="strong">98.68% </span>
47
+ <span class="strong">99.14% </span>
48
48
  <span class="quiet">Lines</span>
49
- <span class='fraction'>150/152</span>
49
+ <span class='fraction'>464/468</span>
50
50
  </div>
51
51
 
52
52
 
@@ -57,7 +57,7 @@
57
57
  <template id="filterTemplate">
58
58
  <div class="quiet">
59
59
  Filter:
60
- <input oninput="onInput()" type="search" id="fileSearch">
60
+ <input type="search" id="fileSearch">
61
61
  </div>
62
62
  </template>
63
63
  </div>
@@ -215,7 +215,370 @@
215
215
  <a name='L150'></a><a href='#L150'>150</a>
216
216
  <a name='L151'></a><a href='#L151'>151</a>
217
217
  <a name='L152'></a><a href='#L152'>152</a>
218
- <a name='L153'></a><a href='#L153'>153</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
218
+ <a name='L153'></a><a href='#L153'>153</a>
219
+ <a name='L154'></a><a href='#L154'>154</a>
220
+ <a name='L155'></a><a href='#L155'>155</a>
221
+ <a name='L156'></a><a href='#L156'>156</a>
222
+ <a name='L157'></a><a href='#L157'>157</a>
223
+ <a name='L158'></a><a href='#L158'>158</a>
224
+ <a name='L159'></a><a href='#L159'>159</a>
225
+ <a name='L160'></a><a href='#L160'>160</a>
226
+ <a name='L161'></a><a href='#L161'>161</a>
227
+ <a name='L162'></a><a href='#L162'>162</a>
228
+ <a name='L163'></a><a href='#L163'>163</a>
229
+ <a name='L164'></a><a href='#L164'>164</a>
230
+ <a name='L165'></a><a href='#L165'>165</a>
231
+ <a name='L166'></a><a href='#L166'>166</a>
232
+ <a name='L167'></a><a href='#L167'>167</a>
233
+ <a name='L168'></a><a href='#L168'>168</a>
234
+ <a name='L169'></a><a href='#L169'>169</a>
235
+ <a name='L170'></a><a href='#L170'>170</a>
236
+ <a name='L171'></a><a href='#L171'>171</a>
237
+ <a name='L172'></a><a href='#L172'>172</a>
238
+ <a name='L173'></a><a href='#L173'>173</a>
239
+ <a name='L174'></a><a href='#L174'>174</a>
240
+ <a name='L175'></a><a href='#L175'>175</a>
241
+ <a name='L176'></a><a href='#L176'>176</a>
242
+ <a name='L177'></a><a href='#L177'>177</a>
243
+ <a name='L178'></a><a href='#L178'>178</a>
244
+ <a name='L179'></a><a href='#L179'>179</a>
245
+ <a name='L180'></a><a href='#L180'>180</a>
246
+ <a name='L181'></a><a href='#L181'>181</a>
247
+ <a name='L182'></a><a href='#L182'>182</a>
248
+ <a name='L183'></a><a href='#L183'>183</a>
249
+ <a name='L184'></a><a href='#L184'>184</a>
250
+ <a name='L185'></a><a href='#L185'>185</a>
251
+ <a name='L186'></a><a href='#L186'>186</a>
252
+ <a name='L187'></a><a href='#L187'>187</a>
253
+ <a name='L188'></a><a href='#L188'>188</a>
254
+ <a name='L189'></a><a href='#L189'>189</a>
255
+ <a name='L190'></a><a href='#L190'>190</a>
256
+ <a name='L191'></a><a href='#L191'>191</a>
257
+ <a name='L192'></a><a href='#L192'>192</a>
258
+ <a name='L193'></a><a href='#L193'>193</a>
259
+ <a name='L194'></a><a href='#L194'>194</a>
260
+ <a name='L195'></a><a href='#L195'>195</a>
261
+ <a name='L196'></a><a href='#L196'>196</a>
262
+ <a name='L197'></a><a href='#L197'>197</a>
263
+ <a name='L198'></a><a href='#L198'>198</a>
264
+ <a name='L199'></a><a href='#L199'>199</a>
265
+ <a name='L200'></a><a href='#L200'>200</a>
266
+ <a name='L201'></a><a href='#L201'>201</a>
267
+ <a name='L202'></a><a href='#L202'>202</a>
268
+ <a name='L203'></a><a href='#L203'>203</a>
269
+ <a name='L204'></a><a href='#L204'>204</a>
270
+ <a name='L205'></a><a href='#L205'>205</a>
271
+ <a name='L206'></a><a href='#L206'>206</a>
272
+ <a name='L207'></a><a href='#L207'>207</a>
273
+ <a name='L208'></a><a href='#L208'>208</a>
274
+ <a name='L209'></a><a href='#L209'>209</a>
275
+ <a name='L210'></a><a href='#L210'>210</a>
276
+ <a name='L211'></a><a href='#L211'>211</a>
277
+ <a name='L212'></a><a href='#L212'>212</a>
278
+ <a name='L213'></a><a href='#L213'>213</a>
279
+ <a name='L214'></a><a href='#L214'>214</a>
280
+ <a name='L215'></a><a href='#L215'>215</a>
281
+ <a name='L216'></a><a href='#L216'>216</a>
282
+ <a name='L217'></a><a href='#L217'>217</a>
283
+ <a name='L218'></a><a href='#L218'>218</a>
284
+ <a name='L219'></a><a href='#L219'>219</a>
285
+ <a name='L220'></a><a href='#L220'>220</a>
286
+ <a name='L221'></a><a href='#L221'>221</a>
287
+ <a name='L222'></a><a href='#L222'>222</a>
288
+ <a name='L223'></a><a href='#L223'>223</a>
289
+ <a name='L224'></a><a href='#L224'>224</a>
290
+ <a name='L225'></a><a href='#L225'>225</a>
291
+ <a name='L226'></a><a href='#L226'>226</a>
292
+ <a name='L227'></a><a href='#L227'>227</a>
293
+ <a name='L228'></a><a href='#L228'>228</a>
294
+ <a name='L229'></a><a href='#L229'>229</a>
295
+ <a name='L230'></a><a href='#L230'>230</a>
296
+ <a name='L231'></a><a href='#L231'>231</a>
297
+ <a name='L232'></a><a href='#L232'>232</a>
298
+ <a name='L233'></a><a href='#L233'>233</a>
299
+ <a name='L234'></a><a href='#L234'>234</a>
300
+ <a name='L235'></a><a href='#L235'>235</a>
301
+ <a name='L236'></a><a href='#L236'>236</a>
302
+ <a name='L237'></a><a href='#L237'>237</a>
303
+ <a name='L238'></a><a href='#L238'>238</a>
304
+ <a name='L239'></a><a href='#L239'>239</a>
305
+ <a name='L240'></a><a href='#L240'>240</a>
306
+ <a name='L241'></a><a href='#L241'>241</a>
307
+ <a name='L242'></a><a href='#L242'>242</a>
308
+ <a name='L243'></a><a href='#L243'>243</a>
309
+ <a name='L244'></a><a href='#L244'>244</a>
310
+ <a name='L245'></a><a href='#L245'>245</a>
311
+ <a name='L246'></a><a href='#L246'>246</a>
312
+ <a name='L247'></a><a href='#L247'>247</a>
313
+ <a name='L248'></a><a href='#L248'>248</a>
314
+ <a name='L249'></a><a href='#L249'>249</a>
315
+ <a name='L250'></a><a href='#L250'>250</a>
316
+ <a name='L251'></a><a href='#L251'>251</a>
317
+ <a name='L252'></a><a href='#L252'>252</a>
318
+ <a name='L253'></a><a href='#L253'>253</a>
319
+ <a name='L254'></a><a href='#L254'>254</a>
320
+ <a name='L255'></a><a href='#L255'>255</a>
321
+ <a name='L256'></a><a href='#L256'>256</a>
322
+ <a name='L257'></a><a href='#L257'>257</a>
323
+ <a name='L258'></a><a href='#L258'>258</a>
324
+ <a name='L259'></a><a href='#L259'>259</a>
325
+ <a name='L260'></a><a href='#L260'>260</a>
326
+ <a name='L261'></a><a href='#L261'>261</a>
327
+ <a name='L262'></a><a href='#L262'>262</a>
328
+ <a name='L263'></a><a href='#L263'>263</a>
329
+ <a name='L264'></a><a href='#L264'>264</a>
330
+ <a name='L265'></a><a href='#L265'>265</a>
331
+ <a name='L266'></a><a href='#L266'>266</a>
332
+ <a name='L267'></a><a href='#L267'>267</a>
333
+ <a name='L268'></a><a href='#L268'>268</a>
334
+ <a name='L269'></a><a href='#L269'>269</a>
335
+ <a name='L270'></a><a href='#L270'>270</a>
336
+ <a name='L271'></a><a href='#L271'>271</a>
337
+ <a name='L272'></a><a href='#L272'>272</a>
338
+ <a name='L273'></a><a href='#L273'>273</a>
339
+ <a name='L274'></a><a href='#L274'>274</a>
340
+ <a name='L275'></a><a href='#L275'>275</a>
341
+ <a name='L276'></a><a href='#L276'>276</a>
342
+ <a name='L277'></a><a href='#L277'>277</a>
343
+ <a name='L278'></a><a href='#L278'>278</a>
344
+ <a name='L279'></a><a href='#L279'>279</a>
345
+ <a name='L280'></a><a href='#L280'>280</a>
346
+ <a name='L281'></a><a href='#L281'>281</a>
347
+ <a name='L282'></a><a href='#L282'>282</a>
348
+ <a name='L283'></a><a href='#L283'>283</a>
349
+ <a name='L284'></a><a href='#L284'>284</a>
350
+ <a name='L285'></a><a href='#L285'>285</a>
351
+ <a name='L286'></a><a href='#L286'>286</a>
352
+ <a name='L287'></a><a href='#L287'>287</a>
353
+ <a name='L288'></a><a href='#L288'>288</a>
354
+ <a name='L289'></a><a href='#L289'>289</a>
355
+ <a name='L290'></a><a href='#L290'>290</a>
356
+ <a name='L291'></a><a href='#L291'>291</a>
357
+ <a name='L292'></a><a href='#L292'>292</a>
358
+ <a name='L293'></a><a href='#L293'>293</a>
359
+ <a name='L294'></a><a href='#L294'>294</a>
360
+ <a name='L295'></a><a href='#L295'>295</a>
361
+ <a name='L296'></a><a href='#L296'>296</a>
362
+ <a name='L297'></a><a href='#L297'>297</a>
363
+ <a name='L298'></a><a href='#L298'>298</a>
364
+ <a name='L299'></a><a href='#L299'>299</a>
365
+ <a name='L300'></a><a href='#L300'>300</a>
366
+ <a name='L301'></a><a href='#L301'>301</a>
367
+ <a name='L302'></a><a href='#L302'>302</a>
368
+ <a name='L303'></a><a href='#L303'>303</a>
369
+ <a name='L304'></a><a href='#L304'>304</a>
370
+ <a name='L305'></a><a href='#L305'>305</a>
371
+ <a name='L306'></a><a href='#L306'>306</a>
372
+ <a name='L307'></a><a href='#L307'>307</a>
373
+ <a name='L308'></a><a href='#L308'>308</a>
374
+ <a name='L309'></a><a href='#L309'>309</a>
375
+ <a name='L310'></a><a href='#L310'>310</a>
376
+ <a name='L311'></a><a href='#L311'>311</a>
377
+ <a name='L312'></a><a href='#L312'>312</a>
378
+ <a name='L313'></a><a href='#L313'>313</a>
379
+ <a name='L314'></a><a href='#L314'>314</a>
380
+ <a name='L315'></a><a href='#L315'>315</a>
381
+ <a name='L316'></a><a href='#L316'>316</a>
382
+ <a name='L317'></a><a href='#L317'>317</a>
383
+ <a name='L318'></a><a href='#L318'>318</a>
384
+ <a name='L319'></a><a href='#L319'>319</a>
385
+ <a name='L320'></a><a href='#L320'>320</a>
386
+ <a name='L321'></a><a href='#L321'>321</a>
387
+ <a name='L322'></a><a href='#L322'>322</a>
388
+ <a name='L323'></a><a href='#L323'>323</a>
389
+ <a name='L324'></a><a href='#L324'>324</a>
390
+ <a name='L325'></a><a href='#L325'>325</a>
391
+ <a name='L326'></a><a href='#L326'>326</a>
392
+ <a name='L327'></a><a href='#L327'>327</a>
393
+ <a name='L328'></a><a href='#L328'>328</a>
394
+ <a name='L329'></a><a href='#L329'>329</a>
395
+ <a name='L330'></a><a href='#L330'>330</a>
396
+ <a name='L331'></a><a href='#L331'>331</a>
397
+ <a name='L332'></a><a href='#L332'>332</a>
398
+ <a name='L333'></a><a href='#L333'>333</a>
399
+ <a name='L334'></a><a href='#L334'>334</a>
400
+ <a name='L335'></a><a href='#L335'>335</a>
401
+ <a name='L336'></a><a href='#L336'>336</a>
402
+ <a name='L337'></a><a href='#L337'>337</a>
403
+ <a name='L338'></a><a href='#L338'>338</a>
404
+ <a name='L339'></a><a href='#L339'>339</a>
405
+ <a name='L340'></a><a href='#L340'>340</a>
406
+ <a name='L341'></a><a href='#L341'>341</a>
407
+ <a name='L342'></a><a href='#L342'>342</a>
408
+ <a name='L343'></a><a href='#L343'>343</a>
409
+ <a name='L344'></a><a href='#L344'>344</a>
410
+ <a name='L345'></a><a href='#L345'>345</a>
411
+ <a name='L346'></a><a href='#L346'>346</a>
412
+ <a name='L347'></a><a href='#L347'>347</a>
413
+ <a name='L348'></a><a href='#L348'>348</a>
414
+ <a name='L349'></a><a href='#L349'>349</a>
415
+ <a name='L350'></a><a href='#L350'>350</a>
416
+ <a name='L351'></a><a href='#L351'>351</a>
417
+ <a name='L352'></a><a href='#L352'>352</a>
418
+ <a name='L353'></a><a href='#L353'>353</a>
419
+ <a name='L354'></a><a href='#L354'>354</a>
420
+ <a name='L355'></a><a href='#L355'>355</a>
421
+ <a name='L356'></a><a href='#L356'>356</a>
422
+ <a name='L357'></a><a href='#L357'>357</a>
423
+ <a name='L358'></a><a href='#L358'>358</a>
424
+ <a name='L359'></a><a href='#L359'>359</a>
425
+ <a name='L360'></a><a href='#L360'>360</a>
426
+ <a name='L361'></a><a href='#L361'>361</a>
427
+ <a name='L362'></a><a href='#L362'>362</a>
428
+ <a name='L363'></a><a href='#L363'>363</a>
429
+ <a name='L364'></a><a href='#L364'>364</a>
430
+ <a name='L365'></a><a href='#L365'>365</a>
431
+ <a name='L366'></a><a href='#L366'>366</a>
432
+ <a name='L367'></a><a href='#L367'>367</a>
433
+ <a name='L368'></a><a href='#L368'>368</a>
434
+ <a name='L369'></a><a href='#L369'>369</a>
435
+ <a name='L370'></a><a href='#L370'>370</a>
436
+ <a name='L371'></a><a href='#L371'>371</a>
437
+ <a name='L372'></a><a href='#L372'>372</a>
438
+ <a name='L373'></a><a href='#L373'>373</a>
439
+ <a name='L374'></a><a href='#L374'>374</a>
440
+ <a name='L375'></a><a href='#L375'>375</a>
441
+ <a name='L376'></a><a href='#L376'>376</a>
442
+ <a name='L377'></a><a href='#L377'>377</a>
443
+ <a name='L378'></a><a href='#L378'>378</a>
444
+ <a name='L379'></a><a href='#L379'>379</a>
445
+ <a name='L380'></a><a href='#L380'>380</a>
446
+ <a name='L381'></a><a href='#L381'>381</a>
447
+ <a name='L382'></a><a href='#L382'>382</a>
448
+ <a name='L383'></a><a href='#L383'>383</a>
449
+ <a name='L384'></a><a href='#L384'>384</a>
450
+ <a name='L385'></a><a href='#L385'>385</a>
451
+ <a name='L386'></a><a href='#L386'>386</a>
452
+ <a name='L387'></a><a href='#L387'>387</a>
453
+ <a name='L388'></a><a href='#L388'>388</a>
454
+ <a name='L389'></a><a href='#L389'>389</a>
455
+ <a name='L390'></a><a href='#L390'>390</a>
456
+ <a name='L391'></a><a href='#L391'>391</a>
457
+ <a name='L392'></a><a href='#L392'>392</a>
458
+ <a name='L393'></a><a href='#L393'>393</a>
459
+ <a name='L394'></a><a href='#L394'>394</a>
460
+ <a name='L395'></a><a href='#L395'>395</a>
461
+ <a name='L396'></a><a href='#L396'>396</a>
462
+ <a name='L397'></a><a href='#L397'>397</a>
463
+ <a name='L398'></a><a href='#L398'>398</a>
464
+ <a name='L399'></a><a href='#L399'>399</a>
465
+ <a name='L400'></a><a href='#L400'>400</a>
466
+ <a name='L401'></a><a href='#L401'>401</a>
467
+ <a name='L402'></a><a href='#L402'>402</a>
468
+ <a name='L403'></a><a href='#L403'>403</a>
469
+ <a name='L404'></a><a href='#L404'>404</a>
470
+ <a name='L405'></a><a href='#L405'>405</a>
471
+ <a name='L406'></a><a href='#L406'>406</a>
472
+ <a name='L407'></a><a href='#L407'>407</a>
473
+ <a name='L408'></a><a href='#L408'>408</a>
474
+ <a name='L409'></a><a href='#L409'>409</a>
475
+ <a name='L410'></a><a href='#L410'>410</a>
476
+ <a name='L411'></a><a href='#L411'>411</a>
477
+ <a name='L412'></a><a href='#L412'>412</a>
478
+ <a name='L413'></a><a href='#L413'>413</a>
479
+ <a name='L414'></a><a href='#L414'>414</a>
480
+ <a name='L415'></a><a href='#L415'>415</a>
481
+ <a name='L416'></a><a href='#L416'>416</a>
482
+ <a name='L417'></a><a href='#L417'>417</a>
483
+ <a name='L418'></a><a href='#L418'>418</a>
484
+ <a name='L419'></a><a href='#L419'>419</a>
485
+ <a name='L420'></a><a href='#L420'>420</a>
486
+ <a name='L421'></a><a href='#L421'>421</a>
487
+ <a name='L422'></a><a href='#L422'>422</a>
488
+ <a name='L423'></a><a href='#L423'>423</a>
489
+ <a name='L424'></a><a href='#L424'>424</a>
490
+ <a name='L425'></a><a href='#L425'>425</a>
491
+ <a name='L426'></a><a href='#L426'>426</a>
492
+ <a name='L427'></a><a href='#L427'>427</a>
493
+ <a name='L428'></a><a href='#L428'>428</a>
494
+ <a name='L429'></a><a href='#L429'>429</a>
495
+ <a name='L430'></a><a href='#L430'>430</a>
496
+ <a name='L431'></a><a href='#L431'>431</a>
497
+ <a name='L432'></a><a href='#L432'>432</a>
498
+ <a name='L433'></a><a href='#L433'>433</a>
499
+ <a name='L434'></a><a href='#L434'>434</a>
500
+ <a name='L435'></a><a href='#L435'>435</a>
501
+ <a name='L436'></a><a href='#L436'>436</a>
502
+ <a name='L437'></a><a href='#L437'>437</a>
503
+ <a name='L438'></a><a href='#L438'>438</a>
504
+ <a name='L439'></a><a href='#L439'>439</a>
505
+ <a name='L440'></a><a href='#L440'>440</a>
506
+ <a name='L441'></a><a href='#L441'>441</a>
507
+ <a name='L442'></a><a href='#L442'>442</a>
508
+ <a name='L443'></a><a href='#L443'>443</a>
509
+ <a name='L444'></a><a href='#L444'>444</a>
510
+ <a name='L445'></a><a href='#L445'>445</a>
511
+ <a name='L446'></a><a href='#L446'>446</a>
512
+ <a name='L447'></a><a href='#L447'>447</a>
513
+ <a name='L448'></a><a href='#L448'>448</a>
514
+ <a name='L449'></a><a href='#L449'>449</a>
515
+ <a name='L450'></a><a href='#L450'>450</a>
516
+ <a name='L451'></a><a href='#L451'>451</a>
517
+ <a name='L452'></a><a href='#L452'>452</a>
518
+ <a name='L453'></a><a href='#L453'>453</a>
519
+ <a name='L454'></a><a href='#L454'>454</a>
520
+ <a name='L455'></a><a href='#L455'>455</a>
521
+ <a name='L456'></a><a href='#L456'>456</a>
522
+ <a name='L457'></a><a href='#L457'>457</a>
523
+ <a name='L458'></a><a href='#L458'>458</a>
524
+ <a name='L459'></a><a href='#L459'>459</a>
525
+ <a name='L460'></a><a href='#L460'>460</a>
526
+ <a name='L461'></a><a href='#L461'>461</a>
527
+ <a name='L462'></a><a href='#L462'>462</a>
528
+ <a name='L463'></a><a href='#L463'>463</a>
529
+ <a name='L464'></a><a href='#L464'>464</a>
530
+ <a name='L465'></a><a href='#L465'>465</a>
531
+ <a name='L466'></a><a href='#L466'>466</a>
532
+ <a name='L467'></a><a href='#L467'>467</a>
533
+ <a name='L468'></a><a href='#L468'>468</a>
534
+ <a name='L469'></a><a href='#L469'>469</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">232x</span>
535
+ <span class="cline-any cline-yes">1x</span>
536
+ <span class="cline-any cline-yes">1x</span>
537
+ <span class="cline-any cline-yes">1x</span>
538
+ <span class="cline-any cline-yes">1x</span>
539
+ <span class="cline-any cline-yes">1x</span>
540
+ <span class="cline-any cline-yes">1x</span>
541
+ <span class="cline-any cline-yes">1x</span>
542
+ <span class="cline-any cline-yes">1x</span>
543
+ <span class="cline-any cline-yes">1x</span>
544
+ <span class="cline-any cline-yes">1x</span>
545
+ <span class="cline-any cline-yes">1x</span>
546
+ <span class="cline-any cline-yes">1x</span>
547
+ <span class="cline-any cline-yes">1x</span>
548
+ <span class="cline-any cline-yes">1x</span>
549
+ <span class="cline-any cline-yes">1x</span>
550
+ <span class="cline-any cline-yes">1x</span>
551
+ <span class="cline-any cline-yes">1x</span>
552
+ <span class="cline-any cline-yes">1x</span>
553
+ <span class="cline-any cline-yes">1x</span>
554
+ <span class="cline-any cline-yes">1x</span>
555
+ <span class="cline-any cline-yes">1x</span>
556
+ <span class="cline-any cline-yes">1x</span>
557
+ <span class="cline-any cline-yes">1x</span>
558
+ <span class="cline-any cline-yes">1x</span>
559
+ <span class="cline-any cline-yes">1x</span>
560
+ <span class="cline-any cline-yes">1x</span>
561
+ <span class="cline-any cline-yes">1x</span>
562
+ <span class="cline-any cline-yes">1x</span>
563
+ <span class="cline-any cline-yes">1x</span>
564
+ <span class="cline-any cline-yes">1x</span>
565
+ <span class="cline-any cline-yes">1x</span>
566
+ <span class="cline-any cline-yes">1x</span>
567
+ <span class="cline-any cline-yes">1x</span>
568
+ <span class="cline-any cline-yes">1x</span>
569
+ <span class="cline-any cline-yes">1x</span>
570
+ <span class="cline-any cline-yes">1x</span>
571
+ <span class="cline-any cline-yes">1x</span>
572
+ <span class="cline-any cline-yes">1x</span>
573
+ <span class="cline-any cline-yes">233x</span>
574
+ <span class="cline-any cline-no">&nbsp;</span>
575
+ <span class="cline-any cline-no">&nbsp;</span>
576
+ <span class="cline-any cline-no">&nbsp;</span>
577
+ <span class="cline-any cline-no">&nbsp;</span>
578
+ <span class="cline-any cline-yes">233x</span>
579
+ <span class="cline-any cline-yes">1x</span>
580
+ <span class="cline-any cline-yes">1x</span>
581
+ <span class="cline-any cline-yes">1x</span>
219
582
  <span class="cline-any cline-yes">1x</span>
220
583
  <span class="cline-any cline-yes">1x</span>
221
584
  <span class="cline-any cline-yes">1x</span>
@@ -290,72 +653,160 @@
290
653
  <span class="cline-any cline-yes">1x</span>
291
654
  <span class="cline-any cline-yes">1x</span>
292
655
  <span class="cline-any cline-yes">1x</span>
293
- <span class="cline-any cline-yes">216x</span>
294
- <span class="cline-any cline-yes">216x</span>
295
656
  <span class="cline-any cline-yes">1x</span>
296
657
  <span class="cline-any cline-yes">1x</span>
297
658
  <span class="cline-any cline-yes">1x</span>
298
- <span class="cline-any cline-yes">216x</span>
299
- <span class="cline-any cline-yes">216x</span>
300
659
  <span class="cline-any cline-yes">1x</span>
301
660
  <span class="cline-any cline-yes">1x</span>
302
661
  <span class="cline-any cline-yes">1x</span>
303
- <span class="cline-any cline-yes">216x</span>
304
- <span class="cline-any cline-no">&nbsp;</span>
305
- <span class="cline-any cline-no">&nbsp;</span>
306
- <span class="cline-any cline-yes">216x</span>
307
- <span class="cline-any cline-yes">216x</span>
308
662
  <span class="cline-any cline-yes">1x</span>
309
663
  <span class="cline-any cline-yes">1x</span>
310
664
  <span class="cline-any cline-yes">1x</span>
311
- <span class="cline-any cline-yes">216x</span>
312
665
  <span class="cline-any cline-yes">1x</span>
313
666
  <span class="cline-any cline-yes">1x</span>
314
667
  <span class="cline-any cline-yes">1x</span>
315
- <span class="cline-any cline-yes">432x</span>
316
- <span class="cline-any cline-yes">428x</span>
317
- <span class="cline-any cline-yes">428x</span>
318
- <span class="cline-any cline-yes">412x</span>
319
- <span class="cline-any cline-yes">432x</span>
320
- <span class="cline-any cline-yes">16x</span>
321
- <span class="cline-any cline-yes">16x</span>
322
- <span class="cline-any cline-yes">432x</span>
323
668
  <span class="cline-any cline-yes">1x</span>
324
669
  <span class="cline-any cline-yes">1x</span>
325
- <span class="cline-any cline-yes">216x</span>
326
- <span class="cline-any cline-yes">216x</span>
670
+ <span class="cline-any cline-yes">1x</span>
671
+ <span class="cline-any cline-yes">1x</span>
672
+ <span class="cline-any cline-yes">1x</span>
673
+ <span class="cline-any cline-yes">1x</span>
674
+ <span class="cline-any cline-yes">1x</span>
675
+ <span class="cline-any cline-yes">1x</span>
676
+ <span class="cline-any cline-yes">1x</span>
677
+ <span class="cline-any cline-yes">1x</span>
678
+ <span class="cline-any cline-yes">1x</span>
679
+ <span class="cline-any cline-yes">1x</span>
680
+ <span class="cline-any cline-yes">1x</span>
681
+ <span class="cline-any cline-yes">1x</span>
682
+ <span class="cline-any cline-yes">1x</span>
683
+ <span class="cline-any cline-yes">1x</span>
684
+ <span class="cline-any cline-yes">1x</span>
685
+ <span class="cline-any cline-yes">1x</span>
686
+ <span class="cline-any cline-yes">1x</span>
687
+ <span class="cline-any cline-yes">1x</span>
688
+ <span class="cline-any cline-yes">1x</span>
689
+ <span class="cline-any cline-yes">1x</span>
690
+ <span class="cline-any cline-yes">1x</span>
691
+ <span class="cline-any cline-yes">1x</span>
692
+ <span class="cline-any cline-yes">1x</span>
693
+ <span class="cline-any cline-yes">1x</span>
694
+ <span class="cline-any cline-yes">1x</span>
695
+ <span class="cline-any cline-yes">232x</span>
696
+ <span class="cline-any cline-yes">230x</span>
697
+ <span class="cline-any cline-yes">230x</span>
698
+ <span class="cline-any cline-yes">209x</span>
699
+ <span class="cline-any cline-yes">232x</span>
700
+ <span class="cline-any cline-yes">21x</span>
701
+ <span class="cline-any cline-yes">21x</span>
702
+ <span class="cline-any cline-yes">1x</span>
703
+ <span class="cline-any cline-yes">1x</span>
704
+ <span class="cline-any cline-yes">1x</span>
705
+ <span class="cline-any cline-yes">1x</span>
706
+ <span class="cline-any cline-yes">1x</span>
707
+ <span class="cline-any cline-yes">1x</span>
708
+ <span class="cline-any cline-yes">1x</span>
709
+ <span class="cline-any cline-yes">1x</span>
710
+ <span class="cline-any cline-yes">1x</span>
711
+ <span class="cline-any cline-yes">1x</span>
712
+ <span class="cline-any cline-yes">1x</span>
713
+ <span class="cline-any cline-yes">1x</span>
714
+ <span class="cline-any cline-yes">1x</span>
715
+ <span class="cline-any cline-yes">1x</span>
716
+ <span class="cline-any cline-yes">1x</span>
717
+ <span class="cline-any cline-yes">1x</span>
718
+ <span class="cline-any cline-yes">1x</span>
719
+ <span class="cline-any cline-yes">233x</span>
720
+ <span class="cline-any cline-yes">233x</span>
327
721
  <span class="cline-any cline-yes">203x</span>
328
- <span class="cline-any cline-yes">216x</span>
329
- <span class="cline-any cline-yes">2x</span>
330
- <span class="cline-any cline-yes">216x</span>
722
+ <span class="cline-any cline-yes">203x</span>
723
+ <span class="cline-any cline-yes">30x</span>
724
+ <span class="cline-any cline-yes">30x</span>
725
+ <span class="cline-any cline-yes">30x</span>
726
+ <span class="cline-any cline-yes">233x</span>
727
+ <span class="cline-any cline-yes">13x</span>
728
+ <span class="cline-any cline-yes">13x</span>
729
+ <span class="cline-any cline-yes">17x</span>
730
+ <span class="cline-any cline-yes">17x</span>
731
+ <span class="cline-any cline-yes">17x</span>
732
+ <span class="cline-any cline-yes">233x</span>
733
+ <span class="cline-any cline-yes">3x</span>
331
734
  <span class="cline-any cline-yes">3x</span>
332
- <span class="cline-any cline-yes">216x</span>
333
- <span class="cline-any cline-yes">8x</span>
334
- <span class="cline-any cline-yes">216x</span>
335
- <span class="cline-any cline-yes">216x</span>
735
+ <span class="cline-any cline-yes">14x</span>
736
+ <span class="cline-any cline-yes">14x</span>
737
+ <span class="cline-any cline-yes">14x</span>
738
+ <span class="cline-any cline-yes">14x</span>
739
+ <span class="cline-any cline-yes">1x</span>
740
+ <span class="cline-any cline-yes">1x</span>
336
741
  <span class="cline-any cline-yes">1x</span>
337
742
  <span class="cline-any cline-yes">1x</span>
338
- <span class="cline-any cline-yes">216x</span>
339
- <span class="cline-any cline-yes">216x</span>
743
+ <span class="cline-any cline-yes">1x</span>
744
+ <span class="cline-any cline-yes">1x</span>
745
+ <span class="cline-any cline-yes">1x</span>
746
+ <span class="cline-any cline-yes">1x</span>
747
+ <span class="cline-any cline-yes">1x</span>
748
+ <span class="cline-any cline-yes">1x</span>
749
+ <span class="cline-any cline-yes">1x</span>
750
+ <span class="cline-any cline-yes">1x</span>
751
+ <span class="cline-any cline-yes">1x</span>
752
+ <span class="cline-any cline-yes">1x</span>
753
+ <span class="cline-any cline-yes">1x</span>
754
+ <span class="cline-any cline-yes">1x</span>
755
+ <span class="cline-any cline-yes">1x</span>
756
+ <span class="cline-any cline-yes">233x</span>
757
+ <span class="cline-any cline-yes">233x</span>
758
+ <span class="cline-any cline-yes">203x</span>
340
759
  <span class="cline-any cline-yes">203x</span>
341
- <span class="cline-any cline-yes">216x</span>
760
+ <span class="cline-any cline-yes">30x</span>
761
+ <span class="cline-any cline-yes">30x</span>
762
+ <span class="cline-any cline-yes">233x</span>
763
+ <span class="cline-any cline-yes">13x</span>
764
+ <span class="cline-any cline-yes">13x</span>
765
+ <span class="cline-any cline-yes">17x</span>
766
+ <span class="cline-any cline-yes">17x</span>
767
+ <span class="cline-any cline-yes">233x</span>
768
+ <span class="cline-any cline-yes">3x</span>
769
+ <span class="cline-any cline-yes">3x</span>
770
+ <span class="cline-any cline-yes">14x</span>
771
+ <span class="cline-any cline-yes">14x</span>
772
+ <span class="cline-any cline-yes">14x</span>
773
+ <span class="cline-any cline-yes">14x</span>
774
+ <span class="cline-any cline-yes">1x</span>
775
+ <span class="cline-any cline-yes">1x</span>
776
+ <span class="cline-any cline-yes">1x</span>
777
+ <span class="cline-any cline-yes">1x</span>
778
+ <span class="cline-any cline-yes">233x</span>
779
+ <span class="cline-any cline-yes">233x</span>
780
+ <span class="cline-any cline-yes">1x</span>
781
+ <span class="cline-any cline-yes">1x</span>
782
+ <span class="cline-any cline-yes">1x</span>
783
+ <span class="cline-any cline-yes">1x</span>
784
+ <span class="cline-any cline-yes">1x</span>
785
+ <span class="cline-any cline-yes">1x</span>
786
+ <span class="cline-any cline-yes">1x</span>
787
+ <span class="cline-any cline-yes">1x</span>
788
+ <span class="cline-any cline-yes">1x</span>
789
+ <span class="cline-any cline-yes">1x</span>
790
+ <span class="cline-any cline-yes">1x</span>
791
+ <span class="cline-any cline-yes">1x</span>
792
+ <span class="cline-any cline-yes">233x</span>
793
+ <span class="cline-any cline-yes">1x</span>
794
+ <span class="cline-any cline-yes">1x</span>
795
+ <span class="cline-any cline-yes">232x</span>
796
+ <span class="cline-any cline-yes">233x</span>
797
+ <span class="cline-any cline-yes">1x</span>
798
+ <span class="cline-any cline-yes">1x</span>
799
+ <span class="cline-any cline-yes">1x</span>
800
+ <span class="cline-any cline-yes">1x</span>
801
+ <span class="cline-any cline-yes">1x</span>
802
+ <span class="cline-any cline-yes">1x</span>
803
+ <span class="cline-any cline-yes">1x</span>
804
+ <span class="cline-any cline-yes">1x</span>
805
+ <span class="cline-any cline-yes">233x</span>
342
806
  <span class="cline-any cline-yes">2x</span>
343
- <span class="cline-any cline-yes">216x</span>
344
- <span class="cline-any cline-yes">216x</span>
345
- <span class="cline-any cline-yes">11x</span>
346
- <span class="cline-any cline-yes">216x</span>
347
- <span class="cline-any cline-yes">216x</span>
807
+ <span class="cline-any cline-yes">231x</span>
348
808
  <span class="cline-any cline-yes">1x</span>
349
809
  <span class="cline-any cline-yes">1x</span>
350
- <span class="cline-any cline-yes">216x</span>
351
- <span class="cline-any cline-yes">214x</span>
352
- <span class="cline-any cline-yes">206x</span>
353
- <span class="cline-any cline-yes">205x</span>
354
- <span class="cline-any cline-yes">216x</span>
355
- <span class="cline-any cline-yes">8x</span>
356
- <span class="cline-any cline-yes">8x</span>
357
- <span class="cline-any cline-yes">8x</span>
358
- <span class="cline-any cline-yes">8x</span>
359
810
  <span class="cline-any cline-yes">1x</span>
360
811
  <span class="cline-any cline-yes">1x</span>
361
812
  <span class="cline-any cline-yes">1x</span>
@@ -363,75 +814,333 @@
363
814
  <span class="cline-any cline-yes">1x</span>
364
815
  <span class="cline-any cline-yes">1x</span>
365
816
  <span class="cline-any cline-yes">1x</span>
817
+ <span class="cline-any cline-yes">233x</span>
818
+ <span class="cline-any cline-yes">231x</span>
819
+ <span class="cline-any cline-yes">231x</span>
820
+ <span class="cline-any cline-yes">231x</span>
821
+ <span class="cline-any cline-yes">210x</span>
822
+ <span class="cline-any cline-yes">210x</span>
823
+ <span class="cline-any cline-yes">21x</span>
824
+ <span class="cline-any cline-yes">21x</span>
825
+ <span class="cline-any cline-yes">21x</span>
826
+ <span class="cline-any cline-yes">21x</span>
827
+ <span class="cline-any cline-yes">21x</span>
366
828
  <span class="cline-any cline-yes">1x</span>
367
829
  <span class="cline-any cline-yes">1x</span>
368
830
  <span class="cline-any cline-yes">1x</span>
369
831
  <span class="cline-any cline-yes">1x</span>
370
- <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">&lt;template&gt;
371
- &lt;div class="flex justify-center flex-col w-fit"&gt;
372
- &lt;input
373
- type="checkbox"
374
- :id="id"
375
- :disabled="disabled"
376
- :checked="checked"
377
- :class="staticInputClass"
378
- :required="required"
379
- :value="value"
380
- @change="emit('change', $event)"
381
- v-model="model"
382
- :indeterminate="indeterminate"
383
- ref="refCheckbox"
384
- /&gt;
385
- &lt;label :for="id" :class="[staticLabelClass, computedLabelClass]"&gt;
386
- &lt;FzIcon
387
- :name="computedName"
388
- :size="size"
389
- :class="[staticIconClass, computedIconClasses]"
390
- :variant="computedVariant"
391
- /&gt;
392
- {{ <span class="branch-0 cbranch-no" title="branch not covered" >standalone ? "" : l</span>abel }}
393
- &lt;/label&gt;
394
- &lt;FzRadioErrorText :size="size" v-if="error &amp;&amp; $slots.error"&gt;
395
- &lt;slot name="error" /&gt;
396
- &lt;/FzRadioErrorText&gt;
397
- &lt;slot name="children" /&gt;
398
- &lt;/div&gt;
399
- &lt;/template&gt;
400
- &nbsp;
401
- &lt;script setup lang="ts"&gt;
402
- import { computed, onMounted, ref } from "vue";
832
+ <span class="cline-any cline-yes">1x</span>
833
+ <span class="cline-any cline-yes">1x</span>
834
+ <span class="cline-any cline-yes">1x</span>
835
+ <span class="cline-any cline-yes">1x</span>
836
+ <span class="cline-any cline-yes">1x</span>
837
+ <span class="cline-any cline-yes">1x</span>
838
+ <span class="cline-any cline-yes">1x</span>
839
+ <span class="cline-any cline-yes">1x</span>
840
+ <span class="cline-any cline-yes">1x</span>
841
+ <span class="cline-any cline-yes">1x</span>
842
+ <span class="cline-any cline-yes">1x</span>
843
+ <span class="cline-any cline-yes">1x</span>
844
+ <span class="cline-any cline-yes">1x</span>
845
+ <span class="cline-any cline-yes">1x</span>
846
+ <span class="cline-any cline-yes">1x</span>
847
+ <span class="cline-any cline-yes">1x</span>
848
+ <span class="cline-any cline-yes">1x</span>
849
+ <span class="cline-any cline-yes">1x</span>
850
+ <span class="cline-any cline-yes">1x</span>
851
+ <span class="cline-any cline-yes">1x</span>
852
+ <span class="cline-any cline-yes">1x</span>
853
+ <span class="cline-any cline-yes">1x</span>
854
+ <span class="cline-any cline-yes">1x</span>
855
+ <span class="cline-any cline-yes">1x</span>
856
+ <span class="cline-any cline-yes">1x</span>
857
+ <span class="cline-any cline-yes">1x</span>
858
+ <span class="cline-any cline-yes">1x</span>
859
+ <span class="cline-any cline-yes">1x</span>
860
+ <span class="cline-any cline-yes">1x</span>
861
+ <span class="cline-any cline-yes">1x</span>
862
+ <span class="cline-any cline-yes">1x</span>
863
+ <span class="cline-any cline-yes">1x</span>
864
+ <span class="cline-any cline-yes">1x</span>
865
+ <span class="cline-any cline-yes">1x</span>
866
+ <span class="cline-any cline-yes">1x</span>
867
+ <span class="cline-any cline-yes">1x</span>
868
+ <span class="cline-any cline-yes">1x</span>
869
+ <span class="cline-any cline-yes">1x</span>
870
+ <span class="cline-any cline-yes">1x</span>
871
+ <span class="cline-any cline-yes">1x</span>
872
+ <span class="cline-any cline-yes">1x</span>
873
+ <span class="cline-any cline-yes">1x</span>
874
+ <span class="cline-any cline-yes">1x</span>
875
+ <span class="cline-any cline-yes">1x</span>
876
+ <span class="cline-any cline-yes">1x</span>
877
+ <span class="cline-any cline-yes">1x</span>
878
+ <span class="cline-any cline-yes">1x</span>
879
+ <span class="cline-any cline-yes">1x</span>
880
+ <span class="cline-any cline-yes">1x</span>
881
+ <span class="cline-any cline-yes">1x</span>
882
+ <span class="cline-any cline-yes">1x</span>
883
+ <span class="cline-any cline-yes">1x</span>
884
+ <span class="cline-any cline-yes">1x</span>
885
+ <span class="cline-any cline-yes">1x</span>
886
+ <span class="cline-any cline-yes">1x</span>
887
+ <span class="cline-any cline-yes">1x</span>
888
+ <span class="cline-any cline-yes">1x</span>
889
+ <span class="cline-any cline-yes">1x</span>
890
+ <span class="cline-any cline-yes">1x</span>
891
+ <span class="cline-any cline-yes">1x</span>
892
+ <span class="cline-any cline-yes">1x</span>
893
+ <span class="cline-any cline-yes">1x</span>
894
+ <span class="cline-any cline-yes">1x</span>
895
+ <span class="cline-any cline-yes">1x</span>
896
+ <span class="cline-any cline-yes">1x</span>
897
+ <span class="cline-any cline-yes">1x</span>
898
+ <span class="cline-any cline-yes">1x</span>
899
+ <span class="cline-any cline-yes">1x</span>
900
+ <span class="cline-any cline-yes">1x</span>
901
+ <span class="cline-any cline-yes">1x</span>
902
+ <span class="cline-any cline-yes">1x</span>
903
+ <span class="cline-any cline-yes">1x</span>
904
+ <span class="cline-any cline-yes">1x</span>
905
+ <span class="cline-any cline-yes">1x</span>
906
+ <span class="cline-any cline-yes">1x</span>
907
+ <span class="cline-any cline-yes">1x</span>
908
+ <span class="cline-any cline-yes">1x</span>
909
+ <span class="cline-any cline-yes">1x</span>
910
+ <span class="cline-any cline-yes">1x</span>
911
+ <span class="cline-any cline-yes">1x</span>
912
+ <span class="cline-any cline-yes">1x</span>
913
+ <span class="cline-any cline-yes">1x</span>
914
+ <span class="cline-any cline-yes">1x</span>
915
+ <span class="cline-any cline-yes">1x</span>
916
+ <span class="cline-any cline-yes">1x</span>
917
+ <span class="cline-any cline-yes">1x</span>
918
+ <span class="cline-any cline-yes">1x</span>
919
+ <span class="cline-any cline-yes">1x</span>
920
+ <span class="cline-any cline-yes">1x</span>
921
+ <span class="cline-any cline-yes">1x</span>
922
+ <span class="cline-any cline-yes">1x</span>
923
+ <span class="cline-any cline-yes">1x</span>
924
+ <span class="cline-any cline-yes">1x</span>
925
+ <span class="cline-any cline-yes">1x</span>
926
+ <span class="cline-any cline-yes">1x</span>
927
+ <span class="cline-any cline-yes">1x</span>
928
+ <span class="cline-any cline-yes">1x</span>
929
+ <span class="cline-any cline-yes">1x</span>
930
+ <span class="cline-any cline-yes">1x</span>
931
+ <span class="cline-any cline-yes">1x</span>
932
+ <span class="cline-any cline-yes">1x</span>
933
+ <span class="cline-any cline-yes">1x</span>
934
+ <span class="cline-any cline-yes">1x</span>
935
+ <span class="cline-any cline-yes">1x</span>
936
+ <span class="cline-any cline-yes">1x</span>
937
+ <span class="cline-any cline-yes">1x</span>
938
+ <span class="cline-any cline-yes">1x</span>
939
+ <span class="cline-any cline-yes">1x</span>
940
+ <span class="cline-any cline-yes">1x</span>
941
+ <span class="cline-any cline-yes">1x</span>
942
+ <span class="cline-any cline-yes">1x</span>
943
+ <span class="cline-any cline-yes">1x</span>
944
+ <span class="cline-any cline-yes">1x</span>
945
+ <span class="cline-any cline-yes">1x</span>
946
+ <span class="cline-any cline-yes">1x</span>
947
+ <span class="cline-any cline-yes">1x</span>
948
+ <span class="cline-any cline-yes">1x</span>
949
+ <span class="cline-any cline-yes">1x</span>
950
+ <span class="cline-any cline-yes">1x</span>
951
+ <span class="cline-any cline-yes">1x</span>
952
+ <span class="cline-any cline-yes">1x</span>
953
+ <span class="cline-any cline-yes">1x</span>
954
+ <span class="cline-any cline-yes">1x</span>
955
+ <span class="cline-any cline-yes">1x</span>
956
+ <span class="cline-any cline-yes">1x</span>
957
+ <span class="cline-any cline-yes">1x</span>
958
+ <span class="cline-any cline-yes">1x</span>
959
+ <span class="cline-any cline-yes">1x</span>
960
+ <span class="cline-any cline-yes">1x</span>
961
+ <span class="cline-any cline-yes">1x</span>
962
+ <span class="cline-any cline-yes">1x</span>
963
+ <span class="cline-any cline-yes">1x</span>
964
+ <span class="cline-any cline-yes">1x</span>
965
+ <span class="cline-any cline-yes">1x</span>
966
+ <span class="cline-any cline-yes">1x</span>
967
+ <span class="cline-any cline-yes">1x</span>
968
+ <span class="cline-any cline-yes">1x</span>
969
+ <span class="cline-any cline-yes">1x</span>
970
+ <span class="cline-any cline-yes">1x</span>
971
+ <span class="cline-any cline-yes">1x</span>
972
+ <span class="cline-any cline-yes">1x</span>
973
+ <span class="cline-any cline-yes">1x</span>
974
+ <span class="cline-any cline-yes">1x</span>
975
+ <span class="cline-any cline-yes">1x</span>
976
+ <span class="cline-any cline-yes">1x</span>
977
+ <span class="cline-any cline-yes">1x</span>
978
+ <span class="cline-any cline-yes">1x</span>
979
+ <span class="cline-any cline-yes">1x</span>
980
+ <span class="cline-any cline-yes">1x</span>
981
+ <span class="cline-any cline-yes">1x</span>
982
+ <span class="cline-any cline-yes">1x</span>
983
+ <span class="cline-any cline-yes">1x</span>
984
+ <span class="cline-any cline-yes">1x</span>
985
+ <span class="cline-any cline-yes">1x</span>
986
+ <span class="cline-any cline-yes">1x</span>
987
+ <span class="cline-any cline-yes">1x</span>
988
+ <span class="cline-any cline-yes">1x</span>
989
+ <span class="cline-any cline-yes">1x</span>
990
+ <span class="cline-any cline-yes">1x</span>
991
+ <span class="cline-any cline-yes">1x</span>
992
+ <span class="cline-any cline-yes">1x</span>
993
+ <span class="cline-any cline-yes">1x</span>
994
+ <span class="cline-any cline-yes">1x</span>
995
+ <span class="cline-any cline-yes">1x</span>
996
+ <span class="cline-any cline-yes">1x</span>
997
+ <span class="cline-any cline-yes">1x</span>
998
+ <span class="cline-any cline-yes">1x</span>
999
+ <span class="cline-any cline-yes">1x</span>
1000
+ <span class="cline-any cline-yes">1x</span>
1001
+ <span class="cline-any cline-yes">1x</span>
1002
+ <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">&lt;script setup lang="ts"&gt;
1003
+ /**
1004
+ * FzCheckbox Component
1005
+ *
1006
+ * A fully accessible checkbox component with support for single selection (boolean),
1007
+ * multi-selection (array), indeterminate states, and hierarchical relationships.
1008
+ *
1009
+ * @component
1010
+ * @example
1011
+ * // Single checkbox (boolean)
1012
+ * &lt;FzCheckbox v-model="accepted" label="I accept terms" /&gt;
1013
+ *
1014
+ * @example
1015
+ * // Multi-select checkbox (array)
1016
+ * &lt;FzCheckbox v-model="selectedItems" value="item1" label="Item 1" /&gt;
1017
+ *
1018
+ * @example
1019
+ * // Indeterminate checkbox (parent with children)
1020
+ * &lt;FzCheckbox v-model="selection" :indeterminate="true" label="Select All" /&gt;
1021
+ */
1022
+ import { computed, onMounted, shallowRef, watch } from "vue";
403
1023
  import { FzCheckboxProps } from "./types";
404
- import { mapSizeToClasses } from "./common";
405
- import FzRadioErrorText from "./components/FzCheckboxErrorText.vue";
406
- import { FzIcon } from "@fiscozen/icons";
1024
+ import { generateCheckboxId } from "./utils";
1025
+ import { FzIcon, type IconVariant } from "@fiscozen/icons";
1026
+ import { FzTooltip } from "@fiscozen/tooltip";
1027
+ import ErrorAlert from "./components/ErrorAlert.vue";
407
1028
  &nbsp;
408
1029
  const props = withDefaults(defineProps&lt;FzCheckboxProps&gt;(), {
409
- size: "md",
410
1030
  indeterminate: false,
411
1031
  });
412
1032
  &nbsp;
413
- const currentValue = computed(() =&gt; props.<span class="branch-0 cbranch-no" title="branch not covered" >value ?? props.label)</span>;
1033
+ /**
1034
+ * Deprecation warning for size prop.
1035
+ * Watches the size prop and warns once on mount if it's provided.
1036
+ * Using watch with immediate:true ensures the warning only fires once per component instance.
1037
+ */
1038
+ watch(
1039
+ () =&gt; props.size,
1040
+ (size) =&gt; {
1041
+ if (size !== undefined) <span class="branch-0 cbranch-no" title="branch not covered" >{</span>
1042
+ <span class="cstat-no" title="statement not covered" > console.warn(</span>
1043
+ <span class="cstat-no" title="statement not covered" > '[FzCheckbox] The "size" prop is deprecated and will be removed in a future version. Checkboxes now have a fixed size.'</span>
1044
+ <span class="cstat-no" title="statement not covered" > );</span>
1045
+ <span class="cstat-no" title="statement not covered" > }</span>
1046
+ },
1047
+ { immediate: true }
1048
+ );
1049
+ &nbsp;
1050
+ /**
1051
+ * FontAwesome icon names for different checkbox states.
1052
+ * Frozen for optimal memory usage - string literals are interned once and reused.
1053
+ *
1054
+ * @constant
1055
+ *
1056
+ * @example
1057
+ * const icon = isChecked ? CHECKBOX_ICONS.CHECKED : CHECKBOX_ICONS.UNCHECKED;
1058
+ */
1059
+ const CHECKBOX_ICONS = Object.freeze({
1060
+ /** Icon for indeterminate state (partial selection) */
1061
+ INDETERMINATE: "square-minus",
1062
+ /** Icon for checked state */
1063
+ CHECKED: "square-check",
1064
+ /** Icon for unchecked state */
1065
+ UNCHECKED: "square",
1066
+ } as const);
1067
+ &nbsp;
1068
+ /**
1069
+ * FontAwesome icon variant prefixes for checkbox icons.
1070
+ *
1071
+ * @constant
1072
+ */
1073
+ const CHECKBOX_ICON_VARIANTS = Object.freeze({
1074
+ /** Solid variant (filled) - used for checked and indeterminate states */
1075
+ SOLID: "fas",
1076
+ /** Regular variant (outline) - used for unchecked state */
1077
+ REGULAR: "far",
1078
+ } as const);
414
1079
  &nbsp;
415
- const id = computed(
416
- () =&gt; `fz-checkbox-${Math.random().toString(36).slice(2, 9)}`,
1080
+ /**
1081
+ * Computes the actual value to use for the checkbox.
1082
+ * Falls back to label if no explicit value is provided.
1083
+ */
1084
+ const currentValue = computed&lt;string | number | boolean&gt;(
1085
+ () =&gt; props.<span class="branch-0 cbranch-no" title="branch not covered" >value ?? props.label</span>
417
1086
  );
418
1087
  &nbsp;
1088
+ /**
1089
+ * Unique identifier for the checkbox input.
1090
+ * Uses provided checkboxId prop if available, otherwise generates unique ID
1091
+ * using timestamp + random suffix strategy.
1092
+ * Deterministic IDs are important for aria-owns relationships in hierarchical structures.
1093
+ */
1094
+ const id: string = props.checkboxId || generateCheckboxId();
1095
+ &nbsp;
1096
+ /**
1097
+ * Two-way binding for checkbox state.
1098
+ * Supports three modes:
1099
+ * - null/undefined: Uncontrolled state
1100
+ * - boolean: Single checkbox (true/false)
1101
+ * - array: Multi-select checkbox group (contains values of checked items)
1102
+ */
419
1103
  const model = defineModel&lt;
420
1104
  null | undefined | boolean | (string | number | boolean)[]
421
1105
  &gt;({
422
1106
  required: true,
423
1107
  });
424
1108
  &nbsp;
425
- const emit = defineEmits(["change"]);
426
- const refCheckbox = ref&lt;HTMLInputElement | null&gt;(null);
1109
+ const emit = defineEmits&lt;{
1110
+ change: [event: Event];
1111
+ }&gt;();
1112
+ &nbsp;
1113
+ /**
1114
+ * Reference to the native checkbox input element.
1115
+ * Uses shallowRef for optimal performance with DOM element references.
1116
+ * ShallowRef avoids deep reactivity tracking of all DOM element properties.
1117
+ *
1118
+ * @see https://vuejs.org/api/reactivity-advanced.html#shallowref
1119
+ * @note When upgrading to Vue 3.5+, consider migrating to useTemplateRef()
1120
+ */
1121
+ const refCheckbox = shallowRef&lt;HTMLInputElement | null&gt;(null);
1122
+ &nbsp;
1123
+ /**
1124
+ * CSS classes for the hidden native checkbox input.
1125
+ * Uses "peer" for Tailwind's peer selector to style adjacent elements based on input state.
1126
+ * Input is visually hidden but remains accessible to screen readers and keyboard navigation.
1127
+ */
1128
+ const staticInputClass: string = "w-0 h-0 peer fz-hidden-input";
427
1129
  &nbsp;
428
- const staticInputClass = "w-0 h-0 peer fz-hidden-input";
429
- const staticLabelClass = `
430
- flex gap-4 hover:cursor-pointer
1130
+ /**
1131
+ * CSS classes for the label element.
1132
+ * Includes focus ring styles.
1133
+ *
1134
+ * Focus: blue-200 border appears around checkbox icon
1135
+ *
1136
+ * Items aligned to start (top) for proper alignment with long multi-line labels.
1137
+ */
1138
+ const staticLabelClass: string = `
1139
+ flex gap-6 items-start hover:cursor-pointer text-core-black
431
1140
  peer-focus:[&amp;_div]:after:border-1
432
1141
  peer-focus:[&amp;_div]:after:border-solid
433
- peer-focus:[&amp;_div]:after:rounded-[3px]
434
- peer-focus:[&amp;_div]:after:border-blue-500
1142
+ peer-focus:[&amp;_div]:after:rounded-[2px]
1143
+ peer-focus:[&amp;_div]:after:border-blue-200
435
1144
  peer-focus:[&amp;_div]:after:content-['']
436
1145
  peer-focus:[&amp;_div]:after:top-0
437
1146
  peer-focus:[&amp;_div]:after:left-0
@@ -439,31 +1148,18 @@ const staticLabelClass = `
439
1148
  peer-focus:[&amp;_div]:after:bottom-0
440
1149
  peer-focus:[&amp;_div]:after:absolute
441
1150
  `;
442
- const staticIconClass = "relative";
443
1151
  &nbsp;
444
- const computedLabelClass = computed(() =&gt; [
445
- mapSizeToClasses[props.size],
446
- getTextClassForLabel(),
447
- ]);
448
- &nbsp;
449
- const computedIconClasses = computed(() =&gt; [
450
- props.size === <span class="branch-0 cbranch-no" title="branch not covered" >"sm" ? "mt-1" : "</span>",
451
- getTextClassForIcon(),
452
- ]);
453
- &nbsp;
454
- const computedName = computed(() =&gt; {
455
- if (props.indeterminate) <span class="branch-0 cbranch-no" title="branch not covered" >{</span>
456
- <span class="cstat-no" title="statement not covered" > return "square-minus";</span>
457
- <span class="cstat-no" title="statement not covered" > }</span>
458
- &nbsp;
459
- return checkValueIsInModel() ? "square-check" : "square";
460
- });
1152
+ /** Position context for the focus ring pseudo-element */
1153
+ const staticIconClass: string = "relative";
461
1154
  &nbsp;
462
- const computedVariant = computed(() =&gt; {
463
- return !props.indeterminate &amp;&amp; !checkValueIsInModel() ? "far" : "fas";
464
- });
465
- &nbsp;
466
- const checkValueIsInModel = () =&gt; {
1155
+ /**
1156
+ * Determines if the checkbox is currently checked.
1157
+ * Handles both boolean and array models:
1158
+ * - Boolean model: Returns the boolean value directly
1159
+ * - Array model: Returns true if the array contains this checkbox's value
1160
+ * - Null/undefined: Returns false
1161
+ */
1162
+ const isChecked = computed&lt;boolean&gt;(() =&gt; {
467
1163
  if (model.value == null) return false;
468
1164
  &nbsp;
469
1165
  if (typeof model.value === "boolean") {
@@ -471,46 +1167,242 @@ const checkValueIsInModel = () =&gt; {
471
1167
  } else {
472
1168
  return model.value.includes(currentValue.value);
473
1169
  }
474
- };
475
- &nbsp;
476
- const getTextClassForLabel = () =&gt; {
477
- switch (true) {
478
- case props.disabled:
479
- return "text-grey-300";
480
- case props.error:
481
- return "text-semantic-error";
482
- case props.emphasis:
483
- return "text-core-black peer-checked:[&amp;_div]:text-blue-500 peer-indeterminate:[&amp;_div]:text-blue-500";
484
- default:
485
- return "text-core-black";
1170
+ });
1171
+ &nbsp;
1172
+ /**
1173
+ * Computes text color classes for the label and checkbox icon.
1174
+ *
1175
+ * Uses peer-checked and peer-indeterminate selectors to apply colors based on input state.
1176
+ *
1177
+ * Priority order (highest to lowest):
1178
+ * 1. Disabled: grey-300 (label + checkbox)
1179
+ * 2. Error: semantic-error-200 (label + checkbox, all states)
1180
+ * 3. Emphasis: blue-500 (checkbox when checked/indeterminate)
1181
+ * 4. Checked/Indeterminate: grey-500 (checkbox only)
1182
+ * 5. Unchecked: grey-400 (checkbox only, handled by textClassForIcon)
1183
+ *
1184
+ * @returns Tailwind CSS classes for label text and checkbox icon
1185
+ */
1186
+ const textClassForLabel = computed&lt;string&gt;(() =&gt; {
1187
+ // Priority 1: Disabled
1188
+ if (props.disabled) {
1189
+ return "text-grey-300 [&amp;_div]:text-grey-300";
486
1190
  }
487
- };
488
- &nbsp;
489
- const getTextClassForIcon = () =&gt; {
490
- switch (true) {
491
- case props.disabled:
492
- return "text-grey-300";
493
- case props.error:
494
- return "text-semantic-error";
495
- case props.emphasis:
496
- default:
497
- return "text-grey-500";
1191
+ &nbsp;
1192
+ // Priority 2: Error (overrides everything except disabled)
1193
+ // Red for checkbox icon AND label text (all states: unchecked, checked, indeterminate)
1194
+ if (props.error) {
1195
+ return "text-semantic-error-200 [&amp;_div]:text-semantic-error-200 peer-checked:[&amp;_div]:text-semantic-error-200 peer-indeterminate:[&amp;_div]:text-semantic-error-200";
498
1196
  }
499
- };
500
1197
  &nbsp;
1198
+ // Priority 3: Emphasis (blue-500 when checked/indeterminate)
1199
+ // Force blue color even for indeterminate state
1200
+ if (props.emphasis) {
1201
+ return "text-core-black [&amp;_div]:text-blue-500 peer-checked:[&amp;_div]:text-blue-500 peer-indeterminate:[&amp;_div]:text-blue-500";
1202
+ }
1203
+ &nbsp;
1204
+ // Priority 4-5: Default (grey-500 when checked/indeterminate, grey-400 when unchecked)
1205
+ // Hover: implemented in CSS (see &lt;style&gt; section)
1206
+ return "text-core-black peer-checked:[&amp;_div]:text-grey-500 peer-indeterminate:[&amp;_div]:text-grey-500";
1207
+ });
1208
+ &nbsp;
1209
+ /**
1210
+ * Computes base text color for the checkbox icon.
1211
+ *
1212
+ * Handles disabled, error, and emphasis states. Default unchecked color is grey-400.
1213
+ * Checked/indeterminate colors are controlled by textClassForLabel via peer-checked/peer-indeterminate.
1214
+ *
1215
+ * Priority order:
1216
+ * 1. Disabled: grey-300
1217
+ * 2. Error: semantic-error-200
1218
+ * 3. Emphasis: blue-500 (all states)
1219
+ * 4-5. Default: grey-400 (unchecked)
1220
+ *
1221
+ * @returns Tailwind CSS class for checkbox icon color
1222
+ */
1223
+ const textClassForIcon = computed&lt;string&gt;(() =&gt; {
1224
+ // Priority 1: Disabled
1225
+ if (props.disabled) {
1226
+ return "text-grey-300";
1227
+ }
1228
+ &nbsp;
1229
+ // Priority 2: Error
1230
+ if (props.error) {
1231
+ return "text-semantic-error-200";
1232
+ }
1233
+ &nbsp;
1234
+ // Priority 3: Emphasis (blue-500 for all states)
1235
+ if (props.emphasis) {
1236
+ return "text-blue-500";
1237
+ }
1238
+ &nbsp;
1239
+ // Priority 4-5: Default unchecked (grey-400)
1240
+ // Checked/indeterminate colors are controlled by textClassForLabel
1241
+ return "text-grey-400";
1242
+ });
1243
+ &nbsp;
1244
+ /** Dynamic label classes based on state (disabled, error, emphasis) */
1245
+ const computedLabelClass = computed&lt;string[]&gt;(() =&gt; [
1246
+ "text-base",
1247
+ textClassForLabel.value,
1248
+ ]);
1249
+ &nbsp;
1250
+ /** Dynamic icon classes based on size and state */
1251
+ const computedIconClasses = computed&lt;string[]&gt;(() =&gt; [textClassForIcon.value]);
1252
+ &nbsp;
1253
+ /**
1254
+ * Determines which FontAwesome icon to display:
1255
+ * - Indeterminate: square with minus (partial selection)
1256
+ * - Checked: square with check
1257
+ * - Unchecked: empty square
1258
+ */
1259
+ const computedIconName = computed&lt;string&gt;(() =&gt; {
1260
+ if (props.indeterminate) {
1261
+ return CHECKBOX_ICONS.INDETERMINATE;
1262
+ }
1263
+ &nbsp;
1264
+ return isChecked.value ? CHECKBOX_ICONS.CHECKED : CHECKBOX_ICONS.UNCHECKED;
1265
+ });
1266
+ &nbsp;
1267
+ /**
1268
+ * FontAwesome icon variant:
1269
+ * - "fas" (solid): For checked or indeterminate states
1270
+ * - "far" (regular): For unchecked state
1271
+ */
1272
+ const computedVariant = computed&lt;IconVariant&gt;(() =&gt; {
1273
+ return props.indeterminate || isChecked.value
1274
+ ? CHECKBOX_ICON_VARIANTS.SOLID
1275
+ : CHECKBOX_ICON_VARIANTS.REGULAR;
1276
+ });
1277
+ &nbsp;
1278
+ /**
1279
+ * Lifecycle hook: Triggers change event on mount if checkbox is initially checked.
1280
+ * This ensures that any parent components listening to change events receive
1281
+ * initial state, which is particularly important for parent checkboxes that need
1282
+ * to synchronize with their children's initial state.
1283
+ */
501
1284
  onMounted(() =&gt; {
502
1285
  if (model.value == null) return;
1286
+ &nbsp;
1287
+ // Boolean model: dispatch change if true
503
1288
  if (typeof model.value === "boolean") {
504
1289
  if (model.value) refCheckbox.value?.dispatchEvent(new Event("change"));
505
- else if (props.checked !== undefined) model.value = props.checked;
506
- } else {
1290
+ }
1291
+ // Array model: dispatch change if this checkbox's value is in the array
1292
+ else {
507
1293
  if (model.value.includes(currentValue.value))
508
1294
  <span class="branch-0 cbranch-no" title="branch not covered" > refCheckbox.value?.dispatchEvent(new Event("change"));</span>
509
- else if (props.checked) <span class="branch-0 cbranch-no" title="branch not covered" >model.value.push(currentValue.value);</span>
510
1295
  }
511
1296
  });
512
1297
  &lt;/script&gt;
1298
+ &nbsp;
1299
+ &lt;template&gt;
1300
+ &lt;!-- Root container: vertical layout with consistent spacing --&gt;
1301
+ &lt;div class="flex justify-center flex-col w-fit gap-4"&gt;
1302
+ &lt;!-- Checkbox row: input + label + optional tooltip, aligned to top for long labels --&gt;
1303
+ &lt;!-- Hover effects are handled in CSS using data attributes --&gt;
1304
+ &lt;div
1305
+ class="flex items-start group"
1306
+ :data-emphasis="emphasis || undefined"
1307
+ :data-error="error || undefined"
1308
+ :data-disabled="disabled || undefined"
1309
+ &gt;
1310
+ &lt;!--
1311
+ Native checkbox input (visually hidden but functionally present)
1312
+ - Maintains native keyboard navigation and form behavior
1313
+ - Screen readers can interact with it normally
1314
+ - Styled via adjacent label and icon using Tailwind's "peer" selector
1315
+ --&gt;
1316
+ &lt;input
1317
+ type="checkbox"
1318
+ :id="id"
1319
+ :disabled="disabled"
1320
+ :class="staticInputClass"
1321
+ :required="required"
1322
+ :value="value"
1323
+ @change="emit('change', $event)"
1324
+ v-model="model"
1325
+ :aria-checked="indeterminate ? 'mixed' : isChecked"
1326
+ :aria-label="standalone ? label : undefined"
1327
+ :aria-required="required ? 'true' : 'false'"
1328
+ :aria-invalid="error ? 'true' : 'false'"
1329
+ :aria-describedby="error &amp;&amp; $slots.error ? `${id}-error` : undefined"
1330
+ :aria-labelledby="standalone ? undefined : `${id}-label`"
1331
+ :aria-owns="props.ariaOwns"
1332
+ ref="refCheckbox"
1333
+ /&gt;
1334
+ &lt;!--
1335
+ Label element: provides click target and visual representation
1336
+ Connected to hidden input via "for" attribute
1337
+ --&gt;
1338
+ &lt;label
1339
+ :id="`${id}-label`"
1340
+ :for="id"
1341
+ :class="[staticLabelClass, computedLabelClass]"
1342
+ &gt;
1343
+ &lt;!--
1344
+ Visual checkbox icon (replaces hidden native checkbox)
1345
+ aria-hidden because it's purely decorative - the native input conveys state
1346
+ @TODO: When FzIcon natively supports ariaHidden prop, remove aria-hidden as HTML attribute and use :aria-hidden as prop
1347
+ --&gt;
1348
+ &lt;FzIcon
1349
+ :name="computedIconName"
1350
+ size="md"
1351
+ :class="[staticIconClass, computedIconClasses]"
1352
+ :variant="computedVariant"
1353
+ aria-hidden="true"
1354
+ /&gt;
1355
+ &lt;!-- Label text (hidden in standalone mode for checkbox-only display) --&gt;
1356
+ &lt;template v-if="!standalone"&gt;{{ label }}&lt;/template&gt;
1357
+ &lt;/label&gt;
1358
+ &nbsp;
1359
+ &lt;!--
1360
+ Optional tooltip for additional context
1361
+ @TODO: When FzTooltip supports keyboard accessibility and ARIA attributes (role="tooltip", aria-describedby), update implementation
1362
+ --&gt;
1363
+ &lt;FzTooltip v-if="tooltip" v-bind="tooltip" class="ml-6"&gt;
1364
+ &lt;!--
1365
+ Info icon (informative, not decorative)
1366
+ Has role="img" and aria-label because it conveys meaning
1367
+ @TODO: When FzIcon natively supports role and ariaLabel props, use them instead of HTML attributes
1368
+ --&gt;
1369
+ &lt;FzIcon
1370
+ name="info-circle"
1371
+ size="md"
1372
+ class="text-semantic-info"
1373
+ role="img"
1374
+ aria-label="Informazioni aggiuntive"
1375
+ /&gt;
1376
+ &lt;/FzTooltip&gt;
1377
+ &lt;/div&gt;
1378
+ &lt;!-- Error message display with accessible ARIA live region --&gt;
1379
+ &lt;ErrorAlert v-if="error &amp;&amp; $slots.error" :id="`${id}-error`"&gt;
1380
+ &lt;slot name="error" /&gt;
1381
+ &lt;/ErrorAlert&gt;
1382
+ &nbsp;
1383
+ &lt;!--
1384
+ Children slot for nested checkboxes
1385
+ Used by FzCheckboxGroupOption to render child checkboxes
1386
+ --&gt;
1387
+ &lt;slot name="children" /&gt;
1388
+ &lt;/div&gt;
1389
+ &lt;/template&gt;
1390
+ &nbsp;
513
1391
  &lt;style scoped&gt;
1392
+ /**
1393
+ * Visually hides the native checkbox input while keeping it accessible.
1394
+ *
1395
+ * Why not display:none or visibility:hidden?
1396
+ * - Those would remove the input from the accessibility tree
1397
+ * - Screen readers couldn't interact with it
1398
+ * - Keyboard navigation would be broken
1399
+ *
1400
+ * This approach:
1401
+ * - Maintains accessibility tree presence
1402
+ * - Preserves keyboard focus capability
1403
+ * - Allows screen reader interaction
1404
+ * - Enables form submission behavior
1405
+ */
514
1406
  .fz-hidden-input {
515
1407
  opacity: 0;
516
1408
  margin: 0;
@@ -518,6 +1410,62 @@ onMounted(() =&gt; {
518
1410
  border: 0 none;
519
1411
  appearance: none;
520
1412
  }
1413
+ &nbsp;
1414
+ /**
1415
+ * Hover effects for checkbox icon and label.
1416
+ *
1417
+ * Uses data attributes (data-emphasis, data-error, data-disabled) and pseudo-classes
1418
+ * (:checked, :indeterminate) to apply hover colors based on state.
1419
+ *
1420
+ * Priority order (highest to lowest):
1421
+ * 1. Disabled: no hover effect
1422
+ * 2. Error: semantic-error-300 (checkbox + label, all states)
1423
+ * 3. Emphasis: blue-600 (checkbox only, all states)
1424
+ * 4. Checked/Indeterminate: core-black (checkbox only, no emphasis/error)
1425
+ * 5. Unchecked: blue-600 (checkbox only, no emphasis/error)
1426
+ */
1427
+ &nbsp;
1428
+ /* Priority 1: Disabled - no hover (no rule needed) */
1429
+ &nbsp;
1430
+ /* Priority 2: Error hover (all states): semantic-error-300 for checkbox AND label */
1431
+ .group[data-error]:hover:not([data-disabled]) .peer ~ label &gt; div {
1432
+ color: var(--semantic-error-300) !important;
1433
+ }
1434
+ .group[data-error]:hover:not([data-disabled]) .peer ~ label {
1435
+ color: var(--semantic-error-300) !important;
1436
+ }
1437
+ &nbsp;
1438
+ /* Priority 3: Emphasis hover (all states): blue-600 */
1439
+ .group[data-emphasis]:hover:not([data-disabled]):not([data-error])
1440
+ .peer
1441
+ ~ label
1442
+ &gt; div {
1443
+ color: var(--blue-600) !important;
1444
+ }
1445
+ &nbsp;
1446
+ /* Priority 4: Checked hover (no emphasis, no error): core-black */
1447
+ .group:hover:not([data-emphasis]):not([data-error]):not([data-disabled])
1448
+ .peer:checked
1449
+ ~ label
1450
+ &gt; div {
1451
+ color: var(--core-black) !important;
1452
+ }
1453
+ &nbsp;
1454
+ /* Priority 4: Indeterminate hover (no emphasis, no error): core-black */
1455
+ .group:hover:not([data-emphasis]):not([data-error]):not([data-disabled])
1456
+ .peer:indeterminate
1457
+ ~ label
1458
+ &gt; div {
1459
+ color: var(--core-black) !important;
1460
+ }
1461
+ &nbsp;
1462
+ /* Priority 5: Unchecked hover (no emphasis, no error): blue-600 */
1463
+ .group:hover:not([data-emphasis]):not([data-error]):not([data-disabled])
1464
+ .peer:not(:checked):not(:indeterminate)
1465
+ ~ label
1466
+ &gt; div {
1467
+ color: var(--blue-600) !important;
1468
+ }
521
1469
  &lt;/style&gt;
522
1470
  &nbsp;</pre></td></tr></table></pre>
523
1471
 
@@ -526,7 +1474,7 @@ onMounted(() =&gt; {
526
1474
  <div class='footer quiet pad2 space-top1 center small'>
527
1475
  Code coverage generated by
528
1476
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
529
- at 2024-11-18T13:59:50.683Z
1477
+ at 2025-10-30T09:58:41.772Z
530
1478
  </div>
531
1479
  <script src="../prettify.js"></script>
532
1480
  <script>