@maltjoy/mcp-server 0.4.0 → 0.6.0-beta.0

package/dist/doc/VJoyFunnelHeader/guideline.md

@@ -0,0 +1,204 @@
+---
+component: VJoyFunnelHeader
+status: draft
+language: en
+dsds: JoyFunnelHeader.dsds.json
+dsdsVersion: "0.15.2"
+---
+
+# Funnel header
+
+Use **`VJoyFunnelHeader`** when a full-page funnel needs a fixed top bar with branding on the left and actions on the right — typically inside **`VJoyFunnel`**’s `funnel-header` slot.
+
+It is a slot-only layout primitive: no props, semantic `<header>`, and Joy spacing/background tokens. Compose with a logo or title on the left and a dismiss or utility control on the right.
+
+| | |
+| --- | --- |
+| **Code** | `VJoyFunnelHeader` from `@maltjoy/core-vue` |
+| **Design** | [Figma — Joy Core Design System](https://www.figma.com/design/jfndp2QBJGS9yeuWbeGuvD/) |
+| **Storybook** | [VJoyFunnel docs](https://doc.malt.tech/joy-storybook/?path=/docs/components-layout-vjoyfunnel--docs) (subcomponent) |
+| **DSDS (machine)** | [`JoyFunnelHeader.dsds.json`](./JoyFunnelHeader.dsds.json) |
+| **Live API** | `joy_get_component_info("VJoyFunnelHeader")` |
+
+---
+
+## When to use this component
+
+Use a funnel header at the top of a guided, full-page flow — onboarding, registration, or multi-step wizards wrapped in `VJoyFunnel`. The left slot usually carries the product or partner logo; the right slot carries a single utility action such as close or help.
+
+Place it in `VJoyFunnel`’s `funnel-header` slot so it sits above the stepper (when present) and scrollable content. Pair with `VJoyTemplate` for the main body and `VJoyFunnelFooter` for step navigation when needed.
+
+### When not to use this component
+
+| Need | Use instead |
+| --- | --- |
+| Full funnel shell (shapes, stepper area, scrollable content) | `VJoyFunnel` |
+| Page title, subtitle, and main layout inside the funnel | `VJoyTemplate` |
+| Step navigation (Previous / Next) at the bottom of a step | `VJoyFunnelFooter` |
+| App-wide or dashboard top navigation | App shell patterns — not funnel chrome |
+| Dialog or drawer title bar | `VJoyDialog` / `VJoyDrawer` header slots |
+| Custom `<header>` + manual flex for the same job | Still use `VJoyFunnelHeader` + Joy tokens |
+
+> **Renamed:** `VJoyHeader` is now **`VJoyFunnelHeader`**. Slots are prefixed with `funnel-` (`funnel-header-left`, `funnel-header-right`). Update legacy `header-left` / `header-right` slot names.
+
+---
+
+## How it works
+
+### Anatomy
+
+| Part | Required? | What it is |
+| --- | --- | --- |
+| Root `<header>` | Yes | `.joy-funnel-header` — full-width flex row, neutral background |
+| Left slot | No* | `funnel-header-left` — logo, wordmark, or back affordance |
+| Right slot | No* | `funnel-header-right` — close, help, or secondary utility |
+| Background | Yes | `--funnel-header-background-color` → `--joy-color-neutral-0` |
+| Horizontal padding | Yes | `--joy-core-spacing-5` left and right |
+| Vertical padding | Yes | `--joy-core-spacing-4` top and bottom |
+
+\*At least one slot should carry meaningful content in product flows (typically both).
+
+### Default values
+
+`VJoyFunnelHeader` exposes **no props** and **no events**.
+
+- Background token: **`--joy-color-neutral-0`**
+- Horizontal padding: **`--joy-core-spacing-5`**
+- Vertical padding: **`--joy-core-spacing-4`**
+- Layout: **`display: flex`**, **`justify-content: space-between`**, **`align-items: center`**, **`width: 100%`**
+
+Slots: use Joy MCP or Storybook — this page focuses on **when** and **how**, not a full API dump.
+
+### Composition pattern
+
+Nest inside `VJoyFunnel` and fill both slots with focused content — avoid crowding the bar with long titles (those belong in `VJoyTemplate`).
+
+```vue
+<VJoyFunnel>
+  <template #funnel-header>
+    <VJoyFunnelHeader>
+      <template #funnel-header-left>
+        <img src="/logo.svg" alt="Malt" height="36" />
+      </template>
+      <template #funnel-header-right>
+        <VJoyIconButton label="Close funnel" icon="cross" size="small" variant="ghost" />
+      </template>
+    </VJoyFunnelHeader>
+  </template>
+  <!-- funnel body -->
+</VJoyFunnel>
+```
+
+---
+
+## Best practices
+
+Rules use RFC 2119 strength (**MUST** / **SHOULD** / **MUST NOT** / **SHOULD NOT**).
+
+### Structure
+
+- **MUST** place `VJoyFunnelHeader` inside `VJoyFunnel`’s **`funnel-header`** slot — not floating outside the funnel shell.
+- **SHOULD** keep the left slot to **one** branding element (logo or compact wordmark).
+- **SHOULD** keep the right slot to **one** primary utility action (usually close).
+- **MUST NOT** put the funnel step title or long copy in the header bar — use `VJoyTemplate` title/subtitle slots.
+
+### Implementation
+
+- **MUST** use the documented slot names: **`funnel-header-left`** and **`funnel-header-right`**.
+- **MUST NOT** invent props on `VJoyFunnelHeader` — the API is slot-only.
+- **MUST NOT** override `.joy-funnel-header` padding, background, or flex layout with product CSS.
+- **SHOULD** use `VJoyIconButton` with a clear **`label`** for icon-only header actions (e.g. close).
+- **SHOULD** give logo images a meaningful **`alt`** (or `alt=""` when decorative and redundant with page title).
+
+### Do / don’t
+
+| Do | Don’t |
+| --- | --- |
+| Logo left, close right | Multiple competing actions in the right slot |
+| `VJoyIconButton` with `label` for close | Icon-only button without accessible name |
+| Funnel title in `VJoyTemplate` | Long headings inside the header bar |
+| Joy tokens via the component | Custom sticky header markup duplicating funnel chrome |
+
+---
+
+## Accessibility
+
+`VJoyFunnelHeader` renders a semantic **`<header>`** but does not supply landmarks beyond that — naming and keyboard behavior come from slot content.
+
+| Behavior | Expectation |
+| --- | --- |
+| Landmark | Native `<header>` inside the funnel page structure |
+| Branding | Logo `alt` text or visible text must identify the product when the image conveys branding |
+| Actions | Interactive controls in slots **MUST** have accessible names (`label` on `VJoyIconButton`, visible text on links) |
+| Focus | Tab order follows slot content; close should be reachable early when it exits the flow |
+| Page title | Funnel step title in `VJoyTemplate` provides the main heading — don’t rely on the header bar alone |
+
+Target: **WCAG 2.2 AA** where the product requires it — meet requirements through labeled controls and proper heading structure in the funnel body.
+
+---
+
+## Examples
+
+```vue
+<script setup lang="ts">
+import {
+  VJoyFunnel,
+  VJoyFunnelHeader,
+  VJoyFunnelFooter,
+  VJoyIconButton,
+  VJoyButton,
+  VJoyTemplate,
+} from '@maltjoy/core-vue'
+</script>
+
+<template>
+  <VJoyFunnel>
+    <template #funnel-header>
+      <VJoyFunnelHeader>
+        <template #funnel-header-left>
+          <img src="/logo.svg" alt="Malt" height="36" />
+        </template>
+        <template #funnel-header-right>
+          <VJoyIconButton
+            label="Close funnel"
+            icon="cross"
+            size="small"
+            variant="ghost"
+          />
+        </template>
+      </VJoyFunnelHeader>
+    </template>
+
+    <VJoyTemplate>
+      <template #template-title>Create your account</template>
+      <template #template-subtitle>Step 1 of 3</template>
+      <template #template-main>
+        <!-- step content -->
+        <VJoyFunnelFooter>
+          <template #footer-left>
+            <VJoyButton label="Previous" size="small" variant="secondary" />
+          </template>
+          <template #footer-right>
+            <VJoyButton label="Next" size="small" variant="main" />
+          </template>
+        </VJoyFunnelFooter>
+      </template>
+    </VJoyTemplate>
+  </VJoyFunnel>
+</template>
+```
+
+In Nuxt (or apps with auto-import), omit the import if `VJoyFunnelHeader` is already global.
+
+---
+
+## Related
+
+| Component | Use when |
+| --- | --- |
+| `VJoyFunnel` | Parent shell — provides `funnel-header`, stepper, and scrollable content slots |
+| `VJoyFunnelFooter` | Bottom bar for Previous / Next or secondary actions inside a step |
+| `VJoyTemplate` | Funnel step title, subtitle, main content, and optional sidebar |
+| `VJoyIconButton` | Icon-only close or help control in `funnel-header-right` |
+| `VJoyStepper` | Progress indicator in `VJoyFunnel`’s `funnel-stepper` slot (when used) |
+| `VJoyButton` | Text actions in the footer — not typically in the header bar |

package/dist/doc/VJoyHighlight/guideline.md

@@ -0,0 +1,169 @@
+---
+component: VJoyHighlight
+status: draft
+language: en
+dsds: JoyHighlight.dsds.json
+dsdsVersion: "0.15.2"
+---
+
+# Highlight
+
+Use **`VJoyHighlight`** when you need **inline, persistent** contextual messaging on the page — helper text, validation summaries, success confirmations, or warnings the user should read while continuing their task.
+
+It supports semantic **levels** (success, info, warning, error, neutral), an optional left accent border, optional status icon, and an optional bold title above the body copy.
+
+| | |
+| --- | --- |
+| **Code** | `VJoyHighlight` from `@maltjoy/core-vue` |
+| **Design** | [ZeroHeight — Highlight](https://zeroheight.com/6bf479565/) (page id `2432739`) |
+| **Storybook** | [VJoyHighlight docs](https://doc.malt.tech/joy-storybook/?path=/docs/components-view-vjoyhighlight--docs) |
+| **DSDS (machine)** | [`JoyHighlight.dsds.json`](./JoyHighlight.dsds.json) |
+| **Live API** | `joy_get_component_info("VJoyHighlight")` |
+
+---
+
+## When to use this component
+
+Use a highlight when information should **stay visible in context** — for example a form section error, a policy reminder above a field group, a success note after a partial save, or a warning that does not block the whole page.
+
+Pick the **`level`** to match meaning (not decoration): `error` for blocking issues, `warning` for caution, `success` for positive outcomes, `info` for neutral guidance, `neutral` for low-emphasis notes.
+
+Turn on **`accent`** when the message needs extra visual weight (thick left border). Turn on **`displayIcon`** when the status should be scannable at a glance; override with **`icon`** only when the default level icon is misleading.
+
+### When not to use this component
+
+| Need | Use instead |
+| --- | --- |
+| Brief feedback after an action (auto-dismiss) | `pushVJoySnackbar` |
+| Blocking confirmation or multi-step decision | `VJoyDialog` |
+| Supplementary hint on hover/click for one control | `VJoyTooltip` |
+| Field-level error tied to a single input | `VJoyFormError` (or highlight + `VJoyFormGroup` for section-level) |
+| Custom banner / callout markup with ad-hoc CSS | Still use `VJoyHighlight` + Joy tokens |
+
+> **Experimental:** `variant="ai"` overrides `level` styling for AI-related content. Treat as unstable — confirm with design before shipping to production.
+
+> **Not in the API:** `variant="default"` has **no effect** (it only exists as the prop default). Do not rely on it for styling.
+
+---
+
+## How it works
+
+### Anatomy
+
+| Part | Required? | What it is |
+| --- | --- | --- |
+| Root container | Yes | Flex row with level/variant classes (`joy-highlight`, `joy-highlight_{level}`) |
+| Decorator | No | `highlight-decorator` slot; defaults to `VJoyIcon` when `displayIcon` is true |
+| Title | No | `highlight-title` slot — rendered in `<strong>` above the body |
+| Body (default slot) | Yes | Main message; may include links (`<a>`) |
+| Accent border | No | 7px left border when `accent` is true |
+
+### Default values
+
+- `level` defaults to **`neutral`**
+- `variant` defaults to **`default`** (no visual effect — use `ai` only for the experimental AI theme)
+- `accent` defaults to **`false`**
+- `displayIcon` defaults to **`false`**
+- `icon` has no default — when omitted and `displayIcon` is true, the icon comes from `level` (`success` → `check-circle`, `error` → `warning-triangle`, others → `info-circle`)
+
+Props and slots: use Joy MCP or Storybook — this page focuses on **when** and **how**, not a full API dump.
+
+### Levels (semantic emphasis)
+
+| `level` | Use when |
+| --- | --- |
+| `error` | Something failed or must be fixed before continuing |
+| `warning` | Non-blocking risk or condition the user should notice |
+| `success` | A positive outcome or completed step |
+| `info` | Neutral guidance or contextual detail |
+| `neutral` | Low-emphasis note without a strong status color |
+
+---
+
+## Best practices
+
+Rules use RFC 2119 strength (**MUST** / **SHOULD** / **MUST NOT** / **SHOULD NOT**).
+
+### Hierarchy and meaning
+
+- **MUST** choose `level` by **meaning**, not by preferred color.
+- **SHOULD** use one highlight per logical section — avoid stacking multiple highlights with the same level.
+- **SHOULD** use `accent` sparingly; reserve it for the primary message in a view.
+- **SHOULD** use `highlight-title` for a short headline and keep detail in the default slot.
+
+### Implementation
+
+- **MUST** use only documented props and enums from MCP or `JoyHighlight.types.ts`.
+- **MUST** use Joy tokens — no custom `.joy-highlight` background, border, or typography in product CSS.
+- **MUST NOT** invent props (`size`, `color`, `closable`, …).
+- **MUST** set `displayIcon` to `true` before `icon` has any effect.
+- **SHOULD** use the `highlight-decorator` slot for custom leading UI (e.g. AI tag) instead of hacking margins on the default icon.
+
+### Do / don’t
+
+| Do | Don’t |
+| --- | --- |
+| `level="error"` for section-level validation | `pushVJoySnackbar` for errors that block the form |
+| `accent` on the main callout in a panel | Accent on every helper line |
+| Links in the default slot for “learn more” | Essential instructions only inside a snackbar |
+| `variant="ai"` after design sign-off | `variant="ai"` as a generic purple info box |
+
+---
+
+## Accessibility
+
+Presentational container — no built-in interactive role. Meaning must come from the **content** you put in slots.
+
+| Behavior | Expectation |
+| --- | --- |
+| Structure | Use `highlight-title` for a visible heading; body copy in the default slot |
+| Links | Inline `<a>` elements receive Joy link styling; ensure link text is descriptive |
+| Icons | When `displayIcon` is true, the message text should still convey status — don’t rely on icon color alone |
+| Live regions | Highlights are **not** announced like toasts; for urgent errors, pair with field errors or page-level focus management |
+| Motion | No enter/exit animation — content is always visible |
+
+Target: **WCAG 2.2 AA** where the product requires it.
+
+---
+
+## Examples
+
+```vue
+<script setup lang="ts">
+import { VJoyHighlight } from '@maltjoy/core-vue'
+</script>
+
+<template>
+  <!-- Section helper -->
+  <VJoyHighlight level="info">
+    Invoices are generated on the 1st of each month.
+  </VJoyHighlight>
+
+  <!-- Error with accent and icon -->
+  <VJoyHighlight level="error" accent display-icon>
+  <template #highlight-title>We couldn't save your changes</template>
+    Check your connection and try again, or
+    <a href="/support">contact support</a>.
+  </VJoyHighlight>
+
+  <!-- Success confirmation -->
+  <VJoyHighlight level="success" display-icon>
+    Your profile was updated.
+  </VJoyHighlight>
+</template>
+```
+
+In Nuxt (or apps with auto-import), omit the import if `VJoyHighlight` is already global.
+
+---
+
+## Related
+
+| Component | Use when |
+| --- | --- |
+| `pushVJoySnackbar` | Transient feedback after an action |
+| `VJoyFormError` | Single field error message under an input |
+| `VJoyFormGroup` | Group label + control + errors; pair with highlight for section context |
+| `VJoyDialog` | User must confirm, read long content, or choose an action |
+| `VJoyTooltip` | Short supplementary hint on a single trigger |
+| `VJoyTag` | Labels inside `highlight-decorator` (e.g. AI variant in Storybook) |

package/dist/doc/VJoyIcon/JoyIcon.types.ts

@@ -3,6 +3,6 @@ import {TSizes, TLevels} from '../../types';
 
 export type TJoyIconsColors = TLevels | 'neutral-50' | 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'brand-primary' | 'brand-secondary' | 'white';
 
-export type TJoyIconSizes = Extract<TSizes, 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'>;
+export type TJoyIconSizes = Extract<TSizes, 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large'>;
 
 export type TJoyIconsNames = JoyIconsId;

package/dist/doc/VJoyIcon/guideline.md

@@ -0,0 +1,168 @@
+---
+component: VJoyIcon
+status: draft
+language: en
+dsds: JoyIcon.dsds.json
+dsdsVersion: "0.15.2"
+---
+
+# Icon
+
+Use **`VJoyIcon`** when you need a glyph from the Joy icon library — decorative emphasis beside text, status indicators, or inline affordances inside other components.
+
+It supports token-based `color` and `size`, and optional `role="button"` with `ariaLabel` / `title` when the icon itself is interactive (rare — prefer `VJoyIconButton` for icon-only actions).
+
+| | |
+| --- | --- |
+| **Code** | `VJoyIcon` from `@maltjoy/core-vue` |
+| **Design** | [Figma — Joy Core Design System](https://www.figma.com/design/jfndp2QBJGS9yeuWbeGuvD/) |
+| **Storybook** | [VJoyIcon docs](https://doc.malt.tech/joy-storybook/?path=/docs/components-icons-vjoyicon--docs) · [Available icons](https://doc.malt.tech/joy-storybook/?path=/docs/components-icons-available-icons--docs) |
+| **DSDS (machine)** | [`JoyIcon.dsds.json`](./JoyIcon.dsds.json) |
+| **Live API** | `joy_get_component_info("VJoyIcon")` |
+
+---
+
+## When to use this component
+
+Use an icon when a small visual symbol reinforces meaning — next to a label, inside a list row, as a status glyph, or as the leading/trailing graphic on a `VJoyButton`.
+
+`VJoyIcon` is the **primitive** for rendering Joy icons with consistent sizing and color tokens. Parent components (`VJoyButton`, `VJoyMenuItem`, `VJoyInput`, …) compose it internally; use it directly when building custom layouts that still need the Joy icon font.
+
+### When not to use this component
+
+| Need | Use instead |
+| --- | --- |
+| Icon-only clickable control (toolbar, dialog close, etc.) | `VJoyIconButton` |
+| Labeled action with optional icon | `VJoyButton` (`icon` prop) |
+| Navigation styled as a link | `VJoyLink` |
+| Brief help on hover for an icon control | `VJoyTooltip` wrapping `VJoyIconButton` |
+| Custom `<i>` / SVG with ad-hoc font-size and color | Still use `VJoyIcon` + Joy tokens — don’t reinvent icon chrome |
+
+---
+
+## How it works
+
+### Anatomy
+
+| Part | Required? | What it is |
+| --- | --- | --- |
+| Root `<span>` | Yes | `.joy-icon` with size and color modifier classes |
+| Glyph `<i>` | Yes | `.icon.icon-{name}` from `@maltjoy/icons` (`aria-hidden="true"`) |
+| Accessible name | No* | `aria-label` / `title` on the root when the icon is meaningful or interactive (*required when `role="button"`) |
+| Button affordance | No | `joy-icon--button` when `role="button"` — pointer cursor and hover opacity |
+
+The icon font is decorative by default. The inner `<i>` is always hidden from assistive tech; expose meaning via visible text nearby or via `ariaLabel` / `title` on the root when the icon carries information on its own.
+
+### Default values
+
+- `name` is **required** — a `TJoyIconsNames` / `JoyIconsId` value (see Storybook “Available icons” or `@maltjoy/icons`)
+- `color` defaults to **`secondary`**
+- `size` defaults to **`xsmall`** (16px)
+- `tabIndex` defaults to **`0`** (applied only when `role="button"`)
+- `role`, `ariaLabel`, and `title` default to **unset**
+
+**Sizes** (`TJoyIconSizes`): `xxsmall` (12px), `xsmall` (16px), `small` (24px), `medium` (32px), `large` (46px). Match sibling text or parent component density — don’t hardcode `font-size` in product CSS.
+
+**Colors** (`TJoyIconsColors`): `primary`, `secondary`, `tertiary`, `quaternary`, `brand-primary`, `brand-secondary`, `white`, `success`, `error`, `info`, `warning`, `neutral`, `neutral-50`. Pick by semantic meaning (status, emphasis), not decoration alone.
+
+Props: use Joy MCP (`joy_get_component_info`, `joy_get_component_types`) or Storybook — this page focuses on **when** and **how**, not a full API dump.
+
+> **MCP drift:** some snapshots list `xlarge` as a size value. The current `TJoyIconSizes` and SCSS map only include `xxsmall` through `large`. Do not emit `xlarge`.
+
+---
+
+## Best practices
+
+Rules use RFC 2119 strength (**MUST** / **SHOULD** / **MUST NOT** / **SHOULD NOT**).
+
+### When to use icons
+
+- **SHOULD** pair icons with visible text when the meaning isn’t universally understood.
+- **SHOULD** use semantic `color` for status (`success`, `error`, `warning`, `info`) — not arbitrary brand swatches.
+- **MUST NOT** use a lone `VJoyIcon` as the only way to perform an action — use `VJoyIconButton` or `VJoyButton`.
+- **MUST NOT** rely on `title` alone for critical information (tooltips are supplementary).
+
+### Implementation
+
+- **MUST** pass a valid `name` from `TJoyIconsNames` / `JoyIconsId`.
+- **MUST** use only documented `color` and `size` values (MCP / `JoyIcon.types.ts`).
+- **MUST** style with Joy tokens — no custom `.joy-icon` `font-size` or `color` overrides.
+- **MUST NOT** invent props (`variant`, `clickable`, `disabled`, …).
+- **MUST** set `ariaLabel` (or `title`) when `role="button"`; wire keyboard activation in the parent if the icon is interactive.
+- **SHOULD** leave `role` unset for purely decorative icons inside labeled controls.
+
+### Do / don’t
+
+| Do | Don’t |
+| --- | --- |
+| `VJoyIcon` beside visible label text | Icon-only action without `VJoyIconButton` |
+| `color="error"` for validation status | Random hex colors on `.icon` |
+| `size="small"` to match `VJoyButton` icon density | Inline `style="font-size: 20px"` |
+| `VJoyIconButton` for toolbar / close controls | `role="button"` on `VJoyIcon` without keyboard handler |
+| Storybook “Available icons” for valid `name` values | Guessing icon slug strings |
+
+---
+
+## Accessibility
+
+Behaviors (what must happen), not slogans.
+
+| Behavior | Expectation |
+| --- | --- |
+| Role | Decorative by default (`<span>`); set `role="button"` only when the icon is intentionally interactive |
+| Name | Inner glyph is `aria-hidden="true"`. Meaningful icons need `ariaLabel` or `title` on the root, or redundant visible text nearby |
+| Keyboard | When `role="button"`, root receives `tabindex` (default `0`); parent must handle **Enter** / **Space** — the component does not emit click events |
+| Focus | No built-in focus ring — interactive icons should live in `VJoyIconButton` or a proper button/link |
+| Color | Status colors supplement text; don’t convey state by color alone |
+| Tooltip | `title` mirrors `ariaLabel` when one is set; for icon-only controls prefer `VJoyIconButton` + `VJoyTooltip` |
+
+Target: **WCAG 2.2 AA** where the product requires it.
+
+---
+
+## Examples
+
+```vue
+<script setup lang="ts">
+import { VJoyIcon } from '@maltjoy/core-vue'
+</script>
+
+<template>
+  <!-- Decorative — meaning from adjacent text -->
+  <span>
+    <VJoyIcon name="check-circle" color="success" size="small" />
+    Payment confirmed
+  </span>
+
+  <!-- Status glyph inside custom layout -->
+  <VJoyIcon name="warning-triangle" color="warning" size="xsmall" />
+
+  <!-- Inside a button — prefer VJoyButton icon prop when possible -->
+  <!-- <VJoyButton icon="add-circle" label="Add item" /> -->
+
+  <!-- Rare: interactive icon (parent handles @click / keyboard) -->
+  <VJoyIcon
+    name="close"
+    role="button"
+    aria-label="Remove filter"
+    size="small"
+    @click="onRemove"
+  />
+</template>
+```
+
+In Nuxt (or apps with auto-import), omit the import if `VJoyIcon` is already global.
+
+---
+
+## Related
+
+| Component | Use when |
+| --- | --- |
+| `VJoyIconButton` | Icon-only clickable control with button chrome and focus ring |
+| `VJoyButton` | Labeled action with optional leading/trailing icon |
+| `VJoyTooltip` | Supplementary label on hover/click for icon controls |
+| `VJoyMenuItem` | Navigation row with optional leading icon |
+| `VJoyInput` | Text field with optional leading `icon` prop |
+| `VJoyHighlight` | Status message block — icons are composed internally |
+| `@maltjoy/icons` | Source of truth for icon `name` values (`JoyIconsId`) |

package/dist/doc/VJoyIcon/metadata.json

@@ -12,7 +12,6 @@
       "description": "Use `TJoyIconSizes`",
       "possibleValues": [
         "medium",
-        "xlarge",
         "large",
         "small",
         "xsmall",