@appsbd/vue3-appsbd-ui 1.0.0 → 1.0.2

package/.ai/ai_ref_AbModal.md

@@ -1,103 +1,103 @@
-# AbModal — AI Reference
-
-Full-featured dialog with a built-in VeeValidate `<Form>`, loader overlay, and "message-only" mode. Exposes imperative methods for showing loaders, clearing forms, and closing.
-
-## Installation
-
-Globally registered by the plugin.
-
-## Usage
-
-```vue
-<template>
-  <ab-button class="btn-primary" @click="modalRef.open = true">Open</ab-button>
-
-  <ab-modal
-    ref="modal"
-    v-model:is-modal-visible="isOpen"
-    modal-size="modal-lg"
-    @on-submit="handleSubmit"
-    @close="isOpen = false"
-  >
-    <template #headerTitle>Edit profile</template>
-
-    <!-- default slot receives VeeValidate Form context -->
-    <ab-input-field name="email" label="Email" rules="required|email" v-model="form.email" />
-
-    <template #footer="{ close }">
-      <ab-button class="btn-outline-secondary" @click="close">Cancel</ab-button>
-      <ab-button class="btn-primary" type="submit">Save</ab-button>
-    </template>
-  </ab-modal>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-const isOpen = ref(false);
-const modal = ref(null);
-const form = ref({ email: '' });
-
-async function handleSubmit(values, { resetForm }) {
-  modal.value.showLoader(true, 'Saving…');
-  await api.save(values);
-  modal.value.showLoader(false);
-  modal.value.close();
-}
-</script>
-```
-
-## Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `isModalVisible` | `Boolean` | — | Visibility state (supports `v-model:is-modal-visible`). |
-| `modalSize` | `String` | `""` | Bootstrap size class (`modal-sm`, `modal-lg`, `modal-xl`). |
-| `modalMsg` | `String` | `""` | Default message for message-only mode. |
-| `hideHeader` | `Boolean` | `false` | Hide the header section entirely. |
-| `hideBody` | `Boolean` | `false` | Hide the body section entirely. |
-| `hideFooter` | `Boolean` | `false` | Hide the footer section entirely. |
-| `hideCrossBtn` | `Boolean` | `false` | Hide the top-right close button. |
-| `hideForm` | `Boolean` | `false` | Render the root as a plain `<div>` instead of a VeeValidate `<Form>`. |
-| `bodyClass` | `String` | `""` | Extra class on the body section. |
-| `isModalCenter` | `Boolean` | `true` | Vertically center the modal. |
-| `isBorder` | `Boolean` | `false` | Show a border around the modal content. |
-| `iconContainerClass` | `String` | `""` | Extra class on the header icon container. |
-| `headerClass` | `String` | `""` | Preferred extra class on the header. |
-| `headerrClass` | `String` | `""` | Legacy alias for `headerClass`. `headerClass` takes precedence when both are provided. |
-
-## Events
-
-| Event | Payload | Description |
-| --- | --- | --- |
-| `onSubmit` | `(event, { resetForm })` | Fired when the internal VeeValidate form is submitted. |
-| `loading-status` | `Boolean` | Emitted whenever the loader state toggles. |
-| `close` | — | Modal was closed (via ✕, Escape, or `close()`). |
-
-## Slots
-
-| Name | Scope | Description |
-| --- | --- | --- |
-| `default` | VeeValidate `Form` slot-props | Form / body content when `hideForm` is `false`. |
-| `header` | — | Overrides the entire header. |
-| `headerIcon` | — | Icon shown at the start of the header. |
-| `headerTitleContainer` | — | Overrides the title/subtitle wrapper. |
-| `headerTitle` | — | Modal title text. |
-| `headerSubTitle` | — | Modal subtitle text. |
-| `body` | — | Overrides the body section. |
-| `loader` | — | Overrides the default loader element. |
-| `footer` | `{ close }` | Footer content — receives a `close()` function. |
-
-## Exposed Methods (via template ref)
-
-| Method | Description |
-| --- | --- |
-| `showLoader(status, msg?)` | Show/hide the loader with an optional message. |
-| `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. |
-| `setMessageOnly(status)` | Toggle message-only mode programmatically. |
-
-## Notes
-
-- Use `AbEasyModal` when you only need a simple trigger-and-close dialog without a form.
+# AbModal — AI Reference
+
+Full-featured dialog with a built-in VeeValidate `<Form>`, loader overlay, and "message-only" mode. Exposes imperative methods for showing loaders, clearing forms, and closing.
+
+## Installation
+
+Globally registered by the plugin.
+
+## Usage
+
+```vue
+<template>
+  <ab-button class="btn-primary" @click="modalRef.open = true">Open</ab-button>
+
+  <ab-modal
+    ref="modal"
+    v-model:is-modal-visible="isOpen"
+    modal-size="modal-lg"
+    @on-submit="handleSubmit"
+    @close="isOpen = false"
+  >
+    <template #headerTitle>Edit profile</template>
+
+    <!-- default slot receives VeeValidate Form context -->
+    <ab-input-field name="email" label="Email" rules="required|email" v-model="form.email" />
+
+    <template #footer="{ close }">
+      <ab-button class="btn-outline-secondary" @click="close">Cancel</ab-button>
+      <ab-button class="btn-primary" type="submit">Save</ab-button>
+    </template>
+  </ab-modal>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const isOpen = ref(false);
+const modal = ref(null);
+const form = ref({ email: '' });
+
+async function handleSubmit(values, { resetForm }) {
+  modal.value.showLoader(true, 'Saving…');
+  await api.save(values);
+  modal.value.showLoader(false);
+  modal.value.close();
+}
+</script>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `isModalVisible` | `Boolean` | — | Visibility state (supports `v-model:is-modal-visible`). |
+| `modalSize` | `String` | `""` | Bootstrap size class (`modal-sm`, `modal-lg`, `modal-xl`). |
+| `modalMsg` | `String` | `""` | Default message for message-only mode. |
+| `hideHeader` | `Boolean` | `false` | Hide the header section entirely. |
+| `hideBody` | `Boolean` | `false` | Hide the body section entirely. |
+| `hideFooter` | `Boolean` | `false` | Hide the footer section entirely. |
+| `hideCrossBtn` | `Boolean` | `false` | Hide the top-right close button. |
+| `hideForm` | `Boolean` | `false` | Render the root as a plain `<div>` instead of a VeeValidate `<Form>`. |
+| `bodyClass` | `String` | `""` | Extra class on the body section. |
+| `isModalCenter` | `Boolean` | `true` | Vertically center the modal. |
+| `isBorder` | `Boolean` | `false` | Show a border around the modal content. |
+| `iconContainerClass` | `String` | `""` | Extra class on the header icon container. |
+| `headerClass` | `String` | `""` | Preferred extra class on the header. |
+| `headerrClass` | `String` | `""` | Legacy alias for `headerClass`. `headerClass` takes precedence when both are provided. |
+
+## Events
+
+| Event | Payload | Description |
+| --- | --- | --- |
+| `onSubmit` | `(event, { resetForm })` | Fired when the internal VeeValidate form is submitted. |
+| `loading-status` | `Boolean` | Emitted whenever the loader state toggles. |
+| `close` | — | Modal was closed (via ✕, Escape, or `close()`). |
+
+## Slots
+
+| Name | Scope | Description |
+| --- | --- | --- |
+| `default` | VeeValidate `Form` slot-props | Form / body content when `hideForm` is `false`. |
+| `header` | — | Overrides the entire header. |
+| `headerIcon` | — | Icon shown at the start of the header. |
+| `headerTitleContainer` | — | Overrides the title/subtitle wrapper. |
+| `headerTitle` | — | Modal title text. |
+| `headerSubTitle` | — | Modal subtitle text. |
+| `body` | — | Overrides the body section. |
+| `loader` | — | Overrides the default loader element. |
+| `footer` | `{ close }` | Footer content — receives a `close()` function. |
+
+## Exposed Methods (via template ref)
+
+| Method | Description |
+| --- | --- |
+| `showLoader(status, msg?)` | Show/hide the loader with an optional message. |
+| `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. |
+| `setMessageOnly(status)` | Toggle message-only mode programmatically. |
+
+## Notes
+
+- Use `AbEasyModal` when you only need a simple trigger-and-close dialog without a form.

package/.ai/ai_ref_AbMultiSelect.md

@@ -77,6 +77,8 @@ Globally registered by the plugin.
 | `appendToBody` | `Boolean` | `true` | Teleport the dropdown to `<body>`. |
 | `isLeftIconBorder` | `Boolean` | `false` | Border on prefix icon. |
 | `isRightIconBorder` | `Boolean` | `false` | Border on postfix icon. |
+| `isHideLabel` | `Boolean` | `false` | Hide the label visually. |
+| `iconPosition` | `String` | `"right"` | Position of the custom `#icon` slot (`"left"`, `"right"`). |
 
 ## Events
 
@@ -96,8 +98,10 @@ Globally registered by the plugin.
 | --- | --- | --- |
 | `label` | — | Custom label. |
 | `prefix` | — | Prefix slot. |
+| `icon` | — | Custom icon slot. |
 | `postfix` | — | Postfix slot. |
 | `singlelabel` | `value` | Custom single-mode label rendering. |
+| `taglabel` | `value` | Custom tag-mode label rendering. |
 | `option` | `{ option, isSelected }` | Custom option rendering. |
 | `noresults` | — | Empty state content. |
 | `option-loading` | — | Loading message. |

package/.ai/ai_ref_AbNumberField.md

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

package/.ai/ai_ref_AbPopover.md

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

package/.ai/ai_ref_AbPricingCard.md

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