From a66f2775e7038c847607686418811bdf3b7e45d1 Mon Sep 17 00:00:00 2001
From: Gab <gabriel.mendonca@azion.com>
Date: Wed, 24 Jun 2026 13:57:16 -0700
Subject: [PATCH 1/6] fix(webkit): stop checkbox jumping vertically on toggle

The inputs/checkbox root is `inline-flex` with the default
`vertical-align: baseline`. While unchecked it has no in-flow children
(the native input is `absolute`), so its baseline resolves to the box's
bottom edge; on check, the `v-if` SVG becomes an in-flow flex child and
the baseline jumps to the icon, shifting the whole control down ~3px on
the line. Adding `align-middle` makes vertical placement independent of
content, so the box stays put across checked/unchecked. No effect in
flex layouts (e.g. the Disabled story), where vertical-align is ignored.
---
 packages/webkit/src/components/inputs/checkbox/checkbox.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/webkit/src/components/inputs/checkbox/checkbox.vue b/packages/webkit/src/components/inputs/checkbox/checkbox.vue
index 57b5a067..c138e370 100644
--- a/packages/webkit/src/components/inputs/checkbox/checkbox.vue
+++ b/packages/webkit/src/components/inputs/checkbox/checkbox.vue
@@ -92,7 +92,7 @@
 
   const sharedClasses = [
     ...toggleControlClasses,
-    'group size-[1.125rem] rounded-[var(--shape-button)] border border-[var(--border-default)]',
+    'group size-[1.125rem] align-middle rounded-[var(--shape-button)] border border-[var(--border-default)]',
     'bg-[var(--bg-surface)] text-transparent'
   ]
 

From bb1ea016a64534a0bc9a0630adb41832cc3bd85c Mon Sep 17 00:00:00 2001
From: Gab <gabriel.mendonca@azion.com>
Date: Wed, 24 Jun 2026 14:17:26 -0700
Subject: [PATCH 2/6] refactor(webkit): bring checkbox into spec conformance,
 keep jump fix
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Re-authored .specs/checkbox.md from the real component (props/events/
slots/tokens/a11y now match what ships) and re-approved it (spec_version
3, fresh checksum) — the previous spec had drifted and its checksum no
longer validated.

Rewrote inputs/checkbox/checkbox.vue to the canonical styling pattern the
spec's Constraints require: all utilities inline on the root with data-*
driven variants, dropping the JS class presets (sharedClasses /
checkedClasses / disabledClasses / iconClasses / rootClasses computed) and
the interactive-states preset import. Behavior, tokens, and the
align-middle fix for the on-toggle vertical jump are preserved; verified
in Storybook (box top identical checked vs unchecked) and lint/spec
compliance pass.
---
 .specs/checkbox.md                            | 81 ++++++++++++-------
 .../components/inputs/checkbox/checkbox.vue   | 39 +++------
 2 files changed, 63 insertions(+), 57 deletions(-)

diff --git a/.specs/checkbox.md b/.specs/checkbox.md
index 3f991f52..a5af2a9e 100644
--- a/.specs/checkbox.md
+++ b/.specs/checkbox.md
@@ -2,36 +2,55 @@
 name: checkbox
 category: inputs
 structure: monolithic
-status: implemented
-spec_version: 2
-checksum: d0a27b8ca2563f33c09954c4657f76af2b4edab6e87bb5367d0ab69d366a2acb
+status: approved
+spec_version: 3
+checksum: c54742c2f1d68eb8f3808ca1b820a16f356e844ebcefab8983c6c1ed55dfb3dd
 created: 2026-05-22
-last_updated: 2026-05-22
+last_updated: 2026-06-24
 ---
+
 # Checkbox — Component Spec
 
 ## Purpose
 
-Collects or edits user input. Migrated from the existing implementation at `packages/webkit/src/components/webkit/inputs/checkbox/`.
+Square checkbox control only — the box, the native input, and the check glyph, with no label or description chrome. Use it when you compose your own label, or reach for `FieldCheckbox` / `FieldCheckboxBlock` when you want built-in text. Supports a single boolean (`binary`) or collecting a `value` into an array model.
+
+## Usage
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import Checkbox from '@aziontech/webkit/inputs/checkbox'
+
+const accepted = ref(false)
+</script>
+
+<template>
+  <label class="inline-flex items-center gap-[var(--spacing-2)]">
+    <Checkbox v-model="accepted" binary input-id="accept-terms" />
+    Accept terms
+  </label>
+</template>
+```
 
 ## Props
 
 | Prop | Type | Default | Required | JSDoc |
 |---|---|---|---|---|
-| `modelValue` | `string` | `'undefined'` | no | model Value. |
-| `value` | `string` | `'undefined'` | no | value. |
-| `binary` | `boolean` | `false` | no | binary. |
+| `modelValue` | `unknown` | `undefined` | no | Bound value: a boolean in `binary` mode, otherwise the array/value the control reflects. |
+| `value` | `unknown` | `undefined` | no | This checkbox's value, added to or removed from the model array when not `binary`. |
+| `binary` | `boolean` | `false` | no | Toggles a single boolean instead of collecting `value` into an array. |
 | `disabled` | `boolean` | `false` | no | Disables interaction and applies disabled tokens. |
-| `readonly` | `boolean` | `false` | no | readonly. |
-| `inputId` | `string` | `'undefined'` | no | input Id. |
+| `readonly` | `boolean` | `false` | no | Prevents changes while the control stays focusable. |
+| `inputId` | `string` | `undefined` | no | Forwarded to the native input `id`; pair with an external label's `for`. |
 | `name` | `string` | `undefined` | no | HTML name for form submission. |
-| `tabindex` | `number` | `'undefined'` | no | tabindex. |
+| `tabindex` | `number` | `undefined` | no | Tab order for the native input. |
 
 ## Events
 
 | Event | Payload | Notes |
 |---|---|---|
-| `update:modelValue` | `unknown` | — |
+| `update:modelValue` | `unknown` | Emitted on toggle; payload is the next boolean (`binary`) or the updated value array. |
 
 ## Slots
 
@@ -39,25 +58,32 @@ Collects or edits user input. Migrated from the existing implementation at `pack
 
 ## States
 
-- Visual states: `default`, `hover`, `focus-visible`, `active`, `disabled`
+- Visual states: `default`, `hover`, `focus-visible`, `active`, `disabled`, `readonly`, `checked`
+- `data-checked` mirrors the checked state
 - `data-disabled` mirrors the `disabled` prop
+- `data-readonly` mirrors the `readonly` prop
 
 ## Motion & Animations
 
-| Trigger | Animation / Transition | Token | Reduced-motion fallback |
+| Trigger | Animation / Transition | Token (see `.claude/docs/DESIGN.md` § Animations) | Reduced-motion fallback |
 |---|---|---|---|
-| state change | `transition-colors duration-150 ease-out` | inline | `motion-reduce:transition-none` |
+| hover / active state change | `transition-opacity duration-fast-02 ease-productive-entrance` on the hover/active ghost overlays | semantic (matches catalog) | `motion-reduce:transition-none` |
 
 ## Tokens
 
 | Region | Token (DESIGN.md) |
 |---|---|
-| typography | .text-body-sm |
 | surface | `var(--bg-surface)` |
-| text | `var(--text-default)` |
-| spacing | `var(--spacing-3)` |
-| shape | `var(--shape-elements)` |
+| border | `var(--border-default)` |
+| checked surface | `var(--primary)` |
+| checked glyph | `var(--primary-contrast)` |
+| shape | `var(--shape-button)` |
+| hover overlay | `var(--bg-hover)` |
+| active overlay | `var(--bg-active)` |
+| disabled surface | `var(--bg-disabled)` |
+| disabled glyph | `var(--text-disabled)` |
 | ring | `var(--ring-color)` |
+| ring offset | `var(--bg-canvas)` |
 
 ## Theme gaps
 
@@ -67,17 +93,17 @@ Collects or edits user input. Migrated from the existing implementation at `pack
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]`
-- Keyboard map: `Tab` focuses; `Enter`/`Space` activates; `Escape` closes overlays where applicable.
-- ARIA: root uses appropriate roles (`button`, `dialog`, `status`, etc.) per sub-component.
-- Contrast ≥4.5:1 (text) / ≥3:1 (large + icons), including disabled state.
-- `motion-reduce:transition-none motion-reduce:transform-none` on animated states.
-- Touch target ≥40×40 px where the control is interactive.
+- Visible focus: descendant native input drives the ring — `has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-[var(--ring-color)] has-[:focus-visible]:ring-offset-1 has-[:focus-visible]:ring-offset-[var(--bg-canvas)]`
+- Keyboard map: `Tab` focuses the native input; `Space` toggles checked state (native checkbox behavior).
+- ARIA: renders a real `<input type="checkbox">` with `aria-checked`; control-only, so associate copy via `inputId` + an external label `for`, or use `FieldCheckbox`.
+- Contrast ≥4.5:1 (text) / ≥3:1 (large + icons), including the disabled state.
+- `motion-reduce:transition-none` on the animated ghost overlays.
+- Touch target: the box is 1.125rem (18px) — justified deviation for a control-only primitive; the larger ≥40×40 px hit area is provided by the field wrappers (`FieldCheckbox` / `FieldCheckboxBlock`) or the consumer's label.
 
 ## Stories (Storybook)
 
 - Default
-- Disabled
+- Disabled — demonstrates the `disabled` prop (checked and unchecked).
 
 ## Constraints — DO NOT
 
@@ -94,7 +120,8 @@ Collects or edits user input. Migrated from the existing implementation at `pack
 - Do not inherit artifacts as-is from another design system, Figma file, library, or pre-existing `CONTRACT.md` / `README.md`. Rewrite to our conventions. See `.claude/rules/migration.md`.
 - Do not add Figma references to Storybook stories. No `parameters.design`, no `parameters.figma`, no Figma URLs in `docs.description.*`, no `@storybook/addon-designs` import. The Figma link is owned by `<name>.figma.ts` (Code Connect). See `.claude/docs/COMPONENT_REQUIREMENTS.md`.
 - Do not use `parameters.actions.argTypesRegex` (deprecated in Storybook 8 and silently misroutes Vue 3 emits) or `parameters.actions.handles` (DOM-only). Declare every event explicitly in `argTypes` with a camelCase `on<Event>` key and `{ action: '<emitted-name>' }`. Do not use the legacy CSF2 `Name.args = {...}` form — always object-style CSF3.
-- Do not add bespoke Storybook stories beyond Default + per `kind` + per `size` + Disabled, unless the spec's "Stories (Storybook)" section explicitly justifies the addition.
+- Do not add bespoke Storybook stories beyond Default + Types + Sizes + state stories (`Loading`, `Disabled`) for the props the component actually declares, unless the spec's "Stories (Storybook)" section explicitly justifies the addition. Do not split Types/Sizes into one-story-per-variant — the composite stories are the canonical pattern.
+- Do not duplicate the `## Usage` block from the spec inside the Storybook story body. The block is injected once into `parameters.docs.description.component` by the storybook-write skill; copy it nowhere else.
 - Do not edit `.claude/docs/DESIGN.md`, `.claude/docs/COMPONENT_REQUIREMENTS.md`, or `.claude/docs/PRIMEVUE_ABSTRACTION.md`.
 - Do not edit the root `package.json` or `.github/workflows/*`.
 - Do not change `structure` after `status: approved`. To change structure, bump `spec_version` and re-author the spec.
diff --git a/packages/webkit/src/components/inputs/checkbox/checkbox.vue b/packages/webkit/src/components/inputs/checkbox/checkbox.vue
index c138e370..69a1e919 100644
--- a/packages/webkit/src/components/inputs/checkbox/checkbox.vue
+++ b/packages/webkit/src/components/inputs/checkbox/checkbox.vue
@@ -1,30 +1,27 @@
 <script setup lang="ts">
   import { computed, useAttrs } from 'vue'
 
-  import { cn } from '../../../utils/cn'
-  import { toggleControlClasses } from '../presets/interactive-states'
-
   defineOptions({
     name: 'Checkbox',
     inheritAttrs: false
   })
 
   interface Props {
-    /** model Value. */
+    /** Bound value: a boolean in `binary` mode, otherwise the array/value the control reflects. */
     modelValue?: unknown
-    /** value. */
+    /** This checkbox's value, added to or removed from the model array when not `binary`. */
     value?: unknown
-    /** binary. */
+    /** Toggles a single boolean instead of collecting `value` into an array. */
     binary?: boolean
     /** Disables interaction and applies disabled tokens. */
     disabled?: boolean
-    /** readonly. */
+    /** Prevents changes while the control stays focusable. */
     readonly?: boolean
-    /** input Id. */
+    /** Forwarded to the native input id; pair with an external label for attribute. */
     inputId?: string
     /** HTML name for form submission. */
     name?: string
-    /** tabindex. */
+    /** Tab order for the native input. */
     tabindex?: number
   }
 
@@ -89,34 +86,16 @@
 
     emit('update:modelValue', current)
   }
-
-  const sharedClasses = [
-    ...toggleControlClasses,
-    'group size-[1.125rem] align-middle rounded-[var(--shape-button)] border border-[var(--border-default)]',
-    'bg-[var(--bg-surface)] text-transparent'
-  ]
-
-  const checkedClasses =
-    'data-[checked]:border-[var(--primary)] data-[checked]:bg-[var(--primary)] data-[checked]:text-[var(--primary-contrast)] data-[checked]:before:hidden data-[checked]:after:hidden'
-
-  const disabledClasses =
-    'data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:border-[var(--border-default)] data-[disabled]:bg-[var(--bg-disabled)] data-[disabled]:opacity-50 data-[readonly]:pointer-events-none data-[readonly]:cursor-not-allowed'
-
-  const iconClasses =
-    'size-2.5 shrink-0 stroke-[1.5] group-data-[disabled]:stroke-[var(--text-disabled)]'
-
-  const rootClasses = computed(() =>
-    cn(sharedClasses, checkedClasses, disabledClasses, attrs.class)
-  )
 </script>
 
 <template>
   <span
-    :class="rootClasses"
+    :class="attrs.class"
     :data-testid="testId"
     :data-checked="isChecked || null"
     :data-disabled="disabled || null"
     :data-readonly="readonly || null"
+    class="group relative inline-flex size-[1.125rem] shrink-0 items-center justify-center align-middle rounded-[var(--shape-button)] border border-[var(--border-default)] bg-[var(--bg-surface)] text-transparent before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:bg-[var(--bg-hover)] before:opacity-0 before:content-[''] before:transition-opacity before:duration-fast-02 before:ease-productive-entrance after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:bg-[var(--bg-active)] after:opacity-0 after:content-[''] after:transition-opacity after:duration-fast-02 after:ease-productive-entrance hover:before:opacity-100 active:after:opacity-100 motion-reduce:before:transition-none motion-reduce:after:transition-none has-[:focus-visible]:outline-none has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-[var(--ring-color)] has-[:focus-visible]:ring-offset-1 has-[:focus-visible]:ring-offset-[var(--bg-canvas)] focus-within:before:opacity-0 has-[:focus-visible]:before:opacity-0 data-[checked]:border-[var(--primary)] data-[checked]:bg-[var(--primary)] data-[checked]:text-[var(--primary-contrast)] data-[checked]:before:hidden data-[checked]:after:hidden data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:border-[var(--border-default)] data-[disabled]:bg-[var(--bg-disabled)] data-[disabled]:opacity-50 data-[disabled]:before:hidden data-[disabled]:after:hidden data-[readonly]:pointer-events-none data-[readonly]:cursor-not-allowed data-[readonly]:before:hidden data-[readonly]:after:hidden"
   >
     <input
       :id="inputId"
@@ -134,7 +113,7 @@
     />
     <svg
       v-if="isChecked"
-      :class="iconClasses"
+      class="size-2.5 shrink-0 stroke-[1.5] group-data-[disabled]:stroke-[var(--text-disabled)]"
       viewBox="0 0 12 12"
       fill="none"
       aria-hidden="true"

From ef8dc2933c90cf63077bf31d74baff1b9efe2919 Mon Sep 17 00:00:00 2001
From: Gab <gabriel.mendonca@azion.com>
Date: Wed, 24 Jun 2026 14:28:36 -0700
Subject: [PATCH 3/6] docs(storybook): rebuild checkbox story per
 storybook-write spec
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Rewrite Webkit/Inputs/Checkbox to the canonical story shape: inject the
spec's Purpose + ## Usage block into docs.description.component, declare
argTypes for every spec prop/event (grouped by table.category), and add a
reactive v-model Template (local ref synced from args.modelValue, forwards
update:modelValue so the field toggles and the Actions panel logs). Stories
limited to the spec's list — Default + a Disabled composite showing the
checked and unchecked states. No Figma refs, no argTypesRegex, no legacy
.args form.
---
 .../stories/webkit/inputs/Checkbox.stories.js | 119 ++++++++++--------
 1 file changed, 65 insertions(+), 54 deletions(-)

diff --git a/apps/storybook/src/stories/webkit/inputs/Checkbox.stories.js b/apps/storybook/src/stories/webkit/inputs/Checkbox.stories.js
index 61d9cef7..ac3ea32c 100644
--- a/apps/storybook/src/stories/webkit/inputs/Checkbox.stories.js
+++ b/apps/storybook/src/stories/webkit/inputs/Checkbox.stories.js
@@ -1,4 +1,4 @@
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 
 import Checkbox from '@aziontech/webkit/inputs/checkbox'
 
@@ -8,7 +8,7 @@ const meta = {
   component: Checkbox,
   tags: ['autodocs'],
   parameters: {
-    layout: 'padded',
+    layout: 'centered',
     backgrounds: { default: 'dark' },
     a11y: {
       config: {
@@ -20,25 +20,44 @@ const meta = {
     },
     docs: {
       description: {
-        component:
-          'Control only — the square checkbox input with no label or description. Pair with an external label or use FieldCheckbox / FieldCheckboxBlock for built-in text.'
+        component: [
+          'Square checkbox control only — the box, the native input, and the check glyph, with no label or description chrome. Use it when you compose your own label, or reach for `FieldCheckbox` / `FieldCheckboxBlock` when you want built-in text. Supports a single boolean (`binary`) or collecting a `value` into an array model.',
+          '',
+          '## Usage',
+          '',
+          '```vue',
+          '<script setup>',
+          "import { ref } from 'vue'",
+          "import Checkbox from '@aziontech/webkit/inputs/checkbox'",
+          '',
+          'const accepted = ref(false)',
+          '</script>',
+          '',
+          '<template>',
+          '  <label class="inline-flex items-center gap-[var(--spacing-2)]">',
+          '    <Checkbox v-model="accepted" binary input-id="accept-terms" />',
+          '    Accept terms',
+          '  </label>',
+          '</template>',
+          '```'
+        ].join('\n')
       }
     }
   },
   argTypes: {
     modelValue: {
       control: 'boolean',
-      description: 'model Value.',
+      description: 'Bound value: a boolean in binary mode, otherwise the array/value the control reflects.',
       table: { type: { summary: 'unknown' }, category: 'props' }
     },
     value: {
       control: false,
-      description: 'value.',
+      description: "This checkbox's value, added to or removed from the model array when not binary.",
       table: { type: { summary: 'unknown' }, category: 'props' }
     },
     binary: {
       control: 'boolean',
-      description: 'binary.',
+      description: 'Toggles a single boolean instead of collecting value into an array.',
       table: { type: { summary: 'boolean' }, defaultValue: { summary: 'false' }, category: 'props' }
     },
     disabled: {
@@ -48,12 +67,12 @@ const meta = {
     },
     readonly: {
       control: 'boolean',
-      description: 'readonly.',
+      description: 'Prevents changes while the control stays focusable.',
       table: { type: { summary: 'boolean' }, defaultValue: { summary: 'false' }, category: 'props' }
     },
     inputId: {
       control: 'text',
-      description: 'input Id.',
+      description: 'Forwarded to the native input id; pair with an external label for attribute.',
       table: { type: { summary: 'string' }, category: 'props' }
     },
     name: {
@@ -63,76 +82,68 @@ const meta = {
     },
     tabindex: {
       control: 'number',
-      description: 'tabindex.',
+      description: 'Tab order for the native input.',
       table: { type: { summary: 'number' }, category: 'props' }
     },
     'onUpdate:modelValue': {
       action: 'update:modelValue',
-      description: 'Emitted when the value changes.',
+      description: 'Emitted on toggle; payload is the next boolean (binary) or the updated value array.',
       table: { type: { summary: 'unknown' }, category: 'events' }
     }
+  },
+  args: {
+    binary: true,
+    disabled: false,
+    readonly: false
   }
 }
 
 export default meta
 
-export const Default = {
-  render: () => ({
-    components: { Checkbox },
-    setup() {
-      const value = ref(false)
-      return { value }
-    },
-    template: `
-      <Checkbox
-        v-model="value"
-        binary
-        input-id="webkit-checkbox-default"
-        aria-label="Toggle option"
-      />
-    `
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Binary control only — associate copy via an external label or FieldCheckbox.'
+const Template = (args) => ({
+  components: { Checkbox },
+  setup() {
+    const value = ref(args.modelValue ?? false)
+
+    watch(
+      () => args.modelValue,
+      (next) => {
+        value.value = next ?? false
       }
+    )
+
+    const onUpdate = (next) => {
+      value.value = next
+      args['onUpdate:modelValue']?.(next)
     }
+
+    return { args, value, onUpdate }
+  },
+  template: '<Checkbox v-bind="args" :model-value="value" @update:model-value="onUpdate" />'
+})
+
+/** @type {import('@storybook/vue3').StoryObj<typeof Checkbox>} */
+export const Default = {
+  render: Template,
+  parameters: {
+    docs: { description: { story: 'Binary control only — associate copy via an external label or FieldCheckbox.' } }
   }
 }
 
 export const Disabled = {
-  render: () => ({
+  render: (args) => ({
     components: { Checkbox },
     setup() {
-      const checked = ref(true)
-      const unchecked = ref(false)
-      return { checked, unchecked }
+      return { args }
     },
     template: `
       <div class="flex items-center gap-[var(--spacing-4)]">
-        <Checkbox
-          v-model="checked"
-          binary
-          disabled
-          input-id="webkit-checkbox-disabled-on"
-          aria-label="Disabled checked"
-        />
-        <Checkbox
-          v-model="unchecked"
-          binary
-          disabled
-          input-id="webkit-checkbox-disabled-off"
-          aria-label="Disabled unchecked"
-        />
+        <Checkbox v-bind="args" :model-value="true" disabled aria-label="Disabled checked" />
+        <Checkbox v-bind="args" :model-value="false" disabled aria-label="Disabled unchecked" />
       </div>
     `
   }),
   parameters: {
-    docs: {
-      description: {
-        story: 'Disabled checked and unchecked controls without label chrome.'
-      }
-    }
+    docs: { description: { story: 'Disabled control in both checked and unchecked states.' } }
   }
 }

From 11d06ff4de72841c76ea612e63c436e32bec07a5 Mon Sep 17 00:00:00 2001
From: Gab <gabriel.mendonca@azion.com>
Date: Wed, 24 Jun 2026 14:42:07 -0700
Subject: [PATCH 4/6] fix(checkbox): align usage import with dev export
 consolidation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Merging dev removed the ./inputs/checkbox export and repointed ./checkbox
at the webkit checkbox component (the old PrimeVue checkbox was deleted in
dev's cleanup). The 3-way merge already corrected the story's actual import
and title to dev's conventions; this fixes the two remaining string
references — the embedded Usage snippet in the story's docs and the spec's
Usage block — to @aziontech/webkit/checkbox, and refreshes the spec
checksum.
---
 .specs/checkbox.md                                            | 4 ++--
 .../src/stories/components/inputs/Checkbox.stories.js         | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.specs/checkbox.md b/.specs/checkbox.md
index a5af2a9e..31c66ba4 100644
--- a/.specs/checkbox.md
+++ b/.specs/checkbox.md
@@ -4,7 +4,7 @@ category: inputs
 structure: monolithic
 status: approved
 spec_version: 3
-checksum: c54742c2f1d68eb8f3808ca1b820a16f356e844ebcefab8983c6c1ed55dfb3dd
+checksum: fc610ab0930da58bac5c91f25e9e06bfaee49a4693a16f840563c0ee9dc4063a
 created: 2026-05-22
 last_updated: 2026-06-24
 ---
@@ -20,7 +20,7 @@ Square checkbox control only — the box, the native input, and the check glyph,
 ```vue
 <script setup>
 import { ref } from 'vue'
-import Checkbox from '@aziontech/webkit/inputs/checkbox'
+import Checkbox from '@aziontech/webkit/checkbox'
 
 const accepted = ref(false)
 </script>
diff --git a/apps/storybook/src/stories/components/inputs/Checkbox.stories.js b/apps/storybook/src/stories/components/inputs/Checkbox.stories.js
index 4da958fd..9a356b2b 100644
--- a/apps/storybook/src/stories/components/inputs/Checkbox.stories.js
+++ b/apps/storybook/src/stories/components/inputs/Checkbox.stories.js
@@ -28,7 +28,7 @@ const meta = {
           '```vue',
           '<script setup>',
           "import { ref } from 'vue'",
-          "import Checkbox from '@aziontech/webkit/inputs/checkbox'",
+          "import Checkbox from '@aziontech/webkit/checkbox'",
           '',
           'const accepted = ref(false)',
           '</script>',

From 604823ea0ec7753a6d94b189bd432751ab638a53 Mon Sep 17 00:00:00 2001
From: Gab <gabriel.mendonca@azion.com>
Date: Wed, 24 Jun 2026 14:59:11 -0700
Subject: [PATCH 5/6] style(storybook): sort checkbox story imports, fix title
 indent

---
 .../src/stories/components/inputs/Checkbox.stories.js        | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/apps/storybook/src/stories/components/inputs/Checkbox.stories.js b/apps/storybook/src/stories/components/inputs/Checkbox.stories.js
index 9a356b2b..559e3b3e 100644
--- a/apps/storybook/src/stories/components/inputs/Checkbox.stories.js
+++ b/apps/storybook/src/stories/components/inputs/Checkbox.stories.js
@@ -1,10 +1,9 @@
-import { ref, watch } from 'vue'
-
 import Checkbox from '@aziontech/webkit/checkbox'
+import { ref, watch } from 'vue'
 
 /** @type {import('@storybook/vue3').Meta<typeof Checkbox>} */
 const meta = {
- title: 'Components/Inputs/Checkbox',
+  title: 'Components/Inputs/Checkbox',
   component: Checkbox,
   tags: ['autodocs'],
   parameters: {

From 1b96920699027c8929f8011185581d6e6946b20c Mon Sep 17 00:00:00 2001
From: Gab <gabriel.mendonca@azion.com>
Date: Fri, 26 Jun 2026 14:53:44 -0500
Subject: [PATCH 6/6] =?UTF-8?q?docs(checkbox):=20address=20review=20?=
 =?UTF-8?q?=E2=80=94=20type=20tabindex=20as=20number=20|=20undefined?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Per Robson's review on .specs/checkbox.md: make the optional tabindex type
explicit as `number | undefined` (escaped pipe so the markdown table cell
renders correctly), and mirror it in the story argType summary. The other
points he raised (value typed as any, quoted 'undefined' string defaults)
were already resolved by the spec_version 3 rewrite — value/modelValue are
`unknown` with unquoted `undefined` defaults. Refreshes the spec checksum.
---
 .specs/checkbox.md                                            | 4 ++--
 .../src/stories/components/inputs/Checkbox.stories.js         | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.specs/checkbox.md b/.specs/checkbox.md
index 31c66ba4..3ff9fb8d 100644
--- a/.specs/checkbox.md
+++ b/.specs/checkbox.md
@@ -4,7 +4,7 @@ category: inputs
 structure: monolithic
 status: approved
 spec_version: 3
-checksum: fc610ab0930da58bac5c91f25e9e06bfaee49a4693a16f840563c0ee9dc4063a
+checksum: 2fd0e74289221cb07d676ea9cecad5c547ffedc51452a69e0e9e552b05ab2cb3
 created: 2026-05-22
 last_updated: 2026-06-24
 ---
@@ -44,7 +44,7 @@ const accepted = ref(false)
 | `readonly` | `boolean` | `false` | no | Prevents changes while the control stays focusable. |
 | `inputId` | `string` | `undefined` | no | Forwarded to the native input `id`; pair with an external label's `for`. |
 | `name` | `string` | `undefined` | no | HTML name for form submission. |
-| `tabindex` | `number` | `undefined` | no | Tab order for the native input. |
+| `tabindex` | `number \| undefined` | `undefined` | no | Tab order for the native input. |
 
 ## Events
 
diff --git a/apps/storybook/src/stories/components/inputs/Checkbox.stories.js b/apps/storybook/src/stories/components/inputs/Checkbox.stories.js
index 559e3b3e..013409dc 100644
--- a/apps/storybook/src/stories/components/inputs/Checkbox.stories.js
+++ b/apps/storybook/src/stories/components/inputs/Checkbox.stories.js
@@ -82,7 +82,7 @@ const meta = {
     tabindex: {
       control: 'number',
       description: 'Tab order for the native input.',
-      table: { type: { summary: 'number' }, category: 'props' }
+      table: { type: { summary: 'number | undefined' }, category: 'props' }
     },
     'onUpdate:modelValue': {
       action: 'update:modelValue',