@appsbd/vue3-appsbd-ui 1.0.18 → 1.0.20

package/.ai/ai_ref_AbFilterPanel.md

@@ -4,9 +4,9 @@ Advanced filter panel for list and table views. Supports quick/advance modes, si
 
 `isMultiple` is functional in `isQuickAdvance` mode for `dd` fields: selections toggle on/off and render as removable tag chips on the popover trigger (no `AbMultiSelect` involved). The popover's option list is searchable — locally against `options`, or via `isAjaxSearch` + `onSearch` for server-side search.
 
-`isBuilderFilter` is a Shopify-style filter builder: no field is visible until the user clicks the `+` button. That opens a popover which first lists every not-yet-applied `filterOptions` entry by `name`; picking one swaps the same popover to a value editor matching that field's `type` (`dd`→`AbMultiSelect`, `t`→`AbInputField`, `tr`→min/max inputs, `d`/`dr`→`AbDateTimePicker`) plus Cancel/Apply Filter buttons. A `"t"` (plain text/number) field also applies on `Enter` in its input — same no-op-when-empty guard as clicking Apply Filter. Apply pushes it in as a removable chip (e.g. "Email : gmail" — see `builderChipSeparator` slot below). By default (`isBuilderAutoSearch: false`), a global Search button is shown so search fires only on clicking Search, and Reset clears all applied chips. When `isBuilderAutoSearch: true`, every Apply and chip removal immediately fires `searchFilter` without showing a Search button. A field's `operators` is fixed by its schema entry, same as other modes — this mode does not add an is/is-not/contains operator picker, only the value input changes per `type`.
+`isBuilderFilter` is a Shopify-style filter builder: no field is visible until the user clicks the `+` button. That opens a popover which first lists every not-yet-applied `filterOptions` entry by `name`; picking one swaps the same popover to a value editor matching that field's `type` (`dd`→`AbMultiSelect`, `t`→`AbInputField`, `tr`→min/max inputs, `d`/`dr`→`AbDateTimePicker`) plus Cancel/Apply Filter buttons. A `"t"` (plain text/number) field also applies on `Enter` in its input — same no-op-when-empty guard as clicking Apply Filter. Apply pushes it in as a removable chip (e.g. "Email : gmail" — see `builderChipSeparator` slot below). By default (`isBuilderAutoSearch: false`), a Search button is shown so search fires only on clicking Search, and Reset clears all applied chips. When `isBuilderAutoSearch: true`, every Apply and chip removal immediately fires `searchFilter` without showing a Search button (only Reset). The Search/Reset buttons are hidden entirely while no chip is applied — they appear right after the `+` button once the first chip is applied, and vanish again when Reset is clicked or the last chip is removed individually. A field's `operators` is fixed by its schema entry, same as other modes — this mode does not add an is/is-not/contains operator picker, only the value input changes per `type`.
 
-Standard-search, advance-search, and quick-advance field layouts are all plain flex (`d-flex flex-wrap gap-2`) — no Bootstrap grid. Each field grows/shrinks on its own, which means a field left alone on the last row will stretch to fill the remaining row width; give a `filterOptions` entry a `width`, `minWidth`, and/or `maxWidth` key (`String | Number` — a number is px, e.g. `maxWidth: 280`, or a CSS string like `"50%"`) to control that specific field's size. All three are forwarded straight to the underlying `AbInputField`/`AbMultiSelect`/`AbDateTimePicker`'s own same-named props, and also constrain that field's flex-item wrapper directly (`width` sets `flex: 0 0 <width>` so it stops growing/shrinking; `minWidth`/`maxWidth` clamp it while it keeps growing/shrinking with its siblings).
+Standard-search, advance-search, and quick-advance field layouts are all plain flex (`d-flex flex-wrap gap-2`) — no Bootstrap grid. Each field grows/shrinks on its own, which means a field left alone on the last row will stretch to fill the remaining row width; give a `filterOptions` entry a `width`, `minWidth`, and/or `maxWidth` key (`String | Number` — a number is px, e.g. `maxWidth: 280`, or a CSS string like `"50%"`) to control that specific field's size. All three are forwarded straight to the underlying `AbInputField`/`AbMultiSelect`/`AbDateTimePicker`'s own same-named props, and also constrain that field's flex-item wrapper directly (`width` sets `flex: 0 0 min(<width>, 100%)` so it stops growing/shrinking; `minWidth`/`maxWidth` clamp it while it keeps growing/shrinking with its siblings). Every one of these is applied as `min(<value>, 100%)`, so a fixed value like `width: 300` never overflows a narrower container on small screens — it shrinks to fit instead.
 
 The standard-mode property-selector (and the scan field it swaps for) isn't part of `filterOptions` — it's not tied to one field, it lists all of them — so it has no `width`/`minWidth`/`maxWidth` key to set. It's also the only item in its row until a property is picked (or whenever `showScanFld` is on), so without sizing it it'll stretch to fill the row the same way an unsized `filterOptions` field would. Use the panel-level `propertySelectWidth`/`propertySelectMinWidth`/`propertySelectMaxWidth` props for that slot instead.
 
@@ -58,9 +58,9 @@ function handleSearch(data) {
 | `isMaxDate`                | `Boolean` | `true`          | Limit date pickers to today as max.                        |
 | `size`                     | `String`  | `"xs"`          | Control size.                                              |
 | `advanceContainerClass`    | `String`  | `""`            | Extra class on each field's flex-item wrapper in advance mode (base sizing is `flex: 1 1 240px`, wraps as needed — not a Bootstrap grid). To fix a single field's width instead, use that field's own `width` prop (`AbInputField`/`AbMultiSelect`/`AbDateTimePicker`). |
-| `propertySelectWidth`      | `String` \| `Number` | `undefined` | Width of the standard-mode property-selector / scan-field slot (number = px). |
-| `propertySelectMinWidth`   | `String` \| `Number` | `undefined` | `min-width` of that same slot. |
-| `propertySelectMaxWidth`   | `String` \| `Number` | `undefined` | `max-width` of that same slot — it's the only item in its row until a property is picked (or in scan mode), so it stretches to fill it without one. |
+| `propertySelectWidth`      | `String` \| `Number` | `undefined` | Width of the standard-mode property-selector / scan-field slot (number = px). Applied as `min(<value>, 100%)`, so it shrinks on small screens instead of overflowing. |
+| `propertySelectMinWidth`   | `String` \| `Number` | `undefined` | `min-width` of that same slot (same `min(<value>, 100%)` clamp). |
+| `propertySelectMaxWidth`   | `String` \| `Number` | `undefined` | `max-width` of that same slot — it's the only item in its row until a property is picked (or in scan mode), so it stretches to fill it without one (same `min(<value>, 100%)` clamp). |
 | `isQuickAdvanceAutoSearch` | `Boolean` | `false`         | Fire search automatically on field change (quick advance). |
 | `defaultFilterId`          | `String` \| `Number` | `""` | Pre-selects a default filter property in standard search mode (when `!isSingle && !isAdvance && !isQuickAdvance`). |
 
@@ -82,3 +82,4 @@ function handleSearch(data) {
 | `hints`                | Helper text.    |
 | `builderChipSeparator` | `isBuilderFilter` mode only. Overrides the connector text rendered between an applied chip's field name and its value (e.g. "Email **:** gmail", "Revenue **:** 12 - 23" for `tr`/`dr` range fields). Receives `{ field }`. Default content is `:`. |
 | `builderAddLabel`      | `isBuilderFilter` mode only. Renders before the static `+` icon inside the "Add filter" button — use it to add a label next to the icon. Not scoped. Empty by default. |
+| `builderTitle`         | `isBuilderFilter` mode only. Title rendered at the far left of the row, inside the same box style as the applied chips. Hidden until at least one chip is applied (and again after Reset / removing the last chip). Not scoped. Default content is `Filter Title`. |

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) — [`AbNumberField`](./ai_ref_AbNumberField.md) is a thin wrapper exposing the same `variant` prop, defaulting to a plain `type="number"` input when it's unset.
 
 ## Usage
 
@@ -24,6 +24,66 @@ 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>
+```
+
+Inset label variant (label inside the bordered box):
+
+```vue
+<ab-input-field v-model="username" variant="inset" name="username" label="Username" />
+```
+
+Outlined variant (floating label: looks like the placeholder when empty, moves onto the top border on focus / when filled; `placeholder` shows on focus):
+
+```vue
+<ab-input-field v-model="username" variant="outlined" name="username" label="Username" placeholder="Enter username" />
+```
+
+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,13 +93,13 @@ 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>`. |
-| `width` | `String \| Number` | `undefined` | Explicit width on the wrapper `<div>`. A number is treated as px (e.g. `220` -> `220px`); a string is used as-is (e.g. `"50%"`). |
-| `minWidth` | `String \| Number` | `undefined` | `min-width` on the wrapper `<div>` (same number/string rules as `width`). |
-| `maxWidth` | `String \| Number` | `undefined` | `max-width` on the wrapper `<div>` (same number/string rules as `width`) — caps growth inside a flex/grid parent without a fixed `width`. |
+| `width` | `String \| Number` | `undefined` | Explicit width on the wrapper `<div>`. A number is treated as px (e.g. `220` -> `220px`); a string is used as-is (e.g. `"50%"`). Applied as `min(<value>, 100%)`, so it shrinks to fit a narrower parent on small screens instead of overflowing it. |
+| `minWidth` | `String \| Number` | `undefined` | `min-width` on the wrapper `<div>` (same number/string rules as `width`, same `min(<value>, 100%)` clamp). |
+| `maxWidth` | `String \| Number` | `undefined` | `max-width` on the wrapper `<div>` (same number/string rules as `width`, same `min(<value>, 100%)` clamp) — caps growth inside a flex/grid parent without a fixed `width`. |
 | `hints` | `String` | `""` | Helper text beneath the input. |
 | `prefix` | `String` | `""` | Prefix text/icon (shortcut for `#prefix` slot). |
 | `postfix` | `String` | `""` | Postfix text/icon. |
@@ -53,6 +113,23 @@ 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). `"inset"` renders the label inside the bordered field, stacked above the value (border/focus/error styles unchanged; a left `#icon`/`prefix` gets a fixed width so the label aligns — use an icon, not long text). `"outlined"` renders a floating label: shown like a placeholder while empty/unfocused, floats onto the top border when focused or filled, the border is cut away behind it, no label background, RTL supported (real `placeholder` appears on focus; scales with `size`). |
+| `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. |
+| `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). |
+
+## Read-only mode
+
+Not a dedicated prop — pass the native `readonly` attribute (it falls through to the input via `$attrs`, same as `disabled`). Unlike `disabled`, it renders exactly like a normal enabled field (no greyed-out background), it keeps the value focusable/selectable/copyable, and it's still submitted with the form — use it when the value must not be *changed* but should still look and read like every other field. On `variant="stepper"`, `readonly` also disables the +/- buttons, so the value truly can't change (native `readonly` alone only blocks typing in the number input, not button clicks).
+
+```vue
+<ab-input-field v-model="accountId" name="account_id" label="Account ID" readonly />
+```
 
 ## Events
 
@@ -63,6 +140,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_AbMultiSelect.md

@@ -27,9 +27,9 @@ Searchable single/multi/tag select. Custom built-in replacement for `@vueform/mu
 | `name` | `String` | `""` | VeeValidate field name. |
 | `rules` | `String \| Object` | `""` | VeeValidate rules. |
 | `containerClass` | `String` | `undefined` | Wrapper class. |
-| `width` | `String \| Number` | `undefined` | Explicit width on the wrapper `<div>`. A number is treated as px (e.g. `220` -> `220px`); a string is used as-is (e.g. `"50%"`). |
-| `minWidth` | `String \| Number` | `undefined` | `min-width` on the wrapper `<div>` (same number/string rules as `width`). |
-| `maxWidth` | `String \| Number` | `undefined` | `max-width` on the wrapper `<div>` (same number/string rules as `width`) — caps growth inside a flex/grid parent without a fixed `width`. |
+| `width` | `String \| Number` | `undefined` | Explicit width on the wrapper `<div>`. A number is treated as px (e.g. `220` -> `220px`); a string is used as-is (e.g. `"50%"`). Applied as `min(<value>, 100%)`, so it shrinks to fit a narrower parent on small screens instead of overflowing it. |
+| `minWidth` | `String \| Number` | `undefined` | `min-width` on the wrapper `<div>` (same number/string rules as `width`, same `min(<value>, 100%)` clamp). |
+| `maxWidth` | `String \| Number` | `undefined` | `max-width` on the wrapper `<div>` (same number/string rules as `width`, same `min(<value>, 100%)` clamp) — caps growth inside a flex/grid parent without a fixed `width`. |
 | `hints` | `String` | `""` | Helper text. |
 | `multiple` | `Boolean` | `false` | Deprecated — use `mode` instead. |
 | `searchable` | `Boolean` | `false` | Enable option search/filter. |

package/.ai/ai_ref_AbNumberField.md

@@ -1,14 +1,18 @@
 # AbNumberField — AI Reference
 
-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.
+Numeric input with VeeValidate integration. By default it renders a plain native `type="number"` input; pass `variant="stepper"` to turn it into a stepper with minus/plus buttons, min/max clamping, and a custom step. `AbNumberField` is a thin wrapper around [`AbInputField`](./ai_ref_AbInputField.md) — `<ab-number-field variant="stepper" ... />` and `<ab-input-field variant="stepper" type="number" ... />` render identically. Renders the stepper as a seamless pill by default; pass `is-border` to show internal dividers between buttons and input.
 
 ## 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" />
+  <!-- Default: plain number input -->
+  <ab-number-field v-model="qty" name="quantity" label="Quantity" />
 
-  <ab-number-field v-model="qty" name="quantity" label="Quantity" is-border />
+  <!-- Stepper: minus/plus buttons with min/max clamping -->
+  <ab-number-field v-model="qty" name="quantity" label="Quantity" variant="stepper" :min="1" :max="10" :step="1" hints="Clamped between 1 and 10" />
+
+  <ab-number-field v-model="qty" name="quantity" label="Quantity" variant="stepper" is-border />
 </template>
 
 <script setup>
@@ -30,12 +34,14 @@ const qty = ref(1);
 | `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. |
+| `variant` | `String` | `undefined` | Pass `"stepper"` to render minus/plus buttons with min/max/step clamping. Left unset, renders a plain native `type="number"` input with no buttons or clamping (min/max/step are still applied as native input attributes). |
+| `min` | `Number \| String` | `null` | Minimum allowed value. With `variant="stepper"`, clamps the typed value and disables the minus button at the floor; otherwise it's only the native `min` attribute. |
+| `max` | `Number \| String` | `null` | Maximum allowed value. With `variant="stepper"`, clamps the typed value and disables the plus button at the ceiling; otherwise it's only the native `max` attribute. |
+| `step` | `Number \| String` | `1` | Increment/decrement amount (`variant="stepper"`), or the native `step` attribute otherwise. |
+| `showButtons` | `Boolean` | `true` | Render the minus/plus controls. Only applies when `variant="stepper"`. |
 | `disabled` | `Boolean` | `false` | Disable the field and both buttons. |
-| `isBorder` | `Boolean` | `false` | Show inner borders between minus/input/plus. Default is a seamless pill. |
+| `readonly` | `Boolean` | `false` | Make the field read-only and disable both buttons (`variant="stepper"`). Renders like a normal enabled field (no greyed-out background), unlike `disabled`. |
+| `isBorder` | `Boolean` | `false` | Show inner borders between minus/input/plus. Default is a seamless pill. Only applies when `variant="stepper"`. |
 | `isLeftIconBorder` | `Boolean` | `false` | Render border between the prefix icon and the input. |
 | `isRightIconBorder` | `Boolean` | `false` | Render border between the postfix icon and the input. |
 | `size` | `String` | `undefined` | Input size: `"xs"`, `"sm"`, `"md"`, `"lg"`, `"xl"`. Falls back to `globalConfig.size`, then `"md"`. |
@@ -44,8 +50,8 @@ const qty = ref(1);
 
 | Event | Payload | Description |
 | --- | --- | --- |
-| `update:modelValue` | `number \| null` | v-model sync. Value is `number` after clamping, or `null` when cleared. |
-| `input` | `number` | Fired on input after clamping. |
+| `update:modelValue` | `number \| null` | v-model sync. With `variant="stepper"`, value is `number` after clamping, or `null` when cleared. |
+| `input` | `number` | Fired on input. With `variant="stepper"`, fired after clamping. |
 | `keyup` | `KeyboardEvent` | Forwarded native event. |
 | `keydown` | `KeyboardEvent` | Forwarded native event. |
 | `paste` | `ClipboardEvent` | Forwarded native event. |
@@ -55,6 +61,10 @@ const qty = ref(1);
 | Name | Description |
 | --- | --- |
 | `label` | Custom label content. |
-| `prefix` | Prefix icon / text (rendered before the minus button). |
-| `postfix` | Postfix icon / text (rendered after the plus button). |
+| `prefix` | Prefix icon / text (rendered before the minus button when `variant="stepper"`). |
+| `postfix` | Postfix icon / text (rendered after the plus button when `variant="stepper"`). |
 | `hints` | Helper text (overrides `hints` prop). |
+
+## v-model
+
+Yes — `modelValue` + `update:modelValue`. Nullable; with `variant="stepper"` the value is clamped to `min`/`max` and coerced to `number` (or `null` when the field is cleared).

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_AbToggle.md

@@ -25,6 +25,9 @@ Accessible switch/toggle control. Supports title + description layout and custom
 | `size` | `String` | `"md"` | Toggle size. |
 | `trueValue` | `any` | `"Y"` | Value when checked. |
 | `falseValue` | `any` | `"N"` | Value when unchecked. |
+| `hasIcon` | `Boolean` | `false` | Renders default enable (check) and disable (cross) icons inside switch track. |
+| `onIcon` | `Component \| String` | `Check` | Custom icon component or CSS class for enabled state. |
+| `offIcon` | `Component \| String` | `X` | Custom icon component or CSS class for disabled state. |
 | `title` | `String \| null` | `null` | Title next to the toggle. |
 | `description` | `String \| null` | `null` | Description under the title. |
 | `hints` | `String \| null` | `null` | Helper text. |
@@ -43,4 +46,6 @@ Accessible switch/toggle control. Supports title + description layout and custom
 | `title` | Custom title. |
 | `description` | Custom description. |
 | `descriptionContainer` | Wraps the entire title + description block. |
+| `on-icon` | Custom icon for enabled state inside track. |
+| `off-icon` | Custom icon for disabled state inside track. |
 | `hints` | Custom hints. |

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,14 +12,28 @@
 
 ---
 
-## [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`.
 
+- **`AbNumberField` no longer always renders as a stepper — default changed to a plain `type="number"` input.**
+  - Find: `<AbNumberField ...>` usages with no `variant` prop (relying on the old implicit always-stepper look: minus/plus buttons, min/max clamping).
+  - Replace: add `variant="stepper"` to keep the previous appearance and behavior exactly. No change needed if the plain-input look is acceptable.
+  - See [`.ai/ai_ref_AbNumberField.md`](./ai_ref_AbNumberField.md) for the full `variant` prop.
+
 ### ℹ️ Also shipped (no action needed)
 
 - `AbFilterPanel`'s `.apbd-filter-chip-group` (quick-advance multi-select popover trigger) height fixed to match input-field heights at every size (`xs`…`xxl`), and no longer changes height (grows or shrinks) once a tag is selected — a `min-height` per size acts as a floor while still allowing the box to grow when tags wrap onto a second line.