npm - @fiscozen/checkbox - Versions diffs - 1.0.0-next.0 → 1.0.0 - Mend

@fiscozen/checkbox 1.0.0-next.0 → 1.0.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 (42) hide show

package/dist/checkbox.js +2376 -0
package/dist/checkbox.umd.cjs +13 -0
package/dist/index.d.ts +1 -0
package/dist/src/FzCheckbox.vue.d.ts +102 -0
package/dist/src/FzCheckboxGroup.vue.d.ts +72 -0
package/dist/src/__tests__/FzCheckbox.spec.d.ts +1 -0
package/dist/src/__tests__/FzCheckboxGroup.spec.d.ts +1 -0
package/dist/src/common.d.ts +23 -0
package/dist/src/components/ErrorAlert.vue.d.ts +34 -0
package/dist/src/components/FzCheckboxGroupOption.vue.d.ts +86 -0
package/dist/src/index.d.ts +4 -0
package/dist/src/types.d.ts +192 -0
package/dist/src/utils.d.ts +24 -0
package/dist/style.css +1 -0
package/package.json +9 -13
package/src/__tests__/FzCheckbox.spec.ts +748 -0
package/src/__tests__/FzCheckboxGroup.spec.ts +764 -0
package/src/__tests__/__snapshots__/FzCheckbox.spec.ts.snap +427 -0
package/src/__tests__/__snapshots__/FzCheckboxGroup.spec.ts.snap +805 -0
package/src/components/ErrorAlert.vue +1 -1
package/tsconfig.tsbuildinfo +1 -0
package/vitest.config.ts +9 -1
package/coverage/base.css +0 -224
package/coverage/block-navigation.js +0 -87
package/coverage/clover.xml +0 -1031
package/coverage/coverage-final.json +0 -7
package/coverage/favicon.png +0 -0
package/coverage/index.html +0 -131
package/coverage/prettify.css +0 -1
package/coverage/prettify.js +0 -2
package/coverage/sort-arrow-sprite.png +0 -0
package/coverage/sorter.js +0 -196
package/coverage/src/FzCheckbox.vue.html +0 -1489
package/coverage/src/FzCheckboxGroup.vue.html +0 -682
package/coverage/src/common.ts.html +0 -157
package/coverage/src/components/ErrorAlert.vue.html +0 -268
package/coverage/src/components/FzCheckboxGroupOption.vue.html +0 -652
package/coverage/src/components/index.html +0 -131
package/coverage/src/index.html +0 -161
package/coverage/src/utils.ts.html +0 -265
package/src/__test__/FzCheckbox.test.ts +0 -206
package/src/__test__/FzCheckboxGroup.test.ts +0 -263

package/src/__tests__/__snapshots__/FzCheckbox.spec.ts.snap ADDED Viewed

@@ -0,0 +1,427 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+exports[`FzCheckbox > Snapshots > should match snapshot - checked state 1`] = `
+"<!-- Root container: vertical layout with consistent spacing -->
+<div data-v-79ecb611="" class="flex justify-center flex-col w-fit gap-4">
+  <!-- Checkbox row: input + label + optional tooltip, aligned to top for long labels -->
+  <!-- Hover effects are handled in CSS using data attributes -->
+  <div data-v-79ecb611="" class="flex items-start group">
+    <!--
+        Native checkbox input (visually hidden but functionally present)
+        - Maintains native keyboard navigation and form behavior
+        - Screen readers can interact with it normally
+        - Styled via adjacent label and icon using Tailwind's "peer" selector
+      --><input data-v-79ecb611="" type="checkbox" id="fz-checkbox-100000000001-2a84k" class="w-0 h-0 peer fz-hidden-input" aria-checked="true" aria-required="false" aria-invalid="false" aria-labelledby="fz-checkbox-100000000001-2a84k-label" value="test">
+    <!--
+        Label element: provides click target and visual representation
+        Connected to hidden input via "for" attribute
+      --><label data-v-79ecb611="" id="fz-checkbox-100000000001-2a84k-label" for="fz-checkbox-100000000001-2a84k" class="flex gap-6 items-start hover:cursor-pointer text-core-black
+  peer-focus:[&amp;_div]:after:border-1
+  peer-focus:[&amp;_div]:after:border-solid
+  peer-focus:[&amp;_div]:after:rounded-[2px]
+  peer-focus:[&amp;_div]:after:border-blue-200
+  peer-focus:[&amp;_div]:after:content-['']
+  peer-focus:[&amp;_div]:after:top-0
+  peer-focus:[&amp;_div]:after:left-0
+  peer-focus:[&amp;_div]:after:right-0
+  peer-focus:[&amp;_div]:after:bottom-0
+  peer-focus:[&amp;_div]:after:absolute text-base text-core-black peer-checked:[&amp;_div]:text-grey-500 peer-indeterminate:[&amp;_div]:text-grey-500">
+      <!--
+          Visual checkbox icon (replaces hidden native checkbox)
+          aria-hidden because it's purely decorative - the native input conveys state
+          @TODO: When FzIcon natively supports ariaHidden prop, remove aria-hidden as HTML attribute and use :aria-hidden as prop
+        -->
+      <div data-v-79ecb611="" 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></div><!-- Label text (hidden in standalone mode for checkbox-only display) -->Test Checkbox
+    </label>
+    <!--
+        Optional tooltip for additional context
+        @TODO: When FzTooltip supports keyboard accessibility and ARIA attributes (role="tooltip", aria-describedby), update implementation
+      -->
+    <!--v-if-->
+  </div><!-- Error message display with accessible ARIA live region -->
+  <!--v-if-->
+  <!--
+      Children slot for nested checkboxes
+      Used by FzCheckboxGroupOption to render child checkboxes
+    -->
+</div>"
+`;
+exports[`FzCheckbox > Snapshots > should match snapshot - default state 1`] = `
+"<!-- Root container: vertical layout with consistent spacing -->
+<div data-v-79ecb611="" class="flex justify-center flex-col w-fit gap-4">
+  <!-- Checkbox row: input + label + optional tooltip, aligned to top for long labels -->
+  <!-- Hover effects are handled in CSS using data attributes -->
+  <div data-v-79ecb611="" class="flex items-start group">
+    <!--
+        Native checkbox input (visually hidden but functionally present)
+        - Maintains native keyboard navigation and form behavior
+        - Screen readers can interact with it normally
+        - Styled via adjacent label and icon using Tailwind's "peer" selector
+      --><input data-v-79ecb611="" type="checkbox" id="fz-checkbox-100000000001-2a84k" class="w-0 h-0 peer fz-hidden-input" aria-checked="false" aria-required="false" aria-invalid="false" aria-labelledby="fz-checkbox-100000000001-2a84k-label" value="test">
+    <!--
+        Label element: provides click target and visual representation
+        Connected to hidden input via "for" attribute
+      --><label data-v-79ecb611="" id="fz-checkbox-100000000001-2a84k-label" for="fz-checkbox-100000000001-2a84k" class="flex gap-6 items-start hover:cursor-pointer text-core-black
+  peer-focus:[&amp;_div]:after:border-1
+  peer-focus:[&amp;_div]:after:border-solid
+  peer-focus:[&amp;_div]:after:rounded-[2px]
+  peer-focus:[&amp;_div]:after:border-blue-200
+  peer-focus:[&amp;_div]:after:content-['']
+  peer-focus:[&amp;_div]:after:top-0
+  peer-focus:[&amp;_div]:after:left-0
+  peer-focus:[&amp;_div]:after:right-0
+  peer-focus:[&amp;_div]:after:bottom-0
+  peer-focus:[&amp;_div]:after:absolute text-base text-core-black peer-checked:[&amp;_div]:text-grey-500 peer-indeterminate:[&amp;_div]:text-grey-500">
+      <!--
+          Visual checkbox icon (replaces hidden native checkbox)
+          aria-hidden because it's purely decorative - the native input conveys state
+          @TODO: When FzIcon natively supports ariaHidden prop, remove aria-hidden as HTML attribute and use :aria-hidden as prop
+        -->
+      <div data-v-79ecb611="" 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></div><!-- Label text (hidden in standalone mode for checkbox-only display) -->Test Checkbox
+    </label>
+    <!--
+        Optional tooltip for additional context
+        @TODO: When FzTooltip supports keyboard accessibility and ARIA attributes (role="tooltip", aria-describedby), update implementation
+      -->
+    <!--v-if-->
+  </div><!-- Error message display with accessible ARIA live region -->
+  <!--v-if-->
+  <!--
+      Children slot for nested checkboxes
+      Used by FzCheckboxGroupOption to render child checkboxes
+    -->
+</div>"
+`;
+exports[`FzCheckbox > Snapshots > should match snapshot - disabled state 1`] = `
+"<!-- Root container: vertical layout with consistent spacing -->
+<div data-v-79ecb611="" class="flex justify-center flex-col w-fit gap-4">
+  <!-- Checkbox row: input + label + optional tooltip, aligned to top for long labels -->
+  <!-- Hover effects are handled in CSS using data attributes -->
+  <div data-v-79ecb611="" class="flex items-start group" data-disabled="true">
+    <!--
+        Native checkbox input (visually hidden but functionally present)
+        - Maintains native keyboard navigation and form behavior
+        - Screen readers can interact with it normally
+        - Styled via adjacent label and icon using Tailwind's "peer" selector
+      --><input data-v-79ecb611="" type="checkbox" id="fz-checkbox-100000000001-2a84k" disabled="" class="w-0 h-0 peer fz-hidden-input" aria-checked="false" aria-required="false" aria-invalid="false" aria-labelledby="fz-checkbox-100000000001-2a84k-label" value="test">
+    <!--
+        Label element: provides click target and visual representation
+        Connected to hidden input via "for" attribute
+      --><label data-v-79ecb611="" id="fz-checkbox-100000000001-2a84k-label" for="fz-checkbox-100000000001-2a84k" class="flex gap-6 items-start hover:cursor-pointer text-core-black
+  peer-focus:[&amp;_div]:after:border-1
+  peer-focus:[&amp;_div]:after:border-solid
+  peer-focus:[&amp;_div]:after:rounded-[2px]
+  peer-focus:[&amp;_div]:after:border-blue-200
+  peer-focus:[&amp;_div]:after:content-['']
+  peer-focus:[&amp;_div]:after:top-0
+  peer-focus:[&amp;_div]:after:left-0
+  peer-focus:[&amp;_div]:after:right-0
+  peer-focus:[&amp;_div]:after:bottom-0
+  peer-focus:[&amp;_div]:after:absolute text-base text-grey-300 [&amp;_div]:text-grey-300">
+      <!--
+          Visual checkbox icon (replaces hidden native checkbox)
+          aria-hidden because it's purely decorative - the native input conveys state
+          @TODO: When FzIcon natively supports ariaHidden prop, remove aria-hidden as HTML attribute and use :aria-hidden as prop
+        -->
+      <div data-v-79ecb611="" 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></div><!-- Label text (hidden in standalone mode for checkbox-only display) -->Test Checkbox
+    </label>
+    <!--
+        Optional tooltip for additional context
+        @TODO: When FzTooltip supports keyboard accessibility and ARIA attributes (role="tooltip", aria-describedby), update implementation
+      -->
+    <!--v-if-->
+  </div><!-- Error message display with accessible ARIA live region -->
+  <!--v-if-->
+  <!--
+      Children slot for nested checkboxes
+      Used by FzCheckboxGroupOption to render child checkboxes
+    -->
+</div>"
+`;
+exports[`FzCheckbox > Snapshots > should match snapshot - error state 1`] = `
+"<!-- Root container: vertical layout with consistent spacing -->
+<div data-v-79ecb611="" class="flex justify-center flex-col w-fit gap-4">
+  <!-- Checkbox row: input + label + optional tooltip, aligned to top for long labels -->
+  <!-- Hover effects are handled in CSS using data attributes -->
+  <div data-v-79ecb611="" class="flex items-start group" data-error="true">
+    <!--
+        Native checkbox input (visually hidden but functionally present)
+        - Maintains native keyboard navigation and form behavior
+        - Screen readers can interact with it normally
+        - Styled via adjacent label and icon using Tailwind's "peer" selector
+      --><input data-v-79ecb611="" type="checkbox" id="fz-checkbox-100000000001-2a84k" class="w-0 h-0 peer fz-hidden-input" aria-checked="false" aria-required="false" aria-invalid="true" aria-describedby="fz-checkbox-100000000001-2a84k-error" aria-labelledby="fz-checkbox-100000000001-2a84k-label" value="test">
+    <!--
+        Label element: provides click target and visual representation
+        Connected to hidden input via "for" attribute
+      --><label data-v-79ecb611="" id="fz-checkbox-100000000001-2a84k-label" for="fz-checkbox-100000000001-2a84k" class="flex gap-6 items-start hover:cursor-pointer text-core-black
+  peer-focus:[&amp;_div]:after:border-1
+  peer-focus:[&amp;_div]:after:border-solid
+  peer-focus:[&amp;_div]:after:rounded-[2px]
+  peer-focus:[&amp;_div]:after:border-blue-200
+  peer-focus:[&amp;_div]:after:content-['']
+  peer-focus:[&amp;_div]:after:top-0
+  peer-focus:[&amp;_div]:after:left-0
+  peer-focus:[&amp;_div]:after:right-0
+  peer-focus:[&amp;_div]:after:bottom-0
+  peer-focus:[&amp;_div]:after:absolute text-base 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">
+      <!--
+          Visual checkbox icon (replaces hidden native checkbox)
+          aria-hidden because it's purely decorative - the native input conveys state
+          @TODO: When FzIcon natively supports ariaHidden prop, remove aria-hidden as HTML attribute and use :aria-hidden as prop
+        -->
+      <div data-v-79ecb611="" 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></div><!-- Label text (hidden in standalone mode for checkbox-only display) -->Test Checkbox
+    </label>
+    <!--
+        Optional tooltip for additional context
+        @TODO: When FzTooltip supports keyboard accessibility and ARIA attributes (role="tooltip", aria-describedby), update implementation
+      -->
+    <!--v-if-->
+  </div><!-- Error message display with accessible ARIA live region -->
+  <!--
+    Error message display with ARIA live region
+    Announces validation errors immediately to screen readers
+    - role="alert": High-priority message
+    - aria-live="assertive": Interrupts current announcements
+    - aria-atomic="true": Reads complete message
+    @TODO: When FzAlert supports automatic ARIA handling based on \`type\`
+    (e.g., via an \`announce\` prop or similar semantic API), we can remove
+    these manual attributes.
+    Proposed future API:
+      FzAlert with type="error" and announce prop
+      would automatically get role="alert" and aria-live="assertive"
+  -->
+  <div data-v-9bf2fc2e="" data-v-79ecb611="" class="flex select-none gap-12 rounded justify-between bg-semantic-error-50 border-semantic-error" id="fz-checkbox-100000000001-2a84k-error" role="alert" aria-live="assertive" aria-atomic="true">
+    <div data-v-da7f5873="" data-v-9bf2fc2e="" class="fz-container fz-container--horizontal gap-section-content-sm align-items-start layout-default flex-1 p-12">
+      <div data-v-9bf2fc2e="" class="flex items-center justify-center w-[20px] h-[20px] text-semantic-error"><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></div>
+      <div data-v-9bf2fc2e="" class="flex flex-col flex-1">
+        <!--v-if-->
+        <p data-v-9bf2fc2e="" class="font-normal !leading-[20px] mb-16">Error message</p>
+        <div data-v-da7f5873="" data-v-9bf2fc2e="" class="fz-container fz-container--horizontal gap-section-content-sm align-items-center layout-default"><button data-v-9bf2fc2e="" type="button" aria-disabled="false" class="relative rounded flex flex-shrink items-center justify-center font-normal !text-[16px] !leading-[20px] border-1 border-transparent gap-8 h-44 px-12 min-w-96 bg-core-white text-grey-500 !border-grey-200 hover:bg-grey-100 hover:!border-grey-200 focus:bg-core-white focus:!border-blue-600 disabled:bg-grey-50 disabled:text-grey-200 disabled:!border-grey-200">
+            <!--v-if-->
+            <div class="truncate font-normal !text-[16px] !leading-[20px]"></div>
+            <!--v-if-->
+          </button>
+          <!--v-if-->
+        </div>
+      </div>
+    </div>
+    <!--v-if-->
+  </div>
+  <!--
+      Children slot for nested checkboxes
+      Used by FzCheckboxGroupOption to render child checkboxes
+    -->
+</div>"
+`;
+exports[`FzCheckbox > Snapshots > should match snapshot - indeterminate state 1`] = `
+"<!-- Root container: vertical layout with consistent spacing -->
+<div data-v-79ecb611="" class="flex justify-center flex-col w-fit gap-4">
+  <!-- Checkbox row: input + label + optional tooltip, aligned to top for long labels -->
+  <!-- Hover effects are handled in CSS using data attributes -->
+  <div data-v-79ecb611="" class="flex items-start group">
+    <!--
+        Native checkbox input (visually hidden but functionally present)
+        - Maintains native keyboard navigation and form behavior
+        - Screen readers can interact with it normally
+        - Styled via adjacent label and icon using Tailwind's "peer" selector
+      --><input data-v-79ecb611="" type="checkbox" id="fz-checkbox-100000000001-2a84k" class="w-0 h-0 peer fz-hidden-input" aria-checked="mixed" aria-required="false" aria-invalid="false" aria-labelledby="fz-checkbox-100000000001-2a84k-label" value="test">
+    <!--
+        Label element: provides click target and visual representation
+        Connected to hidden input via "for" attribute
+      --><label data-v-79ecb611="" id="fz-checkbox-100000000001-2a84k-label" for="fz-checkbox-100000000001-2a84k" class="flex gap-6 items-start hover:cursor-pointer text-core-black
+  peer-focus:[&amp;_div]:after:border-1
+  peer-focus:[&amp;_div]:after:border-solid
+  peer-focus:[&amp;_div]:after:rounded-[2px]
+  peer-focus:[&amp;_div]:after:border-blue-200
+  peer-focus:[&amp;_div]:after:content-['']
+  peer-focus:[&amp;_div]:after:top-0
+  peer-focus:[&amp;_div]:after:left-0
+  peer-focus:[&amp;_div]:after:right-0
+  peer-focus:[&amp;_div]:after:bottom-0
+  peer-focus:[&amp;_div]:after:absolute text-base text-core-black peer-checked:[&amp;_div]:text-grey-500 peer-indeterminate:[&amp;_div]:text-grey-500">
+      <!--
+          Visual checkbox icon (replaces hidden native checkbox)
+          aria-hidden because it's purely decorative - the native input conveys state
+          @TODO: When FzIcon natively supports ariaHidden prop, remove aria-hidden as HTML attribute and use :aria-hidden as prop
+        -->
+      <div data-v-79ecb611="" 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></div><!-- Label text (hidden in standalone mode for checkbox-only display) -->Test Checkbox
+    </label>
+    <!--
+        Optional tooltip for additional context
+        @TODO: When FzTooltip supports keyboard accessibility and ARIA attributes (role="tooltip", aria-describedby), update implementation
+      -->
+    <!--v-if-->
+  </div><!-- Error message display with accessible ARIA live region -->
+  <!--v-if-->
+  <!--
+      Children slot for nested checkboxes
+      Used by FzCheckboxGroupOption to render child checkboxes
+    -->
+</div>"
+`;
+exports[`FzCheckbox > Snapshots > should match snapshot - required 1`] = `
+"<!-- Root container: vertical layout with consistent spacing -->
+<div data-v-79ecb611="" class="flex justify-center flex-col w-fit gap-4">
+  <!-- Checkbox row: input + label + optional tooltip, aligned to top for long labels -->
+  <!-- Hover effects are handled in CSS using data attributes -->
+  <div data-v-79ecb611="" class="flex items-start group">
+    <!--
+        Native checkbox input (visually hidden but functionally present)
+        - Maintains native keyboard navigation and form behavior
+        - Screen readers can interact with it normally
+        - Styled via adjacent label and icon using Tailwind's "peer" selector
+      --><input data-v-79ecb611="" type="checkbox" id="fz-checkbox-100000000001-2a84k" class="w-0 h-0 peer fz-hidden-input" required="" aria-checked="false" aria-required="true" aria-invalid="false" aria-labelledby="fz-checkbox-100000000001-2a84k-label" value="test">
+    <!--
+        Label element: provides click target and visual representation
+        Connected to hidden input via "for" attribute
+      --><label data-v-79ecb611="" id="fz-checkbox-100000000001-2a84k-label" for="fz-checkbox-100000000001-2a84k" class="flex gap-6 items-start hover:cursor-pointer text-core-black
+  peer-focus:[&amp;_div]:after:border-1
+  peer-focus:[&amp;_div]:after:border-solid
+  peer-focus:[&amp;_div]:after:rounded-[2px]
+  peer-focus:[&amp;_div]:after:border-blue-200
+  peer-focus:[&amp;_div]:after:content-['']
+  peer-focus:[&amp;_div]:after:top-0
+  peer-focus:[&amp;_div]:after:left-0
+  peer-focus:[&amp;_div]:after:right-0
+  peer-focus:[&amp;_div]:after:bottom-0
+  peer-focus:[&amp;_div]:after:absolute text-base text-core-black peer-checked:[&amp;_div]:text-grey-500 peer-indeterminate:[&amp;_div]:text-grey-500">
+      <!--
+          Visual checkbox icon (replaces hidden native checkbox)
+          aria-hidden because it's purely decorative - the native input conveys state
+          @TODO: When FzIcon natively supports ariaHidden prop, remove aria-hidden as HTML attribute and use :aria-hidden as prop
+        -->
+      <div data-v-79ecb611="" 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></div><!-- Label text (hidden in standalone mode for checkbox-only display) -->Test Checkbox
+    </label>
+    <!--
+        Optional tooltip for additional context
+        @TODO: When FzTooltip supports keyboard accessibility and ARIA attributes (role="tooltip", aria-describedby), update implementation
+      -->
+    <!--v-if-->
+  </div><!-- Error message display with accessible ARIA live region -->
+  <!--v-if-->
+  <!--
+      Children slot for nested checkboxes
+      Used by FzCheckboxGroupOption to render child checkboxes
+    -->
+</div>"
+`;
+exports[`FzCheckbox > Snapshots > should match snapshot - standalone mode 1`] = `
+"<!-- Root container: vertical layout with consistent spacing -->
+<div data-v-79ecb611="" class="flex justify-center flex-col w-fit gap-4">
+  <!-- Checkbox row: input + label + optional tooltip, aligned to top for long labels -->
+  <!-- Hover effects are handled in CSS using data attributes -->
+  <div data-v-79ecb611="" class="flex items-start group">
+    <!--
+        Native checkbox input (visually hidden but functionally present)
+        - Maintains native keyboard navigation and form behavior
+        - Screen readers can interact with it normally
+        - Styled via adjacent label and icon using Tailwind's "peer" selector
+      --><input data-v-79ecb611="" type="checkbox" id="fz-checkbox-100000000001-2a84k" class="w-0 h-0 peer fz-hidden-input" aria-checked="false" aria-label="Test Checkbox" aria-required="false" aria-invalid="false" value="test">
+    <!--
+        Label element: provides click target and visual representation
+        Connected to hidden input via "for" attribute
+      --><label data-v-79ecb611="" id="fz-checkbox-100000000001-2a84k-label" for="fz-checkbox-100000000001-2a84k" class="flex gap-6 items-start hover:cursor-pointer text-core-black
+  peer-focus:[&amp;_div]:after:border-1
+  peer-focus:[&amp;_div]:after:border-solid
+  peer-focus:[&amp;_div]:after:rounded-[2px]
+  peer-focus:[&amp;_div]:after:border-blue-200
+  peer-focus:[&amp;_div]:after:content-['']
+  peer-focus:[&amp;_div]:after:top-0
+  peer-focus:[&amp;_div]:after:left-0
+  peer-focus:[&amp;_div]:after:right-0
+  peer-focus:[&amp;_div]:after:bottom-0
+  peer-focus:[&amp;_div]:after:absolute text-base text-core-black peer-checked:[&amp;_div]:text-grey-500 peer-indeterminate:[&amp;_div]:text-grey-500">
+      <!--
+          Visual checkbox icon (replaces hidden native checkbox)
+          aria-hidden because it's purely decorative - the native input conveys state
+          @TODO: When FzIcon natively supports ariaHidden prop, remove aria-hidden as HTML attribute and use :aria-hidden as prop
+        -->
+      <div data-v-79ecb611="" 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></div><!-- Label text (hidden in standalone mode for checkbox-only display) -->
+      <!--v-if-->
+    </label>
+    <!--
+        Optional tooltip for additional context
+        @TODO: When FzTooltip supports keyboard accessibility and ARIA attributes (role="tooltip", aria-describedby), update implementation
+      -->
+    <!--v-if-->
+  </div><!-- Error message display with accessible ARIA live region -->
+  <!--v-if-->
+  <!--
+      Children slot for nested checkboxes
+      Used by FzCheckboxGroupOption to render child checkboxes
+    -->
+</div>"
+`;
+exports[`FzCheckbox > Snapshots > should match snapshot - with emphasis 1`] = `
+"<!-- Root container: vertical layout with consistent spacing -->
+<div data-v-79ecb611="" class="flex justify-center flex-col w-fit gap-4">
+  <!-- Checkbox row: input + label + optional tooltip, aligned to top for long labels -->
+  <!-- Hover effects are handled in CSS using data attributes -->
+  <div data-v-79ecb611="" class="flex items-start group" data-emphasis="true">
+    <!--
+        Native checkbox input (visually hidden but functionally present)
+        - Maintains native keyboard navigation and form behavior
+        - Screen readers can interact with it normally
+        - Styled via adjacent label and icon using Tailwind's "peer" selector
+      --><input data-v-79ecb611="" type="checkbox" id="fz-checkbox-100000000001-2a84k" class="w-0 h-0 peer fz-hidden-input" aria-checked="true" aria-required="false" aria-invalid="false" aria-labelledby="fz-checkbox-100000000001-2a84k-label" value="test">
+    <!--
+        Label element: provides click target and visual representation
+        Connected to hidden input via "for" attribute
+      --><label data-v-79ecb611="" id="fz-checkbox-100000000001-2a84k-label" for="fz-checkbox-100000000001-2a84k" class="flex gap-6 items-start hover:cursor-pointer text-core-black
+  peer-focus:[&amp;_div]:after:border-1
+  peer-focus:[&amp;_div]:after:border-solid
+  peer-focus:[&amp;_div]:after:rounded-[2px]
+  peer-focus:[&amp;_div]:after:border-blue-200
+  peer-focus:[&amp;_div]:after:content-['']
+  peer-focus:[&amp;_div]:after:top-0
+  peer-focus:[&amp;_div]:after:left-0
+  peer-focus:[&amp;_div]:after:right-0
+  peer-focus:[&amp;_div]:after:bottom-0
+  peer-focus:[&amp;_div]:after:absolute text-base text-core-black [&amp;_div]:text-blue-500 peer-checked:[&amp;_div]:text-blue-500 peer-indeterminate:[&amp;_div]:text-blue-500">
+      <!--
+          Visual checkbox icon (replaces hidden native checkbox)
+          aria-hidden because it's purely decorative - the native input conveys state
+          @TODO: When FzIcon natively supports ariaHidden prop, remove aria-hidden as HTML attribute and use :aria-hidden as prop
+        -->
+      <div data-v-79ecb611="" 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></div><!-- Label text (hidden in standalone mode for checkbox-only display) -->Test Checkbox
+    </label>
+    <!--
+        Optional tooltip for additional context
+        @TODO: When FzTooltip supports keyboard accessibility and ARIA attributes (role="tooltip", aria-describedby), update implementation
+      -->
+    <!--v-if-->
+  </div><!-- Error message display with accessible ARIA live region -->
+  <!--v-if-->
+  <!--
+      Children slot for nested checkboxes
+      Used by FzCheckboxGroupOption to render child checkboxes
+    -->
+</div>"
+`;