@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-col/vc-col.docs.md

@@ -20,15 +20,15 @@ A flexbox column layout primitive that stacks its children vertically. Designed
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `size` | `number` | `1` | Flex-grow value controlling how much space the column occupies relative to siblings |
+| Prop   | Type     | Default | Description                                                                         |
+| ------ | -------- | ------- | ----------------------------------------------------------------------------------- |
+| `size` | `number` | `1`     | Flex-grow value controlling how much space the column occupies relative to siblings |
 
 ## CSS Variables
 
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `--col-gap` | `0` | Vertical gap between child elements |
+| Variable    | Default | Description                         |
+| ----------- | ------- | ----------------------------------- |
+| `--col-gap` | `0`     | Vertical gap between child elements |
 
 ## Common Patterns
 
@@ -75,12 +75,29 @@ A common blade layout places metadata in a narrow sidebar column and form fields
 ```vue
 <template>
   <VcRow class="tw-gap-6">
-    <VcCol :size="3" class="tw-gap-4">
-      <VcInput label="Name" v-model="form.name" required />
-      <VcTextarea label="Description" v-model="form.description" />
-      <VcSelect label="Category" v-model="form.category" :options="categories" />
+    <VcCol
+      :size="3"
+      class="tw-gap-4"
+    >
+      <VcInput
+        label="Name"
+        v-model="form.name"
+        required
+      />
+      <VcTextarea
+        label="Description"
+        v-model="form.description"
+      />
+      <VcSelect
+        label="Category"
+        v-model="form.category"
+        :options="categories"
+      />
     </VcCol>
-    <VcCol :size="1" class="tw-gap-4">
+    <VcCol
+      :size="1"
+      class="tw-gap-4"
+    >
       <VcStatusIcon :status="form.isPublished" />
       <VcHint>Created: {{ form.createdDate }}</VcHint>
       <VcHint>Modified: {{ form.modifiedDate }}</VcHint>

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

@@ -19,32 +19,32 @@ A scrollable content wrapper that fills its parent, provides configurable paddin
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `shadow` | `boolean` | `false` | Shows an inset shadow when content overflows |
-| `noPadding` | `boolean` | `false` | Removes the default 16px inner padding |
-| `ariaLabel` | `string` | — | When provided, renders as `<section>` with this label instead of `<div>` |
+| Prop        | Type      | Default | Description                                                              |
+| ----------- | --------- | ------- | ------------------------------------------------------------------------ |
+| `shadow`    | `boolean` | `false` | Shows an inset shadow when content overflows                             |
+| `noPadding` | `boolean` | `false` | Removes the default 16px inner padding                                   |
+| `ariaLabel` | `string`  | —       | When provided, renders as `<section>` with this label instead of `<div>` |
 
 ## CSS Variables
 
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `--container-padding` | `16px` | Inner padding of the scrollable area |
-| `--container-bg` | `transparent` | Background color |
-| `--container-border-radius` | `0` | Border radius |
-| `--container-gap` | `0` | Gap between child elements |
+| Variable                    | Default       | Description                          |
+| --------------------------- | ------------- | ------------------------------------ |
+| `--container-padding`       | `16px`        | Inner padding of the scrollable area |
+| `--container-bg`            | `transparent` | Background color                     |
+| `--container-border-radius` | `0`           | Border radius                        |
+| `--container-gap`           | `0`           | Gap between child elements           |
 
 ## Exposed Methods
 
-| Method | Description |
-|--------|-------------|
+| Method        | Description                                      |
+| ------------- | ------------------------------------------------ |
 | `scrollTop()` | Programmatically scroll the container to the top |
-| `component` | Ref to the inner scrollable DOM element |
+| `component`   | Ref to the inner scrollable DOM element          |
 
 ## Events
 
-| Event | Payload | Description |
-|-------|---------|-------------|
+| Event    | Payload | Description                   |
+| -------- | ------- | ----------------------------- |
 | `scroll` | `Event` | Emitted on every scroll event |
 
 ## Common Patterns
@@ -88,7 +88,10 @@ function scrollToTop() {
 </script>
 
 <template>
-  <VcContainer ref="containerRef" shadow>
+  <VcContainer
+    ref="containerRef"
+    shadow
+  >
     <!-- long content -->
   </VcContainer>
   <VcButton @click="scrollToTop">Back to Top</VcButton>

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

@@ -18,19 +18,19 @@ A small text component for displaying helper text, validation messages, or suppl
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `id` | `string` | -- | Optional id for linking with `aria-describedby` on the associated input |
-| `error` | `boolean` | `false` | Shows the hint in error state (danger color) |
+| Prop    | Type      | Default | Description                                                             |
+| ------- | --------- | ------- | ----------------------------------------------------------------------- |
+| `id`    | `string`  | --      | Optional id for linking with `aria-describedby` on the associated input |
+| `error` | `boolean` | `false` | Shows the hint in error state (danger color)                            |
 
 ## CSS Variables
 
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `--hint-color` | `var(--neutrals-500)` | Default text color |
-| `--hint-error-color` | `var(--danger-500)` | Text color in error state |
-| `--hint-font-size` | `12px` | Font size |
-| `--hint-line-height` | `1.4` | Line height |
+| Variable             | Default               | Description               |
+| -------------------- | --------------------- | ------------------------- |
+| `--hint-color`       | `var(--neutrals-500)` | Default text color        |
+| `--hint-error-color` | `var(--danger-500)`   | Text color in error state |
+| `--hint-font-size`   | `12px`                | Font size                 |
+| `--hint-line-height` | `1.4`                 | Line height               |
 
 ## Common Patterns
 
@@ -82,10 +82,11 @@ const isOverLimit = computed(() => remaining.value < 0);
 </script>
 
 <template>
-  <VcTextarea label="Description" v-model="description" />
-  <VcHint :error="isOverLimit">
-    {{ remaining }} characters remaining
-  </VcHint>
+  <VcTextarea
+    label="Description"
+    v-model="description"
+  />
+  <VcHint :error="isOverLimit"> {{ remaining }} characters remaining </VcHint>
 </template>
 ```
 
@@ -95,9 +96,17 @@ Show helper text by default, but swap to an error message when validation fails:
 
 ```vue
 <template>
-  <VcInput label="Slug" v-model="slug" :error="!!slugError" aria-describedby="slug-hint" />
-  <VcHint id="slug-hint" :error="!!slugError">
-    {{ slugError || 'URL-friendly identifier. Use lowercase letters and hyphens.' }}
+  <VcInput
+    label="Slug"
+    v-model="slug"
+    :error="!!slugError"
+    aria-describedby="slug-hint"
+  />
+  <VcHint
+    id="slug-hint"
+    :error="!!slugError"
+  >
+    {{ slugError || "URL-friendly identifier. Use lowercase letters and hyphens." }}
   </VcHint>
 </template>
 ```

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

@@ -17,37 +17,37 @@ A unified icon component that renders icons from multiple libraries. Lucide Icon
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `icon` | `string \| Component` | `"lucide-square"` | Icon identifier or Vue component |
-| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl" \| "xxl" \| "xxxl"` | `"m"` | Predefined size |
-| `variant` | `"warning" \| "danger" \| "success"` | — | Semantic color variant |
-| `customSize` | `number` | — | Custom size in pixels (overrides `size`) |
-| `ariaLabel` | `string` | — | Accessible label for meaningful icons |
-| `basePath` | `string` | `"/assets/icons"` | Base path for SVG sprite icons |
+| Prop         | Type                                                   | Default           | Description                              |
+| ------------ | ------------------------------------------------------ | ----------------- | ---------------------------------------- |
+| `icon`       | `string \| Component`                                  | `"lucide-square"` | Icon identifier or Vue component         |
+| `size`       | `"xs" \| "s" \| "m" \| "l" \| "xl" \| "xxl" \| "xxxl"` | `"m"`             | Predefined size                          |
+| `variant`    | `"warning" \| "danger" \| "success"`                   | —                 | Semantic color variant                   |
+| `customSize` | `number`                                               | —                 | Custom size in pixels (overrides `size`) |
+| `ariaLabel`  | `string`                                               | —                 | Accessible label for meaningful icons    |
+| `basePath`   | `string`                                               | `"/assets/icons"` | Base path for SVG sprite icons           |
 
 ## Size Reference
 
-| Size | Pixels |
-|------|--------|
-| `xs` | 12px |
-| `s` | 14px |
-| `m` | 18px |
-| `l` | 20px |
-| `xl` | 22px |
-| `xxl` | 30px |
-| `xxxl` | 64px |
+| Size   | Pixels |
+| ------ | ------ |
+| `xs`   | 12px   |
+| `s`    | 14px   |
+| `m`    | 18px   |
+| `l`    | 20px   |
+| `xl`   | 22px   |
+| `xxl`  | 30px   |
+| `xxxl` | 64px   |
 
 ## Icon Prefix Guide
 
-| Prefix | Library | Status |
-|--------|---------|--------|
-| `lucide-` | Lucide Icons | Standard (recommended) |
-| `fa-` / `fas fa-` | Font Awesome | Deprecated |
-| `bi-` | Bootstrap Icons | Deprecated |
-| `material-` | Material Symbols | Deprecated |
-| `svg:` | SVG sprite file | Supported |
-| _(Component)_ | Vue component instance | Supported |
+| Prefix            | Library                | Status                 |
+| ----------------- | ---------------------- | ---------------------- |
+| `lucide-`         | Lucide Icons           | Standard (recommended) |
+| `fa-` / `fas fa-` | Font Awesome           | Deprecated             |
+| `bi-`             | Bootstrap Icons        | Deprecated             |
+| `material-`       | Material Symbols       | Deprecated             |
+| `svg:`            | SVG sprite file        | Supported              |
+| _(Component)_     | Vue component instance | Supported              |
 
 ## Common Patterns
 
@@ -75,12 +75,7 @@ A unified icon component that renders icons from multiple libraries. Lucide Icon
 ### Meaningful Icon with Accessible Label
 
 ```vue
-<VcIcon
-  icon="lucide-triangle-alert"
-  variant="warning"
-  size="l"
-  aria-label="Warning: low stock"
-/>
+<VcIcon icon="lucide-triangle-alert" variant="warning" size="l" aria-label="Warning: low stock" />
 ```
 
 ### Custom Vue Component as Icon
@@ -92,7 +87,10 @@ import MyCustomIcon from "./MyCustomIcon.vue";
 </script>
 
 <template>
-  <VcIcon :icon="MyCustomIcon" size="l" />
+  <VcIcon
+    :icon="MyCustomIcon"
+    size="l"
+  />
 </template>
 ```
 

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

@@ -17,30 +17,30 @@ An image display component with predefined sizes, aspect ratio control, and a pl
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `src` | `string` | — | Image URL; shows a placeholder icon when empty |
-| `size` | `"auto" \| "xxs" \| "xs" \| "s" \| "m" \| "l" \| "xl" \| "xxl"` | `"auto"` | Predefined width |
-| `aspect` | `"1x1" \| "16x9" \| "4x3" \| "3x2"` | `"1x1"` | Aspect ratio of the container |
-| `background` | `"cover" \| "contain" \| "auto"` | `"cover"` | CSS background-size mode |
-| `rounded` | `boolean` | `false` | Applies fully rounded corners (circular on 1x1) |
-| `bordered` | `boolean` | `false` | Adds a subtle border |
-| `clickable` | `boolean` | `false` | Makes the image interactive with cursor and click event |
-| `emptyIcon` | `string` | `"lucide-image"` | Icon shown when `src` is empty |
-| `alt` | `string` | — | Accessible alt text |
-| `thumbnailSize` | `ThumbnailSize` | — | Load a thumbnail variant instead of full-size image. Values: `"sm"`, `"md"`, `"lg"`, `"64x64"`, `"128x128"`, `"168x168"`, `"216x216"`, `"348x348"` |
+| Prop            | Type                                                            | Default          | Description                                                                                                                                        |
+| --------------- | --------------------------------------------------------------- | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `src`           | `string`                                                        | —                | Image URL; shows a placeholder icon when empty                                                                                                     |
+| `size`          | `"auto" \| "xxs" \| "xs" \| "s" \| "m" \| "l" \| "xl" \| "xxl"` | `"auto"`         | Predefined width                                                                                                                                   |
+| `aspect`        | `"1x1" \| "16x9" \| "4x3" \| "3x2"`                             | `"1x1"`          | Aspect ratio of the container                                                                                                                      |
+| `background`    | `"cover" \| "contain" \| "auto"`                                | `"cover"`        | CSS background-size mode                                                                                                                           |
+| `rounded`       | `boolean`                                                       | `false`          | Applies fully rounded corners (circular on 1x1)                                                                                                    |
+| `bordered`      | `boolean`                                                       | `false`          | Adds a subtle border                                                                                                                               |
+| `clickable`     | `boolean`                                                       | `false`          | Makes the image interactive with cursor and click event                                                                                            |
+| `emptyIcon`     | `string`                                                        | `"lucide-image"` | Icon shown when `src` is empty                                                                                                                     |
+| `alt`           | `string`                                                        | —                | Accessible alt text                                                                                                                                |
+| `thumbnailSize` | `ThumbnailSize`                                                 | —                | Load a thumbnail variant instead of full-size image. Values: `"sm"`, `"md"`, `"lg"`, `"64x64"`, `"128x128"`, `"168x168"`, `"216x216"`, `"348x348"` |
 
 ## Size Reference
 
-| Size | Width |
-|------|-------|
-| `xxs` | 24px |
-| `xs` | 32px |
-| `s` | 48px |
-| `m` | 64px |
-| `l` | 96px |
-| `xl` | 128px |
-| `xxl` | 145px |
+| Size   | Width          |
+| ------ | -------------- |
+| `xxs`  | 24px           |
+| `xs`   | 32px           |
+| `s`    | 48px           |
+| `m`    | 64px           |
+| `l`    | 96px           |
+| `xl`   | 128px          |
+| `xxl`  | 145px          |
 | `auto` | 100% of parent |
 
 ## Common Patterns
@@ -48,48 +48,25 @@ An image display component with predefined sizes, aspect ratio control, and a pl
 ### Product Thumbnail in a List
 
 ```vue
-<VcImage
-  :src="product.primaryImage"
-  size="s"
-  aspect="1x1"
-  bordered
-  :alt="product.name"
-/>
+<VcImage :src="product.primaryImage" size="s" aspect="1x1" bordered :alt="product.name" />
 ```
 
 ### Profile Avatar
 
 ```vue
-<VcImage
-  :src="user.avatarUrl"
-  size="m"
-  rounded
-  :alt="user.displayName"
-/>
+<VcImage :src="user.avatarUrl" size="m" rounded :alt="user.displayName" />
 ```
 
 ### Widescreen Banner
 
 ```vue
-<VcImage
-  :src="category.bannerUrl"
-  aspect="16x9"
-  background="cover"
-  alt="Category banner"
-/>
+<VcImage :src="category.bannerUrl" aspect="16x9" background="cover" alt="Category banner" />
 ```
 
 ### Clickable Gallery Image
 
 ```vue
-<VcImage
-  :src="image.url"
-  size="l"
-  bordered
-  clickable
-  :alt="image.caption"
-  @click="openLightbox(image)"
-/>
+<VcImage :src="image.url" size="l" bordered clickable :alt="image.caption" @click="openLightbox(image)" />
 ```
 
 ### Empty State Placeholder

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

@@ -22,31 +22,31 @@ A form field label component with support for required indicators, info tooltips
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `required` | `boolean` | `false` | Shows a red asterisk after the label text |
-| `error` | `boolean` | `false` | Renders the label in error state (danger color) |
-| `htmlFor` | `string` | -- | Links the label to an input; when set, renders as `<label for="...">` |
-| `tooltipIcon` | `string` | `"lucide-info"` | Icon used for the tooltip trigger |
-| `multilanguage` | `boolean` | `false` | Shows a language indicator badge |
-| `currentLanguage` | `string` | -- | Language code displayed in the badge (e.g. `"EN"`, `"DE"`) |
+| Prop              | Type      | Default         | Description                                                           |
+| ----------------- | --------- | --------------- | --------------------------------------------------------------------- |
+| `required`        | `boolean` | `false`         | Shows a red asterisk after the label text                             |
+| `error`           | `boolean` | `false`         | Renders the label in error state (danger color)                       |
+| `htmlFor`         | `string`  | --              | Links the label to an input; when set, renders as `<label for="...">` |
+| `tooltipIcon`     | `string`  | `"lucide-info"` | Icon used for the tooltip trigger                                     |
+| `multilanguage`   | `boolean` | `false`         | Shows a language indicator badge                                      |
+| `currentLanguage` | `string`  | --              | Language code displayed in the badge (e.g. `"EN"`, `"DE"`)            |
 
 ## Slots
 
-| Slot | Description |
-|------|-------------|
-| `default` | Label text content |
+| Slot      | Description                                  |
+| --------- | -------------------------------------------- |
+| `default` | Label text content                           |
 | `tooltip` | Content displayed inside the tooltip popover |
 
 ## CSS Custom Properties
 
-| Variable | Default | Description |
-|---|---|---|
-| `--label-text-color` | `var(--neutrals-700)` | Default text color |
-| `--label-required-color` | `var(--danger-500)` | Color of the required asterisk |
-| `--label-tooltip-color` | `var(--neutrals-400)` | Tooltip icon color |
-| `--label-lang-color` | `var(--neutrals-500)` | Language badge text color |
-| `--label-error-color` | `var(--danger-500)` | Text color in error state |
+| Variable                 | Default               | Description                    |
+| ------------------------ | --------------------- | ------------------------------ |
+| `--label-text-color`     | `var(--neutrals-700)` | Default text color             |
+| `--label-required-color` | `var(--danger-500)`   | Color of the required asterisk |
+| `--label-tooltip-color`  | `var(--neutrals-400)` | Tooltip icon color             |
+| `--label-lang-color`     | `var(--neutrals-500)` | Language badge text color      |
+| `--label-error-color`    | `var(--danger-500)`   | Text color in error state      |
 
 ## Common Patterns
 
@@ -92,11 +92,13 @@ Compose VcLabel, an input, and VcHint into a reusable field pattern:
 ```vue
 <template>
   <div class="tw-space-y-1">
-    <VcLabel html-for="slug" required :error="!!slugError">
+    <VcLabel
+      html-for="slug"
+      required
+      :error="!!slugError"
+    >
       URL Slug
-      <template #tooltip>
-        The URL-friendly identifier for this page. Auto-generated from the title if left blank.
-      </template>
+      <template #tooltip> The URL-friendly identifier for this page. Auto-generated from the title if left blank. </template>
     </VcLabel>
     <VcInput
       id="slug"
@@ -105,8 +107,11 @@ Compose VcLabel, an input, and VcHint into a reusable field pattern:
       aria-describedby="slug-hint"
       aria-required="true"
     />
-    <VcHint id="slug-hint" :error="!!slugError">
-      {{ slugError || 'Lowercase letters, numbers, and hyphens only.' }}
+    <VcHint
+      id="slug-hint"
+      :error="!!slugError"
+    >
+      {{ slugError || "Lowercase letters, numbers, and hyphens only." }}
     </VcHint>
   </div>
 </template>

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

@@ -27,16 +27,16 @@ function openDetails() {
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `active` | `boolean` | `false` | Highlights the link as currently selected |
+| Prop       | Type      | Default | Description                                    |
+| ---------- | --------- | ------- | ---------------------------------------------- |
+| `active`   | `boolean` | `false` | Highlights the link as currently selected      |
 | `disabled` | `boolean` | `false` | Prevents interaction and applies muted styling |
 
 ## Events
 
-| Event | Payload | Description |
-|-------|---------|-------------|
-| `click` | none | Fired when the link is clicked (suppressed when `disabled`) |
+| Event   | Payload | Description                                                 |
+| ------- | ------- | ----------------------------------------------------------- |
+| `click` | none    | Fired when the link is clicked (suppressed when `disabled`) |
 
 ## Common Patterns
 
@@ -45,8 +45,16 @@ function openDetails() {
 ```vue
 <template>
   <div class="tw-flex tw-gap-4">
-    <VcLink :active="currentTab === 'home'" @click="currentTab = 'home'">Home</VcLink>
-    <VcLink :active="currentTab === 'products'" @click="currentTab = 'products'">Products</VcLink>
+    <VcLink
+      :active="currentTab === 'home'"
+      @click="currentTab = 'home'"
+      >Home</VcLink
+    >
+    <VcLink
+      :active="currentTab === 'products'"
+      @click="currentTab = 'products'"
+      >Products</VcLink
+    >
     <VcLink disabled>Admin</VcLink>
   </div>
 </template>
@@ -105,13 +113,13 @@ const activeTab = ref("Overview");
 
 ## CSS Custom Properties
 
-| Variable | Default | Description |
-|---|---|---|
-| `--link-text-color` | `var(--primary-500)` | Default text color |
-| `--link-text-color-hover` | `var(--primary-400)` | Text color on hover |
-| `--link-text-color-active` | `var(--primary-700)` | Text color in active state |
-| `--link-text-color-disabled` | `var(--neutrals-300)` | Text color when disabled |
-| `--link-focus-ring-color` | `primary-500 at 30%` | Focus ring color |
+| Variable                     | Default               | Description                |
+| ---------------------------- | --------------------- | -------------------------- |
+| `--link-text-color`          | `var(--primary-500)`  | Default text color         |
+| `--link-text-color-hover`    | `var(--primary-400)`  | Text color on hover        |
+| `--link-text-color-active`   | `var(--primary-700)`  | Text color in active state |
+| `--link-text-color-disabled` | `var(--neutrals-300)` | Text color when disabled   |
+| `--link-focus-ring-color`    | `primary-500 at 30%`  | Focus ring color           |
 
 ## Tips
 

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

@@ -31,20 +31,20 @@ const isLoading = ref(true);
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
+| Prop     | Type      | Default | Description                 |
+| -------- | --------- | ------- | --------------------------- |
 | `active` | `boolean` | `false` | Controls overlay visibility |
 
 ## CSS Custom Properties
 
-| Variable | Default | Description |
-|---|---|---|
-| `--loading-bar-color` | `var(--primary-500)` | Progress bar fill color |
-| `--loading-bar-track` | `var(--primary-100)` | Progress bar track background |
-| `--loading-overlay-bg` | `rgba(255,255,255,0.6)` | Overlay background color |
-| `--loading-bar-width` | `140px` | Width of the progress bar |
-| `--loading-bar-height` | `4px` | Height of the progress bar |
-| `--loading-z-index` | `9998` | Z-index of the overlay layer |
+| Variable               | Default                 | Description                   |
+| ---------------------- | ----------------------- | ----------------------------- |
+| `--loading-bar-color`  | `var(--primary-500)`    | Progress bar fill color       |
+| `--loading-bar-track`  | `var(--primary-100)`    | Progress bar track background |
+| `--loading-overlay-bg` | `rgba(255,255,255,0.6)` | Overlay background color      |
+| `--loading-bar-width`  | `140px`                 | Width of the progress bar     |
+| `--loading-bar-height` | `4px`                   | Height of the progress bar    |
+| `--loading-z-index`    | `9998`                  | Z-index of the overlay layer  |
 
 ## Recipe: Loading State in a Blade
 
@@ -55,11 +55,17 @@ Blades have a built-in loading mechanism, but you can use VcLoading to cover a s
   <VcBlade title="Product Details">
     <div class="tw-relative tw-min-h-[200px]">
       <VcLoading :active="isLoadingChart" />
-      <RevenueChart v-if="chartData" :data="chartData" />
+      <RevenueChart
+        v-if="chartData"
+        :data="chartData"
+      />
     </div>
 
     <!-- The rest of the blade loads independently -->
-    <VcInput v-model="product.name" label="Name" />
+    <VcInput
+      v-model="product.name"
+      label="Name"
+    />
   </VcBlade>
 </template>
 ```
@@ -89,7 +95,10 @@ Override the bar color to match a specific status or brand theme:
 
 ```vue
 <template>
-  <div class="tw-relative tw-h-40" style="--loading-bar-color: var(--success-500); --loading-bar-track: var(--success-100);">
+  <div
+    class="tw-relative tw-h-40"
+    style="--loading-bar-color: var(--success-500); --loading-bar-track: var(--success-100);"
+  >
     <VcLoading :active="isSaving" />
     <span>Saving changes...</span>
   </div>