npm - @appsbd/vue3-appsbd-ui - Versions diffs - 1.0.0 - Mend

@appsbd/vue3-appsbd-ui 1.0.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 (85) hide show

package/.ai/ai_ref_AbAvatar.md +43 -0
package/.ai/ai_ref_AbBadge.md +44 -0
package/.ai/ai_ref_AbButton.md +71 -0
package/.ai/ai_ref_AbCard.md +53 -0
package/.ai/ai_ref_AbCarousel.md +47 -0
package/.ai/ai_ref_AbColorPicker.md +55 -0
package/.ai/ai_ref_AbConfirmPopover.md +59 -0
package/.ai/ai_ref_AbCustomField.md +74 -0
package/.ai/ai_ref_AbDarkModeToggler.md +42 -0
package/.ai/ai_ref_AbDateTimePicker.md +105 -0
package/.ai/ai_ref_AbEasyModal.md +62 -0
package/.ai/ai_ref_AbField.md +93 -0
package/.ai/ai_ref_AbFileUploader.md +63 -0
package/.ai/ai_ref_AbFilterPanel.md +71 -0
package/.ai/ai_ref_AbFormCheck.md +75 -0
package/.ai/ai_ref_AbImageRadioInput.md +63 -0
package/.ai/ai_ref_AbInputField.md +71 -0
package/.ai/ai_ref_AbInputTag.md +73 -0
package/.ai/ai_ref_AbKbd.md +35 -0
package/.ai/ai_ref_AbKbdGroup.md +33 -0
package/.ai/ai_ref_AbModal.md +103 -0
package/.ai/ai_ref_AbMultiSelect.md +108 -0
package/.ai/ai_ref_AbNumberField.md +84 -0
package/.ai/ai_ref_AbPinInput.md +45 -0
package/.ai/ai_ref_AbPopover.md +64 -0
package/.ai/ai_ref_AbPricingCard.md +64 -0
package/.ai/ai_ref_AbPricingContainer.md +49 -0
package/.ai/ai_ref_AbPricingTable.md +72 -0
package/.ai/ai_ref_AbProgressbar.md +37 -0
package/.ai/ai_ref_AbScrollbar.md +48 -0
package/.ai/ai_ref_AbSettingsForm.md +54 -0
package/.ai/ai_ref_AbSideMenuItem.md +58 -0
package/.ai/ai_ref_AbSidebar.md +70 -0
package/.ai/ai_ref_AbSkeleton.md +41 -0
package/.ai/ai_ref_AbSlider.md +71 -0
package/.ai/ai_ref_AbTab.md +38 -0
package/.ai/ai_ref_AbTable.md +59 -0
package/.ai/ai_ref_AbTabs.md +47 -0
package/.ai/ai_ref_AbToggle.md +65 -0
package/.ai/ai_ref_AbTooltip.md +53 -0
package/.ai/ai_ref_AbWizard.md +77 -0
package/.ai/ai_ref_AbWizardStep.md +48 -0
package/.ai/ai_ref_global_config.md +66 -0
package/.ai/ltr-after.png +0 -0
package/.ai/rtl-after.png +0 -0
package/.ai/rtl-before.png +0 -0
package/AI_REFERENCE.md +1178 -0
package/dist/skins/_prefix.scss +1 -0
package/dist/skins/black.css +1 -0
package/dist/skins/black.scss +3 -0
package/dist/skins/cyan.css +1 -0
package/dist/skins/cyan.scss +3 -0
package/dist/skins/default.css +1 -0
package/dist/skins/default.scss +5 -0
package/dist/skins/gray.css +1 -0
package/dist/skins/gray.scss +3 -0
package/dist/skins/green.css +1 -0
package/dist/skins/green.scss +5 -0
package/dist/skins/orange.css +1 -0
package/dist/skins/orange.scss +3 -0
package/dist/skins/pink.css +1 -0
package/dist/skins/pink.scss +3 -0
package/dist/skins/purple.css +1 -0
package/dist/skins/purple.scss +3 -0
package/dist/skins/red.css +1 -0
package/dist/skins/red.scss +3 -0
package/dist/skins/themes/_black.scss +6 -0
package/dist/skins/themes/_blue.scss +43 -0
package/dist/skins/themes/_common_variable.scss +589 -0
package/dist/skins/themes/_cyan.scss +6 -0
package/dist/skins/themes/_gray.scss +6 -0
package/dist/skins/themes/_green.scss +6 -0
package/dist/skins/themes/_grid.scss +27 -0
package/dist/skins/themes/_orange.scss +6 -0
package/dist/skins/themes/_pink.scss +6 -0
package/dist/skins/themes/_purple.scss +6 -0
package/dist/skins/themes/_red.scss +6 -0
package/dist/skins/themes/_violet.scss +6 -0
package/dist/skins/violet.css +1 -0
package/dist/skins/violet.scss +3 -0
package/dist/style.css +1 -0
package/dist/vue3-appsbd-ui.cjs.js +201 -0
package/dist/vue3-appsbd-ui.es.js +9294 -0
package/package.json +60 -0
package/readme.md +136 -0

package/.ai/ai_ref_AbMultiSelect.md ADDED Viewed

@@ -0,0 +1,108 @@
+# AbMultiSelect — AI Reference
+Searchable single/multi/tag select. Custom built-in replacement for `@vueform/multiselect` — no third-party theme CSS required.
+## Installation
+Globally registered by the plugin.
+## Usage
+```vue
+<template>
+  <!-- Single select -->
+  <ab-multi-select
+    v-model="country"
+    name="country"
+    label="Country"
+    :options="countries"
+    label-key="title"
+    value-key="val"
+    searchable
+  />
+  <!-- Multiple -->
+  <ab-multi-select
+    v-model="skills"
+    name="skills"
+    label="Skills"
+    mode="multiple"
+    :options="skillOptions"
+    :max="5"
+  />
+  <!-- Tags mode -->
+  <ab-multi-select v-model="hashtags" name="hashtags" mode="tags" searchable />
+  <!-- AJAX search -->
+  <ab-multi-select
+    v-model="user"
+    name="user"
+    is-ajax-search
+    searchable
+    :on-search="searchUsers"
+    :loading="isSearching"
+  />
+</template>
+```
+## Props
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `modelValue` | `any` | `null` | v-model value. |
+| `label` | `String` | `""` | Field label. |
+| `placeholder` | `String` | `""` | Placeholder text. |
+| `type` | `String` | `"text"` | Input type. |
+| `name` | `String` | **required** | VeeValidate field name. |
+| `rules` | `String \| Object` | `""` | VeeValidate rules. |
+| `containerClass` | `String` | `"mb-3"` | Wrapper class. |
+| `hints` | `String` | `""` | Helper text. |
+| `multiple` | `Boolean` | `false` | Deprecated — use `mode` instead. |
+| `searchable` | `Boolean` | `false` | Enable option search/filter. |
+| `mode` | `String` | `"single"` | `single`, `multiple`, or `tags`. |
+| `size` | `String` | `"md"` | Adjusts component size (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`). |
+| `options` | `Array` | `[]` | Available options. |
+| `labelKey` | `String` | `"title"` | Property to use for label. |
+| `valueKey` | `String` | `"val"` | Property to use for value. |
+| `max` | `Number` | `-1` | Max selections; `-1` = unlimited. |
+| `object` | `Boolean` | `false` | Return full objects instead of values. |
+| `prefix` | `String` | `""` | Prefix text. |
+| `postfix` | `String` | `""` | Postfix text. |
+| `isAjaxSearch` | `Boolean` | `false` | Enable async search via `onSearch`. |
+| `onSearch` | `Function` | `null` | Async handler `(query) => Promise<options>`. |
+| `hideSelected` | `Boolean` | `true` | Hide already-selected items from dropdown. |
+| `loading` | `Boolean` | `false` | Show a loading spinner. |
+| `disabled` | `Boolean` | `false` | Disable the field. |
+| `appendToBody` | `Boolean` | `true` | Teleport the dropdown to `<body>`. |
+| `isLeftIconBorder` | `Boolean` | `false` | Border on prefix icon. |
+| `isRightIconBorder` | `Boolean` | `false` | Border on postfix icon. |
+## Events
+| Event | Payload | Description |
+| --- | --- | --- |
+| `update:modelValue` | `value` | v-model sync. |
+| `clear` | — | Selection cleared. |
+| `change` | `value` | Value changed. |
+| `select` | `value` | An option was selected. |
+| `open` | — | Dropdown opened. |
+| `close` | — | Dropdown closed. |
+| `search-change` | `query` | Search input changed. |
+## Slots
+| Name | Scope | Description |
+| --- | --- | --- |
+| `label` | — | Custom label. |
+| `prefix` | — | Prefix slot. |
+| `postfix` | — | Postfix slot. |
+| `singlelabel` | `value` | Custom single-mode label rendering. |
+| `option` | `{ option, isSelected }` | Custom option rendering. |
+| `noresults` | — | Empty state content. |
+| `option-loading` | — | Loading message. |
+| `loader-icon` | — | Custom loader icon. |
+## v-model
+Yes.

package/.ai/ai_ref_AbNumberField.md ADDED Viewed

@@ -0,0 +1,84 @@
+# AbNumberField — AI Reference
+Numeric input with built-in minus/plus buttons, min/max clamping, custom step, and VeeValidate integration. Renders as a seamless pill by default; pass `is-border` to show the internal dividers between the buttons and the input.
+## Installation
+Globally registered by the plugin. Peer dependencies: `vee-validate`, `@vee-validate/rules`, `lucide-vue-next` (for the plus/minus icons).
+## Usage
+```vue
+<template>
+  <ab-number-field
+    v-model="qty"
+    name="quantity"
+    label="Quantity"
+    :min="1"
+    :max="10"
+    :step="1"
+    hints="Clamped between 1 and 10"
+  />
+</template>
+<script setup>
+import { ref } from 'vue';
+const qty = ref(1);
+</script>
+```
+Bordered variant (inner borders around buttons):
+```vue
+<ab-number-field
+  v-model="qty"
+  name="quantity"
+  label="Quantity"
+  is-border
+/>
+```
+## Props
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `modelValue` | `any` | `null` | Two-way-bound numeric value. |
+| `label` | `String` | `""` | Field label. |
+| `placeholder` | `String` | `""` | Input placeholder. |
+| `name` | `String` | **required** | VeeValidate field name. |
+| `rules` | `String \| Object` | `""` | VeeValidate rules. |
+| `containerClass` | `String` | `"mb-3"` | Class on the wrapper `<div>`. |
+| `hints` | `String` | `""` | Helper text beneath the input. |
+| `prefix` | `String` | `""` | Prefix text/icon (shortcut for `#prefix` slot). |
+| `postfix` | `String` | `""` | Postfix text/icon. |
+| `min` | `Number \| String` | `null` | Minimum allowed value. Clamps input and disables the minus button at the floor. |
+| `max` | `Number \| String` | `null` | Maximum allowed value. Clamps input and disables the plus button at the ceiling. |
+| `step` | `Number \| String` | `1` | Increment/decrement amount. |
+| `showButtons` | `Boolean` | `true` | Render the minus/plus controls. |
+| `disabled` | `Boolean` | `false` | Disable the field and both buttons. |
+| `isBorder` | `Boolean` | `false` | Show inner borders between minus/input/plus. Default is a seamless pill. |
+| `isLeftIconBorder` | `Boolean` | `false` | Render border between the prefix icon and the input. |
+| `isRightIconBorder` | `Boolean` | `false` | Render border between the postfix icon and the input. |
+## Events
+| Event | Payload | Description |
+| --- | --- | --- |
+| `update:modelValue` | `number \| null` | v-model sync. |
+| `input` | `number` | Fired on input after clamping. |
+| `keyup` | `KeyboardEvent` | Forwarded native event. |
+| `keydown` | `KeyboardEvent` | Forwarded native event. |
+| `paste` | `ClipboardEvent` | Forwarded native event. |
+## Slots
+| Name | Description |
+| --- | --- |
+| `label` | Custom label content. |
+| `prefix` | Prefix icon / text (rendered before the minus button). |
+| `postfix` | Postfix icon / text (rendered after the plus button). |
+| `hints` | Helper text (overrides `hints` prop). |
+## v-model
+Yes — `modelValue` + `update:modelValue`. Value is `number` after clamping, or `null` when the user clears the input.

package/.ai/ai_ref_AbPinInput.md ADDED Viewed

@@ -0,0 +1,45 @@
+# AbPinInput — AI Reference
+Segmented PIN / OTP entry input. Renders `length` single-character boxes, optionally split into groups with a separator.
+## Installation
+Globally registered by the plugin.
+## Usage
+```vue
+<template>
+  <ab-pin-input v-model="pin" :length="6" :group-size="3" show-separator />
+  <p v-if="pin.length === 6">Entered: {{ pin }}</p>
+</template>
+<script setup>
+import { ref } from 'vue';
+const pin = ref('');
+</script>
+```
+## Props
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `modelValue` | `String` | — | Two-way-bound PIN string. |
+| `length` | `Number` | `6` | Number of digit boxes. |
+| `size` | `String` | `"md"` | Size: `sm`, `md`, `lg`. |
+| `showSeparator` | `Boolean` | `false` | Render a separator between groups. |
+| `groupSize` | `Number` | `3` | Digits per group when `showSeparator` is true. |
+## Events
+| Event | Payload | Description |
+| --- | --- | --- |
+| `update:modelValue` | `pin` | v-model sync on every input change. |
+## Slots
+None.
+## v-model
+Yes.

package/.ai/ai_ref_AbPopover.md ADDED Viewed

@@ -0,0 +1,64 @@
+# AbPopover — AI Reference
+Dependency-free interactive popover with click, hover, focus, touch, or manual triggers. Content slot receives imperative `close`, `hide`, `show`, and `toggle` helpers.
+## Installation
+Globally registered by the plugin.
+## Usage
+```vue
+<template>
+  <ab-popover placement="bottom" trigger="click">
+    <ab-button class="btn-primary">Menu</ab-button>
+    <template #content="{ close }">
+      <div class="popover-menu">
+        <button @click="edit(); close()">Edit</button>
+        <button @click="duplicate(); close()">Duplicate</button>
+        <button class="text-danger" @click="remove(); close()">Delete</button>
+      </div>
+    </template>
+  </ab-popover>
+  <!-- Hover + focus triggers -->
+  <ab-popover :trigger="['hover', 'focus']" placement="top">
+    <span>Hover me</span>
+    <template #content>Rich popover content</template>
+  </ab-popover>
+</template>
+```
+## Props
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `placement` | `String` | `"bottom"` | `top`, `bottom`, `left`, `right`, or `auto-*`. |
+| `offset` | `Number \| String` | `8` | Offset from the reference. |
+| `gap` | `Number \| String` | `null` | Gap override (used instead of `offset` when set). |
+| `disabled` | `Boolean` | `false` | Disable the popover. |
+| `arrow` | `Boolean` | `true` | Render the arrow pointer. |
+| `arrowPadding` | `Number` | `4` | Padding between arrow and corner. |
+| `trigger` | `String \| Array` | `"click"` | `click`, `hover`, `focus`, `touch`, `manual`. Space-separated string or array. |
+| `autoHide` | `Boolean` | `true` | Close when clicking outside. |
+| `contentClass` | `String` | `""` | Extra class on the content element. |
+| `referenceSelector` | `String` | `null` | CSS selector inside the trigger to anchor positioning. |
+## Events
+| Event | Payload | Description |
+| --- | --- | --- |
+| `update:modelValue` | `visible: Boolean` | Visibility change (supports `v-model`). |
+| `show` | — | Popover shown. |
+| `hide` | — | Popover hidden. |
+## Slots
+| Name | Scope | Description |
+| --- | --- | --- |
+| `default` | — | Trigger element. |
+| `content` | `{ close, hide, show, toggle }` | Popover content — receives imperative controls. |
+## v-model
+Yes — binds visibility.

package/.ai/ai_ref_AbPricingCard.md ADDED Viewed

@@ -0,0 +1,64 @@
+# AbPricingCard — AI Reference
+Single pricing tier card. Use multiple inside `AbPricingContainer` to build a pricing table.
+## Installation
+Globally registered by the plugin.
+## Usage
+```vue
+<template>
+  <ab-pricing-card
+    title="Pro"
+    amount="49"
+    regular-amount="79"
+    frequency="/month"
+    badge="Popular"
+    color="primary"
+    variant="highlighted"
+    recommended
+    :features="[
+      { text: 'Unlimited projects' },
+      { text: 'Priority support' },
+      { text: 'Custom domain', disabled: true },
+    ]"
+  >
+    <template #action>
+      <ab-button class="btn-primary w-100">Choose Pro</ab-button>
+    </template>
+  </ab-pricing-card>
+</template>
+```
+## Props
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `title` | `String` | `""` | Tier title. |
+| `amount` | `String \| Number` | `undefined` | Current price. |
+| `regularAmount` | `String \| Number` | `undefined` | Original price (rendered with strikethrough). |
+| `frequency` | `String` | `""` | Billing frequency suffix (e.g. `/month`). |
+| `badge` | `String` | `""` | Badge text (e.g. "Popular"). |
+| `active` | `Boolean` | `false` | Highlight this card as currently active. |
+| `recommended` | `Boolean` | `false` | Show a "Recommended" ribbon. |
+| `color` | `String` | `"primary"` | Color theme (Bootstrap color). |
+| `variant` | `String` | `"default"` | `default`, `minimal`, `highlighted`, `badge-price`. |
+| `features` | `Array` | `[]` | Each `{ text, disabled? }` or a string. |
+## Events
+None.
+## Slots
+| Name | Scope | Description |
+| --- | --- | --- |
+| `header` | — | Custom header content. |
+| `badge` | — | Custom badge. |
+| `badge-icon` | — | Icon inside the badge. |
+| `price` | — | Custom price section. |
+| `features` | — | Custom features list. |
+| `feature-icon` | `{ feature, index }` | Custom icon per feature row. |
+| `action` | — | CTA button / actions. |

package/.ai/ai_ref_AbPricingContainer.md ADDED Viewed

@@ -0,0 +1,49 @@
+# AbPricingContainer — AI Reference
+Layout wrapper for pricing tables. Arranges `AbPricingCard` children in a flex row or responsive grid with optional breakpoint column counts.
+## Installation
+Globally registered by the plugin.
+## Usage
+```vue
+<template>
+  <ab-pricing-container max-width="1100px" gap="1rem" :md-cols="3">
+    <template #toggle>
+      <ab-toggle v-model="isYearly" name="billing" title="Bill yearly" />
+    </template>
+    <ab-pricing-card title="Starter" amount="0" frequency="/mo" :features="[…]" />
+    <ab-pricing-card title="Pro" amount="49" frequency="/mo" recommended :features="[…]" />
+    <ab-pricing-card title="Team" amount="99" frequency="/mo" :features="[…]" />
+  </ab-pricing-container>
+</template>
+```
+## Props
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `width` | `String` | `"100%"` | Container width. |
+| `maxWidth` | `String` | `"1200px"` | Max width. |
+| `gap` | `String` | `"1.5rem"` | Gap between cards. |
+| `justify` | `String` | `"center"` | `justify-content` value. |
+| `align` | `String` | `"stretch"` | `align-items` value. |
+| `columns` | `Number \| String` | `0` | `0` → flex layout, `>0` → CSS grid with that column count. |
+| `smCols` | `Number \| String` | `""` | Columns at sm breakpoint. |
+| `mdCols` | `Number \| String` | `""` | Columns at md breakpoint. |
+| `lgCols` | `Number \| String` | `""` | Columns at lg breakpoint. |
+| `itemWidth` | `String` | `""` | Per-card width override (exposed as CSS custom property). |
+## Events
+None.
+## Slots
+| Name | Description |
+| --- | --- |
+| `toggle` | Optional toggle area (e.g. monthly/yearly switch) rendered above the cards. |
+| `default` | `<ab-pricing-card>` children. |

package/.ai/ai_ref_AbPricingTable.md ADDED Viewed

@@ -0,0 +1,72 @@
+# AbPricingTable — AI Reference
+The `AbPricingTable` component renders a stylized, responsive pricing table. It displays a list of features on the left side and multiple package tiers on the right side. It is designed to consume structured JSON data for features and packages and handles the layout and responsive reflowing automatically.
+## Installation
+No extra dependencies are required. The component is globally registered by the library plugin.
+## Usage
+```vue
+<script setup>
+import { computed } from 'vue'
+const features = [
+  { key: "links", title: "All limited links" },
+  { key: "analytics", title: "Own analytics platform" }
+]
+const packages = computed(() => {
+  return [
+    {
+      id: "p1",
+      name: "Intro",
+      price: 19,
+      regularPrice: 24,
+      badge: "Save 20%",
+      features: { links: "Y", analytics: "Y" },
+      showButton: true,
+      buttonText: "Choose Plan",
+      isActive: false
+    }
+  ]
+})
+</script>
+<template>
+  <ab-pricing-table
+    :features="features"
+    :packages="packages"
+    @select-package="(pkg) => console.log('Selected:', pkg)"
+  />
+</template>
+```
+## Props
+| Name | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| `features` | Array | `**required**` | Array of feature definitions. Example: `{ key: "chat", title: "Chat support" }`. |
+| `packages` | Array | `**required**` | Array of package configurations. Supports price, regularPrice, badge, features (Y/N map), and button options. |
+## Events
+| Event | Payload | Description |
+| ----- | ------- | ----------- |
+| `select-package` | `(packageObject)` | Emitted when a package's action button is clicked. |
+## Slots
+| Slot Name | Props | Description |
+| --------- | ----- | ----------- |
+| `features-header` | None | Replaces the header in the left-hand features column. |
+| `feature-label` | `{ feature }` | Customizes how the feature name is displayed in the features list. |
+| `package-badge` | `{ pkg }` | Customizes the badge at the top of the package card. |
+| `package-header` | `{ pkg }` | Customizes the top section of the package card (name and pricing info). |
+| `package-feature` | `{ pkg, feature }` | Replaces the default check/cross icon rendering for a feature row in a package. |
+| `package-footer` | `{ pkg }` | Customizes the footer area (usually contains the action button). |
+## v-model
+No — use the `@select-package` event to handle user selection.

package/.ai/ai_ref_AbProgressbar.md ADDED Viewed

@@ -0,0 +1,37 @@
+# AbProgressbar — AI Reference
+Animated Bootstrap-style progress bar with multiple color and size variants. Accepts a custom label via the default slot.
+## Installation
+Globally registered by the plugin.
+## Usage
+```vue
+<template>
+  <ab-progressbar :progress-value="75" color="success" size="lg">
+    75%
+  </ab-progressbar>
+</template>
+```
+## Props
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `minValue` | `Number` | `0` | Minimum value (used for ARIA attributes). |
+| `maxValue` | `Number` | `100` | Maximum value. |
+| `progressValue` | `Number` | `0` | Current value — typically `0–100`. |
+| `color` | `String` | `"primary"` | One of: `primary`, `secondary`, `success`, `danger`, `info`, `warning`. |
+| `size` | `String` | `"md"` | One of: `xs`, `sm`, `md`, `lg`, `xl`, `xxl`. |
+## Events
+None.
+## Slots
+| Name | Description |
+| --- | --- |
+| `default` | Custom label rendered alongside the bar. The CSS custom property `--progress-value` is exposed for advanced positioning. |

package/.ai/ai_ref_AbScrollbar.md ADDED Viewed

@@ -0,0 +1,48 @@
+# AbScrollbar — AI Reference
+Styled custom scrollbar wrapper for overflowing content. Emits scroll position events and supports hover-expand.
+## Installation
+Globally registered by the plugin.
+## Usage
+```vue
+<template>
+  <ab-scrollbar
+    size="md"
+    is-hover-increase
+    @scroll-end="loadMore"
+  >
+    <div style="height: 2000px">
+      <!-- long content -->
+    </div>
+  </ab-scrollbar>
+</template>
+```
+## Props
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `size` | `String` | `"md"` | `sm` (4px), `md` (6px), `lg` (8px). |
+| `isHoverIncrease` | `Boolean` | `false` | Expand scrollbar on hover. |
+| `transparentTrack` | `Boolean` | `true` | Transparent track background. |
+| `showAlways` | `Boolean` | `false` | Always show the scrollbar (vs auto-hide). |
+## Events
+Each event payload is an object with `scrollTop`, `scrollHeight`, `scrollRatio`, `scrollPercentage`, and related fields.
+| Event | Description |
+| --- | --- |
+| `scroll` | Fires on every scroll event. |
+| `scroll-start` | Fires when scrolled to the top. |
+| `scroll-end` | Fires when scrolled to the bottom. |
+## Slots
+| Name | Description |
+| --- | --- |
+| `default` | Scrollable content. |

package/.ai/ai_ref_AbSettingsForm.md ADDED Viewed

@@ -0,0 +1,54 @@
+# AbSettingsForm — AI Reference
+Composite settings-style form layout. When nested inside an `AbWizardStep` / `AbWizard`, auto-registers itself as the wizard step's validator — returning `false` from `onSubmit` blocks the wizard from advancing.
+## Installation
+Globally registered by the plugin.
+## Usage
+```vue
+<template>
+  <ab-wizard @finished="handleFinished">
+    <ab-wizard-step title="Profile">
+      <ab-settings-form :on-submit="validateProfile">
+        <ab-input-field v-model="form.name" name="name" label="Name" rules="required" />
+        <ab-input-field v-model="form.email" name="email" label="Email" rules="required|email" />
+      </ab-settings-form>
+    </ab-wizard-step>
+    <ab-wizard-step title="Preferences">
+      <ab-settings-form>
+        <ab-toggle v-model="form.emails" name="emails" title="Email me updates" />
+      </ab-settings-form>
+    </ab-wizard-step>
+  </ab-wizard>
+</template>
+<script setup>
+async function validateProfile(values) {
+  if (!(await api.checkEmail(values.email))) return false; // blocks next
+}
+</script>
+```
+## Props
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `onSubmit` | `Function` | `() => {}` | Called with form values on submit. Return `false` (or throw) to block wizard progression. |
+## Events
+None at the component level — form submission is handled via the `onSubmit` prop.
+## Slots
+| Name | Description |
+| --- | --- |
+| `default` | Form fields. |
+## Notes
+Standalone use (outside a wizard) is supported — the component works as a plain VeeValidate `<Form>` wrapper.

package/.ai/ai_ref_AbSideMenuItem.md ADDED Viewed

@@ -0,0 +1,58 @@
+# AbSideMenuItem — AI Reference
+Single entry in an `AbSidebar`. Can render as a router-link, a plain anchor, a section title, or a parent node with a submenu.
+## Installation
+Globally registered by the plugin.
+## Usage
+```vue
+<!-- Router-link item -->
+<ab-side-menu-item :to="{ name: 'dashboard' }">
+  <template #icon><i class="bi bi-house"></i></template>
+  Dashboard
+</ab-side-menu-item>
+<!-- Section title -->
+<ab-side-menu-item>
+  <template #sectiontitle>Account</template>
+</ab-side-menu-item>
+<!-- Parent with submenu -->
+<ab-side-menu-item href="#">
+  <template #icon><i class="bi bi-gear"></i></template>
+  Settings
+  <template #submenu>
+    <ab-side-menu-item :to="{ name: 'profile' }">Profile</ab-side-menu-item>
+    <ab-side-menu-item :to="{ name: 'billing' }">Billing</ab-side-menu-item>
+  </template>
+</ab-side-menu-item>
+```
+## Props
+| Name | Type | Description |
+| --- | --- | --- |
+| `to` | `String \| Object` | Router-link target. When this item has a submenu, `to` makes the label clickable as a link. |
+| `href` | `String` | Plain anchor target. With a submenu, `href` makes the item a submenu toggle instead of a link. |
+## Events
+None.
+## Slots
+| Name | Description |
+| --- | --- |
+| `default` | Label text. |
+| `icon` | Leading icon. |
+| `submenu` | Submenu items (nested `AbSideMenuItem`s). |
+| `sectiontitle` | When provided, the item renders as a section heading instead of a nav item. |
+## Injects
+- `isCollapsed` — from `AbSidebar`.
+- `isMobileFullHeight` — from `AbSidebar`.
+- `layoutState` — from `AbSidebar`.