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

package/runtime/knowledge/docs/shell/dashboard/dashboard-charts/dashboard-charts.docs.md

@@ -18,11 +18,11 @@ The charts are designed to work inside `DashboardWidgetCard` components, automat
 
 ## Components
 
-| Component | Description |
-|-----------|-------------|
-| `DashboardLineChart` | Time-series or continuous data with connected points |
-| `DashboardBarChart` | Grouped or single bar charts for categorical comparison |
-| `DashboardDonutChart` | Circular chart for part-to-whole relationships |
+| Component             | Description                                             |
+| --------------------- | ------------------------------------------------------- |
+| `DashboardLineChart`  | Time-series or continuous data with connected points    |
+| `DashboardBarChart`   | Grouped or single bar charts for categorical comparison |
+| `DashboardDonutChart` | Circular chart for part-to-whole relationships          |
 
 ## Basic Usage
 
@@ -54,35 +54,38 @@ const config: ChartConfig = {
 
 ## Key Props (shared across chart types)
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `data` | `T[]` | -- | Array of data points |
-| `config` | `ChartConfig` | -- | Series color and label configuration |
-| `xKey` | `keyof T` | -- | Key for x-axis values (line/bar) |
-| `yKeys` | `(keyof T)[]` | -- | Keys for y-axis series (line/bar) |
-| `showTooltip` | `boolean` | `true` | Enable hover tooltips |
-| `showLegend` | `boolean` | `true` | Show color legend below chart |
-| `rangeStart` | `number` | `undefined` | Filter data from this x value |
-| `rangeEnd` | `number` | `undefined` | Filter data up to this x value |
+| Prop          | Type          | Default     | Description                          |
+| ------------- | ------------- | ----------- | ------------------------------------ |
+| `data`        | `T[]`         | --          | Array of data points                 |
+| `config`      | `ChartConfig` | --          | Series color and label configuration |
+| `xKey`        | `keyof T`     | --          | Key for x-axis values (line/bar)     |
+| `yKeys`       | `(keyof T)[]` | --          | Keys for y-axis series (line/bar)    |
+| `showTooltip` | `boolean`     | `true`      | Enable hover tooltips                |
+| `showLegend`  | `boolean`     | `true`      | Show color legend below chart        |
+| `rangeStart`  | `number`      | `undefined` | Filter data from this x value        |
+| `rangeEnd`    | `number`      | `undefined` | Filter data up to this x value       |
 
 ### Donut-specific props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `valueKey` | `keyof T` | -- | Key for segment values |
-| `centralLabel` | `string` | `undefined` | Large text in donut center |
-| `centralSubLabel` | `string` | `undefined` | Small text below central label |
-| `arcWidth` | `number` | `60` | Donut arc thickness |
+| Prop              | Type      | Default     | Description                    |
+| ----------------- | --------- | ----------- | ------------------------------ |
+| `valueKey`        | `keyof T` | --          | Key for segment values         |
+| `centralLabel`    | `string`  | `undefined` | Large text in donut center     |
+| `centralSubLabel` | `string`  | `undefined` | Small text below central label |
+| `arcWidth`        | `number`  | `60`        | Donut arc thickness            |
 
 ## ChartConfig Type
 
 The `ChartConfig` object maps data field names to their visual configuration:
 
 ```typescript
-type ChartConfig = Record<string, {
-  label: string;    // Display name in legend and tooltip
-  color: string;    // CSS color value (hex, var(), rgb, etc.)
-}>;
+type ChartConfig = Record<
+  string,
+  {
+    label: string; // Display name in legend and tooltip
+    color: string; // CSS color value (hex, var(), rgb, etc.)
+  }
+>;
 ```
 
 ## Common Patterns
@@ -117,26 +120,13 @@ const salesConfig: ChartConfig = {
 ### Bar Chart with Formatted Axes
 
 ```vue
-<DashboardBarChart
-  :data="quarterlyData"
-  :config="quarterConfig"
-  x-key="quarter"
-  :y-keys="['electronics', 'clothing']"
-  :x-tick-format="(v) => ['Q1', 'Q2', 'Q3', 'Q4'][v]"
-  :y-tick-format="(v) => '$' + (v / 1000).toFixed(0) + 'k'"
-/>
+<DashboardBarChart :data="quarterlyData" :config="quarterConfig" x-key="quarter" :y-keys="['electronics', 'clothing']" :x-tick-format="(v) => ['Q1', 'Q2', 'Q3', 'Q4'][v]" :y-tick-format="(v) => '$' + (v / 1000).toFixed(0) + 'k'" />
 ```
 
 ### Donut Chart
 
 ```vue
-<DashboardDonutChart
-  :data="categoryData"
-  :config="categoryConfig"
-  value-key="count"
-  central-label="1,000"
-  central-sub-label="Total Products"
-/>
+<DashboardDonutChart :data="categoryData" :config="categoryConfig" value-key="count" central-label="1,000" central-sub-label="Total Products" />
 ```
 
 ### Chart Inside a Widget Card

package/runtime/knowledge/docs/shell/dashboard/dashboard-widget-card/dashboard-widget-card.docs.md

@@ -24,7 +24,10 @@ import { DashboardWidgetCard } from "@vc-shell/framework";
 </script>
 
 <template>
-  <DashboardWidgetCard header="Products" icon="lucide-package-open">
+  <DashboardWidgetCard
+    header="Products"
+    icon="lucide-package-open"
+  >
     <template #content>
       <div class="tw-p-4">Widget body content here</div>
     </template>
@@ -34,21 +37,21 @@ import { DashboardWidgetCard } from "@vc-shell/framework";
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `header` | `string` | `undefined` | Card title text |
-| `icon` | `string` | `undefined` | Icon displayed next to the header |
-| `loading` | `boolean` | `false` | Shows a loading overlay on the body |
+| Prop      | Type      | Default     | Description                         |
+| --------- | --------- | ----------- | ----------------------------------- |
+| `header`  | `string`  | `undefined` | Card title text                     |
+| `icon`    | `string`  | `undefined` | Icon displayed next to the header   |
+| `loading` | `boolean` | `false`     | Shows a loading overlay on the body |
 
 ## Slots
 
-| Slot | Description |
-|------|-------------|
-| `header` | Override the entire header area (replaces default icon + title) |
-| `actions` | Action buttons in the header row (right side) |
-| `stats` | KPI stat items below the header |
-| `content` | Main body content |
-| `footer` | Footer area with links or actions |
+| Slot      | Description                                                     |
+| --------- | --------------------------------------------------------------- |
+| `header`  | Override the entire header area (replaces default icon + title) |
+| `actions` | Action buttons in the header row (right side)                   |
+| `stats`   | KPI stat items below the header                                 |
+| `content` | Main body content                                               |
+| `footer`  | Footer area with links or actions                               |
 
 ## Common Patterns
 
@@ -134,7 +137,11 @@ onMounted(() => loadData());
 </script>
 
 <template>
-  <DashboardWidgetCard header="System Status" icon="lucide-activity" :loading="loading">
+  <DashboardWidgetCard
+    header="System Status"
+    icon="lucide-activity"
+    :loading="loading"
+  >
     <template #content>
       <!-- Content shown when not loading -->
     </template>
@@ -164,11 +171,11 @@ dashboard.register({
 
 ## Companion Components
 
-| Component | Description |
-|-----------|-------------|
-| `DashboardStatItem` | Single KPI stat with value, label, and optional color variant |
-| `DashboardFeedList` | Scrollable list container for feed rows |
-| `DashboardFeedRow` | Individual feed item with icon, title, subtitle, and meta slots |
+| Component           | Description                                                     |
+| ------------------- | --------------------------------------------------------------- |
+| `DashboardStatItem` | Single KPI stat with value, label, and optional color variant   |
+| `DashboardFeedList` | Scrollable list container for feed rows                         |
+| `DashboardFeedRow`  | Individual feed item with icon, title, subtitle, and meta slots |
 
 ## Tip: Set a Minimum Height
 

package/runtime/knowledge/docs/shell/dashboard/draggable-dashboard/draggable-dashboard.docs.md

@@ -40,20 +40,20 @@ dashboard.registerWidget({
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `showDragHandles` | `boolean` | `false` | Shows visible drag handle icons on widgets |
-| `resizable` | `boolean` | `false` | Enables widget resize handles |
-| `ariaLabel` | `string` | `"Dashboard widgets..."` | Accessible label for the grid container |
+| Prop              | Type      | Default                  | Description                                |
+| ----------------- | --------- | ------------------------ | ------------------------------------------ |
+| `showDragHandles` | `boolean` | `false`                  | Shows visible drag handle icons on widgets |
+| `resizable`       | `boolean` | `false`                  | Enables widget resize handles              |
+| `ariaLabel`       | `string`  | `"Dashboard widgets..."` | Accessible label for the grid container    |
 
 ## Exposed Methods
 
-| Method | Description |
-|--------|-------------|
-| `rearrangeWidgets()` | Re-layout all widgets to fill gaps |
-| `recalculateLayout()` | Recalculate grid dimensions |
-| `saveLayout()` | Persist current layout to localStorage |
-| `useBuiltInPositions()` | Reset to default widget positions |
+| Method                  | Description                            |
+| ----------------------- | -------------------------------------- |
+| `rearrangeWidgets()`    | Re-layout all widgets to fill gaps     |
+| `recalculateLayout()`   | Recalculate grid dimensions            |
+| `saveLayout()`          | Persist current layout to localStorage |
+| `useBuiltInPositions()` | Reset to default widget positions      |
 
 ## Recipe: Registering Dashboard Widgets in a Module
 
@@ -107,7 +107,10 @@ function resetLayout() {
 <template>
   <div>
     <button @click="resetLayout">Reset Layout</button>
-    <DraggableDashboard ref="dashboardRef" :resizable="true" />
+    <DraggableDashboard
+      ref="dashboardRef"
+      :resizable="true"
+    />
   </div>
 </template>
 ```

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