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

package/dist/doc/VJoyIconButton/guideline.md

@@ -0,0 +1,169 @@
+---
+component: VJoyIconButton
+status: draft
+language: en
+dsds: JoyIconButton.dsds.json
+dsdsVersion: "0.15.2"
+---
+
+# Icon button
+
+Use **`VJoyIconButton`** when the user needs a compact, icon-only action — for example close a dialog, open a menu, delete a row, or toggle notifications.
+
+It is built on `VJoyButton`: same variants, sizes, loading state, and native `<button>` / `<a>` behavior (`href`, `disabled`, `type`, … forwarded via `useAttrs`). The visible label is hidden visually but still exposed to assistive tech.
+
+| | |
+| --- | --- |
+| **Code** | `VJoyIconButton` from `@maltjoy/core-vue` |
+| **Design** | [ZeroHeight — Icon button](https://zeroheight.com/6bf479565/p/08acf7-icon-button) · [Figma — Buttons](https://www.figma.com/design/jfndp2QBJGS9yeuWbeGuvD/?node-id=12704-7106) |
+| **Storybook** | [VJoyIconButton docs](https://doc.malt.tech/joy-storybook/?path=/docs/components-buttons-vjoyiconbutton--docs) |
+| **DSDS (machine)** | [`JoyIconButton.dsds.json`](./JoyIconButton.dsds.json) |
+| **Live API** | `joy_get_component_info("VJoyIconButton")` |
+
+---
+
+## When to use this component
+
+Use an icon button when the action is clear from the icon alone in context — toolbar controls, row actions, dialog close, overflow menus, or compact headers.
+
+Typical placements: dialog headers, data-table rows, `VJoyDropdown` triggers, and dense toolbars where a text label would not fit.
+
+### When not to use this component
+
+| Need | Use instead |
+| --- | --- |
+| A labeled action with visible text | `VJoyButton` |
+| A text link inside a sentence or paragraph | `VJoyLink` |
+| Icon + visible label on the same control | `VJoyButton` with `icon` |
+| Custom-styled `<button>` / `<a>` | Still use `VJoyIconButton` + Joy tokens — don’t reinvent chrome |
+
+> **Deprecated:** do not use `circle` on `VJoyButton` for new work. Prefer `VJoyIconButton`.
+
+---
+
+## How it works
+
+`VJoyIconButton` wraps `VJoyButton` with the `joy-icon-button` class. The icon is always shown; the label slot is rendered but hidden with CSS (`.joy-button--slot { display: none }`). Width is fixed per size using `--joy-form-field-height-*` tokens so the control stays square.
+
+### Anatomy
+
+| Part | Required? | What it is |
+| --- | --- | --- |
+| Container | Yes | Root `<button>`, or `<a>` when `href` is set on the element (via attrs) |
+| Icon | Yes | `VJoyIcon` from the required `icon` prop (`aria-hidden="true"`) |
+| Label | Yes* | `label` prop or default slot — visually hidden, used for the accessible name |
+| Spinner | No | `VJoySpinner` when `loading` is true |
+| Ripple | Yes | `v-joy-ripple` from `VJoyButton` |
+| Focus ring | Yes | Keyboard focus via `VJoyButton` styles — don’t remove it in product CSS |
+
+\*Provide `label` or default-slot text on every instance.
+
+### Default values
+
+- `icon` is **required**
+- `variant` defaults to **`primary`**
+- `size` defaults to **`medium`**
+- `loading` defaults to **`false`**
+- Native `type` defaults to **`button`** when the root is a `<button>`
+
+`variant` and `size` share the same allowed values as `VJoyButton` (`TJoyButtonVariants`, `TJoyButtonSizes`). Props, events, and slots: use Joy MCP or Storybook — this page focuses on **when** and **how**, not a full API dump.
+
+---
+
+## Best practices
+
+Rules use RFC 2119 strength (**MUST** / **SHOULD** / **MUST NOT** / **SHOULD NOT**).
+
+### Selection and hierarchy
+
+- **MUST** provide an accessible name on every instance (`label` prop or default slot).
+- **SHOULD** pair with `VJoyTooltip` when the icon meaning is not obvious from context alone.
+- **SHOULD** follow the same variant hierarchy as `VJoyButton` — see [`JoyButton.DSDS.guideline.md`](../JoyButton/JoyButton.DSDS.guideline.md) for `main` / `primary` / `secondary` / `ghost` decisions.
+- **SHOULD** match trigger size to surrounding controls (e.g. `xsmall` icon button beside a `xsmall` dropdown).
+
+### Implementation
+
+- **MUST** use only documented `icon`, `variant`, and `size` values from MCP or component types.
+- **MUST** use `VJoyIconButton` as shipped — no custom `.joy-icon-button` chrome in product CSS.
+- **MUST NOT** use deprecated `circle` on `VJoyButton`.
+- **MUST NOT** invent props (`color`, `white`, `circle`, …).
+- **SHOULD** use `loading` during async work instead of only disabling without feedback.
+
+### Do / don’t
+
+| Do | Don’t |
+| --- | --- |
+| `label="Close dialog"` on a close icon | Bare icon with no accessible name |
+| `VJoyTooltip` when meaning needs clarification | Duplicate the full label in tooltip when it adds no value |
+| `variant="ghost"` for tertiary toolbar actions | `main` for every icon on a dense toolbar |
+| `VJoyIconButton` for icon-only | `VJoyButton` + `circle` |
+
+---
+
+## Accessibility
+
+Behaviors (what must happen), not slogans.
+
+| Behavior | Expectation |
+| --- | --- |
+| Role | Native `<button>` or `<a href>` — never a clickable `<div>` |
+| Name | From `label` prop or default slot; `aria-labelledby` on the root points to the hidden label span |
+| Icon | Decorative — `aria-hidden="true"` (Joy default) |
+| Keyboard | **Enter** and **Space** activate a `<button>`; links follow native link keyboard behavior |
+| Focus | Keep the focus ring visible — inherited from `VJoyButton` |
+| Loading | Non-interactive (`disabled` when `loading`); keep the same `size` so layout doesn’t jump |
+| Disabled | Don’t rely on color alone; explain why nearby (tooltip or helper text) |
+| Type | Default `type="button"` on `<button>` roots to avoid accidental form submit |
+
+Target: **WCAG 2.2 AA** where the product requires it.
+
+---
+
+## Examples
+
+```vue
+<script setup lang="ts">
+import { VJoyIconButton, VJoyTooltip } from '@maltjoy/core-vue'
+</script>
+
+<template>
+  <!-- Standard icon action -->
+  <VJoyIconButton icon="bell" label="Open notifications" variant="ghost" />
+
+  <!-- Dialog close (built-in pattern in VJoyDialog) -->
+  <VJoyIconButton icon="close" label="Close dialog" variant="ghost" size="small" />
+
+  <!-- Dropdown trigger -->
+  <VJoyIconButton icon="dots-vertical" label="More actions" variant="secondary" size="xsmall" />
+
+  <!-- Async -->
+  <VJoyIconButton icon="send" label="Send message" variant="main" :loading="true" />
+
+  <!-- As link -->
+  <VJoyIconButton icon="external-link" label="Open settings" variant="primary" href="/settings" />
+
+  <!-- Tooltip when meaning needs context -->
+  <VJoyTooltip text="Put to trash">
+    <VJoyIconButton icon="trash" label="Put to trash" variant="ghost" />
+  </VJoyTooltip>
+
+  <!-- Slot instead of label prop -->
+  <VJoyIconButton icon="pen" variant="secondary">
+    Edit profile
+  </VJoyIconButton>
+</template>
+```
+
+In Nuxt (or apps with auto-import), omit the import if `VJoyIconButton` is already global.
+
+---
+
+## Related
+
+| Component | Use when |
+| --- | --- |
+| `VJoyButton` | Labeled actions with visible text |
+| `VJoyTooltip` | Supplementary label or disabled explanation for icon-only controls |
+| `VJoyDropdown` | Icon button as the `dropdown-button` trigger |
+| `VJoyDialog` | Built-in close control uses `VJoyIconButton` |
+| `VJoyIcon` | Icon primitive rendered inside the button |

package/dist/doc/VJoyIconButton/metadata.json

@@ -1,7 +1,7 @@
 {
   "name": "JoyIconButton",
   "displayName": "VJoyIconButton",
-  "description": "A dedicated icon-button component built on top of `VJoyButton`.\nUse this component instead of the deprecated `circle` prop from `VJoyButton`.",
+  "description": "A dedicated icon-button component built on top of `VJoyButton`.\nIcon-only button with an accessible label.",
   "category": "Buttons",
   "props": [
     {

package/dist/doc/VJoyIndicator/guideline.md

@@ -0,0 +1,168 @@
+---
+component: VJoyIndicator
+status: draft
+language: en
+dsds: JoyIndicator.dsds.json
+dsdsVersion: "0.15.2"
+---
+
+# Indicator
+
+Use **`VJoyIndicator`** as a single dot in a page or slide navigation strip — one position in a carousel, dialog step sequence, or similar multi-panel flow.
+
+Indicators are text-less buttons by design. Always place them as children of **`VJoyIndicators`**, which owns selection state, `v-model`, and click handling. Do not use `VJoyIndicator` on its own.
+
+| | |
+| --- | --- |
+| **Code** | `VJoyIndicator` from `@maltjoy/core-vue` |
+| **Design** | [ZeroHeight — Page indicator](https://zeroheight.com/6bf479565/) (page id `2427818`) |
+| **Storybook** | [VJoyIndicators docs](https://doc.malt.tech/joy-storybook/?path=/docs/components-buttons-vjoyindicators--docs) (includes `VJoyIndicator` children) |
+| **DSDS (machine)** | [`JoyIndicator.dsds.json`](./JoyIndicator.dsds.json) |
+| **Live API** | `joy_get_component_info("VJoyIndicator")` |
+
+---
+
+## When to use this component
+
+Use an indicator when the user needs to see **where they are** in a short, ordered set of panels (typically 2–10 items) and optionally jump to another panel by clicking a dot.
+
+Common placements: carousel pagination, multi-step `VJoyDialog` flows (`dialog-indicators` slot), or any view where `VJoyIndicators` already wraps the strip.
+
+Each child **must** declare a unique `value` (string or number) that matches the parent `v-model`.
+
+### When not to use this component
+
+| Need | Use instead |
+| --- | --- |
+| Managing the dot strip, selection, and `v-model` | `VJoyIndicators` — always wrap indicators |
+| Linear process steps with labels (onboarding, checkout) | `VJoyStepper` + `VJoyStep` |
+| Tabbed content with named sections | `VJoyTabs` + `VJoyTab` |
+| Status or notification dots (not navigation) | `VJoyDot`, `VJoyBadge` |
+| Custom-styled pagination dots | Still use `VJoyIndicator` inside `VJoyIndicators` — don’t reinvent with ad-hoc CSS |
+
+---
+
+## How it works
+
+### Anatomy
+
+| Part | Required? | What it is |
+| --- | --- | --- |
+| List item (`<li>`) | Yes | Root `.joy-indicator` wrapper in the parent `<ul>` |
+| Indicator button | Yes | Text-less `<button type="button">` — `.joy-indicator--button` |
+| `value` | Yes | Identity of this dot; drives parent `v-model` matching |
+| `selected` | Yes* | Highlight state — set automatically by `VJoyIndicators`; don’t bind manually |
+| `variant` | No | `default` or `light` — usually inherited from parent `VJoyIndicators` |
+| `ariaLabel` | No | Accessible name when `value` alone is not descriptive enough |
+
+\*Required for correct visuals, but owned by the parent.
+
+### Default values
+
+- `variant` defaults to **`default`**
+- `selected` defaults to **`false`** (parent sets the active dot)
+- `value` is **required** — no default
+- `ariaLabel` is optional — when omitted, `aria-label` falls back to `value.toString()`
+
+Props and parent events: use Joy MCP or Storybook — this page focuses on **when** and **how**, not a full API dump.
+
+### Parent composition
+
+- **MUST** nest every `VJoyIndicator` inside `VJoyIndicators` (default slot).
+- **MUST** bind `v-model` on `VJoyIndicators` to the currently selected `value`.
+- **SHOULD** set `variant` on `VJoyIndicators` so all children share `default` or `light` styling.
+- **MUST NOT** set `selected` yourself — the parent computes it from `modelValue`.
+
+---
+
+## Best practices
+
+Rules use RFC 2119 strength (**MUST** / **SHOULD** / **MUST NOT** / **SHOULD NOT**).
+
+### Composition
+
+- **MUST** use one `VJoyIndicator` per navigable panel; keep counts modest (roughly 2–10 dots).
+- **MUST** give each sibling a **unique** `value` within the same `VJoyIndicators` group.
+- **MUST NOT** render `VJoyIndicator` outside `VJoyIndicators`.
+- **MUST NOT** invent props (`size`, `color`, `disabled`, …) — they are not on the API.
+
+### Visual variant
+
+- **SHOULD** use `variant="default"` on neutral/light backgrounds (standard carousel, dialog chrome).
+- **SHOULD** use `variant="light"` when the strip sits on a dark or tinted surface (parent passes variant to children).
+- **MUST NOT** override `.joy-indicator` colors, width, height, or radius in product CSS — use Joy tokens via the component.
+
+### Do / don’t
+
+| Do | Don’t |
+| --- | --- |
+| `v-model` on `VJoyIndicators` + one child per slide/step | Standalone `VJoyIndicator` with manual `selected` |
+| Meaningful `ariaLabel` when `value` is opaque (`"step-2"`) | Rely on raw numeric `value` as the only accessible name |
+| `variant` on parent for the whole strip | Mix `default` and `light` siblings in one group |
+| `VJoyStepper` when steps need labels | Indicator dots for a labeled wizard |
+
+---
+
+## Accessibility
+
+Behaviors (what must happen), not slogans.
+
+| Behavior | Expectation |
+| --- | --- |
+| Control type | Each dot is a `<button type="button">` — not a decorative `<span>` |
+| Name | `aria-label` is set from `ariaLabel` or `value.toString()` — prefer explicit `ariaLabel` when `value` is not human-readable |
+| Selection | Selected dot uses `.joy-indicator--button-selected` background; don’t rely on color alone if product adds extra context |
+| Focus | `:focus-visible` shows a 2px focus ring via `box-shadow` on a pseudo-element — don’t remove it in product CSS |
+| Keyboard | Focus moves to each button in tab order; activation is handled by the parent click listener on each child |
+| Group context | Pair with visible panel content so users who cannot see the dots still know their position (e.g. dialog title, slide heading) |
+
+Target: **WCAG 2.2 AA** where the product requires it.
+
+---
+
+## Examples
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { VJoyIndicators, VJoyIndicator } from '@maltjoy/core-vue'
+
+const activeSlide = ref('slide-1')
+</script>
+
+<template>
+  <!-- Carousel-style pagination -->
+  <VJoyIndicators v-model="activeSlide">
+    <VJoyIndicator value="slide-1" aria-label="Slide 1 of 3" />
+    <VJoyIndicator value="slide-2" aria-label="Slide 2 of 3" />
+    <VJoyIndicator value="slide-3" aria-label="Slide 3 of 3" />
+  </VJoyIndicators>
+
+  <!-- v-for when values are dynamic -->
+  <VJoyIndicators v-model="activeSlide" variant="light">
+    <VJoyIndicator
+      v-for="(slide, index) in ['slide-1', 'slide-2', 'slide-3']"
+      :key="slide"
+      :value="slide"
+      :aria-label="`Slide ${index + 1} of 3`"
+    />
+  </VJoyIndicators>
+</template>
+```
+
+**Multi-step dialog** — inject `VJoyIndicators` into `VJoyDialog`’s `dialog-indicators` slot; see [VJoyDialog DSDS guideline](../JoyDialog/JoyDialog.DSDS.guideline.md).
+
+In Nuxt (or apps with auto-import), omit the import if components are already global.
+
+---
+
+## Related
+
+| Component | Use when |
+| --- | --- |
+| `VJoyIndicators` | Parent strip — **required** wrapper for every indicator |
+| `VJoyDialog` | Multi-step modal with `dialog-indicators` slot |
+| `VJoyStepper` / `VJoyStep` | Labeled multi-step progress (not dot-only navigation) |
+| `VJoyTabs` / `VJoyTab` | Named tab panels instead of anonymous slides |
+| `VJoyDot` | Status or count dots — not slide navigation |
+| `VJoyPagination` | Numeric page navigation for large datasets |

package/dist/doc/VJoyIndicators/guideline.md

@@ -0,0 +1,183 @@
+---
+component: VJoyIndicators
+status: draft
+language: en
+dsds: JoyIndicators.dsds.json
+dsdsVersion: "0.15.2"
+---
+
+# Indicators
+
+Use **`VJoyIndicators`** when the user needs to see their position in a short, ordered set of panels and optionally jump to another panel — carousels, image galleries, or multi-step `VJoyDialog` flows.
+
+The component wraps one or more **`VJoyIndicator`** children in a horizontal strip, manages selection with `v-model`, and passes `variant` styling to every dot. It does not render panels or slides — only the navigation dots.
+
+| | |
+| --- | --- |
+| **Code** | `VJoyIndicators` from `@maltjoy/core-vue` |
+| **Design** | [ZeroHeight — Page indicator](https://zeroheight.com/6bf479565/) (page id `2427818`) |
+| **Storybook** | [VJoyIndicators docs](https://doc.malt.tech/joy-storybook/?path=/docs/components-buttons-vjoyindicators--docs) |
+| **DSDS (machine)** | [`JoyIndicators.dsds.json`](./JoyIndicators.dsds.json) |
+| **Live API** | `joy_get_component_info("VJoyIndicators")` |
+
+---
+
+## When to use this component
+
+Use an indicators strip when **2–10** anonymous panels need dot-style pagination — the user sees which item is active and can click another dot to jump there.
+
+Typical placements: carousel footers, hero sliders, or the `dialog-indicators` slot on `VJoyDialog` for a short multi-dialog sequence. Bind `v-model` to the `value` of the active `VJoyIndicator`.
+
+### When not to use this component
+
+| Need | Use instead |
+| --- | --- |
+| A single dot (no strip / no shared selection) | You still need `VJoyIndicators` — use `VJoyIndicator` only as its child |
+| Linear process steps with labels (onboarding, checkout) | `VJoyStepper` + `VJoyStep` |
+| Tabbed content with named sections | `VJoyTabs` + `VJoyTab` |
+| Numeric page navigation for large datasets | `VJoyPagination` |
+| Status or notification dots (not navigation) | `VJoyDot`, `VJoyBadge` |
+| Custom-styled pagination dots | Still use `VJoyIndicators` + `VJoyIndicator` — don’t reinvent with ad-hoc CSS |
+
+> **Legacy Stencil:** the old `joy-indicators` web component used a numeric `selected` index and `joy-indicators-change`. **`VJoyIndicators` uses `v-model` matched to each child’s `value`** (string or number) — don’t port the index-based API.
+
+---
+
+## How it works
+
+### Anatomy
+
+| Part | Required? | What it is |
+| --- | --- | --- |
+| List container (`<ul>`) | Yes | Root `.joy-indicators` — horizontal flex row |
+| `default` slot | Yes | One or more `VJoyIndicator` children |
+| `modelValue` | No* | Selected child `value` — bind with `v-model` |
+| `variant` | No | `default` or `light` — forwarded to every child |
+
+\*Strongly recommended whenever clicking a dot should update visible content.
+
+### Default values
+
+- `variant` is optional — when set on the parent, it is passed to each `VJoyIndicator` (child `variant` defaults to **`default`** when omitted)
+- `modelValue` has no default — parent or `v-model` should initialize to one child `value` when a dot should start selected
+
+Props, events, slots, and exposed members: use Joy MCP or Storybook — this page focuses on **when** and **how**, not a full API dump.
+
+### Selection and children
+
+- **MUST** place only `VJoyIndicator` components in the default slot (static list or `v-for`).
+- **MUST** give each child a **unique** `value` — the parent compares `modelValue` to `value` to set `selected`.
+- **MUST** bind `v-model` when dots drive panel visibility; clicking a dot emits `update:modelValue` with that child’s `value`.
+- **MUST NOT** set `selected` on children — the parent computes it.
+- **SHOULD** keep the strip short (roughly 2–10 dots); very long strips are hard to scan and activate.
+
+The parent also detects `v-for` output (a single fragment whose children are indicators) so dynamic lists work without extra markup.
+
+### Visual variant
+
+| `variant` | Use when |
+| --- | --- |
+| `default` | Neutral/light backgrounds — standard carousel or dialog chrome |
+| `light` | Strip sits on a dark or tinted surface (lighter unselected dots, white selected dot) |
+
+Set `variant` on **`VJoyIndicators`** so the whole strip stays consistent — don’t mix variants across siblings.
+
+---
+
+## Best practices
+
+Rules use RFC 2119 strength (**MUST** / **SHOULD** / **MUST NOT** / **SHOULD NOT**).
+
+### Composition
+
+- **MUST** render one `VJoyIndicator` per navigable panel (slide, dialog step, carousel item).
+- **MUST** sync `v-model` with the panel the user sees — changing the model from code updates the highlighted dot.
+- **SHOULD** pair the strip with visible panel content (slide image, dialog title) so position is clear without relying on dots alone.
+- **MUST NOT** use `VJoyIndicators` without `VJoyIndicator` children — the slot is not for arbitrary markup.
+
+### Implementation
+
+- **MUST** use only documented props (`variant`, `modelValue` / `v-model`) and Joy tokens — no custom dot chrome CSS.
+- **MUST NOT** invent props (`size`, `color`, `disabled`, `count`, …).
+- **SHOULD** set meaningful `aria-label` on each `VJoyIndicator` when `value` is opaque (see [JoyIndicator DSDS guideline](../JoyIndicator/JoyIndicator.DSDS.guideline.md)).
+- **SHOULD** use `variant="light"` on dark hero/carousel overlays; `default` elsewhere.
+
+### Do / don’t
+
+| Do | Don’t |
+| --- | --- |
+| `v-model` + one child per slide/step | Index-based selection or manual `selected` on children |
+| `variant` on the parent for the whole strip | Per-child variant overrides in the same group |
+| `dialog-indicators` slot for multi-step dialogs | Orphan dots with no linked panel content |
+| `VJoyStepper` when steps need labels | Dot strip for a labeled wizard |
+
+---
+
+## Accessibility
+
+Behaviors (what must happen), not slogans.
+
+| Behavior | Expectation |
+| --- | --- |
+| Structure | Strip is a `<ul>` of indicator list items — each child renders a `<button type="button">` |
+| Selection | Active dot is styled via `.joy-indicator--button-selected`; pair with visible panel content for context |
+| Names | Each dot gets `aria-label` from the child’s `ariaLabel` or `value` — prefer explicit labels when `value` is not human-readable |
+| Focus | Each dot is focusable; `:focus-visible` ring on the button — don’t remove it in product CSS |
+| Keyboard | Tab between dots; click (or Enter/Space on the focused button) updates `v-model` and the associated panel |
+| Group context | Dots supplement the main content — don’t make position information hover-only or dots-only |
+
+Target: **WCAG 2.2 AA** where the product requires it.
+
+---
+
+## Examples
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { VJoyIndicators, VJoyIndicator } from '@maltjoy/core-vue'
+
+const activeSlide = ref('slide-1')
+const slides = ['slide-1', 'slide-2', 'slide-3'] as const
+</script>
+
+<template>
+  <!-- Static children -->
+  <VJoyIndicators v-model="activeSlide">
+    <VJoyIndicator value="slide-1" aria-label="Slide 1 of 3" />
+    <VJoyIndicator value="slide-2" aria-label="Slide 2 of 3" />
+    <VJoyIndicator value="slide-3" aria-label="Slide 3 of 3" />
+  </VJoyIndicators>
+
+  <!-- Dynamic list (v-for) -->
+  <VJoyIndicators v-model="activeSlide" variant="light">
+    <VJoyIndicator
+      v-for="(slide, index) in slides"
+      :key="slide"
+      :value="slide"
+      :aria-label="`Slide ${index + 1} of ${slides.length}`"
+    />
+  </VJoyIndicators>
+
+  <!-- Show the panel that matches v-model -->
+  <img v-if="activeSlide === 'slide-1'" src="/hero-1.jpg" alt="…" />
+  <!-- … -->
+</template>
+```
+
+**Multi-step dialog** — pass `VJoyIndicators` into `VJoyDialog`’s `dialog-indicators` slot; keep `v-model` in sync with which dialog is open. See [VJoyDialog DSDS guideline](../JoyDialog/JoyDialog.DSDS.guideline.md).
+
+In Nuxt (or apps with auto-import), omit the import if components are already global.
+
+---
+
+## Related
+
+| Component | Use when |
+| --- | --- |
+| `VJoyIndicator` | **Required** child — one dot per panel |
+| `VJoyDialog` | Multi-step modal with `dialog-indicators` slot |
+| `VJoyStepper` / `VJoyStep` | Labeled multi-step progress (not dot-only navigation) |
+| `VJoyTabs` / `VJoyTab` | Named tab panels instead of anonymous slides |
+| `VJoyDot` | Status or count dots — not slide navigation |
+| `VJoyPagination` | Numeric page navigation for large datasets |

package/dist/doc/VJoyInput/JoyInput.types.ts

@@ -26,13 +26,8 @@ export interface VJoyInputProps {
     /** Add a JoyIcon / joy-icon with given name on left-side. */
     icon?: TJoyIconsNames;
     size?: TJoyInputSizes;
-    /**
-     * @deprecated Password mode is deprecated on VJoyInput.
-     * Use VJoyInputPassword for password fields and toggle behavior.
-     */
+    /** HTML input type. Use VJoyInputPassword for password fields. */
     type?: string;
-    /** Adds a legend like symbol on the right of the component. Made for number based values */
-    unit?: string;
     /** Activates the readonly mode for the input */
     readonly?: boolean;
     /** When using the clearable property, you have to specific an aria-label for accessibility. */