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

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

@@ -20,10 +20,28 @@ The component also supports a `binary` mode for simple true/false toggles, where
 
 ```vue
 <template>
-  <VcInputGroup label="Shipping method" role="radiogroup">
-    <VcRadioButton v-model="method" value="standard" label="Standard" name="shipping" />
-    <VcRadioButton v-model="method" value="express" label="Express" name="shipping" />
-    <VcRadioButton v-model="method" value="overnight" label="Overnight" name="shipping" />
+  <VcInputGroup
+    label="Shipping method"
+    role="radiogroup"
+  >
+    <VcRadioButton
+      v-model="method"
+      value="standard"
+      label="Standard"
+      name="shipping"
+    />
+    <VcRadioButton
+      v-model="method"
+      value="express"
+      label="Express"
+      name="shipping"
+    />
+    <VcRadioButton
+      v-model="method"
+      value="overnight"
+      label="Overnight"
+      name="shipping"
+    />
   </VcInputGroup>
 </template>
 
@@ -37,15 +55,15 @@ const method = ref("standard");
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `modelValue` | `T` | `undefined` | Bound value via `v-model` (shared across the group) |
-| `value` | `T` | -- | This radio button's value. Selected when `modelValue === value` |
-| `label` | `string` | -- | Text label next to the radio circle |
-| `name` | `string` | `"RadioField"` | HTML `name` attribute (must be shared within a group) |
-| `binary` | `boolean` | `false` | Enables boolean toggle mode (clicking toggles `true`/`false`) |
-| `disabled` | `boolean` | `false` | Disables this radio button |
-| `error` / `errorMessage` | `boolean` / `string` | -- | Error styling and message |
+| Prop                     | Type                 | Default        | Description                                                     |
+| ------------------------ | -------------------- | -------------- | --------------------------------------------------------------- |
+| `modelValue`             | `T`                  | `undefined`    | Bound value via `v-model` (shared across the group)             |
+| `value`                  | `T`                  | --             | This radio button's value. Selected when `modelValue === value` |
+| `label`                  | `string`             | --             | Text label next to the radio circle                             |
+| `name`                   | `string`             | `"RadioField"` | HTML `name` attribute (must be shared within a group)           |
+| `binary`                 | `boolean`            | `false`        | Enables boolean toggle mode (clicking toggles `true`/`false`)   |
+| `disabled`               | `boolean`            | `false`        | Disables this radio button                                      |
+| `error` / `errorMessage` | `boolean` / `string` | --             | Error styling and message                                       |
 
 ## Common Patterns
 
@@ -65,10 +83,28 @@ Wrap radio buttons in a `VcInputGroup` with horizontal orientation for inline di
 
 ```vue
 <template>
-  <VcInputGroup label="Priority" role="radiogroup">
-    <VcRadioButton v-model="priority" :value="1" label="Low" name="priority" />
-    <VcRadioButton v-model="priority" :value="2" label="Medium" name="priority" />
-    <VcRadioButton v-model="priority" :value="3" label="High" name="priority" />
+  <VcInputGroup
+    label="Priority"
+    role="radiogroup"
+  >
+    <VcRadioButton
+      v-model="priority"
+      :value="1"
+      label="Low"
+      name="priority"
+    />
+    <VcRadioButton
+      v-model="priority"
+      :value="2"
+      label="Medium"
+      name="priority"
+    />
+    <VcRadioButton
+      v-model="priority"
+      :value="3"
+      label="High"
+      name="priority"
+    />
   </VcInputGroup>
 </template>
 
@@ -109,8 +145,8 @@ In binary mode, clicking toggles between `true` and `false` rather than comparin
 
 ## Slots
 
-| Slot | Description |
-|------|-------------|
+| Slot    | Description                 |
+| ------- | --------------------------- |
 | `error` | Custom error message markup |
 
 ## Accessibility
@@ -165,4 +201,3 @@ Do not mix `binary` mode with regular `value` comparison in the same group. Bina
 ## 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-radio-group/vc-radio-group.docs.md

@@ -34,19 +34,19 @@ const methods = [
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `modelValue` | `T` | — | Selected value (v-model) |
-| `options` | `RadioGroupOption<T>[]` | `[]` | Options to render as radio buttons |
-| `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 |
-| `name` | `string` | auto-generated | Shared name for native radio inputs |
-| `disabled` | `boolean` | `false` | Disable all radio buttons |
-| `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 value (v-model)                  |
+| `options`      | `RadioGroupOption<T>[]`      | `[]`           | Options to render as radio buttons        |
+| `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               |
+| `name`         | `string`                     | auto-generated | Shared name for native radio inputs       |
+| `disabled`     | `boolean`                    | `false`        | Disable all radio buttons                 |
+| `required`     | `boolean`                    | `false`        | Mark group as required                    |
+| `error`        | `boolean`                    | `false`        | External error flag                       |
+| `errorMessage` | `string`                     | —              | Error message text                        |
 
 ## RadioGroupOption Interface
 
@@ -54,20 +54,20 @@ const methods = [
 interface RadioGroupOption<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 value changed |
+| Event               | Payload | Description            |
+| ------------------- | ------- | ---------------------- |
+| `update:modelValue` | `T`     | Selected value changed |
 
 ## Slots
 
-| Slot | Description |
-|------|-------------|
+| Slot      | Description                                                   |
+| --------- | ------------------------------------------------------------- |
 | `default` | Custom radio button layout (replaces options-based rendering) |
 
 ## Common Patterns
@@ -104,26 +104,13 @@ interface RadioGroupOption<V = string | number | boolean> {
 ### Validation Error
 
 ```vue
-<VcRadioGroup
-  v-model="selected"
-  label="Shipping Method"
-  required
-  :error="!selected"
-  error-message="Select a shipping method"
-  :options="shippingOptions"
-/>
+<VcRadioGroup v-model="selected" label="Shipping Method" required :error="!selected" error-message="Select a shipping method" :options="shippingOptions" />
 ```
 
 ### Custom Slot Layout
 
 ```vue
-<VcRadioGroup
-  v-model="frequency"
-  label="Newsletter Frequency"
-  hint="Custom layout via default slot"
-  orientation="horizontal"
-  name="newsletter-frequency"
->
+<VcRadioGroup v-model="frequency" label="Newsletter Frequency" hint="Custom layout via default slot" orientation="horizontal" name="newsletter-frequency">
   <VcRadioButton v-model="frequency" value="daily" label="Daily" />
   <VcRadioButton v-model="frequency" value="weekly" label="Weekly" />
   <VcRadioButton v-model="frequency" value="monthly" label="Monthly" />
@@ -148,4 +135,3 @@ interface RadioGroupOption<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.
-

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

@@ -17,7 +17,11 @@ Read-only rating display component that visualizes a numeric value as stars, a s
 
 ```vue
 <template>
-  <VcRating :model-value="4" :max="5" label="Customer Rating" />
+  <VcRating
+    :model-value="4"
+    :max="5"
+    label="Customer Rating"
+  />
 </template>
 
 <script setup lang="ts">
@@ -88,12 +92,7 @@ If no `placeholder` is provided and the value is falsy, the component renders an
 Add a label above the rating and an optional tooltip for context:
 
 ```vue
-<VcRating
-  :model-value="4"
-  :max="5"
-  label="Average Rating"
-  tooltip="Based on verified purchases only"
-/>
+<VcRating :model-value="4" :max="5" label="Average Rating" tooltip="Based on verified purchases only" />
 ```
 
 The label is rendered using the internal `VcLabel` component with consistent styling across all form fields.
@@ -130,8 +129,14 @@ Display the rating alongside other product information in a typical detail blade
 ```vue
 <template>
   <div class="tw-flex tw-flex-col tw-gap-4">
-    <VcField label="Product Name" :model-value="product.name" />
-    <VcField label="SKU" :model-value="product.sku" />
+    <VcField
+      label="Product Name"
+      :model-value="product.name"
+    />
+    <VcField
+      label="SKU"
+      :model-value="product.sku"
+    />
     <VcRating
       :model-value="product.averageRating"
       :max="5"
@@ -140,12 +145,13 @@ Display the rating alongside other product information in a typical detail blade
       tooltip="Based on verified purchases"
     >
       <template #details>
-        <span class="tw-text-sm tw-text-gray-500 tw-ml-2">
-          ({{ product.reviewCount }} reviews)
-        </span>
+        <span class="tw-text-sm tw-text-gray-500 tw-ml-2"> ({{ product.reviewCount }} reviews) </span>
       </template>
     </VcRating>
-    <VcField label="Price" :model-value="formatCurrency(product.price)" />
+    <VcField
+      label="Price"
+      :model-value="formatCurrency(product.price)"
+    />
   </div>
 </template>
 ```
@@ -213,31 +219,31 @@ Use the `"star-and-text"` or `"text"` variant in table cell slots for a compact
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `modelValue` | `number` | -- | Current rating value to display |
-| `max` | `number` | `5` | Maximum rating value (defines the scale) |
-| `variant` | `"stars" \| "star-and-text" \| "text"` | `"stars"` | Display variant |
-| `label` | `string` | -- | Field label text above the rating |
-| `tooltip` | `string` | -- | Tooltip shown on the label |
-| `placeholder` | `string` | -- | Text shown when `modelValue` is falsy |
+| Prop          | Type                                   | Default   | Description                              |
+| ------------- | -------------------------------------- | --------- | ---------------------------------------- |
+| `modelValue`  | `number`                               | --        | Current rating value to display          |
+| `max`         | `number`                               | `5`       | Maximum rating value (defines the scale) |
+| `variant`     | `"stars" \| "star-and-text" \| "text"` | `"stars"` | Display variant                          |
+| `label`       | `string`                               | --        | Field label text above the rating        |
+| `tooltip`     | `string`                               | --        | Tooltip shown on the label               |
+| `placeholder` | `string`                               | --        | Text shown when `modelValue` is falsy    |
 
 ## Slots
 
-| Slot | Scope | Description |
-|------|-------|-------------|
-| `details` | -- | Additional content below the rating (available in `star-and-text` and `text` variants) |
+| Slot      | Scope | Description                                                                            |
+| --------- | ----- | -------------------------------------------------------------------------------------- |
+| `details` | --    | Additional content below the rating (available in `star-and-text` and `text` variants) |
 
 ## CSS Variables
 
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `--rating-placeholder-color` | `var(--neutrals-400)` | Color of the placeholder text |
-| `--rating-star-size` | `1em` | Size of star icons |
-| `--rating-gap` | `2px` | Gap between star icons |
-| `--rating-special-color` | `var(--warning-500)` | Color of filled stars |
-| `--rating-special-color-hover` | `var(--warning-600)` | Hover color for star icons (reserved for future interactive mode) |
-| `--rating-special-color-disabled` | `var(--warning-200)` | Disabled color for star icons (reserved for future use) |
+| Variable                          | Default               | Description                                                       |
+| --------------------------------- | --------------------- | ----------------------------------------------------------------- |
+| `--rating-placeholder-color`      | `var(--neutrals-400)` | Color of the placeholder text                                     |
+| `--rating-star-size`              | `1em`                 | Size of star icons                                                |
+| `--rating-gap`                    | `2px`                 | Gap between star icons                                            |
+| `--rating-special-color`          | `var(--warning-500)`  | Color of filled stars                                             |
+| `--rating-special-color-hover`    | `var(--warning-600)`  | Hover color for star icons (reserved for future interactive mode) |
+| `--rating-special-color-disabled` | `var(--warning-200)`  | Disabled color for star icons (reserved for future use)           |
 
 ## Accessibility
 
@@ -255,4 +261,3 @@ Use the `"star-and-text"` or `"text"` variant in table cell slots for a compact
 ## Skeleton / Loading State
 
 When placed inside a `VcBlade` with `loading=true`, the component automatically renders a skeleton placeholder matching its visual footprint. No additional props or configuration needed.
-

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

@@ -6,14 +6,14 @@ VcSelect is one of the most widely used components in vc-shell. It covers most s
 
 ## When to Use
 
-| Scenario | Component |
-|----------|-----------|
-| Selection from a list (single/multiple) | **VcSelect** |
-| Free text input | [VcInput](../vc-input/) |
-| Number input + unit selection | [VcInputDropdown](../vc-input-dropdown/) |
-| Tags with free-form input | [VcMultivalue](../vc-multivalue/) |
-| Date selection | [VcDatePicker](../vc-date-picker/) |
-| Color selection | [VcColorInput](../vc-color-input/) |
+| Scenario                                | Component                                |
+| --------------------------------------- | ---------------------------------------- |
+| Selection from a list (single/multiple) | **VcSelect**                             |
+| Free text input                         | [VcInput](../vc-input/)                  |
+| Number input + unit selection           | [VcInputDropdown](../vc-input-dropdown/) |
+| Tags with free-form input               | [VcMultivalue](../vc-multivalue/)        |
+| Date selection                          | [VcDatePicker](../vc-date-picker/)       |
+| Color selection                         | [VcColorInput](../vc-color-input/)       |
 
 ## Quick Start
 
@@ -75,11 +75,7 @@ By default `option-value="id"` and `option-label="title"` — if your objects us
 For simple lists of strings or numbers:
 
 ```vue
-<VcSelect
-  v-model="size"
-  :options="['S', 'M', 'L', 'XL', 'XXL']"
-  label="Размер"
-/>
+<VcSelect v-model="size" :options="['S', 'M', 'L', 'XL', 'XXL']" label="Размер" />
 ```
 
 In this case `optionValue` and `optionLabel` are not needed — the component uses the value as-is.
@@ -87,6 +83,7 @@ In this case `optionValue` and `optionLabel` are not needed — the component us
 ### Async Function (Server API)
 
 To load data from a server, pass a function instead of an array. This is the most powerful mode — it automatically provides:
+
 - Search with debounce (500ms by default)
 - Infinite scrolling (loads more on scroll down)
 - Automatic resolution of the initial value by `ids`
@@ -184,14 +181,7 @@ Selected values are displayed as chips with a remove button. The `clearable` but
 Enable `searchable` to add a search field to the dropdown:
 
 ```vue
-<VcSelect
-  v-model="userId"
-  :options="users"
-  label="Пользователь"
-  searchable
-  :debounce="300"
-  @search="onSearch"
-/>
+<VcSelect v-model="userId" :options="users" label="Пользователь" searchable :debounce="300" @search="onSearch" />
 ```
 
 - **Static array:** filtering happens on the client side (by `optionLabel`)
@@ -206,7 +196,11 @@ Use the `#option` slot for full control over how each option is rendered:
 
 ```vue
 <template>
-  <VcSelect v-model="statusId" :options="statuses" label="Статус заказа">
+  <VcSelect
+    v-model="statusId"
+    :options="statuses"
+    label="Статус заказа"
+  >
     <template #option="{ opt, selected, toggleOption }">
       <div
         class="tw-flex tw-items-center tw-gap-2 tw-px-3 tw-py-2 tw-cursor-pointer"
@@ -224,7 +218,12 @@ Use the `#option` slot for full control over how each option is rendered:
           <span class="tw-text-xs tw-text-[var(--neutrals-400)]">{{ opt.description }}</span>
         </div>
         <!-- Галочка для выбранного -->
-        <VcIcon v-if="selected" icon="lucide-check" size="xs" class="tw-ml-auto" />
+        <VcIcon
+          v-if="selected"
+          icon="lucide-check"
+          size="xs"
+          class="tw-ml-auto"
+        />
       </div>
     </template>
   </VcSelect>
@@ -316,12 +315,7 @@ const { meta, errorBag } = useForm({ validateOnMount: false });
 For an async select with search, the pattern is the same, but `handleChange` is called alongside business logic:
 
 ```vue
-<Field
-  v-slot="{ errorMessage, handleChange, errors }"
-  :model-value="offer.productId"
-  name="product"
-  rules="required"
->
+<Field v-slot="{ errorMessage, handleChange, errors }" :model-value="offer.productId" name="product" rules="required">
   <VcSelect
     v-model="offer.productId"
     label="Product"
@@ -509,7 +503,11 @@ A typical pattern in vc-shell — a select on a details page:
     <VcForm>
       <VcRow>
         <VcCol :size="6">
-          <VcInput v-model="product.name" label="Name" required />
+          <VcInput
+            v-model="product.name"
+            label="Name"
+            required
+          />
         </VcCol>
         <VcCol :size="6">
           <VcSelect
@@ -571,18 +569,10 @@ If `v-model` contains an ID but the list has not been loaded yet — for static
 
 ```vue
 <!-- ❌ Проблема: async функция не обрабатывает ids -->
-const loadUsers = async (keyword?: string, skip?: number) => {
-  return api.searchUsers({ keyword, skip, take: 20 });
-};
+const loadUsers = async (keyword?: string, skip?: number) => { return api.searchUsers({ keyword, skip, take: 20 }); };
 
 <!-- ✅ Решение: обработайте ids параметр -->
-const loadUsers = async (keyword?: string, skip?: number, ids?: string[]) => {
-  if (ids?.length) {
-    const users = await api.getUsersByIds(ids);
-    return { results: users, totalCount: users.length };
-  }
-  return api.searchUsers({ keyword, skip, take: 20 });
-};
+const loadUsers = async (keyword?: string, skip?: number, ids?: string[]) => { if (ids?.length) { const users = await api.getUsersByIds(ids); return { results: users, totalCount: users.length }; } return api.searchUsers({ keyword, skip, take: 20 }); };
 ```
 
 ### Problem: Unnecessary requests with cascading selects
@@ -593,55 +583,55 @@ Don't forget `:key` with cascading selects, otherwise the second select will ret
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `modelValue` | `T \| T[] \| string \| string[] \| null` | `undefined` | Value (v-model). Type depends on `emitValue` and `multiple` |
-| `options` | `T[] \| ((keyword?, skip?, ids?) => Promise<P>)` | `[]` | Static array or async function |
-| `optionValue` | `string \| ((opt: T) => string)` | `"id"` | Object property used as the value |
-| `optionLabel` | `string \| ((opt: T) => string)` | `"title"` | Object property used for display |
-| `multiple` | `boolean` | `false` | Multiple selection |
-| `searchable` | `boolean` | `false` | Search through options |
-| `emitValue` | `boolean` | `true` | `true` = emit the value, `false` = emit the full object |
-| `clearable` | `boolean` | `true` | Clear button |
-| `debounce` | `number \| string` | `500` | Search delay (ms) |
-| `mapOptions` | `boolean` | `true` | Automatically look up label by value in the array |
-| `placement` | `string` | `"bottom"` | Dropdown position (Floating UI placements) |
-| `size` | `"default" \| "small"` | `"default"` | Field size |
-| `outline` | `boolean` | `true` | Show border outline |
-| `loading` | `boolean` | `false` | Loading state |
-| `label` | `string` | — | Label text |
-| `placeholder` | `string` | — | Placeholder |
-| `required` | `boolean` | `false` | Required field (asterisk) |
-| `disabled` | `boolean` | `false` | Disable the component |
-| `error` | `boolean` | `false` | Error state |
-| `errorMessage` | `string` | — | Error text |
-| `hint` | `string` | — | Hint text below the field |
-| `tooltip` | `string` | — | Tooltip next to the label |
-| `prefix` | `string` | — | Prefix inside the field |
-| `suffix` | `string` | — | Suffix inside the field |
-| `multilanguage` | `boolean` | `false` | Multilanguage icon on the label |
-| `currentLanguage` | `string` | — | Current language |
-| `name` | `string` | `"Field"` | Field name for validation |
+| Prop              | Type                                             | Default     | Description                                                 |
+| ----------------- | ------------------------------------------------ | ----------- | ----------------------------------------------------------- |
+| `modelValue`      | `T \| T[] \| string \| string[] \| null`         | `undefined` | Value (v-model). Type depends on `emitValue` and `multiple` |
+| `options`         | `T[] \| ((keyword?, skip?, ids?) => Promise<P>)` | `[]`        | Static array or async function                              |
+| `optionValue`     | `string \| ((opt: T) => string)`                 | `"id"`      | Object property used as the value                           |
+| `optionLabel`     | `string \| ((opt: T) => string)`                 | `"title"`   | Object property used for display                            |
+| `multiple`        | `boolean`                                        | `false`     | Multiple selection                                          |
+| `searchable`      | `boolean`                                        | `false`     | Search through options                                      |
+| `emitValue`       | `boolean`                                        | `true`      | `true` = emit the value, `false` = emit the full object     |
+| `clearable`       | `boolean`                                        | `true`      | Clear button                                                |
+| `debounce`        | `number \| string`                               | `500`       | Search delay (ms)                                           |
+| `mapOptions`      | `boolean`                                        | `true`      | Automatically look up label by value in the array           |
+| `placement`       | `string`                                         | `"bottom"`  | Dropdown position (Floating UI placements)                  |
+| `size`            | `"default" \| "small"`                           | `"default"` | Field size                                                  |
+| `outline`         | `boolean`                                        | `true`      | Show border outline                                         |
+| `loading`         | `boolean`                                        | `false`     | Loading state                                               |
+| `label`           | `string`                                         | —           | Label text                                                  |
+| `placeholder`     | `string`                                         | —           | Placeholder                                                 |
+| `required`        | `boolean`                                        | `false`     | Required field (asterisk)                                   |
+| `disabled`        | `boolean`                                        | `false`     | Disable the component                                       |
+| `error`           | `boolean`                                        | `false`     | Error state                                                 |
+| `errorMessage`    | `string`                                         | —           | Error text                                                  |
+| `hint`            | `string`                                         | —           | Hint text below the field                                   |
+| `tooltip`         | `string`                                         | —           | Tooltip next to the label                                   |
+| `prefix`          | `string`                                         | —           | Prefix inside the field                                     |
+| `suffix`          | `string`                                         | —           | Suffix inside the field                                     |
+| `multilanguage`   | `boolean`                                        | `false`     | Multilanguage icon on the label                             |
+| `currentLanguage` | `string`                                         | —           | Current language                                            |
+| `name`            | `string`                                         | `"Field"`   | Field name for validation                                   |
 
 ## Events
 
-| Event | Payload | Description |
-|-------|---------|-------------|
+| Event               | Payload                                  | Description            |
+| ------------------- | ---------------------------------------- | ---------------------- |
 | `update:modelValue` | `T \| T[] \| string \| string[] \| null` | Selected value changed |
-| `search` | `string` | Search query changed |
-| `close` | — | Dropdown closed |
+| `search`            | `string`                                 | Search query changed   |
+| `close`             | —                                        | Dropdown closed        |
 
 ## Slots
 
-| Slot | Scope | Description |
-|------|-------|-------------|
-| `option` | `{ index, opt, selected, toggleOption }` | Custom option rendering. **You must call `toggleOption(opt)` on click.** |
-| `selected-item` | `{ index, opt, selected, removeAtIndex }` | Custom rendering of selected chips (multiple) |
-| `control` | `{ toggleHandler, isOpened }` | Full trigger replacement |
-| `prepend` / `append` | — | Content outside the field |
-| `prepend-inner` / `append-inner` | — | Content inside the field |
-| `no-options` | — | Shown when there are no options |
-| `error` / `hint` | — | Custom rendering of error/hint |
+| Slot                             | Scope                                     | Description                                                              |
+| -------------------------------- | ----------------------------------------- | ------------------------------------------------------------------------ |
+| `option`                         | `{ index, opt, selected, toggleOption }`  | Custom option rendering. **You must call `toggleOption(opt)` on click.** |
+| `selected-item`                  | `{ index, opt, selected, removeAtIndex }` | Custom rendering of selected chips (multiple)                            |
+| `control`                        | `{ toggleHandler, isOpened }`             | Full trigger replacement                                                 |
+| `prepend` / `append`             | —                                         | Content outside the field                                                |
+| `prepend-inner` / `append-inner` | —                                         | Content inside the field                                                 |
+| `no-options`                     | —                                         | Shown when there are no options                                          |
+| `error` / `hint`                 | —                                         | Custom rendering of error/hint                                           |
 
 ## CSS Variables
 
@@ -688,4 +678,3 @@ Don't forget `:key` with cascading selects, otherwise the second select will ret
 When placed inside a `VcBlade` with `loading=true`, the component automatically renders a skeleton placeholder matching its visual footprint — a label block (when the `label` prop is set) and an input-shaped block. No additional props or configuration needed.
 
 This behavior is powered by `BladeLoadingKey` via Vue's provide/inject. The component injects the loading state from the nearest `VcBlade` ancestor.
-

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

@@ -13,10 +13,16 @@ A content carousel component built on Swiper.js for displaying slides with optio
 
 ```vue
 <template>
-  <VcSlider :slides="products" navigation>
+  <VcSlider
+    :slides="products"
+    navigation
+  >
     <template #default="{ slide }">
       <div class="tw-w-48">
-        <img :src="slide.imageUrl" class="tw-rounded" />
+        <img
+          :src="slide.imageUrl"
+          class="tw-rounded"
+        />
         <p>{{ slide.name }}</p>
       </div>
     </template>
@@ -36,14 +42,14 @@ const products = [
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `slides` | `Record<string, unknown>[] \| unknown[]` | `[]` | Array of slide data objects |
-| `navigation` | `boolean` | `false` | Show previous/next navigation buttons |
-| `slidesPerView` | `string \| "auto"` | `"auto"` | Number of visible slides at once |
-| `spaceBetweenSlides` | `number` | `10` | Gap between slides in pixels |
-| `overflow` | `boolean` | `false` | Allow slides to be visible outside the container bounds |
-| `ariaLabel` | `string` | `"Content carousel"` | Accessible label for the slider region |
+| Prop                 | Type                                     | Default              | Description                                             |
+| -------------------- | ---------------------------------------- | -------------------- | ------------------------------------------------------- |
+| `slides`             | `Record<string, unknown>[] \| unknown[]` | `[]`                 | Array of slide data objects                             |
+| `navigation`         | `boolean`                                | `false`              | Show previous/next navigation buttons                   |
+| `slidesPerView`      | `string \| "auto"`                       | `"auto"`             | Number of visible slides at once                        |
+| `spaceBetweenSlides` | `number`                                 | `10`                 | Gap between slides in pixels                            |
+| `overflow`           | `boolean`                                | `false`              | Allow slides to be visible outside the container bounds |
+| `ariaLabel`          | `string`                                 | `"Content carousel"` | Accessible label for the slider region                  |
 
 ## Common Patterns
 
@@ -89,11 +95,11 @@ const products = [
 
 ## Slots
 
-| Slot | Scope | Description |
-|------|-------|-------------|
-| `default` | `{ slide }` | Content for each slide |
-| `prevBtn` | -- | Custom previous navigation button |
-| `nextBtn` | -- | Custom next navigation button |
+| Slot      | Scope       | Description                       |
+| --------- | ----------- | --------------------------------- |
+| `default` | `{ slide }` | Content for each slide            |
+| `prevBtn` | --          | Custom previous navigation button |
+| `nextBtn` | --          | Custom next navigation button     |
 
 ## Accessibility
 
@@ -117,4 +123,3 @@ const products = [
 ## Skeleton / Loading State
 
 When placed inside a `VcBlade` with `loading=true`, the component automatically renders a skeleton placeholder matching its visual footprint. No additional props or configuration needed.
-