@fiscozen/checkbox 3.0.1 → 3.0.3

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 (23) hide show
  1. package/CHANGELOG.md +32 -0
  2. package/dist/checkbox.css +2 -0
  3. package/dist/checkbox.js +3226 -2550
  4. package/dist/checkbox.umd.cjs +2 -2
  5. package/dist/index.d.ts +1 -0
  6. package/dist/src/FzCheckbox.vue.d.ts +26 -93
  7. package/dist/src/FzCheckboxCard.vue.d.ts +1 -239
  8. package/dist/src/FzCheckboxGroup.vue.d.ts +29 -72
  9. package/dist/src/common.d.ts +6 -1
  10. package/dist/src/components/ErrorAlert.vue.d.ts +12 -20
  11. package/dist/src/components/FzCheckboxGroupOption.vue.d.ts +10 -85
  12. package/dist/src/types.d.ts +0 -1
  13. package/package.json +12 -12
  14. package/src/FzCheckboxCard.vue +1 -1
  15. package/src/FzCheckboxGroup.vue +1 -1
  16. package/src/__tests__/FzCheckboxCard.spec.ts +4 -6
  17. package/src/__tests__/FzCheckboxGroup.spec.ts +1 -1
  18. package/src/__tests__/__snapshots__/FzCheckbox.spec.ts.snap +9 -9
  19. package/src/__tests__/__snapshots__/FzCheckboxCard.spec.ts.snap +1 -1
  20. package/src/__tests__/__snapshots__/FzCheckboxGroup.spec.ts.snap +19 -19
  21. package/src/common.ts +7 -2
  22. package/tsconfig.tsbuildinfo +1 -1
  23. package/dist/style.css +0 -1
package/src/__tests__/__snapshots__/FzCheckbox.spec.ts.snap CHANGED
@@ -30,7 +30,7 @@ exports[`FzCheckbox > Snapshots > should match snapshot - checked state 1`] = `
30
30
  Visual checkbox icon (replaces hidden native checkbox)
31
31
  aria-hidden because it's purely decorative - the native input conveys state
32
32
  @TODO: When FzIcon natively supports ariaHidden prop, remove aria-hidden as HTML attribute and use :aria-hidden as prop
33
- --><span data-v-79ecb611="" role="presentation" class="flex items-center justify-center w-[20px] h-[20px] relative text-grey-400" aria-hidden="true"><svg class="svg-inline--fa fa-square-check h-[16px]" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="square-check" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path class="" fill="currentColor" d="M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zM337 209L209 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L303 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"></path></svg></span><!-- Label text (hidden in standalone mode for checkbox-only display) -->Test Checkbox
33
+ --><span data-v-79ecb611="" role="presentation" class="flex items-center justify-center shrink-0 w-[20px] h-[20px] relative text-grey-400" aria-hidden="true"><svg class="svg-inline--fa fa-square-check h-[16px]" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="square-check" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path class="" fill="currentColor" d="M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zM337 209L209 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L303 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"></path></svg></span><!-- Label text (hidden in standalone mode for checkbox-only display) -->Test Checkbox
34
34
  </label>
35
35
  <!--
36
36
  Optional tooltip for additional context
@@ -76,7 +76,7 @@ exports[`FzCheckbox > Snapshots > should match snapshot - default state 1`] = `
76
76
  Visual checkbox icon (replaces hidden native checkbox)
77
77
  aria-hidden because it's purely decorative - the native input conveys state
78
78
  @TODO: When FzIcon natively supports ariaHidden prop, remove aria-hidden as HTML attribute and use :aria-hidden as prop
79
- --><span data-v-79ecb611="" role="presentation" class="flex items-center justify-center w-[20px] h-[20px] relative text-grey-400" aria-hidden="true"><svg class="svg-inline--fa fa-square h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path class="" fill="currentColor" d="M384 80c8.8 0 16 7.2 16 16l0 320c0 8.8-7.2 16-16 16L64 432c-8.8 0-16-7.2-16-16L48 96c0-8.8 7.2-16 16-16l320 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z"></path></svg></span><!-- Label text (hidden in standalone mode for checkbox-only display) -->Test Checkbox
79
+ --><span data-v-79ecb611="" role="presentation" class="flex items-center justify-center shrink-0 w-[20px] h-[20px] relative text-grey-400" aria-hidden="true"><svg class="svg-inline--fa fa-square h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path class="" fill="currentColor" d="M384 80c8.8 0 16 7.2 16 16l0 320c0 8.8-7.2 16-16 16L64 432c-8.8 0-16-7.2-16-16L48 96c0-8.8 7.2-16 16-16l320 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z"></path></svg></span><!-- Label text (hidden in standalone mode for checkbox-only display) -->Test Checkbox
80
80
  </label>
81
81
  <!--
82
82
  Optional tooltip for additional context
@@ -122,7 +122,7 @@ exports[`FzCheckbox > Snapshots > should match snapshot - disabled state 1`] = `
122
122
  Visual checkbox icon (replaces hidden native checkbox)
123
123
  aria-hidden because it's purely decorative - the native input conveys state
124
124
  @TODO: When FzIcon natively supports ariaHidden prop, remove aria-hidden as HTML attribute and use :aria-hidden as prop
125
- --><span data-v-79ecb611="" role="presentation" class="flex items-center justify-center w-[20px] h-[20px] relative text-grey-300" aria-hidden="true"><svg class="svg-inline--fa fa-square h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path class="" fill="currentColor" d="M384 80c8.8 0 16 7.2 16 16l0 320c0 8.8-7.2 16-16 16L64 432c-8.8 0-16-7.2-16-16L48 96c0-8.8 7.2-16 16-16l320 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z"></path></svg></span><!-- Label text (hidden in standalone mode for checkbox-only display) -->Test Checkbox
125
+ --><span data-v-79ecb611="" role="presentation" class="flex items-center justify-center shrink-0 w-[20px] h-[20px] relative text-grey-300" aria-hidden="true"><svg class="svg-inline--fa fa-square h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path class="" fill="currentColor" d="M384 80c8.8 0 16 7.2 16 16l0 320c0 8.8-7.2 16-16 16L64 432c-8.8 0-16-7.2-16-16L48 96c0-8.8 7.2-16 16-16l320 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z"></path></svg></span><!-- Label text (hidden in standalone mode for checkbox-only display) -->Test Checkbox
126
126
  </label>
127
127
  <!--
128
128
  Optional tooltip for additional context
@@ -168,7 +168,7 @@ exports[`FzCheckbox > Snapshots > should match snapshot - error state 1`] = `
168
168
  Visual checkbox icon (replaces hidden native checkbox)
169
169
  aria-hidden because it's purely decorative - the native input conveys state
170
170
  @TODO: When FzIcon natively supports ariaHidden prop, remove aria-hidden as HTML attribute and use :aria-hidden as prop
171
- --><span data-v-79ecb611="" role="presentation" class="flex items-center justify-center w-[20px] h-[20px] relative text-semantic-error-200" aria-hidden="true"><svg class="svg-inline--fa fa-square h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path class="" fill="currentColor" d="M384 80c8.8 0 16 7.2 16 16l0 320c0 8.8-7.2 16-16 16L64 432c-8.8 0-16-7.2-16-16L48 96c0-8.8 7.2-16 16-16l320 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z"></path></svg></span><!-- Label text (hidden in standalone mode for checkbox-only display) -->Test Checkbox
171
+ --><span data-v-79ecb611="" role="presentation" class="flex items-center justify-center shrink-0 w-[20px] h-[20px] relative text-semantic-error-200" aria-hidden="true"><svg class="svg-inline--fa fa-square h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path class="" fill="currentColor" d="M384 80c8.8 0 16 7.2 16 16l0 320c0 8.8-7.2 16-16 16L64 432c-8.8 0-16-7.2-16-16L48 96c0-8.8 7.2-16 16-16l320 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z"></path></svg></span><!-- Label text (hidden in standalone mode for checkbox-only display) -->Test Checkbox
172
172
  </label>
173
173
  <!--
174
174
  Optional tooltip for additional context
@@ -192,7 +192,7 @@ exports[`FzCheckbox > Snapshots > should match snapshot - error state 1`] = `
192
192
  would automatically get role="alert" and aria-live="assertive"
193
193
  -->
194
194
  <div data-v-9bf2fc2e="" data-v-79ecb611="" class="flex select-none gap-12 rounded justify-between bg-transparent" id="fz-checkbox-100000000001-2a84k-error" role="alert" aria-live="assertive" aria-atomic="true">
195
- <div data-v-da7f5873="" data-v-9bf2fc2e="" class="fz-container fz-container--horizontal gap-section-content-xs align-items-start layout-default flex-1"><span data-v-9bf2fc2e="" role="presentation" class="flex items-center justify-center w-[20px] h-[20px] text-semantic-error" aria-hidden="true"><svg class="svg-inline--fa fa-circle-xmark h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="circle-xmark" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="" fill="currentColor" d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z"></path></svg></span>
195
+ <div data-v-da7f5873="" data-v-9bf2fc2e="" class="fz-container fz-container--horizontal gap-section-content-xs align-items-start layout-default flex-1"><span data-v-9bf2fc2e="" role="presentation" class="flex items-center justify-center shrink-0 w-[20px] h-[20px] text-semantic-error" aria-hidden="true"><svg class="svg-inline--fa fa-circle-xmark h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="circle-xmark" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="" fill="currentColor" d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z"></path></svg></span>
196
196
  <div data-v-9bf2fc2e="" class="flex flex-col flex-1">
197
197
  <!--v-if-->
198
198
  <p data-v-9bf2fc2e="" class="font-normal !leading-[20px]">Error message</p>
@@ -238,7 +238,7 @@ exports[`FzCheckbox > Snapshots > should match snapshot - indeterminate state 1`
238
238
  Visual checkbox icon (replaces hidden native checkbox)
239
239
  aria-hidden because it's purely decorative - the native input conveys state
240
240
  @TODO: When FzIcon natively supports ariaHidden prop, remove aria-hidden as HTML attribute and use :aria-hidden as prop
241
- --><span data-v-79ecb611="" role="presentation" class="flex items-center justify-center w-[20px] h-[20px] relative text-grey-400" aria-hidden="true"><svg class="svg-inline--fa fa-square-minus h-[16px]" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="square-minus" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path class="" fill="currentColor" d="M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm88 200l144 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-144 0c-13.3 0-24-10.7-24-24s10.7-24 24-24z"></path></svg></span><!-- Label text (hidden in standalone mode for checkbox-only display) -->Test Checkbox
241
+ --><span data-v-79ecb611="" role="presentation" class="flex items-center justify-center shrink-0 w-[20px] h-[20px] relative text-grey-400" aria-hidden="true"><svg class="svg-inline--fa fa-square-minus h-[16px]" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="square-minus" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path class="" fill="currentColor" d="M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm88 200l144 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-144 0c-13.3 0-24-10.7-24-24s10.7-24 24-24z"></path></svg></span><!-- Label text (hidden in standalone mode for checkbox-only display) -->Test Checkbox
242
242
  </label>
243
243
  <!--
244
244
  Optional tooltip for additional context
@@ -284,7 +284,7 @@ exports[`FzCheckbox > Snapshots > should match snapshot - required 1`] = `
284
284
  Visual checkbox icon (replaces hidden native checkbox)
285
285
  aria-hidden because it's purely decorative - the native input conveys state
286
286
  @TODO: When FzIcon natively supports ariaHidden prop, remove aria-hidden as HTML attribute and use :aria-hidden as prop
287
- --><span data-v-79ecb611="" role="presentation" class="flex items-center justify-center w-[20px] h-[20px] relative text-grey-400" aria-hidden="true"><svg class="svg-inline--fa fa-square h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path class="" fill="currentColor" d="M384 80c8.8 0 16 7.2 16 16l0 320c0 8.8-7.2 16-16 16L64 432c-8.8 0-16-7.2-16-16L48 96c0-8.8 7.2-16 16-16l320 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z"></path></svg></span><!-- Label text (hidden in standalone mode for checkbox-only display) -->Test Checkbox
287
+ --><span data-v-79ecb611="" role="presentation" class="flex items-center justify-center shrink-0 w-[20px] h-[20px] relative text-grey-400" aria-hidden="true"><svg class="svg-inline--fa fa-square h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path class="" fill="currentColor" d="M384 80c8.8 0 16 7.2 16 16l0 320c0 8.8-7.2 16-16 16L64 432c-8.8 0-16-7.2-16-16L48 96c0-8.8 7.2-16 16-16l320 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z"></path></svg></span><!-- Label text (hidden in standalone mode for checkbox-only display) -->Test Checkbox
288
288
  </label>
289
289
  <!--
290
290
  Optional tooltip for additional context
@@ -330,7 +330,7 @@ exports[`FzCheckbox > Snapshots > should match snapshot - standalone mode 1`] =
330
330
  Visual checkbox icon (replaces hidden native checkbox)
331
331
  aria-hidden because it's purely decorative - the native input conveys state
332
332
  @TODO: When FzIcon natively supports ariaHidden prop, remove aria-hidden as HTML attribute and use :aria-hidden as prop
333
- --><span data-v-79ecb611="" role="presentation" class="flex items-center justify-center w-[20px] h-[20px] relative text-grey-400" aria-hidden="true"><svg class="svg-inline--fa fa-square h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path class="" fill="currentColor" d="M384 80c8.8 0 16 7.2 16 16l0 320c0 8.8-7.2 16-16 16L64 432c-8.8 0-16-7.2-16-16L48 96c0-8.8 7.2-16 16-16l320 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z"></path></svg></span><!-- Label text (hidden in standalone mode for checkbox-only display) -->
333
+ --><span data-v-79ecb611="" role="presentation" class="flex items-center justify-center shrink-0 w-[20px] h-[20px] relative text-grey-400" aria-hidden="true"><svg class="svg-inline--fa fa-square h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path class="" fill="currentColor" d="M384 80c8.8 0 16 7.2 16 16l0 320c0 8.8-7.2 16-16 16L64 432c-8.8 0-16-7.2-16-16L48 96c0-8.8 7.2-16 16-16l320 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z"></path></svg></span><!-- Label text (hidden in standalone mode for checkbox-only display) -->
334
334
  <!--v-if-->
335
335
  </label>
336
336
  <!--
@@ -377,7 +377,7 @@ exports[`FzCheckbox > Snapshots > should match snapshot - with emphasis 1`] = `
377
377
  Visual checkbox icon (replaces hidden native checkbox)
378
378
  aria-hidden because it's purely decorative - the native input conveys state
379
379
  @TODO: When FzIcon natively supports ariaHidden prop, remove aria-hidden as HTML attribute and use :aria-hidden as prop
380
- --><span data-v-79ecb611="" role="presentation" class="flex items-center justify-center w-[20px] h-[20px] relative text-blue-500" aria-hidden="true"><svg class="svg-inline--fa fa-square-check h-[16px]" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="square-check" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path class="" fill="currentColor" d="M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zM337 209L209 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L303 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"></path></svg></span><!-- Label text (hidden in standalone mode for checkbox-only display) -->Test Checkbox
380
+ --><span data-v-79ecb611="" role="presentation" class="flex items-center justify-center shrink-0 w-[20px] h-[20px] relative text-blue-500" aria-hidden="true"><svg class="svg-inline--fa fa-square-check h-[16px]" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="square-check" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path class="" fill="currentColor" d="M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zM337 209L209 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L303 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"></path></svg></span><!-- Label text (hidden in standalone mode for checkbox-only display) -->Test Checkbox
381
381
  </label>
382
382
  <!--
383
383
  Optional tooltip for additional context
package/src/__tests__/__snapshots__/FzCheckboxCard.spec.ts.snap CHANGED
@@ -1,7 +1,7 @@
1
1
  // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2
2
 
3
3
  exports[`FzCheckboxCard > Rendering > should render correctly 1`] = `
4
- "<div data-v-7eaaa48f=""><input data-v-7eaaa48f="" type="checkbox" id="fz-checkbox-100000000001-2a84k" class="w-0 h-0 peer fz-hidden-input" tabindex="0" aria-checked="false" aria-required="false" aria-invalid="false" value="Checkbox"><label data-v-7eaaa48f="" class="relative flex block rounded-lg border-solid pt-12 px-12 cursor-pointer w-full flex-row pb-12 gap-12 border-1 border-grey-300 hover:bg-[#f9faff] peer-focus:outline peer-focus:bg-[#f9faff] peer-focus:outline-blue-200 peer-focus:outline-2 peer-checked:bg-[#f9faff]" for="fz-checkbox-100000000001-2a84k"><span data-v-7eaaa48f="" role="presentation" class="flex items-center justify-center w-[20px] h-[20px] shrink-0 text-grey-400 self-start" aria-hidden="true"><svg class="svg-inline--fa fa-square h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path class="" fill="currentColor" d="M384 80c8.8 0 16 7.2 16 16l0 320c0 8.8-7.2 16-16 16L64 432c-8.8 0-16-7.2-16-16L48 96c0-8.8 7.2-16 16-16l320 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z"></path></svg></span>
4
+ "<div data-v-7eaaa48f=""><input data-v-7eaaa48f="" type="checkbox" id="fz-checkbox-100000000001-2a84k" class="peer h-0 w-0 absolute fz-hidden-input" tabindex="0" aria-checked="false" aria-required="false" aria-invalid="false" value="Checkbox"><label data-v-7eaaa48f="" class="relative flex block rounded-lg border-solid pt-12 px-12 cursor-pointer w-full flex-row pb-12 gap-12 border-1 border-grey-300 hover:bg-[#f9faff] peer-focus:outline peer-focus:bg-[#f9faff] peer-focus:outline-blue-200 peer-focus:outline-2 peer-checked:bg-[#f9faff]" for="fz-checkbox-100000000001-2a84k"><span data-v-7eaaa48f="" role="presentation" class="flex items-center justify-center shrink-0 w-[20px] h-[20px] shrink-0 text-grey-400 self-start" aria-hidden="true"><svg class="svg-inline--fa fa-square h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path class="" fill="currentColor" d="M384 80c8.8 0 16 7.2 16 16l0 320c0 8.8-7.2 16-16 16L64 432c-8.8 0-16-7.2-16-16L48 96c0-8.8 7.2-16 16-16l320 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z"></path></svg></span>
5
5
  <!--v-if-->
6
6
  <div data-v-7eaaa48f="" class="flex flex-row w-full justify-between min-w-0">
7
7
  <div data-v-7eaaa48f="" class="justify-center flex flex-col w-full grow-0 min-w-0 gap-4">
package/src/__tests__/__snapshots__/FzCheckboxGroup.spec.ts.snap CHANGED
@@ -18,7 +18,7 @@ exports[`FzCheckboxGroup > Snapshots > should match snapshot - default state 1`]
18
18
  - aria-required: Indicates if selection is mandatory
19
19
  - aria-invalid: Indicates validation state
20
20
  -->
21
- <div class="flex items-start text-base gap-8 flex-col" id="fz-checkbox-group-100000000001-2a84k" role="group" aria-labelledby="fz-checkbox-group-100000000001-2a84k-label" aria-required="false" aria-invalid="false">
21
+ <div class="flex self-stretch text-base gap-8 flex-col" id="fz-checkbox-group-100000000001-2a84k" role="group" aria-labelledby="fz-checkbox-group-100000000001-2a84k-label" aria-required="false" aria-invalid="false">
22
22
  <!--
23
23
  Render each checkbox option
24
24
  Supports both simple checkboxes and parent-child hierarchies
@@ -59,7 +59,7 @@ exports[`FzCheckboxGroup > Snapshots > should match snapshot - default state 1`]
59
59
  Visual checkbox icon (replaces hidden native checkbox)
60
60
  aria-hidden because it's purely decorative - the native input conveys state
61
61
  @TODO: When FzIcon natively supports ariaHidden prop, remove aria-hidden as HTML attribute and use :aria-hidden as prop
62
- --><span data-v-79ecb611="" role="presentation" class="flex items-center justify-center w-[20px] h-[20px] relative text-grey-400" aria-hidden="true"><svg class="svg-inline--fa fa-square h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path class="" fill="currentColor" d="M384 80c8.8 0 16 7.2 16 16l0 320c0 8.8-7.2 16-16 16L64 432c-8.8 0-16-7.2-16-16L48 96c0-8.8 7.2-16 16-16l320 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z"></path></svg></span><!-- Label text (hidden in standalone mode for checkbox-only display) -->Option 1
62
+ --><span data-v-79ecb611="" role="presentation" class="flex items-center justify-center shrink-0 w-[20px] h-[20px] relative text-grey-400" aria-hidden="true"><svg class="svg-inline--fa fa-square h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path class="" fill="currentColor" d="M384 80c8.8 0 16 7.2 16 16l0 320c0 8.8-7.2 16-16 16L64 432c-8.8 0-16-7.2-16-16L48 96c0-8.8 7.2-16 16-16l320 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z"></path></svg></span><!-- Label text (hidden in standalone mode for checkbox-only display) -->Option 1
63
63
  </label>
64
64
  <!--
65
65
  Optional tooltip for additional context
@@ -108,7 +108,7 @@ exports[`FzCheckboxGroup > Snapshots > should match snapshot - default state 1`]
108
108
  Visual checkbox icon (replaces hidden native checkbox)
109
109
  aria-hidden because it's purely decorative - the native input conveys state
110
110
  @TODO: When FzIcon natively supports ariaHidden prop, remove aria-hidden as HTML attribute and use :aria-hidden as prop
111
- --><span data-v-79ecb611="" role="presentation" class="flex items-center justify-center w-[20px] h-[20px] relative text-grey-400" aria-hidden="true"><svg class="svg-inline--fa fa-square h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path class="" fill="currentColor" d="M384 80c8.8 0 16 7.2 16 16l0 320c0 8.8-7.2 16-16 16L64 432c-8.8 0-16-7.2-16-16L48 96c0-8.8 7.2-16 16-16l320 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z"></path></svg></span><!-- Label text (hidden in standalone mode for checkbox-only display) -->Option 2
111
+ --><span data-v-79ecb611="" role="presentation" class="flex items-center justify-center shrink-0 w-[20px] h-[20px] relative text-grey-400" aria-hidden="true"><svg class="svg-inline--fa fa-square h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path class="" fill="currentColor" d="M384 80c8.8 0 16 7.2 16 16l0 320c0 8.8-7.2 16-16 16L64 432c-8.8 0-16-7.2-16-16L48 96c0-8.8 7.2-16 16-16l320 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z"></path></svg></span><!-- Label text (hidden in standalone mode for checkbox-only display) -->Option 2
112
112
  </label>
113
113
  <!--
114
114
  Optional tooltip for additional context
@@ -145,7 +145,7 @@ exports[`FzCheckboxGroup > Snapshots > should match snapshot - disabled 1`] = `
145
145
  - aria-required: Indicates if selection is mandatory
146
146
  - aria-invalid: Indicates validation state
147
147
  -->
148
- <div class="flex items-start text-base gap-8 flex-col" id="fz-checkbox-group-100000000001-2a84k" role="group" aria-labelledby="fz-checkbox-group-100000000001-2a84k-label" aria-required="false" aria-invalid="false">
148
+ <div class="flex self-stretch text-base gap-8 flex-col" id="fz-checkbox-group-100000000001-2a84k" role="group" aria-labelledby="fz-checkbox-group-100000000001-2a84k-label" aria-required="false" aria-invalid="false">
149
149
  <!--
150
150
  Render each checkbox option
151
151
  Supports both simple checkboxes and parent-child hierarchies
@@ -186,7 +186,7 @@ exports[`FzCheckboxGroup > Snapshots > should match snapshot - disabled 1`] = `
186
186
  Visual checkbox icon (replaces hidden native checkbox)
187
187
  aria-hidden because it's purely decorative - the native input conveys state
188
188
  @TODO: When FzIcon natively supports ariaHidden prop, remove aria-hidden as HTML attribute and use :aria-hidden as prop
189
- --><span data-v-79ecb611="" role="presentation" class="flex items-center justify-center w-[20px] h-[20px] relative text-grey-300" aria-hidden="true"><svg class="svg-inline--fa fa-square h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path class="" fill="currentColor" d="M384 80c8.8 0 16 7.2 16 16l0 320c0 8.8-7.2 16-16 16L64 432c-8.8 0-16-7.2-16-16L48 96c0-8.8 7.2-16 16-16l320 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z"></path></svg></span><!-- Label text (hidden in standalone mode for checkbox-only display) -->Option 1
189
+ --><span data-v-79ecb611="" role="presentation" class="flex items-center justify-center shrink-0 w-[20px] h-[20px] relative text-grey-300" aria-hidden="true"><svg class="svg-inline--fa fa-square h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path class="" fill="currentColor" d="M384 80c8.8 0 16 7.2 16 16l0 320c0 8.8-7.2 16-16 16L64 432c-8.8 0-16-7.2-16-16L48 96c0-8.8 7.2-16 16-16l320 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z"></path></svg></span><!-- Label text (hidden in standalone mode for checkbox-only display) -->Option 1
190
190
  </label>
191
191
  <!--
192
192
  Optional tooltip for additional context
@@ -223,7 +223,7 @@ exports[`FzCheckboxGroup > Snapshots > should match snapshot - hierarchical stru
223
223
  - aria-required: Indicates if selection is mandatory
224
224
  - aria-invalid: Indicates validation state
225
225
  -->
226
- <div class="flex items-start text-base gap-8 flex-col" id="fz-checkbox-group-100000000001-2a84k" role="group" aria-labelledby="fz-checkbox-group-100000000001-2a84k-label" aria-required="false" aria-invalid="false">
226
+ <div class="flex self-stretch text-base gap-8 flex-col" id="fz-checkbox-group-100000000001-2a84k" role="group" aria-labelledby="fz-checkbox-group-100000000001-2a84k-label" aria-required="false" aria-invalid="false">
227
227
  <!--
228
228
  Render each checkbox option
229
229
  Supports both simple checkboxes and parent-child hierarchies
@@ -264,7 +264,7 @@ exports[`FzCheckboxGroup > Snapshots > should match snapshot - hierarchical stru
264
264
  Visual checkbox icon (replaces hidden native checkbox)
265
265
  aria-hidden because it's purely decorative - the native input conveys state
266
266
  @TODO: When FzIcon natively supports ariaHidden prop, remove aria-hidden as HTML attribute and use :aria-hidden as prop
267
- --><span data-v-79ecb611="" role="presentation" class="flex items-center justify-center w-[20px] h-[20px] relative text-grey-400" aria-hidden="true"><svg class="svg-inline--fa fa-square h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path class="" fill="currentColor" d="M384 80c8.8 0 16 7.2 16 16l0 320c0 8.8-7.2 16-16 16L64 432c-8.8 0-16-7.2-16-16L48 96c0-8.8 7.2-16 16-16l320 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z"></path></svg></span><!-- Label text (hidden in standalone mode for checkbox-only display) -->Parent Option
267
+ --><span data-v-79ecb611="" role="presentation" class="flex items-center justify-center shrink-0 w-[20px] h-[20px] relative text-grey-400" aria-hidden="true"><svg class="svg-inline--fa fa-square h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path class="" fill="currentColor" d="M384 80c8.8 0 16 7.2 16 16l0 320c0 8.8-7.2 16-16 16L64 432c-8.8 0-16-7.2-16-16L48 96c0-8.8 7.2-16 16-16l320 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z"></path></svg></span><!-- Label text (hidden in standalone mode for checkbox-only display) -->Parent Option
268
268
  </label>
269
269
  <!--
270
270
  Optional tooltip for additional context
@@ -314,7 +314,7 @@ exports[`FzCheckboxGroup > Snapshots > should match snapshot - hierarchical stru
314
314
  Visual checkbox icon (replaces hidden native checkbox)
315
315
  aria-hidden because it's purely decorative - the native input conveys state
316
316
  @TODO: When FzIcon natively supports ariaHidden prop, remove aria-hidden as HTML attribute and use :aria-hidden as prop
317
- --><span data-v-79ecb611="" role="presentation" class="flex items-center justify-center w-[20px] h-[20px] relative text-grey-400" aria-hidden="true"><svg class="svg-inline--fa fa-square h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path class="" fill="currentColor" d="M384 80c8.8 0 16 7.2 16 16l0 320c0 8.8-7.2 16-16 16L64 432c-8.8 0-16-7.2-16-16L48 96c0-8.8 7.2-16 16-16l320 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z"></path></svg></span><!-- Label text (hidden in standalone mode for checkbox-only display) -->Child 1
317
+ --><span data-v-79ecb611="" role="presentation" class="flex items-center justify-center shrink-0 w-[20px] h-[20px] relative text-grey-400" aria-hidden="true"><svg class="svg-inline--fa fa-square h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path class="" fill="currentColor" d="M384 80c8.8 0 16 7.2 16 16l0 320c0 8.8-7.2 16-16 16L64 432c-8.8 0-16-7.2-16-16L48 96c0-8.8 7.2-16 16-16l320 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z"></path></svg></span><!-- Label text (hidden in standalone mode for checkbox-only display) -->Child 1
318
318
  </label>
319
319
  <!--
320
320
  Optional tooltip for additional context
@@ -356,7 +356,7 @@ exports[`FzCheckboxGroup > Snapshots > should match snapshot - hierarchical stru
356
356
  Visual checkbox icon (replaces hidden native checkbox)
357
357
  aria-hidden because it's purely decorative - the native input conveys state
358
358
  @TODO: When FzIcon natively supports ariaHidden prop, remove aria-hidden as HTML attribute and use :aria-hidden as prop
359
- --><span data-v-79ecb611="" role="presentation" class="flex items-center justify-center w-[20px] h-[20px] relative text-grey-400" aria-hidden="true"><svg class="svg-inline--fa fa-square h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path class="" fill="currentColor" d="M384 80c8.8 0 16 7.2 16 16l0 320c0 8.8-7.2 16-16 16L64 432c-8.8 0-16-7.2-16-16L48 96c0-8.8 7.2-16 16-16l320 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z"></path></svg></span><!-- Label text (hidden in standalone mode for checkbox-only display) -->Child 2
359
+ --><span data-v-79ecb611="" role="presentation" class="flex items-center justify-center shrink-0 w-[20px] h-[20px] relative text-grey-400" aria-hidden="true"><svg class="svg-inline--fa fa-square h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path class="" fill="currentColor" d="M384 80c8.8 0 16 7.2 16 16l0 320c0 8.8-7.2 16-16 16L64 432c-8.8 0-16-7.2-16-16L48 96c0-8.8 7.2-16 16-16l320 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z"></path></svg></span><!-- Label text (hidden in standalone mode for checkbox-only display) -->Child 2
360
360
  </label>
361
361
  <!--
362
362
  Optional tooltip for additional context
@@ -395,7 +395,7 @@ exports[`FzCheckboxGroup > Snapshots > should match snapshot - horizontal layout
395
395
  - aria-required: Indicates if selection is mandatory
396
396
  - aria-invalid: Indicates validation state
397
397
  -->
398
- <div class="flex items-start text-base gap-16 flex-row" id="fz-checkbox-group-100000000001-2a84k" role="group" aria-labelledby="fz-checkbox-group-100000000001-2a84k-label" aria-required="false" aria-invalid="false">
398
+ <div class="flex self-stretch text-base gap-16 flex-row" id="fz-checkbox-group-100000000001-2a84k" role="group" aria-labelledby="fz-checkbox-group-100000000001-2a84k-label" aria-required="false" aria-invalid="false">
399
399
  <!--
400
400
  Render each checkbox option
401
401
  Supports both simple checkboxes and parent-child hierarchies
@@ -436,7 +436,7 @@ exports[`FzCheckboxGroup > Snapshots > should match snapshot - horizontal layout
436
436
  Visual checkbox icon (replaces hidden native checkbox)
437
437
  aria-hidden because it's purely decorative - the native input conveys state
438
438
  @TODO: When FzIcon natively supports ariaHidden prop, remove aria-hidden as HTML attribute and use :aria-hidden as prop
439
- --><span data-v-79ecb611="" role="presentation" class="flex items-center justify-center w-[20px] h-[20px] relative text-grey-400" aria-hidden="true"><svg class="svg-inline--fa fa-square h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path class="" fill="currentColor" d="M384 80c8.8 0 16 7.2 16 16l0 320c0 8.8-7.2 16-16 16L64 432c-8.8 0-16-7.2-16-16L48 96c0-8.8 7.2-16 16-16l320 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z"></path></svg></span><!-- Label text (hidden in standalone mode for checkbox-only display) -->Option 1
439
+ --><span data-v-79ecb611="" role="presentation" class="flex items-center justify-center shrink-0 w-[20px] h-[20px] relative text-grey-400" aria-hidden="true"><svg class="svg-inline--fa fa-square h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path class="" fill="currentColor" d="M384 80c8.8 0 16 7.2 16 16l0 320c0 8.8-7.2 16-16 16L64 432c-8.8 0-16-7.2-16-16L48 96c0-8.8 7.2-16 16-16l320 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z"></path></svg></span><!-- Label text (hidden in standalone mode for checkbox-only display) -->Option 1
440
440
  </label>
441
441
  <!--
442
442
  Optional tooltip for additional context
@@ -485,7 +485,7 @@ exports[`FzCheckboxGroup > Snapshots > should match snapshot - horizontal layout
485
485
  Visual checkbox icon (replaces hidden native checkbox)
486
486
  aria-hidden because it's purely decorative - the native input conveys state
487
487
  @TODO: When FzIcon natively supports ariaHidden prop, remove aria-hidden as HTML attribute and use :aria-hidden as prop
488
- --><span data-v-79ecb611="" role="presentation" class="flex items-center justify-center w-[20px] h-[20px] relative text-grey-400" aria-hidden="true"><svg class="svg-inline--fa fa-square h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path class="" fill="currentColor" d="M384 80c8.8 0 16 7.2 16 16l0 320c0 8.8-7.2 16-16 16L64 432c-8.8 0-16-7.2-16-16L48 96c0-8.8 7.2-16 16-16l320 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z"></path></svg></span><!-- Label text (hidden in standalone mode for checkbox-only display) -->Option 2
488
+ --><span data-v-79ecb611="" role="presentation" class="flex items-center justify-center shrink-0 w-[20px] h-[20px] relative text-grey-400" aria-hidden="true"><svg class="svg-inline--fa fa-square h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path class="" fill="currentColor" d="M384 80c8.8 0 16 7.2 16 16l0 320c0 8.8-7.2 16-16 16L64 432c-8.8 0-16-7.2-16-16L48 96c0-8.8 7.2-16 16-16l320 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z"></path></svg></span><!-- Label text (hidden in standalone mode for checkbox-only display) -->Option 2
489
489
  </label>
490
490
  <!--
491
491
  Optional tooltip for additional context
@@ -522,7 +522,7 @@ exports[`FzCheckboxGroup > Snapshots > should match snapshot - required 1`] = `
522
522
  - aria-required: Indicates if selection is mandatory
523
523
  - aria-invalid: Indicates validation state
524
524
  -->
525
- <div class="flex items-start text-base gap-8 flex-col" id="fz-checkbox-group-100000000001-2a84k" role="group" aria-labelledby="fz-checkbox-group-100000000001-2a84k-label" aria-required="true" aria-invalid="false">
525
+ <div class="flex self-stretch text-base gap-8 flex-col" id="fz-checkbox-group-100000000001-2a84k" role="group" aria-labelledby="fz-checkbox-group-100000000001-2a84k-label" aria-required="true" aria-invalid="false">
526
526
  <!--
527
527
  Render each checkbox option
528
528
  Supports both simple checkboxes and parent-child hierarchies
@@ -563,7 +563,7 @@ exports[`FzCheckboxGroup > Snapshots > should match snapshot - required 1`] = `
563
563
  Visual checkbox icon (replaces hidden native checkbox)
564
564
  aria-hidden because it's purely decorative - the native input conveys state
565
565
  @TODO: When FzIcon natively supports ariaHidden prop, remove aria-hidden as HTML attribute and use :aria-hidden as prop
566
- --><span data-v-79ecb611="" role="presentation" class="flex items-center justify-center w-[20px] h-[20px] relative text-grey-400" aria-hidden="true"><svg class="svg-inline--fa fa-square h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path class="" fill="currentColor" d="M384 80c8.8 0 16 7.2 16 16l0 320c0 8.8-7.2 16-16 16L64 432c-8.8 0-16-7.2-16-16L48 96c0-8.8 7.2-16 16-16l320 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z"></path></svg></span><!-- Label text (hidden in standalone mode for checkbox-only display) -->Option 1
566
+ --><span data-v-79ecb611="" role="presentation" class="flex items-center justify-center shrink-0 w-[20px] h-[20px] relative text-grey-400" aria-hidden="true"><svg class="svg-inline--fa fa-square h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path class="" fill="currentColor" d="M384 80c8.8 0 16 7.2 16 16l0 320c0 8.8-7.2 16-16 16L64 432c-8.8 0-16-7.2-16-16L48 96c0-8.8 7.2-16 16-16l320 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z"></path></svg></span><!-- Label text (hidden in standalone mode for checkbox-only display) -->Option 1
567
567
  </label>
568
568
  <!--
569
569
  Optional tooltip for additional context
@@ -600,7 +600,7 @@ exports[`FzCheckboxGroup > Snapshots > should match snapshot - with error 1`] =
600
600
  - aria-required: Indicates if selection is mandatory
601
601
  - aria-invalid: Indicates validation state
602
602
  -->
603
- <div class="flex items-start text-base gap-8 flex-col" id="fz-checkbox-group-100000000001-2a84k" role="group" aria-labelledby="fz-checkbox-group-100000000001-2a84k-label" aria-describedby="fz-checkbox-group-100000000001-2a84k-error" aria-required="false" aria-invalid="true">
603
+ <div class="flex self-stretch text-base gap-8 flex-col" id="fz-checkbox-group-100000000001-2a84k" role="group" aria-labelledby="fz-checkbox-group-100000000001-2a84k-label" aria-describedby="fz-checkbox-group-100000000001-2a84k-error" aria-required="false" aria-invalid="true">
604
604
  <!--
605
605
  Render each checkbox option
606
606
  Supports both simple checkboxes and parent-child hierarchies
@@ -641,7 +641,7 @@ exports[`FzCheckboxGroup > Snapshots > should match snapshot - with error 1`] =
641
641
  Visual checkbox icon (replaces hidden native checkbox)
642
642
  aria-hidden because it's purely decorative - the native input conveys state
643
643
  @TODO: When FzIcon natively supports ariaHidden prop, remove aria-hidden as HTML attribute and use :aria-hidden as prop
644
- --><span data-v-79ecb611="" role="presentation" class="flex items-center justify-center w-[20px] h-[20px] relative text-semantic-error-200" aria-hidden="true"><svg class="svg-inline--fa fa-square h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path class="" fill="currentColor" d="M384 80c8.8 0 16 7.2 16 16l0 320c0 8.8-7.2 16-16 16L64 432c-8.8 0-16-7.2-16-16L48 96c0-8.8 7.2-16 16-16l320 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z"></path></svg></span><!-- Label text (hidden in standalone mode for checkbox-only display) -->Option 1
644
+ --><span data-v-79ecb611="" role="presentation" class="flex items-center justify-center shrink-0 w-[20px] h-[20px] relative text-semantic-error-200" aria-hidden="true"><svg class="svg-inline--fa fa-square h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path class="" fill="currentColor" d="M384 80c8.8 0 16 7.2 16 16l0 320c0 8.8-7.2 16-16 16L64 432c-8.8 0-16-7.2-16-16L48 96c0-8.8 7.2-16 16-16l320 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z"></path></svg></span><!-- Label text (hidden in standalone mode for checkbox-only display) -->Option 1
645
645
  </label>
646
646
  <!--
647
647
  Optional tooltip for additional context
@@ -672,7 +672,7 @@ exports[`FzCheckboxGroup > Snapshots > should match snapshot - with error 1`] =
672
672
  would automatically get role="alert" and aria-live="assertive"
673
673
  -->
674
674
  <div data-v-9bf2fc2e="" class="flex select-none gap-12 rounded justify-between bg-transparent" id="fz-checkbox-group-100000000001-2a84k-error" role="alert" aria-live="assertive" aria-atomic="true">
675
- <div data-v-da7f5873="" data-v-9bf2fc2e="" class="fz-container fz-container--horizontal gap-section-content-xs align-items-start layout-default flex-1"><span data-v-9bf2fc2e="" role="presentation" class="flex items-center justify-center w-[20px] h-[20px] text-semantic-error" aria-hidden="true"><svg class="svg-inline--fa fa-circle-xmark h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="circle-xmark" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="" fill="currentColor" d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z"></path></svg></span>
675
+ <div data-v-da7f5873="" data-v-9bf2fc2e="" class="fz-container fz-container--horizontal gap-section-content-xs align-items-start layout-default flex-1"><span data-v-9bf2fc2e="" role="presentation" class="flex items-center justify-center shrink-0 w-[20px] h-[20px] text-semantic-error" aria-hidden="true"><svg class="svg-inline--fa fa-circle-xmark h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="circle-xmark" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="" fill="currentColor" d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z"></path></svg></span>
676
676
  <div data-v-9bf2fc2e="" class="flex flex-col flex-1">
677
677
  <!--v-if-->
678
678
  <p data-v-9bf2fc2e="" class="font-normal !leading-[20px]">Test error message</p>
@@ -702,7 +702,7 @@ exports[`FzCheckboxGroup > Snapshots > should match snapshot - with help text 1`
702
702
  - aria-required: Indicates if selection is mandatory
703
703
  - aria-invalid: Indicates validation state
704
704
  -->
705
- <div class="flex items-start text-base gap-8 flex-col" id="fz-checkbox-group-100000000001-2a84k" role="group" aria-labelledby="fz-checkbox-group-100000000001-2a84k-label" aria-describedby="fz-checkbox-group-100000000001-2a84k-help" aria-required="false" aria-invalid="false">
705
+ <div class="flex self-stretch text-base gap-8 flex-col" id="fz-checkbox-group-100000000001-2a84k" role="group" aria-labelledby="fz-checkbox-group-100000000001-2a84k-label" aria-describedby="fz-checkbox-group-100000000001-2a84k-help" aria-required="false" aria-invalid="false">
706
706
  <!--
707
707
  Render each checkbox option
708
708
  Supports both simple checkboxes and parent-child hierarchies
@@ -743,7 +743,7 @@ exports[`FzCheckboxGroup > Snapshots > should match snapshot - with help text 1`
743
743
  Visual checkbox icon (replaces hidden native checkbox)
744
744
  aria-hidden because it's purely decorative - the native input conveys state
745
745
  @TODO: When FzIcon natively supports ariaHidden prop, remove aria-hidden as HTML attribute and use :aria-hidden as prop
746
- --><span data-v-79ecb611="" role="presentation" class="flex items-center justify-center w-[20px] h-[20px] relative text-grey-400" aria-hidden="true"><svg class="svg-inline--fa fa-square h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path class="" fill="currentColor" d="M384 80c8.8 0 16 7.2 16 16l0 320c0 8.8-7.2 16-16 16L64 432c-8.8 0-16-7.2-16-16L48 96c0-8.8 7.2-16 16-16l320 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z"></path></svg></span><!-- Label text (hidden in standalone mode for checkbox-only display) -->Option 1
746
+ --><span data-v-79ecb611="" role="presentation" class="flex items-center justify-center shrink-0 w-[20px] h-[20px] relative text-grey-400" aria-hidden="true"><svg class="svg-inline--fa fa-square h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path class="" fill="currentColor" d="M384 80c8.8 0 16 7.2 16 16l0 320c0 8.8-7.2 16-16 16L64 432c-8.8 0-16-7.2-16-16L48 96c0-8.8 7.2-16 16-16l320 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z"></path></svg></span><!-- Label text (hidden in standalone mode for checkbox-only display) -->Option 1
747
747
  </label>
748
748
  <!--
749
749
  Optional tooltip for additional context
package/src/common.ts CHANGED
@@ -38,6 +38,11 @@ export interface CheckedSetProvision {
38
38
  * Provided by FzCheckboxGroup so child cards/checkboxes can do O(1) membership
39
39
  * checks instead of O(N) Array.includes scans — but only when the group's
40
40
  * model and the child's model reference the same array.
41
+ *
42
+ * Uses a namespaced primitive string rather than `Symbol(...)` so the key
43
+ * stays value-equal across module instances. This matters in Vite dev mode
44
+ * when consuming apps exclude `@fiscozen/*` packages from optimizeDeps and
45
+ * the same `.ts` file may be loaded as multiple module instances. The cast
46
+ * preserves the typed `InjectionKey<T>` API at provide/inject call sites.
41
47
  */
42
- export const CHECKED_SET_KEY: InjectionKey<CheckedSetProvision> =
43
- Symbol("FzCheckboxCheckedSet");
48
+ export const CHECKED_SET_KEY = "@fiscozen/checkbox/CheckedSet" as unknown as InjectionKey<CheckedSetProvision>;