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

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

@@ -21,7 +21,7 @@ A headless, accessible dropdown primitive for building menus and listboxes. Prov
 When NOT to use:
 
 - For form field selection -- use [VcSelect](../vc-select/)
-- For rich panel content with header/footer/scrollable body -- use [VcDropdownPanel](../vc-dropdown-panel/)
+- For rich panel content with header/footer/scrollable body -- use [VcPopover](../vc-popover/)
 - For navigation menus -- use [VcMenu](../vc-menu/)
 
 ## Quick Start
@@ -307,28 +307,29 @@ By default, `padded` is `true`, which adds compact padding and rounded item back
 
 ## Props
 
-| Prop                  | Type                                           | Default                         | Description                                            |
-| --------------------- | ---------------------------------------------- | ------------------------------- | ------------------------------------------------------ |
-| `modelValue`          | `boolean`                                      | `false`                         | Controls open/closed state via `v-model`               |
-| `items`               | `T[]`                                          | `[]`                            | Items to render in the dropdown                        |
-| `emptyText`           | `string`                                       | `""`                            | Text shown when items array is empty                   |
-| `itemText`            | `(item: T) => string`                          | --                              | Maps an item to display text (default renderer only)   |
-| `isItemActive`        | `(item: T) => boolean`                         | --                              | Marks the currently active item (highlighted state)    |
-| `itemKey`             | `(item: T, index: number) => string \| number` | index                           | Unique key function for items                          |
-| `floating`            | `boolean`                                      | `false`                         | Enable floating positioning via `@floating-ui`         |
-| `teleport`            | `boolean`                                      | --                              | Force teleport to body (defaults to match `floating`)  |
-| `teleportTo`          | `string \| HTMLElement`                        | --                              | Custom teleport target                                 |
-| `placement`           | `Placement`                                    | `"bottom"`                      | Floating UI placement                                  |
-| `offset`              | `{ mainAxis?: number; crossAxis?: number }`    | `{ mainAxis: 0, crossAxis: 0 }` | Offset from the trigger element                        |
-| `variant`             | `"default" \| "secondary"`                     | `"default"`                     | Visual style variant                                   |
-| `maxHeight`           | `number \| string`                             | `300`                           | Maximum panel height (number = px, string = CSS value) |
-| `role`                | `"menu" \| "listbox"`                          | `"menu"`                        | ARIA role for the dropdown panel                       |
-| `closeOnClickOutside` | `boolean`                                      | `true`                          | Close when clicking outside the dropdown               |
-| `closeOnEscape`       | `boolean`                                      | `true`                          | Close on Escape key press                              |
-| `closeOnSelect`       | `boolean`                                      | `false`                         | Close after selecting an item                          |
-| `autoFocusPanel`      | `boolean`                                      | `true`                          | Focus the panel element when opened                    |
-| `padded`              | `boolean`                                      | `true`                          | Apply compact padding and rounded item backgrounds     |
-| `zIndex`              | `number`                                       | `10000`                         | Z-index for the floating panel                         |
+| Prop                  | Type                                           | Default                         | Description                                                    |
+| --------------------- | ---------------------------------------------- | ------------------------------- | -------------------------------------------------------------- |
+| `modelValue`          | `boolean`                                      | `false`                         | Controls open/closed state via `v-model`                       |
+| `items`               | `T[]`                                          | `[]`                            | Items to render in the dropdown                                |
+| `emptyText`           | `string`                                       | `""`                            | Text shown when items array is empty                           |
+| `itemText`            | `(item: T) => string`                          | --                              | Maps an item to display text (default renderer only)           |
+| `isItemActive`        | `(item: T) => boolean`                         | --                              | Marks the currently active item (highlighted state)            |
+| `itemKey`             | `(item: T, index: number) => string \| number` | index                           | Unique key function for items                                  |
+| `floating`            | `boolean`                                      | `false`                         | Enable floating positioning via `@floating-ui`                 |
+| `teleport`            | `boolean`                                      | --                              | Force teleport to body (defaults to match `floating`)          |
+| `teleportTo`          | `string \| HTMLElement`                        | --                              | Custom teleport target                                         |
+| `placement`           | `Placement`                                    | `"bottom"`                      | Floating UI placement                                          |
+| `offset`              | `{ mainAxis?: number; crossAxis?: number }`    | `{ mainAxis: 0, crossAxis: 0 }` | Offset from the trigger element                                |
+| `variant`             | `"default" \| "secondary"`                     | `"default"`                     | Visual style variant                                           |
+| `maxHeight`           | `number \| string`                             | `300`                           | Maximum panel height (number = px, string = CSS value)         |
+| `role`                | `"menu" \| "listbox"`                          | `"menu"`                        | ARIA role for the dropdown panel                               |
+| `ariaLabel`           | `string`                                       | --                              | Accessible name for the panel. Required for a named `listbox`. |
+| `closeOnClickOutside` | `boolean`                                      | `true`                          | Close when clicking outside the dropdown                       |
+| `closeOnEscape`       | `boolean`                                      | `true`                          | Close on Escape key press                                      |
+| `closeOnSelect`       | `boolean`                                      | `false`                         | Close after selecting an item                                  |
+| `autoFocusPanel`      | `boolean`                                      | `true`                          | Focus the panel element when opened                            |
+| `padded`              | `boolean`                                      | `true`                          | Apply compact padding and rounded item backgrounds             |
+| `zIndex`              | `number`                                       | `9300`                          | Z-index for the floating panel                                 |
 
 ## Events
 
@@ -341,12 +342,12 @@ By default, `padded` is `true`, which adds compact padding and rounded item back
 
 ## Slots
 
-| Slot              | Props                                                                            | Description                       |
-| ----------------- | -------------------------------------------------------------------------------- | --------------------------------- |
-| `trigger`         | `{ isActive: boolean, toggle: () => void, open: () => void, close: () => void }` | Custom trigger element            |
-| `item`            | `{ item: T, click: () => void }`                                                 | Custom item rendering             |
-| `empty`           | --                                                                               | Content when items array is empty |
-| `items-container` | `{ items: T[], close: () => void }`                                              | Full control over the items list  |
+| Slot              | Props                                                                                             | Description                                                                                                                                                                                                                                                                   |
+| ----------------- | ------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `trigger`         | `{ isActive: boolean, toggle: () => void, open: () => void, close: () => void, panelId: string }` | Custom trigger element. Render a real interactive control (e.g. `VcButton`) that calls `toggle` — the wrapper is a passive container, so nesting a button inside a `role="button"` wrapper is avoided. Use `panelId` to wire `aria-controls`/`aria-expanded` on your control. |
+| `item`            | `{ item: T, click: () => void }`                                                                  | Custom item rendering                                                                                                                                                                                                                                                         |
+| `empty`           | --                                                                                                | Content when items array is empty                                                                                                                                                                                                                                             |
+| `items-container` | `{ items: T[], close: () => void }`                                                               | Full control over the items list                                                                                                                                                                                                                                              |
 
 ## CSS Variables
 
@@ -364,8 +365,8 @@ By default, `padded` is `true`, which adds compact padding and rounded item back
 
 ## Accessibility
 
-- **Trigger element**: has `role="button"`, `tabindex="0"`, `aria-expanded`, and `aria-haspopup` set to the dropdown role
-- **Panel**: uses the specified `role` attribute (`"menu"` or `"listbox"`)
+- **Trigger element**: a passive wrapper — the interactive control lives in the `#trigger` slot. Render a real `<button>` (e.g. `VcButton`) that calls `toggle`; wire `aria-expanded`/`aria-haspopup`/`aria-controls` (via the slot's `panelId`) on it. This avoids nesting interactive controls (WCAG 4.1.2).
+- **Panel**: uses the specified `role` attribute (`"menu"` or `"listbox"`), is keyboard-focusable (`tabindex="0"`), and takes an accessible name from `ariaLabel`
 - **Items**: use `role="menuitem"` (menu mode) or `role="option"` (listbox mode)
 - **Active item tracking**: `aria-activedescendant` on the panel tracks the currently focused item
 - **Listbox selection**: `aria-selected` is set on items when `role="listbox"` and `isItemActive` returns `true`
@@ -379,7 +380,7 @@ By default, `padded` is `true`, which adds compact padding and rounded item back
 
 ## Related Components
 
-- [VcDropdownPanel](../vc-dropdown-panel/) -- floating panel with header, footer, and scrollable content
+- [VcPopover](../vc-popover/) -- floating panel with header, footer, and scrollable content
 - [VcSelect](../vc-select/) -- form field dropdown for selecting values with label and validation
 - [VcMenu](../vc-menu/) -- sidebar navigation menu
 
@@ -393,6 +394,6 @@ By default, `padded` is `true`, which adds compact padding and rounded item back
 - Keyboard navigation (`ArrowDown`, `ArrowUp`, `Home`, `End`, `Enter`/`Space`, `Escape`) is handled in `onPanelKeydown`. Escape also attaches a document-level listener when the dropdown is open to catch events that bubble past the panel.
 - `syncFocusedIndex` is called on open to pre-focus the active item (via `isItemActive`) or the first item.
 - The `VcDropdownItem` internal sub-component (in `_internal/VcDropdownItem.vue`) is used by `VcBreadcrumbs` for its overflow menu items.
-- Default `zIndex` is `9300` (matches the CSS custom property `--z-critical-dropdown`).
+- Default `zIndex` is `9300` (matches the CSS custom property `--z-critical-floating-panel`).
 
 <!-- internal:end -->

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

@@ -56,7 +56,7 @@ The editor header provides four view modes plus a fullscreen toggle:
 | **Split**            | Side-by-side editor + source view for simultaneous editing |
 | **Fullscreen**       | Any mode expanded to fill the entire viewport              |
 
-The editor automatically detects whether content is Markdown or HTML based on pattern analysis and outputs in the same format. HTML content is auto-formatted with Prettier in source/split views.
+The editor automatically detects whether content is Markdown or HTML based on pattern analysis and outputs in the same format. HTML content is auto-formatted with js-beautify in source/split views.
 
 !!! note "Content format is auto-detected"
 VcEditor detects whether content is Markdown or HTML and outputs in the same format. If you pass Markdown input, you will get Markdown output. If you need HTML output, start with HTML content.
@@ -179,7 +179,7 @@ const form = reactive({ description: "" });
 </script>
 ```
 
-> **Note:** VcEditor uses `errorMessage` directly (no separate `error` boolean prop needed). The error state is derived from the truthiness of `errorMessage`.
+> **Note:** VcEditor inherits an `error` boolean prop (from `IFormFieldProps`), but it is unused — it has no effect. Error state is derived solely from the truthiness of `errorMessage`.
 
 ## Recipes
 
@@ -210,7 +210,7 @@ const form = reactive({ description: "" });
 ### 2. Using error prop instead of errorMessage
 
 ```vue
-<!-- WRONG: VcEditor does not have a separate `error` boolean prop -->
+<!-- WRONG: the inherited `error` prop is inert on VcEditor and has no effect -->
 <VcEditor v-model="content" :error="true" error-message="Required" />
 
 <!-- CORRECT: errorMessage alone controls the error state -->
@@ -233,30 +233,31 @@ const content = ref("<h1>Title</h1>");
 
 ## Props
 
-| Prop              | Type                  | Default     | Description                                                   |
-| ----------------- | --------------------- | ----------- | ------------------------------------------------------------- |
-| `modelValue`      | `string`              | `""`        | Content string via `v-model` (Markdown or HTML)               |
-| `label`           | `string`              | --          | Label text above the editor                                   |
-| `placeholder`     | `string`              | --          | Placeholder when editor is empty                              |
-| `disabled`        | `boolean`             | `false`     | Disables all editing                                          |
-| `required`        | `boolean`             | `false`     | Shows a required asterisk on the label                        |
-| `tooltip`         | `string`              | --          | Tooltip text shown on label hover                             |
-| `errorMessage`    | `string`              | --          | Error message below the editor (also activates error styling) |
-| `name`            | `string`              | --          | Form field name attribute                                     |
-| `toolbar`         | `ToolbarNames[]`      | all buttons | Array of toolbar button names to show                         |
-| `maxlength`       | `number`              | --          | Character limit (counter shown in source/split mode)          |
-| `assetsFolder`    | `string`              | --          | API folder path for image uploads                             |
-| `extensions`      | `Extension[]`         | --          | Additional TipTap extensions                                  |
-| `customButtons`   | `CustomToolbarItem[]` | --          | Plugin toolbar buttons or dropdowns                           |
-| `multilanguage`   | `boolean`             | `false`     | Enables multilanguage indicator on the label                  |
-| `currentLanguage` | `string`              | --          | Current language code for multilanguage mode                  |
+| Prop              | Type                  | Default     | Description                                                       |
+| ----------------- | --------------------- | ----------- | ----------------------------------------------------------------- |
+| `modelValue`      | `string`              | `""`        | Content string via `v-model` (Markdown or HTML)                   |
+| `label`           | `string`              | --          | Label text above the editor                                       |
+| `placeholder`     | `string`              | --          | Placeholder when editor is empty                                  |
+| `disabled`        | `boolean`             | `false`     | Disables all editing                                              |
+| `required`        | `boolean`             | `false`     | Shows a required asterisk on the label                            |
+| `tooltip`         | `string`              | --          | Tooltip text shown on label hover                                 |
+| `errorMessage`    | `string`              | --          | Error message below the editor (also activates error styling)     |
+| `error`           | `boolean`             | `false`     | Inherited from `IFormFieldProps`; accepted but unused (no effect) |
+| `name`            | `string`              | --          | Form field name attribute                                         |
+| `toolbar`         | `ToolbarNames[]`      | all buttons | Array of toolbar button names to show                             |
+| `maxlength`       | `number`              | --          | Character limit (counter shown in source/split mode)              |
+| `assetsFolder`    | `string`              | --          | API folder path for image uploads                                 |
+| `extensions`      | `Extension[]`         | --          | Additional TipTap extensions                                      |
+| `customButtons`   | `CustomToolbarItem[]` | --          | Plugin toolbar buttons or dropdowns                               |
+| `multilanguage`   | `boolean`             | `false`     | Enables multilanguage indicator on the label                      |
+| `currentLanguage` | `string`              | --          | Current language code for multilanguage mode                      |
 
 ## Events
 
-| Event               | Payload               | Description                                                   |
-| ------------------- | --------------------- | ------------------------------------------------------------- |
-| `update:modelValue` | `string \| undefined` | Emitted when content changes (from WYSIWYG or source editing) |
-| `upload-image`      | --                    | Emitted when image upload is triggered                        |
+| Event               | Payload               | Description                                                                                                                              |
+| ------------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| `update:modelValue` | `string \| undefined` | Emitted when content changes (from WYSIWYG or source editing)                                                                            |
+| `upload-image`      | --                    | Declared but currently never emitted; image upload is handled internally via the hidden file input and inserted directly into the editor |
 
 ## Slots
 
@@ -277,6 +278,7 @@ const content = ref("<h1>Title</h1>");
 | `--vc-editor-text-disabled`       | `var(--neutrals-500)`                                     | Text color when disabled                             |
 | `--vc-editor-background-disabled` | `var(--neutrals-200)`                                     | Background when disabled                             |
 | `--vc-editor-focus-border`        | `var(--primary-500)`                                      | Border color on focus                                |
+| `--vc-editor-focus-shadow`        | `var(--primary-500)`                                      | Focus shadow color token                             |
 | `--vc-editor-focus-ring-color`    | `color-mix(in srgb, var(--primary-500) 30%, transparent)` | Focus ring color                                     |
 | `--vc-editor-error-border`        | `var(--danger-500)`                                       | Border color on error                                |
 | `--vc-editor-error-ring-color`    | `rgba(239, 68, 68, 0.2)`                                  | Error ring color                                     |

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

@@ -44,15 +44,16 @@ VcField renders without form-field chrome (borders, focus rings, placeholders) a
 
 ## Key Props
 
-| Prop          | Type                                                  | Default      | Description                                               |
-| ------------- | ----------------------------------------------------- | ------------ | --------------------------------------------------------- |
-| `label`       | `string`                                              | --           | Field label text                                          |
-| `modelValue`  | `string \| number \| Date`                            | --           | Field content to display                                  |
-| `type`        | `"text" \| "date" \| "date-ago" \| "link" \| "email"` | `"text"`     | Content type for formatting                               |
-| `copyable`    | `boolean`                                             | `false`      | Show a copy-to-clipboard button                           |
-| `orientation` | `"vertical" \| "horizontal"`                          | `"vertical"` | Layout direction of label and value                       |
-| `aspectRatio` | `[number, number]`                                    | `[1, 1]`     | Column width ratio for label and value in horizontal mode |
-| `tooltip`     | `string`                                              | --           | Tooltip shown on the label                                |
+| Prop           | Type                                                  | Default      | Description                                                                          |
+| -------------- | ----------------------------------------------------- | ------------ | ------------------------------------------------------------------------------------ |
+| `label`        | `string`                                              | --           | Field label text                                                                     |
+| `modelValue`   | `string \| number \| Date`                            | --           | Field content to display                                                             |
+| `displayValue` | `string`                                              | --           | Text shown instead of `modelValue`; `modelValue` is still used for copy/link actions |
+| `type`         | `"text" \| "date" \| "date-ago" \| "link" \| "email"` | `"text"`     | Content type for formatting                                                          |
+| `copyable`     | `boolean`                                             | `false`      | Show a copy-to-clipboard button                                                      |
+| `orientation`  | `"vertical" \| "horizontal"`                          | `"vertical"` | Layout direction of label and value                                                  |
+| `aspectRatio`  | `[number, number]`                                    | `[1, 1]`     | Column width ratio for label and value in horizontal mode                            |
+| `tooltip`      | `string`                                              | --           | Tooltip shown on the label                                                           |
 
 ## Type Formatting
 
@@ -185,13 +186,11 @@ const displayFields = computed(() => [
 
 ## CSS Variables
 
-| Variable      | Default  | Description                                  |
-| ------------- | -------- | -------------------------------------------- |
-| `--field-gap` | `0.5rem` | Gap between label and value in vertical mode |
+VcField exposes no CSS custom properties. The gap between label and value is fixed in the component: `0.25rem` in vertical mode and `0.5rem` in horizontal mode.
 
 ## Accessibility
 
-- The label is rendered via `VcLabel`, which associates with the field content
+- The label is rendered via `VcLabel` for consistent styling; there is no `for`/`id` association to the value (the value is not a focusable form control)
 - The copy button has `aria-label="Copy to clipboard"`
 - Provides visual feedback (checkmark icon) after successful copy
 
@@ -224,7 +223,6 @@ In `orientation="horizontal"` the component reserves the `aspectRatio[0]` track
 
 - [VcInput](../vc-input/) -- editable text field (use instead when user input is needed)
 - [VcLabel](../../atoms/vc-label/) -- standalone label atom used internally
-- [VcCol](../../atoms/vc-col/) -- column layout atom used for aspect ratio
 
 ::storybook id="form-vcfield--skeleton"
 

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

@@ -94,7 +94,7 @@ Show a loading overlay while files are being processed or uploaded:
 <VcFileUpload :loading="isUploading" @upload="onUpload" />
 ```
 
-Set `isUploading` to `true` before the upload and reset in a `finally` block. The loading overlay uses the `v-loading` directive and displays a spinner centered over the drop zone.
+Set `isUploading` to `true` before the upload and reset in a `finally` block. When `loading` is `true`, the drop-zone content is replaced by a centered spinner (VcIcon `lucide-loader-2`) plus an "uploading" label, and pointer events on the drop zone are disabled.
 
 ## Custom Text and Icon
 
@@ -270,21 +270,21 @@ async function onUpload(files: FileList) {
 
 ## Props
 
-| Prop           | Type                                   | Default                                   | Description                                         |
-| -------------- | -------------------------------------- | ----------------------------------------- | --------------------------------------------------- |
-| `accept`       | `string`                               | `".jpg, .png, .jpeg, .webp, .heic, .svg"` | Accepted file types (HTML accept attribute format)  |
-| `multiple`     | `boolean`                              | `false`                                   | Allow selecting multiple files                      |
-| `loading`      | `boolean`                              | `false`                                   | Show loading spinner overlay                        |
-| `icon`         | `string`                               | `"lucide-cloud-upload"`                   | Icon displayed in the upload zone                   |
-| `customText`   | `{ dragHere: string; browse: string }` | --                                        | Override default drag/browse instruction text       |
-| `rules`        | `IValidationRules`                     | --                                        | Vee-validate validation rules (e.g., `{ size: 5 }`) |
-| `name`         | `string`                               | `"Gallery"`                               | Form field name attribute                           |
-| `label`        | `string`                               | --                                        | Field label text                                    |
-| `tooltip`      | `string`                               | --                                        | Tooltip on the label                                |
-| `disabled`     | `boolean`                              | `false`                                   | Disable all interactions                            |
-| `required`     | `boolean`                              | `false`                                   | Mark field as required                              |
-| `error`        | `boolean`                              | `false`                                   | External error flag                                 |
-| `errorMessage` | `string`                               | --                                        | Error message text (sets error state when truthy)   |
+| Prop           | Type                                         | Default                                   | Description                                         |
+| -------------- | -------------------------------------------- | ----------------------------------------- | --------------------------------------------------- |
+| `accept`       | `string`                                     | `".jpg, .png, .jpeg, .webp, .heic, .svg"` | Accepted file types (HTML accept attribute format)  |
+| `multiple`     | `boolean`                                    | `false`                                   | Allow selecting multiple files                      |
+| `loading`      | `boolean`                                    | `false`                                   | Show loading spinner overlay                        |
+| `icon`         | `string`                                     | `"lucide-cloud-upload"`                   | Icon displayed in the upload zone                   |
+| `customText`   | `{ dragHere: string; browse: string }`       | --                                        | Override default drag/browse instruction text       |
+| `rules`        | `keyof IValidationRules \| IValidationRules` | --                                        | Vee-validate validation rules (e.g., `{ size: 5 }`) |
+| `name`         | `string`                                     | `"Gallery"`                               | Form field name attribute                           |
+| `label`        | `string`                                     | --                                        | Field label text                                    |
+| `tooltip`      | `string`                                     | --                                        | Tooltip on the label                                |
+| `disabled`     | `boolean`                                    | `false`                                   | Disable all interactions                            |
+| `required`     | `boolean`                                    | `false`                                   | Mark field as required                              |
+| `error`        | `boolean`                                    | `false`                                   | External error flag                                 |
+| `errorMessage` | `string`                                     | --                                        | Error message text (sets error state when truthy)   |
 
 ## Events
 
@@ -300,20 +300,20 @@ async function onUpload(files: FileList) {
 
 ## CSS Variables
 
-| Variable                              | Default               | Description                       |
-| ------------------------------------- | --------------------- | --------------------------------- |
-| `--file-upload-border-color`          | `var(--neutrals-200)` | Default border color              |
-| `--file-upload-border-color-hover`    | `var(--neutrals-400)` | Hover border color                |
-| `--file-upload-border-color-dragover` | `var(--primary-500)`  | Border color while dragging over  |
-| `--file-upload-border-color-error`    | `var(--danger-500)`   | Error state border color          |
-| `--file-upload-border-radius`         | `6px`                 | Corner radius                     |
-| `--file-upload-drag-bg`               | `var(--neutrals-100)` | Background color during drag-over |
-| `--file-upload-background-color`      | `transparent`         | Default background color          |
-| `--file-upload-icon-color`            | `var(--neutrals-400)` | Upload icon color                 |
-| `--file-upload-text-color`            | `var(--neutrals-400)` | Instruction text color            |
-| `--file-upload-error-color`           | `var(--danger-500)`   | Error text color                  |
-| `--file-upload-focus-ring-color`      | `var(--primary-100)`  | Focus ring color                  |
-| `--file-upload-error-ring-color`      | `var(--danger-100)`   | Error state ring color            |
+| Variable                              | Default                | Description                       |
+| ------------------------------------- | ---------------------- | --------------------------------- |
+| `--file-upload-border-color`          | `var(--secondary-300)` | Default border color              |
+| `--file-upload-border-color-hover`    | `var(--secondary-400)` | Hover border color                |
+| `--file-upload-border-color-dragover` | `var(--primary-400)`   | Border color while dragging over  |
+| `--file-upload-border-color-error`    | `var(--danger-500)`    | Error state border color          |
+| `--file-upload-border-width`          | `1.5px`                | Drop zone border width            |
+| `--file-upload-border-radius`         | `6px`                  | Corner radius                     |
+| `--file-upload-drag-bg`               | `var(--primary-50)`    | Background color during drag-over |
+| `--file-upload-icon-color`            | `var(--secondary-400)` | Upload icon color                 |
+| `--file-upload-text-color`            | `var(--secondary-500)` | Instruction text color            |
+| `--file-upload-error-color`           | `var(--danger-500)`    | Error text color                  |
+| `--file-upload-focus-ring-color`      | `var(--primary-100)`   | Focus ring color                  |
+| `--file-upload-error-ring-color`      | `var(--danger-100)`    | Error state ring color            |
 
 ## Accessibility
 

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

@@ -641,7 +641,7 @@ VcInput only shows the error message when the computed `invalid` state is true.
 <VcInput v-model="val" label="Name" :error="true" error-message="Required" />
 ```
 
-> **Note:** As of the current implementation, `invalid` is computed as `!!error || !!errorMessage`. So passing only `errorMessage` does work, but it is best practice to pass both for clarity and forward compatibility.
+> **Note:** As of the current implementation, `invalid` is computed as `!!error || !!errorMessage`, and is also true when the parent VcInputGroup is in an error state (see `useFormField.ts` line 19). So passing only `errorMessage` does work, but it is best practice to pass both for clarity and forward compatibility.
 
 ### 4. Expecting negative numbers from type="number"
 
@@ -796,7 +796,7 @@ This behavior is powered by `BladeLoadingKey` via Vue's provide/inject. The comp
 - The `type="date"`, `type="datetime-local"`, and `type="color"` values trigger internal delegation — the component renders `VcDatePicker` or `VcColorInput` instead of a native `<input>`. All forwarded props are passed via `v-bind="$attrs"`.
 - Debounce is implemented via a `useDebounceFn` wrapper from VueUse. The internal `temp` ref holds the raw typing value; the `modelValue` update is deferred.
 - `number` / `integer` type filtering uses `keydown` event guards — not `input` event filtering — to block `-`, `+`, `e`, and (for `integer`) `.` keys before they reach the input.
-- `type="password"` show/hide toggle is controlled by `showPassword` ref; the native `input` type toggles between `"password"` and `"text"`.
+- `type="password"` show/hide toggle is controlled by the `internalType` ref; the native `input` type toggles between `"password"` and `"text"`.
 - The `control` slot replaces the native `<input>` with an arbitrary element. The `emitValue` scope function wraps the debounce logic, so custom controls respect the `debounce` prop automatically.
 - Source file: `framework/ui/components/molecules/vc-input/vc-input.vue`
 

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

@@ -319,7 +319,7 @@ const price = ref<number | null>(100);
 | -------------------- | ---------------- | ------------------------------------------- |
 | `update:model-value` | `number \| null` | Emitted when the numeric value changes      |
 | `update:option`      | `unknown`        | Emitted when the currency selection changes |
-| `change`             | `number \| null` | Emitted on value change (alias)             |
+| `change`             | `number \| null` | Declared but not currently emitted          |
 | `blur`               | `Event`          | Emitted when the input loses focus          |
 
 ## CSS Variables

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

@@ -240,40 +240,43 @@ 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                                            |
+| `size`            | `"default" \| "small"`                                                                                               | --        | Inherited from `ITextFieldProps`; currently inert (not forwarded to the template) |
+| `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                                                 |
+| `multilanguage`   | `boolean`                                                                                                            | `false`   | Enable multilanguage editing (forwarded to VcSelect)                              |
+| `currentLanguage` | `string`                                                                                                             | --        | Active language for multilanguage mode (forwarded to VcSelect)                    |
 
 ## 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`                          | Declared but not currently emitted |
+| `blur`              | `Event`                            | Input lost focus                   |
 
 ## Slots
 

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

@@ -48,17 +48,19 @@ 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                          |
+| `ariaLabel`              | `string`                     | --           | Sets `aria-label` on the fieldset                                   |
+| `ariaLabelledby`         | `string`                     | --           | Sets `aria-labelledby` on the fieldset (fallback when no legend id) |
 
 ## Common Patterns
 
@@ -126,7 +128,7 @@ const lastName = ref("");
 
 ## Architecture Notes
 
-- `disabled` and `name` are provided via Vue's provide/inject mechanism using injection keys from `framework/injection-keys.ts`. Child form controls (`VcInput`, `VcRadioButton`, etc.) inject these to inherit group-level state automatically.
+- Group state is provided via `InputGroupContextKey` (defined locally in `./context.ts`), carrying `{ name, disabled, invalid, describedBy }`. Child form controls (`VcInput`, `VcRadioButton`, etc.) inject this context to inherit group-level state automatically.
 - The `orientation` prop controls flex direction (`column` vs `row`) on the fieldset's content area.
 - Source file: `framework/ui/components/molecules/vc-input-group/vc-input-group.vue`
 - Context file: `framework/ui/components/molecules/vc-input-group/context.ts`

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

@@ -111,7 +111,7 @@ When `expanded` is `false`, the menu shows only icons and letter abbreviations.
 
 | Variable        | Default | Description            |
 | --------------- | ------- | ---------------------- |
-| `--vc-menu-gap` | `2px`   | Gap between menu items |
+| `--vc-menu-gap` | `8px`   | Gap between menu items |
 
 ## Accessibility