@appsbd/vue3-appsbd-ui 1.0.17 → 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_AbFilterPanel.md

@@ -4,7 +4,7 @@ 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. Apply pushes it in as a removable chip (e.g. "Email contains gmail") and immediately fires `searchFilter` — there's no global Search button in this mode, only Reset (clears every applied chip and value at once). 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 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`.
 
 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).
 
@@ -44,6 +44,7 @@ function handleSearch(data) {
 | `isAdvance`                | `Boolean` | `false`         | Show all filters in an expanded layout.                    |
 | `isQuickAdvance`           | `Boolean` | `false`         | Quick advance mode.                                        |
 | `isBuilderFilter`          | `Boolean` | `false`         | Shopify-style "+" add-filter builder — see mode description above. |
+| `isBuilderAutoSearch`      | `Boolean` | `false`         | In `isBuilderFilter` mode, automatically fire `searchFilter` on Apply/Remove chip (no Search button). Default is `false` (shows Search button). |
 | `isSingle`                 | `Boolean` | `false`         | Single-field search mode.                                  |
 | `isAutoSearch`             | `Boolean` | `false`         | Auto search on input change (single mode).                 |
 | `isAllowed`                | `Boolean` | `false`         | Permission flag consumed by the template.                  |
@@ -73,9 +74,11 @@ function handleSearch(data) {
 
 ## Slots
 
-| Name      | Description     |
-| --------- | --------------- |
-| `prefix`  | Filter prefix.  |
-| `postfix` | Filter postfix. |
-| `icon`    | Filter icon.    |
-| `hints`   | Helper text.    |
+| Name                   | Description     |
+| ---------------------- | --------------- |
+| `prefix`               | Filter prefix.  |
+| `postfix`               | Filter postfix. |
+| `icon`                 | Filter icon.    |
+| `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. |

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

@@ -83,7 +83,7 @@ On mobile, call `toggleLeftSidebar()` via the template ref to open/close the dra
 | `body` | — | Main scrollable content area. |
 | `bodyFooter` | — | Content rendered below the scrollable body area. |
 | `pageFooter` | — | Bottom footer bar. |
-| `rightSidebar` | — | Right sidebar panel. Only rendered when `isRightSidebarOpen` is `true`. |
+| `rightSidebar` | — | Right sidebar panel. Only rendered when `isRightSidebarOpen` is `true`; has no mobile/overlay treatment, so it's hidden entirely below `1199.98px` (Bootstrap's `xl` breakpoint). |
 
 ## Exposed methods
 

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