@vc-shell/vc-app-skill 2.0.0-alpha.33 → 2.0.0-alpha.33-pr220.455e322

package/runtime/knowledge/docs/ui/components/atoms/vc-badge/vc-badge.docs.md

@@ -20,19 +20,19 @@ A small indicator component for displaying counts, status dots, or short text la
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `content` | `string \| number` | -- | Text or number displayed inside the badge |
-| `variant` | `"primary" \| "success" \| "warning" \| "danger" \| "info" \| "secondary"` | `"primary"` | Color variant |
-| `size` | `"s" \| "m"` | `"m"` | Badge size |
-| `isDot` | `boolean` | `false` | Renders as a small dot without text |
-| `inline` | `boolean` | `false` | Renders as an inline element without absolute positioning |
-| `clickable` | `boolean` | `false` | Makes the badge respond to click events |
-| `disabled` | `boolean` | `false` | Disables interaction on clickable badges |
-| `customPosition` | `boolean` | `false` | Enables custom `top`/`right` positioning |
-| `top` | `string` | -- | Custom top offset (requires `customPosition`) |
-| `right` | `string` | -- | Custom right offset (requires `customPosition`) |
-| `ariaLabel` | `string` | -- | Custom accessible label for the badge |
+| Prop             | Type                                                                       | Default     | Description                                               |
+| ---------------- | -------------------------------------------------------------------------- | ----------- | --------------------------------------------------------- |
+| `content`        | `string \| number`                                                         | --          | Text or number displayed inside the badge                 |
+| `variant`        | `"primary" \| "success" \| "warning" \| "danger" \| "info" \| "secondary"` | `"primary"` | Color variant                                             |
+| `size`           | `"s" \| "m"`                                                               | `"m"`       | Badge size                                                |
+| `isDot`          | `boolean`                                                                  | `false`     | Renders as a small dot without text                       |
+| `inline`         | `boolean`                                                                  | `false`     | Renders as an inline element without absolute positioning |
+| `clickable`      | `boolean`                                                                  | `false`     | Makes the badge respond to click events                   |
+| `disabled`       | `boolean`                                                                  | `false`     | Disables interaction on clickable badges                  |
+| `customPosition` | `boolean`                                                                  | `false`     | Enables custom `top`/`right` positioning                  |
+| `top`            | `string`                                                                   | --          | Custom top offset (requires `customPosition`)             |
+| `right`          | `string`                                                                   | --          | Custom right offset (requires `customPosition`)           |
+| `ariaLabel`      | `string`                                                                   | --          | Custom accessible label for the badge                     |
 
 ## Common Patterns
 
@@ -65,12 +65,7 @@ A small indicator component for displaying counts, status dots, or short text la
 ### Clickable Badge with Dismiss
 
 ```vue
-<VcBadge
-  :content="count"
-  clickable
-  variant="primary"
-  @click="clearNotifications"
->
+<VcBadge :content="count" clickable variant="primary" @click="clearNotifications">
   <VcIcon icon="lucide-inbox" size="xl" />
 </VcBadge>
 ```
@@ -104,13 +99,7 @@ const statusVariantMap: Record<string, string> = {
 Fine-tune the badge position relative to its parent:
 
 ```vue
-<VcBadge
-  content="NEW"
-  variant="info"
-  custom-position
-  top="-4px"
-  right="-12px"
->
+<VcBadge content="NEW" variant="info" custom-position top="-4px" right="-12px">
   <img src="/product.jpg" class="tw-w-16 tw-h-16 tw-rounded" />
 </VcBadge>
 ```

package/runtime/knowledge/docs/ui/components/atoms/vc-banner/vc-banner.docs.md

@@ -21,20 +21,20 @@ A contextual alert component for displaying important messages, warnings, or sta
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `variant` | `"info" \| "warning" \| "danger" \| "success"` | `"info"` | Semantic color variant |
-| `icon` | `string` | -- | Icon identifier (e.g. `lucide-info`, `lucide-triangle-alert`) |
-| `iconSize` | `IconSize` | `"l"` | Size of the leading icon |
-| `iconVariant` | `IconVariant` | -- | Color variant for the icon |
-| `collapsedHeight` | `number` | `100` | Max height in pixels before content becomes collapsible |
+| Prop              | Type                                           | Default  | Description                                                   |
+| ----------------- | ---------------------------------------------- | -------- | ------------------------------------------------------------- |
+| `variant`         | `"info" \| "warning" \| "danger" \| "success"` | `"info"` | Semantic color variant                                        |
+| `icon`            | `string`                                       | --       | Icon identifier (e.g. `lucide-info`, `lucide-triangle-alert`) |
+| `iconSize`        | `IconSize`                                     | `"l"`    | Size of the leading icon                                      |
+| `iconVariant`     | `IconVariant`                                  | --       | Color variant for the icon                                    |
+| `collapsedHeight` | `number`                                       | `100`    | Max height in pixels before content becomes collapsible       |
 
 ## Slots
 
-| Slot | Description |
-|------|-------------|
-| `title` | Bold title text above the body content |
-| `default` | Body/description content |
+| Slot      | Description                                                              |
+| --------- | ------------------------------------------------------------------------ |
+| `title`   | Bold title text above the body content                                   |
+| `default` | Body/description content                                                 |
 | `trigger` | Custom expand/collapse trigger (receives `{ isExpanded, toggle }` props) |
 
 ## Features
@@ -69,12 +69,7 @@ For backward compatibility, the deprecated variants `"light-danger"`, `"info-dar
 ### Decline Reason on a Detail Blade
 
 ```vue
-<VcBanner
-  v-if="declineReason"
-  variant="danger"
-  icon="lucide-circle-alert"
-  icon-variant="danger"
->
+<VcBanner v-if="declineReason" variant="danger" icon="lucide-circle-alert" icon-variant="danger">
   <template #title>Decline Reason</template>
   {{ declineReason }}
 </VcBanner>
@@ -112,8 +107,15 @@ Place a banner inside a blade to notify the user of important context before the
       This product has been marked as discontinued. Editing is limited to metadata fields only.
     </VcBanner>
 
-    <VcInput label="Name" v-model="product.name" :disabled="product.isDiscontinued" />
-    <VcTextarea label="Notes" v-model="product.notes" />
+    <VcInput
+      label="Name"
+      v-model="product.name"
+      :disabled="product.isDiscontinued"
+    />
+    <VcTextarea
+      label="Notes"
+      v-model="product.notes"
+    />
   </VcBlade>
 </template>
 ```

package/runtime/knowledge/docs/ui/components/atoms/vc-button/vc-button.docs.md

@@ -4,12 +4,12 @@ A versatile button component supporting 9 style variants, 5 size options, loadin
 
 ## When to Use
 
-| Scenario | Component |
-|----------|-----------|
-| Triggering an action (save, delete, submit) | **VcButton** |
-| Navigating to another URL or route | `<router-link>` or `<a>` tag |
-| Action inside a blade toolbar | `IBladeToolbar` items (rendered as buttons automatically) |
-| Inline text-style link within a paragraph | Native `<a>` or `<router-link>` |
+| Scenario                                    | Component                                                 |
+| ------------------------------------------- | --------------------------------------------------------- |
+| Triggering an action (save, delete, submit) | **VcButton**                                              |
+| Navigating to another URL or route          | `<router-link>` or `<a>` tag                              |
+| Action inside a blade toolbar               | `IBladeToolbar` items (rendered as buttons automatically) |
+| Inline text-style link within a paragraph   | Native `<a>` or `<router-link>`                           |
 
 Use VcButton for any user-initiated action that does not navigate to a URL. **Do not use** VcButton for navigation -- the `link` variant looks like a link but calls `preventDefault()`, so actual URL navigation will not work. For toolbar actions, define `IBladeToolbar` objects instead of placing VcButton manually.
 
@@ -17,7 +17,11 @@ Use VcButton for any user-initiated action that does not navigate to a URL. **Do
 
 ```vue
 <template>
-  <VcButton variant="primary" @click="handleSave">Save Changes</VcButton>
+  <VcButton
+    variant="primary"
+    @click="handleSave"
+    >Save Changes</VcButton
+  >
 </template>
 
 <script setup lang="ts">
@@ -41,13 +45,13 @@ Solid background colors for primary and prominent actions.
 <VcButton variant="info">Learn More</VcButton>
 ```
 
-| Variant | Use Case | Text Color |
-|---------|----------|------------|
-| `primary` | Main CTA -- save, submit, confirm | White |
-| `danger` | Destructive actions -- delete, remove | White |
-| `warning` | Caution actions -- override, force | Dark (for contrast) |
-| `success` | Positive actions -- approve, publish | White |
-| `info` | Informational actions -- details, help | White |
+| Variant   | Use Case                               | Text Color          |
+| --------- | -------------------------------------- | ------------------- |
+| `primary` | Main CTA -- save, submit, confirm      | White               |
+| `danger`  | Destructive actions -- delete, remove  | White               |
+| `warning` | Caution actions -- override, force     | Dark (for contrast) |
+| `success` | Positive actions -- approve, publish   | White               |
+| `info`    | Informational actions -- details, help | White               |
 
 ### Structural Variants (Medium Emphasis)
 
@@ -58,10 +62,10 @@ Bordered or transparent backgrounds for secondary actions.
 <VcButton variant="outline">Export</VcButton>
 ```
 
-| Variant | Use Case | Hover Behavior |
-|---------|----------|----------------|
-| `secondary` | Cancel, dismiss, secondary actions | Background changes to primary-50 |
-| `outline` | Alternative actions alongside primary | Background changes to primary-50, border darkens |
+| Variant     | Use Case                              | Hover Behavior                                   |
+| ----------- | ------------------------------------- | ------------------------------------------------ |
+| `secondary` | Cancel, dismiss, secondary actions    | Background changes to primary-50                 |
+| `outline`   | Alternative actions alongside primary | Background changes to primary-50, border darkens |
 
 ### Minimal Variants (Low Emphasis)
 
@@ -72,10 +76,10 @@ No border or background, used for inline or de-emphasized actions.
 <VcButton variant="link">View Documentation</VcButton>
 ```
 
-| Variant | Use Case | Hover Behavior |
-|---------|----------|----------------|
-| `ghost` | Toolbar icons, inline actions | Light background tint |
-| `link` | Text-like navigation, inline links | Underline on text |
+| Variant | Use Case                           | Hover Behavior        |
+| ------- | ---------------------------------- | --------------------- |
+| `ghost` | Toolbar icons, inline actions      | Light background tint |
+| `link`  | Text-like navigation, inline links | Underline on text     |
 
 ## Sizes
 
@@ -89,13 +93,13 @@ Five size options cover all common use cases from toolbar icons to prominent CTA
 <VcButton size="icon-sm" icon="lucide-pencil" aria-label="Edit" />
 ```
 
-| Size | Height | Padding | Typical Use |
-|------|--------|---------|-------------|
-| `sm` | 32px | 12px horizontal | Compact form actions, table footers |
-| `default` | 36px | 16px horizontal, 8px vertical | Standard blade actions |
-| `lg` | 40px | 24px horizontal | Prominent CTAs, dialog actions |
-| `icon` | 36x36px | 0 (square) | Toolbar icon buttons |
-| `icon-sm` | 24x24px | 0 (square) | Table cell actions, inline controls |
+| Size      | Height  | Padding                       | Typical Use                         |
+| --------- | ------- | ----------------------------- | ----------------------------------- |
+| `sm`      | 32px    | 12px horizontal               | Compact form actions, table footers |
+| `default` | 36px    | 16px horizontal, 8px vertical | Standard blade actions              |
+| `lg`      | 40px    | 24px horizontal               | Prominent CTAs, dialog actions      |
+| `icon`    | 36x36px | 0 (square)                    | Toolbar icon buttons                |
+| `icon-sm` | 24x24px | 0 (square)                    | Table cell actions, inline controls |
 
 > **Note:** Legacy aliases `xs` (maps to `sm`) and `base` (maps to `default`) are supported for backward compatibility.
 
@@ -127,6 +131,7 @@ When `loading` is `true`, the button shows a spinner in place of its icon and be
 ```
 
 During loading:
+
 - The icon is replaced with a spinning `lucide-loader-2`
 - The button is disabled (`pointer-events: none`)
 - The cursor changes to `wait`
@@ -137,13 +142,7 @@ During loading:
 The `selected` prop applies a visual highlight. Useful for toggle buttons or active states:
 
 ```vue
-<VcButton
-  variant="ghost"
-  :selected="isGridView"
-  icon="lucide-grid"
-  aria-label="Grid view"
-  @click="isGridView = true"
-/>
+<VcButton variant="ghost" :selected="isGridView" icon="lucide-grid" aria-label="Grid view" @click="isGridView = true" />
 ```
 
 When selected, `aria-pressed="true"` is set on the button element.
@@ -176,8 +175,16 @@ VcButton integrates with `VcButtonGroup` via provide/inject. The group can set a
 ```vue
 <template>
   <div class="tw-flex tw-gap-2">
-    <VcButton variant="secondary" @click="cancel">Cancel</VcButton>
-    <VcButton variant="primary" :loading="isSaving" @click="save">
+    <VcButton
+      variant="secondary"
+      @click="cancel"
+      >Cancel</VcButton
+    >
+    <VcButton
+      variant="primary"
+      :loading="isSaving"
+      @click="save"
+    >
       Save
     </VcButton>
   </div>
@@ -189,8 +196,17 @@ VcButton integrates with `VcButtonGroup` via provide/inject. The group can set a
 ```vue
 <template>
   <div class="tw-flex tw-justify-end tw-gap-3 tw-p-4">
-    <VcButton variant="outline" @click="dismiss">Cancel</VcButton>
-    <VcButton variant="danger" :loading="isDeleting" icon="lucide-trash-2" @click="confirmDelete">
+    <VcButton
+      variant="outline"
+      @click="dismiss"
+      >Cancel</VcButton
+    >
+    <VcButton
+      variant="danger"
+      :loading="isDeleting"
+      icon="lucide-trash-2"
+      @click="confirmDelete"
+    >
       Delete Permanently
     </VcButton>
   </div>
@@ -231,46 +247,46 @@ VcButton integrates with `VcButtonGroup` via provide/inject. The group can set a
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `variant` | `"primary" \| "secondary" \| "danger" \| "warning" \| "success" \| "info" \| "outline" \| "ghost" \| "link"` | `"primary"` | Visual style variant |
-| `size` | `"sm" \| "default" \| "lg" \| "icon" \| "icon-sm"` | `"default"` | Button size |
-| `icon` | `string \| Component` | -- | Icon identifier or Vue component |
-| `iconClass` | `string` | -- | Additional CSS class for the icon element |
-| `iconSize` | `IconSize` | `"s"` | Size of the icon (`"xs"`, `"s"`, `"m"`, `"l"`, `"xl"`, `"xxl"`) |
-| `loading` | `boolean` | `false` | Shows spinner, disables interaction, sets `aria-busy` |
-| `disabled` | `boolean` | `false` | Disables the button |
-| `selected` | `boolean` | `false` | Applies selected/active visual state, sets `aria-pressed` |
-| `text` | `boolean` | `false` | Renders as borderless text in the variant's color |
-| `type` | `"button" \| "submit" \| "reset"` | `"button"` | HTML button type |
-| `ariaLabel` | `string` | -- | Accessible label (required for icon-only buttons) |
+| Prop        | Type                                                                                                         | Default     | Description                                                     |
+| ----------- | ------------------------------------------------------------------------------------------------------------ | ----------- | --------------------------------------------------------------- |
+| `variant`   | `"primary" \| "secondary" \| "danger" \| "warning" \| "success" \| "info" \| "outline" \| "ghost" \| "link"` | `"primary"` | Visual style variant                                            |
+| `size`      | `"sm" \| "default" \| "lg" \| "icon" \| "icon-sm"`                                                           | `"default"` | Button size                                                     |
+| `icon`      | `string \| Component`                                                                                        | --          | Icon identifier or Vue component                                |
+| `iconClass` | `string`                                                                                                     | --          | Additional CSS class for the icon element                       |
+| `iconSize`  | `IconSize`                                                                                                   | `"s"`       | Size of the icon (`"xs"`, `"s"`, `"m"`, `"l"`, `"xl"`, `"xxl"`) |
+| `loading`   | `boolean`                                                                                                    | `false`     | Shows spinner, disables interaction, sets `aria-busy`           |
+| `disabled`  | `boolean`                                                                                                    | `false`     | Disables the button                                             |
+| `selected`  | `boolean`                                                                                                    | `false`     | Applies selected/active visual state, sets `aria-pressed`       |
+| `text`      | `boolean`                                                                                                    | `false`     | Renders as borderless text in the variant's color               |
+| `type`      | `"button" \| "submit" \| "reset"`                                                                            | `"button"`  | HTML button type                                                |
+| `ariaLabel` | `string`                                                                                                     | --          | Accessible label (required for icon-only buttons)               |
 
 ## Events
 
-| Event | Payload | Description |
-|-------|---------|-------------|
+| Event   | Payload | Description                                                              |
+| ------- | ------- | ------------------------------------------------------------------------ |
 | `click` | `Event` | Emitted when the button is clicked (suppressed when disabled or loading) |
 
 ## Slots
 
-| Slot | Description |
-|------|-------------|
+| Slot      | Description                                                       |
+| --------- | ----------------------------------------------------------------- |
 | `default` | Button text content. When empty, the button renders as icon-only. |
 
 ## CSS Custom Properties
 
 All visual properties are customizable through CSS custom properties. Each variant has three property sets (normal, hover, disabled) for background, text, and border colors.
 
-| Pattern | Example | Description |
-|---------|---------|-------------|
-| `--button-{variant}-background-color` | `--button-primary-background-color` | Normal background |
-| `--button-{variant}-background-color-hover` | `--button-primary-background-color-hover` | Hover background |
-| `--button-{variant}-text-color` | `--button-primary-text-color` | Normal text color |
-| `--button-{variant}-border-color` | `--button-primary-border-color` | Normal border color |
-| `--button-border-radius` | `6px` | Corner radius for all buttons |
-| `--button-focus-ring-color` | `var(--primary-300)` | Focus ring color |
-| `--button-focus-ring-width` | `2px` | Focus ring thickness |
-| `--button-{size}-height` | `--button-default-height: 36px` | Height per size |
+| Pattern                                     | Example                                   | Description                   |
+| ------------------------------------------- | ----------------------------------------- | ----------------------------- |
+| `--button-{variant}-background-color`       | `--button-primary-background-color`       | Normal background             |
+| `--button-{variant}-background-color-hover` | `--button-primary-background-color-hover` | Hover background              |
+| `--button-{variant}-text-color`             | `--button-primary-text-color`             | Normal text color             |
+| `--button-{variant}-border-color`           | `--button-primary-border-color`           | Normal border color           |
+| `--button-border-radius`                    | `6px`                                     | Corner radius for all buttons |
+| `--button-focus-ring-color`                 | `var(--primary-300)`                      | Focus ring color              |
+| `--button-focus-ring-width`                 | `2px`                                     | Focus ring thickness          |
+| `--button-{size}-height`                    | `--button-default-height: 36px`           | Height per size               |
 
 ## Accessibility
 

package/runtime/knowledge/docs/ui/components/atoms/vc-card/vc-card.docs.md

@@ -4,12 +4,12 @@ A bordered container with an optional header, icon, action buttons, and collapsi
 
 ## When to Use
 
-| Scenario | Component |
-|----------|-----------|
-| Grouping form fields or content with a header | **VcCard** |
-| Scrollable content wrapper without a header | [VcContainer](../vc-container/) |
+| Scenario                                      | Component                                                                    |
+| --------------------------------------------- | ---------------------------------------------------------------------------- |
+| Grouping form fields or content with a header | **VcCard**                                                                   |
+| Scrollable content wrapper without a header   | [VcContainer](../vc-container/)                                              |
 | Collapsible section with rich toggle behavior | [VcAccordion](../../molecules/vc-accordion/) (for multiple exclusive panels) |
-| Alert or notification banner | [VcBanner](../vc-banner/) |
+| Alert or notification banner                  | [VcBanner](../vc-banner/)                                                    |
 
 Use VcCard to visually separate content sections on a blade -- especially when you need a titled header, action buttons, or collapsible body. **Do not use** VcCard for dismissible alerts or status messages (use `VcBanner`), and avoid nesting VcCard when a simple `VcContainer` with padding would suffice.
 
@@ -66,11 +66,11 @@ Three variants control the header's background and text color to communicate sem
 </VcCard>
 ```
 
-| Variant | Header Background | Header Text | Use Case |
-|---------|-------------------|-------------|----------|
-| `default` | `var(--secondary-50)` (light gray) | `var(--secondary-950)` (dark) | Standard content grouping |
-| `success` | `var(--success-100)` (light green) | `var(--success-600)` (green) | Positive state confirmation |
-| `danger` | `var(--danger-100)` (light red) | `var(--danger-600)` (red) | Errors, warnings, destructive content |
+| Variant   | Header Background                  | Header Text                   | Use Case                              |
+| --------- | ---------------------------------- | ----------------------------- | ------------------------------------- |
+| `default` | `var(--secondary-50)` (light gray) | `var(--secondary-950)` (dark) | Standard content grouping             |
+| `success` | `var(--success-100)` (light green) | `var(--success-600)` (green)  | Positive state confirmation           |
+| `danger`  | `var(--danger-100)` (light red)    | `var(--danger-600)` (red)     | Errors, warnings, destructive content |
 
 ## Collapsible Sections
 
@@ -193,24 +193,61 @@ When `fill` is `true`, the card body applies `display: flex` to allow child cont
 ```vue
 <template>
   <div class="tw-flex tw-flex-col tw-gap-4">
-    <VcCard header="Basic Information" icon="lucide-file-text">
+    <VcCard
+      header="Basic Information"
+      icon="lucide-file-text"
+    >
       <div class="tw-p-4 tw-grid tw-grid-cols-2 tw-gap-4">
-        <VcInput v-model="form.name" label="Product Name" required />
-        <VcInput v-model="form.sku" label="SKU" required />
-        <VcInput v-model="form.price" label="Price" type="number" />
-        <VcSelect v-model="form.category" label="Category" :options="categories" />
+        <VcInput
+          v-model="form.name"
+          label="Product Name"
+          required
+        />
+        <VcInput
+          v-model="form.sku"
+          label="SKU"
+          required
+        />
+        <VcInput
+          v-model="form.price"
+          label="Price"
+          type="number"
+        />
+        <VcSelect
+          v-model="form.category"
+          label="Category"
+          :options="categories"
+        />
       </div>
     </VcCard>
 
-    <VcCard header="SEO Settings" icon="lucide-search" is-collapsable is-collapsed>
+    <VcCard
+      header="SEO Settings"
+      icon="lucide-search"
+      is-collapsable
+      is-collapsed
+    >
       <div class="tw-p-4 tw-grid tw-grid-cols-2 tw-gap-4">
-        <VcInput v-model="form.metaTitle" label="Meta Title" />
-        <VcInput v-model="form.metaDescription" label="Meta Description" />
-        <VcInput v-model="form.slug" label="URL Slug" />
+        <VcInput
+          v-model="form.metaTitle"
+          label="Meta Title"
+        />
+        <VcInput
+          v-model="form.metaDescription"
+          label="Meta Description"
+        />
+        <VcInput
+          v-model="form.slug"
+          label="URL Slug"
+        />
       </div>
     </VcCard>
 
-    <VcCard header="Inventory" icon="lucide-warehouse" is-collapsable>
+    <VcCard
+      header="Inventory"
+      icon="lucide-warehouse"
+      is-collapsable
+    >
       <div class="tw-p-4">
         <!-- inventory fields -->
       </div>
@@ -229,8 +266,16 @@ When `fill` is `true`, the card body applies `display: flex` to allow child cont
     :icon="errors.length > 0 ? 'lucide-alert-triangle' : 'lucide-check-circle'"
   >
     <div class="tw-p-4">
-      <ul v-if="errors.length > 0" class="tw-list-disc tw-pl-4 tw-space-y-1">
-        <li v-for="error in errors" :key="error">{{ error }}</li>
+      <ul
+        v-if="errors.length > 0"
+        class="tw-list-disc tw-pl-4 tw-space-y-1"
+      >
+        <li
+          v-for="error in errors"
+          :key="error"
+        >
+          {{ error }}
+        </li>
       </ul>
       <p v-else>All validations passed.</p>
     </div>
@@ -241,11 +286,7 @@ When `fill` is `true`, the card body applies `display: flex` to allow child cont
 import { computed } from "vue";
 
 const errors = ref<string[]>([]);
-const validationHeader = computed(() =>
-  errors.value.length > 0
-    ? `${errors.value.length} Validation Error(s)`
-    : "Validation Passed"
-);
+const validationHeader = computed(() => (errors.value.length > 0 ? `${errors.value.length} Validation Error(s)` : "Validation Passed"));
 </script>
 ```
 
@@ -295,47 +336,47 @@ const validationHeader = computed(() =>
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `header` | `string` | -- | Title text displayed in the card header |
-| `icon` | `string` | -- | Icon identifier shown before the title |
-| `variant` | `"default" \| "success" \| "danger"` | `"default"` | Header color variant |
-| `isCollapsable` | `boolean` | `false` | Enables collapse/expand on header click |
-| `isCollapsed` | `boolean` | `false` | Controls the collapsed state (requires `isCollapsable`) |
-| `fill` | `boolean` | `false` | Makes body content fill available vertical space via flex |
+| Prop            | Type                                 | Default     | Description                                               |
+| --------------- | ------------------------------------ | ----------- | --------------------------------------------------------- |
+| `header`        | `string`                             | --          | Title text displayed in the card header                   |
+| `icon`          | `string`                             | --          | Icon identifier shown before the title                    |
+| `variant`       | `"default" \| "success" \| "danger"` | `"default"` | Header color variant                                      |
+| `isCollapsable` | `boolean`                            | `false`     | Enables collapse/expand on header click                   |
+| `isCollapsed`   | `boolean`                            | `false`     | Controls the collapsed state (requires `isCollapsable`)   |
+| `fill`          | `boolean`                            | `false`     | Makes body content fill available vertical space via flex |
 
 ## Events
 
-| Event | Payload | Description |
-|-------|---------|-------------|
-| `header:click` | -- | Emitted when the header is clicked (always, regardless of collapsable state) |
-| `state:collapsed` | `boolean` | Emitted when the collapsed state changes (`true` = collapsed) |
+| Event             | Payload   | Description                                                                  |
+| ----------------- | --------- | ---------------------------------------------------------------------------- |
+| `header:click`    | --        | Emitted when the header is clicked (always, regardless of collapsable state) |
+| `state:collapsed` | `boolean` | Emitted when the collapsed state changes (`true` = collapsed)                |
 
 ## Slots
 
-| Slot | Description |
-|------|-------------|
-| `default` | Card body content |
-| `header` | Custom header content (replaces the default title + icon) |
-| `actions` | Action buttons rendered on the right side of the header |
+| Slot      | Description                                               |
+| --------- | --------------------------------------------------------- |
+| `default` | Card body content                                         |
+| `header`  | Custom header content (replaces the default title + icon) |
+| `actions` | Action buttons rendered on the right side of the header   |
 
 ## CSS Custom Properties
 
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `--card-background` | `var(--additional-50)` | Card body background |
-| `--card-border-color` | `var(--neutrals-200)` | Border color |
-| `--card-border-radius` | `6px` | Corner radius |
-| `--card-header-background` | `var(--secondary-50)` | Default header background |
-| `--card-header-color` | `var(--secondary-950)` | Default header text color |
-| `--card-header-background-success` | `var(--success-100)` | Success variant header background |
-| `--card-header-background-danger` | `var(--danger-100)` | Danger variant header background |
-| `--card-header-color-success` | `var(--success-600)` | Success variant header text |
-| `--card-header-color-danger` | `var(--danger-600)` | Danger variant header text |
-| `--card-header-padding-hor` | `24px` | Header horizontal padding |
-| `--card-header-padding-vert` | `17px` | Header vertical padding |
-| `--card-hover-shadow` | `0 2px 8px rgba(0,0,0,0.06)` | Hover shadow |
-| `--card-focus-ring-color` | `var(--primary-300)` | Focus ring for collapsable headers |
+| Variable                           | Default                      | Description                        |
+| ---------------------------------- | ---------------------------- | ---------------------------------- |
+| `--card-background`                | `var(--additional-50)`       | Card body background               |
+| `--card-border-color`              | `var(--neutrals-200)`        | Border color                       |
+| `--card-border-radius`             | `6px`                        | Corner radius                      |
+| `--card-header-background`         | `var(--secondary-50)`        | Default header background          |
+| `--card-header-color`              | `var(--secondary-950)`       | Default header text color          |
+| `--card-header-background-success` | `var(--success-100)`         | Success variant header background  |
+| `--card-header-background-danger`  | `var(--danger-100)`          | Danger variant header background   |
+| `--card-header-color-success`      | `var(--success-600)`         | Success variant header text        |
+| `--card-header-color-danger`       | `var(--danger-600)`          | Danger variant header text         |
+| `--card-header-padding-hor`        | `24px`                       | Header horizontal padding          |
+| `--card-header-padding-vert`       | `17px`                       | Header vertical padding            |
+| `--card-hover-shadow`              | `0 2px 8px rgba(0,0,0,0.06)` | Hover shadow                       |
+| `--card-focus-ring-color`          | `var(--primary-300)`         | Focus ring for collapsable headers |
 
 ## Accessibility