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

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

@@ -18,7 +18,10 @@ A toggle switch component for binary on/off choices. Renders as a sliding track
 
 ```vue
 <template>
-  <VcSwitch v-model="isEnabled" label="Enable feature" />
+  <VcSwitch
+    v-model="isEnabled"
+    label="Enable feature"
+  />
 </template>
 
 <script setup lang="ts">
@@ -36,12 +39,7 @@ const isEnabled = ref(false);
 The `label` prop renders text above the switch. Use `hint` for helper text below the track, and `labelTooltip` for an info icon on the label itself.
 
 ```vue
-<VcSwitch
-  v-model="settings.darkMode"
-  label="Dark mode"
-  hint="Changes take effect immediately"
-  label-tooltip="Applies to the admin panel only"
-/>
+<VcSwitch v-model="settings.darkMode" label="Dark mode" hint="Changes take effect immediately" label-tooltip="Applies to the admin panel only" />
 ```
 
 > **Important:** The `tooltip` prop is deprecated. It previously rendered as hint text below the switch (not as a true tooltip). Use `hint` for text below the switch, or `labelTooltip` for the label info icon. A console warning is emitted in development mode if `tooltip` is used.
@@ -52,12 +50,7 @@ By default, `v-model` maps `true` to the checked (on) state and `false` to unche
 
 ```vue
 <!-- Data model: isHidden=true means the item is NOT visible -->
-<VcSwitch
-  v-model="product.isHidden"
-  label="Visible on storefront"
-  :true-value="false"
-  :false-value="true"
-/>
+<VcSwitch v-model="product.isHidden" label="Visible on storefront" :true-value="false" :false-value="true" />
 ```
 
 When `trueValue` is `false`, the switch shows as "on" when `modelValue` is `false`, which lets you present affirmative labels ("Visible") even when the underlying boolean is negative ("isHidden").
@@ -109,12 +102,7 @@ const form = reactive({
 <VcSwitch :model-value="false" label="Unavailable feature" disabled />
 
 <!-- Error state -->
-<VcSwitch
-  v-model="value"
-  label="Accept terms"
-  :error="true"
-  error-message="You must accept the terms"
-/>
+<VcSwitch v-model="value" label="Accept terms" :error="true" error-message="You must accept the terms" />
 ```
 
 ### In a Settings Form
@@ -127,14 +115,23 @@ Switches work well stacked in settings panels:
     <VcRow>
       <VcCol size="6">
         <div class="tw-space-y-4">
-          <VcSwitch v-model="settings.emailNotifications" label="Email notifications" />
-          <VcSwitch v-model="settings.pushNotifications" label="Push notifications" />
+          <VcSwitch
+            v-model="settings.emailNotifications"
+            label="Email notifications"
+          />
+          <VcSwitch
+            v-model="settings.pushNotifications"
+            label="Push notifications"
+          />
           <VcSwitch
             v-model="settings.marketingEmails"
             label="Marketing emails"
             hint="Receive news about promotions and updates"
           />
-          <VcSwitch v-model="settings.twoFactorAuth" label="Two-factor authentication" />
+          <VcSwitch
+            v-model="settings.twoFactorAuth"
+            label="Two-factor authentication"
+          />
         </div>
       </VcCol>
     </VcRow>
@@ -179,12 +176,7 @@ Use a switch to show or hide additional fields dynamically:
 ```vue
 <VcSwitch v-model="hasExpiration" label="Set expiration date" />
 
-<VcDatePicker
-  v-if="hasExpiration"
-  v-model="expirationDate"
-  label="Expiration date"
-  required
-/>
+<VcDatePicker v-if="hasExpiration" v-model="expirationDate" label="Expiration date" required />
 ```
 
 ## Common Mistakes
@@ -235,52 +227,52 @@ const isActive = ref(true);
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `modelValue` | `boolean \| undefined` | -- | Bound value via `v-model` |
-| `label` | `string` | -- | Label text above the switch |
-| `hint` | `string` | -- | Helper text displayed below the switch |
-| `labelTooltip` | `string` | -- | Tooltip shown on the label info icon |
-| `tooltip` | `string` | -- | **Deprecated.** Use `hint` or `labelTooltip` instead |
-| `trueValue` | `boolean` | `true` | Value that represents the checked state |
-| `falseValue` | `boolean` | `false` | Value that represents the unchecked state |
-| `disabled` | `boolean` | `false` | Disables the switch |
-| `required` | `boolean` | `false` | Shows a required indicator on the label |
-| `error` | `boolean` | `false` | Enables error styling |
-| `errorMessage` | `string` | -- | Error message displayed below the switch |
-| `name` | `string` | -- | HTML name attribute for the hidden input |
+| Prop           | Type                   | Default | Description                                          |
+| -------------- | ---------------------- | ------- | ---------------------------------------------------- |
+| `modelValue`   | `boolean \| undefined` | --      | Bound value via `v-model`                            |
+| `label`        | `string`               | --      | Label text above the switch                          |
+| `hint`         | `string`               | --      | Helper text displayed below the switch               |
+| `labelTooltip` | `string`               | --      | Tooltip shown on the label info icon                 |
+| `tooltip`      | `string`               | --      | **Deprecated.** Use `hint` or `labelTooltip` instead |
+| `trueValue`    | `boolean`              | `true`  | Value that represents the checked state              |
+| `falseValue`   | `boolean`              | `false` | Value that represents the unchecked state            |
+| `disabled`     | `boolean`              | `false` | Disables the switch                                  |
+| `required`     | `boolean`              | `false` | Shows a required indicator on the label              |
+| `error`        | `boolean`              | `false` | Enables error styling                                |
+| `errorMessage` | `string`               | --      | Error message displayed below the switch             |
+| `name`         | `string`               | --      | HTML name attribute for the hidden input             |
 
 ## Events
 
-| Event | Payload | Description |
-|-------|---------|-------------|
+| Event               | Payload                | Description                        |
+| ------------------- | ---------------------- | ---------------------------------- |
 | `update:modelValue` | `boolean \| undefined` | Emitted when the switch is toggled |
 
 ## Slots
 
-| Slot | Description |
-|------|-------------|
+| Slot    | Description                                                       |
+| ------- | ----------------------------------------------------------------- |
 | `error` | Custom error message markup. Replaces the default `VcHint` error. |
 
 ## CSS Variables
 
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `--switch-width` | `36px` | Track width |
-| `--switch-height` | `20px` | Track height |
-| `--switch-thumb-size` | `16px` | Thumb diameter |
-| `--switch-translate` | `16px` | Thumb travel distance when checked |
-| `--switch-active-color` | `var(--primary-500)` | Track color when checked |
-| `--switch-inactive-color` | `var(--neutrals-300)` | Track color when unchecked |
-| `--switch-hover-active-color` | `var(--primary-600)` | Hover track color when checked |
-| `--switch-hover-inactive-color` | `var(--neutrals-400)` | Hover track color when unchecked |
-| `--switch-thumb-color` | `var(--additional-50)` | Thumb background color |
-| `--switch-thumb-shadow` | `0 1px 3px rgba(0,0,0,0.1)` | Thumb box shadow |
-| `--switch-focus-ring-color` | `var(--primary-100)` | Focus ring color |
-| `--switch-error-ring-color` | `var(--danger-100)` | Error ring color |
-| `--switch-error-border-color` | `var(--danger-500)` | Error border color |
-| `--switch-border-radius` | `9999px` | Track border radius |
-| `--switch-disabled-opacity` | `0.5` | Opacity when disabled |
+| Variable                        | Default                     | Description                        |
+| ------------------------------- | --------------------------- | ---------------------------------- |
+| `--switch-width`                | `36px`                      | Track width                        |
+| `--switch-height`               | `20px`                      | Track height                       |
+| `--switch-thumb-size`           | `16px`                      | Thumb diameter                     |
+| `--switch-translate`            | `16px`                      | Thumb travel distance when checked |
+| `--switch-active-color`         | `var(--primary-500)`        | Track color when checked           |
+| `--switch-inactive-color`       | `var(--neutrals-300)`       | Track color when unchecked         |
+| `--switch-hover-active-color`   | `var(--primary-600)`        | Hover track color when checked     |
+| `--switch-hover-inactive-color` | `var(--neutrals-400)`       | Hover track color when unchecked   |
+| `--switch-thumb-color`          | `var(--additional-50)`      | Thumb background color             |
+| `--switch-thumb-shadow`         | `0 1px 3px rgba(0,0,0,0.1)` | Thumb box shadow                   |
+| `--switch-focus-ring-color`     | `var(--primary-100)`        | Focus ring color                   |
+| `--switch-error-ring-color`     | `var(--danger-100)`         | Error ring color                   |
+| `--switch-error-border-color`   | `var(--danger-500)`         | Error border color                 |
+| `--switch-border-radius`        | `9999px`                    | Track border radius                |
+| `--switch-disabled-opacity`     | `0.5`                       | Opacity when disabled              |
 
 ## Accessibility
 
@@ -302,4 +294,3 @@ const isActive = ref(true);
 ## 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-textarea/vc-textarea.docs.md

@@ -17,7 +17,11 @@ A multi-line text input field for entering and editing large blocks of text. Pro
 
 ```vue
 <template>
-  <VcTextarea v-model="description" label="Description" placeholder="Enter description..." />
+  <VcTextarea
+    v-model="description"
+    label="Description"
+    placeholder="Enter description..."
+  />
 </template>
 
 <script setup lang="ts">
@@ -35,12 +39,7 @@ const description = ref("");
 Set `maxlength` to restrict the number of characters. The browser enforces the limit natively on the `<textarea>` element.
 
 ```vue
-<VcTextarea
-  v-model="bio"
-  label="Short bio"
-  maxlength="200"
-  hint="Maximum 200 characters"
-/>
+<VcTextarea v-model="bio" label="Short bio" maxlength="200" hint="Maximum 200 characters" />
 ```
 
 > **Tip:** Combine `maxlength` with a `hint` slot to show a live character counter if your form requires one.
@@ -50,12 +49,7 @@ Set `maxlength` to restrict the number of characters. The browser enforces the l
 Use `hint` for helper text below the field, and `tooltip` for an info icon on the label.
 
 ```vue
-<VcTextarea
-  v-model="notes"
-  label="Internal notes"
-  hint="These notes are visible only to administrators"
-  tooltip="Will not appear on the public storefront"
-/>
+<VcTextarea v-model="notes" label="Internal notes" hint="These notes are visible only to administrators" tooltip="Will not appear on the public storefront" />
 ```
 
 When an error message is present, the hint is automatically hidden and replaced by the error message. The transition between them is animated.
@@ -65,13 +59,7 @@ When an error message is present, the hint is automatically hidden and replaced
 When editing translatable content, enable the language badge on the label:
 
 ```vue
-<VcTextarea
-  v-model="localizedDescription"
-  label="Description"
-  multilanguage
-  current-language="en-US"
-  placeholder="Enter description in English..."
-/>
+<VcTextarea v-model="localizedDescription" label="Description" multilanguage current-language="en-US" placeholder="Enter description in English..." />
 ```
 
 ### Validation with vee-validate Field
@@ -119,12 +107,7 @@ const form = reactive({
 <VcTextarea v-model="value" label="Read-only notes" disabled />
 
 <!-- Error state -->
-<VcTextarea
-  v-model="value"
-  label="Comments"
-  :error="true"
-  error-message="Comments must not be empty"
-/>
+<VcTextarea v-model="value" label="Comments" :error="true" error-message="Comments must not be empty" />
 ```
 
 ## Recipes
@@ -139,7 +122,11 @@ A typical product-editing blade with a description textarea and character limit:
     <VcContainer>
       <VcRow>
         <VcCol size="8">
-          <VcInput v-model="product.name" label="Product name" required />
+          <VcInput
+            v-model="product.name"
+            label="Product name"
+            required
+          />
         </VcCol>
       </VcRow>
       <VcRow>
@@ -174,12 +161,7 @@ A typical product-editing blade with a description textarea and character limit:
 Override the default error rendering with the `error` slot:
 
 ```vue
-<VcTextarea
-  v-model="value"
-  label="JSON payload"
-  :error="!!jsonError"
-  :error-message="jsonError"
->
+<VcTextarea v-model="value" label="JSON payload" :error="!!jsonError" :error-message="jsonError">
   <template #error>
     <div class="tw-flex tw-items-center tw-gap-1 tw-text-[color:var(--danger-500)] tw-text-xs tw-mt-1">
       <VcIcon icon="lucide-alert-triangle" size="xs" />
@@ -239,57 +221,57 @@ const description = ref<string>("");
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `modelValue` | `string` | `undefined` | Bound value via `v-model` |
-| `label` | `string` | -- | Label text displayed above the textarea |
-| `placeholder` | `string` | -- | Placeholder text inside the empty textarea |
-| `hint` | `string` | -- | Helper text displayed below the field |
-| `tooltip` | `string` | -- | Tooltip on the label info icon |
-| `maxlength` | `string` | `"1024"` | Maximum character count (native HTML attribute) |
-| `required` | `boolean` | `false` | Shows a required indicator on the label |
-| `error` | `boolean` | `false` | Enables error styling (red border + ring) |
-| `errorMessage` | `string` | -- | Error message text below the field |
-| `disabled` | `boolean` | `false` | Disables the textarea |
-| `name` | `string` | `"Field"` | HTML name attribute |
-| `multilanguage` | `boolean` | `false` | Shows language badge on the label |
-| `currentLanguage` | `string` | -- | Language code displayed in the badge |
+| Prop              | Type      | Default     | Description                                     |
+| ----------------- | --------- | ----------- | ----------------------------------------------- |
+| `modelValue`      | `string`  | `undefined` | Bound value via `v-model`                       |
+| `label`           | `string`  | --          | Label text displayed above the textarea         |
+| `placeholder`     | `string`  | --          | Placeholder text inside the empty textarea      |
+| `hint`            | `string`  | --          | Helper text displayed below the field           |
+| `tooltip`         | `string`  | --          | Tooltip on the label info icon                  |
+| `maxlength`       | `string`  | `"1024"`    | Maximum character count (native HTML attribute) |
+| `required`        | `boolean` | `false`     | Shows a required indicator on the label         |
+| `error`           | `boolean` | `false`     | Enables error styling (red border + ring)       |
+| `errorMessage`    | `string`  | --          | Error message text below the field              |
+| `disabled`        | `boolean` | `false`     | Disables the textarea                           |
+| `name`            | `string`  | `"Field"`   | HTML name attribute                             |
+| `multilanguage`   | `boolean` | `false`     | Shows language badge on the label               |
+| `currentLanguage` | `string`  | --          | Language code displayed in the badge            |
 
 ## Events
 
-| Event | Payload | Description |
-|-------|---------|-------------|
+| Event               | Payload               | Description                      |
+| ------------------- | --------------------- | -------------------------------- |
 | `update:modelValue` | `string \| undefined` | Emitted on every input keystroke |
 
 ## Slots
 
-| Slot | Description |
-|------|-------------|
+| Slot    | Description                                                       |
+| ------- | ----------------------------------------------------------------- |
 | `error` | Custom error message markup. Replaces the default `VcHint` error. |
-| `hint` | Custom hint text markup. Replaces the default `VcHint`. |
+| `hint`  | Custom hint text markup. Replaces the default `VcHint`.           |
 
 ## Exposed Methods
 
-| Method | Description |
-|--------|-------------|
+| Method    | Description                                              |
+| --------- | -------------------------------------------------------- |
 | `focus()` | Programmatically focuses the native `<textarea>` element |
 
 ## CSS Variables
 
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `--textarea-height` | `120px` | Minimum height of the textarea |
-| `--textarea-border-color` | `var(--neutrals-300)` | Default border color |
-| `--textarea-border-color-focus` | `var(--primary-500)` | Border color on focus |
-| `--textarea-border-color-error` | `var(--danger-500)` | Border color in error state |
-| `--textarea-border-radius` | `6px` | Corner radius |
-| `--textarea-background-color` | `transparent` | Background color |
-| `--textarea-text-color` | `var(--neutrals-800)` | Text color |
-| `--textarea-text-color-error` | `var(--danger-500)` | Text color in error state |
-| `--textarea-placeholder-color` | `var(--neutrals-400)` | Placeholder text color |
-| `--textarea-focus-ring-color` | `var(--primary-100)` | Focus ring color |
-| `--textarea-error-ring-color` | `var(--danger-100)` | Error ring color |
-| `--textarea-disabled-text-color` | `var(--neutrals-500)` | Text color when disabled |
+| Variable                         | Default               | Description                    |
+| -------------------------------- | --------------------- | ------------------------------ |
+| `--textarea-height`              | `120px`               | Minimum height of the textarea |
+| `--textarea-border-color`        | `var(--neutrals-300)` | Default border color           |
+| `--textarea-border-color-focus`  | `var(--primary-500)`  | Border color on focus          |
+| `--textarea-border-color-error`  | `var(--danger-500)`   | Border color in error state    |
+| `--textarea-border-radius`       | `6px`                 | Corner radius                  |
+| `--textarea-background-color`    | `transparent`         | Background color               |
+| `--textarea-text-color`          | `var(--neutrals-800)` | Text color                     |
+| `--textarea-text-color-error`    | `var(--danger-500)`   | Text color in error state      |
+| `--textarea-placeholder-color`   | `var(--neutrals-400)` | Placeholder text color         |
+| `--textarea-focus-ring-color`    | `var(--primary-100)`  | Focus ring color               |
+| `--textarea-error-ring-color`    | `var(--danger-100)`   | Error ring color               |
+| `--textarea-disabled-text-color` | `var(--neutrals-500)` | Text color when disabled       |
 
 ## Accessibility
 
@@ -311,4 +293,3 @@ const description = ref<string>("");
 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-toast/vc-toast.docs.md

@@ -10,6 +10,7 @@ Toast notification component with type-based styling, auto-dismiss timer, swipe-
 - Rich notifications with custom component content
 
 When NOT to use:
+
 - For persistent alerts or banners -- use a dedicated alert component
 - For inline field validation -- use `VcHint` or form-level error display
 - For modal confirmations requiring user action -- use a dialog/modal
@@ -48,9 +49,9 @@ notification.error("Network error. Please try again.");
 notification.warning("You have unsaved changes");
 
 // With options
-notification("Quick note", { timeout: 2000 });           // Dismiss after 2 seconds
-notification("Please wait...", { timeout: false });        // Persistent (no auto-dismiss)
-notification("Hover me", { pauseOnHover: true });          // Pause timer on hover (default)
+notification("Quick note", { timeout: 2000 }); // Dismiss after 2 seconds
+notification("Please wait...", { timeout: false }); // Persistent (no auto-dismiss)
+notification("Hover me", { pauseOnHover: true }); // Pause timer on hover (default)
 ```
 
 Each call returns a unique `id` that can be used to update or remove the notification later.
@@ -99,11 +100,11 @@ Available positions: `"top-center"`, `"top-right"`, `"top-left"`, `"bottom-cente
 
 Each type displays a distinct icon and colored left accent border.
 
-| Type | Icon | Accent Color | Use Case |
-|------|------|-------------|----------|
-| `default` | Info circle | `--notification-info` | General information |
-| `success` | Check circle | `--notification-success` | Successful operations |
-| `error` | Alert circle | `--notification-error` | Failed operations, errors |
+| Type      | Icon           | Accent Color             | Use Case                     |
+| --------- | -------------- | ------------------------ | ---------------------------- |
+| `default` | Info circle    | `--notification-info`    | General information          |
+| `success` | Check circle   | `--notification-success` | Successful operations        |
+| `error`   | Alert circle   | `--notification-error`   | Failed operations, errors    |
 | `warning` | Alert triangle | `--notification-warning` | Caution, destructive actions |
 
 ### Custom Component Content
@@ -176,11 +177,11 @@ function deleteItem(item: { id: string; name: string }) {
   softDelete(item.id);
   const UndoContent = defineComponent({
     setup() {
-      const undo = () => { restoreItem(item.id); notification.remove(notifId); };
-      return () => h("div", { class: "tw-flex tw-gap-3" }, [
-        h("span", `"${item.name}" deleted.`),
-        h("button", { class: "tw-text-[color:var(--primary-600)] tw-underline", onClick: undo }, "Undo"),
-      ]);
+      const undo = () => {
+        restoreItem(item.id);
+        notification.remove(notifId);
+      };
+      return () => h("div", { class: "tw-flex tw-gap-3" }, [h("span", `"${item.name}" deleted.`), h("button", { class: "tw-text-[color:var(--primary-600)] tw-underline", onClick: undo }, "Undo")]);
     },
   });
   const notifId = notification(UndoContent, { timeout: 8000, pauseOnHover: true });
@@ -228,60 +229,60 @@ notification("Please wait...", { timeout: false });
 
 These props are used internally by the notification system. You rarely need to set them directly.
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `content` | `string \| Component` | -- | Notification message or custom component |
-| `notificationId` | `number \| string` | -- | Unique identifier |
-| `updateId` | `number \| string` | -- | ID for update tracking |
-| `type` | `"default" \| "success" \| "error" \| "warning"` | `"default"` | Notification type (determines icon and accent color) |
-| `timeout` | `number \| boolean` | `5000` | Auto-dismiss delay in ms, or `false` to disable |
-| `pauseOnHover` | `boolean` | `true` | Pause timeout while mouse hovers over the toast |
-| `limit` | `number` | -- | Maximum number of visible notifications |
-| `position` | `NotificationPosition` | `"top-center"` | Screen position for the toast |
-| `dismissing` | `boolean` | -- | Programmatic dismissal trigger |
-| `toastIndex` | `number` | `0` | Stack index (0 = front/newest) |
-| `toastsCount` | `number` | -- | Total number of toasts in the position stack |
-| `expanded` | `boolean` | `true` | Whether the toast group is in expanded (hovered) state |
-| `visibleToasts` | `number` | `3` | Maximum visible toasts in collapsed stack |
-| `onReportHeight` | `(id, height) => void` | -- | Callback to report measured height to container |
+| Prop             | Type                                             | Default        | Description                                            |
+| ---------------- | ------------------------------------------------ | -------------- | ------------------------------------------------------ |
+| `content`        | `string \| Component`                            | --             | Notification message or custom component               |
+| `notificationId` | `number \| string`                               | --             | Unique identifier                                      |
+| `updateId`       | `number \| string`                               | --             | ID for update tracking                                 |
+| `type`           | `"default" \| "success" \| "error" \| "warning"` | `"default"`    | Notification type (determines icon and accent color)   |
+| `timeout`        | `number \| boolean`                              | `5000`         | Auto-dismiss delay in ms, or `false` to disable        |
+| `pauseOnHover`   | `boolean`                                        | `true`         | Pause timeout while mouse hovers over the toast        |
+| `limit`          | `number`                                         | --             | Maximum number of visible notifications                |
+| `position`       | `NotificationPosition`                           | `"top-center"` | Screen position for the toast                          |
+| `dismissing`     | `boolean`                                        | --             | Programmatic dismissal trigger                         |
+| `toastIndex`     | `number`                                         | `0`            | Stack index (0 = front/newest)                         |
+| `toastsCount`    | `number`                                         | --             | Total number of toasts in the position stack           |
+| `expanded`       | `boolean`                                        | `true`         | Whether the toast group is in expanded (hovered) state |
+| `visibleToasts`  | `number`                                         | `3`            | Maximum visible toasts in collapsed stack              |
+| `onReportHeight` | `(id, height) => void`                           | --             | Callback to report measured height to container        |
 
 ## Events
 
-| Event | Payload | Description |
-|-------|---------|-------------|
+| Event   | Payload                         | Description                                        |
+| ------- | ------------------------------- | -------------------------------------------------- |
 | `close` | `number \| string \| undefined` | Toast dismissed (by user click, timeout, or swipe) |
 
 ## Notification Service Methods
 
-| Method | Signature | Description |
-|--------|-----------|-------------|
-| `notification()` | `(message: string \| Component, options?: NotificationOptions) => string \| number` | Show a default notification |
-| `notification.success()` | `(message: string \| Component) => string \| number` | Show a success notification |
-| `notification.error()` | `(message: string \| Component) => string \| number` | Show an error notification |
-| `notification.warning()` | `(message: string \| Component) => string \| number` | Show a warning notification |
-| `notification.update()` | `(id, options: Partial<NotificationOptions>) => void` | Update an existing notification |
-| `notification.remove()` | `(id: string \| number) => void` | Remove a specific notification |
-| `notification.clearAll()` | `() => void` | Remove all notifications |
-| `notification.setPosition()` | `(position: NotificationPosition) => void` | Change the global position |
+| Method                       | Signature                                                                           | Description                     |
+| ---------------------------- | ----------------------------------------------------------------------------------- | ------------------------------- |
+| `notification()`             | `(message: string \| Component, options?: NotificationOptions) => string \| number` | Show a default notification     |
+| `notification.success()`     | `(message: string \| Component) => string \| number`                                | Show a success notification     |
+| `notification.error()`       | `(message: string \| Component) => string \| number`                                | Show an error notification      |
+| `notification.warning()`     | `(message: string \| Component) => string \| number`                                | Show a warning notification     |
+| `notification.update()`      | `(id, options: Partial<NotificationOptions>) => void`                               | Update an existing notification |
+| `notification.remove()`      | `(id: string \| number) => void`                                                    | Remove a specific notification  |
+| `notification.clearAll()`    | `() => void`                                                                        | Remove all notifications        |
+| `notification.setPosition()` | `(position: NotificationPosition) => void`                                          | Change the global position      |
 
 ## CSS Variables
 
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `--notification-background` | `var(--additional-50)` | Toast background color |
-| `--notification-border-radius` | `6px` | Corner radius |
-| `--notification-border-color` | `var(--neutrals-200)` | Border color |
-| `--notification-content-color` | `var(--neutrals-800)` | Text color |
-| `--notification-shadow` | `0 4px 12px rgba(0,0,0,0.08)` | Default box shadow |
-| `--notification-hover-shadow` | `0 4px 16px rgba(0,0,0,0.12)` | Box shadow on hover |
-| `--notification-dismiss-color` | `var(--neutrals-400)` | Dismiss button icon color |
-| `--notification-dismiss-hover-color` | `var(--neutrals-600)` | Dismiss button hover color |
-| `--notification-success` | `var(--success-500)` | Success accent and icon color |
-| `--notification-error` | `var(--danger-500)` | Error accent and icon color |
-| `--notification-warning` | `var(--warning-500)` | Warning accent and icon color |
-| `--notification-info` | `var(--info-500)` | Info/default accent and icon color |
-| `--notification-accent-width` | `3px` | Left accent border width |
-| `--notification-focus-ring-color` | `var(--primary-100)` | Focus ring color on dismiss button |
+| Variable                             | Default                       | Description                        |
+| ------------------------------------ | ----------------------------- | ---------------------------------- |
+| `--notification-background`          | `var(--additional-50)`        | Toast background color             |
+| `--notification-border-radius`       | `6px`                         | Corner radius                      |
+| `--notification-border-color`        | `var(--neutrals-200)`         | Border color                       |
+| `--notification-content-color`       | `var(--neutrals-800)`         | Text color                         |
+| `--notification-shadow`              | `0 4px 12px rgba(0,0,0,0.08)` | Default box shadow                 |
+| `--notification-hover-shadow`        | `0 4px 16px rgba(0,0,0,0.12)` | Box shadow on hover                |
+| `--notification-dismiss-color`       | `var(--neutrals-400)`         | Dismiss button icon color          |
+| `--notification-dismiss-hover-color` | `var(--neutrals-600)`         | Dismiss button hover color         |
+| `--notification-success`             | `var(--success-500)`          | Success accent and icon color      |
+| `--notification-error`               | `var(--danger-500)`           | Error accent and icon color        |
+| `--notification-warning`             | `var(--warning-500)`          | Warning accent and icon color      |
+| `--notification-info`                | `var(--info-500)`             | Info/default accent and icon color |
+| `--notification-accent-width`        | `3px`                         | Left accent border width           |
+| `--notification-focus-ring-color`    | `var(--primary-100)`          | Focus ring color on dismiss button |
 
 ## Accessibility