Fix/checkbox glitch #669
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -2,62 +2,88 @@ | |
| name: checkbox | ||
| category: inputs | ||
| structure: monolithic | ||
| status: approved | ||
| spec_version: 3 | ||
| checksum: 2fd0e74289221cb07d676ea9cecad5c547ffedc51452a69e0e9e552b05ab2cb3 | ||
| created: 2026-05-22 | ||
| last_updated: 2026-06-24 | ||
| --- | ||
|
|
||
| # Checkbox — Component Spec | ||
|
|
||
| ## Purpose | ||
|
|
||
| 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/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` | `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 | 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. | | ||
|
Contributor
There was a problem hiding this comment. the type if not current default tabindex 0 should be configured to both types
Collaborator
Author
There was a problem hiding this comment. Fixed in 1b96920: |
||
| | `tabindex` | `number \| undefined` | `undefined` | no | Tab order for the native input. | | ||
|
|
||
| ## Events | ||
|
|
||
| | Event | Payload | Notes | | ||
| |---|---|---| | ||
| | `update:modelValue` | `unknown` | Emitted on toggle; payload is the next boolean (`binary`) or the updated value array. | | ||
|
|
||
| ## Slots | ||
|
|
||
| | _none_ | — | — | | ||
|
|
||
| ## States | ||
|
|
||
| - 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 (see `.claude/docs/DESIGN.md` § Animations) | Reduced-motion fallback | | ||
| |---|---|---|---| | ||
| | 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) | | ||
| |---|---| | ||
| | surface | `var(--bg-surface)` | | ||
| | 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: 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 — 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 + 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. | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
After update Seems it's updating the type to any and writing 'undefined' inside quotes indicating undefined string.
Type string should default value with '' (empty string).
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Addressed in the spec_version 3 rewrite:
value/modelValueare now typedunknown(notany— our spec Constraints forbidany) with an unquotedundefineddefault. I keptunknownrather thanstringbecause the checkbox is polymorphic — the model is a boolean inbinarymode and an array otherwise — so an empty-string default doesn't apply;undefined(no preset value) is correct for a control-only checkbox. The quoted'undefined'strings are gone across the table.