@vc-shell/vc-app-skill 2.0.0-alpha.33 → 2.0.0-alpha.34

package/runtime/knowledge/docs/ui/components/molecules/vc-accordion/vc-accordion.docs.md

@@ -10,6 +10,7 @@ Collapsible content sections with smooth CSS grid animations, customizable colla
 - Expandable form sections or configuration panels
 
 When NOT to use:
+
 - For navigation groups -- use `VcMenuGroup`
 - For tab-based content switching -- use `VcTabs`
 - For single collapsible panels without siblings -- use `VcAccordionItem` directly
@@ -18,7 +19,10 @@ When NOT to use:
 
 ```vue
 <template>
-  <VcAccordion :items="faqItems" variant="bordered" />
+  <VcAccordion
+    :items="faqItems"
+    variant="bordered"
+  />
 </template>
 
 <script setup lang="ts">
@@ -38,12 +42,12 @@ const faqItems = [
 
 Four variants control the visual grouping and spacing of accordion items.
 
-| Variant | Description |
-|---------|-------------|
-| `default` | Items stacked with shared top/bottom borders, no gaps |
-| `bordered` | Single outer border wrapping all items, items separated by inner borders |
-| `separated` | Card-like items with 12px gaps between them, each with its own border |
-| `ghost` | Transparent background, minimal styling, no borders or padding |
+| Variant     | Description                                                              |
+| ----------- | ------------------------------------------------------------------------ |
+| `default`   | Items stacked with shared top/bottom borders, no gaps                    |
+| `bordered`  | Single outer border wrapping all items, items separated by inner borders |
+| `separated` | Card-like items with 12px gaps between them, each with its own border    |
+| `ghost`     | Transparent background, minimal styling, no borders or padding           |
 
 ```vue
 <VcAccordion :items="items" variant="separated" />
@@ -55,7 +59,10 @@ Use `v-model` to control which items are expanded. In single mode, the value is
 
 ```vue
 <template>
-  <VcAccordion v-model="openItem" :items="items" />
+  <VcAccordion
+    v-model="openItem"
+    :items="items"
+  />
   <p>Currently open: {{ openItem }}</p>
 </template>
 
@@ -136,7 +143,11 @@ The `content` property in `AccordionItem` accepts both strings and Vue component
 
 ```vue
 <template>
-  <VcAccordion v-model="activeQuestion" :items="faqs" variant="separated" />
+  <VcAccordion
+    v-model="activeQuestion"
+    :items="faqs"
+    variant="separated"
+  />
 </template>
 
 <script setup lang="ts">
@@ -181,61 +192,61 @@ Both render together -- items-prop items appear first, then slot content. Omit `
 
 ```ts
 interface AccordionItem {
-  id?: string | number;        // Unique identifier (falls back to array index)
-  title: string;               // Header text
+  id?: string | number; // Unique identifier (falls back to array index)
+  title: string; // Header text
   content?: string | Component; // Body content (string or Vue component)
-  titleSlot?: Component;       // Custom title component (alternative to #title slot)
-  collapsedHeight?: number;    // Per-item collapsed height override (px)
-  maxExpandedHeight?: number;  // Per-item max expanded height override (px)
-  disabled?: boolean;          // Prevents toggling this item
+  titleSlot?: Component; // Custom title component (alternative to #title slot)
+  collapsedHeight?: number; // Per-item collapsed height override (px)
+  maxExpandedHeight?: number; // Per-item max expanded height override (px)
+  disabled?: boolean; // Prevents toggling this item
 }
 ```
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `items` | `AccordionItem[]` | `[]` | Array of items to render |
-| `modelValue` | `(string \| number) \| (string \| number)[]` | -- | Controlled expanded state via `v-model` |
-| `multiple` | `boolean` | `false` | Allow multiple items to be expanded simultaneously |
-| `variant` | `"default" \| "bordered" \| "separated" \| "ghost"` | `"default"` | Visual style variant |
-| `collapsedHeight` | `number` | `0` | Default collapsed height in pixels for all items |
-| `maxExpandedHeight` | `number` | -- | Maximum expanded height (content scrolls if exceeded) |
+| Prop                | Type                                                | Default     | Description                                           |
+| ------------------- | --------------------------------------------------- | ----------- | ----------------------------------------------------- |
+| `items`             | `AccordionItem[]`                                   | `[]`        | Array of items to render                              |
+| `modelValue`        | `(string \| number) \| (string \| number)[]`        | --          | Controlled expanded state via `v-model`               |
+| `multiple`          | `boolean`                                           | `false`     | Allow multiple items to be expanded simultaneously    |
+| `variant`           | `"default" \| "bordered" \| "separated" \| "ghost"` | `"default"` | Visual style variant                                  |
+| `collapsedHeight`   | `number`                                            | `0`         | Default collapsed height in pixels for all items      |
+| `maxExpandedHeight` | `number`                                            | --          | Maximum expanded height (content scrolls if exceeded) |
 
 ## Events
 
-| Event | Payload | Description |
-|-------|---------|-------------|
+| Event               | Payload                                      | Description                          |
+| ------------------- | -------------------------------------------- | ------------------------------------ |
 | `update:modelValue` | `(string \| number) \| (string \| number)[]` | Emitted when expanded item(s) change |
 
 ## Slots
 
-| Slot | Description |
-|------|-------------|
+| Slot      | Description                                                      |
+| --------- | ---------------------------------------------------------------- |
 | `default` | Place `VcAccordionItem` components directly for custom rendering |
 
 ### VcAccordionItem Slots
 
-| Slot | Description |
-|------|-------------|
-| `title` | Custom title rendering (replaces the `title` prop text) |
-| `default` | Content body of the accordion item |
+| Slot      | Description                                             |
+| --------- | ------------------------------------------------------- |
+| `title`   | Custom title rendering (replaces the `title` prop text) |
+| `default` | Content body of the accordion item                      |
 
 ## CSS Variables
 
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `--accordion-item-border-color` | `var(--neutrals-200)` | Border color for items and dividers |
-| `--accordion-item-border-radius` | `6px` | Border radius of item containers |
-| `--accordion-item-header-padding` | `12px 16px` | Header button padding |
-| `--accordion-item-header-background` | `var(--additional-50)` | Header background color |
-| `--accordion-item-header-background-hover` | `var(--neutrals-50)` | Header background on hover |
-| `--accordion-item-header-color` | `var(--secondary-950)` | Header text color |
-| `--accordion-item-content-padding` | `16px` | Content body padding |
-| `--accordion-item-content-background` | `var(--additional-50)` | Content body background |
-| `--accordion-item-transition-duration` | `300ms` | Expand/collapse animation duration |
-| `--accordion-item-fade-height` | `60px` | Fade gradient height on collapsed preview |
-| `--accordion-item-focus-ring-color` | `var(--primary-100)` | Focus ring color for keyboard navigation |
+| Variable                                   | Default                | Description                               |
+| ------------------------------------------ | ---------------------- | ----------------------------------------- |
+| `--accordion-item-border-color`            | `var(--neutrals-200)`  | Border color for items and dividers       |
+| `--accordion-item-border-radius`           | `6px`                  | Border radius of item containers          |
+| `--accordion-item-header-padding`          | `12px 16px`            | Header button padding                     |
+| `--accordion-item-header-background`       | `var(--additional-50)` | Header background color                   |
+| `--accordion-item-header-background-hover` | `var(--neutrals-50)`   | Header background on hover                |
+| `--accordion-item-header-color`            | `var(--secondary-950)` | Header text color                         |
+| `--accordion-item-content-padding`         | `16px`                 | Content body padding                      |
+| `--accordion-item-content-background`      | `var(--additional-50)` | Content body background                   |
+| `--accordion-item-transition-duration`     | `300ms`                | Expand/collapse animation duration        |
+| `--accordion-item-fade-height`             | `60px`                 | Fade gradient height on collapsed preview |
+| `--accordion-item-focus-ring-color`        | `var(--primary-100)`   | Focus ring color for keyboard navigation  |
 
 > **Note:** The `ghost` variant overrides several variables to transparent/zero values for minimal appearance.
 

package/runtime/knowledge/docs/ui/components/molecules/vc-breadcrumbs/vc-breadcrumbs.docs.md

@@ -123,7 +123,10 @@ For applications built on the VC-Shell framework, manage breadcrumb state reacti
 
 ```vue
 <template>
-  <VcBreadcrumbs :items="breadcrumbs" separated />
+  <VcBreadcrumbs
+    :items="breadcrumbs"
+    separated
+  />
 </template>
 
 <script setup lang="ts">
@@ -148,11 +151,11 @@ remove(["products", "categories"]);
 
 **Composable API:**
 
-| Method | Signature | Description |
-|--------|-----------|-------------|
-| `breadcrumbs` | `ComputedRef<Breadcrumbs[]>` | Reactive array of current items |
-| `push` | `(item: Breadcrumbs) => void` | Add an item (deduplicates by `id`) |
-| `remove` | `(ids: string[]) => void` | Remove items by their IDs |
+| Method        | Signature                     | Description                        |
+| ------------- | ----------------------------- | ---------------------------------- |
+| `breadcrumbs` | `ComputedRef<Breadcrumbs[]>`  | Reactive array of current items    |
+| `push`        | `(item: Breadcrumbs) => void` | Add an item (deduplicates by `id`) |
+| `remove`      | `(ids: string[]) => void`     | Remove items by their IDs          |
 
 > **Note:** When `push` is called with an `id` that already exists, the existing entry is updated in place rather than duplicated.
 
@@ -237,27 +240,27 @@ clickHandler: () => { navigate(); return true; }
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `items` | `Breadcrumbs[]` | `[]` | Array of breadcrumb items to display |
-| `variant` | `"default" \| "light"` | `"default"` | Visual style variant |
-| `separated` | `boolean` | `false` | Show `/` separators between items |
-| `collapsed` | `boolean` | `false` | Force all items into the dropdown |
+| Prop        | Type                   | Default     | Description                          |
+| ----------- | ---------------------- | ----------- | ------------------------------------ |
+| `items`     | `Breadcrumbs[]`        | `[]`        | Array of breadcrumb items to display |
+| `variant`   | `"default" \| "light"` | `"default"` | Visual style variant                 |
+| `separated` | `boolean`              | `false`     | Show `/` separators between items    |
+| `collapsed` | `boolean`              | `false`     | Force all items into the dropdown    |
 
 ## Slots
 
-| Slot | Scope | Description |
-|------|-------|-------------|
+| Slot      | Scope                                      | Description                                                        |
+| --------- | ------------------------------------------ | ------------------------------------------------------------------ |
 | `trigger` | `{ click: () => void, isActive: boolean }` | Custom dropdown trigger button replacing the default ellipsis icon |
 
 ## CSS Variables
 
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `--separator-color` | `var(--neutrals-400)` | Color of the `/` separator character |
-| `--breadcrumbs-item-border-color` | `var(--secondary-300)` | Border color of breadcrumb items |
-| `--breadcrumbs-expand-button-color` | `var(--neutrals-500)` | Color of the overflow "more" button |
-| `--breadcrumbs-expand-button-color-hover` | `var(--neutrals-600)` | Hover color of the overflow button |
+| Variable                                  | Default                | Description                          |
+| ----------------------------------------- | ---------------------- | ------------------------------------ |
+| `--separator-color`                       | `var(--neutrals-400)`  | Color of the `/` separator character |
+| `--breadcrumbs-item-border-color`         | `var(--secondary-300)` | Border color of breadcrumb items     |
+| `--breadcrumbs-expand-button-color`       | `var(--neutrals-500)`  | Color of the overflow "more" button  |
+| `--breadcrumbs-expand-button-color-hover` | `var(--neutrals-600)`  | Hover color of the overflow button   |
 
 ## Accessibility
 

package/runtime/knowledge/docs/ui/components/molecules/vc-checkbox/vc-checkbox.docs.md

@@ -48,9 +48,21 @@ const selected = ref<string[]>([]);
 </script>
 
 <template>
-  <VcCheckbox v-model="selected" value="express">Express shipping</VcCheckbox>
-  <VcCheckbox v-model="selected" value="insurance">Shipping insurance</VcCheckbox>
-  <VcCheckbox v-model="selected" value="gift">Gift wrapping</VcCheckbox>
+  <VcCheckbox
+    v-model="selected"
+    value="express"
+    >Express shipping</VcCheckbox
+  >
+  <VcCheckbox
+    v-model="selected"
+    value="insurance"
+    >Shipping insurance</VcCheckbox
+  >
+  <VcCheckbox
+    v-model="selected"
+    value="gift"
+    >Gift wrapping</VcCheckbox
+  >
   <!-- selected.value might be ["express", "gift"] -->
 </template>
 ```
@@ -59,11 +71,11 @@ const selected = ref<string[]>([]);
 
 Three sizes are available via the `size` prop:
 
-| Size | Value | Pixel dimension |
-|------|-------|-----------------|
-| Small | `"s"` (default) | 16 x 16 px |
-| Medium | `"m"` | 20 x 20 px |
-| Large | `"l"` | 24 x 24 px |
+| Size   | Value           | Pixel dimension |
+| ------ | --------------- | --------------- |
+| Small  | `"s"` (default) | 16 x 16 px      |
+| Medium | `"m"`           | 20 x 20 px      |
+| Large  | `"l"`           | 24 x 24 px      |
 
 ```vue
 <VcCheckbox v-model="val" size="s">Small checkbox</VcCheckbox>
@@ -99,9 +111,21 @@ function toggleAll(checked: boolean) {
     Select all
   </VcCheckbox>
 
-  <VcCheckbox v-model="selected" value="A">Option A</VcCheckbox>
-  <VcCheckbox v-model="selected" value="B">Option B</VcCheckbox>
-  <VcCheckbox v-model="selected" value="C">Option C</VcCheckbox>
+  <VcCheckbox
+    v-model="selected"
+    value="A"
+    >Option A</VcCheckbox
+  >
+  <VcCheckbox
+    v-model="selected"
+    value="B"
+    >Option B</VcCheckbox
+  >
+  <VcCheckbox
+    v-model="selected"
+    value="C"
+    >Option C</VcCheckbox
+  >
 </template>
 ```
 
@@ -155,11 +179,7 @@ const form = reactive({
 <VcCheckbox :model-value="true" disabled>Cannot be changed</VcCheckbox>
 
 <!-- Error -->
-<VcCheckbox
-  v-model="val"
-  :error="true"
-  error-message="This field is required"
->
+<VcCheckbox v-model="val" :error="true" error-message="This field is required">
   I have read the disclaimer
 </VcCheckbox>
 ```
@@ -173,9 +193,21 @@ Use `VcInputGroup` to add a shared label and semantic grouping:
 ```vue
 <template>
   <VcInputGroup label="Delivery options">
-    <VcCheckbox v-model="deliveryOptions" value="courier">Courier delivery</VcCheckbox>
-    <VcCheckbox v-model="deliveryOptions" value="pickup">Store pickup</VcCheckbox>
-    <VcCheckbox v-model="deliveryOptions" value="postal">Postal service</VcCheckbox>
+    <VcCheckbox
+      v-model="deliveryOptions"
+      value="courier"
+      >Courier delivery</VcCheckbox
+    >
+    <VcCheckbox
+      v-model="deliveryOptions"
+      value="pickup"
+      >Store pickup</VcCheckbox
+    >
+    <VcCheckbox
+      v-model="deliveryOptions"
+      value="postal"
+      >Postal service</VcCheckbox
+    >
   </VcInputGroup>
 </template>
 
@@ -246,68 +278,64 @@ const selected = ref<string[]>([]);
 <VcCheckbox v-model="val" indeterminate>Select all</VcCheckbox>
 
 <!-- ✅ Use a computed + handler to manage the select-all logic -->
-<VcCheckbox
-  :model-value="allSelected"
-  :indeterminate="someSelected && !allSelected"
-  @update:model-value="toggleAll"
->
+<VcCheckbox :model-value="allSelected" :indeterminate="someSelected && !allSelected" @update:model-value="toggleAll">
   Select all
 </VcCheckbox>
 ```
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `modelValue` | `boolean \| T[]` | `undefined` | Bound value via `v-model`. Boolean for single, array for multi-select. |
-| `value` | `T` | -- | Value added to the array when checked (array mode only) |
-| `label` | `string` | -- | Label text displayed above the checkbox |
-| `tooltip` | `string` | -- | Tooltip on the label info icon |
-| `size` | `"s" \| "m" \| "l"` | `"s"` | Checkbox size variant |
-| `indeterminate` | `boolean` | `false` | Shows the indeterminate (dash) visual state |
-| `trueValue` | `boolean` | `true` | Value emitted when checked (boolean mode) |
-| `falseValue` | `boolean` | `false` | Value emitted when unchecked (boolean mode) |
-| `disabled` | `boolean` | `false` | Disables the checkbox |
-| `required` | `boolean` | `false` | Shows a required indicator |
-| `error` | `boolean` | `false` | Enables error styling |
-| `errorMessage` | `string` | -- | Error message displayed below the checkbox |
-| `name` | `string` | `"Field"` | HTML name attribute |
-| `outline` | `boolean` | `false` | Applies outline style variant |
+| Prop            | Type                | Default     | Description                                                            |
+| --------------- | ------------------- | ----------- | ---------------------------------------------------------------------- |
+| `modelValue`    | `boolean \| T[]`    | `undefined` | Bound value via `v-model`. Boolean for single, array for multi-select. |
+| `value`         | `T`                 | --          | Value added to the array when checked (array mode only)                |
+| `label`         | `string`            | --          | Label text displayed above the checkbox                                |
+| `tooltip`       | `string`            | --          | Tooltip on the label info icon                                         |
+| `size`          | `"s" \| "m" \| "l"` | `"s"`       | Checkbox size variant                                                  |
+| `indeterminate` | `boolean`           | `false`     | Shows the indeterminate (dash) visual state                            |
+| `trueValue`     | `boolean`           | `true`      | Value emitted when checked (boolean mode)                              |
+| `falseValue`    | `boolean`           | `false`     | Value emitted when unchecked (boolean mode)                            |
+| `disabled`      | `boolean`           | `false`     | Disables the checkbox                                                  |
+| `required`      | `boolean`           | `false`     | Shows a required indicator                                             |
+| `error`         | `boolean`           | `false`     | Enables error styling                                                  |
+| `errorMessage`  | `string`            | --          | Error message displayed below the checkbox                             |
+| `name`          | `string`            | `"Field"`   | HTML name attribute                                                    |
+| `outline`       | `boolean`           | `false`     | Applies outline style variant                                          |
 
 ## Events
 
-| Event | Payload | Description |
-|-------|---------|-------------|
+| Event               | Payload          | Description                          |
+| ------------------- | ---------------- | ------------------------------------ |
 | `update:modelValue` | `boolean \| T[]` | Emitted when the checkbox is toggled |
 
 ## Slots
 
-| Slot | Description |
-|------|-------------|
-| `default` | Inline text or content displayed next to the checkbox |
-| `icon` | Replace the check/indeterminate icon with custom markup |
-| `error` | Custom error message markup |
+| Slot      | Description                                             |
+| --------- | ------------------------------------------------------- |
+| `default` | Inline text or content displayed next to the checkbox   |
+| `icon`    | Replace the check/indeterminate icon with custom markup |
+| `error`   | Custom error message markup                             |
 
 ## CSS Variables
 
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `--checkbox-size-s` | `16px` | Small variant size |
-| `--checkbox-size-m` | `20px` | Medium variant size |
-| `--checkbox-size-l` | `24px` | Large variant size |
-| `--checkbox-border-color` | `var(--neutrals-300)` | Default border color |
-| `--checkbox-border-color-hover` | `var(--neutrals-400)` | Border color on hover |
-| `--checkbox-bg-color` | `var(--additional-50)` | Unchecked background |
-| `--checkbox-checked-bg-color` | `var(--primary-500)` | Checked background color |
-| `--checkbox-checked-border-color` | `var(--primary-500)` | Checked border color |
-| `--checkbox-indeterminate-bg-color` | `var(--primary-500)` | Indeterminate background |
+| Variable                              | Default                | Description              |
+| ------------------------------------- | ---------------------- | ------------------------ |
+| `--checkbox-size-s`                   | `16px`                 | Small variant size       |
+| `--checkbox-size-m`                   | `20px`                 | Medium variant size      |
+| `--checkbox-size-l`                   | `24px`                 | Large variant size       |
+| `--checkbox-border-color`             | `var(--neutrals-300)`  | Default border color     |
+| `--checkbox-border-color-hover`       | `var(--neutrals-400)`  | Border color on hover    |
+| `--checkbox-bg-color`                 | `var(--additional-50)` | Unchecked background     |
+| `--checkbox-checked-bg-color`         | `var(--primary-500)`   | Checked background color |
+| `--checkbox-checked-border-color`     | `var(--primary-500)`   | Checked border color     |
+| `--checkbox-indeterminate-bg-color`   | `var(--primary-500)`   | Indeterminate background |
 | `--checkbox-indeterminate-line-color` | `var(--additional-50)` | Indeterminate dash color |
-| `--checkbox-error-border-color` | `var(--danger-500)` | Error state border |
-| `--checkbox-error-ring-color` | `var(--danger-100)` | Error ring color |
-| `--checkbox-focus-ring-color` | `var(--primary-100)` | Focus ring color |
-| `--checkbox-border-radius` | `4px` | Corner radius |
-| `--checkbox-disabled-opacity` | `0.5` | Opacity when disabled |
-| `--checkbox-transition-duration` | `200ms` | Animation duration |
+| `--checkbox-error-border-color`       | `var(--danger-500)`    | Error state border       |
+| `--checkbox-error-ring-color`         | `var(--danger-100)`    | Error ring color         |
+| `--checkbox-focus-ring-color`         | `var(--primary-100)`   | Focus ring color         |
+| `--checkbox-border-radius`            | `4px`                  | Corner radius            |
+| `--checkbox-disabled-opacity`         | `0.5`                  | Opacity when disabled    |
+| `--checkbox-transition-duration`      | `200ms`                | Animation duration       |
 
 ## Accessibility
 
@@ -327,4 +355,3 @@ const selected = ref<string[]>([]);
 ## Skeleton / Loading State
 
 When placed inside a `VcBlade` with `loading=true`, the component renders a skeleton placeholder matching its shape — a control indicator and label block. No configuration needed.
-

package/runtime/knowledge/docs/ui/components/molecules/vc-checkbox-group/vc-checkbox-group.docs.md

@@ -34,20 +34,20 @@ const channels = [
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `modelValue` | `T[]` | `[]` | Selected values (v-model) |
-| `options` | `CheckboxGroupOption<T>[]` | `[]` | Options to render as checkboxes |
-| `label` | `string` | — | Group label (rendered as fieldset legend) |
-| `tooltip` | `string` | — | Tooltip on the label |
-| `hint` | `string` | — | Hint text below the group |
-| `orientation` | `"vertical" \| "horizontal"` | `"vertical"` | Layout direction of options |
-| `size` | `"s" \| "m" \| "l"` | `"s"` | Checkbox size for all items |
-| `name` | `string` | auto-generated | Shared name for native checkboxes |
-| `disabled` | `boolean` | `false` | Disable all checkboxes |
-| `required` | `boolean` | `false` | Mark group as required |
-| `error` | `boolean` | `false` | External error flag |
-| `errorMessage` | `string` | — | Error message text |
+| Prop           | Type                         | Default        | Description                               |
+| -------------- | ---------------------------- | -------------- | ----------------------------------------- |
+| `modelValue`   | `T[]`                        | `[]`           | Selected values (v-model)                 |
+| `options`      | `CheckboxGroupOption<T>[]`   | `[]`           | Options to render as checkboxes           |
+| `label`        | `string`                     | —              | Group label (rendered as fieldset legend) |
+| `tooltip`      | `string`                     | —              | Tooltip on the label                      |
+| `hint`         | `string`                     | —              | Hint text below the group                 |
+| `orientation`  | `"vertical" \| "horizontal"` | `"vertical"`   | Layout direction of options               |
+| `size`         | `"s" \| "m" \| "l"`          | `"s"`          | Checkbox size for all items               |
+| `name`         | `string`                     | auto-generated | Shared name for native checkboxes         |
+| `disabled`     | `boolean`                    | `false`        | Disable all checkboxes                    |
+| `required`     | `boolean`                    | `false`        | Mark group as required                    |
+| `error`        | `boolean`                    | `false`        | External error flag                       |
+| `errorMessage` | `string`                     | —              | Error message text                        |
 
 ## CheckboxGroupOption Interface
 
@@ -55,20 +55,20 @@ const channels = [
 interface CheckboxGroupOption<V = string | number | boolean> {
   label: string;
   value: V;
-  disabled?: boolean;  // Disable individual options
+  disabled?: boolean; // Disable individual options
 }
 ```
 
 ## Events
 
-| Event | Payload | Description |
-|-------|---------|-------------|
-| `update:modelValue` | `T[]` | Selected values changed |
+| Event               | Payload | Description             |
+| ------------------- | ------- | ----------------------- |
+| `update:modelValue` | `T[]`   | Selected values changed |
 
 ## Slots
 
-| Slot | Description |
-|------|-------------|
+| Slot      | Description                                               |
+| --------- | --------------------------------------------------------- |
 | `default` | Custom checkbox layout (replaces options-based rendering) |
 
 ## Common Patterns
@@ -105,26 +105,13 @@ interface CheckboxGroupOption<V = string | number | boolean> {
 ### Validation Error
 
 ```vue
-<VcCheckboxGroup
-  v-model="selected"
-  label="Required Selection"
-  required
-  :error="selected.length === 0"
-  error-message="Select at least one option"
-  :options="options"
-/>
+<VcCheckboxGroup v-model="selected" label="Required Selection" required :error="selected.length === 0" error-message="Select at least one option" :options="options" />
 ```
 
 ### Custom Slot Layout
 
 ```vue
-<VcCheckboxGroup
-  v-model="flags"
-  label="Feature Flags"
-  hint="Custom layout via default slot"
-  orientation="horizontal"
-  name="feature-flags"
->
+<VcCheckboxGroup v-model="flags" label="Feature Flags" hint="Custom layout via default slot" orientation="horizontal" name="feature-flags">
   <VcCheckbox v-model="flags" value="feature-a">Feature A</VcCheckbox>
   <VcCheckbox v-model="flags" value="feature-b">Feature B</VcCheckbox>
   <VcCheckbox v-model="flags" value="feature-c">Feature C</VcCheckbox>
@@ -148,4 +135,3 @@ interface CheckboxGroupOption<V = string | number | boolean> {
 ## Skeleton / Loading State
 
 When placed inside a `VcBlade` with `loading=true`, the component renders a skeleton placeholder matching its shape — a control indicator and label block. No configuration needed.
-