@appsbd/vue3-appsbd-ui 1.0.18 → 1.0.19

package/.ai/ai_ref_AbBadge.md

@@ -2,13 +2,18 @@
 
 Bootstrap badge wrapper for statuses or counts with size, variant, shape, and icon variations.
 
+**Default variant is `solid`** — when asked to generate `AbBadge` with no specific style requested, generate it as-is (don't pass `variant` at all) and it renders as a plain filled badge, the way it's used everywhere in this library.
+
 ## Usage
 
 ```vue
 <template>
+  <!-- Default: solid variant (no variant prop needed) -->
   <ab-badge color="primary">New</ab-badge>
   <ab-badge color="success" is-rounded-pill>12</ab-badge>
-  <ab-badge color="warning" is-outline>Pending</ab-badge>
+
+  <!-- Outline variant -->
+  <ab-badge color="warning" variant="outline">Pending</ab-badge>
 </template>
 ```
 
@@ -18,7 +23,8 @@ Bootstrap badge wrapper for statuses or counts with size, variant, shape, and ic
 | --- | --- | --- | --- |
 | `size` | `String` | `"md"` | Size of the badge (`sm`, `md`, `lg`). |
 | `color` | `String` | `"primary"` | Color theme (`primary`, `secondary`, `danger`, `warning`, `success`, `info`). |
-| `isOutline` | `Boolean` | `false` | Outlined style with transparent background. |
+| `variant` | `String` | `"solid"` | Design variant — `"solid"` (plain filled badge) or `"outline"` (bordered, transparent background; matches `isOutline`). |
+| `isOutline` | `Boolean` | `false` | Deprecated — equivalent to `variant="outline"`, kept for backward compatibility. Prefer `variant="outline"` in new code. |
 | `isRoundedPill` | `Boolean` | `false` | Transforms badge to a fully rounded pill shape. |
 | `isDot` | `Boolean` | `false` | Prepends a dot indicator layout. |
 | `isAdd` | `Boolean` | `false` | Adjusts styling for an add/plus icon badge. |

package/.ai/ai_ref_AbButton.md

@@ -2,13 +2,17 @@
 
 Customizable button with optional loader animation and leading icon slot.
 
+**Default variant is `solid`** — when asked to generate `AbButton` with no specific style requested, generate it as-is (don't pass `variant` at all) and it renders as a plain filled button, the way it's used everywhere in this library.
+
 ## Usage
 
 ```vue
 <template>
+  <!-- Default: solid variant (no variant prop needed) -->
   <ab-button color="primary">Save</ab-button>
 
-  <ab-button color="secondary" is-outline show-icon-divider>
+  <!-- Outline variant -->
+  <ab-button color="secondary" variant="outline" show-icon-divider>
     <template #icon><i class="bi bi-plus-lg"></i></template>
     New Item
   </ab-button>
@@ -31,8 +35,9 @@ const isSaving = ref(false);
 | `mode` | `String` | `"button"` | Sets the root tag (`button`, `link`, `router-link`). |
 | `type` | `String` | `"button"` | Native button type (`button`, `submit`, `reset`). |
 | `color` | `String` | `"primary"` | Color variant (primary, secondary, success, danger, warning, info, light, dark). |
+| `variant` | `String` | `"solid"` | Design variant — `"solid"` (plain filled button) or `"outline"` (border-only, matches `isOutline`). Drives which class is generated for `color` (e.g. `"outline"` → `btn-outline-{color}`). |
 | `size` | `String` | `"md"` | Button size (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`). |
-| `isOutline` | `Boolean` | `false` | Applies the outline style for the selected color. |
+| `isOutline` | `Boolean` | `false` | Deprecated — equivalent to `variant="outline"`, kept for backward compatibility. Prefer `variant="outline"` in new code. |
 | `isIconBtn` | `Boolean` | `false` | Formats the button styling for a single icon. |
 | `isRounded` | `Boolean` | `false` | Applies a fully rounded, pill-like border radius to the button. |
 | `isAnimated` | `Boolean` | `false` | When `true`, renders the loader SVG and optionally hides the label. |

package/.ai/ai_ref_AbCard.md

@@ -1,33 +1,30 @@
 # AbCard — AI Reference
 
-Bootstrap-style card container with `header`, `body`, and `footer` slots. Visual variations (`tile-card`, `item-card`, `insight-card`, …) are applied through CSS classes on `containerClass` rather than separate components.
+Bootstrap-style card container with `header`, `body`, and `footer` slots. Visual variations (`tile-card`, `item-card`, `insight-card`, …) are applied through CSS classes rather than separate components.
+
+**Default variant is `default`** (a plain card, no layout class) — when asked to generate `AbCard` with no specific style requested, generate it as-is (don't pass `variant` at all).
 
 ## Props
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| `containerClass` | `String` | `undefined` | CSS class applied to the card root. |
+| `containerClass` | `String` | `undefined` | CSS class applied to the card root. General-purpose — also still the way to reach a custom, one-off class that isn't one of the built-in `variant` values. |
 | `headerClass` | `String` | `""` | CSS class for the header section. |
 | `bodyClass` | `String` | `""` | CSS class for the body section. |
 | `footerClass` | `String` | `""` | CSS class for the footer section. |
+| `variant` | `String` | `"default"` | Design variant — `"default"` (plain card), `"tile"` (→ `.tile-card`, stat blocks), `"item"` (→ `.item-card`, list rows), or `"insight"` (→ `.insight-card`, insight panels). |
 | `isBorderCard` | `Boolean` | `true` | Whether to display the default card border. |
 | `bgColorVariant` | `String` | `""` | Bootstrap color variant for background (`primary`, `success`, etc.). |
 | `borderBottomVariant` | `String` | `""` | Adds a colored bottom border with the specified variant. |
-| `isTileCard` | `Boolean` | `false` | Applies the `.tile-card` layout styles. |
+| `isTileCard` | `Boolean` | `false` | Deprecated — equivalent to `variant="tile"`, kept for backward compatibility. Prefer `variant="tile"` in new code. |
 | `showBorder` | `Boolean` | `false` | Whether to display the header and footer borders. |
-| `variation` | `String` | `""` | Generic variation class to append to the root. |
+| `variation` | `String` | `""` | Generic escape hatch: any string passed here is appended as a raw class on the root, unvalidated — for one-off/custom classes beyond the four `variant` values. |
 
 ## Usage
 
 ```vue
 <template>
-  <ab-card is-tile-card :is-border-card="false">
-    <template #body>
-      <span class="tile-title">Total Revenue</span>
-      <span class="tile-value">$12,480</span>
-    </template>
-  </ab-card>
-
+  <!-- Default: plain card (no variant prop needed) -->
   <ab-card container-class="shadow-sm" border-bottom-variant="primary" header-class="bg-light">
     <template #header>Card Title</template>
     <template #body>Card Content</template>
@@ -35,6 +32,25 @@ Bootstrap-style card container with `header`, `body`, and `footer` slots. Visual
       <ab-button size="sm">Action</ab-button>
     </template>
   </ab-card>
+
+  <!-- Tile variant: high-level stat blocks -->
+  <ab-card variant="tile" :is-border-card="false">
+    <template #body>
+      <span class="tile-title">Total Revenue</span>
+      <span class="tile-value">$12,480</span>
+    </template>
+  </ab-card>
+
+  <!-- Item variant: flexible list-row layout -->
+  <ab-card variant="item">
+    <template #body>...</template>
+  </ab-card>
+
+  <!-- Insight variant: insight/suggestion panel -->
+  <ab-card variant="insight">
+    <template #header>...</template>
+    <template #body>...</template>
+  </ab-card>
 </template>
 ```
 
@@ -48,4 +64,4 @@ Bootstrap-style card container with `header`, `body`, and `footer` slots. Visual
 
 ## Notes
 
-Do **not** create a new `.vue` file for card variations — define the variant as a CSS class in `src/styles/components/_card.scss` and pass it via `containerClass`.
+Do **not** create a new `.vue` file for card variations — define the variant as a CSS class in `src/styles/components/_card.scss` and expose it through the `variant` enum (or `containerClass`/`variation` for a one-off class).

package/.ai/ai_ref_AbConfirmPopover.md

@@ -21,11 +21,26 @@ Confirmation popover with an async `onConfirm` handler and built-in loader. Usef
 <script setup>
 async function handleDelete(record) {
   await api.delete(record.id);
-  // loader and popover close handled by the component
+  // loader is handled by the component; returning nothing here closes the
+  // popover automatically — see "onConfirm return contract" below for the
+  // other return shapes (chaining a second confirm step, a success/error alert).
 }
 </script>
 ```
 
+## `onConfirm` return contract
+
+`onConfirm(itemData)` is awaited; what it resolves to (or throws) decides what happens next:
+
+| Resolves to | Result |
+| --- | --- |
+| Nothing (`undefined`/`null`) — the common case, a plain `async () => { await doWork(); }` | Popover closes. |
+| `{ next: 'close' }` | Popover closes (same as returning nothing; use when you also want to pass through other fields, but no other field is read here). |
+| `{ next: 'confirm', title?, message?, icon?, confirmText?, cancelText?, onConfirm? }` | Popover swaps to a new `type: "confirm"` step (Cancel button shown) — for a secondary confirmation. |
+| `{ next: 'confirm-ajax', ...same fields, onConfirm }` | Same as above but `type: "confirm-ajax"` for the next step. |
+| Any other truthy object, e.g. `{ status: true \| false, message? }` | Popover swaps to a terminal `type: "alert"` panel (icon/color from `status`, message from `message`/`msg`, default "Completed successfully" / falls back to "Something went wrong" when `status === false`) — the user must click OK to dismiss. Use this only when you deliberately want that extra confirmation screen. |
+| Throws | Popover shows an `type: "alert"` error panel ("Unexpected error"), dismissed by OK. |
+
 ## Props
 
 | Name | Type | Default | Description |

package/.ai/ai_ref_AbField.md

@@ -1,6 +1,6 @@
 # AbField — AI Reference
 
-Polymorphic field wrapper — renders text, textarea, select, multiselect, tag, checkbox, radio, toggle, or switch based on the `type` prop.
+Polymorphic field wrapper — renders text, textarea, select, multiselect, tag, checkbox, radio, toggle, or switch based on the `type` prop. For `type="number"` it renders `AbInputField` (a plain native number input by default); add `variant="stepper"` to get `AbInputField`'s numeric-stepper behavior (min/max/step clamping, +/- buttons) instead.
 
 ## Usage
 
@@ -29,6 +29,26 @@ Polymorphic field wrapper — renders text, textarea, select, multiselect, tag,
 </template>
 ```
 
+Number field — plain by default, stepper via `variant`:
+
+```vue
+<template>
+  <!-- Plain native number input (default) -->
+  <ab-field type="number" v-model="form.age" name="age" label="Age" />
+
+  <!-- Numeric stepper: +/- buttons, min/max/step clamping -->
+  <ab-field
+    type="number"
+    variant="stepper"
+    v-model="form.qty"
+    name="qty"
+    label="Quantity"
+    :min="1"
+    :max="10"
+  />
+</template>
+```
+
 ## Props
 
 | Name | Type | Default | Description |
@@ -50,7 +70,7 @@ Polymorphic field wrapper — renders text, textarea, select, multiselect, tag,
 | `options` | `Array` | `[]` | Options for select / checkbox / radio. |
 | `labelKey` | `String` | `"title"` | Option label property. |
 | `valueKey` | `String` | `"val"` | Option value property. |
-| `max` | `Number` | `-1` | Max selections (multiselect/tag); `-1` = unlimited. |
+| `max` | `Number` | `-1` | Max selections (multiselect/tag); `-1` = unlimited. For a `type="number"` field, this doubles as the stepper's numeric ceiling (`min`/`max`/`step` clamping) — `-1`/unset means no ceiling. |
 | `size` | `String` | `undefined` | Field size. |
 | `object` | `Boolean` | `false` | Return full objects instead of values (multiselect). |
 | `searchable` | `Boolean` | `false` | Enable search (select). |
@@ -70,6 +90,11 @@ Polymorphic field wrapper — renders text, textarea, select, multiselect, tag,
 | `hideSelected` | `Boolean` | `true` | Hide already-selected items from dropdown. |
 | `loading` | `Boolean` | `false` | Show a loading spinner. |
 | `appendToBody` | `Boolean` | `true` | Teleport the dropdown to `<body>`. |
+| `variant` | `String` | `undefined` | `type="number"` only. `"stepper"` renders `AbInputField`'s numeric stepper (forces a native number input, shows minus/plus buttons, enables `min`/`max`/`step` clamping) instead of a plain number input. |
+| `min` | `Number \| String` | `null` | `type="number"` only. Minimum allowed value (native constraint always; also clamped + disables the minus button when `variant="stepper"`). |
+| `step` | `Number \| String` | `1` | `type="number"` only. Increment/decrement amount (stepper variant) / native `step` attribute. |
+| `showButtons` | `Boolean` | `true` | `type="number"` + `variant="stepper"` only. Whether to render the minus/plus buttons. |
+| `isBorder` | `Boolean` | `false` | `type="number"` + `variant="stepper"` only. Show inner borders between minus/input/plus. Default is a seamless pill. |
 
 ## Events
 

package/.ai/ai_ref_AbFormCheck.md

@@ -101,7 +101,7 @@ item). If different options need different content, branch inside the template o
 <ab-form-check variant="card" :options="plans" v-model="plan" type="radio" name="plan">
   <template #option-label="{ check }">
     <template v-if="check.val === 'pro'">
-      <ab-badge variant="danger">Popular</ab-badge> {{ check.title }}
+      <ab-badge color="danger">Popular</ab-badge> {{ check.title }}
     </template>
     <template v-else>{{ check.title }}</template>
   </template>

package/.ai/ai_ref_AbInputField.md

@@ -1,6 +1,6 @@
 # AbInputField — AI Reference
 
-Core text input with VeeValidate integration, localized feedback, and prefix/postfix/hint slots. Use for single-line text inputs; use `AbField` for a polymorphic field that can render selects, toggles, etc.
+Core text input with VeeValidate integration, localized feedback, and prefix/postfix/hint slots. Use for single-line text inputs; use `AbField` for a polymorphic field that can render selects, toggles, etc. Pass `variant="stepper"` to turn it into a numeric stepper input (min/max/step clamping, +/- buttons) — this replaces the deprecated `AbNumberField`.
 
 ## Usage
 
@@ -24,6 +24,54 @@ const form = reactive({ email: '' });
 </script>
 ```
 
+Stepper variant:
+
+```vue
+<template>
+  <ab-input-field
+    v-model="qty"
+    variant="stepper"
+    name="quantity"
+    label="Quantity"
+    :min="1"
+    :max="10"
+    :step="1"
+    hints="Clamped between 1 and 10"
+  />
+
+  <!-- Inner borders between minus/input/plus -->
+  <ab-input-field v-model="qty" variant="stepper" name="quantity2" label="Quantity" is-border />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const qty = ref(1);
+</script>
+```
+
+Copyable (read-only value with a copy-to-clipboard button — no built-in confirmation UI, wire your own via the `copy-success`/`copy-error` events):
+
+```vue
+<template>
+  <ab-input-field
+    v-model="apiKey"
+    name="api_key"
+    label="API Key"
+    readonly
+    copyable
+    @copy-success="(msg) => toast.success(msg)"
+    @copy-error="(msg) => toast.error(msg)"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useToast } from 'vue3-appsbd-ui';
+const apiKey = ref('sk_live_...');
+const { toast } = useToast();
+</script>
+```
+
 ## Props
 
 | Name | Type | Default | Description |
@@ -33,7 +81,7 @@ const form = reactive({ email: '' });
 | `placeholder` | `String` | `""` | Input placeholder. |
 | `type` | `String` | `"text"` | Native input type (`text`, `email`, `password`, `number`, `tel`, …). |
 | `name` | `String` | `""` | VeeValidate field name. |
-| `isCodeInput` | `Boolean` | `false` | Applies monospace / code-input styling. |
+| `isCodeInput` | `Boolean` | `false` | Renders a small, fixed-size, large-type single-character box — the same `.mega-input-field` style `AbPinInput` uses per digit. For one OTP/PIN digit only; pair with `maxlength="1"` yourself (not set automatically). Not a monospace/code-display style — too narrow for a token, key, or URL, which will visually scroll inside the box. |
 | `size` | `String` | `undefined` | Adjusts component size (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`). |
 | `rules` | `String \| Object` | `""` | VeeValidate rules. |
 | `containerClass` | `String` | `undefined` | Class on the wrapper `<div>`. |
@@ -53,6 +101,15 @@ const form = reactive({ email: '' });
 | `iconPosition` | `String` | `undefined` | Position of the custom `#icon` slot (`"left"`, `"right"`). |
 | `inputClass` | `String \| Object \| Array` | `undefined` | Additional class(es) for the input element. |
 | `inputStyle` | `String \| Object \| Array` | `undefined` | Additional style(s) for the input element. |
+| `variant` | `String` | `undefined` | Layout variant. `"stepper"` renders a numeric stepper (forces `type="number"`, shows +/- buttons, enables `min`/`max`/`step` clamping). |
+| `min` | `Number \| String` | `null` | *(stepper variant)* Minimum allowed value. Clamps input and disables the minus button at the floor. |
+| `max` | `Number \| String` | `null` | *(stepper variant)* Maximum allowed value. Clamps input and disables the plus button at the ceiling. |
+| `step` | `Number \| String` | `1` | *(stepper variant)* Increment/decrement amount. |
+| `showButtons` | `Boolean` | `true` | *(stepper variant)* Render the minus/plus controls. |
+| `isBorder` | `Boolean` | `false` | *(stepper variant)* Show inner borders between minus/input/plus. Default is a seamless pill. |
+| `copyable` | `Boolean` | `false` | Renders a plain, borderless postfix button that copies the current value to the clipboard (via the Clipboard API). No built-in confirmation UI — listen for `copy-success`/`copy-error` to show your own (e.g. `useToast()`). Pair with a native `readonly` attribute for a display-only copyable value — there is no built-in read-only mode, `readonly`/`disabled` fall through to the native input via `$attrs`. |
+| `copySuccessMsg` | `String` | `"Copied to clipboard"` | Message text passed to the `copy-success` event after a successful copy (`copyable` only). Runs through the same translation pipeline as `label`/`hints`. |
+| `copyErrorMsg` | `String` | `"Failed to copy"` | Message text passed to the `copy-error` event when copying fails, e.g. the Clipboard API is unavailable outside a secure context (`copyable` only). |
 
 ## Events
 
@@ -63,6 +120,8 @@ const form = reactive({ email: '' });
 | `keyup` | `KeyboardEvent` | Forwarded native event. |
 | `keydown` | `KeyboardEvent` | Forwarded native event. |
 | `paste` | `ClipboardEvent` | Forwarded native event. |
+| `copy-success` | `(message: String, value: String)` | *(`copyable` only)* Fired after a successful clipboard write. `message` is the already-translated `copySuccessMsg` — hand it directly to your own confirmation UI. |
+| `copy-error` | `(message: String, error: Error)` | *(`copyable` only)* Fired when the clipboard write fails (e.g. Clipboard API unavailable outside a secure context). `message` is the already-translated `copyErrorMsg`. |
 
 ## Slots
 

package/.ai/ai_ref_AbModal.md

@@ -9,8 +9,8 @@ Full-featured dialog with a built-in VeeValidate `<Form>`, loader overlay, and "
   <ab-button class="btn-primary" @click="isOpen = true">Open</ab-button>
 
   <ab-modal
+    v-if="isOpen"
     ref="modal"
-    v-model:is-modal-visible="isOpen"
     modal-size="modal-lg"
     @on-submit="handleSubmit"
     @close="isOpen = false"
@@ -47,7 +47,6 @@ async function handleSubmit(values, { resetForm }) {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| `isModalVisible` | `Boolean` | — | Visibility state (`v-model:is-modal-visible`). |
 | `modalSize` | `String` | `""` | Bootstrap size class (`modal-sm`, `modal-lg`, `modal-xl`). |
 | `modalMsg` | `[String, Object]` | `{}` | Default message for message-only mode. |
 | `hideHeader` | `Boolean` | `false` | Hide the header section. |
@@ -92,9 +91,13 @@ async function handleSubmit(values, { resetForm }) {
 | `close()` | Close the modal. |
 | `clearForm()` | Reset the VeeValidate form and close. |
 | `returnClear()` | Reset the form without closing. |
-| `showMsgOnly(msg, isHideFooter?)` | Switch to message-only mode. |
+| `showMsgOnly(msg, isHideFooter?)` | Switch to message-only mode, replacing the body with `AbResponseMsg` rendering `msg`. `isHideFooter: true` swaps the footer for a single static "Close" button (`close()`) instead of the default/slotted footer — it does **not** auto-dismiss the modal; without user action the modal stays open indefinitely. |
 | `setMessageOnly(status)` | Toggle message-only mode programmatically. |
 
+## v-model
+
+None — there is no internal show/hide state. Mount/unmount the whole component with `v-if` (or `v-show`) on a boolean in the parent, as shown in Usage above.
+
 ## Notes
 
 Use `AbEasyModal` when you only need a simple trigger-and-close dialog without a form.

package/.ai/ai_ref_AbNumberField.md

@@ -1,5 +1,7 @@
 # AbNumberField — AI Reference
 
+> **Deprecated.** `AbNumberField` is now a thin wrapper around [`AbInputField`](./ai_ref_AbInputField.md) with `variant="stepper"`. It is kept for backward compatibility and still works exactly as documented below, but prefer `<ab-input-field variant="stepper" ... />` in new code.
+
 Numeric input with minus/plus buttons, min/max clamping, custom step, and VeeValidate integration. Renders as a seamless pill by default; pass `is-border` to show internal dividers between buttons and input.
 
 ## Usage

package/.ai/ai_ref_AbTabs.md

@@ -2,16 +2,25 @@
 
 Parent container for tabbed interfaces. Pair with `AbTab` children. Supports content-switching mode (default) and router-link mode for navigation-driven tabs.
 
+**Default variation is `outline`** — when asked to generate `AbTabs` with no specific style requested, generate it as-is (don't pass `variation` at all) and it renders with the outlined design.
+
 ## Usage
 
 ```vue
 <template>
-  <ab-tabs nav-class="nav-pills">
+  <!-- Default: outline variation (no props needed) -->
+  <ab-tabs>
     <ab-tab title="Overview" selected>Overview content</ab-tab>
     <ab-tab title="Billing">Billing content</ab-tab>
     <ab-tab title="Security">Security content</ab-tab>
   </ab-tabs>
 
+  <!-- Other variation -->
+  <ab-tabs variation="pills">
+    <ab-tab title="Overview" selected>Overview content</ab-tab>
+    <ab-tab title="Billing">Billing content</ab-tab>
+  </ab-tabs>
+
   <ab-tabs is-route-mode>
     <ab-tab title="Users" :to="{ name: 'users' }" />
     <ab-tab title="Teams" :to="{ name: 'teams' }" />
@@ -26,7 +35,8 @@ Parent container for tabbed interfaces. Pair with `AbTab` children. Supports con
 | `tabContainerClass` | `String` | — | Root wrapper class. |
 | `navContainerClass` | `String` | — | Wrapper around the nav list. |
 | `tabDetailsClass` | `String` | — | Wrapper around the tab content. |
-| `navClass` | `String` | `"nav-pills"` | Class on the nav list itself (e.g. `nav-tabs`, `nav-pills`). |
+| `variation` | `String` | `"outline"` | Design variation of the nav. Generates a `nav-{variation}` class automatically — e.g. `"outline"` → `nav-outline`, `"pills"` → `nav-pills`, `"underline"` → `nav-underline`, `"bg-secondary"` → `nav-bg-secondary`. Pass `""` to skip auto-generation and rely on `navClass` only. |
+| `navClass` | `String` | `""` | Extra classes on the nav list, merged after the `variation` class — use for size (`nav-xs`/`nav-md`/`nav-lg`/`nav-xl`), layout (`nav-fill`, `nav-vertical`), or color (`nav-secondary`) modifiers. |
 | `tabClass` | `String` | `""` | Class on each individual tab link. |
 | `isRouteMode` | `Boolean` | `false` | When `true`, tab clicks perform router navigation. |
 

package/.ai/ai_ref_EliteGrid.md

@@ -0,0 +1,212 @@
+# EliteGrid — AI Reference
+
+> **External dependency, not developed in this library.** `EliteGrid` ships from the separate `@appsbd/vue3-elite-grid` package (peer dependency, `>=2.0.4`) — it is only *imported* and demonstrated here (`playground/components/EliteGridTest.vue`), not authored or maintained in this repo's `src/`. Prefer an `Ab*` component when one covers the need (see `AbTable` for a simpler, in-library data grid); reach for `EliteGrid` only for the advanced data-grid features below (grouping, subrows, card view, column chooser) that `AbTable` doesn't have.
+>
+> This file mirrors the package's own docs at <https://apps.inotise.com/projects/elite-grid-docs/> (EliteGrid v2.0) — re-check that site if behavior here seems stale, since this library does not control its release cycle.
+
+A feature-rich, CSS-variable-themeable data grid: pagination, column sorting, row grouping, row checkboxes with selection tracking, an actions column, card-view responsive layout, and recursive subrow (tree-grid) expansion.
+
+## Installation
+
+```bash
+npm install @appsbd/vue3-elite-grid
+npm install vue3-gettext shvl
+```
+
+Requires `vue3-gettext` and `shvl` as its own peer dependencies (separate from this library's). Import the CSS once (already done for you if only using it via this library's playground):
+
+```js
+import EliteGrid from '@appsbd/vue3-elite-grid';
+import '@appsbd/vue3-elite-grid/dist/elite-grid.css';
+// or, per the package's own docs: '@appsbd/vue3-elite-grid/elite-grid.css'
+```
+
+It is **not** globally registered by this library's `install()` — import and use it (or its `EliteColumnModel` helper) directly per-component, as `EliteGridTest.vue` does.
+
+## Usage
+
+```vue
+<template>
+  <elite-grid
+    :grid-data="gridData"
+    :columns="columns"
+    :is-show-row-index-column="true"
+    :is-show-row-checkbox="true"
+    selected-prop="email"
+    :show-action-column="true"
+    action-width="100px"
+    @loadData="loadData"
+    @selectionChange="handleSelection"
+  >
+    <template #actionProperty="{ rowitem }">
+      <ab-button class="btn-xs btn-primary" @click="edit(rowitem)">Edit</ab-button>
+    </template>
+  </elite-grid>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import EliteGrid, { EliteColumnModel } from '@appsbd/vue3-elite-grid';
+import '@appsbd/vue3-elite-grid/dist/elite-grid.css';
+
+const gridData = ref({ page: 1, total: 1, records: 0, limit: 10, rowdata: [] });
+
+const columns = [
+  EliteColumnModel.getColumn({ name: 'name', title: 'Name' }),
+  EliteColumnModel.getColumn({ name: 'email', title: 'Email', align: 'center' }),
+];
+
+function loadData({ page, limit }) {
+  // fetch page/limit worth of rows, then assign to gridData.value.rowdata (+ total/records)
+}
+
+function handleSelection(selectedRows) {
+  // selectedRows: values of each selected row's `selected-prop` field (or full row objects if unset)
+}
+</script>
+```
+
+Grouping (any column with `is_group_by: true`) and recursive subtrees (`subrow-prop` + `subrow-icon-column`) are opt-in via column config / props — see the three worked variants in `playground/components/EliteGridTest.vue` (Default, Group By, Subtree).
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `gridData` | `Object` | `{ page:1, total:1, records:0, limit:0, rowdata:[] }` | Main data object: pagination state + row array. |
+| `columns` | `Array` | `[]` | Column definitions, each built via `EliteColumnModel.getColumn()` (see below). |
+| `showHeader` | `Boolean` | `false` | Show the grid header slot area (`#slot-header`). |
+| `isRounded` | `Boolean` | `true` | Rounded corners on the grid container. |
+| `showLoader` | `Boolean` | `false` | Show a loading overlay (content via `#slot-loader`). |
+| `showActionColumn` | `Boolean` | `false` | Show a rightmost actions column. |
+| `actionTitle` | `String` | `"Action"` | Actions column header text. |
+| `actionWidth` | `String` | `""` | CSS width for the actions column. |
+| `isShowRowIndexColumn` | `Boolean` | `true` | Show the row index column (1, 2, 3…). |
+| `isShowRowCheckbox` | `Boolean` | `false` | Show a checkbox selection column. |
+| `checkboxClass` | `String` | `""` | CSS class applied to every checkbox. |
+| `selectedProp` | `String` | `""` | Row property used as each selected row's value (e.g. `"id"`); omit to get full row objects in `selectionChange`. |
+| `getRowClass` | `Function` | `(row, i) => ""` | Returns a CSS class string per row. |
+| `oddColor` | `String` | `"inherit"` | Odd row background color. |
+| `evenColor` | `String` | `"inherit"` | Even row background color. |
+| `hoverColor` | `String` | `"#fbfbfb"` | Row hover background color. |
+| `hidePagination` | `Boolean` | `false` | Hide the entire pagination bar. |
+| `hidePageList` | `Boolean` | `false` | Hide the page-number buttons. |
+| `hideRecordInfo` | `Boolean` | `false` | Hide the "Viewing X to Y of Z" text. |
+| `hideLimitSelector` | `Boolean` | `false` | Hide the rows-per-page dropdown. |
+| `limitList` | `Array` | `[10,20,50,100,200]` | Rows-per-page options. |
+| `paginationLength` | `Number` | `5` | Max page-number buttons shown at once. |
+| `paginationPosition` | `String` | `"right"` | `"right"` or `"left"` alignment for the pagination bar. |
+| `isGroupSeparateHead` | `Boolean` | `false` | Repeat the header row inside every group (used with `is_group_by`). |
+| `isCardView` | `Boolean` | `false` | Render rows as cards instead of a table. |
+| `cardColumn` | `Number \| Array` | `3` | Card columns; an array is responsive `[xs,sm,md,lg,xl,xxl]`. |
+| `cardItemBorderRadius` | `String` | — | Border radius for card items (card view only; e.g. `"8px"`). |
+| `cardItemGap` | `String` | — | Gap between card items (card view only; e.g. `"20px"`). |
+| `subrowProp` | `String` | `""` | Row property holding a nested children array (enables tree-grid subrows). |
+| `subrowIconColumn` | `String` | `""` | Column name that renders the expand/collapse chevron icon. |
+| `subrowDefaultExpanded` | `Boolean` | `false` | Expand every subrow by default, globally. |
+| `subrowExpandProp` | `String` | — | Row property to read/persist a row's own expanded state (per-row override of the global default). |
+
+## Events
+
+| Event | Payload | Description |
+| --- | --- | --- |
+| `loadData` | `{ page, limit, sort_prop, sort_ord }` | Fired when new data is needed — pagination change or column sort. Fetch that page/limit (and apply sort) and assign the result into `gridData`. |
+| `columnStatusChange` | `col` (column object) | Fired when a column's visibility is toggled via the built-in column-chooser (⚙ icon in the index header). |
+| `selectionChange` | `selectedRows` (Array) | Fired when checkbox selection changes — array of `selectedProp` values, or full row objects if `selectedProp` is unset. |
+
+## Slots
+
+| Name | Scope | Description |
+| --- | --- | --- |
+| `#slot{col.name}` (e.g. `#slotEmail`) | `{ rowitem, index, col, val }` | Custom cell renderer for a given column. |
+| `#header-{col.name}` | `{ col }` | Custom header cell for a given column. |
+| `#actionProperty` | `{ rowitem, index }` | Actions column content per row (only with `show-action-column`). |
+| `#slot-header` | — | Grid header/toolbar area (requires `show-header`). |
+| `#slot-loader` | — | Custom loading-overlay content (requires `show-loader`). |
+| `#slot-no-record` | — | Custom "no records" message. |
+| `#subrow-icon` | `{ isExpanded, rowitem }` | Custom expand/collapse icon (with `subrow-prop`). |
+| `#groupTitle` | `{ groupitem }` | Custom group header content (with `is_group_by` columns). |
+| `#eg_pg-status` | `{ startRecord, endRecord, totalRecord }` | Custom pagination status text (replaces "Viewing X to Y of Z"). |
+| `#card-item` | `{ item, itemColumns }` | Override an entire card (card view only). |
+
+Column/header slots also receive a deeply-injected **`toggle-subrow()`** method and **`is-subrow-expanded`** prop, letting you build your own manual expand/collapse trigger inside any column slot instead of relying on `subrow-icon-column`.
+
+## Column Model — `EliteColumnModel.getColumn(options)`
+
+```js
+import { EliteColumnModel } from '@appsbd/vue3-elite-grid';
+
+const columns = [
+  EliteColumnModel.getColumn({ name: 'id', title: 'ID', width: '50px' }),
+  EliteColumnModel.getColumn({ name: 'name', title: 'Name', is_sortable: true }),
+  EliteColumnModel.getColumn({ name: 'address.city', title: 'City', is_group_by: true }),
+];
+```
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `name` | `String` | `""` | Data key; supports dot notation for nested values (e.g. `"address.city"`). |
+| `title` | `String` | `""` | Column header label. |
+| `align` | `String` | `"left"` | Cell content alignment: `"left"`, `"center"`, `"right"`. |
+| `title_align` | `String` | `"left"` | Header alignment: `"left"`, `"center"`, `"right"`. |
+| `width` | `String` | `null` | CSS width (e.g. `"50px"`, `"20%"`). |
+| `hidden_in` | `Array` | `[]` | Hide this column at these breakpoints: `["xs","sm","md","lg","xl","xxl"]`. |
+| `default_show` | `Boolean` | `true` | Visible by default; toggleable later via the built-in column chooser. |
+| `is_sortable` | `Boolean` | `false` | Enable click-to-sort on this column's header (cycles asc → desc → none, fires `loadData` with `sort_prop`/`sort_ord`). |
+| `sort_order` | `String` | `"asc"` | Initial sort direction: `"asc"` or `"desc"`. |
+| `is_group_by` | `Boolean` | `false` | Use this column as the row-grouping key (pairs with `is-group-separate-head`). |
+| `tooltip` | `String` | `""` | Tooltip text shown next to the column header. |
+
+## Exposed methods
+
+| Method | Description |
+| --- | --- |
+| `clearSelection()` | Clears the current checkbox selection. Call via a template ref, e.g. `this.$refs.myGrid.clearSelection()`. |
+
+## CSS Variables
+
+Theme the grid by overriding these on `:root` or a parent wrapper — no `Ab*` design tokens apply here, it's a fully separate `--eg-*` variable set.
+
+| Variable | Default | Category |
+| --- | --- | --- |
+| `--eg-font-family` | `Inter, sans-serif, Arial` | Typography |
+| `--eg-font-style` | `normal` | Typography |
+| `--eg-font-weight` | `500` | Typography |
+| `--eg-font-size` | `12px` | Typography |
+| `--eg-margin` | `0px -7px` | Typography |
+| `--eg-bg` | `#fff` | Backgrounds |
+| `--eg-hover-bg` | `#fbfbfb` | Backgrounds |
+| `--eg-loader-bg` | `rgba(0, 0, 0, 0.65)` | Backgrounds |
+| `--eg-row-odd-color` | `inherit` | Backgrounds |
+| `--eg-row-even-color` | `inherit` | Backgrounds |
+| `--eg-primary-color` | `#3b82f6` | Core Colors |
+| `--eg-text-color` | `#374151` | Core Colors |
+| `--eg-no-record-color` | `#cf0c0c` | Core Colors |
+| `--eg-cell-header-color` | `#f9fafc` | Table |
+| `--eg-row-group-title-color` | `#41444b` | Table |
+| `--eg-cell-index-color` | `#7f848d` | Table |
+| `--eg-header-tooltip` | `#9f641b` | Table |
+| `--eg-cell-padding` | `5px` | Table |
+| `--eg-border-radius` | `5px` | Borders |
+| `--eg-table-border-color` | `#e2e8f0` | Borders |
+| `--eg-pg-border-color` | `#ccc` | Pagination |
+| `--eg-pg-btn-bg` | `#3e44cc` | Pagination |
+| `--eg-pg-btn-color` | `#fff` | Pagination |
+| `--eg-pg-shodow-color` | `#ccc` | Pagination |
+| `--eg-pg-btn-action-size` | `40px` | Pagination |
+| `--eg-pg-btn-size` | `30px` | Pagination |
+| `--eg-pg-margin-top` | `10px` | Pagination |
+| `--eg-pg-margin-bottom` | `10px` | Pagination |
+| `--eg-shodow-color` | `#3e3e3e` | Shadows |
+| `--eg-shodow-rule` | `0px 3px 10px -7px var(--eg-shodow-color)` | Shadows |
+| `--eg-dropdown-bg` | `#ffffff` | Popovers |
+| `--eg-tooltip-bg` | `#333333` | Popovers |
+| `--eg-tooltip-color` | `#ffffff` | Popovers |
+| `--eg-card-column` | `3` | Card View |
+| `--eg-card-column-radius` | `5px` | Card View |
+| `--eg-card-column-gap` | `15px` | Card View |
+| `--eg-card-container-margin` | `15px` | Card View |
+
+## Notes
+
+- Full worked examples (default table, `is_group_by` grouping, recursive `subrow-prop` subtree) live in `playground/components/EliteGridTest.vue`, importing `EliteGrid` and `EliteColumnModel` directly from `@appsbd/vue3-elite-grid`.
+- Since this is an external package, its own version/CHANGELOG governs its API — this library's `CHANGELOG.md` only tracks changes to `Ab*` components and this playground's example usage, not `@appsbd/vue3-elite-grid` itself.

package/.ai/ai_ref_migration_guide.md

@@ -12,10 +12,19 @@
 
 ---
 
-## [Unreleased]
+## [1.0.19] - 2026-09-14
 
 ### ⚠️ Action Required — Breaking
 
+- **`AbTabs`'s default nav design changed from pills to outline; `navClass` default changed from `"nav-pills"` to `""`.**
+  - Find: `<AbTabs ...>` usages with **no** `nav-class`/`navClass` prop at all (relying on the old implicit `"nav-pills"` default).
+  - Replace: add `variation="pills"` to keep the previous pill-shaped appearance. No change needed if the outline look is acceptable, or if `nav-class`/`navClass` was already being passed explicitly (that keeps working unchanged, though switching it to the new `variation` prop — e.g. `nav-class="nav-pills nav-xs"` → `variation="pills" nav-class="nav-xs"` — is recommended, see below).
+  - See [`.ai/ai_ref_AbTabs.md`](./ai_ref_AbTabs.md) for the full `variation` → class mapping.
+
+- **`AbModal`'s `isModalVisible` prop removed.**
+  - Find: `isModalVisible` / `is-modal-visible` / `v-model:is-modal-visible` on `<AbModal>`.
+  - Replace: nothing to migrate functionally — the prop never actually controlled visibility (it was dead/unwired). Control visibility the way every existing usage in this library already does: wrap `<AbModal>` itself in `v-if="isOpen"` in the parent. Just remove the prop/binding if present.
+
 - **`AbFilterPanel`'s standard-search and advance-search field layouts switched from a Bootstrap `.row`/`.col-*` grid to plain flex; `advanceContainerClass` default changed from `"col-6"` to `""`.**
   - Find: `<AbFilterPanel ...>` usages in either default (standard) mode or `is-advance`/`isAdvance` mode that relied on the Bootstrap grid for field widths — either the default 2-columns-per-row layout, or an explicit `advance-container-class`/`advanceContainerClass` Bootstrap grid class (e.g. `"col-12 col-sm-6"`).
   - Replace: nothing required to keep working — fields now lay out via flex (`flex: 1 1 240px`, wraps automatically), which also fixes long field labels getting clipped. A Bootstrap grid class passed to `advance-container-class` no longer has a `.row` ancestor to size against and should be replaced with either a plain width class/CSS, or the new `width` prop on the individual field component (`AbInputField`/`AbMultiSelect`/`AbDateTimePicker`) inside `filterOptions`.