@appsbd/vue3-appsbd-ui 1.0.0 → 1.0.1

package/.ai/ai_ref_AbButton.md

@@ -22,7 +22,7 @@ No per-component import required.
   <ab-button variant="primary">Save</ab-button>
 
   <!-- With icon + divider -->
-  <ab-button outline-variant="secondary" is-outline show-icon-divider>
+  <ab-button variant="secondary" is-outline show-icon-divider>
     <template #icon><i class="bi bi-plus-lg"></i></template>
     New Item
   </ab-button>
@@ -45,7 +45,6 @@ const isSaving = ref(false);
 | --- | --- | --- | --- |
 | `type` | `String` | `"button"` | Native button type (`button`, `submit`, `reset`). |
 | `variant` | `String` | `"primary"` | Color variant (primary, secondary, success, danger, warning, info, light, dark). |
-| `outlineVariant` | `String` | `"primary"` | Color variant applied when `isOutline` is true. |
 | `size` | `String` | `"md"` | Button size (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`). |
 | `isOutline` | `Boolean` | `false` | Applies the outline style for the selected variant. |
 | `isIconBtn` | `Boolean` | `false` | Formats the button styling for a single icon. |

package/.ai/ai_ref_AbCard.md

@@ -1,53 +1,70 @@
-# AbCard — AI Reference
-
-Flexible 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.
-
-## Installation
-
-Globally registered by the plugin — no import required.
-
-```js
-app.use(AppsbdUI);
-```
-
-## Usage
-
-```vue
-<template>
-  <ab-card container-class="insight-card" header-class="fw-semibold">
-    <template #header>Revenue this month</template>
-    <template #body>
-      <h3>$12,480</h3>
-      <p>+8.2% vs last month</p>
-    </template>
-    <template #footer>
-      <ab-button class="btn-outline-primary btn-sm">View Report</ab-button>
-    </template>
-  </ab-card>
-</template>
-```
-
-## Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `containerClass` | `String` | `""` | CSS class applied to the card root (use to pick a layout variant). |
-| `headerClass` | `String` | `""` | CSS class for the header section. |
-| `bodyClass` | `String` | `""` | CSS class for the body section. |
-| `footerClass` | `String` | `""` | CSS class for the footer section. |
-
-## Events
-
-None.
-
-## Slots
-
-| Name | Description |
-| --- | --- |
-| `header` | Card header content. Omit to hide the header. |
-| `body` | Card body content. |
-| `footer` | Card footer content. Omit to hide the footer. |
-
-## 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`.
+# AbCard — AI Reference
+
+Flexible 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.
+
+## Installation
+
+Globally registered by the plugin — no import required.
+
+```js
+app.use(AppsbdUI);
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `containerClass` | `String` | `undefined` | CSS class applied to the card root. |
+| `headerClass` | `String` | `""` | CSS class for the header section. |
+| `bodyClass` | `String` | `""` | CSS class for the body section. |
+| `footerClass` | `String` | `""` | CSS class for the footer section. |
+| `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. |
+| `variation` | `String` | `""` | Generic variation class to append to the root. |
+
+## Usage
+
+```vue
+<template>
+  <!-- Simple Stat Tile -->
+  <ab-card is-tile-card :is-border-card="false">
+    <template #body>
+      <div class="left-section">
+        <span class="tile-title">Total Revenue</span>
+        <span class="tile-value">$12,480</span>
+      </div>
+    </template>
+  </ab-card>
+
+  <!-- Custom Styled Card -->
+  <ab-card 
+    container-class="shadow-sm" 
+    border-bottom-variant="primary"
+    header-class="bg-light"
+  >
+    <template #header>Card Title</template>
+    <template #body>Card Content</template>
+    <template #footer>
+      <ab-button size="sm">Action</ab-button>
+    </template>
+  </ab-card>
+</template>
+```
+
+## Events
+
+None.
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `header` | Card header content. Omit to hide the header. |
+| `body` | Card body content. |
+| `footer` | Card footer content. Omit to hide the footer. |
+
+## 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`.

package/.ai/ai_ref_AbChart.md

@@ -0,0 +1,87 @@
+# AbChart
+
+A flexible chart component powered by Apache ECharts (via vue-echarts). It supports both full ECharts option objects and a simplified props-based API for common chart types.
+
+## Installation
+
+```bash
+npm install echarts vue-echarts
+```
+
+## Usage
+
+### Using individual props (Simplified API)
+
+```vue
+<script setup>
+import { AbChart } from "@vue3-appsbd-ui";
+
+const xAxisData = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+const seriesData = [150, 230, 224, 218, 135, 147, 260];
+</script>
+
+<template>
+  <AbChart 
+    chartType="line" 
+    :xAxisData="xAxisData" 
+    :seriesData="seriesData" 
+    height="400px" 
+  />
+</template>
+```
+
+### Using full ECharts option (Advanced API)
+
+```vue
+<script setup>
+import { AbChart } from "@vue3-appsbd-ui";
+
+const option = {
+  xAxis: {
+    type: 'category',
+    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+  },
+  yAxis: {
+    type: 'value'
+  },
+  series: [{
+    data: [150, 230, 224, 218, 135, 147, 260],
+    type: 'line'
+  }]
+};
+</script>
+
+<template>
+  <AbChart :option="option" height="400px" />
+</template>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `option` | `Object` | `{}` | Full ECharts option object. If provided, it overrides all other props. |
+| `chartType` | `String` | `""` | The type of chart when using simplified props (`"line"`, `"bar"`, `"pie"`). |
+| `xAxisData` | `Array` | `[]` | Categories for the X-axis (e.g., dates or labels). |
+| `seriesData` | `Array` | `[]` | Data points for the chart. For Pie charts, use an array of objects: `[{ value: 10, name: 'A' }]`. |
+| `xAxisType` | `String` | `"category"` | ECharts X-axis type (e.g., `"value"`, `"category"`, `"time"`, `"log"`). |
+| `yAxisType` | `String` | `"value"` | ECharts Y-axis type. |
+| `legendOrient` | `String` | `""` | Orientation of the chart legend (e.g., `"vertical"`, `"horizontal"`). |
+| `showPointValues` | `Boolean` | `false` | If true, displays the value label on each data point in the chart. |
+| `height` | `String` | `"400px"` | Height of the chart container (e.g., `"300px"`, `"100%"`). |
+
+
+
+## Events
+
+None.
+
+## Slots
+
+None.
+
+## Notes
+
+- **Tree Shaking**: The component internally imports only the necessary ECharts modules (`CanvasRenderer`, `LineChart`, `PieChart`, `BarChart`, `GridComponent`, `TitleComponent`, `TooltipComponent`, `LegendComponent`) to keep the bundle size small.
+- **Autoresize**: The component has `autoresize` enabled by default.
+- **Pie Charts**: When `chartType="pie"`, the `xAxis` and `yAxis` configurations are automatically omitted.

package/.ai/ai_ref_AbDateTimePicker.md

@@ -83,6 +83,9 @@ const datetime = ref(null);
 | `minuteStep` | `Number` | `1` | Minute increment. |
 | `isLeftIconBorder` | `Boolean` | `false` | Border on prefix icon. |
 | `isRightIconBorder` | `Boolean` | `false` | Border on suffix icon. |
+| `isHideLabel` | `Boolean` | `false` | Hide the label visually. |
+| `defaultIconPosition` | `String` | `"right"` | Position of the default calendar/clock icon. |
+| `iconPosition` | `String` | `"right"` | Position of the custom `#icon` slot. |
 
 ## Events
 

package/.ai/ai_ref_AbField.md

@@ -1,93 +1,96 @@
-# AbField — AI Reference
-
-Polymorphic field wrapper — renders a text, textarea, select, multiselect, tag, checkbox, radio, toggle, or switch control based on the `type` prop. Use this when you want a single component to handle any form field type uniformly.
-
-## Installation
-
-Globally registered by the plugin.
-
-## Usage
-
-```vue
-<template>
-  <ab-field type="text" v-model="form.name" name="name" label="Name" rules="required" />
-
-  <ab-field
-    type="select"
-    v-model="form.country"
-    name="country"
-    label="Country"
-    :options="countries"
-    label-key="title"
-    value-key="val"
-    searchable
-  />
-
-  <ab-field
-    type="toggle"
-    v-model="form.notifications"
-    name="notifications"
-    title="Enable notifications"
-    description="Receive email updates"
-  />
-</template>
-```
-
-## Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `val` | `any` | `null` | Initial value (used when `modelValue` is empty). |
-| `label` | `String` | **required** | Field label. |
-| `name` | `String` | **required** | VeeValidate field name. |
-| `type` | `String` | `"text"` | `text`, `email`, `password`, `number`, `url`, `textarea`, `select`, `multiselect`, `tag`, `checkbox`, `radio`, `toggle`, `switch`. |
-| `prefix` | `String` | `""` | Prefix text/icon. |
-| `postfix` | `String` | `""` | Postfix text/icon. |
-| `modelValue` | `String \| Number \| Boolean \| Array \| Object` | `""` | Two-way-bound value. |
-| `isCodeInput` | `Boolean` | `false` | Applies monospace styling. |
-| `containerClass` | `String` | `""` | Wrapper class. |
-| `maxlength` | `String \| Number` | `""` | Native maxlength. |
-| `minlength` | `String \| Number` | `""` | Native minlength. |
-| `placeholder` | `String` | `""` | Input placeholder. |
-| `hints` | `String \| Array` | `""` | Helper text. |
-| `rules` | `String \| Array` | `""` | VeeValidate rules. |
-| `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. |
-| `size` | `String` | `"md"` | Field size. |
-| `object` | `Boolean` | `false` | Return full objects instead of values (multiselect). |
-| `searchable` | `Boolean` | `false` | Enable search (select). |
-| `description` | `String` | `""` | Secondary description. |
-| `helptext` | `String` | `""` | Help text. |
-| `isInline` | `Boolean` | `false` | Inline layout (checkbox/radio). |
-| `trueValue` | `any` | `"Y"` | Toggle/switch on value. |
-| `falseValue` | `any` | `"N"` | Toggle/switch off value. |
-| `title` | `String \| null` | `null` | Toggle/switch title. |
-| `isLeftIconBorder` | `Boolean` | `false` | Border on left icon. |
-| `isRightIconBorder` | `Boolean` | `false` | Border on right icon. |
-
-## Events
-
-| Event | Payload | Description |
-| --- | --- | --- |
-| `update:modelValue` | `value` | v-model sync. |
-| `clear` | `event` | Multiselect field cleared. |
-| `change` | `value` | Multiselect value changed. |
-| `select` | `value` | Multiselect option selected. |
-
-## Slots
-
-| Name | Description |
-| --- | --- |
-| `label` | Custom label. |
-| `prefix` | Custom prefix. |
-| `postfix` | Custom postfix. |
-| `description` | Custom description. |
-| `helptext` | Custom help text. |
-| `option` | Custom option rendering (select). |
-| `singlelabel` | Custom single-value label (select). |
-
-## v-model
-
-Yes — supports `modelValue` / `update:modelValue`.
+# AbField — AI Reference
+
+Polymorphic field wrapper — renders a text, textarea, select, multiselect, tag, checkbox, radio, toggle, or switch control based on the `type` prop. Use this when you want a single component to handle any form field type uniformly.
+
+## Installation
+
+Globally registered by the plugin.
+
+## Usage
+
+```vue
+<template>
+  <ab-field type="text" v-model="form.name" name="name" label="Name" rules="required" />
+
+  <ab-field
+    type="select"
+    v-model="form.country"
+    name="country"
+    label="Country"
+    :options="countries"
+    label-key="title"
+    value-key="val"
+    searchable
+  />
+
+  <ab-field
+    type="toggle"
+    v-model="form.notifications"
+    name="notifications"
+    title="Enable notifications"
+    description="Receive email updates"
+  />
+</template>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `val` | `any` | `null` | Initial value (used when `modelValue` is empty). |
+| `label` | `String` | **required** | Field label. |
+| `name` | `String` | **required** | VeeValidate field name. |
+| `type` | `String` | `"text"` | `text`, `email`, `password`, `number`, `url`, `textarea`, `select`, `multiselect`, `tag`, `checkbox`, `radio`, `toggle`, `switch`. |
+| `prefix` | `String` | `""` | Prefix text/icon. |
+| `postfix` | `String` | `""` | Postfix text/icon. |
+| `modelValue` | `String \| Number \| Boolean \| Array \| Object` | `""` | Two-way-bound value. |
+| `isCodeInput` | `Boolean` | `false` | Applies monospace styling. |
+| `containerClass` | `String` | `""` | Wrapper class. |
+| `maxlength` | `String \| Number` | `""` | Native maxlength. |
+| `minlength` | `String \| Number` | `""` | Native minlength. |
+| `placeholder` | `String` | `""` | Input placeholder. |
+| `hints` | `String \| Array` | `""` | Helper text. |
+| `rules` | `String \| Array` | `""` | VeeValidate rules. |
+| `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. |
+| `size` | `String` | `"md"` | Field size. |
+| `object` | `Boolean` | `false` | Return full objects instead of values (multiselect). |
+| `searchable` | `Boolean` | `false` | Enable search (select). |
+| `description` | `String` | `""` | Secondary description. |
+| `helptext` | `String` | `""` | Help text. |
+| `isInline` | `Boolean` | `false` | Inline layout (checkbox/radio). |
+| `trueValue` | `any` | `"Y"` | Toggle/switch on value. |
+| `falseValue` | `any` | `"N"` | Toggle/switch off value. |
+| `title` | `String \| null` | `null` | Toggle/switch title. |
+| `isLeftIconBorder` | `Boolean` | `false` | Border on left icon. |
+| `isRightIconBorder` | `Boolean` | `false` | Border on right icon. |
+| `isHideLabel` | `Boolean` | `false` | Hide the label visually. |
+| `iconPosition` | `String` | `"right"` | Position of the custom `#icon` slot (`"left"`, `"right"`). |
+
+## Events
+
+| Event | Payload | Description |
+| --- | --- | --- |
+| `update:modelValue` | `value` | v-model sync. |
+| `clear` | `event` | Multiselect field cleared. |
+| `change` | `value` | Multiselect value changed. |
+| `select` | `value` | Multiselect option selected. |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `label` | Custom label. |
+| `prefix` | Custom prefix. |
+| `icon` | Custom icon. |
+| `postfix` | Custom postfix. |
+| `description` | Custom description. |
+| `helptext` | Custom help text. |
+| `option` | Custom option rendering (select). |
+| `singlelabel` | Custom single-value label (select). |
+
+## v-model
+
+Yes — supports `modelValue` / `update:modelValue`.

package/.ai/ai_ref_AbInputField.md

@@ -1,71 +1,74 @@
-# AbInputField — AI Reference
-
-Core text input with built-in VeeValidate integration, localized feedback, and prefix/postfix/hint slots. Use this for single-line text inputs; use `AbField` if you want a polymorphic field that can render selects, toggles, etc.
-
-## Installation
-
-Globally registered by the plugin. Peer dependencies: `vee-validate`, `@vee-validate/rules`.
-
-## Usage
-
-```vue
-<template>
-  <ab-input-field
-    v-model="form.email"
-    name="email"
-    label="Email"
-    placeholder="you@example.com"
-    rules="required|email"
-    hints="We'll never share your email."
-  >
-    <template #prefix><i class="bi bi-envelope"></i></template>
-  </ab-input-field>
-</template>
-
-<script setup>
-import { reactive } from 'vue';
-const form = reactive({ email: '' });
-</script>
-```
-
-## Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `modelValue` | `any` | `null` | Two-way-bound value. |
-| `label` | `String` | `""` | Field label. |
-| `placeholder` | `String` | `""` | Input placeholder. |
-| `type` | `String` | `"text"` | Native input type (`text`, `email`, `password`, `number`, `tel`, …). |
-| `name` | `String` | **required** | VeeValidate field name. |
-| `isCodeInput` | `Boolean` | `false` | Applies monospace / code-input styling. |
-| `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. |
-| `maxlength` | `any` | `null` | Native `maxlength`. |
-| `isLeftIconBorder` | `Boolean` | `false` | Renders border between the prefix icon and the input. |
-| `isRightIconBorder` | `Boolean` | `false` | Renders border between the postfix icon and the input. |
-
-## Events
-
-| Event | Payload | Description |
-| --- | --- | --- |
-| `update:modelValue` | `value` | v-model sync. |
-| `input` | `value` | Fired on input. |
-| `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. |
-| `postfix` | Postfix icon / text. |
-| `hints` | Helper text (overrides `hints` prop). |
-
-## v-model
-
-Yes — `modelValue` + `update:modelValue`.
+# AbInputField — AI Reference
+
+Core text input with built-in VeeValidate integration, localized feedback, and prefix/postfix/hint slots. Use this for single-line text inputs; use `AbField` if you want a polymorphic field that can render selects, toggles, etc.
+
+## Installation
+
+Globally registered by the plugin. Peer dependencies: `vee-validate`, `@vee-validate/rules`.
+
+## Usage
+
+```vue
+<template>
+  <ab-input-field
+    v-model="form.email"
+    name="email"
+    label="Email"
+    placeholder="you@example.com"
+    rules="required|email"
+    hints="We'll never share your email."
+  >
+    <template #prefix><i class="bi bi-envelope"></i></template>
+  </ab-input-field>
+</template>
+
+<script setup>
+import { reactive } from 'vue';
+const form = reactive({ email: '' });
+</script>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `modelValue` | `any` | `null` | Two-way-bound value. |
+| `label` | `String` | `""` | Field label. |
+| `placeholder` | `String` | `""` | Input placeholder. |
+| `type` | `String` | `"text"` | Native input type (`text`, `email`, `password`, `number`, `tel`, …). |
+| `name` | `String` | **required** | VeeValidate field name. |
+| `isCodeInput` | `Boolean` | `false` | Applies monospace / code-input styling. |
+| `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. |
+| `maxlength` | `any` | `null` | Native `maxlength`. |
+| `isLeftIconBorder` | `Boolean` | `false` | Renders border between the prefix icon and the input. |
+| `isRightIconBorder` | `Boolean` | `false` | Renders border between the postfix icon and the input. |
+| `isHideLabel` | `Boolean` | `false` | Hide the label visually. |
+| `iconPosition` | `String` | `"right"` | Position of the custom `#icon` slot (`"left"`, `"right"`). |
+
+## Events
+
+| Event | Payload | Description |
+| --- | --- | --- |
+| `update:modelValue` | `value` | v-model sync. |
+| `input` | `value` | Fired on input. |
+| `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. |
+| `icon` | Custom icon inside the input field. |
+| `postfix` | Postfix icon / text. |
+| `hints` | Helper text (overrides `hints` prop). |
+
+## v-model
+
+Yes — `modelValue` + `update:modelValue`.

package/.ai/ai_ref_AbInputTag.md

@@ -52,6 +52,8 @@ const skills = ref([]);
 | `max` | `Number` | `0` | Max number of tags (0 = unlimited). |
 | `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
 
@@ -65,6 +67,7 @@ const skills = ref([]);
 | --- | --- |
 | `label` | Custom label. |
 | `prefix` | Prefix icon/text. |
+| `icon` | Custom icon inside the input. |
 | `postfix` | Postfix icon/text. |
 | `hints` | Custom hints. |
 

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,6 +98,7 @@ 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. |
 | `option` | `{ option, isSelected }` | Custom option rendering. |

package/.ai/ai_ref_AbProgressbar.md

@@ -32,6 +32,13 @@ None.
 
 ## Slots
 
-| Name | Description |
-| --- | --- |
 | `default` | Custom label rendered alongside the bar. The CSS custom property `--progress-value` is exposed for advanced positioning. |
+
+## Position Classes
+
+Apply these classes to move the label:
+- `progress-right`: Label to the right of the bar.
+- `progress-right-top`: Label to the right-top (floating above).
+- `progress-right-bottom`: Label to the right-bottom (floating below).
+- `progress-value-top`: Label floating above the current progress indicator.
+- `progress-value-bottom`: Label floating below the current progress indicator.