@appsbd/vue3-appsbd-ui 1.0.4 → 1.0.6

package/.ai/ai_ref_AbAvatar.md

@@ -1,41 +1,41 @@
-# AbAvatar — AI Reference
-
-Profile avatar component with `image` and `add` (upload placeholder) variants.
-
-## Usage
-
-```vue
-<template>
-  <ab-avatar :src="user.avatarUrl" alt="Profile photo" />
-  <ab-avatar variant="add" />
-</template>
-```
-
-## Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `src` | `String` | `""` | Image source URL. |
-| `alt` | `String` | `""` | Alt text. |
-| `variant` | `String` | `"image"` | `"image"` or `"add"` (file-upload placeholder). |
-| `size` | `String` | `"md"` | Avatar size (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`). |
-| `isActive` | `Boolean` | `false` | Shows active status indicator. |
-| `isVerified` | `Boolean` | `false` | Shows verified status indicator and badge. |
-
-## Events
-
-| Name | Payload | Description |
-| --- | --- | --- |
-| `change` | `Event` | Fired when a file is selected in `add` variant. The selected file(s) can be accessed via `event.target.files`. |
-
-## Exposed Methods
-
-| Name | Description |
-| --- | --- |
-| `triggerFileSelect()` | Programmatically triggers the file selection dialog when in `add` variant. |
-
-## Slots
-
-| Name | Description |
-| --- | --- |
-| `default` | Additional content (overlays, badges, etc.). |
+# AbAvatar — AI Reference
+
+Profile avatar component with `image` and `add` (upload placeholder) variants.
+
+## Usage
+
+```vue
+<template>
+  <ab-avatar :src="user.avatarUrl" alt="Profile photo" />
+  <ab-avatar variant="add" />
+</template>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `src` | `String` | `""` | Image source URL. |
+| `alt` | `String` | `""` | Alt text. |
+| `variant` | `String` | `"image"` | `"image"` or `"add"` (file-upload placeholder). |
+| `size` | `String` | `"md"` | Avatar size (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`). |
+| `isActive` | `Boolean` | `false` | Shows active status indicator. |
+| `isVerified` | `Boolean` | `false` | Shows verified status indicator and badge. |
+
+## Events
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| `change` | `Event` | Fired when a file is selected in `add` variant. The selected file(s) can be accessed via `event.target.files`. |
+
+## Exposed Methods
+
+| Name | Description |
+| --- | --- |
+| `triggerFileSelect()` | Programmatically triggers the file selection dialog when in `add` variant. |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `default` | Additional content (overlays, badges, etc.). |

package/.ai/ai_ref_AbBadge.md

@@ -1,36 +1,36 @@
-# AbBadge — AI Reference
-
-Bootstrap badge wrapper for statuses or counts with size, variant, shape, and icon variations.
-
-## Usage
-
-```vue
-<template>
-  <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>
-</template>
-```
-
-## Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `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. |
-| `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. |
-| `position` | `String` | `"right"` | Position of the `content` slot (`"left"`, `"right"`). |
-
-## Slots
-
-| Name | Description |
-| --- | --- |
-| `default` | Badge content. |
-| `content` | Slot for an icon, image, or avatar. Placed according to the `position` prop. |
-
-## Notes
-
-The component passes `$attrs` seamlessly to the root `<span>`.
+# AbBadge — AI Reference
+
+Bootstrap badge wrapper for statuses or counts with size, variant, shape, and icon variations.
+
+## Usage
+
+```vue
+<template>
+  <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>
+</template>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `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. |
+| `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. |
+| `position` | `String` | `"right"` | Position of the `content` slot (`"left"`, `"right"`). |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `default` | Badge content. |
+| `content` | Slot for an icon, image, or avatar. Placed according to the `position` prop. |
+
+## Notes
+
+The component passes `$attrs` seamlessly to the root `<span>`.

package/.ai/ai_ref_AbButton.md

@@ -1,51 +1,52 @@
-# AbButton — AI Reference
-
-Customizable button with optional loader animation and leading icon slot.
-
-## Usage
-
-```vue
-<template>
-  <ab-button color="primary">Save</ab-button>
-
-  <ab-button color="secondary" is-outline show-icon-divider>
-    <template #icon><i class="bi bi-plus-lg"></i></template>
-    New Item
-  </ab-button>
-
-  <ab-button color="primary" :is-animated="isSaving" is-hide-text-on-animate>
-    Save
-  </ab-button>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-const isSaving = ref(false);
-</script>
-```
-
-## Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `type` | `String` | `"button"` | Native button type (`button`, `submit`, `reset`). |
-| `color` | `String` | `"primary"` | Color variant (primary, secondary, success, danger, warning, info, light, dark). |
-| `size` | `String` | `"md"` | Button size (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`). |
-| `isOutline` | `Boolean` | `false` | Applies the outline style for the selected color. |
-| `isIconBtn` | `Boolean` | `false` | Formats the button styling for a single icon. |
-| `isAnimated` | `Boolean` | `false` | When `true`, renders the loader SVG and optionally hides the label. |
-| `isHideTextOnAnimate` | `Boolean` | `false` | Hides the default slot content while `isAnimated` is `true`. |
-| `showIconDivider` | `Boolean` | `false` | Renders a vertical divider between the `#icon` slot and the label. |
-| `iconPosition` | `String` | `"left"` | Placement of the icon and divider (`"left"` or `"right"`). |
-
-## Events
-
-No custom events. All native button events (`click`, `focus`, `blur`, …) bubble up via `$attrs`.
-
-## Slots
-
-| Name | Scope | Description |
-| --- | --- | --- |
-| `default` | — | Button label / content. |
-| `icon` | — | Icon element (rendered before or after the label depending on `iconPosition`). |
-| `svg` | — | Overrides the built-in loader SVG (only used while `isAnimated`). |
+# AbButton — AI Reference
+
+Customizable button with optional loader animation and leading icon slot.
+
+## Usage
+
+```vue
+<template>
+  <ab-button color="primary">Save</ab-button>
+
+  <ab-button color="secondary" is-outline show-icon-divider>
+    <template #icon><i class="bi bi-plus-lg"></i></template>
+    New Item
+  </ab-button>
+
+  <ab-button color="primary" :is-animated="isSaving" is-hide-text-on-animate>
+    Save
+  </ab-button>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const isSaving = ref(false);
+</script>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `type` | `String` | `"button"` | Native button type (`button`, `submit`, `reset`). |
+| `color` | `String` | `"primary"` | Color variant (primary, secondary, success, danger, warning, info, light, dark). |
+| `size` | `String` | `"md"` | Button size (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`). |
+| `isOutline` | `Boolean` | `false` | Applies the outline style for the selected color. |
+| `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. |
+| `isHideTextOnAnimate` | `Boolean` | `false` | Hides the default slot content while `isAnimated` is `true`. |
+| `showIconDivider` | `Boolean` | `false` | Renders a vertical divider between the `#icon` slot and the label. |
+| `iconPosition` | `String` | `"left"` | Placement of the icon and divider (`"left"` or `"right"`). |
+
+## Events
+
+No custom events. All native button events (`click`, `focus`, `blur`, …) bubble up via `$attrs`.
+
+## Slots
+
+| Name | Scope | Description |
+| --- | --- | --- |
+| `default` | — | Button label / content. |
+| `icon` | — | Icon element (rendered before or after the label depending on `iconPosition`). |
+| `svg` | — | Overrides the built-in loader SVG (only used while `isAnimated`). |

package/.ai/ai_ref_AbCard.md

@@ -1,51 +1,51 @@
-# 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.
-
-## 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. |
-| `showBorder` | `Boolean` | `false` | Whether to display the header and footer borders. |
-| `variation` | `String` | `""` | Generic variation class to append to the root. |
-
-## 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>
-
-  <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>
-```
-
-## 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
+
+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.
+
+## 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. |
+| `showBorder` | `Boolean` | `false` | Whether to display the header and footer borders. |
+| `variation` | `String` | `""` | Generic variation class to append to the root. |
+
+## 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>
+
+  <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>
+```
+
+## 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_AbCarousel.md

@@ -1,36 +1,36 @@
-# AbCarousel — AI Reference
-
-Rotating slider for images or arbitrary HTML content. Supports horizontal/vertical orientations, autoplay, edge-fade, and outside/hover-only navigation buttons.
-
-## Usage
-
-```vue
-<template>
-  <ab-carousel edge-fade autoplay :autoplay-interval="4000">
-    <img src="/slide1.jpg" alt="" />
-    <img src="/slide2.jpg" alt="" />
-  </ab-carousel>
-
-  <ab-carousel orientation="vertical" nav-outside nav-on-hover>
-    <ab-card v-for="card in cards" :key="card.id">…</ab-card>
-  </ab-carousel>
-</template>
-```
-
-## Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `scrollAmount` | `Number` | `200` | Pixels scrolled per click. When children exist, falls back to item width. |
-| `orientation` | `String` | `"horizontal"` | `horizontal` or `vertical`. |
-| `edgeFade` | `Boolean` | `false` | Fade the leading/trailing edges. |
-| `autoplay` | `Boolean` | `false` | Auto-scroll enabled. |
-| `autoplayInterval` | `Number` | `3000` | Autoplay interval in ms. |
-| `navOutside` | `Boolean` | `false` | Render nav buttons outside the carousel. |
-| `navOnHover` | `Boolean` | `false` | Show nav buttons only on hover. |
-
-## Slots
-
-| Name | Description |
-| --- | --- |
-| `default` | Carousel items (images, cards, or arbitrary HTML). |
+# AbCarousel — AI Reference
+
+Rotating slider for images or arbitrary HTML content. Supports horizontal/vertical orientations, autoplay, edge-fade, and outside/hover-only navigation buttons.
+
+## Usage
+
+```vue
+<template>
+  <ab-carousel edge-fade autoplay :autoplay-interval="4000">
+    <img src="/slide1.jpg" alt="" />
+    <img src="/slide2.jpg" alt="" />
+  </ab-carousel>
+
+  <ab-carousel orientation="vertical" nav-outside nav-on-hover>
+    <ab-card v-for="card in cards" :key="card.id">…</ab-card>
+  </ab-carousel>
+</template>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `scrollAmount` | `Number` | `200` | Pixels scrolled per click. When children exist, falls back to item width. |
+| `orientation` | `String` | `"horizontal"` | `horizontal` or `vertical`. |
+| `edgeFade` | `Boolean` | `false` | Fade the leading/trailing edges. |
+| `autoplay` | `Boolean` | `false` | Auto-scroll enabled. |
+| `autoplayInterval` | `Number` | `3000` | Autoplay interval in ms. |
+| `navOutside` | `Boolean` | `false` | Render nav buttons outside the carousel. |
+| `navOnHover` | `Boolean` | `false` | Show nav buttons only on hover. |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `default` | Carousel items (images, cards, or arbitrary HTML). |

package/.ai/ai_ref_AbChart.md

@@ -1,46 +1,46 @@
-# AbChart — AI Reference
-
-Chart component powered by Apache ECharts (via vue-echarts). Supports full ECharts option objects and a simplified props-based API for common chart types.
-
-## Usage
-
-```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>
-```
-
-Full ECharts option (overrides all other props):
-
-```vue
-<template>
-  <AbChart :option="option" height="400px" />
-</template>
-```
-
-## Props
-
-| Name | Type | Default | Description |
-| :--- | :--- | :--- | :--- |
-| `option` | `Object` | `{}` | Full ECharts option object. If provided, overrides all other props. |
-| `chartType` | `String` | `""` | Chart type for simplified API (`"line"`, `"bar"`, `"pie"`). |
-| `xAxisData` | `Array` | `[]` | Categories for the X-axis. |
-| `seriesData` | `Array` | `[]` | Data points. For pie charts use `[{ value: 10, name: 'A' }]`. |
-| `xAxisType` | `String` | `"category"` | ECharts X-axis type (`"value"`, `"category"`, `"time"`, `"log"`). |
-| `yAxisType` | `String` | `"value"` | ECharts Y-axis type. |
-| `legendOrient` | `String` | `""` | Legend orientation (`"vertical"`, `"horizontal"`). |
-| `showPointValues` | `Boolean` | `false` | Display value labels on each data point. |
-| `height` | `String` | `"400px"` | Chart container height. |
-
-## Notes
-
-- **Tree Shaking**: Internally imports only needed ECharts modules (`CanvasRenderer`, `LineChart`, `PieChart`, `BarChart`, `GridComponent`, `TitleComponent`, `TooltipComponent`, `LegendComponent`).
-- **Autoresize**: Enabled by default.
-- **Pie Charts**: When `chartType="pie"`, `xAxis`/`yAxis` are automatically omitted.
-- Requires peer dependencies: `echarts`, `vue-echarts`.
+# AbChart — AI Reference
+
+Chart component powered by Apache ECharts (via vue-echarts). Supports full ECharts option objects and a simplified props-based API for common chart types.
+
+## Usage
+
+```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>
+```
+
+Full ECharts option (overrides all other props):
+
+```vue
+<template>
+  <AbChart :option="option" height="400px" />
+</template>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `option` | `Object` | `{}` | Full ECharts option object. If provided, overrides all other props. |
+| `chartType` | `String` | `""` | Chart type for simplified API (`"line"`, `"bar"`, `"pie"`). |
+| `xAxisData` | `Array` | `[]` | Categories for the X-axis. |
+| `seriesData` | `Array` | `[]` | Data points. For pie charts use `[{ value: 10, name: 'A' }]`. |
+| `xAxisType` | `String` | `"category"` | ECharts X-axis type (`"value"`, `"category"`, `"time"`, `"log"`). |
+| `yAxisType` | `String` | `"value"` | ECharts Y-axis type. |
+| `legendOrient` | `String` | `""` | Legend orientation (`"vertical"`, `"horizontal"`). |
+| `showPointValues` | `Boolean` | `false` | Display value labels on each data point. |
+| `height` | `String` | `"400px"` | Chart container height. |
+
+## Notes
+
+- **Tree Shaking**: Internally imports only needed ECharts modules (`CanvasRenderer`, `LineChart`, `PieChart`, `BarChart`, `GridComponent`, `TitleComponent`, `TooltipComponent`, `LegendComponent`).
+- **Autoresize**: Enabled by default.
+- **Pie Charts**: When `chartType="pie"`, `xAxis`/`yAxis` are automatically omitted.
+- Requires peer dependencies: `echarts`, `vue-echarts`.

package/.ai/ai_ref_AbColorPicker.md

@@ -1,42 +1,42 @@
-# AbColorPicker — AI Reference
-
-Radio-style color swatch picker. Takes a list of named colors and lets users pick one.
-
-## Usage
-
-```vue
-<template>
-  <ab-color-picker
-    v-model="themeColor"
-    name="theme"
-    :colors="[
-      { name: 'blue', color: '#2563eb', title: 'Blue' },
-      { name: 'green', color: '#16a34a', title: 'Green' },
-    ]"
-    align="left"
-    border-radius="50%"
-  />
-</template>
-
-<script setup>
-import { ref } from 'vue';
-const themeColor = ref('blue');
-</script>
-```
-
-## Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `modelValue` | `String` | `""` | Selected color `name` (v-model). |
-| `name` | `String` | `"color"` | Radio group name. |
-| `colors` | `Array` | `[]` | Each: `{ name, color, title? }`. |
-| `align` | `String` | `"left"` | Flex alignment (`left`, `center`, `right`, …). |
-| `borderRadius` | `String` | `"50%"` | Swatch border-radius. |
-| `size` | `String` | `"md"` | Item size (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`). |
-
-## Events
-
-| Event | Payload | Description |
-| --- | --- | --- |
-| `update:modelValue` | `colorName` | v-model sync — emits the color `name`, not the hex value. |
+# AbColorPicker — AI Reference
+
+Radio-style color swatch picker. Takes a list of named colors and lets users pick one.
+
+## Usage
+
+```vue
+<template>
+  <ab-color-picker
+    v-model="themeColor"
+    name="theme"
+    :colors="[
+      { name: 'blue', color: '#2563eb', title: 'Blue' },
+      { name: 'green', color: '#16a34a', title: 'Green' },
+    ]"
+    align="left"
+    border-radius="50%"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const themeColor = ref('blue');
+</script>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `modelValue` | `String` | `""` | Selected color `name` (v-model). |
+| `name` | `String` | `"color"` | Radio group name. |
+| `colors` | `Array` | `[]` | Each: `{ name, color, title? }`. |
+| `align` | `String` | `"left"` | Flex alignment (`left`, `center`, `right`, …). |
+| `borderRadius` | `String` | `"50%"` | Swatch border-radius. |
+| `size` | `String` | `"md"` | Item size (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`). |
+
+## Events
+
+| Event | Payload | Description |
+| --- | --- | --- |
+| `update:modelValue` | `colorName` | v-model sync — emits the color `name`, not the hex value. |