@vc-shell/vc-app-skill 2.1.0 → 2.2.0-pr260.a8bd3a7

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

@@ -49,7 +49,7 @@ const tags = ref<Array<{ id?: string }>>([]);
 
 ### Free-form Text Entry
 
-In the default mode (`multivalue` is `false`), users type a value into the input and press **Enter** or **comma** to add it as a chip. This mode works with different input types.
+In the default mode (`multivalue` is `false`), users type a value into the input and press **Enter** to add it as a chip. This mode works with different input types.
 
 ```vue
 <VcMultivalue v-model="tags" label="Keywords" placeholder="Type and press Enter" />
@@ -305,34 +305,44 @@ const selectedArray = ref([{ id: "1", title: "Option 1" }]);
 
 ## 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 \| T[keyof T], 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-placeholder-color`           | `var(--select-placeholder-color, var(--neutrals-400))`                                          | Placeholder text color            |
+| `--multivalue-padding`                     | `10px`                                                                                          | Field inner padding               |
+| `--multivalue-dropdown-bg`                 | `var(--select-dropdown-bg, var(--additional-50))`                                               | Dropdown panel background         |
+| `--multivalue-dropdown-border`             | `var(--select-dropdown-border, var(--neutrals-200))`                                            | Dropdown panel border             |
+| `--multivalue-dropdown-shadow`             | `var(--select-dropdown-shadow, 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1))` | Dropdown panel shadow             |
+| `--multivalue-search-border-color`         | `var(--select-search-border-color, var(--neutrals-200))`                                        | Search input border color         |
+| `--multivalue-item-hover-background-color` | `var(--select-option-background-color-hover, var(--neutrals-100))`                              | Option row hover background       |
+| `--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-clear-icon-color`            | `var(--select-clear-color, var(--neutrals-400))`                                                | Clear icon color                  |
+| `--multivalue-clear-icon-color-hover`      | `var(--select-clear-color-hover, var(--neutrals-600))`                                          | Clear icon hover color            |
+| `--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-hint-color`                  | `var(--danger-500)`                                                                             | Hint/error message text 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
 
@@ -341,8 +351,7 @@ The component uses `--multivalue-*` variables that fall back to `--select-*` tok
 - Dropdown list has `role="listbox"` with a generated `id`
 - Chip remove buttons are individually focusable
 - Keyboard navigation:
-  - **Enter** / **comma** -- submits the current input as a new value
-  - **Backspace** -- removes the last chip when the input is empty
+  - **Enter** -- submits the current input as a new value (blur also submits, via `onInputSubmit`)
   - **Arrow keys** -- navigate items in the dropdown (dictionary mode)
   - **Escape** -- closes the dropdown
 - The `required` prop sets `aria-required` on the field
@@ -366,7 +375,7 @@ This behavior is powered by `BladeLoadingKey` via Vue's provide/inject. The comp
 
 - Composed of internal sub-components in `vc-multivalue/_internal/`: the chip list renderer, the dropdown panel, and the trigger input.
 - Composables are in `vc-multivalue/composables/` — chip management and dropdown open/close state are separated into composables.
-- Free-form mode: each `keydown` for Enter or comma (`','`) triggers a chip add; Backspace on empty input removes the last chip.
+- Free-form mode: Enter (`@keypress.enter`) or blur triggers a chip add. Chip removal is done only via the chip's remove button.
 - Dictionary mode: already-selected items are filtered out of the dropdown list reactively.
 - Source file: `framework/ui/components/molecules/vc-multivalue/vc-multivalue.vue`
 - Internal components: `framework/ui/components/molecules/vc-multivalue/_internal/`

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

@@ -57,7 +57,7 @@ VcPagination displays a sliding window of page number buttons centered on the cu
 - **Desktop:** 5 visible page buttons (default)
 - **Mobile:** 3 visible page buttons (default)
 
-The component detects the viewport via the injected `IsMobileKey`. You can override the window size with the `maxPages` prop regardless of viewport.
+The component detects the viewport via `useResponsive()` (`isMobile`). You can override the window size with the `maxPages` prop regardless of viewport.
 
 ```vue
 <!-- Always show exactly 3 page buttons -->
@@ -265,6 +265,7 @@ currentPage.value = Math.min(currentPage.value, totalPages.value);
 | `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                                                   |
+| `expanded`      | `boolean`                | --          | Declared but currently unused in the template                          |
 
 ## Events
 
@@ -287,6 +288,9 @@ currentPage.value = Math.min(currentPage.value, totalPages.value);
 | `--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-item-border-color-hover`        | `var(--neutrals-200)`  | Hover border color                       |
+| `--pagination-item-border-color-current`      | `var(--neutrals-200)`  | Current page border color                |
+| `--pagination-item-border-color-disabled`     | `var(--neutrals-200)`  | Disabled button border color             |
 | `--pagination-focus-ring-color`               | `var(--primary-100)`   | Focus ring color for keyboard navigation |
 
 ## Accessibility

package/runtime/knowledge/docs/ui/components/molecules/{vc-dropdown-panel/vc-dropdown-panel.docs.md → vc-popover/vc-popover.docs.md}

@@ -1,14 +1,12 @@
 ---
-title: VcDropdownPanel
+title: VcPopover
 category: components
 group: navigation
 ---
 
-# VcDropdownPanel
+# VcPopover
 
-Floating dropdown panel positioned relative to an anchor element, with header, scrollable content, and optional footer. Built on `@floating-ui/vue`.
-
-::storybook id="overlay-vcdropdownpanel--default"
+Anchored floating panel (popover) positioned relative to an anchor element, with header, scrollable content, and optional footer. Built on `@floating-ui/vue`.
 
 ## When to Use
 
@@ -27,7 +25,7 @@ Floating dropdown panel positioned relative to an anchor element, with header, s
   >
     Toggle Panel
   </button>
-  <VcDropdownPanel
+  <VcPopover
     v-model:show="open"
     :anchor-ref="anchorEl"
     title="Filter Options"
@@ -35,12 +33,12 @@ Floating dropdown panel positioned relative to an anchor element, with header, s
     <div class="tw-p-4">
       <p>Panel content here</p>
     </div>
-  </VcDropdownPanel>
+  </VcPopover>
 </template>
 
 <script setup lang="ts">
 import { ref } from "vue";
-import { VcDropdownPanel } from "@vc-shell/framework";
+import { VcPopover } from "@vc-shell/framework";
 
 const anchorEl = ref<HTMLElement | null>(null);
 const open = ref(false);
@@ -78,12 +76,10 @@ const open = ref(false);
 
 ## Common Patterns
 
-::storybook id="overlay-vcdropdownpanel--with-footer"
-
 ### Filter Panel with Footer Actions
 
 ```vue
-<VcDropdownPanel v-model:show="showFilters" :anchor-ref="filterButton" title="Filters">
+<VcPopover v-model:show="showFilters" :anchor-ref="filterButton" title="Filters">
   <div class="tw-p-4 tw-flex tw-flex-col tw-gap-2">
     <VcCheckbox v-model="filters.active">Active only</VcCheckbox>
     <VcCheckbox v-model="filters.inStock">In stock</VcCheckbox>
@@ -93,13 +89,13 @@ const open = ref(false);
     <VcButton variant="secondary" @click="resetFilters">Reset</VcButton>
     <VcButton @click="applyFilters">Apply</VcButton>
   </template>
-</VcDropdownPanel>
+</VcPopover>
 ```
 
 ### Custom Header
 
 ```vue
-<VcDropdownPanel v-model:show="open" :anchor-ref="anchor">
+<VcPopover v-model:show="open" :anchor-ref="anchor">
   <template #header="{ close }">
     <div class="tw-flex tw-items-center tw-justify-between tw-w-full tw-px-4 tw-py-3">
       <span class="tw-font-semibold">Custom Header</span>
@@ -107,13 +103,13 @@ const open = ref(false);
     </div>
   </template>
   <div class="tw-p-4">Content here</div>
-</VcDropdownPanel>
+</VcPopover>
 ```
 
 ### Scrollable List
 
 ```vue
-<VcDropdownPanel v-model:show="open" :anchor-ref="anchor" title="Long Content" :max-height="250">
+<VcPopover v-model:show="open" :anchor-ref="anchor" title="Long Content" :max-height="250">
   <div class="tw-py-1">
     <div
       v-for="item in items"
@@ -123,22 +119,23 @@ const open = ref(false);
       {{ item.name }}
     </div>
   </div>
-</VcDropdownPanel>
+</VcPopover>
 ```
 
 ## CSS Variables
 
-| Variable                             | Default                       | Description              |
-| ------------------------------------ | ----------------------------- | ------------------------ |
-| `--dropdown-panel-bg`                | `var(--additional-50)`        | Panel background         |
-| `--dropdown-panel-border-color`      | `var(--neutrals-200)`         | Border color             |
-| `--dropdown-panel-border-radius`     | `6px`                         | Corner radius            |
-| `--dropdown-panel-shadow`            | `0 4px 16px rgba(0,0,0,0.08)` | Box shadow               |
-| `--dropdown-panel-z-index`           | `10001`                       | Z-index                  |
-| `--dropdown-panel-title-color`       | `var(--neutrals-900)`         | Title text color         |
-| `--dropdown-panel-close-color`       | `var(--neutrals-400)`         | Close button color       |
-| `--dropdown-panel-close-hover-color` | `var(--neutrals-600)`         | Close button hover color |
-| `--dropdown-panel-footer-bg`         | `var(--neutrals-50)`          | Footer background        |
+| Variable                         | Default                       | Description              |
+| -------------------------------- | ----------------------------- | ------------------------ |
+| `--vc-popover-bg`                | `var(--additional-50)`        | Panel background         |
+| `--vc-popover-border-color`      | `var(--neutrals-200)`         | Border color             |
+| `--vc-popover-border-radius`     | `6px`                         | Corner radius            |
+| `--vc-popover-shadow`            | `0 4px 16px rgba(0,0,0,0.08)` | Box shadow               |
+| `--vc-popover-title-color`       | `var(--neutrals-900)`         | Title text color         |
+| `--vc-popover-close-color`       | `var(--neutrals-400)`         | Close button color       |
+| `--vc-popover-close-hover-color` | `var(--neutrals-600)`         | Close button hover color |
+| `--vc-popover-footer-bg`         | `var(--neutrals-50)`          | Footer background        |
+
+The panel's z-index comes from the global `--z-critical-floating-panel` token and is not overridable per-instance.
 
 ## Accessibility
 

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

@@ -66,15 +66,16 @@ 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                                                                         |
+| `ariaLabel`              | `string`             | --             | Accessible name for the input when no visible `label` is set. Applied only when `label` is empty. |
 
 ## Common Patterns
 

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

@@ -642,36 +642,61 @@ Don't forget `:key` with cascading selects, otherwise the second select will ret
 
 ## 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, label, 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
 
 ```css
 :root {
   --select-height: 36px;
-  --select-height-small: 28px;
-  --select-border-radius: 4px;
+  --select-height-small: 32px;
+  --select-border-radius: 6px;
   --select-border-color: var(--neutrals-300);
-  --select-border-color-focus: var(--primary-100);
-  --select-border-color-error: var(--danger-500);
   --select-text-color: var(--neutrals-800);
-  --select-padding: 10px;
+  --select-padding: 12px;
+
   --select-background-color: var(--additional-50);
-  --select-background-color-disabled: var(--neutrals-200);
+
   --select-placeholder-color: var(--neutrals-400);
-  --select-chevron-color: var(--primary-500);
-  --select-clear-color: var(--primary-500);
+
+  --select-chevron-color: var(--neutrals-500);
+  --select-chevron-color-hover: var(--neutrals-700);
+  --select-clear-color: var(--neutrals-400);
+  --select-clear-color-hover: var(--neutrals-600);
+
+  --select-loading-color: var(--info-500);
+
+  --select-option-background-color-hover: var(--neutrals-100);
+  --select-option-background-color-selected: var(--accent-100);
+  --select-option-check-color: var(--primary-500);
+
+  --select-multiple-options-background-color: var(--neutrals-100);
+  --select-multiple-options-border-color: var(--neutrals-200);
+
   --select-dropdown-bg: var(--additional-50);
-  --select-option-background-color-hover: var(--accent-100);
-  --select-option-background-color-selected: var(--accent-200);
+  --select-dropdown-border: var(--neutrals-200);
+  --select-dropdown-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+
+  --select-search-border-color: var(--neutrals-200);
+  --select-search-background-color: var(--additional-50);
+  --select-border-color-input: var(--secondary-200);
+
+  --select-border-color-focus: var(--primary-500);
+  --select-focus-ring-color: var(--primary-100);
+
+  --select-background-color-disabled: var(--neutrals-200);
+  --select-disabled-text-color: var(--neutrals-500);
+
+  --select-border-color-error: var(--danger-500);
+  --select-error-ring-color: var(--danger-100);
 }
 ```
 

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

@@ -50,21 +50,21 @@ 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`                                 | --       | Accessible label for the slider region. Falls back to `"Content carousel"` when unset |
 
 ## Common Patterns
 
 ### Fixed Slides Per View
 
 ```vue
-<VcSlider :slides="items" :slides-per-view="3" navigation :space-between-slides="20">
+<VcSlider :slides="items" :slides-per-view="'3'" navigation :space-between-slides="20">
   <template #default="{ slide }">
     <ProductCard :product="slide" />
   </template>
@@ -96,7 +96,7 @@ const products = [
 ### Single Slide View
 
 ```vue
-<VcSlider :slides="banners" :slides-per-view="1" navigation>
+<VcSlider :slides="banners" :slides-per-view="'1'" navigation>
   <template #default="{ slide }">
     <img :src="slide.imageUrl" class="tw-w-full tw-rounded" />
   </template>
@@ -140,7 +140,7 @@ When placed inside a `VcBlade` with `loading=true`, the component automatically
 
 - VcSlider wraps the `swiper/vue` `<Swiper>` / `<SwiperSlide>` components with the `Navigation` module. Navigation buttons are custom DOM elements (`.vc-slider__prev` / `.vc-slider__next`) referenced by Swiper's `navigation.prevEl` / `nextEl` selectors.
 - `overflow` prop toggles `overflow: visible` on the swiper container, allowing slides to bleed outside bounds — useful for "peek" effects.
-- `slidesPerView="auto"` (default) lets each slide size itself from content. Pass a number for fixed-count layouts.
+- `slidesPerView="auto"` (default) lets each slide size itself from content. Pass a numeric string (e.g. `"3"`) for fixed-count layouts.
 - The `slides` prop accepts any array. Each item is exposed as `{ slide }` in the default scoped slot.
 - Source file: `framework/ui/components/molecules/vc-slider/vc-slider.vue`
 

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

@@ -240,20 +240,21 @@ const isActive = ref(true);
 
 ## Props
 
-| Prop           | Type                   | Default | Description                                          |
-| -------------- | ---------------------- | ------- | ---------------------------------------------------- |
-| `modelValue`   | `boolean \| undefined` | --      | Bound value via `v-model`                            |
-| `label`        | `string`               | --      | Label text above the switch                          |
-| `hint`         | `string`               | --      | Helper text displayed below the switch               |
-| `labelTooltip` | `string`               | --      | Tooltip shown on the label info icon                 |
-| `tooltip`      | `string`               | --      | **Deprecated.** Use `hint` or `labelTooltip` instead |
-| `trueValue`    | `boolean`              | `true`  | Value that represents the checked state              |
-| `falseValue`   | `boolean`              | `false` | Value that represents the unchecked state            |
-| `disabled`     | `boolean`              | `false` | Disables the switch                                  |
-| `required`     | `boolean`              | `false` | Shows a required indicator on the label              |
-| `error`        | `boolean`              | `false` | Enables error styling                                |
-| `errorMessage` | `string`               | --      | Error message displayed below the switch             |
-| `name`         | `string`               | --      | HTML name attribute for the hidden input             |
+| Prop           | Type                   | Default | Description                                                                                        |
+| -------------- | ---------------------- | ------- | -------------------------------------------------------------------------------------------------- |
+| `modelValue`   | `boolean \| undefined` | --      | Bound value via `v-model`                                                                          |
+| `label`        | `string`               | --      | Label text above the switch                                                                        |
+| `hint`         | `string`               | --      | Helper text displayed below the switch                                                             |
+| `labelTooltip` | `string`               | --      | Tooltip shown on the label info icon                                                               |
+| `tooltip`      | `string`               | --      | **Deprecated.** Use `hint` or `labelTooltip` instead                                               |
+| `trueValue`    | `boolean`              | `true`  | Value that represents the checked state                                                            |
+| `falseValue`   | `boolean`              | `false` | Value that represents the unchecked state                                                          |
+| `disabled`     | `boolean`              | `false` | Disables the switch                                                                                |
+| `required`     | `boolean`              | `false` | Shows a required indicator on the label                                                            |
+| `error`        | `boolean`              | `false` | Enables error styling                                                                              |
+| `errorMessage` | `string`               | --      | Error message displayed below the switch                                                           |
+| `ariaLabel`    | `string`               | --      | Accessible name for the switch when no visible `label` is set. Applied only when `label` is empty. |
+| `name`         | `string`               | --      | Field name used for validation/id generation (not rendered as an HTML name attribute on the input) |
 
 ## Events
 

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

@@ -236,21 +236,21 @@ const description = ref<string>("");
 
 ## Props
 
-| Prop              | Type      | Default     | Description                                     |
-| ----------------- | --------- | ----------- | ----------------------------------------------- |
-| `modelValue`      | `string`  | `undefined` | Bound value via `v-model`                       |
-| `label`           | `string`  | --          | Label text displayed above the textarea         |
-| `placeholder`     | `string`  | --          | Placeholder text inside the empty textarea      |
-| `hint`            | `string`  | --          | Helper text displayed below the field           |
-| `tooltip`         | `string`  | --          | Tooltip on the label info icon                  |
-| `maxlength`       | `string`  | `"1024"`    | Maximum character count (native HTML attribute) |
-| `required`        | `boolean` | `false`     | Shows a required indicator on the label         |
-| `error`           | `boolean` | `false`     | Enables error styling (red border + ring)       |
-| `errorMessage`    | `string`  | --          | Error message text below the field              |
-| `disabled`        | `boolean` | `false`     | Disables the textarea                           |
-| `name`            | `string`  | `"Field"`   | HTML name attribute                             |
-| `multilanguage`   | `boolean` | `false`     | Shows language badge on the label               |
-| `currentLanguage` | `string`  | --          | Language code displayed in the badge            |
+| Prop              | Type      | Default     | Description                                                                                          |
+| ----------------- | --------- | ----------- | ---------------------------------------------------------------------------------------------------- |
+| `modelValue`      | `string`  | `undefined` | Bound value via `v-model`                                                                            |
+| `label`           | `string`  | --          | Label text displayed above the textarea                                                              |
+| `placeholder`     | `string`  | --          | Placeholder text inside the empty textarea                                                           |
+| `hint`            | `string`  | --          | Helper text displayed below the field                                                                |
+| `tooltip`         | `string`  | --          | Tooltip on the label info icon                                                                       |
+| `maxlength`       | `string`  | `"1024"`    | Maximum character count (native HTML attribute)                                                      |
+| `required`        | `boolean` | `false`     | Shows a required indicator on the label                                                              |
+| `error`           | `boolean` | `false`     | Enables error styling (red border + ring)                                                            |
+| `errorMessage`    | `string`  | --          | Error message text below the field                                                                   |
+| `disabled`        | `boolean` | `false`     | Disables the textarea                                                                                |
+| `name`            | `string`  | `"Field"`   | Field name used for validation/id generation (not applied as an HTML name attribute on the textarea) |
+| `multilanguage`   | `boolean` | `false`     | Shows language badge on the label                                                                    |
+| `currentLanguage` | `string`  | --          | Language code displayed in the badge                                                                 |
 
 ## Events
 

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

@@ -148,7 +148,7 @@ Toasts use Sonner-style stacking: the newest toast is in front, older toasts sca
 
 On touch devices, horizontal swipe dismisses toasts (threshold: 45px or velocity > 0.11px/ms).
 
-The auto-dismiss timer (default 5000ms) pauses on hover. Set `timeout: false` for persistent toasts.
+The auto-dismiss timer (default 3000ms) pauses on hover. Set `timeout: false` for persistent toasts.
 
 ```ts
 notification("Quick flash", { timeout: 1500 });
@@ -246,11 +246,11 @@ These props are used internally by the notification system. You rarely need to s
 
 | Prop             | Type                                             | Default        | Description                                            |
 | ---------------- | ------------------------------------------------ | -------------- | ------------------------------------------------------ |
-| `content`        | `string \| Component`                            | --             | Notification message or custom component               |
+| `content`        | `string \| VNode \| Component`                   | --             | Notification message or custom component               |
 | `notificationId` | `number \| string`                               | --             | Unique identifier                                      |
 | `updateId`       | `number \| string`                               | --             | ID for update tracking                                 |
 | `type`           | `"default" \| "success" \| "error" \| "warning"` | `"default"`    | Notification type (determines icon and accent color)   |
-| `timeout`        | `number \| boolean`                              | `5000`         | Auto-dismiss delay in ms, or `false` to disable        |
+| `timeout`        | `number \| boolean`                              | `3000`         | Auto-dismiss delay in ms, or `false` to disable        |
 | `pauseOnHover`   | `boolean`                                        | `true`         | Pause timeout while mouse hovers over the toast        |
 | `limit`          | `number`                                         | --             | Maximum number of visible notifications                |
 | `position`       | `NotificationPosition`                           | `"top-center"` | Screen position for the toast                          |
@@ -269,16 +269,18 @@ These props are used internally by the notification system. You rarely need to s
 
 ## Notification Service Methods
 
-| Method                       | Signature                                                                           | Description                     |
-| ---------------------------- | ----------------------------------------------------------------------------------- | ------------------------------- |
-| `notification()`             | `(message: string \| Component, options?: NotificationOptions) => string \| number` | Show a default notification     |
-| `notification.success()`     | `(message: string \| Component) => string \| number`                                | Show a success notification     |
-| `notification.error()`       | `(message: string \| Component) => string \| number`                                | Show an error notification      |
-| `notification.warning()`     | `(message: string \| Component) => string \| number`                                | Show a warning notification     |
-| `notification.update()`      | `(id, options: Partial<NotificationOptions>) => void`                               | Update an existing notification |
-| `notification.remove()`      | `(id: string \| number) => void`                                                    | Remove a specific notification  |
-| `notification.clearAll()`    | `() => void`                                                                        | Remove all notifications        |
-| `notification.setPosition()` | `(position: NotificationPosition) => void`                                          | Change the global position      |
+| Method                         | Signature                                                                                    | Description                                                                              |
+| ------------------------------ | -------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
+| `notification()`               | `(message: string \| VNode \| Component, options?: NotificationOptions) => string \| number` | Show a default notification                                                              |
+| `notification.success()`       | `(message: string \| VNode \| Component, options?: NotificationOptions) => string \| number` | Show a success notification                                                              |
+| `notification.error()`         | `(message: string \| VNode \| Component, options?: NotificationOptions) => string \| number` | Show an error notification                                                               |
+| `notification.warning()`       | `(message: string \| VNode \| Component, options?: NotificationOptions) => string \| number` | Show a warning notification                                                              |
+| `notification.update()`        | `(id: string \| number, options: NotificationOptions) => string \| number`                   | Update an existing notification; returns the id                                          |
+| `notification.remove()`        | `(id?: string \| number) => void`                                                            | Remove a specific notification; omitting the id removes all (equivalent to `clearAll()`) |
+| `notification.clearAll()`      | `() => void`                                                                                 | Remove all notifications                                                                 |
+| `notification.clearPosition()` | `(position: NotificationPosition) => void`                                                   | Remove all notifications in one position                                                 |
+| `notification.setPosition()`   | `(position: NotificationPosition) => void`                                                   | Change the global position                                                               |
+| `notification.debug()`         | `() => { active; defaultOptions }`                                                           | Diagnostics helper: logs active toasts and default options, returns them                 |
 
 ## CSS Variables
 

package/runtime/knowledge/docs/ui/components/organisms/vc-app/vc-app.docs.md

@@ -89,6 +89,10 @@ VcApp orchestrates several internal systems:
 
 On desktop viewports, VcApp renders a collapsible sidebar on the left with navigation menu items, user info in the footer, and the blade workspace on the right. On mobile viewports, the sidebar is replaced by a top bar with a hamburger menu that opens a slide-over navigation panel.
 
+### Environment Indicator
+
+VcApp renders a `VcEnvironmentBanner` when an environment name is detected via `useEnvironmentName()` (derived from the current hostname) and the environment is not ignored. The banner surfaces the environment name and color, making it obvious when you are working against a non-production instance.
+
 ### Sidebar Menu Search
 
 ::storybook id="layout-vcapp--with-sidebar-search" height="500"
@@ -140,7 +144,7 @@ If you use the `menu` slot to provide a custom menu, the `searchQuery` prop is p
 
 ### Dynamic Module Registration
 
-Modules registered via `useDynamicModules()` are loaded at runtime. Each module can contribute menu items, blades, toolbar actions, settings pages, and dashboard widgets. VcApp handles module loading errors gracefully by displaying notification toasts.
+Modules are provided/consumed via the `DynamicModulesKey` injection (see `injection-keys.ts` and `useShellBootstrap`) and loaded at runtime. Each module can contribute menu items, blades, toolbar actions, settings pages, and dashboard widgets. VcApp handles module loading errors gracefully by displaying notification toasts.
 
 ### App Hub
 

package/runtime/knowledge/docs/ui/components/organisms/vc-auth-layout/vc-auth-layout.docs.md

@@ -77,6 +77,24 @@ The card is centered both vertically and horizontally. On narrow viewports, it s
 
 The layout uses a `<main>` element as the page landmark and an `<h2>` for the card title, providing a correct heading hierarchy for screen readers and SEO.
 
+### App Version Footer
+
+When the active route sets `meta.appVersion`, VcAuthLayout renders that string below the card (in a `.vc-auth-layout__version` element). Set it via your Vue Router route meta; when absent, nothing is rendered.
+
+## CSS Custom Properties
+
+| Variable                       | Default                                                         | Description                    |
+| ------------------------------ | --------------------------------------------------------------- | ------------------------------ |
+| `--auth-layout-bg`             | `var(--neutrals-100)`                                           | Page background                |
+| `--auth-layout-card-bg`        | `var(--additional-50)`                                          | Card background                |
+| `--auth-layout-card-border`    | `var(--neutrals-200)`                                           | Card border color              |
+| `--auth-layout-card-shadow`    | `0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)` | Card shadow                    |
+| `--auth-layout-card-radius`    | `12px`                                                          | Card corner radius             |
+| `--auth-layout-card-max-width` | `420px`                                                         | Card / footer max width        |
+| `--auth-layout-title-color`    | `var(--neutrals-900)`                                           | Title text color               |
+| `--auth-layout-subtitle-color` | `var(--neutrals-400)`                                           | Subtitle and footer text color |
+| `--auth-layout-version-color`  | `var(--neutrals-400)`                                           | Version string text color      |
+
 ## Recipe: Sign-In Page with SSO
 
 ```vue