Added missing documents

.changeset/clean-bobcats-care.md

@@ -0,0 +1,5 @@
+---
+"@kunai-consulting/qwik": patch
+---
+
+Added missing documents

apps/docs/src/routes/checkbox/auto-api/api.ts

@@ -42,8 +42,7 @@ export const api = {
           {
             "name": "data-hidden",
             "type": "string",
-            "comment":
-              "Indicates whether the indicator should be hidden based on checkbox state"
+            "comment": "Indicates whether the indicator should be hidden based on checkbox state"
           },
           {
             "name": "data-checked",
@@ -75,8 +74,8 @@ export const api = {
             "PublicCheckboxRootProps": [
               {
                 "comment": "",
-                "prop": '"bind:checked"',
-                "type": 'Signal<boolean | "mixed">'
+                "prop": "\"bind:checked\"",
+                "type": "Signal<boolean | \"mixed\">"
               },
               {
                 "comment": "Initial checked state of the checkbox",
@@ -158,8 +157,7 @@ export const api = {
           {
             "name": "data-mixed",
             "type": "string | undefined",
-            "comment":
-              "Indicates whether the checkbox trigger is in an indeterminate state"
+            "comment": "Indicates whether the checkbox trigger is in an indeterminate state"
           }
         ]
       }
@@ -168,8 +166,7 @@ export const api = {
   "anatomy": [
     {
       "name": "Checkbox.Root",
-      "description":
-        "Root component that provides context and state management for the checkbox"
+      "description": "Root component that provides context and state management for the checkbox"
     },
     {
       "name": "Checkbox.Indicator",
@@ -199,34 +196,27 @@ export const api = {
   "keyboardInteractions": [
     {
       "key": "Space",
-      "comment":
-        "When focus is on the checkbox trigger, toggles the checkbox state between checked and unchecked"
+      "comment": "When focus is on the checkbox trigger, toggles the checkbox state between checked/unchecked/mixed"
     },
     {
       "key": "Enter",
-      "comment":
-        "When focus is on the checkbox trigger, toggles the checkbox state between checked and unchecked (default behavior prevented)"
+      "comment": "When focus is on the checkbox trigger, toggles the checkbox state between checked/unchecked/mixed (default behavior prevented)"
     },
     {
       "key": "Tab",
-      "comment":
-        "Moves focus to the checkbox trigger or away from it following the document tab sequence"
+      "comment": "Moves focus to the checkbox trigger and follows the natural tab order"
     }
   ],
   "features": [
     "WAI ARIA Checkbox design pattern",
-    "Indeterminate state support",
-    "Form binding with hidden native input",
+    "Indeterminate state support (tri-state)",
+    "Form integration with hidden native input",
     "Error message handling and validation",
-    "Custom description text with screenreader support",
-    "Reactive state management with signals",
-    "Keyboard navigation with Enter key handling",
-    "Accessible labeling system",
-    "Disabled state management",
-    "Two-way data binding with bind:checked prop",
-    "Custom onChange event handling",
-    "Automatic ARIA state management",
-    "Visual indicator customization",
-    "Compound component architecture"
+    "Custom descriptions with ARIA support",
+    "Keyboard navigation and accessibility",
+    "Controllable checked state (controlled/uncontrolled)",
+    "Focus management with ref tracking",
+    "Disabled state handling",
+    "Enter key prevention for form submissions"
   ]
-};
+};

apps/docs/src/routes/checkbox/index.mdx

@@ -1,118 +1,147 @@
----
-title: Qwik Design System | Checkbox
----
-
 import { api } from "./auto-api/api";
 
 # Checkbox
-
-A control that enables users to make binary (or ternary) choices through selection and deselection.
-
+A clickable input that lets users make binary choices or select multiple options.
 <Showcase name="hero" />
-
 ## Features
-
 <Features api={api} />
-
 ## Anatomy
-
 <AnatomyTable api={api} />
-
-## Adding a label
-
-To associate a label with a checkbox, use the `Checkbox.Label` component.
-
-<Showcase name="label" />
-
-## Adding a description
-
-To add a description to a checkbox, add the `isDescription` prop in the `Checkbox.Root` component.
-
-Then use the `Checkbox.Description` component to decide where to render the description.
-
-<Showcase name="description" />
-
-> **Note:** Due to HTML streaming limitations, the `isDescription` prop must be passed to the root component to maintain consistent accessibility across different environments (especially server rendered content). The component will display a warning if no description is provided when this component is rendered.
-
-## Initially check a checkbox
-
-To set a checkbox to its initial checked state, use the `checked` prop.
-
+## Examples
+### Basic Usage
+The most basic checkbox implementation requires a `Checkbox.Root` component with a `Checkbox.Trigger` and `Checkbox.Indicator` nested inside.
 <Showcase name="initial" />
-
-## Reactive state
-
-To make a checkbox reactive, use the `bind:checked` prop, and pass in a signal.
-
-<Showcase name="reactive" />
-
-## Programmatic state
-
-To make programmatic changes to a checkbox, change a signal value passed to the `bind:checked` prop.
-
-<Showcase name="programmatic" />
-
-## onChange$
-
-To listen for changes when the checkbox state changes, use the `onChange$` prop.
-
-<Showcase name="change" />
-
-## Disabled
-
-To disable a checkbox, use the `disabled` prop.
-
-<Showcase name="disabled" />
-
-## Mixed state
-
-Checkboxes can also be in a third mixed or indeterminate state. This is often considered a "partially checked" state.
-
-To set a mixed state, pass `"mixed"` to the `bind:checked` prop:
-
+The `checked` prop on `Checkbox.Root` sets the initial checked state. When checked, the `Checkbox.Indicator` becomes visible.
+### Visual Features
+#### Labels and Descriptions
+Add descriptive text with `Checkbox.Label` and `Checkbox.Description` components. The `isDescription` prop on `Checkbox.Root` enables description support.
+<Showcase name="description" />
+#### Mixed State
+Checkboxes support an indeterminate state using the `"mixed"` value. This is useful for parent/child checkbox relationships.
 <Showcase name="mixed-initial" />
-
-The mixed state can also be set reactively
-
+### Advanced Usage
+#### Form Integration
+For form submissions, add `Checkbox.HiddenInput` to create a native checkbox input. Use `name` and `value` props to control form data.
+<Showcase name="form" />
+The `required` prop enforces validation:
+<Showcase name="validation" />
+You can customize the submitted value using the `value` prop:
+<Showcase name="value" />
+#### Error Handling
+Display error messages using the `Checkbox.ErrorMessage` component. This automatically sets the appropriate ARIA attributes.
+<Showcase name="validation" />
+#### Mixed State Management
+For complex selection scenarios, use the `bind:checked` prop to handle mixed states programmatically.
 <Showcase name="mixed-reactive" />
-
-> When a checkbox is in a mixed state and the user clicks it:
-> 1. The first click changes the state from "mixed" to "checked"
-> 2. The next click changes the state from "checked" to "unchecked"
-> 
-> This follows the standard accessibility pattern where mixed → checked → unchecked → checked → unchecked, and so on.
-
-## Inside a form
-
-To create a form with a checkbox, use the `Checkbox.HiddenNativeInput` component.
-
+The checkbox cycles through mixed → checked → unchecked states when clicked.
+
+## Component State
+### Using Component State
+The checkbox component provides several ways to control its state:
+1. **Initial State**
+As shown in the Initial example, you can set the initial checked state using the `checked` prop on `Checkbox.Root`:
+```tsx
+<Checkbox.Root checked>
+  <Checkbox.Trigger>
+    <Checkbox.Indicator />
+  </Checkbox.Trigger>
+</Checkbox.Root>
+```
+2. **Controlled State**
+For controlled state management, use the `bind:checked` prop as demonstrated in the Reactive example. This allows you to bind the checkbox state to your application's state.
+3. **Indeterminate State**
+The checkbox supports a third "mixed" or indeterminate state, as shown in the Mixed Initial example. This is useful for representing partially selected states, like in a tree structure or bulk selection interface.
+### State Interactions
+1. **Change Events**
+As shown in the Change example, use the `onChange$` prop to handle state changes:
+```tsx
+<Checkbox.Root 
+  onChange$={(checked) => {
+    // Handle the new checked state
+  }}
+>
+```
+2. **Disabled State**
+The Disabled example demonstrates how to disable the checkbox using the `disabled` prop. When disabled:
+- The checkbox cannot be interacted with
+- The visual state reflects the disabled status
+- All interactions are prevented
+3. **Programmatic Control**
+As shown in the Programmatic example, you can programmatically control the checkbox state from outside the component:
+```tsx
+<button onClick$={() => {
+  // Update the bound checked state
+  isChecked.value = true;
+}}>
+  Check the checkbox
+</button>
+```
+4. **Mixed State Transitions**
+When in a mixed state, clicking the checkbox will first transition to a checked state, then follow the normal checked/unchecked cycle on subsequent clicks, as demonstrated in the Mixed Reactive example.
+The checkbox maintains a predictable state transition flow:
+- mixed → checked
+- checked → unchecked
+- unchecked → checked
+
+Based on the examples and API documentation provided, I'll document the configuration options for the Checkbox component.
+## Core Configuration
+### Initial State
+The checkbox can be configured with an initial state using the `checked` prop on `Checkbox.Root`. As shown in the `initial` example above, this sets an uncontrolled initial value.
+> The default value is `false` if not specified.
+### Value Configuration
+The checkbox supports three states:
+- `false` (unchecked)
+- `true` (checked) 
+- `"mixed"` (indeterminate)
+As shown in the `mixed-initial` example above, the indeterminate state can be set initially.
+### Form Integration
+The checkbox can be configured for form submission with these props:
+- `name` - Form field name
+- `value` - Custom value for form submission (defaults to "on")
+- `required` - Makes the field required
+As shown in the `value` example above, you can customize the submitted value.
+## Advanced Configuration
+### State Management
+The checkbox supports both controlled and uncontrolled state management:
+```typescript
+// Uncontrolled
+<Checkbox.Root checked={true} />
+// Controlled
+<Checkbox.Root bind:checked={isCheckedSignal} />
+```
+### Description Configuration
+When using `Checkbox.Description`, you must set `isDescription` prop on `Checkbox.Root`:
+```typescript
+<Checkbox.Root isDescription>
+  <Checkbox.Description>...</Checkbox.Description>
+</Checkbox.Root>
+```
+> Failing to set `isDescription` will trigger a console warning.
+### Technical Constraints
+1. The `bind:checked` signal must be of type `Signal<boolean | "mixed">`
+2. The `onChange$` handler receives the new state as its only argument
+3. When in `mixed` state, the first click will set the state to `true`
+These behaviors can be observed in the `mixed-reactive` example above.
+
+## Forms
+The Checkbox component provides form integration through the `<Checkbox.HiddenInput>` component, which renders a native checkbox input that's visually hidden but still accessible for form submission.
 <Showcase name="form" />
-
-Then create a name for the checkbox in the `Checkbox.Root` component.
-
-> This will be used to associate the checkbox with the form.
-
-## Making a checkbox required
-
-To make a checkbox required, pass `required` to the `Checkbox.Root` component.
-
-<Showcase name="required" />
-
-## Giving a checkbox a value
-
-By default, the value of a checkbox is `on` when checked. To give a checkbox a distinct value, pass a string to the `value` prop.
-
+The following props can be used to configure the form behavior:
+- `name`: Sets the name of the form field
+- `value`: Sets a custom value for the checkbox (defaults to "on")
+- `required`: Makes the checkbox a required form field
 <Showcase name="value" />
-
-## Checkbox validation
-
-To validate a checkbox, use the `Checkbox.ErrorMessage` component. Whenever this component is rendered, the checkbox will display a validation error message.
-
-> Screen readers will announce the error message when the component is rendered, along with an indication that the checkbox is invalid.
-
+## Form Validation
+The Checkbox supports form validation through the `<Checkbox.ErrorMessage>` component. When rendered, it automatically puts the checkbox in an invalid state and connects it with the error message via ARIA.
 <Showcase name="validation" />
-
-<APITable api={api} />
+The error message is displayed when form validation fails, and the checkbox trigger receives the appropriate ARIA attributes:
+- `aria-invalid="true"`
+- `aria-describedby` pointing to the error message
+## Mixed State in Forms
+For complex form scenarios, the checkbox supports a mixed (indeterminate) state that can be used when a form field represents a partial selection.
+<Showcase name="form-mixed" />
+The mixed state is reflected in the hidden input's `indeterminate` property, ensuring proper form submission behavior.
 
 
 
+<APITable api={api} />

apps/docs/src/routes/checklist/auto-api/api.ts

@@ -72,33 +72,31 @@ export const api = {
   "keyboardInteractions": [
     {
       "key": "Space",
-      "comment":
-        "When focus is on a checkbox trigger, toggles the checked state of that checkbox"
+      "comment": "When focus is on a checkbox trigger (ChecklistItemTrigger or ChecklistSelectAll), toggles the checked state"
     },
     {
-      "key": "Tab",
-      "comment": "Moves focus between the checklist items in sequential order"
+      "key": "Enter",
+      "comment": "When focus is on a checkbox trigger (ChecklistItemTrigger or ChecklistSelectAll), toggles the checked state"
     },
     {
-      "key": "Shift+Tab",
-      "comment": "Moves focus between the checklist items in reverse order"
+      "key": "Tab",
+      "comment": "Moves focus to the next checkbox trigger"
     },
     {
-      "key": "Enter",
-      "comment":
-        "When focus is on a checkbox trigger, toggles the checked state of that checkbox"
+      "key": "Shift+Tab",
+      "comment": "Moves focus to the previous checkbox trigger"
     }
   ],
   "features": [
-    "Select all items functionality",
-    "Individual item selection",
-    "Mixed state support when some items selected",
-    "WAI ARIA Checkbox group pattern",
-    "Synchronized state management across items",
-    "Reactive updates between select all and individual items",
+    "Select all/unselect all functionality",
+    "Mixed state handling for partial selections",
+    "Individual item selection tracking",
+    "WAI-ARIA checkbox list pattern",
     "Form input integration",
-    "Accessible labeling and descriptions",
-    "Item state tracking and indexing",
-    "Nested component structure support"
+    "Dynamic item state synchronization",
+    "Nested accessibility descriptions per item",
+    "Independent item state management",
+    "Automated item indexing",
+    "Context-based state propagation"
   ]
-};
+};