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

package/runtime/knowledge/docs/ui/components/atoms/vc-tooltip/vc-tooltip.docs.md

@@ -7,7 +7,11 @@ A floating tooltip that appears on hover or focus to provide contextual informat
 ```vue
 <template>
   <VcTooltip>
-    <VcButton size="icon" icon="lucide-trash-2" aria-label="Delete" />
+    <VcButton
+      size="icon"
+      icon="lucide-trash-2"
+      aria-label="Delete"
+    />
     <template #tooltip>Delete selected items</template>
   </VcTooltip>
 </template>
@@ -32,12 +36,12 @@ VcTooltip supports 12 placement positions relative to the trigger element. The t
 
 ### All placement options
 
-| Primary | Start Variant | End Variant |
-|---------|--------------|-------------|
-| `top` | `top-start` | `top-end` |
+| Primary  | Start Variant  | End Variant  |
+| -------- | -------------- | ------------ |
+| `top`    | `top-start`    | `top-end`    |
 | `bottom` | `bottom-start` | `bottom-end` |
-| `left` | `left-start` | `left-end` |
-| `right` | `right-start` | `right-end` |
+| `left`   | `left-start`   | `left-end`   |
+| `right`  | `right-start`  | `right-end`  |
 
 The `start` and `end` variants align the tooltip to the beginning or end of the trigger element along the cross axis:
 
@@ -70,11 +74,11 @@ Three visual themes control the tooltip's appearance.
 </VcTooltip>
 ```
 
-| Variant | Background | Text Color | Use Case |
-|---------|------------|------------|----------|
-| `default` | `var(--additional-50)` (light) | `var(--neutrals-700)` | General-purpose tooltips |
-| `dark` | `var(--neutrals-800)` | `var(--additional-50)` (white) | High-contrast tooltips, dark UI areas |
-| `info` | `var(--primary-600)` | `var(--additional-50)` (white) | Branded or informational tooltips |
+| Variant   | Background                     | Text Color                     | Use Case                              |
+| --------- | ------------------------------ | ------------------------------ | ------------------------------------- |
+| `default` | `var(--additional-50)` (light) | `var(--neutrals-700)`          | General-purpose tooltips              |
+| `dark`    | `var(--neutrals-800)`          | `var(--additional-50)` (white) | High-contrast tooltips, dark UI areas |
+| `info`    | `var(--primary-600)`           | `var(--additional-50)` (white) | Branded or informational tooltips     |
 
 ## Delayed Display
 
@@ -115,10 +119,10 @@ Control the distance between the trigger and the tooltip:
 <VcTooltip :offset="{ mainAxis: 8, crossAxis: 10 }">...</VcTooltip>
 ```
 
-| Axis | Direction | Default |
-|------|-----------|---------|
-| `mainAxis` | Away from the trigger (perpendicular to placement edge) | `8` |
-| `crossAxis` | Along the trigger edge (parallel to placement edge) | `0` |
+| Axis        | Direction                                               | Default |
+| ----------- | ------------------------------------------------------- | ------- |
+| `mainAxis`  | Away from the trigger (perpendicular to placement edge) | `8`     |
+| `crossAxis` | Along the trigger edge (parallel to placement edge)     | `0`     |
 
 ## Width Control
 
@@ -177,7 +181,12 @@ The `#tooltip` slot accepts any HTML or Vue components, not just text:
 ```vue
 <template>
   <div class="tw-flex tw-gap-1">
-    <VcTooltip v-for="action in actions" :key="action.id" placement="top" variant="dark">
+    <VcTooltip
+      v-for="action in actions"
+      :key="action.id"
+      placement="top"
+      variant="dark"
+    >
       <VcButton
         variant="ghost"
         size="icon"
@@ -203,7 +212,10 @@ const actions = [
 
 ```vue
 <template>
-  <VcTooltip placement="top" :max-width="400">
+  <VcTooltip
+    placement="top"
+    :max-width="400"
+  >
     <span class="tw-truncate tw-max-w-[200px] tw-block">
       {{ longProductName }}
     </span>
@@ -270,38 +282,38 @@ const actions = [
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `placement` | `TooltipPlacement` | `"bottom"` | Position relative to the trigger (12 options) |
-| `variant` | `"default" \| "dark" \| "info"` | `"default"` | Visual theme |
-| `arrow` | `boolean` | `true` | Show directional arrow pointing at the trigger |
-| `delay` | `number` | `0` | Milliseconds to wait before showing |
-| `maxWidth` | `number \| string` | `240` | Maximum width (number = px, string = CSS value) |
-| `offset` | `{ mainAxis?: number; crossAxis?: number }` | `{ mainAxis: 8 }` | Distance from the trigger element |
-| `disabled` | `boolean` | `false` | Suppress the tooltip entirely |
+| Prop        | Type                                        | Default           | Description                                     |
+| ----------- | ------------------------------------------- | ----------------- | ----------------------------------------------- |
+| `placement` | `TooltipPlacement`                          | `"bottom"`        | Position relative to the trigger (12 options)   |
+| `variant`   | `"default" \| "dark" \| "info"`             | `"default"`       | Visual theme                                    |
+| `arrow`     | `boolean`                                   | `true`            | Show directional arrow pointing at the trigger  |
+| `delay`     | `number`                                    | `0`               | Milliseconds to wait before showing             |
+| `maxWidth`  | `number \| string`                          | `240`             | Maximum width (number = px, string = CSS value) |
+| `offset`    | `{ mainAxis?: number; crossAxis?: number }` | `{ mainAxis: 8 }` | Distance from the trigger element               |
+| `disabled`  | `boolean`                                   | `false`           | Suppress the tooltip entirely                   |
 
 ## Slots
 
-| Slot | Description |
-|------|-------------|
+| Slot      | Description                                               |
+| --------- | --------------------------------------------------------- |
 | `default` | Trigger element that activates the tooltip on hover/focus |
-| `tooltip` | Content rendered inside the floating tooltip panel |
+| `tooltip` | Content rendered inside the floating tooltip panel        |
 
 ## CSS Custom Properties
 
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `--tooltip-bg` | `var(--additional-50)` | Default variant background |
-| `--tooltip-text` | `var(--neutrals-700)` | Default variant text color |
-| `--tooltip-dark-bg` | `var(--neutrals-800)` | Dark variant background |
-| `--tooltip-dark-text` | `var(--additional-50)` | Dark variant text color |
-| `--tooltip-info-bg` | `var(--primary-600)` | Info variant background |
-| `--tooltip-info-text` | `var(--additional-50)` | Info variant text color |
-| `--tooltip-border-radius` | `6px` | Corner radius |
-| `--tooltip-font-size` | `12px` | Text size |
-| `--tooltip-padding-x` | `10px` | Horizontal padding |
-| `--tooltip-padding-y` | `6px` | Vertical padding |
-| `--tooltip-z-index` | `1002` | Stacking order |
+| Variable                  | Default                | Description                |
+| ------------------------- | ---------------------- | -------------------------- |
+| `--tooltip-bg`            | `var(--additional-50)` | Default variant background |
+| `--tooltip-text`          | `var(--neutrals-700)`  | Default variant text color |
+| `--tooltip-dark-bg`       | `var(--neutrals-800)`  | Dark variant background    |
+| `--tooltip-dark-text`     | `var(--additional-50)` | Dark variant text color    |
+| `--tooltip-info-bg`       | `var(--primary-600)`   | Info variant background    |
+| `--tooltip-info-text`     | `var(--additional-50)` | Info variant text color    |
+| `--tooltip-border-radius` | `6px`                  | Corner radius              |
+| `--tooltip-font-size`     | `12px`                 | Text size                  |
+| `--tooltip-padding-x`     | `10px`                 | Horizontal padding         |
+| `--tooltip-padding-y`     | `6px`                  | Vertical padding           |
+| `--tooltip-z-index`       | `1002`                 | Stacking order             |
 
 ## Accessibility
 

package/runtime/knowledge/docs/ui/components/atoms/vc-video/vc-video.docs.md

@@ -26,22 +26,18 @@ import { VcVideo } from "@vc-shell/framework";
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `source` | `string` | -- | Embed URL for the video (e.g., YouTube embed link) |
-| `label` | `string` | -- | Label text displayed above the video |
-| `tooltip` | `string` | -- | Tooltip text shown on the label's info icon |
+| Prop      | Type     | Default | Description                                        |
+| --------- | -------- | ------- | -------------------------------------------------- |
+| `source`  | `string` | --      | Embed URL for the video (e.g., YouTube embed link) |
+| `label`   | `string` | --      | Label text displayed above the video               |
+| `tooltip` | `string` | --      | Tooltip text shown on the label's info icon        |
 
 ## Common Patterns
 
 ### Video with Label and Tooltip
 
 ```vue
-<VcVideo
-  source="https://www.youtube.com/embed/dQw4w9WgXcQ"
-  label="Setup Guide"
-  tooltip="This video walks through the initial configuration steps"
-/>
+<VcVideo source="https://www.youtube.com/embed/dQw4w9WgXcQ" label="Setup Guide" tooltip="This video walks through the initial configuration steps" />
 ```
 
 ### Placeholder When Source Is Missing
@@ -57,7 +53,11 @@ When `source` is not provided, VcVideo renders a centered film icon placeholder
 ```vue
 <template>
   <VcBlade title="Product Details">
-    <VcInput label="Video URL" v-model="product.videoUrl" placeholder="https://youtube.com/embed/..." />
+    <VcInput
+      label="Video URL"
+      v-model="product.videoUrl"
+      placeholder="https://youtube.com/embed/..."
+    />
     <VcVideo
       :source="product.videoUrl"
       label="Product Video"
@@ -89,12 +89,12 @@ When `source` is not provided, VcVideo renders a centered film icon placeholder
 
 ## CSS Custom Properties
 
-| Variable | Default | Description |
-|---|---|---|
-| `--video-icon-color` | `var(--neutrals-400)` | Placeholder icon color |
-| `--video-placeholder-bg` | `var(--neutrals-100)` | Placeholder background |
-| `--video-border-radius` | `6px` | Container corner radius |
-| `--video-border-color` | `var(--neutrals-200)` | Container border color |
+| Variable                 | Default               | Description             |
+| ------------------------ | --------------------- | ----------------------- |
+| `--video-icon-color`     | `var(--neutrals-400)` | Placeholder icon color  |
+| `--video-placeholder-bg` | `var(--neutrals-100)` | Placeholder background  |
+| `--video-border-radius`  | `6px`                 | Container corner radius |
+| `--video-border-color`   | `var(--neutrals-200)` | Container border color  |
 
 ## Tips
 

package/runtime/knowledge/docs/ui/components/atoms/vc-widget/vc-widget.docs.md

@@ -34,20 +34,20 @@ function openNotifications() {
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `icon` | `string` | -- | Icon name (Lucide format, e.g., `"lucide-save"`) |
-| `title` | `string` | -- | Label text below (or beside) the icon |
-| `value` | `string \| number` | -- | Badge count displayed on the icon; numbers above 99 show as "99+" |
-| `disabled` | `boolean` | `false` | Prevents clicks and applies muted styling |
-| `isExpanded` | `boolean` | `false` | Expanded visual state |
-| `horizontal` | `boolean` | `false` | Arranges icon and title side by side instead of stacked |
+| Prop         | Type               | Default | Description                                                       |
+| ------------ | ------------------ | ------- | ----------------------------------------------------------------- |
+| `icon`       | `string`           | --      | Icon name (Lucide format, e.g., `"lucide-save"`)                  |
+| `title`      | `string`           | --      | Label text below (or beside) the icon                             |
+| `value`      | `string \| number` | --      | Badge count displayed on the icon; numbers above 99 show as "99+" |
+| `disabled`   | `boolean`          | `false` | Prevents clicks and applies muted styling                         |
+| `isExpanded` | `boolean`          | `false` | Expanded visual state                                             |
+| `horizontal` | `boolean`          | `false` | Arranges icon and title side by side instead of stacked           |
 
 ## Events
 
-| Event | Payload | Description |
-|-------|---------|-------------|
-| `click` | none | Fired when the widget is clicked (suppressed when `disabled`) |
+| Event   | Payload | Description                                                   |
+| ------- | ------- | ------------------------------------------------------------- |
+| `click` | none    | Fired when the widget is clicked (suppressed when `disabled`) |
 
 ## Common Patterns
 
@@ -87,16 +87,16 @@ Badge values above 99 are automatically displayed as "99+".
 
 ## CSS Custom Properties
 
-| Variable | Default | Description |
-|---|---|---|
-| `--widget-bg-color` | `transparent` | Background color |
-| `--widget-bg-hover-color` | `var(--neutrals-50)` | Background on hover |
-| `--widget-icon-color` | `var(--neutrals-700)` | Icon color |
-| `--widget-icon-hover-color` | `var(--primary-600)` | Icon color on hover |
-| `--widget-title-color` | `var(--neutrals-600)` | Title text color |
-| `--widget-title-hover-color` | `var(--primary-600)` | Title color on hover |
-| `--widget-border-radius` | `8px` | Corner radius |
-| `--widget-focus-ring-color` | `var(--primary-300)` | Focus ring color |
+| Variable                     | Default               | Description          |
+| ---------------------------- | --------------------- | -------------------- |
+| `--widget-bg-color`          | `transparent`         | Background color     |
+| `--widget-bg-hover-color`    | `var(--neutrals-50)`  | Background on hover  |
+| `--widget-icon-color`        | `var(--neutrals-700)` | Icon color           |
+| `--widget-icon-hover-color`  | `var(--primary-600)`  | Icon color on hover  |
+| `--widget-title-color`       | `var(--neutrals-600)` | Title text color     |
+| `--widget-title-hover-color` | `var(--primary-600)`  | Title color on hover |
+| `--widget-border-radius`     | `8px`                 | Corner radius        |
+| `--widget-focus-ring-color`  | `var(--primary-300)`  | Focus ring color     |
 
 ## Accessibility
 

package/runtime/knowledge/docs/ui/components/molecules/multilanguage-selector/multilanguage-selector.docs.md

@@ -33,11 +33,11 @@ const languages = [
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `modelValue` | `string` | `""` | Currently selected language value |
-| `options` | `LanguageOption[]` | `[]` | Available language options |
-| `disabled` | `boolean` | `false` | Disables interaction |
+| Prop         | Type               | Default | Description                       |
+| ------------ | ------------------ | ------- | --------------------------------- |
+| `modelValue` | `string`           | `""`    | Currently selected language value |
+| `options`    | `LanguageOption[]` | `[]`    | Available language options        |
+| `disabled`   | `boolean`          | `false` | Disables interaction              |
 
 Each `LanguageOption` has: `{ value: string; label: string; flag?: string }`.
 
@@ -65,23 +65,36 @@ const languages = [
 
 const currentName = computed({
   get: () => product.value.names[currentLang.value] ?? "",
-  set: (val) => { product.value.names[currentLang.value] = val; },
+  set: (val) => {
+    product.value.names[currentLang.value] = val;
+  },
 });
 
 const currentDescription = computed({
   get: () => product.value.descriptions[currentLang.value] ?? "",
-  set: (val) => { product.value.descriptions[currentLang.value] = val; },
+  set: (val) => {
+    product.value.descriptions[currentLang.value] = val;
+  },
 });
 </script>
 
 <template>
   <VcBlade title="Edit Product">
     <template #actions>
-      <MultilanguageSelector v-model="currentLang" :options="languages" />
+      <MultilanguageSelector
+        v-model="currentLang"
+        :options="languages"
+      />
     </template>
 
-    <VcInput v-model="currentName" label="Name" />
-    <VcTextarea v-model="currentDescription" label="Description" />
+    <VcInput
+      v-model="currentName"
+      label="Name"
+    />
+    <VcTextarea
+      v-model="currentDescription"
+      label="Description"
+    />
   </VcBlade>
 </template>
 ```

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

@@ -10,6 +10,7 @@ Collapsible content sections with smooth CSS grid animations, customizable colla
 - Expandable form sections or configuration panels
 
 When NOT to use:
+
 - For navigation groups -- use `VcMenuGroup`
 - For tab-based content switching -- use `VcTabs`
 - For single collapsible panels without siblings -- use `VcAccordionItem` directly
@@ -18,7 +19,10 @@ When NOT to use:
 
 ```vue
 <template>
-  <VcAccordion :items="faqItems" variant="bordered" />
+  <VcAccordion
+    :items="faqItems"
+    variant="bordered"
+  />
 </template>
 
 <script setup lang="ts">
@@ -38,12 +42,12 @@ const faqItems = [
 
 Four variants control the visual grouping and spacing of accordion items.
 
-| Variant | Description |
-|---------|-------------|
-| `default` | Items stacked with shared top/bottom borders, no gaps |
-| `bordered` | Single outer border wrapping all items, items separated by inner borders |
-| `separated` | Card-like items with 12px gaps between them, each with its own border |
-| `ghost` | Transparent background, minimal styling, no borders or padding |
+| Variant     | Description                                                              |
+| ----------- | ------------------------------------------------------------------------ |
+| `default`   | Items stacked with shared top/bottom borders, no gaps                    |
+| `bordered`  | Single outer border wrapping all items, items separated by inner borders |
+| `separated` | Card-like items with 12px gaps between them, each with its own border    |
+| `ghost`     | Transparent background, minimal styling, no borders or padding           |
 
 ```vue
 <VcAccordion :items="items" variant="separated" />
@@ -55,7 +59,10 @@ Use `v-model` to control which items are expanded. In single mode, the value is
 
 ```vue
 <template>
-  <VcAccordion v-model="openItem" :items="items" />
+  <VcAccordion
+    v-model="openItem"
+    :items="items"
+  />
   <p>Currently open: {{ openItem }}</p>
 </template>
 
@@ -136,7 +143,11 @@ The `content` property in `AccordionItem` accepts both strings and Vue component
 
 ```vue
 <template>
-  <VcAccordion v-model="activeQuestion" :items="faqs" variant="separated" />
+  <VcAccordion
+    v-model="activeQuestion"
+    :items="faqs"
+    variant="separated"
+  />
 </template>
 
 <script setup lang="ts">
@@ -181,61 +192,61 @@ Both render together -- items-prop items appear first, then slot content. Omit `
 
 ```ts
 interface AccordionItem {
-  id?: string | number;        // Unique identifier (falls back to array index)
-  title: string;               // Header text
+  id?: string | number; // Unique identifier (falls back to array index)
+  title: string; // Header text
   content?: string | Component; // Body content (string or Vue component)
-  titleSlot?: Component;       // Custom title component (alternative to #title slot)
-  collapsedHeight?: number;    // Per-item collapsed height override (px)
-  maxExpandedHeight?: number;  // Per-item max expanded height override (px)
-  disabled?: boolean;          // Prevents toggling this item
+  titleSlot?: Component; // Custom title component (alternative to #title slot)
+  collapsedHeight?: number; // Per-item collapsed height override (px)
+  maxExpandedHeight?: number; // Per-item max expanded height override (px)
+  disabled?: boolean; // Prevents toggling this item
 }
 ```
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `items` | `AccordionItem[]` | `[]` | Array of items to render |
-| `modelValue` | `(string \| number) \| (string \| number)[]` | -- | Controlled expanded state via `v-model` |
-| `multiple` | `boolean` | `false` | Allow multiple items to be expanded simultaneously |
-| `variant` | `"default" \| "bordered" \| "separated" \| "ghost"` | `"default"` | Visual style variant |
-| `collapsedHeight` | `number` | `0` | Default collapsed height in pixels for all items |
-| `maxExpandedHeight` | `number` | -- | Maximum expanded height (content scrolls if exceeded) |
+| Prop                | Type                                                | Default     | Description                                           |
+| ------------------- | --------------------------------------------------- | ----------- | ----------------------------------------------------- |
+| `items`             | `AccordionItem[]`                                   | `[]`        | Array of items to render                              |
+| `modelValue`        | `(string \| number) \| (string \| number)[]`        | --          | Controlled expanded state via `v-model`               |
+| `multiple`          | `boolean`                                           | `false`     | Allow multiple items to be expanded simultaneously    |
+| `variant`           | `"default" \| "bordered" \| "separated" \| "ghost"` | `"default"` | Visual style variant                                  |
+| `collapsedHeight`   | `number`                                            | `0`         | Default collapsed height in pixels for all items      |
+| `maxExpandedHeight` | `number`                                            | --          | Maximum expanded height (content scrolls if exceeded) |
 
 ## Events
 
-| Event | Payload | Description |
-|-------|---------|-------------|
+| Event               | Payload                                      | Description                          |
+| ------------------- | -------------------------------------------- | ------------------------------------ |
 | `update:modelValue` | `(string \| number) \| (string \| number)[]` | Emitted when expanded item(s) change |
 
 ## Slots
 
-| Slot | Description |
-|------|-------------|
+| Slot      | Description                                                      |
+| --------- | ---------------------------------------------------------------- |
 | `default` | Place `VcAccordionItem` components directly for custom rendering |
 
 ### VcAccordionItem Slots
 
-| Slot | Description |
-|------|-------------|
-| `title` | Custom title rendering (replaces the `title` prop text) |
-| `default` | Content body of the accordion item |
+| Slot      | Description                                             |
+| --------- | ------------------------------------------------------- |
+| `title`   | Custom title rendering (replaces the `title` prop text) |
+| `default` | Content body of the accordion item                      |
 
 ## CSS Variables
 
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `--accordion-item-border-color` | `var(--neutrals-200)` | Border color for items and dividers |
-| `--accordion-item-border-radius` | `6px` | Border radius of item containers |
-| `--accordion-item-header-padding` | `12px 16px` | Header button padding |
-| `--accordion-item-header-background` | `var(--additional-50)` | Header background color |
-| `--accordion-item-header-background-hover` | `var(--neutrals-50)` | Header background on hover |
-| `--accordion-item-header-color` | `var(--secondary-950)` | Header text color |
-| `--accordion-item-content-padding` | `16px` | Content body padding |
-| `--accordion-item-content-background` | `var(--additional-50)` | Content body background |
-| `--accordion-item-transition-duration` | `300ms` | Expand/collapse animation duration |
-| `--accordion-item-fade-height` | `60px` | Fade gradient height on collapsed preview |
-| `--accordion-item-focus-ring-color` | `var(--primary-100)` | Focus ring color for keyboard navigation |
+| Variable                                   | Default                | Description                               |
+| ------------------------------------------ | ---------------------- | ----------------------------------------- |
+| `--accordion-item-border-color`            | `var(--neutrals-200)`  | Border color for items and dividers       |
+| `--accordion-item-border-radius`           | `6px`                  | Border radius of item containers          |
+| `--accordion-item-header-padding`          | `12px 16px`            | Header button padding                     |
+| `--accordion-item-header-background`       | `var(--additional-50)` | Header background color                   |
+| `--accordion-item-header-background-hover` | `var(--neutrals-50)`   | Header background on hover                |
+| `--accordion-item-header-color`            | `var(--secondary-950)` | Header text color                         |
+| `--accordion-item-content-padding`         | `16px`                 | Content body padding                      |
+| `--accordion-item-content-background`      | `var(--additional-50)` | Content body background                   |
+| `--accordion-item-transition-duration`     | `300ms`                | Expand/collapse animation duration        |
+| `--accordion-item-fade-height`             | `60px`                 | Fade gradient height on collapsed preview |
+| `--accordion-item-focus-ring-color`        | `var(--primary-100)`   | Focus ring color for keyboard navigation  |
 
 > **Note:** The `ghost` variant overrides several variables to transparent/zero values for minimal appearance.
 

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

@@ -123,7 +123,10 @@ For applications built on the VC-Shell framework, manage breadcrumb state reacti
 
 ```vue
 <template>
-  <VcBreadcrumbs :items="breadcrumbs" separated />
+  <VcBreadcrumbs
+    :items="breadcrumbs"
+    separated
+  />
 </template>
 
 <script setup lang="ts">
@@ -148,11 +151,11 @@ remove(["products", "categories"]);
 
 **Composable API:**
 
-| Method | Signature | Description |
-|--------|-----------|-------------|
-| `breadcrumbs` | `ComputedRef<Breadcrumbs[]>` | Reactive array of current items |
-| `push` | `(item: Breadcrumbs) => void` | Add an item (deduplicates by `id`) |
-| `remove` | `(ids: string[]) => void` | Remove items by their IDs |
+| Method        | Signature                     | Description                        |
+| ------------- | ----------------------------- | ---------------------------------- |
+| `breadcrumbs` | `ComputedRef<Breadcrumbs[]>`  | Reactive array of current items    |
+| `push`        | `(item: Breadcrumbs) => void` | Add an item (deduplicates by `id`) |
+| `remove`      | `(ids: string[]) => void`     | Remove items by their IDs          |
 
 > **Note:** When `push` is called with an `id` that already exists, the existing entry is updated in place rather than duplicated.
 
@@ -237,27 +240,27 @@ clickHandler: () => { navigate(); return true; }
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `items` | `Breadcrumbs[]` | `[]` | Array of breadcrumb items to display |
-| `variant` | `"default" \| "light"` | `"default"` | Visual style variant |
-| `separated` | `boolean` | `false` | Show `/` separators between items |
-| `collapsed` | `boolean` | `false` | Force all items into the dropdown |
+| Prop        | Type                   | Default     | Description                          |
+| ----------- | ---------------------- | ----------- | ------------------------------------ |
+| `items`     | `Breadcrumbs[]`        | `[]`        | Array of breadcrumb items to display |
+| `variant`   | `"default" \| "light"` | `"default"` | Visual style variant                 |
+| `separated` | `boolean`              | `false`     | Show `/` separators between items    |
+| `collapsed` | `boolean`              | `false`     | Force all items into the dropdown    |
 
 ## Slots
 
-| Slot | Scope | Description |
-|------|-------|-------------|
+| Slot      | Scope                                      | Description                                                        |
+| --------- | ------------------------------------------ | ------------------------------------------------------------------ |
 | `trigger` | `{ click: () => void, isActive: boolean }` | Custom dropdown trigger button replacing the default ellipsis icon |
 
 ## CSS Variables
 
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `--separator-color` | `var(--neutrals-400)` | Color of the `/` separator character |
-| `--breadcrumbs-item-border-color` | `var(--secondary-300)` | Border color of breadcrumb items |
-| `--breadcrumbs-expand-button-color` | `var(--neutrals-500)` | Color of the overflow "more" button |
-| `--breadcrumbs-expand-button-color-hover` | `var(--neutrals-600)` | Hover color of the overflow button |
+| Variable                                  | Default                | Description                          |
+| ----------------------------------------- | ---------------------- | ------------------------------------ |
+| `--separator-color`                       | `var(--neutrals-400)`  | Color of the `/` separator character |
+| `--breadcrumbs-item-border-color`         | `var(--secondary-300)` | Border color of breadcrumb items     |
+| `--breadcrumbs-expand-button-color`       | `var(--neutrals-500)`  | Color of the overflow "more" button  |
+| `--breadcrumbs-expand-button-color-hover` | `var(--neutrals-600)`  | Hover color of the overflow button   |
 
 ## Accessibility