@velkymx/vibeui 0.8.2 → 1.0.2

package/docs/components/interactive/resizable.md

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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.

package/docs/components/interactive/toast.md

@@ -2,7 +2,68 @@
 
 Push notifications for lightweight alerts.
 
-## Props
+The recommended way to show toasts is the **`useToast()` service** with a single `<VibeToastHost />` mounted once near your app root. The `<VibeToast>` component is the lower-level primitive for when you need a toast bound directly to local component state.
+
+## Toast Service (recommended)
+
+Mount `<VibeToastHost />` once (typically in `App.vue`), then call `useToast()` anywhere to enqueue toasts. The host manages containers, positioning, and dismissal for you.
+
+```vue
+<!-- App.vue -->
+<template>
+  <RouterView />
+  <VibeToastHost />
+</template>
+```
+
+```vue
+<!-- AnyComponent.vue -->
+<template>
+  <VibeButton @click="save">Save</VibeButton>
+</template>
+
+<script setup>
+import { useToast } from '@velkymx/vibeui'
+
+const toast = useToast()
+
+function save() {
+  // ...persist...
+  toast.success('Saved successfully')
+  toast.error('Something went wrong', { title: 'Error' })
+  toast.info('Heads up', { delay: 8000 })
+}
+</script>
+```
+
+### `useToast()` API
+
+| Method | Signature | Description |
+|--------|-----------|-------------|
+| `show` | `(body, options?) => ToastSpec` | Enqueue a toast with explicit options |
+| `success` | `(body, options?) => ToastSpec` | Shorthand for `variant: 'success'` |
+| `error` | `(body, options?) => ToastSpec` | Shorthand for `variant: 'danger'` |
+| `warn` | `(body, options?) => ToastSpec` | Shorthand for `variant: 'warning'` |
+| `info` | `(body, options?) => ToastSpec` | Shorthand for `variant: 'info'` |
+| `dismiss` | `(id) => boolean` | Remove a toast by id; returns `true` if found |
+| `clear` | `() => void` | Remove all queued toasts |
+| `toasts` | `readonly ToastSpec[]` | Reactive readonly snapshot of the queue |
+
+`ToastShowOptions`: `{ id?, title?, variant?, placement?, autohide?, delay? }`. Passing an existing `id` updates that toast in place instead of adding a new one. The variant shorthands (`success`, `error`, `warn`, `info`) accept the same options minus `variant`.
+
+### `<VibeToastHost />` Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `defaultPlacement` | `ToastPlacement` | `'top-end'` | Placement used for toasts that don't specify one |
+
+Toasts are grouped into one fixed container per placement, so toasts with different `placement` values render in the correct corner automatically.
+
+## VibeToast Component (primitive)
+
+Use the component directly when you want a toast tied to a local `v-model`.
+
+### Props
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
@@ -14,8 +75,9 @@ Push notifications for lightweight alerts.
 | `delay` | `Number` | `5000` | Delay in milliseconds |
 | `teleport` | `Boolean\|String` | `'body'` | Destination for Vue Teleport |
 | `placement` | `ToastPlacement` | `'top-end'` | Position of the toast |
+| `noContainer` | `Boolean` | `false` | Render only the `.toast` element (no Teleport/container). Used internally by `VibeToastHost` to group toasts |
 
-## Events
+### Events
 
 | Event | Payload | Description |
 |-------|---------|-------------|
@@ -24,17 +86,16 @@ Push notifications for lightweight alerts.
 | `shown` | - | Emitted when toast is fully shown |
 | `hide` | - | Emitted when toast starts hiding |
 | `hidden` | - | Emitted when toast is fully hidden |
+| `component-error` | `ComponentError` | Emitted if Bootstrap JS fails to load |
 
-## Slots
+### Slots
 
 | Slot | Description |
 |------|-------------|
 | `default` | Toast body content |
 | `header` | Custom header content |
 
-## Usage
-
-### Reactive Usage (v-model)
+### Usage
 
 ```vue
 <template>
@@ -53,57 +114,59 @@ const showToast = ref(false)
 </script>
 ```
 
-### Placed Toasts
+#### Placed Toasts
 
 ```vue
 <template>
   <div>
-    <VibeToast title="Success" variant="success" placement="bottom-end">
+    <VibeToast
+      v-model="showSuccess"
+      title="Success"
+      variant="success"
+      placement="bottom-end"
+    >
       Operation completed successfully!
     </VibeToast>
 
-    <VibeToast title="Center" variant="info" placement="middle-center">
+    <VibeToast v-model="showInfo" title="Center" variant="info" placement="middle-center">
       I am in the middle of the screen
     </VibeToast>
   </div>
 </template>
-```
-
-### Colored Toasts
-
-```vue
-<template>
-  <div>
-    <VibeToast title="Success" variant="success">
-      Operation completed successfully!
-    </VibeToast>
 
-    <VibeToast title="Warning" variant="warning">
-      Please review your changes
-    </VibeToast>
-  </div>
-</template>
+<script setup>
+import { ref } from 'vue'
+const showSuccess = ref(false)
+const showInfo = ref(false)
+</script>
 ```
 
-### Custom Delay
+#### Custom Delay
 
 ```vue
 <template>
-  <VibeToast title="Quick Toast" :delay="2000">
+  <VibeToast v-model="show" title="Quick Toast" :delay="2000">
     This will auto-hide after 2 seconds
   </VibeToast>
 </template>
+
+<script setup>
+import { ref } from 'vue'
+const show = ref(true)
+</script>
 ```
 
 ## Important Notes
 
-**Automatic Initialization:** This component automatically initializes Bootstrap's Toast functionality when it is mounted, provided that Bootstrap's JavaScript is available in your project.
+**Prefer the service:** Use `useToast()` + `<VibeToastHost />` for most cases. It dedupes/updates by `id`, queues multiple toasts, and handles container placement. Reach for `<VibeToast>` only when you need a toast bound to a single local boolean.
+
+**Automatic Container:** Unlike raw Bootstrap, `<VibeToast>` automatically manages its own `toast-container` and positioning based on the `placement` prop (unless `noContainer` is set).
 
-**Automatic Container:** Unlike raw Bootstrap, VibeToast automatically manages its own `toast-container` and positioning based on the `placement` prop.
+**Teleportation:** By default, the component teleports to the `<body>` so it is always visible on top of other elements.
 
-**Teleportation:** By default, this component teleports to the `<body>` to ensure it is always visible on top of other elements.
+**SSR:** The toast queue is a module singleton. In SSR runtimes call `resetToastStoreForSSR()` in your per-request reset hook to avoid leaking one request's pending toasts into another's render.
 
-**Instance Exposure:** You can access the underlying Bootstrap instance via template ref using the `bsInstance` property.
+**Escape Hatch:** `<VibeToast>` exposes `_unsafe_bsInstance` (raw Bootstrap Toast instance) via template ref. 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.
 
 ## Bootstrap CSS Classes
 

package/docs/components/layout/col.md

@@ -33,12 +33,6 @@ Column component for Bootstrap's grid system. Supports responsive sizing, offset
 - **OrderValue:** `0 | 1 | 2 | 3 | 4 | 5 | 'first' | 'last'`
 - **AlignItems:** `'start' | 'center' | 'end' | 'baseline' | 'stretch'`
 
-## Events
-
-| Event | Payload | Description |
-|-------|---------|-------------|
-| `component-error` | `Object` | Emitted when an error occurs |
-
 ## Slots
 
 | Slot | Description |

package/docs/components/layout/container.md

@@ -13,12 +13,6 @@ Responsive container component wrapping Bootstrap's `.container`, `.container-fl
 
 `'sm' | 'md' | 'lg' | 'xl' | 'xxl'`
 
-## Events
-
-| Event | Payload | Description |
-|-------|---------|-------------|
-| `component-error` | `Object` | Emitted when an error occurs |
-
 ## Slots
 
 | Slot | Description |

package/docs/components/layout/row.md

@@ -41,12 +41,6 @@ Row component for Bootstrap's grid system. Provides gutters, row columns, and al
 - **AlignItems:** `'start' | 'center' | 'end' | 'baseline' | 'stretch'`
 - **JustifyContent:** `'start' | 'center' | 'end' | 'around' | 'between' | 'evenly'`
 
-## Events
-
-| Event | Payload | Description |
-|-------|---------|-------------|
-| `component-error` | `Object` | Emitted when an error occurs |
-
 ## Slots
 
 | Slot | Description |

package/docs/components/list/list-group.md

@@ -208,6 +208,10 @@ const handleClick = ({ item, index }) => {
 </script>
 ```
 
+## Important Notes
+
+**`href` sanitization:** Each item's `href` is sanitized. Only `https://`/`http://` URLs, absolute paths (`/path`), relative paths (`./`, `../`), and anchors (`#section`) are allowed. Dangerous values such as `javascript:`, `data:`, `vbscript:`, and protocol-relative `//host` URLs are stripped — the item renders without an `href` (falling back to a non-link element). Use `to` for in-app navigation via Vue Router.
+
 ## Bootstrap CSS Classes
 
 - `.list-group`

package/docs/components/navigation/breadcrumb.md

@@ -109,6 +109,10 @@ const handleClick = ({ item, index }) => {
 </script>
 ```
 
+## Important Notes
+
+**`href` sanitization:** Item `href` values are sanitized. Only `https?://`, root-relative (`/path`), relative (`./`, `../`), and anchor (`#anchor`) URLs are allowed. `javascript:`, `data:`, and protocol-relative (`//`) URLs are stripped — such items render as plain text instead of links. Use `to` for Vue Router navigation.
+
 ## Bootstrap CSS Classes
 
 - `.breadcrumb`

package/docs/components/navigation/nav.md

@@ -22,6 +22,8 @@ interface NavItem {
   text: string
   href?: string
   to?: string | object
+  /** Tab panel selector (e.g. '#panel-id') for tabs/pills mode with router-link items */
+  target?: string
   active?: boolean
   disabled?: boolean
   children?: NavItem[] // Support for dropdowns
@@ -46,6 +48,28 @@ interface NavItem {
 
 ## Usage
 
+### Custom item content (`#item` slot)
+
+Use the `item` slot to render richer nav links — e.g. an icon next to the label. The slot is scoped with `{ item, index }`.
+
+```vue
+<template>
+  <VibeNav :items="navItems">
+    <template #item="{ item }">
+      <VibeIcon :icon="item.icon" class="me-2" />
+      {{ item.text }}
+    </template>
+  </VibeNav>
+</template>
+
+<script setup>
+const navItems = [
+  { text: 'Home', href: '#', icon: 'house', active: true },
+  { text: 'Profile', href: '#', icon: 'person' }
+]
+</script>
+```
+
 ### Interactive Tabs
 
 When using the `tabs` or `pills` props, nav links with an `href` starting with `#` will automatically act as Bootstrap tab triggers.
@@ -72,9 +96,48 @@ const tabPanes = [
 </script>
 ```
 
+### Tabs with Vue Router Links
+
+Items using `to` (router-link) also work in tabs/pills mode. Provide a `target` field pointing to the panel ID, and Bootstrap Tab events (`show`, `shown`, `hide`, `hidden`) will fire correctly:
+
+```vue
+<template>
+  <VibeNav tabs :items="navItems" @shown="onShown" />
+  <div class="tab-content mt-3">
+    <div id="overview-pane" class="tab-pane fade show active">Overview content</div>
+    <div id="settings-pane" class="tab-pane fade">Settings content</div>
+  </div>
+</template>
+
+<script setup>
+const navItems = [
+  { text: 'Overview', to: '/overview', target: '#overview-pane', active: true },
+  { text: 'Settings', to: '/settings', target: '#settings-pane' }
+]
+
+const onShown = (event) => {
+  console.log('Tab shown:', event.target)
+}
+</script>
+```
+
+Items with `to` starting with `#` are also treated as tab targets without needing an explicit `target` field.
+
+## Exposed Methods
+
+| Method | Description |
+|--------|-------------|
+| `refresh()` | Tears down and re-initializes Bootstrap Tab instances. Call after dynamically changing items if needed. |
+
+> **Escape hatch:** `_unsafe_bsInstances` (a `Map` of the underlying Bootstrap `Tab` instances) is also exposed. It is **not** part of the stable API — calling `dispose()` or other lifecycle methods on these directly WILL break the component.
+
 ## Important Notes
 
-**Automatic Initialization:** When using `tabs` or `pills`, this component automatically initializes Bootstrap's Tab functionality for any items that target a local ID (e.g., `href="#my-tab"`).
+**`href` sanitization:** Item and child `href` values are sanitized. Only `https?://`, root-relative (`/path`), relative (`./`, `../`), and anchor (`#anchor`) URLs are allowed; `javascript:`, `data:`, and protocol-relative (`//`) URLs are stripped. Use `to` for Vue Router navigation.
+
+**Disabled button items:** Items without `href` or `to` (plain button items) receive the HTML `disabled` attribute when `disabled: true` is set. Link and router-link items only get the disabled visual style — the browser attribute is omitted because `<a disabled>` has no native effect.
+
+**Automatic Initialization:** When using `tabs` or `pills`, this component automatically initializes Bootstrap's Tab functionality for items that target a local panel ID via `href="#..."`, `target="#..."`, or `to="#..."`.
 
 **State Management:** For complex tab state, combine `VibeNav` with `VibeTabContent` and manage the `active` state through your data.