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

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

@@ -76,11 +76,7 @@ const units = [
 You can also pass functions for `optionValue` and `optionLabel` for more complex extraction logic:
 
 ```vue
-<VcInputDropdown
-  :option-value="(opt) => opt.code"
-  :option-label="(opt) => `${opt.symbol} ${opt.name}`"
-  :options="currencies"
-/>
+<VcInputDropdown :option-value="(opt) => opt.code" :option-label="(opt) => `${opt.symbol} ${opt.name}`" :options="currencies" />
 ```
 
 ## Searchable Dropdown
@@ -88,14 +84,7 @@ You can also pass functions for `optionValue` and `optionLabel` for more complex
 Enable filtering inside the dropdown with the `searchable` prop. This is useful when the options list is long:
 
 ```vue
-<VcInputDropdown
-  v-model="value"
-  v-model:option="selected"
-  :options="allCountryCodes"
-  searchable
-  label="Phone Number"
-  input-type="tel"
-/>
+<VcInputDropdown v-model="value" v-model:option="selected" :options="allCountryCodes" searchable label="Phone Number" input-type="tel" />
 ```
 
 ## Input Types
@@ -127,13 +116,7 @@ VcInputDropdown inherits all standard form field states:
 <VcInputDropdown v-model="val" v-model:option="opt" :options="opts" loading />
 
 <!-- Error with message -->
-<VcInputDropdown
-  v-model="val"
-  v-model:option="opt"
-  :options="opts"
-  error
-  error-message="This field is required"
-/>
+<VcInputDropdown v-model="val" v-model:option="opt" :options="opts" error error-message="This field is required" />
 
 <!-- Required -->
 <VcInputDropdown v-model="val" v-model:option="opt" :options="opts" required />
@@ -164,7 +147,11 @@ Replace the default dropdown toggle with a custom element using the `button` slo
 ```vue
 <template>
   <VcForm @submit="saveProduct">
-    <VcInput v-model="product.name" label="Product Name" required />
+    <VcInput
+      v-model="product.name"
+      label="Product Name"
+      required
+    />
     <VcInputDropdown
       v-model="product.weight"
       v-model:option="product.weightUnit"
@@ -238,57 +225,57 @@ Replace the default dropdown toggle with a custom element using the `button` slo
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `modelValue` | `string \| number \| Date \| null` | -- | Input field value via `v-model` |
-| `option` | `unknown` | -- | Selected dropdown option via `v-model:option` |
-| `options` | `unknown[]` | `[]` | Available options for the dropdown |
-| `optionValue` | `string \| ((opt: unknown) => unknown)` | `"id"` | Property name or function to extract the option value |
-| `optionLabel` | `string \| ((opt: unknown) => string)` | `"title"` | Property name or function to extract the display label |
-| `inputType` | `"text" \| "number" \| "email" \| "tel" \| "password" \| "url" \| "time" \| "date" \| "datetime-local" \| "integer"` | `"text"` | HTML input type |
-| `searchable` | `boolean` | `false` | Enable search filtering in the dropdown |
-| `debounce` | `string \| number` | `0` | Debounce delay (ms) for search input |
-| `clearable` | `boolean` | `false` | Show a clear button on the input |
-| `prefix` | `string` | -- | Static prefix text inside the input |
-| `suffix` | `string` | -- | Static suffix text inside the input |
-| `maxlength` | `string \| number` | `1024` | Maximum character length for the input |
-| `label` | `string` | -- | Field label text |
-| `placeholder` | `string` | -- | Input placeholder text |
-| `hint` | `string` | -- | Hint text below the field |
-| `tooltip` | `string` | -- | Tooltip on the label |
-| `disabled` | `boolean` | `false` | Disable all interactions |
-| `required` | `boolean` | `false` | Mark field as required (shows asterisk) |
-| `loading` | `boolean` | `false` | Show loading spinner |
-| `autofocus` | `boolean` | `false` | Auto-focus on mount |
-| `error` | `boolean` | `false` | External error flag |
-| `errorMessage` | `string` | -- | Error message (sets error state when truthy) |
-| `name` | `string` | -- | HTML name attribute for the input |
+| Prop           | Type                                                                                                                 | Default   | Description                                            |
+| -------------- | -------------------------------------------------------------------------------------------------------------------- | --------- | ------------------------------------------------------ |
+| `modelValue`   | `string \| number \| Date \| null`                                                                                   | --        | Input field value via `v-model`                        |
+| `option`       | `unknown`                                                                                                            | --        | Selected dropdown option via `v-model:option`          |
+| `options`      | `unknown[]`                                                                                                          | `[]`      | Available options for the dropdown                     |
+| `optionValue`  | `string \| ((opt: unknown) => unknown)`                                                                              | `"id"`    | Property name or function to extract the option value  |
+| `optionLabel`  | `string \| ((opt: unknown) => string)`                                                                               | `"title"` | Property name or function to extract the display label |
+| `inputType`    | `"text" \| "number" \| "email" \| "tel" \| "password" \| "url" \| "time" \| "date" \| "datetime-local" \| "integer"` | `"text"`  | HTML input type                                        |
+| `searchable`   | `boolean`                                                                                                            | `false`   | Enable search filtering in the dropdown                |
+| `debounce`     | `string \| number`                                                                                                   | `0`       | Debounce delay (ms) for search input                   |
+| `clearable`    | `boolean`                                                                                                            | `false`   | Show a clear button on the input                       |
+| `prefix`       | `string`                                                                                                             | --        | Static prefix text inside the input                    |
+| `suffix`       | `string`                                                                                                             | --        | Static suffix text inside the input                    |
+| `maxlength`    | `string \| number`                                                                                                   | `1024`    | Maximum character length for the input                 |
+| `label`        | `string`                                                                                                             | --        | Field label text                                       |
+| `placeholder`  | `string`                                                                                                             | --        | Input placeholder text                                 |
+| `hint`         | `string`                                                                                                             | --        | Hint text below the field                              |
+| `tooltip`      | `string`                                                                                                             | --        | Tooltip on the label                                   |
+| `disabled`     | `boolean`                                                                                                            | `false`   | Disable all interactions                               |
+| `required`     | `boolean`                                                                                                            | `false`   | Mark field as required (shows asterisk)                |
+| `loading`      | `boolean`                                                                                                            | `false`   | Show loading spinner                                   |
+| `autofocus`    | `boolean`                                                                                                            | `false`   | Auto-focus on mount                                    |
+| `error`        | `boolean`                                                                                                            | `false`   | External error flag                                    |
+| `errorMessage` | `string`                                                                                                             | --        | Error message (sets error state when truthy)           |
+| `name`         | `string`                                                                                                             | --        | HTML name attribute for the input                      |
 
 ## Events
 
-| Event | Payload | Description |
-|-------|---------|-------------|
-| `update:modelValue` | `string \| number \| Date \| null` | Input value changed |
-| `update:option` | `unknown` | Dropdown selection changed |
-| `change` | `unknown` | Generic change event |
-| `blur` | `Event` | Input lost focus |
+| Event               | Payload                            | Description                |
+| ------------------- | ---------------------------------- | -------------------------- |
+| `update:modelValue` | `string \| number \| Date \| null` | Input value changed        |
+| `update:option`     | `unknown`                          | Dropdown selection changed |
+| `change`            | `unknown`                          | Generic change event       |
+| `blur`              | `Event`                            | Input lost focus           |
 
 ## Slots
 
-| Slot | Scope | Description |
-|------|-------|-------------|
-| `button` | `{ toggleHandler: () => void }` | Replace the dropdown toggle button |
-| `control` | `{ placeholder, focused, modelValue, emitValue }` | Replace the entire input element |
-| `option` | `{ index, opt, selected, toggleOption }` | Custom rendering for each dropdown option |
-| `prepend` | -- | Content before the field (outside) |
-| `append` | -- | Content after the field (outside) |
-| `prepend-inner` | -- | Content inside the field, before the input |
-| `append-inner` | -- | Content inside the field, after the input |
+| Slot            | Scope                                             | Description                                |
+| --------------- | ------------------------------------------------- | ------------------------------------------ |
+| `button`        | `{ toggleHandler: () => void }`                   | Replace the dropdown toggle button         |
+| `control`       | `{ placeholder, focused, modelValue, emitValue }` | Replace the entire input element           |
+| `option`        | `{ index, opt, selected, toggleOption }`          | Custom rendering for each dropdown option  |
+| `prepend`       | --                                                | Content before the field (outside)         |
+| `append`        | --                                                | Content after the field (outside)          |
+| `prepend-inner` | --                                                | Content inside the field, before the input |
+| `append-inner`  | --                                                | Content inside the field, after the input  |
 
 ## CSS Variables
 
-| Variable | Default | Description |
-|----------|---------|-------------|
+| Variable                        | Default              | Description                                               |
+| ------------------------------- | -------------------- | --------------------------------------------------------- |
 | `--input-dropdown-toggle-color` | `var(--primary-500)` | Color of the dropdown toggle button text and chevron icon |
 
 > **Note:** VcInputDropdown inherits all CSS variables from [VcInput](../vc-input/) for input styling and from [VcSelect](../vc-select/) for dropdown styling.
@@ -311,4 +298,3 @@ Replace the default dropdown toggle with a custom element using the `button` slo
 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-input-group/vc-input-group.docs.md

@@ -14,9 +14,18 @@ A semantic `<fieldset>` wrapper that groups related form controls under a shared
 
 ```vue
 <template>
-  <VcInputGroup label="Customer profile" hint="All fields in this section are related">
-    <VcInput v-model="firstName" label="First name" />
-    <VcInput v-model="lastName" label="Last name" />
+  <VcInputGroup
+    label="Customer profile"
+    hint="All fields in this section are related"
+  >
+    <VcInput
+      v-model="firstName"
+      label="First name"
+    />
+    <VcInput
+      v-model="lastName"
+      label="Last name"
+    />
   </VcInputGroup>
 </template>
 
@@ -31,17 +40,17 @@ const lastName = ref("");
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `label` | `string` | -- | Group label rendered as a `<legend>` |
-| `tooltip` | `string` | -- | Tooltip on the label's info icon |
-| `hint` | `string` | -- | Helper text below the group |
-| `orientation` | `"vertical" \| "horizontal"` | `"vertical"` | Layout direction for child controls |
-| `role` | `"group" \| "radiogroup"` | `"group"` | ARIA role for the fieldset |
-| `disabled` | `boolean` | `false` | Disables all controls in the group |
-| `error` / `errorMessage` | `boolean` / `string` | -- | Group-level error styling and message |
-| `required` | `boolean` | `false` | Shows required indicator on the label |
-| `name` | `string` | -- | Shared `name` propagated to child controls |
+| Prop                     | Type                         | Default      | Description                                |
+| ------------------------ | ---------------------------- | ------------ | ------------------------------------------ |
+| `label`                  | `string`                     | --           | Group label rendered as a `<legend>`       |
+| `tooltip`                | `string`                     | --           | Tooltip on the label's info icon           |
+| `hint`                   | `string`                     | --           | Helper text below the group                |
+| `orientation`            | `"vertical" \| "horizontal"` | `"vertical"` | Layout direction for child controls        |
+| `role`                   | `"group" \| "radiogroup"`    | `"group"`    | ARIA role for the fieldset                 |
+| `disabled`               | `boolean`                    | `false`      | Disables all controls in the group         |
+| `error` / `errorMessage` | `boolean` / `string`         | --           | Group-level error styling and message      |
+| `required`               | `boolean`                    | `false`      | Shows required indicator on the label      |
+| `name`                   | `string`                     | --           | Shared `name` propagated to child controls |
 
 ## Common Patterns
 
@@ -58,11 +67,7 @@ const lastName = ref("");
 ### Checkbox Group with Error
 
 ```vue
-<VcInputGroup
-  label="Features"
-  :error="selectedFeatures.length === 0"
-  error-message="Select at least one feature"
->
+<VcInputGroup label="Features" :error="selectedFeatures.length === 0" error-message="Select at least one feature">
   <VcCheckbox v-model="selectedFeatures" value="search">Search</VcCheckbox>
   <VcCheckbox v-model="selectedFeatures" value="filters">Filters</VcCheckbox>
   <VcCheckbox v-model="selectedFeatures" value="export">Export</VcCheckbox>
@@ -80,11 +85,11 @@ const lastName = ref("");
 
 ## Slots
 
-| Slot | Description |
-|------|-------------|
-| `default` | The grouped form controls |
-| `error` | Custom error message markup |
-| `hint` | Custom hint text markup |
+| Slot      | Description                 |
+| --------- | --------------------------- |
+| `default` | The grouped form controls   |
+| `error`   | Custom error message markup |
+| `hint`    | Custom hint text markup     |
 
 ## Accessibility
 

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

@@ -20,11 +20,27 @@ Compositional navigation menu component for building sidebar navigation with sec
       :active="currentRoute === '/dashboard'"
       @click="navigate('/dashboard')"
     />
-    <VcMenuGroup group-id="catalog" icon="lucide-box" title="Catalog">
-      <VcMenuItem title="Products" nested @click="navigate('/products')" />
-      <VcMenuItem title="Categories" nested @click="navigate('/categories')" />
+    <VcMenuGroup
+      group-id="catalog"
+      icon="lucide-box"
+      title="Catalog"
+    >
+      <VcMenuItem
+        title="Products"
+        nested
+        @click="navigate('/products')"
+      />
+      <VcMenuItem
+        title="Categories"
+        nested
+        @click="navigate('/categories')"
+      />
     </VcMenuGroup>
-    <VcMenuItem icon="lucide-settings" title="Settings" @click="navigate('/settings')" />
+    <VcMenuItem
+      icon="lucide-settings"
+      title="Settings"
+      @click="navigate('/settings')"
+    />
   </VcMenu>
 </template>
 
@@ -35,15 +51,15 @@ import { VcMenu, VcMenuItem, VcMenuGroup } from "@vc-shell/framework";
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `expanded` | `boolean` | `true` | Show full menu (titles visible) or collapsed (icons only) |
-| `loading` | `boolean` | `false` | Show skeleton loading placeholders instead of content |
+| Prop       | Type      | Default | Description                                               |
+| ---------- | --------- | ------- | --------------------------------------------------------- |
+| `expanded` | `boolean` | `true`  | Show full menu (titles visible) or collapsed (icons only) |
+| `loading`  | `boolean` | `false` | Show skeleton loading placeholders instead of content     |
 
 ## Slots
 
-| Slot | Description |
-|------|-------------|
+| Slot      | Description                              |
+| --------- | ---------------------------------------- |
 | `default` | Menu items (`VcMenuItem`, `VcMenuGroup`) |
 
 ## Common Patterns
@@ -70,21 +86,9 @@ import { VcMenu, VcMenuItem, VcMenuGroup } from "@vc-shell/framework";
 ### Items with Badges
 
 ```vue
-<VcMenuItem
-  icon="lucide-shopping-cart"
-  title="New Orders"
-  :badge="{ content: 5, variant: 'primary' }"
-/>
-<VcMenuItem
-  icon="lucide-alert-triangle"
-  title="Returns"
-  :badge="{ content: 99, variant: 'danger' }"
-/>
-<VcMenuItem
-  icon="lucide-bell"
-  title="Notifications"
-  :badge="{ isDot: true, variant: 'warning' }"
-/>
+<VcMenuItem icon="lucide-shopping-cart" title="New Orders" :badge="{ content: 5, variant: 'primary' }" />
+<VcMenuItem icon="lucide-alert-triangle" title="Returns" :badge="{ content: 99, variant: 'danger' }" />
+<VcMenuItem icon="lucide-bell" title="Notifications" :badge="{ isDot: true, variant: 'warning' }" />
 ```
 
 ### Collapsed State
@@ -93,9 +97,9 @@ When `expanded` is `false`, the menu shows only icons and letter abbreviations.
 
 ## CSS Variables
 
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `--vc-menu-gap` | `2px` | Gap between menu items |
+| Variable        | Default | Description            |
+| --------------- | ------- | ---------------------- |
+| `--vc-menu-gap` | `2px`   | Gap between menu items |
 
 ## Accessibility
 

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

@@ -10,6 +10,7 @@ A multi-value input component for collecting multiple entries as chips/tags. Sup
 - Building tokenized inputs where each value is displayed as a removable chip
 
 When NOT to use:
+
 - Selecting from a list without manual entry -- use [VcSelect](../vc-select/) with `multiple`
 - Single value entry -- use [VcInput](../vc-input/)
 - Rich text content -- use [VcEditor](../vc-editor/)
@@ -18,7 +19,11 @@ When NOT to use:
 
 ```vue
 <template>
-  <VcMultivalue v-model="tags" label="Tags" placeholder="Type and press Enter" />
+  <VcMultivalue
+    v-model="tags"
+    label="Tags"
+    placeholder="Type and press Enter"
+  />
 </template>
 
 <script setup lang="ts">
@@ -126,22 +131,10 @@ const form = reactive({
 
 ```vue
 <!-- Show spinner while fetching options -->
-<VcMultivalue
-  v-model="selected"
-  :options="options"
-  multivalue
-  :loading="isLoading"
-  label="Async options"
-/>
+<VcMultivalue v-model="selected" :options="options" multivalue :loading="isLoading" label="Async options" />
 
 <!-- Allow clearing all selected values at once -->
-<VcMultivalue
-  v-model="selected"
-  :options="options"
-  multivalue
-  clearable
-  label="Clearable selection"
-/>
+<VcMultivalue v-model="selected" :options="options" multivalue clearable label="Clearable selection" />
 ```
 
 ### Custom Rendering with Slots
@@ -265,66 +258,66 @@ const selectedArray = ref([{ id: "1", title: "Option 1" }]);
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `modelValue` | `T[]` | `[]` | Array of selected values via `v-model` |
-| `type` | `"text" \| "number" \| "integer" \| "date" \| "datetime-local" \| "color"` | `"text"` | Input type for manual entry |
-| `options` | `T[]` | `[]` | Predefined options for dictionary mode |
-| `optionValue` | `string` | `"id"` | Property name used as the option's unique key |
-| `optionLabel` | `string` | `"title"` | Property name used as the option's display text |
-| `multivalue` | `boolean` | `false` | Enables dictionary mode with dropdown |
-| `clearable` | `boolean` | `false` | Shows a clear-all button when values are selected |
-| `loading` | `boolean` | `false` | Shows a loading spinner in the field |
-| `placeholder` | `string` | -- | Input placeholder text |
-| `label` | `string` | -- | Label text above the field |
-| `tooltip` | `string` | -- | Tooltip shown on label hover |
-| `hint` | `string` | -- | Helper text displayed below the field |
-| `disabled` | `boolean` | `false` | Disables the entire field |
-| `required` | `boolean` | `false` | Shows a required asterisk on the label |
-| `name` | `string` | `"Field"` | Form field name attribute |
-| `error` | `boolean` | `false` | External error flag for styling |
-| `errorMessage` | `string` | -- | Error message text (also sets error state when truthy) |
-| `multilanguage` | `boolean` | `false` | Enables multilanguage indicator on the label |
-| `currentLanguage` | `string` | -- | Current language code for multilanguage mode |
+| Prop              | Type                                                                       | Default   | Description                                            |
+| ----------------- | -------------------------------------------------------------------------- | --------- | ------------------------------------------------------ |
+| `modelValue`      | `T[]`                                                                      | `[]`      | Array of selected values via `v-model`                 |
+| `type`            | `"text" \| "number" \| "integer" \| "date" \| "datetime-local" \| "color"` | `"text"`  | Input type for manual entry                            |
+| `options`         | `T[]`                                                                      | `[]`      | Predefined options for dictionary mode                 |
+| `optionValue`     | `string`                                                                   | `"id"`    | Property name used as the option's unique key          |
+| `optionLabel`     | `string`                                                                   | `"title"` | Property name used as the option's display text        |
+| `multivalue`      | `boolean`                                                                  | `false`   | Enables dictionary mode with dropdown                  |
+| `clearable`       | `boolean`                                                                  | `false`   | Shows a clear-all button when values are selected      |
+| `loading`         | `boolean`                                                                  | `false`   | Shows a loading spinner in the field                   |
+| `placeholder`     | `string`                                                                   | --        | Input placeholder text                                 |
+| `label`           | `string`                                                                   | --        | Label text above the field                             |
+| `tooltip`         | `string`                                                                   | --        | Tooltip shown on label hover                           |
+| `hint`            | `string`                                                                   | --        | Helper text displayed below the field                  |
+| `disabled`        | `boolean`                                                                  | `false`   | Disables the entire field                              |
+| `required`        | `boolean`                                                                  | `false`   | Shows a required asterisk on the label                 |
+| `name`            | `string`                                                                   | `"Field"` | Form field name attribute                              |
+| `error`           | `boolean`                                                                  | `false`   | External error flag for styling                        |
+| `errorMessage`    | `string`                                                                   | --        | Error message text (also sets error state when truthy) |
+| `multilanguage`   | `boolean`                                                                  | `false`   | Enables multilanguage indicator on the label           |
+| `currentLanguage` | `string`                                                                   | --        | Current language code for multilanguage mode           |
 
 ## Events
 
-| Event | Payload | Description |
-|-------|---------|-------------|
-| `update:model-value` | `T[]` | Emitted when the selected values change |
-| `close` | -- | Emitted when the dropdown closes |
-| `search` | `string` | Emitted when the user types in the dropdown search field |
+| Event                | Payload  | Description                                              |
+| -------------------- | -------- | -------------------------------------------------------- |
+| `update:model-value` | `T[]`    | Emitted when the selected values change                  |
+| `close`              | --       | Emitted when the dropdown closes                         |
+| `search`             | `string` | Emitted when the user types in the dropdown search field |
 
 ## Slots
 
-| Slot | Scope | Description |
-|------|-------|-------------|
-| `option` | `{ item: T, index: number }` | Custom rendering for dropdown options (dictionary mode) |
-| `selected-item` | `{ value: string \| number, item: T, index: number, remove: () => void }` | Custom rendering for selected value chips |
-| `prepend` | -- | Content rendered before the field area (inside the border) |
-| `append` | -- | Content rendered after the field area (inside the border) |
-| `error` | -- | Custom error message markup (replaces default VcHint) |
-| `hint` | -- | Custom hint markup (replaces default VcHint) |
+| Slot            | Scope                                                                     | Description                                                |
+| --------------- | ------------------------------------------------------------------------- | ---------------------------------------------------------- |
+| `option`        | `{ item: T, index: number }`                                              | Custom rendering for dropdown options (dictionary mode)    |
+| `selected-item` | `{ value: string \| number, item: T, index: number, remove: () => void }` | Custom rendering for selected value chips                  |
+| `prepend`       | --                                                                        | Content rendered before the field area (inside the border) |
+| `append`        | --                                                                        | Content rendered after the field area (inside the border)  |
+| `error`         | --                                                                        | Custom error message markup (replaces default VcHint)      |
+| `hint`          | --                                                                        | Custom hint markup (replaces default VcHint)               |
 
 ## CSS Variables
 
 The component uses `--multivalue-*` variables that fall back to `--select-*` tokens for visual consistency with VcSelect.
 
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `--multivalue-height` | `36px` | Minimum height of the input field |
-| `--multivalue-border-radius` | `var(--select-border-radius, 6px)` | Border radius |
-| `--multivalue-border-color` | `var(--select-border-color, var(--neutrals-300))` | Default border color |
-| `--multivalue-background-color` | `var(--select-background-color, transparent)` | Field background |
-| `--multivalue-text-color` | `var(--select-text-color, var(--neutrals-800))` | Field text color |
-| `--multivalue-chip-background-color` | `var(--select-multiple-options-background-color, var(--neutrals-100))` | Chip background |
-| `--multivalue-chip-border-color` | `var(--select-multiple-options-border-color, var(--neutrals-200))` | Chip border |
-| `--multivalue-border-color-focus` | `var(--select-border-color-focus, var(--primary-500))` | Border color on focus |
-| `--multivalue-focus-ring-color` | `var(--select-focus-ring-color, var(--primary-100))` | Focus ring color |
-| `--multivalue-border-color-error` | `var(--select-border-color-error, var(--danger-500))` | Border on error |
-| `--multivalue-error-ring-color` | `var(--select-error-ring-color, var(--danger-100))` | Error ring color |
-| `--multivalue-disabled-text-color` | `var(--neutrals-500)` | Disabled text color |
-| `--multivalue-loading-color` | `var(--select-loading-color, var(--info-500))` | Loading spinner color |
+| Variable                             | Default                                                                | Description                       |
+| ------------------------------------ | ---------------------------------------------------------------------- | --------------------------------- |
+| `--multivalue-height`                | `36px`                                                                 | Minimum height of the input field |
+| `--multivalue-border-radius`         | `var(--select-border-radius, 6px)`                                     | Border radius                     |
+| `--multivalue-border-color`          | `var(--select-border-color, var(--neutrals-300))`                      | Default border color              |
+| `--multivalue-background-color`      | `var(--select-background-color, transparent)`                          | Field background                  |
+| `--multivalue-text-color`            | `var(--select-text-color, var(--neutrals-800))`                        | Field text color                  |
+| `--multivalue-chip-background-color` | `var(--select-multiple-options-background-color, var(--neutrals-100))` | Chip background                   |
+| `--multivalue-chip-border-color`     | `var(--select-multiple-options-border-color, var(--neutrals-200))`     | Chip border                       |
+| `--multivalue-border-color-focus`    | `var(--select-border-color-focus, var(--primary-500))`                 | Border color on focus             |
+| `--multivalue-focus-ring-color`      | `var(--select-focus-ring-color, var(--primary-100))`                   | Focus ring color                  |
+| `--multivalue-border-color-error`    | `var(--select-border-color-error, var(--danger-500))`                  | Border on error                   |
+| `--multivalue-error-ring-color`      | `var(--select-error-ring-color, var(--danger-100))`                    | Error ring color                  |
+| `--multivalue-disabled-text-color`   | `var(--neutrals-500)`                                                  | Disabled text color               |
+| `--multivalue-loading-color`         | `var(--select-loading-color, var(--info-500))`                         | Loading spinner color             |
 
 ## Accessibility
 
@@ -351,4 +344,3 @@ The component uses `--multivalue-*` variables that fall back to `--select-*` tok
 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-pagination/vc-pagination.docs.md

@@ -71,7 +71,10 @@ The most common use case is paginating a data table:
 
 ```vue
 <template>
-  <VcDataTable :items="pagedItems" :columns="columns" />
+  <VcDataTable
+    :items="pagedItems"
+    :columns="columns"
+  />
   <VcPagination
     :pages="Math.ceil(totalItems / pageSize)"
     :current-page="currentPage"
@@ -143,8 +146,7 @@ Combine VcPagination with a page-size dropdown for a complete pagination toolbar
     />
     <span class="tw-text-sm tw-text-gray-500">
       {{ (currentPage - 1) * pageSize + 1 }}
-      - {{ Math.min(currentPage * pageSize, totalItems) }}
-      of {{ totalItems }}
+      - {{ Math.min(currentPage * pageSize, totalItems) }} of {{ totalItems }}
     </span>
   </div>
 </template>
@@ -243,36 +245,36 @@ currentPage.value = Math.min(currentPage.value, totalPages.value);
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `pages` | `number` | `1` | Total number of pages |
-| `currentPage` | `number` | `1` | Currently active page (1-based) |
-| `maxPages` | `number` | -- | Override visible page button count. Default: 3 on mobile, 5 on desktop |
-| `showFirstLast` | `boolean` | `true` | Show first/last page navigation buttons |
-| `variant` | `"default" \| "minimal"` | `"default"` | Visual style variant |
+| Prop            | Type                     | Default     | Description                                                            |
+| --------------- | ------------------------ | ----------- | ---------------------------------------------------------------------- |
+| `pages`         | `number`                 | `1`         | Total number of pages                                                  |
+| `currentPage`   | `number`                 | `1`         | Currently active page (1-based)                                        |
+| `maxPages`      | `number`                 | --          | Override visible page button count. Default: 3 on mobile, 5 on desktop |
+| `showFirstLast` | `boolean`                | `true`      | Show first/last page navigation buttons                                |
+| `variant`       | `"default" \| "minimal"` | `"default"` | Visual style variant                                                   |
 
 ## Events
 
-| Event | Payload | Description |
-|-------|---------|-------------|
+| Event       | Payload  | Description                                                                 |
+| ----------- | -------- | --------------------------------------------------------------------------- |
 | `itemClick` | `number` | Emitted when any page button is clicked. Payload is the 1-based page number |
 
 ## CSS Variables
 
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `--pagination-item-width` | `29px` | Width of each page button |
-| `--pagination-item-height` | `29px` | Height of each page button |
-| `--pagination-item-color` | `var(--neutrals-500)` | Default text color |
-| `--pagination-item-color-hover` | `var(--primary-500)` | Hover text color |
-| `--pagination-item-color-current` | `var(--additional-50)` | Current page text color |
-| `--pagination-item-background-color` | `var(--additional-50)` | Default background |
-| `--pagination-item-background-color-hover` | `var(--primary-100)` | Hover background |
-| `--pagination-item-background-color-current` | `var(--primary-500)` | Current page background |
-| `--pagination-item-color-disabled` | `var(--neutrals-400)` | Disabled button text color |
-| `--pagination-item-background-color-disabled` | `var(--neutrals-100)` | Disabled button background |
-| `--pagination-item-border-color` | `var(--secondary-100)` | Default border color |
-| `--pagination-focus-ring-color` | `var(--primary-100)` | Focus ring color for keyboard navigation |
+| Variable                                      | Default                | Description                              |
+| --------------------------------------------- | ---------------------- | ---------------------------------------- |
+| `--pagination-item-width`                     | `29px`                 | Width of each page button                |
+| `--pagination-item-height`                    | `29px`                 | Height of each page button               |
+| `--pagination-item-color`                     | `var(--neutrals-500)`  | Default text color                       |
+| `--pagination-item-color-hover`               | `var(--primary-500)`   | Hover text color                         |
+| `--pagination-item-color-current`             | `var(--additional-50)` | Current page text color                  |
+| `--pagination-item-background-color`          | `var(--additional-50)` | Default background                       |
+| `--pagination-item-background-color-hover`    | `var(--primary-100)`   | Hover background                         |
+| `--pagination-item-background-color-current`  | `var(--primary-500)`   | Current page background                  |
+| `--pagination-item-color-disabled`            | `var(--neutrals-400)`  | Disabled button text color               |
+| `--pagination-item-background-color-disabled` | `var(--neutrals-100)`  | Disabled button background               |
+| `--pagination-item-border-color`              | `var(--secondary-100)` | Default border color                     |
+| `--pagination-focus-ring-color`               | `var(--primary-100)`   | Focus ring color for keyboard navigation |
 
 ## Accessibility