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

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

@@ -22,7 +22,11 @@ The component follows the same prop interface as other vc-shell form fields (`IT
 
 ```vue
 <template>
-  <VcColorInput v-model="color" label="Brand color" placeholder="Enter hex color..." />
+  <VcColorInput
+    v-model="color"
+    label="Brand color"
+    placeholder="Enter hex color..."
+  />
 </template>
 
 <script setup lang="ts">
@@ -35,15 +39,15 @@ const color = ref<string | null>(null);
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `modelValue` | `string \| null` | `undefined` | Color value via `v-model` (hex string or CSS color name) |
-| `label` | `string` | -- | Label text above the field |
-| `placeholder` | `string` | -- | Placeholder text |
-| `clearable` | `boolean` | `false` | Shows a clear button when a value is present |
-| `size` | `"default" \| "small"` | `"default"` | Field height variant |
-| `error` / `errorMessage` | `boolean` / `string` | -- | Error styling and validation message |
-| `disabled` | `boolean` | `false` | Disables the input and color picker |
+| Prop                     | Type                   | Default     | Description                                              |
+| ------------------------ | ---------------------- | ----------- | -------------------------------------------------------- |
+| `modelValue`             | `string \| null`       | `undefined` | Color value via `v-model` (hex string or CSS color name) |
+| `label`                  | `string`               | --          | Label text above the field                               |
+| `placeholder`            | `string`               | --          | Placeholder text                                         |
+| `clearable`              | `boolean`              | `false`     | Shows a clear button when a value is present             |
+| `size`                   | `"default" \| "small"` | `"default"` | Field height variant                                     |
+| `error` / `errorMessage` | `boolean` / `string`   | --          | Error styling and validation message                     |
+| `disabled`               | `boolean`              | `false`     | Disables the input and color picker                      |
 
 ## Common Patterns
 
@@ -66,7 +70,10 @@ const color = ref<string | null>(null);
 
 ```vue
 <template>
-  <VcColorInput v-model="color" label="Accent color" />
+  <VcColorInput
+    v-model="color"
+    label="Accent color"
+  />
   <!-- Accepts "#3b82f6", "#fff", "red", "cornflowerblue", etc. -->
 </template>
 
@@ -81,9 +88,20 @@ const color = ref("#3b82f6");
 ```vue
 <template>
   <div class="tw-flex tw-flex-col tw-gap-4">
-    <VcInput v-model="category.name" label="Category Name" rules="required" />
-    <VcColorInput v-model="category.badgeColor" label="Badge Color" clearable />
-    <VcInput v-model="category.description" label="Description" />
+    <VcInput
+      v-model="category.name"
+      label="Category Name"
+      rules="required"
+    />
+    <VcColorInput
+      v-model="category.badgeColor"
+      label="Badge Color"
+      clearable
+    />
+    <VcInput
+      v-model="category.description"
+      label="Description"
+    />
   </div>
 </template>
 ```
@@ -95,8 +113,15 @@ You can use `VcInput` with `type="color"` instead of importing `VcColorInput` di
 ```vue
 <template>
   <!-- These are equivalent -->
-  <VcInput type="color" v-model="color" label="Theme Color" />
-  <VcColorInput v-model="color" label="Theme Color" />
+  <VcInput
+    type="color"
+    v-model="color"
+    label="Theme Color"
+  />
+  <VcColorInput
+    v-model="color"
+    label="Theme Color"
+  />
 </template>
 ```
 
@@ -106,12 +131,30 @@ You can use `VcInput` with `type="color"` instead of importing `VcColorInput` di
 <template>
   <h3>Theme Colors</h3>
   <div class="tw-grid tw-grid-cols-2 tw-gap-4">
-    <VcColorInput v-model="theme.primary" label="Primary" />
-    <VcColorInput v-model="theme.secondary" label="Secondary" />
-    <VcColorInput v-model="theme.accent" label="Accent" />
-    <VcColorInput v-model="theme.background" label="Background" />
-    <VcColorInput v-model="theme.text" label="Text" />
-    <VcColorInput v-model="theme.error" label="Error" />
+    <VcColorInput
+      v-model="theme.primary"
+      label="Primary"
+    />
+    <VcColorInput
+      v-model="theme.secondary"
+      label="Secondary"
+    />
+    <VcColorInput
+      v-model="theme.accent"
+      label="Accent"
+    />
+    <VcColorInput
+      v-model="theme.background"
+      label="Background"
+    />
+    <VcColorInput
+      v-model="theme.text"
+      label="Text"
+    />
+    <VcColorInput
+      v-model="theme.error"
+      label="Error"
+    />
   </div>
 </template>
 ```
@@ -155,4 +198,3 @@ The native color picker does not support alpha/transparency. If you need RGBA co
 ## Skeleton / Loading State
 
 When placed inside a `VcBlade` with `loading=true`, the component automatically renders a skeleton placeholder matching its visual footprint. No additional props or configuration needed.
-

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

@@ -20,7 +20,11 @@ A date and datetime picker that wraps the [VueDatePicker](https://vue3datepicker
 
 ```vue
 <template>
-  <VcDatePicker v-model="date" label="Delivery date" placeholder="Pick a date..." />
+  <VcDatePicker
+    v-model="date"
+    label="Delivery date"
+    placeholder="Pick a date..."
+  />
 </template>
 
 <script setup lang="ts">
@@ -42,12 +46,7 @@ The `type` prop controls whether the picker shows a date-only calendar or includ
 <VcDatePicker v-model="startDate" label="Start date" />
 
 <!-- Date and time -->
-<VcDatePicker
-  v-model="scheduledAt"
-  type="datetime-local"
-  label="Schedule publication"
-  placeholder="Pick date and time..."
-/>
+<VcDatePicker v-model="scheduledAt" type="datetime-local" label="Schedule publication" placeholder="Pick date and time..." />
 ```
 
 In `datetime-local` mode, the time picker is rendered inline below the calendar. The component auto-detects whether to show 12-hour (AM/PM) or 24-hour format based on the browser's locale.
@@ -57,22 +56,17 @@ In `datetime-local` mode, the time picker is rendered inline below the calendar.
 When `clearable` is set, a small "x" button appears once a date is selected, allowing the user to reset the field to `null`.
 
 ```vue
-<VcDatePicker
-  v-model="optionalDate"
-  label="Expiration date"
-  clearable
-  hint="Leave empty for no expiration"
-/>
+<VcDatePicker v-model="optionalDate" label="Expiration date" clearable hint="Leave empty for no expiration" />
 ```
 
 ### Size Variants
 
 Two height variants are available:
 
-| Size | Value | Height |
-|------|-------|--------|
-| Default | `"default"` | 36px |
-| Small | `"small"` | 32px |
+| Size    | Value       | Height |
+| ------- | ----------- | ------ |
+| Default | `"default"` | 36px   |
+| Small   | `"small"`   | 32px   |
 
 ```vue
 <VcDatePicker v-model="date" label="Default size" size="default" />
@@ -144,19 +138,10 @@ const form = reactive({
 <VcDatePicker :model-value="new Date()" label="Created at" disabled />
 
 <!-- Error state -->
-<VcDatePicker
-  v-model="date"
-  label="Start date"
-  :error="true"
-  error-message="Start date is required"
-/>
+<VcDatePicker v-model="date" label="Start date" :error="true" error-message="Start date is required" />
 
 <!-- With hint text -->
-<VcDatePicker
-  v-model="date"
-  label="Delivery date"
-  hint="Select a date within the next 30 days"
-/>
+<VcDatePicker v-model="date" label="Delivery date" hint="Select a date within the next 30 days" />
 ```
 
 ### Multilanguage Support
@@ -164,12 +149,7 @@ const form = reactive({
 Like other form fields, the date picker supports the multilanguage label indicator:
 
 ```vue
-<VcDatePicker
-  v-model="localizedDate"
-  label="Event date"
-  multilanguage
-  current-language="de-DE"
-/>
+<VcDatePicker v-model="localizedDate" label="Event date" multilanguage current-language="de-DE" />
 ```
 
 ## Recipes
@@ -297,52 +277,52 @@ const date = ref<Date | null>(new Date("2025-01-15"));
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `modelValue` | `Date \| string \| null` | `undefined` | Bound value via `v-model` |
-| `type` | `"date" \| "datetime-local"` | `"date"` | Date only or date + time mode |
-| `label` | `string` | -- | Label text above the field |
-| `placeholder` | `string` | auto (localized) | Placeholder text; auto-generated from locale if not provided |
-| `hint` | `string` | -- | Helper text below the field |
-| `tooltip` | `string` | -- | Tooltip on the label info icon |
-| `clearable` | `boolean` | `false` | Shows a clear button when a date is selected |
-| `loading` | `boolean` | `false` | Shows a spinning loader icon |
-| `size` | `"default" \| "small"` | `"default"` | Field height variant |
-| `required` | `boolean` | `false` | Shows a required indicator |
-| `error` | `boolean` | `false` | Enables error styling |
-| `errorMessage` | `string` | -- | Error message below the field |
-| `disabled` | `boolean` | `false` | Disables the date picker |
-| `autofocus` | `boolean` | `false` | Focus the field on mount |
-| `name` | `string` | `"Field"` | HTML name attribute |
-| `multilanguage` | `boolean` | `false` | Shows language badge on the label |
-| `currentLanguage` | `string` | -- | Language code for the badge |
-| `datePickerOptions` | `VueDatePickerProps` | -- | Pass-through options to VueDatePicker |
+| Prop                | Type                         | Default          | Description                                                  |
+| ------------------- | ---------------------------- | ---------------- | ------------------------------------------------------------ |
+| `modelValue`        | `Date \| string \| null`     | `undefined`      | Bound value via `v-model`                                    |
+| `type`              | `"date" \| "datetime-local"` | `"date"`         | Date only or date + time mode                                |
+| `label`             | `string`                     | --               | Label text above the field                                   |
+| `placeholder`       | `string`                     | auto (localized) | Placeholder text; auto-generated from locale if not provided |
+| `hint`              | `string`                     | --               | Helper text below the field                                  |
+| `tooltip`           | `string`                     | --               | Tooltip on the label info icon                               |
+| `clearable`         | `boolean`                    | `false`          | Shows a clear button when a date is selected                 |
+| `loading`           | `boolean`                    | `false`          | Shows a spinning loader icon                                 |
+| `size`              | `"default" \| "small"`       | `"default"`      | Field height variant                                         |
+| `required`          | `boolean`                    | `false`          | Shows a required indicator                                   |
+| `error`             | `boolean`                    | `false`          | Enables error styling                                        |
+| `errorMessage`      | `string`                     | --               | Error message below the field                                |
+| `disabled`          | `boolean`                    | `false`          | Disables the date picker                                     |
+| `autofocus`         | `boolean`                    | `false`          | Focus the field on mount                                     |
+| `name`              | `string`                     | `"Field"`        | HTML name attribute                                          |
+| `multilanguage`     | `boolean`                    | `false`          | Shows language badge on the label                            |
+| `currentLanguage`   | `string`                     | --               | Language code for the badge                                  |
+| `datePickerOptions` | `VueDatePickerProps`         | --               | Pass-through options to VueDatePicker                        |
 
 ## Events
 
-| Event | Payload | Description |
-|-------|---------|-------------|
-| `update:modelValue` | `Date \| string \| null` | Emitted when the selected date changes |
-| `focus` | -- | Emitted when the picker gains focus or opens |
-| `blur` | `Event` | Emitted when the picker loses focus or closes |
+| Event               | Payload                  | Description                                   |
+| ------------------- | ------------------------ | --------------------------------------------- |
+| `update:modelValue` | `Date \| string \| null` | Emitted when the selected date changes        |
+| `focus`             | --                       | Emitted when the picker gains focus or opens  |
+| `blur`              | `Event`                  | Emitted when the picker loses focus or closes |
 
 ## CSS Variables
 
 Uses the same `--input-*` variables as VcInput for consistent styling across all input molecules:
 
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `--input-height` | `36px` | Default field height |
-| `--input-height-small` | `32px` | Small variant field height |
-| `--input-border-radius` | `6px` | Corner radius |
-| `--input-border-color` | `var(--neutrals-300)` | Default border color |
-| `--input-border-color-focus` | `var(--primary-500)` | Focus border color |
-| `--input-border-color-error` | `var(--danger-500)` | Error border color |
-| `--input-background-color` | `var(--additional-50)` | Background color |
-| `--input-text-color` | `var(--neutrals-800)` | Text color |
-| `--input-placeholder-color` | `var(--neutrals-400)` | Placeholder color |
-| `--input-focus-ring-color` | `var(--primary-100)` | Focus ring color |
-| `--input-error-ring-color` | `var(--danger-100)` | Error ring color |
+| Variable                     | Default                | Description                |
+| ---------------------------- | ---------------------- | -------------------------- |
+| `--input-height`             | `36px`                 | Default field height       |
+| `--input-height-small`       | `32px`                 | Small variant field height |
+| `--input-border-radius`      | `6px`                  | Corner radius              |
+| `--input-border-color`       | `var(--neutrals-300)`  | Default border color       |
+| `--input-border-color-focus` | `var(--primary-500)`   | Focus border color         |
+| `--input-border-color-error` | `var(--danger-500)`    | Error border color         |
+| `--input-background-color`   | `var(--additional-50)` | Background color           |
+| `--input-text-color`         | `var(--neutrals-800)`  | Text color                 |
+| `--input-placeholder-color`  | `var(--neutrals-400)`  | Placeholder color          |
+| `--input-focus-ring-color`   | `var(--primary-100)`   | Focus ring color           |
+| `--input-error-ring-color`   | `var(--danger-100)`    | Error ring color           |
 
 ## Accessibility
 
@@ -365,4 +345,3 @@ Uses the same `--input-*` variables as VcInput for consistent styling across all
 When placed inside a `VcBlade` with `loading=true`, the component automatically renders a skeleton placeholder matching its visual footprint — a label block (when the `label` prop is set) and an input-shaped block. No additional props or configuration needed.
 
 This behavior is powered by `BladeLoadingKey` via Vue's provide/inject. The component injects the loading state from the nearest `VcBlade` ancestor.
-

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

@@ -10,6 +10,7 @@ A headless, accessible dropdown primitive for building menus and listboxes. Prov
 - Notification panels or custom popovers with item lists
 
 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 navigation menus -- use [VcMenu](../vc-menu/)
@@ -29,7 +30,10 @@ When NOT to use:
       <VcButton @click="toggle">Actions</VcButton>
     </template>
     <template #item="{ item, click }">
-      <button class="tw-w-full tw-text-left tw-px-3 tw-py-2" @click="click">
+      <button
+        class="tw-w-full tw-text-left tw-px-3 tw-py-2"
+        @click="click"
+      >
         {{ item.title }}
       </button>
     </template>
@@ -60,14 +64,7 @@ function onAction(item: { id: string; title: string }) {
 When `floating` is `true`, the dropdown panel is positioned using `@floating-ui` with automatic flip and shift middleware. The panel is teleported to the body to avoid z-index stacking context issues.
 
 ```vue
-<VcDropdown
-  v-model="open"
-  :items="items"
-  floating
-  placement="bottom-start"
-  :offset="{ mainAxis: 4 }"
-  :z-index="10000"
->
+<VcDropdown v-model="open" :items="items" floating placement="bottom-start" :offset="{ mainAxis: 4 }" :z-index="10000">
   <template #trigger="{ toggle }">
     <VcButton @click="toggle">Open</VcButton>
   </template>
@@ -84,14 +81,7 @@ Available `placement` values follow Floating UI conventions: `"top"`, `"top-star
 Build rich action menus by customizing the `#item` slot with icons, labels, and keyboard shortcut hints.
 
 ```vue
-<VcDropdown
-  v-model="open"
-  :items="actions"
-  floating
-  placement="bottom-start"
-  close-on-select
-  @item-click="handleAction"
->
+<VcDropdown v-model="open" :items="actions" floating placement="bottom-start" close-on-select @item-click="handleAction">
   <template #trigger="{ toggle }">
     <VcButton icon="lucide-ellipsis" @click="toggle" />
   </template>
@@ -110,15 +100,7 @@ Build rich action menus by customizing the `#item` slot with icons, labels, and
 Use `role="listbox"` for option-selection patterns. Combine with `isItemActive` to highlight the current selection and `aria-selected` is set automatically.
 
 ```vue
-<VcDropdown
-  v-model="open"
-  :items="workspaces"
-  role="listbox"
-  :is-item-active="(item) => item.id === activeId"
-  close-on-select
-  floating
-  @item-click="(item) => (activeId = item.id)"
->
+<VcDropdown v-model="open" :items="workspaces" role="listbox" :is-item-active="(item) => item.id === activeId" close-on-select floating @item-click="(item) => (activeId = item.id)">
   <template #trigger="{ toggle }">
     <VcButton variant="outline" @click="toggle">{{ currentWorkspace }}</VcButton>
   </template>
@@ -136,14 +118,7 @@ Use `role="listbox"` for option-selection patterns. Combine with `isItemActive`
 Fine-tune when the dropdown closes:
 
 ```vue
-<VcDropdown
-  v-model="open"
-  :items="items"
-  floating
-  :close-on-click-outside="true"
-  :close-on-escape="true"
-  :close-on-select="false"
->
+<VcDropdown v-model="open" :items="items" floating :close-on-click-outside="true" :close-on-escape="true" :close-on-select="false">
   <!-- Multi-select pattern: dropdown stays open after each selection -->
 </VcDropdown>
 ```
@@ -206,16 +181,40 @@ By default, `padded` is `true`, which adds compact padding and rounded item back
 
 ```vue
 <template>
-  <VcDropdown v-model="confirmOpen" floating placement="bottom-end" :close-on-select="false">
+  <VcDropdown
+    v-model="confirmOpen"
+    floating
+    placement="bottom-end"
+    :close-on-select="false"
+  >
     <template #trigger="{ toggle }">
-      <VcButton variant="danger" @click="toggle">Delete</VcButton>
+      <VcButton
+        variant="danger"
+        @click="toggle"
+        >Delete</VcButton
+      >
     </template>
     <template #items-container="{ close }">
       <div class="tw-p-4 tw-w-64">
         <p class="tw-text-sm tw-mb-3">Are you sure you want to delete this item?</p>
         <div class="tw-flex tw-gap-2 tw-justify-end">
-          <VcButton size="s" variant="outline" @click="close">Cancel</VcButton>
-          <VcButton size="s" variant="danger" @click="() => { confirmDelete(); close(); }">Delete</VcButton>
+          <VcButton
+            size="s"
+            variant="outline"
+            @click="close"
+            >Cancel</VcButton
+          >
+          <VcButton
+            size="s"
+            variant="danger"
+            @click="
+              () => {
+                confirmDelete();
+                close();
+              }
+            "
+            >Delete</VcButton
+          >
         </div>
       </div>
     </template>
@@ -227,9 +226,16 @@ By default, `padded` is `true`, which adds compact padding and rounded item back
 
 ```vue
 <template>
-  <VcDropdown v-model="isOpen" :items="items" floating>
+  <VcDropdown
+    v-model="isOpen"
+    :items="items"
+    floating
+  >
     <template #trigger="{ open, close, isActive }">
-      <VcButton @mouseenter="open" @mouseleave="close">
+      <VcButton
+        @mouseenter="open"
+        @mouseleave="close"
+      >
         {{ isActive ? "Hover to close" : "Hover to open" }}
       </VcButton>
     </template>
@@ -288,60 +294,60 @@ 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                       |
+| `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                         |
 
 ## Events
 
-| Event | Payload | Description |
-|-------|---------|-------------|
-| `update:modelValue` | `boolean` | Open/close state changed |
-| `item-click` | `T` | An item was selected |
-| `open` | -- | Dropdown opened |
-| `close` | `"outside" \| "escape" \| "action"` | Dropdown closed with reason |
+| Event               | Payload                             | Description                 |
+| ------------------- | ----------------------------------- | --------------------------- |
+| `update:modelValue` | `boolean`                           | Open/close state changed    |
+| `item-click`        | `T`                                 | An item was selected        |
+| `open`              | --                                  | Dropdown opened             |
+| `close`             | `"outside" \| "escape" \| "action"` | Dropdown closed with reason |
 
 ## 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 }` | 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  |
 
 ## CSS Variables
 
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `--vc-dropdown-bg` | `var(--additional-50)` | Panel background color |
-| `--vc-dropdown-text` | `var(--neutrals-950)` | Default text color |
-| `--vc-dropdown-border` | `var(--neutrals-200)` | Floating panel border color |
-| `--vc-dropdown-accent` | `var(--neutrals-100)` | Hover/focus background color |
-| `--vc-dropdown-accent-foreground` | `var(--neutrals-900)` | Hover/focus text color |
-| `--vc-dropdown-divider` | `var(--neutrals-200)` | Mobile item divider color |
-| `--vc-dropdown-trigger-focus-ring-width` | `2px` | Trigger focus ring width |
-| `--vc-dropdown-trigger-focus-ring-offset` | `1px` | Trigger focus ring offset |
-| `--vc-dropdown-trigger-focus-ring-color` | `var(--primary-300)` | Trigger focus ring color |
+| Variable                                  | Default                | Description                  |
+| ----------------------------------------- | ---------------------- | ---------------------------- |
+| `--vc-dropdown-bg`                        | `var(--additional-50)` | Panel background color       |
+| `--vc-dropdown-text`                      | `var(--neutrals-950)`  | Default text color           |
+| `--vc-dropdown-border`                    | `var(--neutrals-200)`  | Floating panel border color  |
+| `--vc-dropdown-accent`                    | `var(--neutrals-100)`  | Hover/focus background color |
+| `--vc-dropdown-accent-foreground`         | `var(--neutrals-900)`  | Hover/focus text color       |
+| `--vc-dropdown-divider`                   | `var(--neutrals-200)`  | Mobile item divider color    |
+| `--vc-dropdown-trigger-focus-ring-width`  | `2px`                  | Trigger focus ring width     |
+| `--vc-dropdown-trigger-focus-ring-offset` | `1px`                  | Trigger focus ring offset    |
+| `--vc-dropdown-trigger-focus-ring-color`  | `var(--primary-300)`   | Trigger focus ring color     |
 
 ## Accessibility