@appsbd/vue3-appsbd-ui 1.0.4 → 1.0.5

package/.ai/ai_ref_AbInputField.md

@@ -1,66 +1,66 @@
-# 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.
-
-## 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). |
+# 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.
+
+## 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). |

package/.ai/ai_ref_AbInputTag.md

@@ -1,56 +1,56 @@
-# AbInputTag — AI Reference
-
-Multi-tag input — lets users enter and manage a list of tags. Optionally supports an `options` array for autocomplete-style selection.
-
-## Usage
-
-```vue
-<template>
-  <ab-input-tag v-model="tags" name="tags" label="Tags" placeholder="Type and press Enter" :max="10" hints="Up to 10 tags" />
-
-  <ab-input-tag v-model="skills" name="skills" :options="['Vue', 'React', 'Angular', 'Svelte']" />
-</template>
-
-<script setup>
-import { ref } from 'vue';
-const tags = ref([]);
-const skills = ref([]);
-</script>
-```
-
-## Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `modelValue` | `Array` | `[]` | v-model array of selected tags. |
-| `options` | `Array` | `[]` | Each entry: `{ val, title }` or a plain string. |
-| `label` | `String` | `""` | Field label. |
-| `size` | `String` | `"md"` | Adjusts component size (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`). |
-| `placeholder` | `String` | `""` | Placeholder text. |
-| `name` | `String` | **required** | VeeValidate field name. |
-| `rules` | `String \| Object` | `""` | VeeValidate rules. |
-| `containerClass` | `String` | `"mb-3"` | Wrapper class. |
-| `hints` | `String` | `""` | Helper text. |
-| `prefix` | `String` | `""` | Prefix icon/text. |
-| `postfix` | `String` | `""` | Postfix icon/text. |
-| `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
-
-| Event | Payload | Description |
-| --- | --- | --- |
-| `update:modelValue` | `Array` | v-model sync. |
-
-## Slots
-
-| Name | Description |
-| --- | --- |
-| `label` | Custom label. |
-| `prefix` | Prefix icon/text. |
-| `icon` | Custom icon inside the input. |
-| `postfix` | Postfix icon/text. |
-| `hints` | Custom hints. |
+# AbInputTag — AI Reference
+
+Multi-tag input — lets users enter and manage a list of tags. Optionally supports an `options` array for autocomplete-style selection.
+
+## Usage
+
+```vue
+<template>
+  <ab-input-tag v-model="tags" name="tags" label="Tags" placeholder="Type and press Enter" :max="10" hints="Up to 10 tags" />
+
+  <ab-input-tag v-model="skills" name="skills" :options="['Vue', 'React', 'Angular', 'Svelte']" />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const tags = ref([]);
+const skills = ref([]);
+</script>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `modelValue` | `Array` | `[]` | v-model array of selected tags. |
+| `options` | `Array` | `[]` | Each entry: `{ val, title }` or a plain string. |
+| `label` | `String` | `""` | Field label. |
+| `size` | `String` | `"md"` | Adjusts component size (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`). |
+| `placeholder` | `String` | `""` | Placeholder text. |
+| `name` | `String` | **required** | VeeValidate field name. |
+| `rules` | `String \| Object` | `""` | VeeValidate rules. |
+| `containerClass` | `String` | `"mb-3"` | Wrapper class. |
+| `hints` | `String` | `""` | Helper text. |
+| `prefix` | `String` | `""` | Prefix icon/text. |
+| `postfix` | `String` | `""` | Postfix icon/text. |
+| `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
+
+| Event | Payload | Description |
+| --- | --- | --- |
+| `update:modelValue` | `Array` | v-model sync. |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `label` | Custom label. |
+| `prefix` | Prefix icon/text. |
+| `icon` | Custom icon inside the input. |
+| `postfix` | Postfix icon/text. |
+| `hints` | Custom hints. |

package/.ai/ai_ref_AbKbd.md

@@ -1,23 +1,23 @@
-# AbKbd — AI Reference
-
-Styled `<kbd>`-like keyboard key chip. Compose multiple into a chord using `AbKbdGroup`.
-
-## Usage
-
-```vue
-<template>
-  Press <ab-kbd>Esc</ab-kbd> to close.
-
-  <ab-kbd-group>
-    <ab-kbd>⌘</ab-kbd>
-    <ab-kbd>Shift</ab-kbd>
-    <ab-kbd>P</ab-kbd>
-  </ab-kbd-group>
-</template>
-```
-
-## Slots
-
-| Name | Description |
-| --- | --- |
-| `default` | Key label (typically a single character or short word). |
+# AbKbd — AI Reference
+
+Styled `<kbd>`-like keyboard key chip. Compose multiple into a chord using `AbKbdGroup`.
+
+## Usage
+
+```vue
+<template>
+  Press <ab-kbd>Esc</ab-kbd> to close.
+
+  <ab-kbd-group>
+    <ab-kbd>⌘</ab-kbd>
+    <ab-kbd>Shift</ab-kbd>
+    <ab-kbd>P</ab-kbd>
+  </ab-kbd-group>
+</template>
+```
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `default` | Key label (typically a single character or short word). |

package/.ai/ai_ref_AbKbdGroup.md

@@ -1,21 +1,21 @@
-# AbKbdGroup — AI Reference
-
-Visual grouping container for multiple `AbKbd` chips — renders keyboard chords / shortcuts.
-
-## Usage
-
-```vue
-<template>
-  <ab-kbd-group>
-    <ab-kbd>Ctrl</ab-kbd>
-    <ab-kbd>Alt</ab-kbd>
-    <ab-kbd>Del</ab-kbd>
-  </ab-kbd-group>
-</template>
-```
-
-## Slots
-
-| Name | Description |
-| --- | --- |
-| `default` | One or more `AbKbd` children. |
+# AbKbdGroup — AI Reference
+
+Visual grouping container for multiple `AbKbd` chips — renders keyboard chords / shortcuts.
+
+## Usage
+
+```vue
+<template>
+  <ab-kbd-group>
+    <ab-kbd>Ctrl</ab-kbd>
+    <ab-kbd>Alt</ab-kbd>
+    <ab-kbd>Del</ab-kbd>
+  </ab-kbd-group>
+</template>
+```
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `default` | One or more `AbKbd` children. |

package/.ai/ai_ref_AbMainLayout.md

@@ -0,0 +1,106 @@
+# AbMainLayout — AI Reference
+
+Full-page application shell with left sidebar, right sidebar, header, body, and footer slots. On desktop the left sidebar is always visible; on mobile (< 576px) it becomes an overlay drawer with a backdrop. Use this as the top-level layout wrapper when building admin dashboards or panel-style applications.
+
+## Installation
+
+```bash
+npm install @vue3-appsbd-ui
+```
+
+`AbMainLayout` is **not** globally registered. Import it explicitly:
+
+```js
+import { AbMainLayout } from "vue3-appsbd-ui";
+```
+
+## Usage
+
+```vue
+<template>
+  <ab-main-layout ref="layoutRef">
+    <template #leftSidebar>
+      <ab-sidebar app-unique-id="my-app">
+        <ab-side-menu-item :to="{ name: 'dashboard' }">Dashboard</ab-side-menu-item>
+      </ab-sidebar>
+    </template>
+
+    <template #pageHeader>
+      <div class="d-flex align-items-center justify-content-between">
+        <h1>My App</h1>
+        <ab-dark-mode-toggler size="xs" />
+      </div>
+    </template>
+
+    <template #body>
+      <router-view />
+    </template>
+
+    <template #pageFooter>
+      <span>&copy; 2026 My Company</span>
+    </template>
+  </ab-main-layout>
+</template>
+
+<script setup>
+import { AbMainLayout } from "vue3-appsbd-ui";
+import { ref } from "vue";
+
+const layoutRef = ref(null);
+</script>
+```
+
+### Mobile sidebar toggle
+
+On mobile, call `toggleLeftSidebar()` via the template ref to open/close the drawer:
+
+```vue
+<template>
+  <ab-main-layout ref="layoutRef">
+    <template #pageHeader>
+      <button @click="layoutRef?.toggleLeftSidebar()">☰</button>
+      <h1>My App</h1>
+    </template>
+    <!-- ... -->
+  </ab-main-layout>
+</template>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `headerClass` | `String` | `"apbd-bordered"` | CSS class applied to the page header wrapper. Use `"apbd-bordered"` for a bordered header or `""` for no border. |
+| `footerClass` | `String` | `""` | CSS class applied to the page footer wrapper. |
+
+## Slots
+
+| Name | Scoped Payload | Description |
+| --- | --- | --- |
+| `leftSidebar` | — | Left sidebar panel. On desktop it's always visible; on mobile it slides in as a drawer. Typically hosts `AbSidebar`. |
+| `pageHeader` | `{ headerClass }` | Top header bar. Receives the resolved `headerClass` as a scoped slot prop. |
+| `bodyHeader` | — | Content rendered above the scrollable body area. |
+| `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`. |
+
+## Exposed methods
+
+| Name | Signature | Description |
+| --- | --- | --- |
+| `isLeftSidebarOpen` | `Ref<boolean>` | Reactive state of the left sidebar (read-only). |
+| `isRightSidebarOpen` | `Ref<boolean>` | Reactive state of the right sidebar (read-only). |
+| `toggleLeftSidebar` | `(state?: boolean) => void` | Toggle or explicitly set left sidebar visibility. |
+| `toggleRightSidebar` | `(state?: boolean) => void` | Toggle or explicitly set right sidebar visibility. |
+
+## Provides
+
+The component provides a `layoutState` injection key to all descendants:
+
+```js
+inject: ['layoutState']
+// layoutState = { isLeftSidebarOpen, isRightSidebarOpen, toggleLeftSidebar, toggleRightSidebar }
+```
+
+Child components (like `AbSidebar`) can inject this to react to or control the sidebar state.

package/.ai/ai_ref_AbMultiSelect.md

@@ -1,78 +1,78 @@
-# AbMultiSelect — AI Reference
-
-Searchable single/multi/tag select. Custom built-in replacement for `@vueform/multiselect` — no third-party theme CSS required.
-
-## Usage
-
-```vue
-<template>
-  <ab-multi-select v-model="country" name="country" label="Country" :options="countries" label-key="title" value-key="val" searchable />
-
-  <ab-multi-select v-model="skills" name="skills" label="Skills" mode="multiple" :options="skillOptions" :max="5" />
-
-  <ab-multi-select v-model="hashtags" name="hashtags" mode="tags" searchable />
-
-  <ab-multi-select v-model="user" name="user" is-ajax-search searchable :on-search="searchUsers" :loading="isSearching" />
-</template>
-```
-
-## Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `modelValue` | `any` | `null` | v-model value. |
-| `label` | `String` | `""` | Field label. |
-| `placeholder` | `String` | `""` | Placeholder text. |
-| `type` | `String` | `"text"` | Input type. |
-| `name` | `String` | **required** | VeeValidate field name. |
-| `rules` | `String \| Object` | `""` | VeeValidate rules. |
-| `containerClass` | `String` | `"mb-3"` | Wrapper class. |
-| `hints` | `String` | `""` | Helper text. |
-| `multiple` | `Boolean` | `false` | Deprecated — use `mode` instead. |
-| `searchable` | `Boolean` | `false` | Enable option search/filter. |
-| `mode` | `String` | `"single"` | `single`, `multiple`, or `tags`. |
-| `size` | `String` | `"md"` | Adjusts component size (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`). |
-| `options` | `Array` | `[]` | Available options. |
-| `labelKey` | `String` | `"title"` | Property to use for label. |
-| `valueKey` | `String` | `"val"` | Property to use for value. |
-| `max` | `Number` | `-1` | Max selections; `-1` = unlimited. |
-| `object` | `Boolean` | `false` | Return full objects instead of values. |
-| `prefix` | `String` | `""` | Prefix text. |
-| `postfix` | `String` | `""` | Postfix text. |
-| `isAjaxSearch` | `Boolean` | `false` | Enable async search via `onSearch`. |
-| `onSearch` | `Function` | `null` | Async handler `(query) => Promise<options>`. |
-| `hideSelected` | `Boolean` | `true` | Hide already-selected items from dropdown. |
-| `loading` | `Boolean` | `false` | Show a loading spinner. |
-| `disabled` | `Boolean` | `false` | Disable the field. |
-| `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
-
-| Event | Payload | Description |
-| --- | --- | --- |
-| `update:modelValue` | `value` | v-model sync. |
-| `clear` | — | Selection cleared. |
-| `change` | `value` | Value changed. |
-| `select` | `value` | An option was selected. |
-| `open` | — | Dropdown opened. |
-| `close` | — | Dropdown closed. |
-| `search-change` | `query` | Search input changed. |
-
-## Slots
-
-| Name | Scope | Description |
-| --- | --- | --- |
-| `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. |
-| `loader-icon` | — | Custom loader icon. |
+# AbMultiSelect — AI Reference
+
+Searchable single/multi/tag select. Custom built-in replacement for `@vueform/multiselect` — no third-party theme CSS required.
+
+## Usage
+
+```vue
+<template>
+  <ab-multi-select v-model="country" name="country" label="Country" :options="countries" label-key="title" value-key="val" searchable />
+
+  <ab-multi-select v-model="skills" name="skills" label="Skills" mode="multiple" :options="skillOptions" :max="5" />
+
+  <ab-multi-select v-model="hashtags" name="hashtags" mode="tags" searchable />
+
+  <ab-multi-select v-model="user" name="user" is-ajax-search searchable :on-search="searchUsers" :loading="isSearching" />
+</template>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `modelValue` | `any` | `null` | v-model value. |
+| `label` | `String` | `""` | Field label. |
+| `placeholder` | `String` | `""` | Placeholder text. |
+| `type` | `String` | `"text"` | Input type. |
+| `name` | `String` | **required** | VeeValidate field name. |
+| `rules` | `String \| Object` | `""` | VeeValidate rules. |
+| `containerClass` | `String` | `"mb-3"` | Wrapper class. |
+| `hints` | `String` | `""` | Helper text. |
+| `multiple` | `Boolean` | `false` | Deprecated — use `mode` instead. |
+| `searchable` | `Boolean` | `false` | Enable option search/filter. |
+| `mode` | `String` | `"single"` | `single`, `multiple`, or `tags`. |
+| `size` | `String` | `"md"` | Adjusts component size (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`). |
+| `options` | `Array` | `[]` | Available options. |
+| `labelKey` | `String` | `"title"` | Property to use for label. |
+| `valueKey` | `String` | `"val"` | Property to use for value. |
+| `max` | `Number` | `-1` | Max selections; `-1` = unlimited. |
+| `object` | `Boolean` | `false` | Return full objects instead of values. |
+| `prefix` | `String` | `""` | Prefix text. |
+| `postfix` | `String` | `""` | Postfix text. |
+| `isAjaxSearch` | `Boolean` | `false` | Enable async search via `onSearch`. |
+| `onSearch` | `Function` | `null` | Async handler `(query) => Promise<options>`. |
+| `hideSelected` | `Boolean` | `true` | Hide already-selected items from dropdown. |
+| `loading` | `Boolean` | `false` | Show a loading spinner. |
+| `disabled` | `Boolean` | `false` | Disable the field. |
+| `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
+
+| Event | Payload | Description |
+| --- | --- | --- |
+| `update:modelValue` | `value` | v-model sync. |
+| `clear` | — | Selection cleared. |
+| `change` | `value` | Value changed. |
+| `select` | `value` | An option was selected. |
+| `open` | — | Dropdown opened. |
+| `close` | — | Dropdown closed. |
+| `search-change` | `query` | Search input changed. |
+
+## Slots
+
+| Name | Scope | Description |
+| --- | --- | --- |
+| `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. |
+| `loader-icon` | — | Custom loader icon. |