@vc-shell/vc-app-skill 2.0.0-alpha.33 → 2.0.0-alpha.33-pr220.455e322

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

@@ -48,9 +48,21 @@ const selected = ref<string[]>([]);
 </script>
 
 <template>
-  <VcCheckbox v-model="selected" value="express">Express shipping</VcCheckbox>
-  <VcCheckbox v-model="selected" value="insurance">Shipping insurance</VcCheckbox>
-  <VcCheckbox v-model="selected" value="gift">Gift wrapping</VcCheckbox>
+  <VcCheckbox
+    v-model="selected"
+    value="express"
+    >Express shipping</VcCheckbox
+  >
+  <VcCheckbox
+    v-model="selected"
+    value="insurance"
+    >Shipping insurance</VcCheckbox
+  >
+  <VcCheckbox
+    v-model="selected"
+    value="gift"
+    >Gift wrapping</VcCheckbox
+  >
   <!-- selected.value might be ["express", "gift"] -->
 </template>
 ```
@@ -59,11 +71,11 @@ const selected = ref<string[]>([]);
 
 Three sizes are available via the `size` prop:
 
-| Size | Value | Pixel dimension |
-|------|-------|-----------------|
-| Small | `"s"` (default) | 16 x 16 px |
-| Medium | `"m"` | 20 x 20 px |
-| Large | `"l"` | 24 x 24 px |
+| Size   | Value           | Pixel dimension |
+| ------ | --------------- | --------------- |
+| Small  | `"s"` (default) | 16 x 16 px      |
+| Medium | `"m"`           | 20 x 20 px      |
+| Large  | `"l"`           | 24 x 24 px      |
 
 ```vue
 <VcCheckbox v-model="val" size="s">Small checkbox</VcCheckbox>
@@ -99,9 +111,21 @@ function toggleAll(checked: boolean) {
     Select all
   </VcCheckbox>
 
-  <VcCheckbox v-model="selected" value="A">Option A</VcCheckbox>
-  <VcCheckbox v-model="selected" value="B">Option B</VcCheckbox>
-  <VcCheckbox v-model="selected" value="C">Option C</VcCheckbox>
+  <VcCheckbox
+    v-model="selected"
+    value="A"
+    >Option A</VcCheckbox
+  >
+  <VcCheckbox
+    v-model="selected"
+    value="B"
+    >Option B</VcCheckbox
+  >
+  <VcCheckbox
+    v-model="selected"
+    value="C"
+    >Option C</VcCheckbox
+  >
 </template>
 ```
 
@@ -155,11 +179,7 @@ const form = reactive({
 <VcCheckbox :model-value="true" disabled>Cannot be changed</VcCheckbox>
 
 <!-- Error -->
-<VcCheckbox
-  v-model="val"
-  :error="true"
-  error-message="This field is required"
->
+<VcCheckbox v-model="val" :error="true" error-message="This field is required">
   I have read the disclaimer
 </VcCheckbox>
 ```
@@ -173,9 +193,21 @@ Use `VcInputGroup` to add a shared label and semantic grouping:
 ```vue
 <template>
   <VcInputGroup label="Delivery options">
-    <VcCheckbox v-model="deliveryOptions" value="courier">Courier delivery</VcCheckbox>
-    <VcCheckbox v-model="deliveryOptions" value="pickup">Store pickup</VcCheckbox>
-    <VcCheckbox v-model="deliveryOptions" value="postal">Postal service</VcCheckbox>
+    <VcCheckbox
+      v-model="deliveryOptions"
+      value="courier"
+      >Courier delivery</VcCheckbox
+    >
+    <VcCheckbox
+      v-model="deliveryOptions"
+      value="pickup"
+      >Store pickup</VcCheckbox
+    >
+    <VcCheckbox
+      v-model="deliveryOptions"
+      value="postal"
+      >Postal service</VcCheckbox
+    >
   </VcInputGroup>
 </template>
 
@@ -246,68 +278,64 @@ const selected = ref<string[]>([]);
 <VcCheckbox v-model="val" indeterminate>Select all</VcCheckbox>
 
 <!-- ✅ Use a computed + handler to manage the select-all logic -->
-<VcCheckbox
-  :model-value="allSelected"
-  :indeterminate="someSelected && !allSelected"
-  @update:model-value="toggleAll"
->
+<VcCheckbox :model-value="allSelected" :indeterminate="someSelected && !allSelected" @update:model-value="toggleAll">
   Select all
 </VcCheckbox>
 ```
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `modelValue` | `boolean \| T[]` | `undefined` | Bound value via `v-model`. Boolean for single, array for multi-select. |
-| `value` | `T` | -- | Value added to the array when checked (array mode only) |
-| `label` | `string` | -- | Label text displayed above the checkbox |
-| `tooltip` | `string` | -- | Tooltip on the label info icon |
-| `size` | `"s" \| "m" \| "l"` | `"s"` | Checkbox size variant |
-| `indeterminate` | `boolean` | `false` | Shows the indeterminate (dash) visual state |
-| `trueValue` | `boolean` | `true` | Value emitted when checked (boolean mode) |
-| `falseValue` | `boolean` | `false` | Value emitted when unchecked (boolean mode) |
-| `disabled` | `boolean` | `false` | Disables the checkbox |
-| `required` | `boolean` | `false` | Shows a required indicator |
-| `error` | `boolean` | `false` | Enables error styling |
-| `errorMessage` | `string` | -- | Error message displayed below the checkbox |
-| `name` | `string` | `"Field"` | HTML name attribute |
-| `outline` | `boolean` | `false` | Applies outline style variant |
+| Prop            | Type                | Default     | Description                                                            |
+| --------------- | ------------------- | ----------- | ---------------------------------------------------------------------- |
+| `modelValue`    | `boolean \| T[]`    | `undefined` | Bound value via `v-model`. Boolean for single, array for multi-select. |
+| `value`         | `T`                 | --          | Value added to the array when checked (array mode only)                |
+| `label`         | `string`            | --          | Label text displayed above the checkbox                                |
+| `tooltip`       | `string`            | --          | Tooltip on the label info icon                                         |
+| `size`          | `"s" \| "m" \| "l"` | `"s"`       | Checkbox size variant                                                  |
+| `indeterminate` | `boolean`           | `false`     | Shows the indeterminate (dash) visual state                            |
+| `trueValue`     | `boolean`           | `true`      | Value emitted when checked (boolean mode)                              |
+| `falseValue`    | `boolean`           | `false`     | Value emitted when unchecked (boolean mode)                            |
+| `disabled`      | `boolean`           | `false`     | Disables the checkbox                                                  |
+| `required`      | `boolean`           | `false`     | Shows a required indicator                                             |
+| `error`         | `boolean`           | `false`     | Enables error styling                                                  |
+| `errorMessage`  | `string`            | --          | Error message displayed below the checkbox                             |
+| `name`          | `string`            | `"Field"`   | HTML name attribute                                                    |
+| `outline`       | `boolean`           | `false`     | Applies outline style variant                                          |
 
 ## Events
 
-| Event | Payload | Description |
-|-------|---------|-------------|
+| Event               | Payload          | Description                          |
+| ------------------- | ---------------- | ------------------------------------ |
 | `update:modelValue` | `boolean \| T[]` | Emitted when the checkbox is toggled |
 
 ## Slots
 
-| Slot | Description |
-|------|-------------|
-| `default` | Inline text or content displayed next to the checkbox |
-| `icon` | Replace the check/indeterminate icon with custom markup |
-| `error` | Custom error message markup |
+| Slot      | Description                                             |
+| --------- | ------------------------------------------------------- |
+| `default` | Inline text or content displayed next to the checkbox   |
+| `icon`    | Replace the check/indeterminate icon with custom markup |
+| `error`   | Custom error message markup                             |
 
 ## CSS Variables
 
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `--checkbox-size-s` | `16px` | Small variant size |
-| `--checkbox-size-m` | `20px` | Medium variant size |
-| `--checkbox-size-l` | `24px` | Large variant size |
-| `--checkbox-border-color` | `var(--neutrals-300)` | Default border color |
-| `--checkbox-border-color-hover` | `var(--neutrals-400)` | Border color on hover |
-| `--checkbox-bg-color` | `var(--additional-50)` | Unchecked background |
-| `--checkbox-checked-bg-color` | `var(--primary-500)` | Checked background color |
-| `--checkbox-checked-border-color` | `var(--primary-500)` | Checked border color |
-| `--checkbox-indeterminate-bg-color` | `var(--primary-500)` | Indeterminate background |
+| Variable                              | Default                | Description              |
+| ------------------------------------- | ---------------------- | ------------------------ |
+| `--checkbox-size-s`                   | `16px`                 | Small variant size       |
+| `--checkbox-size-m`                   | `20px`                 | Medium variant size      |
+| `--checkbox-size-l`                   | `24px`                 | Large variant size       |
+| `--checkbox-border-color`             | `var(--neutrals-300)`  | Default border color     |
+| `--checkbox-border-color-hover`       | `var(--neutrals-400)`  | Border color on hover    |
+| `--checkbox-bg-color`                 | `var(--additional-50)` | Unchecked background     |
+| `--checkbox-checked-bg-color`         | `var(--primary-500)`   | Checked background color |
+| `--checkbox-checked-border-color`     | `var(--primary-500)`   | Checked border color     |
+| `--checkbox-indeterminate-bg-color`   | `var(--primary-500)`   | Indeterminate background |
 | `--checkbox-indeterminate-line-color` | `var(--additional-50)` | Indeterminate dash color |
-| `--checkbox-error-border-color` | `var(--danger-500)` | Error state border |
-| `--checkbox-error-ring-color` | `var(--danger-100)` | Error ring color |
-| `--checkbox-focus-ring-color` | `var(--primary-100)` | Focus ring color |
-| `--checkbox-border-radius` | `4px` | Corner radius |
-| `--checkbox-disabled-opacity` | `0.5` | Opacity when disabled |
-| `--checkbox-transition-duration` | `200ms` | Animation duration |
+| `--checkbox-error-border-color`       | `var(--danger-500)`    | Error state border       |
+| `--checkbox-error-ring-color`         | `var(--danger-100)`    | Error ring color         |
+| `--checkbox-focus-ring-color`         | `var(--primary-100)`   | Focus ring color         |
+| `--checkbox-border-radius`            | `4px`                  | Corner radius            |
+| `--checkbox-disabled-opacity`         | `0.5`                  | Opacity when disabled    |
+| `--checkbox-transition-duration`      | `200ms`                | Animation duration       |
 
 ## Accessibility
 
@@ -327,4 +355,3 @@ const selected = ref<string[]>([]);
 ## Skeleton / Loading State
 
 When placed inside a `VcBlade` with `loading=true`, the component renders a skeleton placeholder matching its shape — a control indicator and label block. No configuration needed.
-

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

@@ -34,20 +34,20 @@ const channels = [
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `modelValue` | `T[]` | `[]` | Selected values (v-model) |
-| `options` | `CheckboxGroupOption<T>[]` | `[]` | Options to render as checkboxes |
-| `label` | `string` | — | Group label (rendered as fieldset legend) |
-| `tooltip` | `string` | — | Tooltip on the label |
-| `hint` | `string` | — | Hint text below the group |
-| `orientation` | `"vertical" \| "horizontal"` | `"vertical"` | Layout direction of options |
-| `size` | `"s" \| "m" \| "l"` | `"s"` | Checkbox size for all items |
-| `name` | `string` | auto-generated | Shared name for native checkboxes |
-| `disabled` | `boolean` | `false` | Disable all checkboxes |
-| `required` | `boolean` | `false` | Mark group as required |
-| `error` | `boolean` | `false` | External error flag |
-| `errorMessage` | `string` | — | Error message text |
+| Prop           | Type                         | Default        | Description                               |
+| -------------- | ---------------------------- | -------------- | ----------------------------------------- |
+| `modelValue`   | `T[]`                        | `[]`           | Selected values (v-model)                 |
+| `options`      | `CheckboxGroupOption<T>[]`   | `[]`           | Options to render as checkboxes           |
+| `label`        | `string`                     | —              | Group label (rendered as fieldset legend) |
+| `tooltip`      | `string`                     | —              | Tooltip on the label                      |
+| `hint`         | `string`                     | —              | Hint text below the group                 |
+| `orientation`  | `"vertical" \| "horizontal"` | `"vertical"`   | Layout direction of options               |
+| `size`         | `"s" \| "m" \| "l"`          | `"s"`          | Checkbox size for all items               |
+| `name`         | `string`                     | auto-generated | Shared name for native checkboxes         |
+| `disabled`     | `boolean`                    | `false`        | Disable all checkboxes                    |
+| `required`     | `boolean`                    | `false`        | Mark group as required                    |
+| `error`        | `boolean`                    | `false`        | External error flag                       |
+| `errorMessage` | `string`                     | —              | Error message text                        |
 
 ## CheckboxGroupOption Interface
 
@@ -55,20 +55,20 @@ const channels = [
 interface CheckboxGroupOption<V = string | number | boolean> {
   label: string;
   value: V;
-  disabled?: boolean;  // Disable individual options
+  disabled?: boolean; // Disable individual options
 }
 ```
 
 ## Events
 
-| Event | Payload | Description |
-|-------|---------|-------------|
-| `update:modelValue` | `T[]` | Selected values changed |
+| Event               | Payload | Description             |
+| ------------------- | ------- | ----------------------- |
+| `update:modelValue` | `T[]`   | Selected values changed |
 
 ## Slots
 
-| Slot | Description |
-|------|-------------|
+| Slot      | Description                                               |
+| --------- | --------------------------------------------------------- |
 | `default` | Custom checkbox layout (replaces options-based rendering) |
 
 ## Common Patterns
@@ -105,26 +105,13 @@ interface CheckboxGroupOption<V = string | number | boolean> {
 ### Validation Error
 
 ```vue
-<VcCheckboxGroup
-  v-model="selected"
-  label="Required Selection"
-  required
-  :error="selected.length === 0"
-  error-message="Select at least one option"
-  :options="options"
-/>
+<VcCheckboxGroup v-model="selected" label="Required Selection" required :error="selected.length === 0" error-message="Select at least one option" :options="options" />
 ```
 
 ### Custom Slot Layout
 
 ```vue
-<VcCheckboxGroup
-  v-model="flags"
-  label="Feature Flags"
-  hint="Custom layout via default slot"
-  orientation="horizontal"
-  name="feature-flags"
->
+<VcCheckboxGroup v-model="flags" label="Feature Flags" hint="Custom layout via default slot" orientation="horizontal" name="feature-flags">
   <VcCheckbox v-model="flags" value="feature-a">Feature A</VcCheckbox>
   <VcCheckbox v-model="flags" value="feature-b">Feature B</VcCheckbox>
   <VcCheckbox v-model="flags" value="feature-c">Feature C</VcCheckbox>
@@ -148,4 +135,3 @@ interface CheckboxGroupOption<V = string | number | boolean> {
 ## Skeleton / Loading State
 
 When placed inside a `VcBlade` with `loading=true`, the component renders a skeleton placeholder matching its shape — a control indicator and label block. No configuration needed.
-

package/runtime/knowledge/docs/ui/components/molecules/vc-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.
-