npm - @velkymx/vibeui - Versions diffs - 0.9.0 → 1.1.0 - Mend

@velkymx/vibeui 0.9.0 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (184) hide show

package/AGENTS.md +44 -0
package/CLAUDE.md +48 -0
package/README.md +222 -197
package/dist/App.vue.d.ts +2 -1
package/dist/components/HelloWorld.vue.d.ts +2 -1
package/dist/components/VibeAccordion.vue.d.ts +39 -40
package/dist/components/VibeAlert.vue.d.ts +21 -37
package/dist/components/VibeAutocomplete.vue.d.ts +59 -31
package/dist/components/VibeBadge.vue.d.ts +10 -18
package/dist/components/VibeBreadcrumb.vue.d.ts +25 -21
package/dist/components/VibeButton.vue.d.ts +13 -17
package/dist/components/VibeButtonGroup.vue.d.ts +11 -19
package/dist/components/VibeCard.vue.d.ts +51 -24
package/dist/components/VibeCarousel.vue.d.ts +27 -49
package/dist/components/VibeChartBar.vue.d.ts +61 -0
package/dist/components/VibeChartLine.vue.d.ts +70 -0
package/dist/components/VibeChartPie.vue.d.ts +34 -0
package/dist/components/VibeCloseButton.vue.d.ts +9 -7
package/dist/components/VibeCol.vue.d.ts +9 -17
package/dist/components/VibeCollapse.vue.d.ts +24 -32
package/dist/components/VibeContainer.vue.d.ts +9 -17
package/dist/components/VibeDataTable.vue.d.ts +122 -63
package/dist/components/VibeDatePicker.vue.d.ts +4 -6
package/dist/components/VibeDraggable.vue.d.ts +9 -13
package/dist/components/VibeDropdown.vue.d.ts +46 -43
package/dist/components/VibeDroppable.vue.d.ts +9 -13
package/dist/components/VibeFileInput.vue.d.ts +14 -20
package/dist/components/VibeFormCheckbox.vue.d.ts +30 -22
package/dist/components/VibeFormDatepicker.vue.d.ts +27 -30
package/dist/components/VibeFormErrorSummary.vue.d.ts +17 -0
package/dist/components/VibeFormGroup.vue.d.ts +10 -13
package/dist/components/VibeFormInput.vue.d.ts +60 -25
package/dist/components/VibeFormRadio.vue.d.ts +23 -24
package/dist/components/VibeFormSelect.vue.d.ts +28 -34
package/dist/components/VibeFormSpinbutton.vue.d.ts +31 -34
package/dist/components/VibeFormSwitch.vue.d.ts +22 -23
package/dist/components/VibeFormTextarea.vue.d.ts +24 -25
package/dist/components/VibeFormWysiwyg.vue.d.ts +23 -22
package/dist/components/VibeHero.vue.d.ts +117 -0
package/dist/components/VibeIcon.vue.d.ts +27 -7
package/dist/components/VibeInputGroup.vue.d.ts +12 -14
package/dist/components/VibeLink.vue.d.ts +14 -18
package/dist/components/VibeListGroup.vue.d.ts +26 -22
package/dist/components/VibeModal.vue.d.ts +47 -45
package/dist/components/VibeNav.vue.d.ts +40 -20
package/dist/components/VibeNavbar.vue.d.ts +12 -19
package/dist/components/VibeNavbarBrand.vue.d.ts +9 -17
package/dist/components/VibeNavbarNav.vue.d.ts +52 -33
package/dist/components/VibeNavbarToggle.vue.d.ts +7 -5
package/dist/components/VibeOffcanvas.vue.d.ts +28 -43
package/dist/components/VibePagination.vue.d.ts +38 -29
package/dist/components/VibePlaceholder.vue.d.ts +9 -17
package/dist/components/VibePopover.vue.d.ts +17 -40
package/dist/components/VibeProgress.vue.d.ts +13 -21
package/dist/components/VibeResizable.vue.d.ts +10 -14
package/dist/components/VibeRow.vue.d.ts +9 -17
package/dist/components/VibeScrollspy.vue.d.ts +37 -25
package/dist/components/VibeSkeleton.vue.d.ts +2 -1
package/dist/components/VibeSlider.vue.d.ts +4 -5
package/dist/components/VibeSortable.vue.d.ts +37 -18
package/dist/components/VibeSpinner.vue.d.ts +4 -7
package/dist/components/VibeStepper.vue.d.ts +32 -31
package/dist/components/VibeTab.vue.d.ts +7 -11
package/dist/components/VibeTabContent.vue.d.ts +13 -31
package/dist/components/VibeTabs.vue.d.ts +9 -13
package/dist/components/VibeToast.vue.d.ts +31 -44
package/dist/components/VibeToastHost.vue.d.ts +2 -1
package/dist/components/VibeTooltip.vue.d.ts +16 -39
package/dist/components/chart/chartColors.d.ts +3 -0
package/dist/components/chart/chartResize.d.ts +2 -0
package/dist/components/chart/chartTooltip.d.ts +2 -0
package/dist/components/chart/chartTypes.d.ts +6 -0
package/dist/components/chart/drawBar.d.ts +5 -0
package/dist/components/chart/drawLine.d.ts +18 -0
package/dist/components/chart/drawPie.d.ts +4 -0
package/dist/components/dndStore.d.ts +1 -0
package/dist/components/index.d.ts +6 -1
package/dist/composables/useBreakpoints.d.ts +1 -0
package/dist/composables/useColorMode.d.ts +1 -1
package/dist/composables/useId.d.ts +1 -4
package/dist/directives/vTooltip.d.ts +2 -3
package/dist/injectionKeys.d.ts +34 -0
package/dist/purify.es-eYghtX9j.mjs +735 -0
package/dist/types.d.ts +23 -2
package/dist/utils/routeKey.d.ts +11 -0
package/dist/utils/safeCss.d.ts +16 -0
package/dist/utils/safeHref.d.ts +7 -0
package/dist/utils/sanitizeHtml.d.ts +13 -0
package/dist/vibeui.css +2 -1
package/dist/vibeui.es.js +8527 -5855
package/dist/vibeui.umd.js +3 -1
package/docs/README.md +225 -0
package/docs/components/advanced/popover.md +125 -0
package/docs/components/advanced/scrollspy.md +106 -0
package/docs/components/advanced/tooltip.md +90 -0
package/docs/components/card/card.md +223 -0
package/docs/components/charts/chart-bar.md +129 -0
package/docs/components/charts/chart-line.md +136 -0
package/docs/components/charts/chart-pie.md +102 -0
package/docs/components/core/alert.md +94 -0
package/docs/components/core/badge.md +75 -0
package/docs/components/core/button-group.md +99 -0
package/docs/components/core/button.md +145 -0
package/docs/components/core/close-button.md +82 -0
package/docs/components/core/link.md +79 -0
package/docs/components/core/placeholder.md +129 -0
package/docs/components/core/skeleton.md +40 -0
package/docs/components/core/spinner.md +103 -0
package/docs/components/data/datatable.md +437 -0
package/docs/components/hero/hero.md +65 -0
package/docs/components/interactive/accordion.md +121 -0
package/docs/components/interactive/carousel.md +112 -0
package/docs/components/interactive/collapse.md +106 -0
package/docs/components/interactive/date-picker.md +78 -0
package/docs/components/interactive/draggable.md +91 -0
package/docs/components/interactive/dropdown.md +129 -0
package/docs/components/interactive/modal.md +151 -0
package/docs/components/interactive/offcanvas.md +92 -0
package/docs/components/interactive/resizable.md +73 -0
package/docs/components/interactive/slider.md +57 -0
package/docs/components/interactive/sortable.md +52 -0
package/docs/components/interactive/stepper.md +83 -0
package/docs/components/interactive/tabs.md +66 -0
package/docs/components/interactive/toast.md +177 -0
package/docs/components/layout/col.md +117 -0
package/docs/components/layout/container.md +53 -0
package/docs/components/layout/row.md +107 -0
package/docs/components/list/list-group.md +225 -0
package/docs/components/navigation/breadcrumb.md +120 -0
package/docs/components/navigation/nav.md +151 -0
package/docs/components/navigation/navbar.md +114 -0
package/docs/components/navigation/pagination.md +163 -0
package/docs/components/progress/progress.md +188 -0
package/docs/composables/back-button.md +28 -0
package/docs/composables/breakpoints.md +54 -0
package/docs/composables/color-mode.md +179 -0
package/docs/composables/use-form.md +78 -0
package/docs/composables/use-position.md +68 -0
package/docs/composables/use-toast.md +91 -0
package/docs/directives/v-tooltip.md +58 -0
package/docs/forms/README.md +87 -0
package/docs/forms/autocomplete.md +96 -0
package/docs/forms/file-input.md +97 -0
package/docs/forms/form-checkbox.md +100 -0
package/docs/forms/form-datepicker.md +80 -0
package/docs/forms/form-error-summary.md +96 -0
package/docs/forms/form-group.md +118 -0
package/docs/forms/form-input.md +140 -0
package/docs/forms/form-radio.md +82 -0
package/docs/forms/form-select.md +98 -0
package/docs/forms/form-spinbutton.md +94 -0
package/docs/forms/form-switch.md +75 -0
package/docs/forms/form-textarea.md +82 -0
package/docs/forms/form-wysiwyg.md +99 -0
package/docs/forms/input-group.md +70 -0
package/docs/forms/validation.md +213 -0
package/docs/getting-started/starter-template.md +136 -0
package/docs/superpowers/plans/2026-05-12-vibe-charts.md +1999 -0
package/docs/superpowers/plans/2026-05-29-e2e-browser-testing.md +615 -0
package/docs/superpowers/specs/2026-05-12-charting-design.md +185 -0
package/docs/superpowers/specs/2026-05-29-e2e-browser-testing-design.md +168 -0
package/docs/utilities/position.md +82 -0
package/docs/versioning.md +57 -0
package/examples/README.md +201 -0
package/examples/album.html +262 -0
package/examples/blog.html +166 -0
package/examples/carousel.html +114 -0
package/examples/checkout.html +275 -0
package/examples/cover.html +89 -0
package/examples/dashboard.html +156 -0
package/examples/index.html +129 -0
package/examples/jumbotron.html +56 -0
package/examples/mobile-dashboard.html +138 -0
package/examples/pricing.html +172 -0
package/examples/product.html +145 -0
package/examples/sidebars.html +166 -0
package/examples/sign-in.html +119 -0
package/examples/starter.html +314 -0
package/examples/sticky-footer-navbar.html +70 -0
package/examples/sticky-footer.html +60 -0
package/examples/test-simple.html +91 -0
package/llms.txt +801 -0
package/package.json +44 -14
package/dist/types/index.d.ts +0 -6

package/docs/components/interactive/modal.md ADDED Viewed

@@ -0,0 +1,151 @@
+# VibeModal
+Modal dialogs for lightboxes, user notifications, or custom content.
+## Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `id` | `String` | `Auto-generated` | Unique identifier for the modal |
+| `modelValue` | `Boolean` | `false` | Control visibility (v-model) |
+| `title` | `String` | `''` | Modal title |
+| `size` | `Size\|'xl'` | `undefined` | Modal size: `'sm'`, `'lg'`, `'xl'` |
+| `centered` | `Boolean` | `false` | Vertically center modal |
+| `scrollable` | `Boolean` | `false` | Scrollable modal body |
+| `fullscreen` | `Boolean\|String` | `false` | Fullscreen: `true` or breakpoint |
+| `staticBackdrop` | `Boolean` | `false` | Don't close on backdrop click |
+| `hideHeader` | `Boolean` | `false` | Hide header section |
+| `hideFooter` | `Boolean` | `false` | Hide footer section |
+| `teleport` | `Boolean\|String` | `'body'` | Destination for Vue Teleport |
+| `autoFocus` | `Boolean` | `true` | Focus the first focusable descendant when the modal opens (WCAG 2.4.3). |
+| `submitOnMetaEnter` | `Boolean` | `true` | Submit the first `<form>` inside the modal on `Cmd+Enter` / `Ctrl+Enter` (WCAG 2.1.1). |
+## Events
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `update:modelValue` | `Boolean` | Emitted when modal visibility changes |
+| `show` | - | Emitted when modal starts showing |
+| `shown` | - | Emitted when modal is fully shown |
+| `hide` | - | Emitted when modal starts hiding |
+| `hidden` | - | Emitted when modal is fully hidden |
+| `component-error` | `ComponentError` | Emitted if Bootstrap JS fails to load |
+## Slots
+| Slot | Description |
+|------|-------------|
+| `default` | Modal body content |
+| `header` | Custom header content |
+| `footer` | Custom footer content |
+## Usage
+### Reactive Usage (v-model)
+```vue
+<template>
+  <div>
+    <VibeButton variant="primary" @click="showModal = true">
+      Open Modal
+    </VibeButton>
+    <VibeModal v-model="showModal" title="Reactive Modal">
+      <p>This modal is controlled via Vue state.</p>
+    </VibeModal>
+  </div>
+</template>
+<script setup>
+import { ref } from 'vue'
+const showModal = ref(false)
+</script>
+```
+### Sized Modals
+```vue
+<template>
+  <div>
+    <VibeModal title="Small Modal" size="sm">
+      Small modal content
+    </VibeModal>
+    <VibeModal title="Large Modal" size="lg">
+      Large modal content
+    </VibeModal>
+  </div>
+</template>
+```
+### Centered Modal
+```vue
+<template>
+  <VibeModal title="Centered Modal" centered>
+    This modal is vertically centered.
+  </VibeModal>
+</template>
+```
+### Custom Footer
+```vue
+<template>
+  <VibeModal v-model="showModal" title="Custom Footer">
+    <p>Modal with custom footer buttons.</p>
+    <template #footer>
+      <VibeButton variant="secondary" @click="showModal = false">Close</VibeButton>
+      <VibeButton variant="primary" @click="save">Save changes</VibeButton>
+    </template>
+  </VibeModal>
+</template>
+<script setup>
+import { ref } from 'vue'
+const showModal = ref(true)
+function save() {
+  // persist changes...
+  showModal.value = false
+}
+</script>
+```
+## Important Notes
+**Automatic Initialization:** This component automatically initializes Bootstrap's Modal functionality when it is mounted, provided that Bootstrap's JavaScript is available in your project.
+**Teleportation:** By default, this component teleports its DOM elements to the `<body>` to avoid stacking context issues. You can customize this with the `teleport` prop.
+**Auto-focus (WCAG 2.4.3):** On open, focus moves to the first focusable descendant (input, select, button, etc.). Repeated opens re-focus. Disable with `:auto-focus="false"` when you need to control focus yourself.
+**Focus trap (WCAG 2.1.2):** While the modal is open, `Tab` and `Shift+Tab` cycle within the modal only. All sibling elements receive the `inert` attribute so screen readers cannot reach the page behind the modal. `inert` is cleared on close and on unmount.
+**Focus Return (WCAG 2.4.3):** When the modal closes, focus is automatically returned to the element that opened it, including for programmatically opened modals.
+**Cmd/Ctrl+Enter submit (WCAG 2.1.1):** Pressing `Cmd+Enter` (macOS) or `Ctrl+Enter` (Windows/Linux) inside the modal submits the first `<form>` descendant via `requestSubmit()`. Disable with `:submit-on-meta-enter="false"` for non-form modals.
+**Escape Hatch:** The exposed `_unsafe_bsInstance` template ref gives raw access to the underlying Bootstrap Modal instance. It is **not** part of the stable API — calling `dispose()` or other lifecycle methods on it directly **will** break the component. Prefer `v-model` and the exposed `show()` / `hide()` methods.
+## Mobile Optimization
+**Safe Areas:** In fullscreen mode, the modal header and footer automatically respect device safe areas (notches) in hybrid apps.
+**Hardware Back Button:** On Android devices in hybrid environments, the hardware back button will automatically close the modal if it is open.
+**Dynamic Height:** Fullscreen modals use `dvh` (dynamic viewport height) units to ensure they occupy the full screen height even when mobile browser bars are visible.
+## Bootstrap CSS Classes
+- `.modal`
+- `.modal-dialog`
+- `.modal-content`
+- `.modal-header`
+- `.modal-title`
+- `.modal-body`
+- `.modal-footer`
+- `.modal-{size}`
+- `.modal-dialog-centered`
+- `.modal-dialog-scrollable`
+- `.modal-fullscreen`

package/docs/components/interactive/offcanvas.md ADDED Viewed

@@ -0,0 +1,92 @@
+# VibeOffcanvas
+Hidden sidebar for navigation or additional content.
+## Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `id` | `String` | `Auto-generated` | Unique identifier |
+| `modelValue` | `Boolean` | `false` | Control visibility (v-model) |
+| `title` | `String` | `''` | Offcanvas title |
+| `placement` | `OffcanvasPlacement` | `'start'` | Placement: `'start'`, `'end'`, `'top'`, `'bottom'` |
+| `backdrop` | `Boolean\|String` | `true` | Backdrop: `true`, `false`, or `'static'` |
+| `scroll` | `Boolean` | `false` | Allow body scrolling |
+| `teleport` | `Boolean\|String` | `'body'` | Destination for Vue Teleport |
+## Events
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `update:modelValue` | `Boolean` | Emitted when visibility changes |
+| `show` | - | Emitted when offcanvas starts showing |
+| `shown` | - | Emitted when offcanvas is fully shown |
+| `hide` | - | Emitted when offcanvas starts hiding |
+| `hidden` | - | Emitted when offcanvas is fully hidden |
+| `component-error` | `ComponentError` | Emitted if Bootstrap JS fails to load |
+## Slots
+| Slot | Description |
+|------|-------------|
+| `default` | Offcanvas body content |
+| `header` | Custom header content |
+## Usage
+### Reactive Usage (v-model)
+```vue
+<template>
+  <div>
+    <VibeButton variant="primary" @click="showOffcanvas = true">
+      Open Offcanvas
+    </VibeButton>
+    <VibeOffcanvas v-model="showOffcanvas" title="Reactive Offcanvas">
+      This offcanvas is controlled via Vue state.
+    </VibeOffcanvas>
+  </div>
+</template>
+<script setup>
+import { ref } from 'vue'
+const showOffcanvas = ref(false)
+</script>
+```
+### Placement Options
+```vue
+<template>
+  <VibeOffcanvas title="Right Side" placement="end">
+    Content on the right
+  </VibeOffcanvas>
+</template>
+```
+## Important Notes
+**Automatic Initialization:** This component automatically initializes Bootstrap's Offcanvas functionality when it is mounted, provided that Bootstrap's JavaScript is available in your project.
+**Teleportation:** By default, this component teleports its DOM elements to the `<body>` to avoid stacking context issues. You can customize this with the `teleport` prop.
+**Focus Return (WCAG 2.4.3):** When the offcanvas closes, focus is automatically returned to the element that opened it, including for programmatically opened panels.
+**Escape Hatch:** The exposed `_unsafe_bsInstance` template ref gives raw access to the underlying Bootstrap Offcanvas instance. It is **not** part of the stable API — calling `dispose()` or other lifecycle methods on it directly **will** break the component. Prefer `v-model` and the exposed `show()` / `hide()` methods.
+## Mobile Optimization
+**Safe Areas:** When used in hybrid apps with `viewport-fit=cover`, the offcanvas header automatically adds padding to account for device notches.
+**Hardware Back Button:** On Android devices in hybrid environments, the hardware back button will automatically close the offcanvas if it is open.
+**Dynamic Height:** The offcanvas uses `dvh` (dynamic viewport height) units to ensure it occupies the full screen height even when mobile browser bars are visible.
+## Bootstrap CSS Classes
+- `.offcanvas`
+- `.offcanvas-{placement}`
+- `.offcanvas-header`
+- `.offcanvas-title`
+- `.offcanvas-body`

package/docs/components/interactive/resizable.md ADDED Viewed

@@ -0,0 +1,73 @@
+# VibeResizable
+Wrap a child element with up to 8 directional handles for user-driven resizing. Useful for dashboard panels, image crops, draggable widgets.
+## Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `handles` | `Handle[]` | `['se']` | Subset of `'n' \| 's' \| 'e' \| 'w' \| 'ne' \| 'nw' \| 'se' \| 'sw'` |
+| `width` | `Number` | `200` | Initial width in px (use `update:width` v-model) |
+| `height` | `Number` | `150` | Initial height in px (use `update:height` v-model) |
+| `minWidth` | `Number` | `20` | |
+| `maxWidth` | `Number` | `Infinity` | |
+| `minHeight` | `Number` | `20` | |
+| `maxHeight` | `Number` | `Infinity` | |
+| `aspectRatio` | `Number` | `undefined` | Lock width/height ratio (e.g. `16/9`) |
+| `grid` | `Number` | `1` | Snap step in px |
+| `disabled` | `Boolean` | `false` | Hide handles, ignore drags |
+### Events
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `update:width` | `Number` | New width (use with `v-model:width`) |
+| `update:height` | `Number` | New height |
+| `resizestart` | `{ width, height }` | Drag began |
+| `resize` | `{ width, height, handle }` | Continuous during drag |
+| `resizeend` | `{ width, height }` | Drag committed |
+## Examples
+### Resizable card
+```vue
+<script setup>
+import { ref } from 'vue'
+const w = ref(320)
+const h = ref(200)
+</script>
+<template>
+  <VibeResizable
+    v-model:width="w"
+    v-model:height="h"
+    :handles="['se', 's', 'e']"
+    :grid="10"
+    :min-width="160"
+  >
+    <div class="card h-100">
+      <div class="card-body">
+        Content reflows: {{ w }}×{{ h }}
+      </div>
+    </div>
+  </VibeResizable>
+</template>
+```
+## Layout caveat
+Handles are positioned just outside the box (negative top/right/bottom/left) so they sit *on* the edge for easier grabbing. If the resizable lives inside a parent with `overflow: hidden`, or sits at the viewport edge, the handles may clip. Either lift `overflow` from the parent or wrap the resizable in extra padding.
+### Aspect-locked image preview
+```vue
+<VibeResizable
+  v-model:width="w"
+  v-model:height="h"
+  :aspect-ratio="16/9"
+  :handles="['nw', 'ne', 'sw', 'se']"
+>
+  <img :src="src" class="w-100 h-100" />
+</VibeResizable>
+```

package/docs/components/interactive/slider.md ADDED Viewed

@@ -0,0 +1,57 @@
+# VibeSlider
+Cross-browser range slider with consistent look and full keyboard support. Single mode binds a number; range mode binds `[low, high]` with handles that cannot cross.
+## Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `modelValue` | `Number \| [Number, Number]` | `0` | Slider value (v-model) |
+| `min` | `Number` | `0` | |
+| `max` | `Number` | `100` | |
+| `step` | `Number` | `1` | Snap step |
+| `range` | `Boolean` | `false` | Two-handle range mode |
+| `vertical` | `Boolean` | `false` | Vertical orientation |
+| `disabled` | `Boolean` | `false` | |
+### Events
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `update:modelValue` | `Number \| [Number, Number]` | New value |
+| `change` | Same | Alias |
+## Keyboard
+| Key | Action |
+|-----|--------|
+| `ArrowRight` / `ArrowUp` | +1 step |
+| `ArrowLeft` / `ArrowDown` | –1 step |
+| `Home` | Jump to `min` |
+| `End` | Jump to `max` |
+| `PageUp` | +10 steps |
+| `PageDown` | –10 steps |
+## Examples
+### Single value
+```vue
+<VibeSlider v-model="volume" :min="0" :max="100" :step="5" />
+```
+### Range
+```vue
+<VibeSlider v-model="priceRange" range :min="0" :max="500" />
+```
+### Vertical
+```vue
+<VibeSlider v-model="value" vertical />
+```
+## Accessibility
+Each handle has `role="slider"`, `aria-valuemin`, `aria-valuemax`, `aria-valuenow`, and `tabindex="0"`. Disabled state sets `aria-disabled="true"`.

package/docs/components/interactive/sortable.md ADDED Viewed

@@ -0,0 +1,52 @@
+# VibeSortable
+Drag-and-drop reorderable list. Generic over the row type; binds an ordered array via `v-model`.
+## Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `modelValue` | `T[]` | required | Ordered array (v-model) |
+| `itemKey` | `String` | `undefined` | Property name on each item to use as the `:key`. When omitted, index is used as key. Set this when items have a stable unique identifier to avoid key conflicts during reorder. |
+| `disabled` | `Boolean` | `false` | Disable dragging |
+| `tag` | `String` | `'div'` | Container element |
+| `itemTag` | `String` | `'div'` | Element wrapping each item |
+### Events
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `update:modelValue` | `T[]` | New ordered array after a successful drop |
+| `reorder` | `{ from, to, item }` | Convenience event for persisting moves |
+### Slots
+The default slot is scoped per item with `{ item, index }`.
+## Examples
+```vue
+<script setup>
+import { ref } from 'vue'
+const tasks = ref(['Wireframes', 'Backend', 'QA', 'Launch'])
+</script>
+<template>
+  <VibeSortable v-model="tasks">
+    <template #default="{ item, index }">
+      <div class="card p-2 mb-2">
+        {{ index + 1 }}. {{ item }}
+      </div>
+    </template>
+  </VibeSortable>
+</template>
+```
+Items get `data-vibe-sortable-item` for testability and styling. The currently dragging item gets a `vibe-sortable-dragging` class.
+## When to use VibeSortable vs VibeDraggable
+- **VibeSortable**: a single ordered list whose only operation is reorder.
+- **VibeDraggable + VibeDroppable**: cross-list moves, kanban boards, builders, anywhere the source and target are different containers.
+> **Scope:** VibeSortable handles in-list reorder only. Cross-list moves between two `<VibeSortable>` instances are not supported — use `VibeDraggable` + `VibeDroppable` for that.

package/docs/components/interactive/stepper.md ADDED Viewed

@@ -0,0 +1,83 @@
+# VibeStepper
+Multi-step wizard with linear / non-linear modes and per-step validation guards. Use for sprint setup, initiative gates, onboarding flows.
+## Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `modelValue` | `Number` | `0` | Active step index (v-model) |
+| `steps` | `StepperStep[]` | required | Step descriptors (see below) |
+| `linear` | `Boolean` | `true` | Forbid clicking ahead of current step |
+| `vertical` | `Boolean` | `false` | Vertical layout |
+| `beforeNext` | `(currentIndex, 'next') => boolean \| Promise<boolean>` | `undefined` | Guard for advancing |
+| `beforePrev` | `(currentIndex, 'prev') => boolean \| Promise<boolean>` | `undefined` | Guard for going back |
+| `nextText` | `String` | `'Next'` | Default action button label |
+| `prevText` | `String` | `'Back'` | |
+| `finishText` | `String` | `'Finish'` | Replaces `nextText` on the last step |
+### Step descriptor
+```ts
+interface StepperStep {
+  label: string
+  description?: string  // small caption under the label
+  disabled?: boolean
+  icon?: string         // reserved; use marker slot for now
+}
+```
+### Events
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `update:modelValue` | `Number` | Active step changed |
+| `finish` | — | Emitted when next is clicked on the last step |
+| `component-error` | `unknown` | Emitted if a `beforeNext` / `beforePrev` guard throws |
+### Slots
+| Slot | Scope | Description |
+|------|-------|-------------|
+| `step` | `{ index, step }` | Body for the active step |
+| `marker` | `{ index, step, active }` | Override the step's marker (default: number) |
+| `label` | `{ index, step }` | Override the step header label |
+| `actions` | `{ next, prev, isFirst, isLast }` | Replace default footer buttons |
+## Examples
+```vue
+<script setup>
+import { ref } from 'vue'
+const active = ref(0)
+const steps = [
+  { label: 'Account', description: 'Basics' },
+  { label: 'Profile' },
+  { label: 'Confirm' }
+]
+async function validateStep(index) {
+  // call server, validate fields...
+  return true
+}
+</script>
+<template>
+  <VibeStepper
+    v-model="active"
+    :steps="steps"
+    :before-next="validateStep"
+    @finish="submit"
+  >
+    <template #step="{ index }">
+      <component :is="forms[index]" />
+    </template>
+  </VibeStepper>
+</template>
+```
+### Non-linear (free navigation)
+```vue
+<VibeStepper :steps="steps" v-model="active" :linear="false" />
+```

package/docs/components/interactive/tabs.md ADDED Viewed

@@ -0,0 +1,66 @@
+# VibeTabs / VibeTab
+Self-contained tab container with content switching. Distinct from `VibeNav` (which is a pure `.nav` rendering primitive) — `VibeTabs` manages active state and renders tab panes.
+## VibeTabs Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `modelValue` | `String` | `undefined` | Active tab `name` (v-model). Auto-defaults to first non-disabled tab. |
+| `variant` | `'tabs' \| 'pills' \| 'underline'` | `'tabs'` | Bootstrap nav style |
+| `fill` | `Boolean` | `false` | Apply `.nav-fill` |
+| `justified` | `Boolean` | `false` | Apply `.nav-justified` |
+| `vertical` | `Boolean` | `false` | Render nav vertically alongside content |
+| `lazy` | `Boolean` | `false` | Defer rendering of inactive tabs until first activation |
+### Events
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `update:modelValue` | `String` | Emitted when active tab changes |
+| `change` | `String` | Same payload, alias for non-v-model usage |
+## VibeTab Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `name` | `String` | required | Stable identifier matching `modelValue` |
+| `label` | `String` | required | Tab nav button text |
+| `disabled` | `Boolean` | `false` | Skip activation; appears greyed out |
+The default slot is the tab body.
+## Examples
+```vue
+<script setup>
+import { ref } from 'vue'
+const active = ref('details')
+</script>
+<template>
+  <VibeTabs v-model="active" variant="pills">
+    <VibeTab name="details" label="Details">
+      <p>Issue body, status, assignee...</p>
+    </VibeTab>
+    <VibeTab name="activity" label="Activity">
+      <ActivityTimeline />
+    </VibeTab>
+    <VibeTab name="links" label="Linked Issues" disabled>
+      <p>Link feature coming soon.</p>
+    </VibeTab>
+  </VibeTabs>
+</template>
+```
+### Lazy mounting for heavy panes
+```vue
+<VibeTabs v-model="active" lazy>
+  <VibeTab name="metrics" label="Metrics">
+    <ExpensiveChart />
+  </VibeTab>
+</VibeTabs>
+```
+`<ExpensiveChart>` is not mounted until the user clicks the Metrics tab. Once activated, it stays mounted across switches so internal state isn't lost.